/*
 * MORPHEION-THEME Design System 1.0
 *
 * Static presentation layer.
 *
 * Customer Brand Colors are not defined here.
 * Active site-bound semantic color properties are supplied separately
 * by the MORPHEION-THEME brand runtime.
 */

/*
 * Typography assets
 *
 * Manrope
 * Source: googlefonts/manrope
 * Upstream commit: 468c0dbe38efa331b80bfe9448256abe27be44c3
 * License: SIL Open Font License 1.1
 */
@font-face {
    font-family: "Manrope";
    src: url("../Fonts/Manrope/Manrope-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
^}

@layer morpheion-foundation,
       morpheion-semantic,
       morpheion-base,
       morpheion-components,
       morpheion-utilities;


/* ==========================================================================
   Foundation
   ========================================================================== */

@layer morpheion-foundation {

    :root {
        /*
         * Typography
         */

        --morpheion-font-family-sans:
            "Manrope",
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        --morpheion-font-size-display: 4.5rem;
        --morpheion-font-size-h1: 3rem;
        --morpheion-font-size-h2: 2rem;
        --morpheion-font-size-h3: 1.5rem;
        --morpheion-font-size-lead: 1.125rem;
        --morpheion-font-size-body: 1rem;
        --morpheion-font-size-small: 0.875rem;
        --morpheion-font-size-eyebrow: 0.75rem;
        --morpheion-font-size-navigation: 1rem;
        --morpheion-font-size-button: 0.875rem;

        --morpheion-font-weight-regular: 400;
        --morpheion-font-weight-medium: 500;
        --morpheion-font-weight-semibold: 600;
        --morpheion-font-weight-bold: 700;

        --morpheion-line-height-display: 1.05;
        --morpheion-line-height-h1: 1.10;
        --morpheion-line-height-h2: 1.15;
        --morpheion-line-height-h3: 1.25;
        --morpheion-line-height-lead: 1.60;
        --morpheion-line-height-body: 1.60;
        --morpheion-line-height-small: 1.50;
        --morpheion-line-height-eyebrow: 1.40;

        --morpheion-font-size-display: 4.5rem;
        --morpheion-font-size-h1: 3rem;
        --morpheion-font-size-h2: 2rem;
        --morpheion-font-size-h3: 1.5rem;
        --morpheion-font-size-lead: 1.125rem;
        --morpheion-font-size-body: 1rem;
        --morpheion-font-size-small: 0.875rem;
        --morpheion-font-size-eyebrow: 0.75rem;
        --morpheion-font-size-navigation: 1rem;
        --morpheion-font-size-button: 0.875rem;

        --morpheion-font-weight-regular: 400;
        --morpheion-font-weight-medium: 500;
        --morpheion-font-weight-semibold: 600;
        --morpheion-font-weight-bold: 700;

        --morpheion-line-height-display: 1.05;
        --morpheion-line-height-h1: 1.10;
        --morpheion-line-height-h2: 1.15;
        --morpheion-line-height-h3: 1.25;
        --morpheion-line-height-lead: 1.60;
        --morpheion-line-height-body: 1.60;
        --morpheion-line-height-small: 1.50;
        --morpheion-line-height-eyebrow: 1.40;
        --morpheion-line-height-navigation: 1.25;
        --morpheion-line-height-button: 1.25;

        --morpheion-letter-spacing-display: -0.025em;
        --morpheion-letter-spacing-h1: -0.020em;
        --morpheion-letter-spacing-h2: -0.015em;
        --morpheion-letter-spacing-h3: -0.010em;
        --morpheion-letter-spacing-eyebrow: 0.12em;
        --morpheion-letter-spacing-button: 0.01em;

        /*
         * Spacing
         */

        --morpheion-space-0: 0;
        --morpheion-space-1: 0.25rem;
        --morpheion-space-2: 0.5rem;
        --morpheion-space-3: 0.75rem;
        --morpheion-space-4: 1rem;
        --morpheion-space-6: 1.5rem;
        --morpheion-space-8: 2rem;
        --morpheion-space-12: 3rem;
        --morpheion-space-16: 4rem;
        --morpheion-space-24: 6rem;
        --morpheion-space-32: 8rem;

        /*
         * Layout
         */

        --morpheion-width-reading: 47.5rem;
        --morpheion-width-content: 80rem;
        --morpheion-width-wide: 90rem;

        --morpheion-gutter-mobile: 1.25rem;
        --morpheion-gutter-tablet: 2rem;
        --morpheion-gutter-desktop: 3rem;

        /*
         * Shape
         */

        --morpheion-radius-none: 0;
        --morpheion-radius-small: 0.25rem;
        --morpheion-radius-medium: 0.5rem;
        --morpheion-radius-large: 1rem;
        --morpheion-radius-round: 999px;

        --morpheion-border-width-subtle: 1px;
        --morpheion-border-width-strong: 2px;

        /*
         * Elevation
         *
         * Elevation is intentionally restrained.
         */

        --morpheion-elevation-none: none;
        --morpheion-elevation-subtle:
            0 0.125rem 0.5rem rgb(17 19 24 / 0.08);
        --morpheion-elevation-floating:
            0 0.5rem 1.5rem rgb(17 19 24 / 0.14);
    }
}


/* ==========================================================================
   Semantic
   ========================================================================== */

@layer morpheion-semantic {

    :root {
        /*
         * Typography
         */

        --morpheion-type-display-size: var(--morpheion-font-size-display);
        --morpheion-type-display-weight: var(--morpheion-font-weight-bold);
        --morpheion-type-display-line-height: var(--morpheion-line-height-display);
        --morpheion-type-display-letter-spacing: var(--morpheion-letter-spacing-display);

        --morpheion-type-heading-1-size: var(--morpheion-font-size-h1);
        --morpheion-type-heading-1-weight: var(--morpheion-font-weight-bold);
        --morpheion-type-heading-1-line-height: var(--morpheion-line-height-h1);
        --morpheion-type-heading-1-letter-spacing: var(--morpheion-letter-spacing-h1);

        --morpheion-type-heading-2-size: var(--morpheion-font-size-h2);
        --morpheion-type-heading-2-weight: var(--morpheion-font-weight-bold);
        --morpheion-type-heading-2-line-height: var(--morpheion-line-height-h2);
        --morpheion-type-heading-2-letter-spacing: var(--morpheion-letter-spacing-h2);

        --morpheion-type-heading-3-size: var(--morpheion-font-size-h3);
        --morpheion-type-heading-3-weight: var(--morpheion-font-weight-semibold);
        --morpheion-type-heading-3-line-height: var(--morpheion-line-height-h3);
        --morpheion-type-heading-3-letter-spacing: var(--morpheion-letter-spacing-h3);

        --morpheion-type-lead-size: var(--morpheion-font-size-lead);
        --morpheion-type-lead-weight: var(--morpheion-font-weight-regular);
        --morpheion-type-lead-line-height: var(--morpheion-line-height-lead);

        --morpheion-type-body-size: var(--morpheion-font-size-body);
        --morpheion-type-body-weight: var(--morpheion-font-weight-regular);
        --morpheion-type-body-line-height: var(--morpheion-line-height-body);

        --morpheion-type-small-size: var(--morpheion-font-size-small);
        --morpheion-type-small-weight: var(--morpheion-font-weight-regular);
        --morpheion-type-small-line-height: var(--morpheion-line-height-small);

        --morpheion-type-eyebrow-size: var(--morpheion-font-size-eyebrow);
        --morpheion-type-eyebrow-weight: var(--morpheion-font-weight-semibold);
        --morpheion-type-eyebrow-line-height: var(--morpheion-line-height-eyebrow);
        --morpheion-type-eyebrow-letter-spacing: var(--morpheion-letter-spacing-eyebrow);

        --morpheion-type-navigation-size: var(--morpheion-font-size-navigation);
        --morpheion-type-navigation-weight: var(--morpheion-font-weight-medium);
        --morpheion-type-navigation-line-height: var(--morpheion-line-height-navigation);

        --morpheion-type-button-size: var(--morpheion-font-size-button);
        --morpheion-type-button-weight: var(--morpheion-font-weight-semibold);
        --morpheion-type-button-line-height: var(--morpheion-line-height-button);
        --morpheion-type-button-letter-spacing: var(--morpheion-letter-spacing-button);

        /*
         * Spacing
         */

        --morpheion-space-inline-xs: var(--morpheion-space-1);
        --morpheion-space-inline-sm: var(--morpheion-space-2);
        --morpheion-space-inline-md: var(--morpheion-space-3);

        --morpheion-space-content-sm: var(--morpheion-space-4);
        --morpheion-space-content-md: var(--morpheion-space-6);
        --morpheion-space-content-lg: var(--morpheion-space-8);

        --morpheion-space-component: var(--morpheion-space-12);

        --morpheion-space-section-sm: var(--morpheion-space-16);
        --morpheion-space-section: var(--morpheion-space-24);
        --morpheion-space-section-lg: var(--morpheion-space-32);

        /*
         * Content widths
         */

        --morpheion-content-reading: var(--morpheion-width-reading);
        --morpheion-content-default: var(--morpheion-width-content);
        --morpheion-content-wide: var(--morpheion-width-wide);
        --morpheion-content-focus: 90%;

        /*
         * Shape
         */

        --morpheion-radius-control: var(--morpheion-radius-small);
        --morpheion-radius-card: var(--morpheion-radius-medium);
        --morpheion-radius-media: var(--morpheion-radius-small);
        --morpheion-radius-icon: var(--morpheion-radius-round);
    }
}


/* ==========================================================================
   Base
   ========================================================================== */

@layer morpheion-base {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        font-family: var(--morpheion-font-family-sans);
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: var(--morpheion-font-family-sans);
        font-size: var(--morpheion-type-body-size);
        font-weight: var(--morpheion-type-body-weight);
        line-height: var(--morpheion-type-body-line-height);
        color: var(--morpheion-color-text-primary);
        background: var(--morpheion-color-surface-default);
    }

    h1,
    h2,
    h3,
    p {
        margin-block-start: 0;
    }

    h1 {
        font-size: var(--morpheion-type-heading-1-size);
        font-weight: var(--morpheion-type-heading-1-weight);
        line-height: var(--morpheion-type-heading-1-line-height);
        letter-spacing: var(--morpheion-type-heading-1-letter-spacing);
    }

    h2 {
        font-size: var(--morpheion-type-heading-2-size);
        font-weight: var(--morpheion-type-heading-2-weight);
        line-height: var(--morpheion-type-heading-2-line-height);
        letter-spacing: var(--morpheion-type-heading-2-letter-spacing);
    }

    h3 {
        font-size: var(--morpheion-type-heading-3-size);
        font-weight: var(--morpheion-type-heading-3-weight);
        line-height: var(--morpheion-type-heading-3-line-height);
        letter-spacing: var(--morpheion-type-heading-3-letter-spacing);
    }

    img,
    picture,
    video,
    svg {
        display: block;
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    a {
        color: inherit;
    }
}


/* ==========================================================================
   Components
   ========================================================================== */

@layer morpheion-components {

    /*
     * Landing Hero
     *
     * FRAME-LANDING owns content and rendering semantics.
     * MORPHEION-THEME owns visual presentation only.
     */

    .morpheion-hero {
        margin-block-end: var(--morpheion-space-6);
    }

    .morpheion-hero__inner {
        width: min(
            calc(100% - (2 * var(--morpheion-gutter-mobile))),
            var(--morpheion-content-default)
        );
        margin-inline: auto;
        padding-block:
            var(--morpheion-space-section-sm)
            var(--morpheion-space-section);
        display: grid;
        gap: var(--morpheion-space-component);
        align-items: center;
    }

    .morpheion-hero__content {
        max-width: var(--morpheion-content-reading);
    }

    .morpheion-hero__eyebrow {
        margin-block-end: var(--morpheion-space-content-sm);
        font-size: var(--morpheion-type-eyebrow-size);
        font-weight: var(--morpheion-type-eyebrow-weight);
        line-height: var(--morpheion-type-eyebrow-line-height);
        letter-spacing: var(--morpheion-type-eyebrow-letter-spacing);
        text-transform: uppercase;
    }

    .morpheion-hero__heading {
        margin-block-end: var(--morpheion-space-content-md);
        text-wrap: balance;
    }

    .morpheion-hero__lead {
        max-width: var(--morpheion-content-reading);
        margin-block-end: 0;
        font-size: var(--morpheion-type-lead-size);
        font-weight: var(--morpheion-type-lead-weight);
        line-height: var(--morpheion-type-lead-line-height);
    }

    .morpheion-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--morpheion-space-inline-sm);
        margin-block-start: var(--morpheion-space-content-lg);
    }

    .morpheion-action {
        display: inline-flex;
        min-height: 44px;
        padding:
            var(--morpheion-space-inline-md)
            var(--morpheion-space-content-md);
        align-items: center;
        justify-content: center;
        border: var(--morpheion-border-width-subtle) solid currentColor;
        border-radius: var(--morpheion-radius-control);
        font-size: var(--morpheion-type-button-size);
        font-weight: var(--morpheion-type-button-weight);
        line-height: var(--morpheion-type-button-line-height);
        letter-spacing: var(--morpheion-type-button-letter-spacing);
        text-align: center;
        text-decoration: none;
    }

    .morpheion-action--primary {
        font-weight: var(--morpheion-font-weight-bold);
    }

    .morpheion-hero__media {
        overflow: hidden;
        border-radius: var(--morpheion-radius-media);
    }

    .morpheion-hero__image {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }

    /*
     * HERO Image Presentation 1.2
     *
     * Natural image proportions within bounded media dimensions.
     * Preserve existing HERO cover and background presentations.
     */

    .morpheion-hero--image-contain .morpheion-hero__media {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .morpheion-hero--image-contain .morpheion-hero__image {
        position: static;
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 30rem;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }

    /*
     * HERO Responsive Slot Geometry 1.2 – Prototype 1
     *
     * Desktop only.
     * Both image presentations share the same media geometry.
     * Background presentation remains untouched.
     */
    @media (min-width: 64rem) {

        .morpheion-hero--with-media:not(.morpheion-hero--background)
        .morpheion-hero__media {
            position: relative;
            width: 100%;
            height: min(72dvh, 48vw, 44rem);
            min-width: 0;
            overflow: hidden;
        }

        .morpheion-hero--with-media:not(.morpheion-hero--background)
        .morpheion-hero__image {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            aspect-ratio: auto;
            object-fit: cover;
            object-position: center;
        }

        .morpheion-hero--image-contain:not(.morpheion-hero--background)
        .morpheion-hero__image {
            object-fit: contain;
        }
    }

    /*
     * HERO Presentation Contract 1.0
     *
     * Presentation selection belongs to FRAME-LANDING.
     * Visual implementation belongs to MORPHEION-THEME.
     */

    /* CENTERED: content first, media below. */

    .morpheion-hero--centered .morpheion-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .morpheion-hero--centered .morpheion-hero__content {
        width: 100%;
        max-width: var(--morpheion-content-reading);
    }

    .morpheion-hero--centered .morpheion-hero__actions {
        justify-content: center;
    }

    .morpheion-hero--centered .morpheion-hero__media {
        width: 100%;
        max-width: var(--morpheion-content-default);
    }

    /*
     * BACKGROUND: image occupies the entire HERO.
     *
     * The text is protected by the already validated
     * text-primary / surface-alternate color combination.
     */

    /*
     * Background media follows the outer HERO slot geometry.
     * HERO and CTA therefore share the same image boundaries.
     */

    .morpheion-hero--background {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .morpheion-hero--background .morpheion-hero__inner {
        position: static;
        width: 100%;
        margin-inline: auto;
        min-height: 28rem;
        display: flex;
        align-items: center;
        padding-block: var(--morpheion-space-section);
        padding-inline: var(--morpheion-gutter-mobile);
    }

    /*
     * Media Independence 1.0
     *
     * Preserve the selected presentation when no media exists.
     * Background keeps its text position without reserving
     * the full image-driven HERO height.
     */

    .morpheion-hero--background.morpheion-hero--without-media
    .morpheion-hero__inner {
        min-height: 0;
    }

    .morpheion-hero--background .morpheion-hero__content {
        position: relative;
        z-index: 1;
        width: min(100%, var(--morpheion-content-reading));
        max-width: var(--morpheion-content-reading);
        padding: var(--morpheion-space-component);
        color: var(--morpheion-color-text-primary);
        background-color: var(--morpheion-color-surface-alternate);
        border-radius: var(--morpheion-radius-media);
    }

    .morpheion-hero--background .morpheion-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .morpheion-hero--background .morpheion-hero__image {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
    }

    /*
     * BACKGROUND – text alignment inside the HERO slot.
     *
     * These rules affect the content panel only.
     */

    .morpheion-hero--background-text-start
    .morpheion-hero__inner {
        justify-content: flex-start;
    }

    .morpheion-hero--background-text-center
    .morpheion-hero__inner {
        justify-content: center;
    }

    .morpheion-hero--background-text-end
    .morpheion-hero__inner {
        justify-content: flex-end;
    }

    @media (min-width: 48rem) {

        .morpheion-hero--background .morpheion-hero__inner {
            padding-inline: var(--morpheion-gutter-tablet);
        }

        .morpheion-hero__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-tablet))),
                var(--morpheion-content-default)
            );
        }
    }

    @media (min-width: 64rem) {

        .morpheion-hero--background .morpheion-hero__inner {
            padding-inline: var(--morpheion-gutter-desktop);
        }

        .morpheion-hero__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-desktop))),
                var(--morpheion-content-default)
            );
            padding-block:
                var(--morpheion-space-0)
                var(--morpheion-space-0);
        }

        /*
         * BACKGROUND shares the CTA outer slot geometry.
         *
         * The background image fills only this slot.
         * The text remains inside the regular content grid.
         */

        .morpheion-hero--background {
            width: calc(
                100% - (2 * var(--morpheion-gutter-desktop))
            );
            margin-inline: auto;
        }

        .morpheion-hero--with-media:not(.morpheion-hero--centered):not(.morpheion-hero--background) .morpheion-hero__inner {
            width: calc(100% - (2 * var(--morpheion-gutter-desktop)));
            grid-template-columns:
                minmax(0, 5fr)
                minmax(0, 7fr);
            gap: var(--morpheion-space-component);
	    align-items: start;
        }

        .morpheion-hero--with-media:not(.morpheion-hero--centered):not(.morpheion-hero--background) .morpheion-hero__content {
            max-width: none;
        }

        .morpheion-hero--with-media .morpheion-hero__media {
            width: 100%;
        }

        /*
         * MEDIA START: media left, content right.
         */

        .morpheion-hero--media-start .morpheion-hero__media {
            grid-column: 1;
            grid-row: 1;
        }

        .morpheion-hero--media-start .morpheion-hero__content {
            grid-column: 2;
            grid-row: 1;
        }

        /*
         * MEDIA END and DEFAULT retain the existing
         * content-left / media-right arrangement.
         */

        .morpheion-hero__heading {
            font-size: var(--morpheion-type-display-size);
            font-weight: var(--morpheion-type-display-weight);
            line-height: var(--morpheion-type-display-line-height);
            letter-spacing: var(--morpheion-type-display-letter-spacing);
        }
    }

        /*
     * Landing Features
     *
     * FRAME-LANDING owns content and rendering semantics.
     * MORPHEION-THEME owns visual presentation only.
     *
     * Default / minimal deliberately relies on typography,
     * spacing and layout rather than decorative containers.
     */

    .morpheion-features {
        margin-block-end: var(--morpheion-space-8);
    }

    .morpheion-features__inner {
        width: min(
            calc(100% - (2 * var(--morpheion-gutter-mobile))),
            var(--morpheion-content-default)
        );
        margin-inline: auto;
        padding-block:
            var(--morpheion-space-section)
            var(--morpheion-space-section);
    }

    .morpheion-features__header {
        max-width: var(--morpheion-content-reading);
        margin-block-end: var(--morpheion-space-component);
    }

    .morpheion-features__eyebrow {
        margin-block-end: var(--morpheion-space-content-sm);
        font-size: var(--morpheion-type-eyebrow-size);
        font-weight: var(--morpheion-type-eyebrow-weight);
        line-height: var(--morpheion-type-eyebrow-line-height);
        letter-spacing: var(--morpheion-type-eyebrow-letter-spacing);
        text-transform: uppercase;
    }

    .morpheion-features__heading {
        margin-block-end: 0;
        text-wrap: balance;
    }

    .morpheion-features__lead {
        margin-block-start: var(--morpheion-space-content-md);
        margin-block-end: 0;
        font-size: var(--morpheion-type-lead-size);
        font-weight: var(--morpheion-type-lead-weight);
        line-height: var(--morpheion-type-lead-line-height);
    }

    .morpheion-features__items {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--morpheion-space-component);
    }

    .morpheion-feature__title {
        margin-block-end: var(--morpheion-space-content-sm);
    }

    .morpheion-feature__text {
        max-width: var(--morpheion-content-reading);
        margin-block-end: 0;
    }

    .morpheion-features-space {
        min-height: var(--morpheion-space-section);
    }

    @media (min-width: 48rem) {

        .morpheion-features__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-tablet))),
                var(--morpheion-content-default)
            );
        }

        .morpheion-features__items {
            grid-template-columns:
                repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {

        .morpheion-features__inner {
            width: var(--morpheion-content-focus);
            padding-block:
                var(--morpheion-space-0)
                var(--morpheion-space-0);
        }
    }

        /*
     * Landing Section
     *
     * FRAME-LANDING owns content, media composition and semantics.
     * MORPHEION-THEME owns visual presentation only.
     */

    .morpheion-section {
        margin-block-end: var(--morpheion-space-2);
    }

    .morpheion-section__inner {
        display: grid;
        width: min(
            calc(100% - (2 * var(--morpheion-gutter-mobile))),
            var(--morpheion-content-default)
        );
        margin-inline: auto;
        padding-block:
            var(--morpheion-space-0)
            var(--morpheion-space-section);
        gap: var(--morpheion-space-component);
    }

    .morpheion-section__media {
        overflow: hidden;
        border-radius: var(--morpheion-radius-media);
    }

    .morpheion-section__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /*
     * SECTION Image Presentation 1.2
     *
     * Natural image proportions within bounded media dimensions.
     * Preserve legacy SECTION presentation.
     */

    .morpheion-section--image-contained .morpheion-section__media {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .morpheion-section--image-contained .morpheion-section__image {
        position: static;
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 34rem;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }

    .morpheion-section__content {
        align-self: start;
        max-width: var(--morpheion-content-reading);
    }

    .morpheion-section__eyebrow {
        margin-block-end: var(--morpheion-space-content-sm);
        font-size: var(--morpheion-type-eyebrow-size);
        font-weight: var(--morpheion-type-eyebrow-weight);
        line-height: var(--morpheion-type-eyebrow-line-height);
        letter-spacing: var(--morpheion-type-eyebrow-letter-spacing);
        text-transform: uppercase;
        transform: translateY(8px);
    }

    .morpheion-section__heading {
        margin-block-end: var(--morpheion-space-content-md);
        text-wrap: balance;
    }

    /*
     * SECTION Responsive Slot Geometry 1.2 – Prototype 1
     *
     * Desktop only.
     * Existing SECTION grid remains unchanged.
     */

    @media (min-width: 64rem) {

        /*
         * SECTION 1.2 – Shared responsive media geometry.
         * Legacy presentation remains unchanged.
         */

        .morpheion-section--image-contained .morpheion-section__media,
        .morpheion-section--image-cover .morpheion-section__media {
            position: relative;
            width: 100%;
            height: min(72dvh, 48vw, 44rem);
            min-width: 0;
            overflow: hidden;
        }

        .morpheion-section--image-contained .morpheion-section__image,
        .morpheion-section--image-cover .morpheion-section__image {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            aspect-ratio: auto;
        }

        /*
         * Portrait: complete image, aligned to content start.
         */

        .morpheion-section--image-contained .morpheion-section__image {
            object-fit: contain;
            object-position: left center;
        }

        /*
         * Motiv: fill media frame, cropping permitted.
         */

        .morpheion-section--image-cover .morpheion-section__image {
            object-fit: cover;
            object-position: center;
        }
    }

    /*
     * SECTION 1.1 — Editorial Text Formatting
     *
     * Preserve author-defined line breaks and blank lines.
     * Keep automatic wrapping and safe Fluid escaping.
     */
    .morpheion-section__text {
        margin-block-end: 0;
        white-space: pre-line;
    }

    .morpheion-section__key-points {
        display: grid;
        gap: var(--morpheion-space-content-lg);
        margin-block-start: var(--morpheion-space-component);
    }

    .morpheion-section__key-point {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--morpheion-space-content-md);
        align-items: start;
    }

    .morpheion-section__key-point-icon {
        width: 3rem;
        height: 3rem;
    }

    .morpheion-section__key-point-icon-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .morpheion-section__key-point-title {
        margin-block-end: var(--morpheion-space-content-sm);
    }

    .morpheion-section__key-point-text {
        margin-block-end: 0;
    }

    .morpheion-section__action {
        margin-block-start: var(--morpheion-space-content-lg);
    }

    .morpheion-section__action-link {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        font-size: var(--morpheion-type-button-size);
        font-weight: var(--morpheion-type-button-weight);
        line-height: var(--morpheion-type-button-line-height);
        letter-spacing: var(--morpheion-type-button-letter-spacing);
        text-decoration-thickness: var(--morpheion-border-width-subtle);
        text-underline-offset: 0.2em;
    }

    @media (min-width: 48rem) {

        .morpheion-section__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-tablet))),
                var(--morpheion-content-default)
            );
        }
    }

    @media (min-width: 64rem) {

        .morpheion-section__inner {
            width: var(--morpheion-content-focus);
            padding-block:
                var(--morpheion-space-0)
                var(--morpheion-space-0);
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
            gap: var(--morpheion-space-section);
            align-items: center;
        }

        .morpheion-section--text-image .morpheion-section__media {
            order: 2;
        }

        .morpheion-section--text-image .morpheion-section__content {
            order: 1;
        }
    }

    /*
     * Landing Trust / Proof
     *
     * FRAME-LANDING owns proof semantics and identity media.
     * MORPHEION-THEME owns visual presentation only.
     */

    .morpheion-trust-proof {
        margin-block-end: var(--morpheion-space-2);
    }

    .morpheion-trust-proof-space {
        min-height: var(--morpheion-space-section);
    }

    .morpheion-trust-proof__inner {
        width: min(
            calc(100% - (2 * var(--morpheion-gutter-mobile))),
            var(--morpheion-content-default)
        );
        margin-inline: auto;
        padding-block: var(--morpheion-space-section);
    }

    .morpheion-trust-proof__header {
        max-width: var(--morpheion-content-reading);
        margin-inline: auto;
        text-align: center;
    }

    .morpheion-trust-proof__eyebrow {
        margin-block-end: var(--morpheion-space-content-sm);
        font-size: var(--morpheion-type-eyebrow-size);
        font-weight: var(--morpheion-type-eyebrow-weight);
        line-height: var(--morpheion-type-eyebrow-line-height);
        letter-spacing: var(--morpheion-type-eyebrow-letter-spacing);
        text-transform: uppercase;
    }

    .morpheion-trust-proof__heading {
        max-width: var(--morpheion-content-reading);
        margin-block-end: var(--morpheion-space-content-md);
        text-wrap: balance;
    }

    .morpheion-trust-proof__text {
        max-width: var(--morpheion-content-reading);
        margin-block-end: 0;
        font-size: var(--morpheion-type-lead-size);
        font-weight: var(--morpheion-type-lead-weight);
        line-height: var(--morpheion-type-lead-line-height);
    }

    .morpheion-trust-proof__items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--morpheion-space-component);
        margin-block-start: var(--morpheion-space-content-lg);
    }

    .morpheion-trust-proof__item {
        flex: 0 1 18rem;
        min-width: 0;
    }

    .morpheion-trust-proof__logo {
        display: flex;
        width: 100%;
        height: 6rem;
        align-items: center;
        justify-content: flex-start;
        margin-block-end: var(--morpheion-space-content-sm);
    }

    .morpheion-trust-proof__logo-image {
        display: block;
        width: auto;
        max-width: 12rem;
        height: auto;
        max-height: 6rem;
        object-fit: contain;
    }

    .morpheion-trust-proof__item-name {
        margin-block-end: var(--morpheion-space-inline-xs);
        font-size: var(--morpheion-type-h3-size);
        font-weight: var(--morpheion-type-h3-weight);
        line-height: var(--morpheion-type-h3-line-height);
    }

    /*
     * MORPHEION Diamond Rating
     *
     * FRAME-LANDING owns rating semantics.
     * MORPHEION-THEME owns visual presentation.
     */

    .morpheion-trust-proof__rating {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.25rem;
        margin-block-end: var(--morpheion-space-content-sm);
        line-height: 1;
    }

    .morpheion-trust-proof__diamond {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        flex: 0 0 auto;
        object-fit: contain;
    }

    /*
     * Visible Diamond Rating Scale
     *
     * The rating is informational.
     * Its visual appearance follows MORPHEION-THEME typography.
     */
    .morpheion-trust-proof__rating-label {
        margin-inline-start: var(--morpheion-space-inline-xs);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
    }

    .morpheion-trust-proof__technology,
    .morpheion-trust-proof__description {
        max-width: var(--morpheion-content-reading);
        margin-block-end: 0;
    }

    /*
     * DOKIMĒ Minimal — Assessment Presentation
     *
     * FRAME-LANDING owns assessment semantics.
     * MORPHEION-THEME owns visual presentation.
     */

    .morpheion-trust-proof__assessment-authority {
        margin-block-end: var(--morpheion-space-inline-xs);
        font-weight: 600;
    }

    .morpheion-trust-proof__assessment-report {
        margin-block-end: 0;
    }

    @media (min-width: 48rem) {

        .morpheion-trust-proof__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-tablet))),
                var(--morpheion-content-default)
            );
        }
    }

    @media (min-width: 64rem) {

        .morpheion-trust-proof__inner {
            width: calc(100% - (2 * var(--morpheion-gutter-desktop)));
        }
    }

    /*
     * Landing CTA
     *
     * FRAME-LANDING owns content and media semantics.
     * MORPHEION-THEME owns visual presentation only.
     */

    .morpheion-cta {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 32rem;
        display: grid;
        align-items: center;
        margin-block-end: var(--morpheion-space-6);
        color: var(--morpheion-color-surface-default);
    }

    .morpheion-cta__background {
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .morpheion-cta__background-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .morpheion-cta::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(
                90deg,
                rgb(17 19 24 / 78%) 0%,
                rgb(17 19 24 / 58%) 48%,
                rgb(17 19 24 / 24%) 100%
            );
        content: "";
    }

    .morpheion-cta__inner {
        width: min(
            calc(100% - (2 * var(--morpheion-gutter-mobile))),
            var(--morpheion-content-default)
        );
        margin-inline: auto;
        padding-block: var(--morpheion-space-section);
    }

    .morpheion-cta__content {
        max-width: var(--morpheion-content-reading);
    }

    .morpheion-cta__eyebrow {
        margin-block-end: var(--morpheion-space-content-sm);
        font-size: var(--morpheion-type-eyebrow-size);
        font-weight: var(--morpheion-type-eyebrow-weight);
        line-height: var(--morpheion-type-eyebrow-line-height);
        letter-spacing: var(--morpheion-type-eyebrow-letter-spacing);
        text-transform: uppercase;
    }

    .morpheion-cta__heading {
        margin-block-end: var(--morpheion-space-content-md);
        text-wrap: balance;
    }

    .morpheion-cta__text {
        max-width: var(--morpheion-content-reading);
        margin-block-end: 0;
        font-size: var(--morpheion-type-lead-size);
        font-weight: var(--morpheion-type-lead-weight);
        line-height: var(--morpheion-type-lead-line-height);
    }

    .morpheion-cta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--morpheion-space-inline-sm);
        margin-block-start: var(--morpheion-space-content-lg);
    }

    .morpheion-cta__action {
        display: inline-flex;
        min-height: 44px;
        padding:
            var(--morpheion-space-inline-md)
            var(--morpheion-space-content-md);
        align-items: center;
        justify-content: center;
        border: var(--morpheion-border-width-subtle) solid currentColor;
        border-radius: var(--morpheion-radius-control);
        color: inherit;
        font-size: var(--morpheion-type-button-size);
        font-weight: var(--morpheion-type-button-weight);
        line-height: var(--morpheion-type-button-line-height);
        letter-spacing: var(--morpheion-type-button-letter-spacing);
        text-align: center;
        text-decoration: none;
    }

    .morpheion-cta__action--primary {
        background: var(--morpheion-color-surface-default);
        color: var(--morpheion-color-text-primary);
    }

    @media (min-width: 48rem) {

        .morpheion-cta__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-tablet))),
                var(--morpheion-content-default)
            );
        }
    }

    @media (min-width: 64rem) {

        .morpheion-cta {
            min-height: 36rem;
        }

        .morpheion-cta__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-desktop))),
                var(--morpheion-content-default)
            );
            padding-block: var(--morpheion-space-section-lg);
        }
    }

    @media (min-width: 64rem) {

        .morpheion-cta {
            width: calc(100% - (2 * var(--morpheion-gutter-desktop)));
            margin-inline: auto;
        }

        .morpheion-cta__inner {
            width: min(
                calc(100% - (2 * var(--morpheion-gutter-desktop))),
                var(--morpheion-content-default)
            );
        }
    }

    /*
     * MORPHEION THEME 1.0 – Smartphone Typography Step A
     *
     * Component-specific typography adjustments.
     * Desktop and tablet remain unchanged.
     *
     * No changes to spacing, buttons, images or layout.
     */

    @media (max-width: 47.999rem) {

        /* HERO */
        .morpheion-hero__heading {
            font-size: 2.125rem; /* 34px */
        }

        .morpheion-hero__lead {
            font-size: 0.9375rem; /* 15px */
        }

        /* Section headings */
        .morpheion-features__heading,
        .morpheion-section__heading,
        .morpheion-trust-proof__heading,
        .morpheion-cta__heading {
            font-size: 1.375rem; /* 22px */
        }

        /* Individual item headings */
        .morpheion-feature__title,
        .morpheion-trust-proof__item-name {
            font-size: 1.125rem; /* 18px */
        }

        /* Landing body text – excluding header and footer */
        .morpheion-hero__content,
        .morpheion-feature__text,
        .morpheion-section__text,
        .morpheion-trust-proof__item {
            font-size: 0.9375rem; /* 15px */
        }
    }
}

/* MORPHEION Fine Line — Feature icon presentation */

.morpheion-features--icon .morpheion-feature__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 7rem;
    height: 7rem;
    margin-block-end: var(--morpheion-space-8);
}

.morpheion-features--icon .morpheion-feature__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * MORPHEION THEME 1.0 – Smartphone Media Scaling Step B
 *
 * Smartphone-only media proportions.
 * Existing card spacing and desktop/tablet presentation
 * remain unchanged.
 *
 * These overrides intentionally follow the existing
 * unlayered Feature Icon presentation rules.
 */
@media (max-width: 47.999rem) {

    .morpheion-features--icon .morpheion-feature__icon {
        width: 5.75rem;
        height: 5.75rem;
    }

    .morpheion-trust-proof__logo {
        height: 5rem;
    }

    .morpheion-trust-proof__logo-image {
        max-width: 10rem;
        max-height: 5rem;
    }
}