/**
 * CM01 — Site Header
 *
 * The source header is fixed, 82px tall on desktop and 70px tall at the
 * mobile breakpoint. Home starts transparent and becomes translucent white
 * after scroll; inner pages opt into the translucent white state immediately.
 *
 * The selectors below deliberately use only Crossmiles namespaces. The
 * `cm-header` / `cm-widget--site-header` hooks are also the hooks used by the
 * shared navigation module, while the data attributes make the styles safe
 * for Elementor re-renders and standalone widget previews.
 */

/* Root states: transparent Home header, scrolled state, and inner-page state. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--cm-header-height, 82px);
  background-color: transparent;
  color: var(--cm-navy);
  transition:
    background-color var(--cm-transition-standard, 0.35s) ease,
    box-shadow var(--cm-transition-standard, 0.35s) ease,
    color var(--cm-transition-standard, 0.35s) ease;
}

/* Interior templates render with the white header state from first paint. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
).cm-header--inner,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
).cm-header--interior,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
)[data-cm-header-variant="inner"],
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
)[data-cm-always-scrolled="true"] {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 30px rgba(18, 52, 90, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Shared navigation.js scroll state; the data hook is useful before a class
 * is painted during an Elementor frontend re-render. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
).cm-is-scrolled,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
).cm-header--scrolled,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
)[data-cm-scrolled="true"] {
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 30px rgba(18, 52, 90, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* The widget may use either the shared .cm-container or a header-specific
 * inner hook. Both preserve the verified 1200px source container. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-container,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__inner,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav-wrap,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-wrap {
  width: var(--cm-container, min(1200px, calc(100% - 40px)));
  max-width: 100%;
  margin-inline: auto;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-container,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__inner,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav-wrap,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Local logo link and deterministic logo sizing. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__brand,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  margin-right: auto;
  color: var(--cm-navy);
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__brand img,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__logo,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__brand-logo,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-brand-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Desktop navigation. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation {
  display: flex;
  align-items: center;
  gap: 23px;
  min-width: 0;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a {
  position: relative;
  padding: 10px 0;
  color: #30465e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a::after {
  position: absolute;
  right: 100%;
  bottom: 3px;
  left: 0;
  height: 2px;
  background: var(--cm-orange);
  content: "";
  transition: right var(--cm-transition-standard, 0.35s) ease;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a:hover::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a.cm-is-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a.cm-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__nav a[aria-current="page"]::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a:hover::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a.cm-is-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a.cm-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-primary-nav a[aria-current="page"]::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a:hover::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a.cm-is-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a.cm-active::after,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-navigation a[aria-current="page"]::after {
  right: 0;
}

/* Compact navigation CTA follows the source button-small dimensions. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__cta,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-cta {
  flex: 0 0 auto;
  min-height: 0;
  white-space: nowrap;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__cta.cm-button,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-cta.cm-button {
  padding: 11px 17px;
  font-size: 11px;
}

/* Hidden at desktop; revealed at the source tablet/mobile breakpoint. */
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__toggle,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cm-navy);
  line-height: 0;
  appearance: none;
  position: relative;
  z-index: 3;
  transition: color var(--cm-transition-fast, 0.25s) ease;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__toggle svg,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-toggle svg {
  width: 24px;
  height: 24px;
}

:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__toggle.cm-is-open,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__toggle.cm-nav-toggle--open,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-header__toggle[data-cm-nav-open="true"],
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-toggle.cm-is-open,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-toggle.cm-nav-toggle--open,
:is(
  .cm-header,
  .cm-widget.cm-widget--site-header,
  .cm-widget.cm-widget--cm01,
  [data-cm-header],
  [data-cm-component="header"]
) .cm-nav-toggle[data-cm-nav-open="true"] {
  color: var(--cm-white);
}

/* Source breakpoint: desktop navigation remains visible through 1080px, but
 * its gap and type scale tighten and the CTA is removed. */
@media (max-width: 1080px) {
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation {
    gap: 14px;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav a,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav a,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation a {
    font-size: 11px;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__cta,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-nav-cta {
    display: none;
  }
}

/* Source breakpoint: white 70px header with a full-screen navy menu. */
@media (max-width: 820px) {
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) {
    min-height: var(--cm-header-height, 70px);
    background-color: rgba(255, 255, 255, 0.96);
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__toggle,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-nav-toggle {
    display: grid;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__brand img,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__logo,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__brand-logo,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-brand-logo {
    width: 185px;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cm-navy);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--cm-transition-standard, 0.35s) ease,
      visibility 0s linear var(--cm-transition-standard, 0.35s);
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav.cm-is-open,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav[data-cm-nav-open="true"],
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav.cm-is-open,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav[data-cm-nav-open="true"],
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation.cm-is-open,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation[data-cm-nav-open="true"] {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav a,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav a,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation a {
    color: var(--cm-white);
    font-family: var(--cm-font-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav a::after,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav a::after,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation a::after {
    display: none;
  }
}

/* Source breakpoint: the logo contracts again on narrow phones. */
@media (max-width: 560px) {
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__brand img,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__logo,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__brand-logo,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-brand-logo {
    width: 165px;
  }
}

/* Short desktop viewports in the source compact the page sections, not the
 * fixed header. Keep CM01 at its verified desktop height and preserve the
 * normal 28px inner rhythm while the rest of the page adopts its compact
 * rules. */
@media (min-width: 821px) and (max-height: 850px) {
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) {
    min-height: 82px;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-container,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__inner,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav-wrap,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-nav-wrap {
    gap: 28px;
  }
}

/* The shared base file covers cm-site/cm-widget roots; this keeps standalone
 * CM01 previews equally safe when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ),
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) * {
    transition-duration: 0.01ms;
  }

  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-header__nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-primary-nav,
  :is(
    .cm-header,
    .cm-widget.cm-widget--site-header,
    .cm-widget.cm-widget--cm01,
    [data-cm-header],
    [data-cm-component="header"]
  ) .cm-navigation {
    transition: none;
  }
}