.parma-intro-active {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.parma-intro-active body.product-modular-launch-page {
    height: 100svh;
    overflow: hidden !important;
    pointer-events: none !important;
    touch-action: none;
    user-select: none;
}

.parma-intro-active .product-modular-launch-page :is(
    .header,
    .parma-glass-hero__switch,
    .parma-glass-hero__try,
    .parma-glass-hero__palette,
    .modular-sticky-cta,
    .mobile-measurement-cta,
    .back-to-top,
    .floating-messengers,
    .chat-widget
) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.parma-intro-returning .product-modular-launch-page :is(
    .header,
    .parma-glass-hero__switch,
    .parma-glass-hero__try,
    .parma-glass-hero__palette,
    .modular-sticky-cta,
    .mobile-measurement-cta,
    .floating-messengers,
    .chat-widget
) {
    animation: parma-interface-return 750ms cubic-bezier(.16, 1, .3, 1) both;
}

.parma-intro-returning .product-modular-launch-page :is(
    .parma-glass-hero__switch,
    .parma-glass-hero__try,
    .parma-glass-hero__palette,
    .modular-sticky-cta,
    .mobile-measurement-cta,
    .floating-messengers,
    .chat-widget
) {
    animation-delay: 100ms;
}

@keyframes parma-interface-return {
    from { opacity: 0; }
    to { opacity: 1; }
}

.parma-story {
    --story-header: 106px;
    --story-height: calc(100svh - 32px);
    position: relative;
    margin-top: calc(var(--story-header) + 24px);
    margin-top: 0;
    color: #fff;
    background: #f8f9fa;
}

.parma-story > .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.parma-story__stage {
    position: relative;
    height: max(580px, var(--story-height));
    overflow: hidden;
    isolation: isolate;
}

.parma-story.is-motion-ready { height: auto; }
.parma-story.is-motion-ready .parma-story__stage { position: relative; top: auto; }

.parma-story__poster,
.parma-story__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
}

.parma-story__video { opacity: 0; }
.parma-story.is-motion-ready .parma-story__video { opacity: 1; }
.parma-story__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 11, .66), rgba(2, 5, 8, .97) 48%, rgba(3, 8, 11, .84));
    opacity: var(--shade-opacity, .12);
    pointer-events: none;
}

.parma-story__portal {
    position: absolute;
    inset: 0;
    z-index: 7;
    overflow: hidden;
    opacity: var(--portal-opacity, 0);
    pointer-events: none;
}

.parma-story__portal-word {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    color: rgba(255, 255, 255, .42);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(112px, 20vw, 320px);
    font-weight: 900;
    line-height: .78;
    letter-spacing: 0;
    white-space: nowrap;
    background:
        linear-gradient(112deg,
            rgba(255, 255, 255, .96) 4%,
            rgba(255, 255, 255, .38) 24%,
            rgba(226, 241, 246, .2) 43%,
            rgba(255, 255, 255, .86) 58%,
            rgba(255, 255, 255, .28) 78%,
            rgba(255, 255, 255, .7) 100%);
    background-size: 190% 100%;
    background-position: var(--portal-shine, 0%) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1px, .12vw, 2px) rgba(255, 255, 255, .7);
    translate: var(--portal-x, -50%) var(--portal-y, -50%);
    scale: var(--portal-scale, .88);
    transform-origin: 8.5% 36%;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .7))
        drop-shadow(0 10px 24px rgba(7, 16, 20, .28));
    will-change: translate, scale, opacity;
}

.parma-story__portal-word::before,
.parma-story__portal-word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.parma-story__portal-word::before {
    color: transparent;
    -webkit-text-stroke: clamp(.5px, .07vw, 1.2px) rgba(255, 255, 255, .92);
    translate: 0 -1px;
    opacity: .78;
}

.parma-story__portal-word::after {
    color: transparent;
    -webkit-text-stroke: clamp(1px, .11vw, 1.8px) rgba(12, 23, 28, .22);
    translate: 0 1px;
    opacity: .64;
}

.parma-story__intro {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--story-header) + 58px);
    opacity: var(--intro-opacity, 1);
    visibility: var(--intro-visibility, visible);
}

