////
///
/// Site Header Site Styles
/// ===========================================================================
///
/// Component classes the scapepress sites use under the `ss-c-` prefix,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module, so at
/// equal specificity a native module rule wins.
///
/// 60 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.SiteHeader
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- site-header  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--ss-z-dropdown);
        background: var(--ss-color-white);
        border-bottom: q(1) solid var(--ss-color-primary);
        transition: all var(--ss-duration-300) ease;
    }

    // -- skip-link  (from site-scape_group/src/static/scss/base/_accessibility.scss) --
    .ss-c-skip-link {
        position: absolute;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--ss-z-toast);
        padding: var(--ss-spacing-3) var(--ss-spacing-6);
        background-color: var(--ss-color-primary);
        color: var(--ss-color-white);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-semibold);
        text-decoration: none;
        border-radius: 0 0 var(--ss-spacing-1) var(--ss-spacing-1);
        transition: top var(--ss-duration-200) ease;

        &:focus {
            top: 0;
            outline: q(2) solid var(--ss-color-primary);
            outline-offset: q(2);
        }
    }

    // -- header  (from site-scape_press/src/static/scss/layout/_header.scss) --
    .ss-c-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--ss-z-navbar);
        padding: var(--ss-spacing-5) 0;
        background-color: var(--ss-color-white);
        border-bottom: q(1) solid transparent;
        transition: border-color var(--ss-duration-200) ease, background-color var(--ss-duration-200) ease, color var(--ss-duration-200) ease;

        &.is-scrolled {
            border-bottom-color: var(--ss-color-black);
        }

        // When the menu is open, the header swaps to the inverted scheme so the
        // logo and toggle remain visible against the black overlay.
        body.is-menu-open & {
            background-color: transparent;
            color: var(--ss-color-white);
            border-bottom-color: transparent;
        }

        &__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 100%;
            margin: 0 auto;
            padding: 0 var(--ss-spacing-6);
            gap: var(--ss-spacing-6);

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
                padding: 0 var(--ss-spacing-12);
            }
        }

        &__logo {
            font-family: var(--ss-font-family-display);
            font-size: var(--ss-font-size-base);
            font-weight: var(--ss-font-weight-bold);
            color: currentColor;
            text-transform: uppercase;
            letter-spacing: var(--ss-tracking-tight);
            text-decoration: none;
            white-space: nowrap;
        }

        &__actions {
            display: flex;
            align-items: center;
            gap: var(--ss-spacing-4);

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
                gap: var(--ss-spacing-6);
            }
        }

        &__cta {
            display: none;
            align-items: center;
            gap: var(--ss-spacing-2);
            padding: var(--ss-spacing-2) var(--ss-spacing-4);
            font-size: var(--ss-font-size-xs);
            font-weight: var(--ss-font-weight-medium);
            text-transform: uppercase;
            letter-spacing: var(--ss-tracking-widest);
            text-decoration: none;
            color: currentColor;
            border: q(1) solid currentColor;
            border-radius: q(999);
            transition: background-color var(--ss-duration-200) ease, color var(--ss-duration-200) ease;

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "sm")) {
                display: inline-flex;
            }

            &:hover {
                background-color: currentColor;
                color: var(--ss-color-white);

                // Invert again inside an open (dark) menu so it stays readable.
                body.is-menu-open & {
                    color: var(--ss-color-black);
                }
            }
        }

        // Hamburger / Close toggle.
        &__menu-toggle {
            display: inline-flex;
            align-items: center;
            gap: var(--ss-spacing-3);
            padding: var(--ss-spacing-2) var(--ss-spacing-4);
            font-family: var(--ss-font-family-sans);
            font-size: var(--ss-font-size-xs);
            font-weight: var(--ss-font-weight-medium);
            text-transform: uppercase;
            letter-spacing: var(--ss-tracking-widest);
            color: currentColor;
            background-color: transparent;
            border: q(1) solid currentColor;
            border-radius: q(999);
            cursor: pointer;
            transition: background-color var(--ss-duration-200) ease, color var(--ss-duration-200) ease;

            &:hover {
                background-color: currentColor;
                color: var(--ss-color-white);

                body.is-menu-open & {
                    color: var(--ss-color-black);
                }
            }
        }

        &__menu-toggle-label {
            line-height: 1;

            &[data-label-close] { display: none; }

            .ss-c-header__menu-toggle.is-active & {
                &[data-label-open]  { display: none; }
                &[data-label-close] { display: inline; }
            }
        }

        &__menu-toggle-icon {
            position: relative;
            display: inline-block;
            width: q(18);
            height: q(12);

            span {
                position: absolute;
                left: 0;
                right: 0;
                height: q(1.5);
                background-color: currentColor;
                transition: transform var(--ss-duration-200) ease, top var(--ss-duration-200) ease, opacity var(--ss-duration-200) ease;

                &:nth-child(1) { top: q(2); }
                &:nth-child(2) { top: q(8); }
            }

            .ss-c-header__menu-toggle.is-active & span {
                top: q(5);
                &:nth-child(1) { transform: rotate(45deg); }
                &:nth-child(2) { transform: rotate(-45deg); }
            }
        }
    }

    // -- header__primary  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary {
        display: none;
        flex: 1;
        justify-content: center;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            display: flex;
        }
    }

    // -- header__primary-list  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-list {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-6);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    // -- header__primary-item  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-item {
        position: relative;
    }

    // -- header__primary-link  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-link {
        display: inline-flex;
        align-items: center;
        gap: var(--ss-spacing-2);
        padding: var(--ss-spacing-3) 0;
        font-family: var(--ss-font-family-sans);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        text-transform: uppercase;
        letter-spacing: var(--ss-tracking-widest);
        color: currentColor;
        text-decoration: none;
        cursor: pointer;
        border-bottom: q(1) solid transparent;
        transition: border-color var(--ss-duration-200) ease, opacity var(--ss-duration-200) ease;

        &:hover,
        &[aria-expanded="true"] {
            border-bottom-color: currentColor;
        }
    }

    // -- header__primary-caret  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-header__primary-caret {
        display: inline-block;
        font-size: 0.65em;
        transform: translateY(q(-1));
        transition: transform var(--ss-duration-200) ease;

        .ss-c-header__primary-link[aria-expanded="true"] & {
            transform: translateY(q(-1)) rotate(180deg);
        }
    }

    // -- header__container  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__container {
      max-width: #{q(1280)};
      margin: 0 auto;
      padding: 0 var(--ss-spacing-12);
      height: 100%;
        // (stripped @include)
    }

    // -- header__logo  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      gap: var(--ss-spacing-4);
        // (stripped @include)
      &:hover {
        opacity: 0.8;
      }

      &:focus-visible {
        // (stripped @include)
      }
    }

    // -- header__logo-icon  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo-icon {
      width: q(32);
      height: q(32);
      flex-shrink: 0;
    }

    // -- header__logo-text  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__logo-text {
      font-size: q(20);
      font-weight: 700;
      color: var(--ss-color-text);
      letter-spacing: -0.02em;
    }

    // -- header__nav  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav {
      // (stripped @include block)

    }

    // -- header__nav-list  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav-list {
      display: flex;
      gap: var(--ss-spacing-6);
      list-style: none;
    }

    // -- header__nav-link  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__nav-link {
      color: var(--ss-color-text-secondary);
      font-size: q(14);
      font-weight: 500;
      padding: var(--ss-spacing-2) var(--ss-spacing-4);
        // (stripped @include)
        // (stripped @include)
      position: relative;

      &:hover {
        color: var(--ss-color-text);
      }

      &.active {
        color: var(--ss-color-accent);

        &::after {
          content: '';
          position: absolute;
          bottom: q(-2);
          left: 0;
          right: 0;
          height: q(2);
          background: var(--ss-color-accent);
          border-radius: q(1);
        }
      }
    }

    // -- header__menu-toggle  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__menu-toggle {
      display: none;
      flex-direction: column;
      gap: q(5);
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--ss-spacing-2);
        // (stripped @include)
      // (stripped @include block)


      &[aria-expanded="true"] {
        .ss-c-header__menu-bar {
          &:nth-child(1) {
            transform: rotate(45deg) translateY(q(12));
          }

          &:nth-child(2) {
            opacity: 0;
          }

          &:nth-child(3) {
            transform: rotate(-45deg) translateY(q(-12));
          }
        }
      }
    }

    // -- header__menu-bar  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__menu-bar {
      width: q(24);
      height: q(2);
      background: var(--ss-color-text);
      // (stripped @include block)

      border-radius: q(1);
    }

    // -- header__mobile-menu  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-menu {
      display: none;
      position: absolute;
      top: var(--header-height, #{q(72)});
      left: 0;
      right: 0;
      background: var(--ss-color-surface-alt);
      border-bottom: q(1) solid var(--ss-color-border);
      padding: var(--ss-spacing-6);
      z-index: calc(var(--ss-z-fixed) - 1);

      // (stripped @include block)

    }

    // -- header__mobile-nav-list  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--ss-spacing-4);
    }

    // -- header__mobile-nav-link  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__mobile-nav-link {
      display: block;
      padding: var(--ss-spacing-4) var(--ss-spacing-6);
      color: var(--ss-color-text-secondary);
      text-decoration: none;
      border-radius: var(--ss-radius-md);
        // (stripped @include)
        // (stripped @include)
      &:hover {
        background: var(--ss-color-surface);
        color: var(--ss-color-text);
      }

      &.active {
        background: color-mix(in srgb, var(--ss-color-accent) 10%, transparent);
        color: var(--ss-color-accent);
        font-weight: 500;
      }
    }

    // -- header__cta  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__cta {
      display: flex;
      gap: var(--ss-spacing-4);
      align-items: center;

      // (stripped @include block)

    }

    // -- header--sticky  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header--sticky {
      position: sticky;
      top: 0;
    }

    // -- header__search  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__search {
      // (stripped @include block)

    }

    // -- header__search-input  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__search-input {
      background: var(--ss-color-surface);
      border: q(1) solid var(--ss-color-border);
      color: var(--ss-color-text);
      padding: var(--ss-spacing-2) var(--ss-spacing-4);
      border-radius: var(--ss-radius-md);
      font-size: q(14);
        // (stripped @include)
      &:focus {
        outline: none;
        border-color: var(--ss-color-accent);
        background: var(--ss-color-background);
      }

      &::placeholder {
        color: var(--ss-color-text-muted);
      }
    }

    // -- header__breadcrumb  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__breadcrumb {
      font-size: q(12);
      color: var(--ss-color-text-muted);
      padding: q(4) var(--ss-spacing-6);

      a {
        color: var(--ss-color-accent);

        &:hover {
          text-decoration: underline;
        }
      }
    }

    // -- header__notification  (from site-geoid_org/src/static/scss/components/_header.scss) --
    .ss-c-header__notification {
      position: relative;

      .ss-c-badge {
        position: absolute;
        top: q(-4);
        right: q(-4);
        font-weight: 700;
        min-width: q(18);
      }
    }

    // -- site-main  (from site-inthecity_ai/src/static/scss/layout/_grid.scss) --
    .ss-c-site-main {
        display: grid;
        grid-template-columns: 1fr minmax(0, q(1024)) 1fr;
        gap: 0;
        margin: 0 auto;
        width: 100%;
        padding: 0 q(16) q(128);

        // First section gets top margin unless it's a hero
        > :first-child:not(.ss-c-hero) {
            margin-top: q(128);
        }
    }

    // -- skip-to-content  (from site-matter_tech/src/static/scss/layout/_container.scss) --
    .ss-c-skip-to-content {
        // (stripped @include)
    }

    // -- site-header--scrolled  (from site-matter_tech/src/static/scss/layout/_header.scss) --
    .ss-c-site-header--scrolled {
        &::after {
            background-color: var(--ss-color-border);
        }
    }

    // -- site-header__inner  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: unset;
        padding: 0 var(--ss-spacing-6);
        max-width: 100%;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            height: unset;
            padding: 0 var(--ss-spacing-8);
        }

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            padding: 0 var(--ss-spacing-12);
        }
    }

    // -- site-header__left  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__left {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-header__logo  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--ss-color-white);
        transition: opacity var(--ss-duration-150) ease;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-header__logo-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__logo-icon {
        width: q(28);
        height: q(28);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            width: q(32);
            height: q(32);
        }
    }

    // -- site-header__home-link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__home-link {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-white);
        text-decoration: none;
        transition: opacity var(--ss-duration-150) ease;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-header__right  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__right {
        display: flex;
        align-items: center;
    }

    // -- site-header__menu-toggle  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-toggle {
        appearance: none;
        background: none;
        border: none;
        padding: var(--ss-spacing-2) 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-header__menu-toggle-text  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-toggle-text {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-white);
        transition: opacity var(--ss-duration-150) ease;

        .ss-c-site-header__menu-toggle:hover & {
            opacity: 0.6;
        }
    }

    // -- site-header__menu-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-header__menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: q(5);
        width: q(20);
        height: q(16);

        span {
            display: block;
            width: 100%;
            height: q(2);
            background-color: var(--ss-color-white);
            transition: opacity var(--ss-duration-150) ease;
        }

        .ss-c-site-header__menu-toggle:hover & span {
            opacity: 0.6;
        }
    }

    // -- site-menu  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu {
        position: fixed;
        inset: 0;
        z-index: unset;
        background-color: var(--ss-color-fill);
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--ss-duration-500) ease,
            visibility var(--ss-duration-500) ease;

        // Open state
        &.is-open {
            opacity: 1;
            visibility: visible;
        }
    }

    // -- site-menu__inner  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0 var(--ss-spacing-6);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            padding: 0 var(--ss-spacing-8);
        }

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            padding: 0 var(--ss-spacing-12);
        }
    }

    // -- site-menu__header  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: unset;
        flex-shrink: 0;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            height: unset;
        }
    }

    // -- site-menu__header-left  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header-left {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-menu__header-right  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__header-right {
        display: flex;
        align-items: center;
    }

    // -- site-menu__logo  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--ss-color-text);
        transition: opacity var(--ss-duration-150) ease;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-menu__logo-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__logo-icon {
        width: q(28);
        height: q(28);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            width: q(32);
            height: q(32);
        }
    }

    // -- site-menu__home-link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__home-link {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-text);
        text-decoration: none;
        transition: opacity var(--ss-duration-150) ease;

        &:hover {
            opacity: 0.6;
        }
    }

    // -- site-menu__close  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close {
        appearance: none;
        background: none;
        border: none;
        padding: var(--ss-spacing-2) 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- site-menu__close-text  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close-text {
        font-size: unset;
        font-weight: unset;
        color: var(--ss-color-text);
        transition: opacity var(--ss-duration-150) ease;

        .ss-c-site-menu__close:hover & {
            opacity: 0.6;
        }
    }

    // -- site-menu__close-icon  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__close-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(20);
        height: q(16);
        position: relative;

        span {
            position: absolute;
            width: 100%;
            height: q(2);
            background-color: var(--ss-color-text);
            transition: opacity var(--ss-duration-150) ease;

            &:first-child {
                transform: rotate(45deg);
            }

            &:last-child {
                transform: rotate(-45deg);
            }
        }

        .ss-c-site-menu__close:hover & span {
            opacity: 0.6;
        }
    }

    // -- site-menu__nav  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__nav {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--ss-spacing-10) 0;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            padding: var(--ss-spacing-16) 0;
        }
    }

    // -- site-menu__list  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
    }

    // -- site-menu__item  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__item {
        margin: 0;
        padding: 0;
        border-bottom: none;

        &:first-child {
            border-top: none;
        }
    }

    // -- site-menu__link  (from site-mesmera_io/src/static/scss/app/_header.scss) --
    .ss-c-site-menu__link {
        display: inline-block;
        padding: var(--ss-spacing-3) 0;
        font-size: unset;
        font-weight: var(--ss-font-weight-semibold);
        line-height: var(--ss-leading-none);
        letter-spacing: var(--ss-tracking-tighter);
        color: var(--ss-color-text);
        text-decoration: none;
        transition: opacity var(--ss-duration-150) ease;

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            font-size: unset;
            padding: var(--ss-spacing-4) 0;
        }

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            font-size: unset;
            padding: var(--ss-spacing-5) 0;
        }

        &:hover {
            opacity: 0.4;
        }
    }

    // -- header-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: q(72);
    }

    // -- header-brand  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-brand {
        flex-shrink: 0;
    }

    // -- header-nav  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-nav {
        display: none;

        @media (min-width: q(1024)) {
            display: block;
        }
    }

    // -- header-actions  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-header-actions {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- header-logo  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-header-logo {
        display: flex;
        align-items: center;
        gap: unset;

        .ss-c-logo-image {
            height: q(32);
            width: auto;
        }

        .ss-c-logo-text {
            font-size: var(--ss-font-size-xl);
            font-weight: var(--ss-font-weight-bold);
            color: var(--ss-color-gray-900);
        }

        .ss-c-logo-accent {
            font-weight: unset;
            color: var(--ss-color-gray-500);
        }
    }

    // -- site-nav  (from site-speckle_org/src/static/scss/layout/_header.scss) --
    .ss-c-site-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &__logo {
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-lg);
        font-weight: var(--ss-font-weight-bold);
        letter-spacing: var(--ss-tracking-widest);
        color: var(--ss-color-foreground);
        text-decoration: none;
        transition: color var(--ss-duration-150);

        &:hover {
          color: var(--ss-color-accent);
        }
      }

      &__menu {
        display: flex;
        list-style: none;
        gap: var(--ss-spacing-6);

        @media (max-width: q(639)) {
          gap: var(--ss-spacing-4);
        }
      }

      &__link {
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        letter-spacing: var(--ss-tracking-widest);
        color: var(--ss-color-text-muted);
        text-decoration: none;
        text-transform: uppercase;
        transition: color var(--ss-duration-150);

        &:hover {
          color: var(--ss-color-accent);
        }
      }
    }

    // -- site-logo  (from site-suell_org/src/static/scss/layout/_header.scss) --
    .ss-c-site-logo {
        height: q(40);
        width: auto;

        img {
            height: 100%;
            width: auto;
        }
    }
}