////
///
/// Hero Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `hero` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 72 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.Hero
/// @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 {
    // -- hero  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --

    // -- hero-background  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-background {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    // -- hero-gradient  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-gradient {
        position: absolute;
        inset: 0;
        background: var(--ss-color-white);
    }

    // -- hero-pattern  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-pattern {
        display: none;
    }

    // -- hero-content  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --

    // -- hero-label  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-label {
        display: inline-block;
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-primary);
        margin-bottom: var(--ss-spacing-4);
    }

    // -- hero-title  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --

    // -- hero-title-line  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-title-line {
        display: block;
    }

    // -- hero-title-accent  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-title-accent {
        color: var(--ss-color-primary);
    }

    // -- hero-description  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-description {
        font-size: var(--ss-font-size-lg);
        color: var(--ss-color-gray-600);
        margin-bottom: var(--ss-spacing-8);
        max-width: q(540);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            font-size: var(--ss-font-size-xl);
        }
    }

    // -- hero-actions  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --

    // -- hero-visual  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-visual {
        display: none;

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

    // -- hero-shape  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-shape {
        width: 100%;
        max-width: q(400);
        color: var(--ss-color-primary);
        animation: float calc(var(--ss-duration-1000) * 6) ease-in-out infinite;
    }

    // -- hero-scroll  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-scroll {
        position: absolute;
        bottom: var(--ss-spacing-8);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--ss-spacing-2);
        font-size: var(--ss-font-size-xs);
        color: var(--ss-color-gray-300);
        animation: bounce var(--ss-duration-loop-slow) ease-in-out infinite;

        svg {
            width: q(20);
            height: q(20);
        }
    }

    // -- hero--team  (from site-scape_ventures/src/static/scss/sections/_hero.scss) --
    .ss-c-hero--team {
        padding: q(128) 0 q(64);
        border-bottom: q(1) solid var(--ss-color-primary);

        .ss-c-hero__title {
            font-size: q(48);
            margin-bottom: q(16);

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
                font-size: q(72);
            }
        }

        .ss-c-hero__subtitle {
            font-size: var(--ss-font-size-lg);
            color: var(--ss-color-gray-600);
            max-width: q(640);
        }
    }

    // -- hero--ctas  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-hero--ctas {
        display: flex;
        flex-wrap: wrap;
        gap: q(16);
        justify-content: center;
        margin-top: q(32);

        .ss-c-button {
            min-width: q(192);
        }

        @media (max-width: q(600)) {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            max-width: q(320);
            margin-left: auto;
            margin-right: auto;

            .ss-c-button {
                width: 100%;
            }
        }
    }

    // -- project-hero-cover  (from site-scape_foundation/src/static/scss/sections/_project_hero.scss) --
    .ss-c-project-hero-cover {
        position: relative;
        width: 100%;
        height: 60vh;
        min-height: q(400);
        max-height: q(700);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        &__image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        &__overlay {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: q(8);
            max-width: q(900);

            // Subtle text shadow for readability
            text-shadow: 0 q(2) q(20) color-mix(in srgb, var(--ss-color-black) 30%, transparent);
        }

        &__title {
            font-family: Georgia, serif, Georgia, "Times New Roman", serif;
            font-size: clamp(q(40), 6vw, q(64));
            font-weight: 700;
            color: var(--ss-color-white);
            margin: 0 0 q(4);
            line-height: 1.2;
        }

        &__tagline {
            font-family: 'FF DIN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, -apple-system, sans-serif;
            font-size: clamp(q(16), 2vw, q(20));
            color: color-mix(in srgb, var(--ss-color-white) 90%, transparent);
            margin: 0;
            font-weight: 400;
            max-width: q(700);
            margin-left: auto;
            margin-right: auto;
        }

        // Gradient overlay for text readability
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                color-mix(in srgb, var(--ss-color-black) 20%, transparent) 0%,
                color-mix(in srgb, var(--ss-color-black) 40%, transparent) 50%,
                color-mix(in srgb, var(--ss-color-black) 30%, transparent) 100%
            );
            z-index: 1;
        }
    }

    // -- page-hero  (from site-coreal_ai/src/static/scss/index.scss) --
    .ss-c-page-hero {
        padding: calc(var(--ss-spacing-24) + q(80)) var(--ss-spacing-6) var(--ss-spacing-16);
        text-align: center;
        background: var(--ss-color-white);

        &__inner {
            max-width: q(700);
            margin: 0 auto;
        }

        &__title {
            margin: var(--ss-spacing-6) 0 var(--ss-spacing-4);
        }

        &__subtitle {
            color: var(--ss-color-gray-600);
            font-size: q(18);
        }
    }

    // -- hero__container  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__container {
      max-width: #{q(1280)};
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--ss-spacing-24);
      align-items: center;

      // (stripped @include block)

    }

    // -- hero__content  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__content {
      z-index: var(--ss-z-10);

      // (stripped @include block)

    }

    // -- hero__title  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__title {
      font-size: clamp(q(48), 8vw, q(80));
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-bottom: var(--ss-spacing-6);
      line-height: 1.1;
        // (stripped @include)
    }

    // -- hero__subtitle  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__subtitle {
      font-size: clamp(q(18), 2vw, q(22));
      color: var(--ss-color-accent);
      margin-bottom: var(--ss-spacing-12);
      font-weight: 500;
    }

    // -- hero__body  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__body {
      margin-bottom: var(--ss-spacing-12);

      p {
        font-size: q(17);
        line-height: 1.8;

        // (stripped @include block)

      }
    }

    // -- hero__actions  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__actions {
      display: flex;
      gap: var(--ss-spacing-4);
      flex-wrap: wrap;

      // (stripped @include block)


      // (stripped @include block)

    }

    // -- hero__visual  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero__visual {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: q(300);

      // (stripped @include block)


      // (stripped @include block)

    }

    // -- hero--bg  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--bg {
      position: relative;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: color-mix(in srgb, var(--ss-color-gray-900) 60%, transparent);
        z-index: 1;
      }

      .ss-c-hero__container {
        position: relative;
        z-index: 2;
      }
    }

    // -- hero--dark  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--dark {
      background: var(--ss-color-background);
    }

    // -- hero--light  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--light {
      background: var(--ss-color-surface-alt);
    }

    // -- hero--gradient  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--gradient {
      background: linear-gradient(135deg, var(--ss-color-background) 0%, var(--ss-color-surface-alt) 100%);
    }

    // -- hero--split  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--split {
      .ss-c-hero__container {
        // (stripped @include block)

      }
    }

    // -- hero--centered  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--centered {
      text-align: center;

      .ss-c-hero__container {
        grid-template-columns: 1fr;

        .ss-c-hero__title {
          margin: 0 auto;
        }

        .ss-c-hero__subtitle {
          margin: 0 auto;
        }

        .ss-c-hero__actions {
          justify-content: center;
        }
      }
    }

    // -- hero-gradient-bg  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero-gradient-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(
        ellipse at 50% 0%,
        color-mix(in srgb, var(--ss-color-accent) 15%, transparent) 0%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 0;
    }

    // -- hero--parallax  (from site-geoid_org/src/static/scss/layout/_hero.scss) --
    .ss-c-hero--parallax {
      overflow: hidden;

      .ss-c-hero__visual {
        transform: perspective(q(1000));
      }
    }

    // -- hero__image  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__image {
        flex: 1;
        min-width: 0;

        img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 70vh;
            object-fit: cover;
            border-radius: var(--ss-radius-md);
        }
    }

    // -- hero__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__eyebrow {
        display: inline-flex;
        // Anchor the dot to the first line of text so it stays at the top
        // when the eyebrow wraps onto multiple lines (mobile Android et al.).
        align-items: baseline;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-accent);
        font-size: q(12);
    }

    // -- hero__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--ss-color-accent);
        border-radius: 50%;
        flex-shrink: 0;
        // Lift the dot up to optical-centre with the cap-height of the first line.
        align-self: flex-start;
        margin-top: 0.4em;
    }

    // -- hero__date  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__date {
        display: inline-flex;
        gap: 0.5em;
        color: var(--ss-color-gray-700);
        margin-bottom: 0.5em;

        .ss-c-icon,
        svg {
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            color: var(--ss-color-accent);
        }
    }

    // -- hero__meta  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;

        @media (max-width: q(768)) {
            flex-direction: column;
            gap: 0.5em;
        }
    }

    // -- hero__meta-item  (from site-inthecity_ai/src/static/scss/blocks/_hero.scss) --
    .ss-c-hero__meta-item {
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--ss-color-gray-700);

        i,
        svg {
            color: var(--ss-color-accent);
        }
    }

    // -- hero--animated  (from site-lovelacelabs_ai/src/static/scss/app/_background-animation.scss) --
    .ss-c-hero--animated {
        position: relative;
        overflow: hidden;

        .ss-c-background-animation {
            position: absolute;
            z-index: 0;
        }

        .ss-c-hero--content {
            position: relative;
            z-index: 1;
        }
    }

    // -- hero__title--dark  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-hero__title--dark {
        color: unset;
    }

    // -- hero__subtitle--dark  (from site-lovelacelabs_ai/src/static/scss/app/_charts.scss) --
    .ss-c-hero__subtitle--dark {
        color: unset;
    }

    // -- hero--compact  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero--compact {
        min-height: auto;
        padding-bottom: unset;

        // (stripped @include block)

    }

    // -- hero-container  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-container {
        // (stripped @include)
        display: grid;
        gap: unset;
        align-items: center;

        // (stripped @include block)

    }

    // -- hero-accent  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-accent {
        font-style: italic;
        color: inherit;
    }

    // -- hero-image  (from site-matter_tech/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-image {
        width: 100%;
        height: auto;
        max-height: q(600);
        object-fit: contain;
    }

    // -- hero-eyebrow  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-hero-eyebrow {
        font-size: var(--ss-font-size-sm);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: unset;
        margin-bottom: unset;
    }

    // -- hero-portrait  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-hero-portrait {
        position: relative;
        width: q(300);
        height: q(300);
        margin: 0 auto;

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

    // -- hero-metrics  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-hero-metrics {
        display: flex;
        justify-content: center;
        gap: unset;
        margin-top: unset;
    }

    // -- hero-player  (from site-speckle_org/src/static/scss/sections/_hero.scss) --
    .ss-c-hero-player {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: q(600);
      display: flex;
      align-items: flex-end;
      padding: var(--ss-spacing-16) 0;
      overflow: hidden;

      &__background {
        position: absolute;
        inset: 0;
        z-index: -1;
      }

      &__video-container {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--ss-color-surface-alt) 0%, var(--ss-color-background) 100%);
      }

      &__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.7;
      }

      &__gradient {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(to top, var(--ss-color-background) 0%, transparent 50%),
          linear-gradient(to right, var(--ss-color-background) 0%, transparent 60%),
          linear-gradient(135deg, color-mix(in srgb, var(--ss-color-success) 5%, transparent) 0%, transparent 50%);
      }

      &__content {
        position: relative;
        z-index: 1;
        max-width: q(700);
        padding: 0 var(--ss-spacing-8);

        @media (min-width: q(1200)) {
          padding: 0 var(--ss-spacing-12);
        }
      }

      &__branding {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-4);
        margin-bottom: var(--ss-spacing-6);
      }

      &__label {
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        letter-spacing: var(--ss-tracking-widest);
        color: var(--ss-color-accent);
        padding: var(--ss-spacing-1) var(--ss-spacing-3);
        border: q(1) solid var(--ss-color-accent);
        background: var(--ss-color-accent-bg);
      }

      &__episode {
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        letter-spacing: var(--ss-tracking-widest);
        color: var(--ss-color-text-muted);
      }

      &__title {
        margin-bottom: var(--ss-spacing-6);
      }

      &__title-line {
        display: block;
        font-size: var(--ss-font-size-4xl);
        font-weight: var(--ss-font-weight-black);
        letter-spacing: var(--ss-tracking-tight);
        line-height: var(--ss-leading-none);
        text-transform: uppercase;

        @media (min-width: q(768)) {
          font-size: var(--ss-font-size-6xl);
        }

        @media (min-width: q(1200)) {
          font-size: var(--ss-font-size-7xl);
        }

        &--accent {
          color: var(--ss-color-accent);
          text-shadow: 0 0 q(60) var(--ss-color-accent-bg);
        }
      }

      &__description {
        font-size: var(--ss-font-size-lg);
        font-weight: var(--ss-font-weight-light);
        line-height: var(--ss-leading-relaxed);
        color: var(--ss-color-secondary);
        margin-bottom: var(--ss-spacing-6);
        max-width: q(550);
      }

      &__meta {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-3);
        margin-bottom: var(--ss-spacing-8);
        flex-wrap: wrap;
      }

      &__meta-item {
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-text-muted);

        &--tag {
          color: var(--ss-color-accent);
          padding: var(--ss-spacing-1) var(--ss-spacing-2);
          background: var(--ss-color-accent-bg);
          border-radius: var(--ss-radius-sm);
        }
      }

      &__meta-divider {
        color: var(--ss-color-gray-600);
      }

      &__actions {
        display: flex;
        gap: var(--ss-spacing-4);
        flex-wrap: wrap;
      }

      &__controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--ss-spacing-6) var(--ss-spacing-8);
        background: linear-gradient(to top, var(--ss-color-background), transparent);
        opacity: 0;
        transition: opacity var(--ss-duration-200) var(--ss-ease-out);

        .ss-c-hero-player:hover & {
          opacity: 1;
        }
      }

      &__scroll-indicator {
        position: absolute;
        bottom: var(--ss-spacing-8);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--ss-spacing-2);
        color: var(--ss-color-muted);
        font-family: var(--ss-font-family-mono);
        font-size: var(--ss-font-size-xs);
        letter-spacing: var(--ss-tracking-widest);
        text-transform: uppercase;
        animation: bounce var(--ss-duration-loop-slow) infinite;

        svg {
          width: q(20);
          height: q(20);
        }
      }
    }

    // -- hero-mark  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-hero-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: q(56);
        height: q(56);
        font-size: var(--ss-font-size-3xl);
        color: var(--ss-color-primary);
        background: var(--ss-color-fill);
        border: q(1) solid var(--ss-color-border);
        border-radius: var(--ss-radius-none);
        margin-bottom: unset;
    }

    // -- hero-tagline  (from site-starling_associates/src/static/scss/index.scss) --
    .ss-c-hero-tagline {
        font-size: var(--ss-font-size-lg);
        color: var(--ss-color-gray-600);
        margin-bottom: unset;

        @media (min-width: q(768)) {
            font-size: var(--ss-font-size-xl);
        }
    }

    // -- page-hero__image  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    // -- page-hero__overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__overlay {
        position: absolute;
        inset: 0;
        background: var(--page-hero-overlay, none);
        z-index: 1;
    }

    // -- page-hero__content  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: q(32);
        color: var(--ss-color-white);
    }

    // -- page-hero__placeholder  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero__placeholder {
        position: absolute;
        inset: 0;
        background: var(--ss-color-primary);

        // Subtle gradient for visual interest
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                transparent 0%,
                color-mix(in srgb, var(--ss-color-white) 5%, transparent) 50%,
                transparent 100%
            );
        }
    }

    // -- page-hero--wide  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--wide {
        --page-hero-aspect: 21 / 9;
    }

    // -- page-hero--square  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--square {
        --page-hero-aspect: 1 / 1;
    }

    // -- page-hero--video  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--video {
        --page-hero-aspect: 16 / 9;
    }

    // -- page-hero--full  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--full {
        --page-hero-min-height: 100vh;
        --page-hero-max-height: none;
    }

    // -- page-hero--short  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--short {
        --page-hero-min-height: 30vh;
        --page-hero-max-height: 50vh;
    }

    // -- page-hero--no-overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--no-overlay {
        .ss-c-page-hero__overlay {
            display: none;
        }
    }

    // -- page-hero--light-overlay  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--light-overlay {
        --page-hero-overlay: linear-gradient(
            to top,
            color-mix(in srgb, var(--ss-color-black) 30%, transparent) 0%,
            color-mix(in srgb, var(--ss-color-black) 10%, transparent) 50%,
            transparent 100%
        );
    }

    // -- page-hero--center  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--center {
        .ss-c-page-hero__content {
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }

    // -- page-hero--top  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--top {
        .ss-c-page-hero__content {
            justify-content: flex-start;
        }
    }

    // -- page-hero--dark  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--dark {
        --page-hero-bg: var(--ss-color-gray-800);
    }

    // -- page-hero--brand  (from site-starling_studio/src/static/scss/app/_page_hero.scss) --
    .ss-c-page-hero--brand {
        --page-hero-bg: var(--ss-color-primary);
    }

    // dropped `.ss-c-ribbon__menu` (site-starling_studio/src/static/scss/app/_ribbon.scss): starling_studio ribbon menu: the desktop-hide rule lost its mobile reveal in the harvest and hid every `.ss-c-ribbon__menu`

    // -- hero__headline  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__headline {
        font-size: q(60);
        line-height: 1.05;
        margin: 0;

        @media (max-width: q(900)) {
            font-size: q(42);
        }

        @media (max-width: q(600)) {
            font-size: q(32);
        }
    }

    // -- hero__subtext  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__subtext {
        font-size: q(18);
        color: var(--ss-color-gray-600);
        max-width: 50ch;
    }

    // -- hero__tagline  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__tagline {
        font-family: "SF Mono", "Fira Code", Menlo, Monaco, monospace;
        font-size: q(14);
        color: var(--ss-color-primary);
    }

    // -- hero__cta  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__cta {
        display: flex;
        gap: unset;
        margin-top: unset;
    }

    // -- hero__ascii  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-hero__ascii {
        display: flex;
        justify-content: flex-end;

        @media (max-width: q(900)) {
            justify-content: flex-start;
        }
    }
}