/*Announcement Bar CSS*/
/* Angel City FC Announcement Bar Styles */

/*
 * Header design tokens. Mirrors the premium system in hubspot/Homepage/styles.css so the
 * global header reads as part of the same page, not a separate era. The `--acfc-*` aliases
 * at the bottom keep pre-existing rules (and the schedule ticker) working unchanged.
 */
 :root {
    --asphalt: #1c1c1c;
    --sol-rosa: #f1b1a5;
    --sol-rosa-dark: #e0a094;
    --sol-rosa-soft: rgba(241, 177, 165, 0.18);
    --sol-rosa-glow: rgba(241, 177, 165, 0.30);
    --white: #ffffff;
    --black: #1c1c1c;
    --transition-speed: 0.3s;

    /* Announcement strip height. Referenced everywhere the strip used to hardcode 33px so the
       bar, the rotator viewport and the sticky offset can never drift apart. */
    --acfc-hdr-bar-h: 40px;

    --acfc-hdr-hairline: rgba(28, 28, 28, 0.08);
    --acfc-hdr-wash: rgba(241, 177, 165, 0.10);
    --acfc-hdr-wash-strong: rgba(241, 177, 165, 0.18);
    --acfc-hdr-font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.07);
    --shadow-pop: 0 18px 46px rgba(0, 0, 0, 0.14);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-full: 9999px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Aliases — the schedule ticker and older rules reference these names. */
    --acfc-sol-rosa: var(--sol-rosa);
    --acfc-sol-rosa-dark: var(--sol-rosa-dark);
    --acfc-asphalt-sched: var(--asphalt);
    --acfc-armour: #898c8f;
    --acfc-line: var(--acfc-hdr-hairline);
    --acfc-white: var(--white);
  }

  @media (max-width: 768px) {
    :root { --acfc-hdr-bar-h: 38px; }
  }
  
  /* Reset */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /*.header__top-announcement .container-xl {
    max-width: -webkit-fill-available !important;
  }*/
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
  }
  
  /*
   * Main Announcement Bar Container
   *
   * `-outer` / `-inner` are only produced by the standalone embeds in ./archive
   * (hubspot-custom-html-embed.html, hubspot-inline.html). The live header module renders
   * `.acfc-announcement-bar` directly inside `.header__menu-announcement`, so these two rules
   * are kept purely so those embeds keep working.
   */
  .acfc-announcement-bar-outer {
    position: sticky;
    top: 0;
    z-index: 10003;
  }