.parma-story__eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.parma-story__intro h1 {
    color: #fff;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    max-width: 760px;
    margin: 0 0 18px;
    text-wrap: balance;
}
.parma-story__lead { max-width: 560px; font-size: 18px; line-height: 1.6; margin: 0; }
.parma-story__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.parma-story__actions .btn { min-height: 48px; font-size: 15px; letter-spacing: 0; }
.parma-story__actions .btn--outline { background: #fff; color: #20242a; border-color: #fff; }

@media (max-width: 992px) {
    .parma-story { --story-header: 90px; }
    .parma-story__intro h1 { font-size: 42px; max-width: 650px; }
}

@media (max-width: 600px) {
    .parma-story { --story-header: 90px; --story-height: calc(100svh - 28px); margin-top: calc(var(--story-header) + 14px); }
    .parma-story__stage { height: max(580px, var(--story-height)); }
    .parma-story__intro { padding-top: calc(var(--story-header) + 40px); }
    .parma-story__intro h1 { font-size: 32px; max-width: 360px; }
    .parma-story__lead { font-size: 15px; max-width: 330px; }
    .parma-story__eyebrow { font-size: 12px; }
    .parma-story__actions { gap: 8px; margin-top: 20px; }
    .parma-story__actions .btn { padding: 12px 16px; font-size: 13px; }
    .parma-story__portal-word { font-size: clamp(76px, 22vw, 108px); }
}

@media (max-width: 380px) {
    html[lang="ru"] .parma-story__intro h1 { font-size: 26px; }
}

.parma-glass-hero {
    --glass-shift-x: 0px;
    --glass-shift-y: 0px;
    position: relative;
    min-height: min(880px, 92svh);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    justify-items: center;
    align-items: start;
    padding: 58px max(28px, calc((100% - 1200px) / 2)) 176px;
    color: #171d28;
    background: #f7f5f3;
}

.parma-glass-hero::before {
    content: "";
    position: absolute;
    inset: -32px;
    z-index: -2;
    background: url("/images/parma-motion/parma-glass-hero.webp") center / cover no-repeat;
    filter: blur(28px) saturate(.82);
    opacity: .28;
    transform: scale(1.06);
}

/* Product sections otherwise inherit a globally transparent background. */
#parma-design { background-color: #f7f5f3 !important; }

/* Deliberately flat: a z-index or a transform here would isolate the image's blend
   mode from the hero backdrop. Auto still paints above the veil at a negative index. */
.parma-glass-hero__swap {
    position: absolute;
    inset: 0;
}

/* The pointer parallax uses the individual translate/scale properties so the slide
   keyframes keep the transform channel to themselves. */
.parma-glass-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    translate: var(--glass-shift-x) var(--glass-shift-y);
    scale: 1.02;
    object-fit: cover;
    object-position: center;
    /* Multiplying the near-white studio backdrop against the hero drops it onto the
       page's warm base instead of the photo's cool white. */
    mix-blend-mode: multiply;
    transition: translate 240ms ease-out;
}

@keyframes glass-swap-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translate3d(-14%, 0, 0); }
}

@keyframes glass-swap-in {
    from { opacity: 0; transform: translate3d(14%, 0, 0); }
    to { opacity: 1; transform: none; }
}

.parma-glass-hero.is-swapping-out .parma-glass-hero__image,
.parma-glass-hero.is-swapping-out [data-glass-name],
.parma-glass-hero.is-swapping-out .parma-glass-hero__specs dd { animation: glass-swap-out 220ms ease-in forwards; }

.parma-glass-hero.is-swapping-in .parma-glass-hero__image,
.parma-glass-hero.is-swapping-in [data-glass-name],
.parma-glass-hero.is-swapping-in .parma-glass-hero__specs dd { animation: glass-swap-in 320ms cubic-bezier(.2, .8, .25, 1) both; }

.parma-glass-hero__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* The switch sits inside the centred row, so without a mirror of the same width the
   flex centring pushes the wordmark left by the switch plus one gap. */
.parma-glass-hero__brand::before {
    content: "";
    flex: none;
    width: 46px;
}