.header__menu-submenu.header__menu-submenu--level-2.list-unstyled.m-0 .right-content-wrap:last-of-type .inner .right-img {
  padding-top: 10px;
}
  .acfc-announcement-bar {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    /* Directional gradient instead of a flat fill — reads as a lit surface rather than a color band. */
    background: linear-gradient(100deg, #f5c0b6 0%, var(--sol-rosa) 42%, #eda898 100%);
    color: var(--asphalt);
    min-height: var(--acfc-hdr-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem;
    z-index: 10000;
    font-size: 13.5px;
    overflow: visible;
    font-family: var(--acfc-hdr-font);
    /* Hairline where the strip meets the nav row, so the two surfaces separate cleanly. */
    box-shadow: inset 0 -1px 0 rgba(28, 28, 28, 0.12);
  }

  /*
   * When the strip is embedded in the ACFC header module, keep it below `.header__bottom`
   * (z-index: 12–20) so the desktop logo overlap paints on top. Standalone bars outside
   * the header keep the high z-index above.
   */
  .header__container.acfc-hubspot-header .header__top-announcement .acfc-announcement-bar-outer,
  .header__container.acfc-hubspot-header .header__menu-announcement .acfc-announcement-bar-outer {
    z-index: 1;
  }
  .header__container.acfc-hubspot-header .header__top-announcement .acfc-announcement-bar,
  .header__container.acfc-hubspot-header .header__menu-announcement .acfc-announcement-bar {
    z-index: 1;
  }
  
  .acfc-announcement-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: 1270px;
    margin: 0 auto;
    position: relative;
  }
  
  .acfc-next-match-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .acfc-next-match-link:hover,
  .acfc-next-match-link:focus,
  .acfc-next-match-link:active,
  .acfc-next-match-link:visited {
    text-decoration: none !important;
    color: inherit !important;
  }
  
  .acfc-next-match-link span {
    color: inherit;
  }
  
  /* Next match retired — schedule ticker lives in main header */
  .acfc-next-match,
  #acfc-next-match-desktop,
  #acfc-next-match-mobile,
  .acfc-message.acfc-message--mobile-next-match {
    display: none !important;
  }

  /* Left Section: Next Match (legacy — hidden) */
  .acfc-next-match {
    display: none !important;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
  }
  
  .acfc-next-match-label { font-weight: 600; color: #1c1c1c; }
  .acfc-next-match-date  { font-weight: 700; color: #1c1c1c; }
  .acfc-next-match-vs    { font-weight: 400; color: rgba(0,0,0,0.7); font-size: 12px; }
  .acfc-next-match-team  { font-weight: 600; color: #1c1c1c; }
  
  .acfc-next-match-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
  }
  
  .acfc-next-match-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--asphalt) !important;
    color: var(--sol-rosa) !important;
    padding: 5px 14px;
    margin-left: 0rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    border-radius: var(--radius-full);
    font-family: var(--acfc-hdr-font);
    min-height: 26px;
    box-sizing: border-box;
    vertical-align: middle;
    box-shadow: 0 2px 10px rgba(28, 28, 28, 0.22);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    opacity: 1 !important;
  }
  
  .acfc-next-match-btn:hover,
  .acfc-next-match-btn:focus-visible {
    background-color: var(--asphalt) !important;
    color: var(--sol-rosa) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(28, 28, 28, 0.32);
    text-decoration: none !important;
    opacity: 1 !important;
  }
  
  /* Center Section: Rotating Messages */
  .acfc-rotating-messages {
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    flex: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: var(--acfc-hdr-bar-h);
    margin: 0 1rem;
  }
  
  .acfc-message-track {
    display: flex;
    align-items: center;
    position: relative;
    height: var(--acfc-hdr-bar-h);
    width: 100%;
    justify-content: center;
    overflow: hidden;
  }
  
  /*
   * Rotation is a crossfade plus a short rise. The outgoing message settles down and the incoming
   * one lifts into place, which makes the 500ms handoff read as intentional rather than as a blink.
   * Purely CSS — script.js only toggles .acfc-message-active.
   */
  .acfc-message {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 6px));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s var(--ease-out);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
  }
  
  .acfc-message.acfc-message-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: auto;
  }

  /*
   * Rotator: avoid :has() (patchy on mobile Safari). Until JS adds .acfc-rotator-ready, only the
   * first .acfc-message is shown; after ready, only .acfc-message-active is shown.
   */
  .acfc-message-track:not(.acfc-rotator-ready) .acfc-message {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .acfc-message-track:not(.acfc-rotator-ready) .acfc-message.acfc-message-active:not(.acfc-message--mobile-next-match) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .acfc-message-track.acfc-rotator-ready .acfc-message:not(.acfc-message-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .acfc-message-track.acfc-rotator-ready .acfc-message.acfc-message-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Suppress transition on initial load */
  .acfc-message.acfc-no-transition {
    transition: none !important;
  }
  
  /* Mobile-only next match message — uses visibility/opacity (not display:none)
     so JS-controlled active state transitions work correctly */
  .acfc-message--mobile-next-match {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  
  @media (max-width: 1100px) {
    /* On mobile, allow JS to control visibility via acfc-message-active */
    .acfc-message--mobile-next-match {
      visibility: hidden;
      opacity: 0;
    }
    .acfc-message--mobile-next-match.acfc-message-active {
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto;
    }
  }
  
  .acfc-message-link {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
  }
  
  .acfc-message-link:hover {
    text-decoration: none !important;
    opacity: 1 !important;
  }

  .acfc-message-link:focus-visible {
    outline: 2px solid var(--asphalt);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  
  .acfc-message-text {
    font-family: var(--acfc-hdr-font);
    /*text-transform: uppercase;*/
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--asphalt) !important;
    vertical-align: middle;
    text-decoration: none !important;
    /* Long promos truncate instead of pushing the CTA pill out of the bar. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .acfc-message-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--asphalt) !important;
    color: var(--sol-rosa) !important;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: var(--radius-full);
    font-family: var(--acfc-hdr-font);
    min-height: 26px;
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    box-shadow: 0 2px 10px rgba(28, 28, 28, 0.22);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    opacity: 1 !important;
  }
  
  .acfc-message-link:hover .acfc-message-cta,
  .acfc-message-link:focus-visible .acfc-message-cta {
    background-color: var(--asphalt) !important;
    color: var(--sol-rosa) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(28, 28, 28, 0.32);
    text-decoration: none !important;
    opacity: 1 !important;
  }
  
  /* Right Section: Social Icons */
  .acfc-social-icons {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  
  .acfc-social-link {
    color: var(--asphalt);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 28px hit area around a 16px glyph — the old 20px box was below any reasonable touch target. */
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    opacity: 1;
  }
  
  .acfc-social-link:hover,
  .acfc-social-link:focus-visible {
    color: var(--asphalt);
    opacity: 1;
    background-color: rgba(28, 28, 28, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .acfc-social-link:focus-visible {
    outline: 2px solid var(--asphalt);
    outline-offset: 1px;
  }
  
  .acfc-social-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }
  
  /* TikTok icon slightly larger 
  .acfc-social-link:first-child svg {
    height: 18px;
    width: 18px;
    margin-right: -5px;
  }*/
  
  /* Tablet Breakpoint */
  @media (max-width: 1100px) {
    .acfc-announcement-bar {
      padding: 0rem;
    }
  
    .acfc-next-match {
      display: none;
    }
  
    .acfc-social-icons {
      gap: 0.5rem;
    }
  
    .acfc-rotating-messages {
      margin: 0 1rem;
    }
  }
  
  /* Mobile Breakpoint */
  @media (max-width: 768px) {
    .acfc-announcement-bar {
      padding: 0;
      justify-content: center;
    }
  
    .acfc-announcement-bar-inner {
      padding: 0;
      max-width: 100%;
      grid-template-columns: 1fr;
      justify-items: center;
    }
  
    /* Hide next match left panel and social icons on mobile */
    .acfc-next-match,
    .acfc-social-icons {
      display: none;
    }
  
    .acfc-rotating-messages {
      grid-column: 1;
      justify-self: center;
      margin: 0;
      width: 100%;
      padding: 0;
    }
  
    .acfc-message-track {
      width: 100%;
      padding: 0;
    }
  
    .acfc-message-text {
      font-size: 12.5px;
    }
  
    .acfc-message-cta {
      text-transform: uppercase;
      font-size: 11px;
      padding: 4px 11px;
      min-height: 24px;
    }
  }
  
  /* Small Mobile Breakpoint */
  @media (max-width: 480px) {
    /* Room for a wrapped two-line promo. Messages are absolutely positioned so they can't
       size the bar themselves. */
    :root { --acfc-hdr-bar-h: 46px; }

    .acfc-announcement-bar {
      font-size: 12px;
      padding: 0;
    }

    .acfc-message {
      padding: 4px 10px;
      white-space: normal;
    }

    .acfc-message-link {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 3px;
    }

    .acfc-message-text {
      font-size: 12px;
      white-space: normal;
      text-overflow: clip;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      text-align: center;
    }
  }

  /* Header schedule ticker (also in header module require_css — keep in sync with hubspot/HeaderSchedule/styles.css)
     Tokens live in the single :root block at the top of this file. */
  .acfc-header-schedule {
    height: 50px;
    max-height: 50px;
    width: 100%;
    border: 1px solid var(--acfc-line);
    /* Faint vertical gradient so the row has some depth instead of reading as a plain white box. */
    background: linear-gradient(180deg, #ffffff 0%, #fcfbfa 100%);
    color: var(--acfc-asphalt-sched);
    display: flex;
    align-items: stretch;
    font-family: var(--acfc-hdr-font);
  }
  .acfc-header-schedule * { box-sizing: border-box; }
  .acfc-header-schedule__track {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    /* Proximity snapping tidies up drag releases without fighting the arrow buttons'
       scrollTo({ behavior: 'smooth' }). */
    scroll-snap-type: x proximity;
  }
  .acfc-header-schedule__track::-webkit-scrollbar { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .acfc-header-schedule__track {
      cursor: grab;
      -webkit-user-select: none;
      user-select: none;
    }
    .acfc-header-schedule__track:active { cursor: grabbing; }
  }
  .acfc-header-schedule__game {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--acfc-line);
    scroll-snap-align: start;
    position: relative;
    transition: background-color 0.2s var(--ease-out);
  }

  /* Rosa top accent + wash — desktop hover only; suppressed on touch/mobile to avoid sticky states. */
  .acfc-header-schedule__game::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--acfc-sol-rosa);
    transform: scaleX(0);
    transition: transform 0.25s var(--ease-out);
    pointer-events: none;
  }

  @media (hover: hover) {
    .acfc-header-schedule__game:not(.acfc-header-schedule__game--coming-soon):hover {
      background-color: var(--acfc-hdr-wash);
    }

    .acfc-header-schedule__game:not(.acfc-header-schedule__game--coming-soon):hover::before {
      transform: scaleX(1);
    }
  }

  .acfc-header-schedule__game:focus-visible::before {
    transform: scaleX(1);
  }

  .acfc-header-schedule__game:focus-visible {
    outline: 2px solid var(--acfc-sol-rosa);
    outline-offset: -2px;
  }
  .acfc-header-schedule__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    -webkit-user-drag: none;
  }
  .acfc-header-schedule__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    flex: 0 1 auto;
    max-width: min(200px, 52vw);
  }
  .acfc-header-schedule__line1 {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--acfc-asphalt-sched);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .acfc-header-schedule__line2 {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--acfc-armour);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .acfc-header-schedule__ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: var(--radius-full);
    border: 0;
    padding: 0 12px;
    text-decoration: none;
    font-size: 10px;
    /* An explicit line-height prevents the browser's default "normal" (~1.2) from adding
       unexpected space above and below text at small sizes, which shifted the label off-centre
       inside the pill on mobile even though align-items: center was set. */
    line-height: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--acfc-asphalt-sched);
    background: var(--acfc-sol-rosa);
    box-shadow: 0 1px 6px rgba(241, 177, 165, 0.5);
    flex-shrink: 0;
    margin: 0 5px;
    transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .acfc-header-schedule__ticket:hover {
    background: var(--acfc-sol-rosa-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(241, 177, 165, 0.65);
  }
  .acfc-header-schedule__game--coming-soon { cursor: default; }
  .acfc-header-schedule__ticket--coming-soon { opacity: 0.75; cursor: default; box-shadow: none; }
  .acfc-header-schedule__ticket--coming-soon:hover {
    background: var(--acfc-sol-rosa);
    transform: none;
    box-shadow: none;
  }
  .acfc-header-schedule__ticket-icon { display: none; width: 14px; height: 14px; }
  .acfc-header-schedule__ticket-icon path,
  .acfc-header-schedule__arrow svg path,
  .acfc-header-schedule__schedule-link svg path,
  .acfc-header-schedule__schedule-link svg rect {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .acfc-header-schedule__arrow,
  .acfc-header-schedule__schedule-link {
    width: 52px;
    min-width: 52px;
    border: 0;
    border-left: 1px solid var(--acfc-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--acfc-asphalt-sched);
    background: var(--acfc-white);
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
  }
  /*
   * Hover-capable pointers only. A tap leaves :hover latched on these buttons until the next tap
   * elsewhere, so on touch the rosa wash read as a stuck "selected" state on whichever arrow was
   * last used. The track's drag-scroll affordance is gated the same way further up.
   */
  @media (hover: hover) {
    .acfc-header-schedule__arrow:not([disabled]):hover,
    .acfc-header-schedule__schedule-link:hover {
      background-color: var(--acfc-hdr-wash-strong);
    }
  }
  .acfc-header-schedule__arrow:focus-visible,
  .acfc-header-schedule__schedule-link:focus-visible {
    outline: 2px solid var(--acfc-sol-rosa);
    outline-offset: -2px;
  }
  .acfc-header-schedule__arrow { cursor: pointer; }
  .acfc-header-schedule__arrow[disabled] { cursor: default; opacity: 0.35; }
  .acfc-header-schedule__arrow svg,
  .acfc-header-schedule__schedule-link svg { width: 18px; height: 18px; }
  .acfc-header-schedule__empty {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    padding: 0 14px;
    color: var(--acfc-armour);
    white-space: nowrap;
  }
  @media (max-width: 768px) {
    .acfc-header-schedule { height: 44px; max-height: 44px; }
    .acfc-header-schedule__game { padding: 4px 6px; gap: 6px; }
    .acfc-header-schedule__copy { max-width: min(180px, 58vw); gap: 2px !important; }
    .acfc-header-schedule__logo { width: 20px; height: 20px; }
    .acfc-header-schedule__line1 { font-size: 11px; }
    .acfc-header-schedule__line2 { font-size: 10px; }
    .acfc-header-schedule__ticket { min-height: 24px; padding: 0 10px; }
    .acfc-header-schedule__arrow,
    .acfc-header-schedule__schedule-link { width: 42px; min-width: 42px; }
  }

    /* Layout */
    body.nav-open {
        overflow: hidden;
    }
    
    /* Vars + transitions on any .header__container; sticky only on ACFC module (avoid pinning a duplicate theme header). */
    .header__container {
        --topNavXSpacing: 0.825rem;
        --topNavYSpacing: 0.75rem;
        --desktopNavXSpacing: 0.825rem;
        --desktopNavYSpacing: 2rem;
        --mobileNavXSpacing: 0;
        --mobileNavYSpacing: 0.75rem;
        --mobileMenuXSpacing: 1rem;
        --mobileMenuYSpacing: 0.5rem;
        --dropdownWidth: 220px;
        --dropdownYSpacing: 1.5rem;
        --dropdownXSpacing: 2rem;
        --dropdownLinkSpacing: 0.4rem;
        width: 100%;
        /*    box-shadow: 15px 25px 60px rgba(0, 0, 0, 0); */
        transition: background 200ms ease-in-out, box-shadow 200ms ease-in-out;
    }
    /*
     * Pin full stack: set --acfc-announcement-sticky-height on :root if announcement is outside this <header>.
     * Sticky is disabled if an ancestor has overflow:hidden or transform (fix in theme).
     */
    header.header__container.acfc-hubspot-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--acfc-announcement-sticky-height, 0px) !important;
        z-index: 9998 !important;
        width: 100%;
        align-self: flex-start;
    }
    
    /* Mobile quick links - hidden by default */
    .header__mobile-quick-links {
        display: none;
    }
    
    /* Show on mobile/tablet only */
    @media (max-width: 991px) {
        .header__mobile-quick-links {
            display: flex;
            gap: 14px;
            align-items: center;
            /* A fixed gap, not `auto`: .header__menu-col is a shrink-to-fit inline-flex box, so
               there is no free space for an auto margin to distribute and the links ended up
               flush against the hamburger. */
            margin-right: 20px;
        }
        
        .header__mobile-quick-link {
            font-family: var(--acfc-hdr-font);
            font-size: 15px;
            font-weight: 600;
            color: #FFFFFF;
            text-decoration: none;
            white-space: nowrap;
            /* Padded to a 44px tall target without changing the visual row height. */
            padding: 12px 2px;
            position: relative;
        }
        
        .header__mobile-quick-link:hover {
            color: #FFFFFF !important;
        }

        .header__mobile-quick-link::after {
            display: none;
        }
    }
    
    /* Adjust for very small screens if needed */
    @media (max-width: 480px) {
        .header__mobile-quick-links {
            gap: 12px;
            margin-right: 14px;
        }
        
        .header__mobile-quick-link {
            font-size: 15px;
        }
    }
    
    /* Schedule ticker row (HeaderSchedule) — full width; hidden when mobile nav open */
    .header__schedule-row {
        width: 100%;
        display: block;
        position: relative;
        z-index: 1;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }
    .header__schedule-row .acfc-header-schedule {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        z-index: 1;
    }
    @media (max-width: 991px) {
        body.nav-open .header__schedule-row {
            display: none;
        }
    }

    @media (max-width: 359px) {
      .listen-button {
        display: none !important;
      }
    }
  
    /* Both values: HubL sets data-topbar-fixed="false" when module "fixed top bar" is enabled (inverted). */
    .header__container[data-topbar-fixed="false"] .header__bottom,
    .header__container[data-topbar-fixed="true"] .header__bottom {
        width: 100%;
        z-index: 12;
        /*    box-shadow: 15px 25px 60px rgba(0, 0, 0, 0); */
        transition: background 200ms ease-in-out, box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
        min-height: 65px;
        border-bottom: 1px solid transparent;
    }

    /*
     * Once the page scrolls, the header floats over content and earns an edge + shadow. At rest it
     * stays flat so it reads as part of the page rather than a floating chrome bar.
     */
    header.header__container.acfc-hubspot-header.header-scroll .header__bottom {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
        border-bottom-color: var(--acfc-hdr-hairline);
    }
    
    
    
    /*
     * Fixed headers are always fixed — not just once the user has scrolled. Switching between
     * sticky (in-flow) and fixed (out-of-flow) on the first scroll pixel caused a visible content
     * jump even when body.paddingTop was compensated in the same JS tick, because the browser
     * batches the layout reflows separately. By keeping position:fixed unconditionally the layout
     * is stable from page load and there is never a jump.
     *
     * body.paddingTop is set once at JS init (see script.js initHeaderNav) instead of in the
     * scroll handler so there is no deferred layout shift.
     */
    header.header__container.acfc-hubspot-header[data-fixed='true'] {
        position: fixed !important;
        top: var(--acfc-announcement-sticky-height, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    header.header__container.acfc-hubspot-header[data-transparent='true'] {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--acfc-announcement-sticky-height, 0px) !important;
    }
    
    .header__container[data-topbar-fixed=true] .header__top {
        display: block;
        transform: translateY(0);
    }
    
    /* Keep module top bar visible with sticky stack (was hidden on scroll) */
    header.header__container.acfc-hubspot-header.header-scroll[data-topbar-fixed=true] .header__top {
        transform: none;
        display: block;
    }

    @media (min-width: 992px) {
      header.header__container.acfc-hubspot-header .header__schedule-row {
            margin-top: 0px;
        }
        header.header__container.acfc-hubspot-header .acfc-header-schedule__track {
            scroll-padding-left: 16px;
        }
    }
    
    .header__wrapper {
        display: flex;
        margin: 0 auto;
        align-items: center;
        max-height: 80px;
    }
    /* Bottom nav: vertically center links/CTAs; logo uses align-self:flex-start for overlap */
    .header__wrapper.header__wrapper--bottom {
        align-items: center;
    }
    
    .header__menu--top {
        display: flex;
        width: 100%;
        position: relative;
        z-index: 101;
        align-items: center;
    }
    
    .header__wrapper--top:not([data-length='1']) .header__menu--top .header__menu--top {
        width: auto;
    }
    
    .header__menu--align-justify .header__menu--top {
        justify-content: space-between;
    }
    
    .header__menu--align-center .header__menu--top {
        justify-content: center;
    }
    
    .header__menu--align-right .header__menu--top,
    .header__menu--align-justify[data-length='1'] .header__menu--top {
        justify-content: flex-end;
    }
    
    .header__menu--align-justify[data-length='1'][data-icons-position='left'] .header__menu--top,
    .header__menu--align-justify[data-length='1'][data-icons-position='right'] .header__menu--top {
        justify-content: space-between;
    }
    
    @media (min-width: 992px) {
        .header__container[data-layout='desktop'] .header__bottom {
            overflow: visible;
            height: auto;
            min-height: 65px;
            position: relative;
            z-index: 20;
        }
        .header__container[data-layout='desktop'] .header__wrapper.header__wrapper--bottom {
            overflow: visible;
            max-height: 65px;
            align-items: center;
        }
        /* Dropdowns / mega panels above schedule ticker (row z-index: 1) */
        .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-submenu,
        .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-submenu--level-2,
        .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-submenu--level-3 {
            z-index: 300;
        }
        .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu {
            z-index: 300;
        }
    }

    .header__container[data-layout='desktop'] .header__logo-col {
        /* 	margin: calc(var(--desktopNavYSpacing) / 1.55) 0; */
        position: relative;
        z-index: 10001;
        margin-top: -36px;
        align-self: flex-start;
    }

    .header__container[data-layout='desktop'] .header__logo {
        position: relative;
        z-index: 10001;
    }
    
    .header__button-col {
        margin: calc(var(--desktopNavYSpacing) / 2) 0;
        margin-left: var(--desktopNavXSpacing);
    }
    
    .header__search-col {
        margin: calc(var(--desktopNavYSpacing) / 2) 0;
        margin-left: calc(var(--desktopNavXSpacing) / 2);
    }
    
    .header__container--left .header__search-col.buttons-false {
        margin-left: var(--desktopNavXSpacing);
    }
    
    /* Language switcher */
    
    .header__menu-item--language-switcher .header__menu-submenu {
        padding: 0.5rem 0;
        width: fit-content;
        overflow: hidden;
    }
    
    /* Logo */
    .header__logo {
        /*padding-top: 26px;*/
    
        position: relative;
        z-index: 1;
    }
    .header__logo img {
        height: auto;
        max-width: 100%;
        transition: all .3s ease;
    }
    /*header.header-scroll .header__logo img {
        width: 60px;
    }*/
    
    /* Menu */
    
    .header__menu-container--mobile {
        display: none;
    }
    
    .header__menu--mobile {
        position: fixed;
        z-index: 99;
        top: var(--navHeight);
        right: 0;
        left: 0;
        bottom: 0;
        display: none;
        width: 100%;
        height: calc(100vh - var(--navHeight));
        overflow: hidden auto;
        padding: calc(var(--mobileMenuYSpacing) * 3) 0;
        /*    border-top: 1px solid #eaeaea; */
    }
    
    .header__menu-link,
    .header__menu-item svg,
    .header__menu-item svg g,
    .header__menu-item svg path {
        transition: color, fill 0.25s ease-in-out;
    }
    
    /* Menu items */
    
    .header__menu-item {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    
    /* Menu items - top level */
    .has-next-false {
        margin: 0 calc(var(--topNavXSpacing) * -1);
    }
    
    .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link {
        padding-top: var(--desktopNavYSpacing);
        padding-bottom: var(--desktopNavYSpacing);
        padding-left: var(--desktopNavXSpacing);
        padding-right: var(--desktopNavXSpacing);
        padding-top: 3px;
        padding-bottom: 3px;
    }

    /*
     * Sol Rosa indicator that wipes out from the centre on hover / focus / current page. Uses a
     * pseudo-element so the module's editor-controlled link colour is left untouched.
     */
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link {
        position: relative;
    }

    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link::after {
        content: '';
        position: absolute;
        left: var(--desktopNavXSpacing);
        right: var(--desktopNavXSpacing);
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--sol-rosa);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.28s var(--ease-out);
        pointer-events: none;
    }

    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1:hover>.header__menu-link::after,
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link:focus-visible::after,
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1.header__menu-item--open>.header__menu-link::after,
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1.header__menu-link--active-link>.header__menu-link::after,
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link[aria-current='page']::after {
        transform: scaleX(1);
    }

    /*
     * Hover bridge between a nav item and its open panel.
     *
     * A mega panel has to span the whole row, so it is positioned against .header__wrapper--bottom
     * instead of its own <li> (that <li> is static). `top: 100%` therefore resolves to the
     * wrapper's height, not the item's, and leaves ~11px of bare header below the item's underline.
     * Since open/close is driven by mouseover/mouseout on the <li>, the pointer crossing that strip
     * on its way down counted as leaving the item and shut the panel before it could be reached.
     *
     * The strip hangs off the link because that is the one box here that is reliably positioned. It
     * exists only while the panel is open, so it never enlarges the area that *opens* a dropdown,
     * and it keeps the link's own z-index, leaving the panel painted above it so the panel's rows
     * stay clickable where the two overlap.
     */
    .header__container[data-layout='desktop'] .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1.header__menu-item--has-submenu.header__menu-item--open>.header__menu-link::before {
        content: '';
        position: absolute;
        top: 100%;
        /* Slight horizontal bleed so a diagonal approach to the panel does not fall off the edge. */
        left: -8px;
        right: -8px;
        /* Comfortably clears the measured gap; any excess simply overlaps the panel. */
        height: 20px;
    }

    .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-link:focus-visible {
        outline: 2px solid var(--sol-rosa);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }
    
    .header__menu--top .header__menu-item--depth-1>.header__menu-link {
        padding-top: var(--topNavYSpacing);
        padding-bottom: var(--topNavYSpacing);
        padding-left: var(--topNavXSpacing);
        padding-right: var(--topNavXSpacing);
        opacity: 1;
        transition: opacity 0.15s ease-in-out;
        will-change: transform, opacity;
    }
    
    .header__menu--top .header__menu-item--depth-1>.header__menu-link:hover {
        opacity: 0.75;
    }
    
    .header__menu.header__menu--top>div:first-child>ul:first-child>li:first-child>a,
    .header__menu.header__menu--top>div:first-child>ul:first-child>li:first-child>button {
        padding-left: 0;
    }
    
    .header__menu.header__menu--top>div:last-child>ul:last-child>li:last-child>a,
    .header__menu.header__menu--top>div:last-child>ul:last-child>li:last-child>button {
        padding-right: 0;
    }
    
    /*  Top bar - announcement
     *  Editor-authored rich text used to arrive underlined at rest, which fought the pill CTAs.
     *  Underline is now a hover affordance only. */
    .header__menu-announcement a {
        color: inherit;
        text-decoration: none;
    }
    
    .header__menu-announcement a:hover {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    /* Pill CTAs opt out — they read as buttons, not links. */
    .header__menu-announcement a.acfc-message-link:hover,
    .header__menu-announcement a.acfc-message-link:hover .acfc-message-cta,
    .header__menu-announcement a.acfc-next-match-btn:hover {
        text-decoration: none;
    }
    
    .header__menu-announcement :last-child {
        margin-bottom: 0;
    }

    /*
     * The container gutters let the row behind the strip show through on desktop. Painting the
     * same gradient here makes the band read edge-to-edge. Declared as background-image so the
     * editor's top_bar.background colour field still applies underneath as the fallback.
     */
    header.header__container.acfc-hubspot-header .header__top.header__top-announcement {
        background-image: linear-gradient(100deg, #f5c0b6 0%, var(--sol-rosa) 42%, #eda898 100%);
    }

    /* Rotating messages in HubSpot header rich text (module require_css may also define these) */
    .header__menu-announcement .acfc-announcement-bar {
        max-width: 100%;
        width: 100%;
        min-height: var(--acfc-hdr-bar-h);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 0.5rem;
        box-sizing: border-box;
        padding-right: 12px;
    }
    .header__menu-announcement .acfc-next-match {
        grid-column: 1;
        justify-self: start;
    }
    .header__menu-announcement .acfc-rotating-messages {
        grid-column: 2;
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        min-height: var(--acfc-hdr-bar-h);
        margin: 0;
        /* Absolute .acfc-message nodes don’t give the track width — avoid0-width grid column */
        min-width: min(92vw, 560px);
        max-width: min(96vw, 720px);
        width: 100%;
    }
@media (max-width: 1021px) {
      .header__menu-announcement .acfc-social-icons {
  display: none !important;
  }
}
    .header__menu-announcement .acfc-social-icons {
        grid-column: 3;
        justify-self: end;
        margin: 0;
        padding-right: 2px;
    }
    .header__menu-announcement .acfc-message-track {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: var(--acfc-hdr-bar-h);
        min-width: 12rem;
        width: 100%;
        overflow: hidden;
    }
    .header__menu-announcement .acfc-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-50% + 6px));
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s var(--ease-out);
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .header__menu-announcement .acfc-message.acfc-message-active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%);
        z-index: 1;
        pointer-events: auto;
    }
    .header__menu-announcement .acfc-message-track:not(.acfc-rotator-ready) .acfc-message {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .header__menu-announcement .acfc-message-track:not(.acfc-rotator-ready) .acfc-message.acfc-message-active:not(.acfc-message--mobile-next-match) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .header__menu-announcement .acfc-message-link {
        text-decoration: none !important;
        color: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        max-width: 100%;
    }
    .header__menu-announcement .acfc-message-text {
        font-weight: 600;
        letter-spacing: 0.01em;
        color: inherit;
        text-decoration: none !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header__menu-announcement .acfc-message-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--asphalt) !important;
        color: var(--sol-rosa) !important;
        padding: 4px 14px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        min-height: 26px;
        flex-shrink: 0;
        white-space: nowrap;
        border-radius: var(--radius-full);
        box-shadow: 0 2px 10px rgba(28, 28, 28, 0.22);
        transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
        text-decoration: none !important;
    }
    .header__menu-announcement .acfc-message-link:hover .acfc-message-cta,
    .header__menu-announcement .acfc-message-link:focus-visible .acfc-message-cta {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px rgba(28, 28, 28, 0.32);
    }
    .header__menu-announcement .acfc-message-track.acfc-rotator-ready .acfc-message:not(.acfc-message-active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .header__menu-announcement .acfc-message-track.acfc-rotator-ready .acfc-message.acfc-message-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .header__menu-announcement .acfc-message.acfc-no-transition {
        transition: none !important;
    }

    @media (max-width: 768px) {
        .header__menu-announcement .acfc-announcement-bar {
            grid-template-columns: 1fr;
            padding-right: 0;
        }
        .header__menu-announcement .acfc-rotating-messages {
            grid-column: 1;
            max-width: 100%;
            min-width: 0;
        }
        .header__menu-announcement .acfc-message-track {
            min-width: 0;
        }
        .header__menu-announcement .acfc-social-icons {
            display: none;
        }
    }

    @media (max-width: 480px) {
        /*
         * Messages stay absolutely positioned (the rotator depends on that), so they contribute
         * no height. The bar itself is given room for two lines instead, and the copy is allowed
         * to wrap into it rather than being clipped mid-word.
         */
        .header__menu-announcement .acfc-message {
            padding: 4px 10px;
            white-space: normal;
        }
        .header__menu-announcement .acfc-message-link {
            flex-wrap: wrap;
            justify-content: center;
            row-gap: 3px;
        }
        .header__menu-announcement .acfc-message-text {
            white-space: normal;
            text-overflow: clip;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            text-align: center;
        }
    }
    
    /*  Top bar - menu */
    
    .top-bar-mobile {
        margin-top: var(--mobileMenuYSpacing);
    }
    
    /* Menu items - submenus */
    
    .header__menu-submenu {
        position: absolute;
        z-index: 99;
        top: 100%;
        /* Rosa accent moved to the top edge so it reads as attached to the nav item it belongs to. */
        border-top: 3px solid var(--sol-rosa);
        left: 0;
        width: var(--dropdownWidth);
        text-align: left;
        border-radius: var(--radius-md);
        padding: var(--dropdownYSpacing) 0;
        box-shadow: var(--shadow-pop);
        visibility: hidden;
        opacity: 0;
        width:220px;
        padding: 16px 0px;
        /* No overflow clipping here — level-3 flyouts sit at left: 100%, outside this box. */
    }
    
    .header__menu-item--open>.header__menu-submenu {
        visibility: visible;
        opacity: 1;
    }

    /* Dropdown links get a rosa wash rather than a hard background swap. */
    .header__container[data-layout='desktop'] .header__menu-submenu .header__menu-item>.header__menu-link {
        border-radius: var(--radius-sm);
        margin: 0 8px;
        transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
    }

    .header__container[data-layout='desktop'] .header__menu-submenu .header__menu-item>.header__menu-link:hover,
    .header__container[data-layout='desktop'] .header__menu-submenu .header__menu-item>.header__menu-link:focus-visible {
        background-color: var(--acfc-hdr-wash);
    }
    
    .header__menu-item--depth-1:last-child>.header__menu-submenu {
        right: 0;
        left: auto;
    }
    
    .header__menu-submenu--level-3 {
        top: calc((var(--dropdownYSpacing) * -1) - var(--border-size));
        left: 100%;
    }
    
    .header__menu--top .header__menu-submenu {
        padding: calc(var(--dropdownYSpacing) * 0.5) 0;
        width: calc(var(--dropdownWidth) / 1.5);
    }
    
    .header__menu--top .header__menu-submenu .header__menu-link {
        padding: var(--dropdownLinkSpacing) calc(var(--dropdownXSpacing) * 0.5);
    }
    
    .header__menu--top .header__menu-submenu--level-3 {
        top: calc(((var(--dropdownYSpacing) * 0.5) * -1) - var(--border-size));
        left: 100%;
    }
    
    .header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
        top: 0;
        right: 100%;
        left: auto;
    }
    
    .header__menu-submenu .header__menu-item {
        width: 100%;
        background-color: inherit;
    }
    
    .header__menu-submenu .header__menu-link {
        display: inline-flex;
        flex: 1;
        align-items: center;
        padding: var(--dropdownLinkSpacing) var(--dropdownXSpacing);
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 6px;
        padding-bottom: 6px;
        color:inherit;
    }
    .header__menu-submenu .header__menu-link:hover{
        color:inherit; 
    }
    .header__menu-back svg {
        margin-right: 10px;
    }

    /* Lucide stroke back-chevron — suppress editor fill rule same as child-toggle */
    .header__menu-back-inner path {
        fill: none !important;
        stroke: currentColor;
    }
    
    /* Menu icons */
    
    .header__container[data-layout='desktop'] .header__menu-submenu .header__menu-child-toggle {
        margin-left: auto;
    }
    
    .header__menu-submenu .header__menu-child-toggle {
        transform: rotate(-90deg);
    }
    
    .header__menu-child-toggle {
        margin-left: 0.35rem;
        flex-shrink: 0;
    }

    /*
     * Lucide stroke chevron — uses stroke/currentColor so it inherits the link's text colour.
     * Explicitly zero the fill so the editor's global `.header__menu-item:hover svg path { fill: rosa }`
     * rule cannot land on it (fill:none beats fill:rosa when both have the same specificity because
     * this loads last, and the !important variant is pinned on the mobile block below).
     */
    .header__menu-child-toggle path {
        fill: none !important;
        stroke: currentColor;
    }
    
    .header__top-menu .header__menu-child-toggle {
        margin-left: 2px;
    }
    
    .header__menu-toggle {
        display: none;
    }
    
    .header__menu-toggle svg {
        width: 26px;
    }
    
    /* Search */
    
    .hs-search-field__desktop .hs-search-field__input {
        width: clamp(260px, 32vw, 420px) !important;
        border: none !important;
        height: 46px !important;
        max-width: none !important;
        min-height: 46px !important;
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 1;
        border-radius: var(--radius-full);
        padding-left: 20px;
        box-shadow: var(--shadow-card);
        transition: box-shadow 0.25s var(--ease-out);
    }

    /* No rosa ring here — `outline` is left to the browser so keyboard focus stays visible. */
    .hs-search-field__desktop .hs-search-field__input:focus {
        box-shadow: var(--shadow-card);
    }
    
    .header__container[data-layout='desktop'] .hs-search-field__form .btn-wrapper,
    .header__container[data-layout='desktop'] .hs-search-field__form button {
        padding: 0;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .search--icon {
        position: relative;
        z-index: 1;
        border-color: transparent !important;
    }
    
    .hs-search-field__mobile {
        margin-top: var(--mobileMenuYSpacing);
        padding: var(--mobileMenuYSpacing) var(--mobileMenuXSpacing);
    }
    
    .hs-search-field__mobile form {
        position: relative;
    }
    
    .hs-search-field__mobile .btn-wrapper {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .hs-search-field__mobile .btn-wrapper .cta-button {
        padding: 0 10px 0 15px;
        min-height: 100%;
    }
    
    .hs-search-field__mobile input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit']) {
        padding-left: 38px;
        border: none;
    }
    
    .header__container .cta-group,
    .header__container .header__menu-col {
        opacity: 1;
        transition-delay: 0.25s;
        transition: opacity 0.15s ease-in-out;
        will-change: opacity;
    }
    
    .header__menu-col.m-left-auto {
        margin-left: calc(var(--desktopNavXSpacing) * 2);
    }
    
    .header__container.search-open .cta-group,
    .header__container.search-open .header__menu-col {
        opacity: 0;
    }
    
    .header__container[data-layout='desktop'] .header__wrapper {
        position: relative;
    }
    
    .header__container[data-layout='desktop'] .search {
        z-index: 2;
        width: 46px;
        height: 46px;
        position: relative;
    }

    /* Collapsed search — keyed off .closed (HTML default), not data-layout (set by JS).
       The 46px box is load-bearing (the preinit style and script.js both assume it); only the
       corner radius changes. */
    .header__search-col.search.closed {
        z-index: 2;
        width: 46px;
        height: 46px;
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-full);
    }

    .header__search-col.search.closed .hs-search-field__input,
    .header__container[data-layout='desktop'] .closed .hs-search-field__input {
        padding: 0 !important;
        opacity: 0;
        width: 100% !important;
    }

    .header__search-col.search.closed .hs-search-field__input::placeholder,
    .header__container[data-layout='desktop'] .closed .hs-search-field__input::placeholder {
        color: transparent;
    }
    
    /* Social Icons */
    .header__container .sr-social {
        list-style: none;
        list-style-type: none;
        padding: 0;
        margin: 0;
        align-items: center;
        display: inline-flex;
        gap: 6px;
    }
    
    .header__container .sr-social.p-left {
        margin-right: calc(var(--topNavXSpacing) * 0.5);
    }
    
    .header__container .sr-social.p-center {
        margin: calc(var(--topNavXSpacing) * 0.5);
    }
    
    .header__container .sr-social.p-right {
        margin-left: calc(var(--topNavXSpacing) * 0.5);
    }
    
    .header__container .sr-social a {
        opacity: 1;
        display: inline-flex;
        transition: opacity 0.25s ease-in-out;
        will-change: opacity;
    }
    
    .header__container .sr-social a:hover {
        opacity: 0.75;
    }
    
    .header__container .sr-social svg {
        color: var(--f);
        fill: var(--f);
    }
    
    .header__container .icon-bg {
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background: var(--b);
        height: var(--h);
        width: var(--w);
    }
    
    /* button reset */
    .no-button {
        background: none;
        border: none;
        border-radius: 0;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        margin-bottom: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
    }
    
    /* Skip to content button */
    .skip-main {
        left: -999px;
        position: absolute;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        z-index: -999;
    }
    
    .skip-main:focus,
    .skip-main:active {
        left: 0;
        top: 10px;
        height: auto;
        overflow: auto;
        margin: 0 auto;
        padding: 10px;
        border-radius: 100px;
        text-align: center;
        font-size: 1.2em;
        z-index: 999;
        width: 300px;
        right: 0;
    }
    
    .header__container[data-layout='desktop'] .m-left-auto {
        margin-right: auto;
    }
    
    .header__container[data-layout='desktop'] .m-right-auto {
        margin-left: auto;
      margin-right: auto;
        margin-top: 0;
    }
    
    .header__container[data-layout='desktop'] .m-center-auto {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Mega Menu */
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] {
        position: static;
    }
    
    .header__container[data-layout='desktop'] [data-mega='true'] .header__menu-submenu .header__menu-item {
        margin: 1px;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-item--depth-2 {
        display: block;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu--level-2 {
        display: flex;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu {
        width: 100%;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu--level-2>.header__menu-item:not(:first-child) {
        border-left: 1px solid var(--acfc-hdr-hairline);
    }

    /* Breathing room inside mega columns — they previously butted straight up to the dividers. */
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu--level-2>.header__menu-item {
        padding: 0 10px;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu--level-3 {
        position: static;
        border: none !important;
        padding: 0;
        box-shadow: none;
        opacity: 1;
        transition: none;
        visibility: hidden;
        /*
         * Separate a column heading from the rows beneath it. Sibling rows sit ~2px apart, so
         * without this the heading butts straight into its first child and the group reads as one
         * undifferentiated list.
         */
        margin-top: 8px;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'].header__menu-item--open .header__menu-submenu--level-3 {
        visibility: visible;
        opacity: 1;
    }
    
    .header__container[data-layout='desktop'] .header__menu-item[data-mega='true'] .header__menu-submenu button.header__menu-link {
        width: 100%;
        cursor: auto;
    }

    
    .header__container[data-layout='desktop'] [data-mega='true'] .header__menu-item--depth-2 .header__menu-child-toggle {
        display: none;
    }
    
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .inner_mega_menu {
        display: flex;
    
    }
    
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .header__menu-submenu--level-2{
        top: 55px;
    }
    
    /* Hide content wrappers before JS moves them into submenus */
    .left-content-wrapper,
    .right-content-wrapper {
        display: none !important;
        visibility: hidden !important;
        overflow: hidden;
    }
  
    .left-content-wrap {
        /*     margin-right: 20px; */
        display: flex;
        align-items: center;
        justify-content: center;
        /*     margin-bottom: -20px; */
    }
    
    .left-content-wrap:last-of-type {
        margin-right: 0;
    }
    
    
    .right-content-wrap {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*     margin-bottom: -23px; */
    }
    
    .right-content-wrap:last-of-type {
        margin-right: 0;
    }
    
    @media (max-width: 991px) {
        .header__bottom .left-content-wrap,
        .header__bottom .right-content-wrap {
            display: none;
        }
        .header__container[data-layout='mobile'] .header__menu-col {
            position: relative;
            top: 0;
        }
    }
    /* Mobile menu */
    .header__container[data-layout='mobile'] .header__top:not(.header__top-announcement) {
        display: none;
    }
    
    .header__container[data-layout='mobile'] .header__bottom {
        padding: var(--mobileNavYSpacing) var(--mobileNavXSpacing);
    }
    
    .header__container[data-layout='mobile'] .header__logo-col {
        padding-right: 2rem;
    }
    
    .header__container[data-layout='mobile'] .header__menu--desktop {
        display: none;
    }
    
    .header__container[data-layout='mobile'] .header__menu-col {
        margin-left: auto;
    }
    
    .header__container[data-layout='mobile'] .header__menu-container--mobile {
        display: block;
    }
    
    .header__container[data-layout='mobile'] .header__menu--show {
        display: block;
    }
    
    .header__container[data-layout='mobile'] .header__menu-item {
        width: 100%;
        text-align: left;
        position: static;
        justify-content: space-between;
    }
    
    /*
     * 44px rows. The old 8px vertical padding produced ~32px targets, which is under any
     * reasonable touch guideline for the primary site navigation.
     */
    .header__container[data-layout='mobile'] .header__menu-link {
        width: 100%;
        padding: 10px 1.25rem;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        border-left: 3px solid transparent;
        transition: background-color 0.2s var(--ease-out), border-left-color 0.2s var(--ease-out);
    }

    /*
     * Hairline separators so the stack reads as discrete rows instead of floating text. The submenu
     * selector is depth-agnostic rather than a list of --depth-N classes, so panels keep the same
     * row treatment however deep the editor sets the menu's max levels.
     */
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item--depth-1,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-submenu .header__menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .header__container[data-layout='mobile'] .header__menu-item--depth-1.header__menu-link--active-link>.header__menu-link,
    .header__container[data-layout='mobile'] .header__menu-item--depth-1.header__menu-item--open>.header__menu-link,
    .header__container[data-layout='mobile'] .header__menu-link[aria-current='page'] {
        border-left-color: transparent;
        background-color: transparent;
    }

    /*
     * The editor outputs a hover/focus/active color rule for depth-1 items using the module's
     * link_active value (sol-rosa on this site). On touch devices it sticks after a tap, and on
     * any device it fires when the user scrolls through the list. Override all interactive states
     * back to the link_color (white) so the menu text never turns pink.
     */
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item:hover,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item:focus,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item:active,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item > .header__menu-link:hover,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item > .header__menu-link:focus,
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-item > .header__menu-link:active {
        color: #ffffff !important;
    }

    /* Chevrons inherit currentColor — lock them to white on mobile so the editor's hover fill rule
       (which lands on svg path elements globally) cannot turn the stroke pink. */
    .header__container[data-layout='mobile'] .header__menu--mobile .header__menu-child-toggle path,
    .header__container[data-layout='mobile'] .header__menu-back-inner path {
        stroke: #ffffff !important;
        fill: none !important;
    }
    
    .header__container[data-layout='mobile'] .header__menu-submenu--level-2>li {
        margin-bottom: 0;
    }
    
    .header__container[data-layout='mobile'] .header__menu-back {
        background: none;
        border: none;
        justify-content: start;
    }
    
    .header__container[data-layout='mobile'] .header__menu-item--button {
        padding: var(--mobileMenuYSpacing) var(--mobileMenuXSpacing);
    }
    
    .header__container[data-layout='mobile'] .header__menu-submenu .header__menu-item {
        padding: 0;
    }
    
    .header__container[data-layout='mobile'] .header__menu-submenu,
    .header__container[data-layout='mobile'] .header__menu-submenu--level-3,
    .header__container[data-layout='mobile'] .header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
        position: static;
        width: 100%;
        border: none;
        /* Full-bleed slide-in panels: drop the desktop panel's radius and shadow. */
        border-radius: 0;
        box-shadow: none;
    }
    
    .header__container[data-layout='mobile'] .header__menu-submenu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 260ms var(--ease-out), opacity 100ms, visibility 0s linear 100ms;
        z-index: 3;
        visibility: hidden;
        opacity: 0;
        /*
         * Panels are sized to the menu, so a submenu with more children than fit had no way to
         * reach the rest — the overflow simply spilled past the viewport. It scrolls on its own
         * now, with room reserved at the end so the last row clears the pinned utilities bar.
         */
        overflow-y: auto;
        overscroll-behavior: contain;
        /* +16px breathing room so the last submenu item sits visibly clear of the bar, not flush with it. */
        padding-bottom: calc(var(--acfc-hdr-mobile-util-h) + 16px);
    }
    
    .header__container[data-layout='mobile'] .header__menu-item--open>.header__menu-submenu {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
    
    .header__container[data-layout='mobile'] .header__menu-child-toggle svg {
        margin-left: 0;
    }
    
    .header__container[data-layout='mobile'] .header__menu-child-toggle {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        transition: transform 0.4s;
        will-change: transform;
    }
    
    .header__container[data-layout='mobile'] .header__menu-toggle--show {
        display: block;
    }
    
    .header__container[data-layout='mobile'] .hidden-phone {
        display: none !important;
    }
    
    .header__container[data-layout='mobile'] .header__menu-container--mobile .cta-group {
        flex-direction: row;
        align-items: stretch;
    }
    
    /*
     * Mobile utilities section (search + CTA buttons)
     *
     * Search and buttons both asked for width:100% inside a flex row, so on narrow phones the
     * search input was squeezed to a few characters. They now share the row when there is space
     * and stack below 560px.
     */
    .header__mobile-utilities {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 1.25rem 20px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Bottom row: CTA buttons + search icon, always one row */
    .header__mobile-utilities-bottom {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /*
     * Height reserved at the end of every scrolling area for the pinned bar below. The bar is out
     * of flow, so without an explicit reservation the last nav row sits underneath it. Two rows on
     * phones, where the search field and buttons wrap; one row once they fit side by side. The
     * values run a few px over the real bar so a small content change cannot under-shoot, and the
     * QA harness asserts the reservation still covers the measured height.
     */
    .header__container[data-layout='mobile'] .header__menu--mobile {
        /*
         * Collapsed state: search is hidden, bar is 1 row (CTA buttons + search icon).
         * When search-open is toggled on, JS updates this variable to 152px so the expanded
         * search field + buttons row are both reserved for. The root panel does NOT get
         * padding-bottom: the utilities bar is a sibling of the root list and floats above it,
         * so padding would only inflate scrollHeight to equal clientHeight and disable scrolling.
         */
        --acfc-hdr-mobile-util-h: 83px;
    }

    /*
     * Root menu wrapper: reserve space at the bottom equal to the utilities bar height so the last
     * nav item can scroll clear of the bar. This targets the <ul> inside the panel, not the panel
     * itself, so scrollHeight stays larger than clientHeight and scrolling stays possible.
     */
    .header__container[data-layout='mobile'] .header__menu--mobile > .header__menu-wrapper {
        /* +16px breathing room so the last root item sits visibly clear of the bar, not flush with it. */
        padding-bottom: calc(var(--acfc-hdr-mobile-util-h) + 16px);
    }

    /*
     * Pinned to the bottom of the panel instead of left in the flow.
     *
     * The bar is a sibling of the *root* list, so in flow its position tracked the root list's
     * height: opening a submenu left it stranded wherever the root list happened to end, floating
     * over the middle of the submenu's rows. Which of the two covered the other then came down to
     * paint order. Pinning also keeps search and the CTAs reachable from inside a submenu.
     */
    .header__container[data-layout='mobile'] .header__mobile-utilities {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Above the submenu panels, which sit at 3. */
        z-index: 5;
        /* Opaque so rows scroll out of sight behind it. inherit tracks the editor's panel colour
           (module.styles.mobile_menu.mobile_background) rather than hardcoding a value here. */
        background-color: inherit;
        margin-top: 0;
    }
  
    /* Hidden by default; revealed when the search toggle is activated. */
    .header__mobile-utilities-search {
        display: none;
        width: 100%;
        min-width: 0;
    }

    .header__mobile-utilities.search-open .header__mobile-utilities-search {
        display: block;
    }
  
    .header__mobile-utilities-search .hs-search-field__mobile {
        margin-top: 0;
        padding: 0;
    }
  
    /*
     * The field renders on a light surface: the scoped block in index.html paints
     * `.hs-search-field__input` from module.styles.search.background (white on this site) and
     * loads after this file. Background is therefore left to the editor, and everything sitting
     * on it — typed text, placeholder, and the icon below — is kept dark.
     */
    .header__mobile-utilities-search .hs-search-field__mobile input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit']) {
        width: 100%;
        min-height: 46px;
        padding-left: 44px;
        padding-right: 14px;
        border: 1px solid rgba(28, 28, 28, 0.15);
        border-radius: var(--radius-full);
        color: #1c1c1c;
        font-family: var(--acfc-hdr-font);
        font-size: 14px;
        transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }

    .header__mobile-utilities-search .hs-search-field__mobile input:focus {
        border-color: var(--sol-rosa);
        box-shadow: 0 0 0 2px var(--sol-rosa-soft);
        outline: none;
    }
  
    .header__mobile-utilities-search .hs-search-field__mobile input::placeholder {
        color: rgba(28, 28, 28, 0.55);
        opacity: 1;
    }
  
    .header__mobile-utilities-search .hs-search-field__mobile .btn-wrapper {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
    }
  
    .header__mobile-utilities-search .hs-search-field__mobile .cta-button.search--icon {
        background: transparent !important;
        padding: 0 10px 0 12px;
        min-height: 100%;
    }
  
    /* The SVG carries a hardcoded stroke="white" attribute for the dark desktop bar; the mobile
       field is light, so it has to be forced dark here. */
    .header__mobile-utilities-search .hs-search-field__mobile .cta-button.search--icon svg path {
        stroke: #1c1c1c;
    }
  
    .header__mobile-utilities-buttons {
        flex: 1 1 0;
        min-width: 0;
    }
  
    .header__mobile-utilities-buttons .cta-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
        width: 100%;
    }
  
    .header__mobile-utilities-buttons .cta-group .btn-wrapper {
        flex: 1;
        display: flex;
    }
  
    /* Anton retired here to match the Homepage move to heavy Inter for display type. */
    .header__mobile-utilities-buttons .cta-group .btn-wrapper .cta-button,
    .header__mobile-utilities-buttons .cta-group .btn-wrapper .cta_button {
        width: 100%;
        white-space: nowrap;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        font-family: var(--acfc-hdr-font);
        font-weight: 800;
        font-size: 15px;
        letter-spacing: 0.04em;
        border-radius: var(--radius-full);
        box-sizing: border-box;
        transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    }

    .header__mobile-utilities-buttons .cta-group .btn-wrapper .cta-button:active,
    .header__mobile-utilities-buttons .cta-group .btn-wrapper .cta_button:active {
        transform: translateY(1px);
    }

    /* Search toggle icon button — sits to the right of the CTA buttons */
    .header__mobile-search-toggle {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: transparent;
        cursor: pointer;
        transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
    }

    @media (hover: hover) {
        .header__mobile-search-toggle:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.4);
        }
    }

    .header__mobile-search-toggle:active {
        transform: translateY(1px);
    }

    /* Icon swap: search → close when open */
    .header__mobile-search-toggle .icon-close {
        display: none;
    }

    .header__mobile-utilities.search-open .header__mobile-search-toggle .icon-search {
        display: none;
    }

    .header__mobile-utilities.search-open .header__mobile-search-toggle .icon-close {
        display: block;
    }

    /* Keep toggle icons white; block the editor's global svg path fill:pink rule */
    .header__mobile-search-toggle svg path,
    .header__mobile-search-toggle svg line,
    .header__mobile-search-toggle svg circle {
        fill: none !important;
        stroke: #ffffff !important;
    }
  
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .inner_mega_menu{
        display: flex;
        /*     flex-wrap: wrap; */
        align-items: center;
        justify-content: space-between;
    }
    
    
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-content-wrap {
        width: 20%;
        padding-left: 16px;
    }
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-content-wrap .inner {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .header__menu-item--depth-2 {
        width: 23%; 
    }
    
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-content-wrap {
        width: 30%;
    }

    /*
     * Mega-menu editorial images — left-img (square) and right-img (landscape).
     * Both sit inside their respective content-wrap columns, desktop-only.
     */
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img {
        width: 100%;
        overflow: hidden;
        border-radius: var(--radius-md);
    }

    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img a,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img a {
        display: block;
        overflow: hidden;
        border-radius: inherit;
    }

    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img img,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img img {
        display: block;
        width: 100%;
        height: auto;
        /* Scale up slightly on hover for a premium feel; parent overflow:hidden clips to radius. */
        transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out);
        will-change: transform;
    }

    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img a:hover img,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img a:hover img {
        transform: scale(1.04);
        opacity: 0.9;
    }

    /* Wrap images' parent links in a subtle shadow so they read as cards. */
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img a,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img a {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
        transition: box-shadow 0.3s var(--ease-out);
    }

    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .left-img a:hover,
    .header__container[data-layout=desktop] .header__menu-item[data-mega=true] .right-img a:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    }
    
    
    
    [data-layout='desktop'] .logo_mobile,
    .header__container[data-fixed='true'][data-layout='desktop'].header-scroll .header__logo-image.header__logo-scroll.logo_mobile,
    .header__container[data-fixed='true'][data-layout='mobile'].header-scroll .header__logo-image.header__logo-scroll:not(.logo_mobile):not(.logo_mobile_scroll),
    [data-layout='mobile'] [data-mobile='true'] .header__logo-image:not(.logo_mobile) {
        display: none;
    }
    .header__button-col .cta-group {
        flex-wrap: unset;
    }

@media (min-width: 992px) {
  .header__menu-item--depth-1.header__menu-item svg {
    display: none;
  }
}

/*
 * Nav labels are regular weight at every level, top-level items and submenu rows alike. The module's
 * editor-driven font style applies its own weight to depth-1 anchors, so this needs to outrank it;
 * targeting the shared .header__menu-link class also keeps the <a> and <button> forms of a link
 * identical, since a parent item renders as a <button> whenever it has no URL of its own.
 */
.header__container .header__menu .header__menu-item .header__menu-link {
    font-weight: 400;
}

.header__menu-submenu {
    transition: visibility 0s linear 300ms, opacity 300ms, top 300ms;
}
.header__menu-item--open>.header__menu-submenu {
    transition: visibility 0s linear 0s, opacity 300ms, top 300ms, transform 300ms;
}

/*
 * Desktop panels drop in from -6px instead of appearing in place. Desktop-scoped so it cannot
 * interfere with the mobile slide-in, which drives the same property on the X axis, and limited to
 * depth-1 panels: a mega panel's level-3 list is a static, permanently visible column, so animating
 * it shunted every child link down 6px the moment its parent picked up .header__menu-item--open.
 */
.header__container[data-layout='desktop'] .header__menu--desktop .header__menu-item--depth-1>.header__menu-submenu {
    transform: translateY(-6px);
    transition: visibility 0s linear 300ms, opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.header__container[data-layout='desktop'] .header__menu--desktop .header__menu-item--depth-1.header__menu-item--open>.header__menu-submenu {
    transform: translateY(0);
    transition: visibility 0s linear 0s, opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.header__menu-item--depth-1[data-mega="true"] .header__menu-submenu.header__menu-submenu--level-3,
.header__menu-item--depth-1[data-mega="true"] .header__menu-item--open>.header__menu-submenu.header__menu-submenu--level-3 {
    transition: unset;
}
.header__container[data-layout="mobile"] .header__menu-submenu {
    transition: visibility 0s linear 100ms, opacity 100ms, transform 260ms var(--ease-out);
}
.header__container[data-layout="mobile"] .header__menu-item--open>.header__menu-submenu {
    transition: visibility 0s linear 0s, opacity 100ms, transform 260ms var(--ease-out);
}

/*
 * Header CTAs. `line-height: 38px` was doing the vertical centring, which broke as soon as a
 * label wrapped; flex centring with a min-height is stable. Hover lift mirrors
 * .angelcity2026-btn-primary in hubspot/Homepage/styles.css.
 */
.header__button-col .cta-button {
    text-transform: uppercase;
    font-family: var(--acfc-hdr-font);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.03em;
    line-height: 1;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-sizing: border-box;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.header__button-col .cta-button:hover,
.header__button-col .cta-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--sol-rosa-glow);
}

.header__button-col .cta-button:focus-visible {
    outline: 2px solid var(--sol-rosa);
    outline-offset: 2px;
}
/*
 * The glyph used to sit ~4px above the nav labels, from two stacked causes: the button's 41px
 * min-height left the 46px box's slack collecting underneath it, and the button was block-level so
 * the icon rested on its text baseline rather than its centre. Filling the box and centring as a
 * flex container fixes both, and keeps working if the icon's dimensions ever change.
 */
.header__search-col .hs-search-field__button {
    min-height: 46px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}
.header__search-col .hs-search-field__button svg path {
    stroke: #000;
}
.header__search-col.closed .hs-search-field__button svg path {
    stroke: #fff;
}
@media (min-width: 1301px) {
    .header__container[data-layout=desktop] .search {
        margin-left: 16px !important;
    }
}
@media (min-width: 992px) {
    /* Scoped to the submenu chevron only — this used to rotate every svg inside a depth-1 item,
       including logos and icons dropped into mega panels. */
    .header__menu-item--depth-1.header__menu-item:hover > .header__menu-link > .header__menu-child-toggle,
    .header__menu-item--depth-1.header__menu-item:hover > .header__menu-link > svg.header__menu-child-toggle {
        transform: rotate(-180deg);
    }
    .header__menu-item--depth-1.header__menu-item .header__menu-child-toggle {
        transition: transform 0.25s var(--ease-out);
    }
}
@media (max-width: 1265px) {
    .header__menu-link {
        font-size: 14px !important;
    }
    .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link {
        padding-left: 7px;
        padding-right: 7px;
    }
    .header__button-col .cta-button {
        font-size: 14px;
        padding: 0 25px !important;
    }
}
@media (max-width: 1080px) {
    .header__menu-link {
        font-size: 13px !important;
    }
    .header__button-col .cta-button {
        font-size: 13px;
        padding: 0 18px !important;
    }
    .header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link {
        padding-left: 5px;
        padding-right: 5px;
    }
}
.header__bottom {
    max-height: 65px;
}
@media (max-width: 991px) {
    .hs-search-field__mobile input {
        min-height: 2.5625rem !important;
    }
    /*
     * 34px glyph inside a 44px square target — 59px was oversized and shoved the row wide.
     *
     * Do NOT set `display` on .header__menu-toggle. There are two toggles in the markup (the
     * hamburger and the close X); the base class is display:none and script.js moves the
     * .header__menu-toggle--show class between them. Setting display here renders both at once
     * and, because they are block-level, doubles the row height and knocks the logo off centre.
     */
    .header__menu-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: var(--radius-full);
        transition: background-color 0.2s var(--ease-out);
    }
    .header__container[data-layout='mobile'] .header__menu-toggle.header__menu-toggle--show {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header__menu-toggle:focus-visible {
        outline: 2px solid var(--sol-rosa);
        outline-offset: 2px;
    }
    .header__menu-toggle svg {
        width: 26px;
        height: auto;
    }
    /* The close glyph's viewBox is square (21x21) against the hamburger's 26x16, so matching
       widths would make the X read much heavier. */
    .header__menu-toggle--close svg {
        width: 18px;
    }
    .header__menu-toggle svg rect {
        fill: var(--white);
    }
    /* height:100% against an auto-height parent is undefined for a replaced element and left the
       crest sized off its intrinsic ratio; a fixed width with auto height is predictable.
       40px keeps the crest clear of the 8px top/bottom padding inside the 56px bar. */
    .header__logo img {
        height: auto;
        width: 40px;
        display: block;
    }
    /* Height is driven by the wrapper so align-items: center on it can do the work.
       Padding on the block container just offsets the wrapper downward and fights centering. */
    .header__container[data-layout=mobile] .header__bottom {
        padding-top: 0;
        padding-bottom: 0;
        max-height: 56px !important;
        min-height: 56px !important;
    }
    /* Logo and hamburger both centre against the row rather than stretching to it. */
    .header__container[data-layout=mobile] .header__wrapper.header__wrapper--bottom {
        align-items: center;
        min-height: 56px;
        max-height: 56px;
    }
    .header__container[data-layout=mobile] .header__logo-col {
        display: flex;
        align-items: center;
    }
    .header__menu-link {
        font-size: 16px !important;
    }
    .header__button-col .cta-button {
        font-size: 16px !important;
    }
    .header__container[data-layout=mobile] .header__menu-item {
        margin-bottom: 0;
    }
    .header__menu--mobile .cta-group {
        gap: 10px;
        display: flex;
    }
    .btn-wrapper.btn-outline-primary-wrapper .cta-button {
        margin: 0 4px 0 0;
    }
    .header__container[data-layout=mobile] .header__menu-col {
        position: relative;
        top: 0;
        display: inline-flex;
        align-items: center;
    }
    .header__container[data-layout=mobile] .header__logo-col {
        position: relative;
        z-index: 4;
    }
    .header__menu--mobile {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .header__menu-submenu {
        padding-top: 4px;
    }
    .header__container[data-layout=mobile] .header__menu-submenu {
        height: 100%;
    }
}

@media (max-width: 767px) {
.header__menu-item.header__menu-item--depth-1.header__menu-item--has-submenu.hs-skip-lang-url-rewrite" {
  display: none;
}
    .home-opener-btn {
        display: none !important;
    }
    .header__top.header__top-announcement .container-xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 768px) {
    .home-opener-btn {
        display: inline-block !important;
    }
}

/* Nav "More" overflow category (top-level items past the 10th) */

/*
 * Server-rendered, so this must not depend on [data-layout] or any JS-applied hook — otherwise the
 * overflow items paint before the header initializes and flash away.
 */
.acfc-nav-overflow {
    display: none !important;
}

.acfc-more-item > .header__menu-link--toggle {
    cursor: pointer;
}

.acfc-more-item .acfc-more-dots {
    display: inline-block;
    letter-spacing: 0.1em;
    line-height: 1;
    font-size: 1.25em;
    /*
     * Optical nudge. A middot's ink centres within its own line box, which lands ~1px above the
     * cap-height-to-baseline centre of the sibling nav labels; no amount of box alignment fixes
     * that, because the boxes are already centred with each other.
     */
    position: relative;
    top: 1px;
}

/* Center the column under the dots. Desktop-scoped so it can't override the mobile slide-in transform.
   The translate is combined with the shared -6px drop-in so this panel animates like the others, and
   the selectors carry the depth-1 hooks the drop-in uses so the X centring is not outranked by it. */
.header__container[data-layout='desktop'] .header__menu--desktop .acfc-more-item.header__menu-item--depth-1 > .header__menu-submenu {
    left: 50%;
    right: auto;
    transform: translate(-50%, -6px);
    min-width: 180px;
}

.header__container[data-layout='desktop'] .header__menu--desktop .acfc-more-item.header__menu-item--depth-1.header__menu-item--open > .header__menu-submenu {
    transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------------------------------
 * Reduced motion
 *
 * Previously only the schedule track honoured this. Everything decorative is neutralised here,
 * but the rotator's opacity/visibility handoff is deliberately kept: script.js relies on
 * .acfc-message-active to control which promo is readable, so it must still take effect —
 * only the accompanying movement is removed.
 * ---------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .acfc-header-schedule__track {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

    .acfc-announcement-bar *,
    .acfc-announcement-bar *::before,
    .acfc-announcement-bar *::after,
    .header__container *,
    .header__container *::before,
    .header__container *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    /* Kill the movement, keep the fade. */
    .acfc-message,
    .acfc-message.acfc-message-active,
    .header__menu-announcement .acfc-message,
    .header__menu-announcement .acfc-message.acfc-message-active {
        transform: translate(-50%, -50%);
    }

    .acfc-message-link:hover .acfc-message-cta,
    .acfc-next-match-btn:hover,
    .acfc-social-link:hover,
    .acfc-header-schedule__ticket:hover,
    .header__button-col .cta-button:hover {
        transform: none;
    }

    .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-submenu,
    .header__container[data-layout='desktop'] .header__menu--desktop .header__menu-item--open>.header__menu-submenu {
        transform: none;
    }

    .header__container[data-layout='desktop'] .acfc-more-item > .header__menu-submenu,
    .header__container[data-layout='desktop'] .acfc-more-item.header__menu-item--open > .header__menu-submenu {
        transform: translateX(-50%);
    }
}