.parma-glass-hero__switch {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(23, 29, 40, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    color: #171d28;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

/* The outro overlay disables pointer events wholesale; the toggle opts back in
   and stays unreachable while faded out because the script marks it inert. */
.parma-glass-hero__switch { pointer-events: auto; }
.parma-glass-hero__switch:hover { background: #f46616; border-color: #f46616; color: #fff; }
.parma-glass-hero__switch:hover i { transform: translateX(3px); }
.parma-glass-hero__switch i { color: #000; font-size: 16px; transition: color 180ms ease, transform 180ms ease; }
.parma-glass-hero__switch:hover i { color: #fff; }
.parma-glass-hero__switch:focus-visible { outline: 2px solid #f46616; outline-offset: 3px; }

.parma-glass-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #fff 0%, #f8f5f2 58%, rgba(244,102,22,.08) 100%);
}

.parma-glass-hero__title {
    position: relative;
    z-index: 3;
    text-align: center;
}

.parma-glass-hero__kicker {
    margin: 0 0 10px;
    color: #f46616;
    font-size: 15px;
    font-weight: 800;
    text-transform: none;
}

/* Both wordmarks are set to the same rendered width, so the headline block keeps the
   same footprint when the switch swaps the model. PARMA measures 3.958em and ELEGANT
   4.951em in this face, so ELEGANT is sized at 3.958 / 4.951 = .7995 of PARMA. Keep the
   two --wordmark values in that ratio if either one is retuned. */
.parma-glass-hero { --wordmark: min(160px, 16vw); }
.parma-glass-hero[data-glass-model="elegant"] { --wordmark: min(127.9px, 12.79vw); }

.parma-glass-hero h2 {
    margin: 0;
    color: #131923;
    font-size: var(--wordmark);
    font-weight: 850;
    line-height: .84;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(255,255,255,.78), 0 18px 42px rgba(37,25,17,.09);
}

.parma-glass-hero__dock {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 4;
    width: min(900px, calc(100% - 48px));
    padding: 7px 22px 9px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    background: rgba(255,255,255,.3);
    box-shadow:
        0 20px 50px rgba(58,36,21,.14),
        0 3px 10px rgba(58,36,21,.08),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -1px 0 rgba(255,255,255,.26);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    backdrop-filter: blur(24px) saturate(1.35);
    text-align: center;
    transform: translateX(-50%);
}

.parma-glass-hero__specs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; }
.parma-glass-hero__specs div { min-width: 0; padding: 0 16px; text-align: center; border-left: 1px solid rgba(23,29,40,.1); }
.parma-glass-hero__specs div:first-child { border-left: 0; }
.parma-glass-hero__specs dt { color: rgba(23,29,40,.52); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.parma-glass-hero__specs dd { margin: 2px 0 0; color: #171d28; font-size: 13px; font-weight: 800; }

/* Lives inside the dock rather than as a fourth absolutely positioned layer: the
   dock grows upward from its fixed `bottom`, so no offset restacking is needed and
   the link inherits the outro fade that already targets .parma-glass-hero__dock. */
.parma-glass-hero__try {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(23,29,40,.1);
    width: 100%;
    color: #a94710;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
    text-decoration: none;
    /* #parma-design.is-story-outro sets pointer-events: none on the whole overlay,
       so every interactive child has to opt back in or it is just dead text.
       Staying unreachable mid-fade is handled by the script's `inert` toggle. */
    pointer-events: auto;
}

.parma-glass-hero__try i { font-size: 13px; }

/* Sitting inside the spec dock, the link reads as a caption unless it carries a
   permanent link affordance. Only the <span> is underlined so the two icons stay
   clean; the arrow is what signals "this goes somewhere". */
.parma-glass-hero__try span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(169,71,16,.45);
    text-underline-offset: 4px;
}

/* Needs the extra class to outrank `.parma-glass-hero__try i` above. */
.parma-glass-hero__try .parma-glass-hero__try-arrow {
    font-size: 10px;
    transition: transform 160ms ease;
}

.parma-glass-hero__try:hover { color: #7f350c; }
.parma-glass-hero__try:hover span { text-decoration-color: currentColor; }
.parma-glass-hero__try:hover .parma-glass-hero__try-arrow { transform: translateX(3px); }
.parma-glass-hero__try:focus-visible { outline: 2px solid #f46616; outline-offset: 3px; border-radius: 4px; }

.parma-glass-hero__palette {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: calc(100% - 48px);
    transform: translateX(-50%);
}

/* The outro overlay drops pointer events for the whole hero; the swatches opt back
   in and stay unreachable while faded because the script marks the hero inert. */
.parma-glass-hero__swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 7px;
    border: 1px solid rgba(23,29,40,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    color: rgba(23,29,40,.7);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    pointer-events: auto;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.parma-glass-hero__swatch::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    background: var(--swatch, #444);
    box-shadow: 0 1px 4px rgba(37,25,17,.3);
}
.parma-glass-hero__swatch:hover { border-color: rgba(23,29,40,.32); color: #171d28; }
.parma-glass-hero__swatch:focus-visible { outline: 2px solid #f46616; outline-offset: 3px; }
.parma-glass-hero__swatch[aria-pressed="true"] {
    border-color: #f46616;
    background: rgba(255,255,255,.85);
    color: #171d28;
}

@keyframes glass-tint-out { to { opacity: 0; } }
@keyframes glass-tint-in { from { opacity: 0; } }
.parma-glass-hero.is-tinting-out .parma-glass-hero__image,
.parma-glass-hero.is-tinting-out .parma-glass-hero__specs dd { animation: glass-tint-out 160ms ease-in forwards; }
.parma-glass-hero.is-tinting-in .parma-glass-hero__image,
.parma-glass-hero.is-tinting-in .parma-glass-hero__specs dd { animation: glass-tint-in 220ms ease-out both; }

@media (max-width: 768px) {
    .parma-glass-hero {
        /* Column is pinned to the container so the bleeding image cannot widen the
           track and stretch the percentage-sized title and dock along with it. */
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        /* Rows stay content-sized and the block is centred as a whole: the module is
           width-capped, so a stretching row would only pool dead space around it. */
        align-content: center;
        min-height: 600px;
        row-gap: 12px;
        /* Balance the product group within the hero while clearing the mobile CTA. */
        padding: 44px 10px 128px;
        background: #f7f5f3;
    }
    /* Pinned to the viewport, the hero shares its lower band with the floating
       messenger stack, so the full-width dock has to be lifted above it. The stack
       starts 232px above the hero's base, which is all this needs to clear. */
    .parma-glass-hero.is-story-outro { padding: 112px 10px 60px; }
    .parma-glass-hero::before {
        filter: blur(22px) saturate(.9);
        opacity: .42;
        transform: scale(1.1);
    }
    .parma-glass-hero__veil {
        background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 45%, rgba(244,102,22,.12) 100%);
    }
    .parma-glass-hero__title { width: 100%; }
    .parma-glass-hero__kicker { margin-bottom: 6px; font-size: 12px; }
    /* The row now reserves the switch width on both sides, so the wordmark is capped
       against the viewport minus those two slots rather than just the one. */
    /* 132px = the two 38px switch slots, their two 12px gaps and the hero's 10px side
       padding, so the cap is the width actually left for the word at any phone size. */
    .parma-glass-hero { --wordmark: min(92px, calc((100vw - 132px) / 3.958)); }
    .parma-glass-hero[data-glass-model="elegant"] { --wordmark: min(73.5px, calc((100vw - 132px) / 4.951)); }
    .parma-glass-hero h2 { max-width: 100%; line-height: .86; white-space: nowrap; }
    .parma-glass-hero__brand { gap: 12px; }
    .parma-glass-hero__brand::before { width: 38px; }
    .parma-glass-hero__switch { width: 38px; height: 38px; }
    .parma-glass-hero__switch i { font-size: 15px; }
    .parma-glass-hero__swap {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 620px;
        aspect-ratio: 1672 / 941;
    }
    /* Keep every product render inside the hero column on narrow screens. */
    .parma-glass-hero__image {
        margin: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        translate: none;
        scale: 1;
        /* Stops soften only the studio backdrop, not the product itself. */
        --glass-mask:
            linear-gradient(180deg, transparent 0, #000 5%, #000 96%, transparent 100%),
            linear-gradient(90deg, transparent 0, #000 10%, #000 92%, transparent 100%);
        object-fit: contain;
        mix-blend-mode: multiply;
        -webkit-mask-image: var(--glass-mask);
        mask-image: var(--glass-mask);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
    .parma-glass-hero__dock {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 8px);
        padding: 8px 5px 9px;
        background: rgba(255,255,255,.28);
        transform: none;
    }
    .parma-glass-hero__specs div { padding: 0 5px; }
    .parma-glass-hero__specs dt { font-size: 8px; letter-spacing: 0; }
    .parma-glass-hero__specs dd { font-size: 11px; }
    /* The dock is in normal flow here, so the link needs its own tap height. */
    .parma-glass-hero__try { min-height: 40px; margin-top: 6px; padding-top: 6px; gap: 7px; font-size: 11.5px; }
    .parma-glass-hero__try i { font-size: 12px; }
    .parma-glass-hero__try .parma-glass-hero__try-arrow { font-size: 9.5px; }
    .parma-glass-hero__palette {
        position: relative;
        left: auto;
        bottom: auto;
        gap: 8px;
        max-width: 100%;
        margin-top: 2px;
        transform: none;
    }
    .parma-glass-hero__swatch { padding: 7px 14px 7px 7px; gap: 8px; font-size: 12px; }
    .parma-glass-hero__swatch::before { width: 20px; height: 20px; }
}

@media (max-width: 768px) and (max-height: 620px) {
    .parma-glass-hero { min-height: 540px; padding: 26px 10px 92px; row-gap: 8px; }
    .parma-glass-hero.is-story-outro { padding: 96px 10px 42px; }
    .parma-glass-hero h2 { font-size: min(68px, calc(16vw - 1px)); }
}

@media (max-width: 380px) {
    html[lang="ru"] .parma-glass-hero__kicker { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .parma-intro-returning .product-modular-launch-page :is(
        .header,
        .parma-glass-hero__switch,
        .parma-glass-hero__try,
        .parma-glass-hero__palette,
        .modular-sticky-cta,
        .mobile-measurement-cta,
        .floating-messengers,
        .chat-widget
    ) {
        animation: none;
    }

    .parma-story.is-motion-ready { height: auto; }
    .parma-story.is-motion-ready .parma-story__stage { position: relative; top: auto; }
    .parma-story.is-motion-ready .parma-story__video { display: none; }
    .parma-story__portal { opacity: 1; }
    .parma-story__portal-word { translate: -50% -50%; scale: 1; }
    .parma-glass-hero__image { translate: none; transition: none; }
    .parma-glass-hero__try .parma-glass-hero__try-arrow { transition: none; }
    .parma-glass-hero__try:hover .parma-glass-hero__try-arrow { transform: none; }
}

#parma-design.is-story-outro {
    position: absolute;
    inset: 0;
    z-index: 5;
    min-height: 0;
    height: 100%;
    opacity: var(--outro-opacity, 0);
    -webkit-clip-path: circle(var(--portal-reveal, 0%) at 50% 50%);
    clip-path: circle(var(--portal-reveal, 0%) at 50% 50%);
    transform: none;
    filter: none;
    transition: none;
    pointer-events: none;
}

/* Keep the wordmark below the desktop navigation without restoring the old blank
   page offset. The navigation can therefore overlay the hero without covering it. */
@media (min-width: 769px) {
    .parma-glass-hero.is-story-outro .parma-glass-hero__swap {
        top: 144px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The source artwork is 1672 × 941 (1.78:1), while the usable desktop hero is
       considerably wider. Cover cropped the module's upper and lower corners; contain
       keeps the entire product visible and the blended backdrop fills the spare area. */
    .parma-glass-hero.is-story-outro .parma-glass-hero__image {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        max-width: 96%;
        max-height: 96%;
        object-fit: contain;
        scale: 1;
        --glass-desktop-mask:
            linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%),
            linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
        -webkit-mask-image: var(--glass-desktop-mask);
        mask-image: var(--glass-desktop-mask);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    .parma-glass-hero.is-story-outro .parma-glass-hero__title {
        margin-top: 144px;
    }
}

/* Backdrop blur over the full-size product artwork is expensive while opacity is
   changing. Use the same translucent surfaces during motion and restore their
   liquid blur only once the composition has settled. */
.product-modular-launch-page .parma-glass-hero.is-story-outro:not(.is-story-settled) :is(
    .parma-glass-hero__switch,
    .parma-glass-hero__swatch,
    .parma-glass-hero__dock
) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, .78);
}

.parma-glass-hero.is-story-outro :is(.parma-glass-hero__title, .parma-glass-hero__dock, .parma-glass-hero__palette) {
    opacity: var(--glass-ui-opacity, 0);
    transform: translateY(var(--glass-ui-y, 18px));
}
.parma-glass-hero.is-story-outro .parma-glass-hero__dock,
.parma-glass-hero.is-story-outro .parma-glass-hero__palette {
    transform: translateX(-50%) translateY(var(--glass-ui-y, 18px));
}
.parma-glass-hero.is-story-outro :is(.parma-glass-hero__title, .parma-glass-hero__dock, .parma-glass-hero__palette) {
    transition: opacity 140ms linear;
}

@media (max-width: 768px) {
    .parma-glass-hero.is-story-outro .parma-glass-hero__dock,
    .parma-glass-hero.is-story-outro .parma-glass-hero__palette {
        transform: translateY(var(--glass-ui-y, 14px));
    }
}
.parma-proof {
    position: relative;
    border-top: 1px solid #e0e5e6;
    border-bottom: 1px solid #e0e5e6;
    background: #f8faf9 !important;
    color: #171d28;
}

.parma-proof__inner {
    padding-top: 76px;
    padding-bottom: 80px;
}

.parma-proof__intro {
    margin-bottom: 42px;
}

.parma-proof__eyebrow {
    margin: 0 0 10px;
    color: #f46616;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.parma-proof h2 {
    max-width: 17ch;
    margin: 0;
    color: #171d28;
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: 0;
}

.parma-proof__manufacturers {
    border-bottom: 1px solid #d8dfe1;
}

.parma-proof__manufacturer {
    padding: 30px 0 32px;
    border-top: 1px solid #d8dfe1;
}

.parma-proof__manufacturer h3 {
    display: flex;
    align-items: center;
    margin: 0 0 22px;
    color: #171d28;
    font-size: 22px;
    font-weight: 800;
}

.parma-proof__manufacturer dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.parma-proof__manufacturer dl div {
    min-width: 0;
    padding: 0 28px;
    border-left: 1px solid #d8dfe1;
}

.parma-proof__manufacturer dt {
    margin: 0 0 8px;
    color: #6b7780;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.parma-proof__manufacturer dd {
    margin: 0;
    color: #f46616;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    white-space: nowrap;
}

.parma-proof__manufacturer dd sup {
    font-size: .55em;
    vertical-align: super;
}

.parma-proof__flag {
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    flex: none;
    width: 54px;
    height: 36px;
    margin-right: 14px;
    overflow: hidden;
    border: 1px solid rgba(23, 29, 40, .14);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(23, 29, 40, .1);
}

.parma-proof__flag i { display: block; }
.parma-proof__flag--germany i:nth-child(1) { background: #202328; }
.parma-proof__flag--germany i:nth-child(2) { background: #c63d35; }
.parma-proof__flag--germany i:nth-child(3) { background: #e7bd43; }
.parma-proof__flag--austria i:nth-child(1),
.parma-proof__flag--austria i:nth-child(3) { background: #d53f3f; }
.parma-proof__flag--austria i:nth-child(2) { background: #fff; }

@media (max-width: 768px) {
    .parma-proof__inner {
        padding-top: 54px;
        padding-bottom: 56px;
    }

    .parma-proof__intro {
        display: block;
        margin-bottom: 32px;
    }

    .parma-proof h2 {
        max-width: 19ch;
        font-size: 26px;
    }

    .parma-proof__manufacturer {
        padding: 28px 0 0;
    }

    .parma-proof__manufacturer + .parma-proof__manufacturer {
        margin-top: 48px;
        padding-top: 44px;
    }

    .parma-proof__manufacturer h3 {
        justify-content: center;
        margin-bottom: 24px;
        font-size: 19px;
    }

    .parma-proof__manufacturer h3 .parma-proof__flag {
        width: 48px;
        height: 32px;
        margin-right: 12px;
    }

    .parma-proof__manufacturer dl {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid #d8dfe1;
        border-bottom: 1px solid #d8dfe1;
    }

    .parma-proof__manufacturer dl div {
        min-height: 83px;
        padding: 15px 9px 13px;
    }

    .parma-proof__manufacturer dl div:first-child { border-left: 0; }
    .parma-proof__manufacturer dt {
        min-height: 22px;
        margin-bottom: 5px;
        font-size: 8px;
        line-height: 1.2;
    }

    .parma-proof__manufacturer dd {
        font-size: 22px;
    }
}

@media (max-width: 380px) {
    .parma-proof h2 { font-size: 24px; }
    .parma-proof__manufacturer dd { font-size: 20px; }
}