.cs-home-hero {
    --cs-hero-navy: #040706;
    --cs-hero-red: #da303d;
    --cs-hero-red-soft: #f18b98;
    --cs-hero-rose: #ffd5db;
    --cs-hero-text: #cdd8d1;
    --cs-hero-muted: #9bafa5;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(86vh, 760px);
    border-bottom: 0;
    overflow: hidden;
    color: #fff;
    background: var(--cs-hero-navy);
}

.cs-home-hero-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: var(--cs-hero-navy);
}
.cs-home-hero-media picture,
.cs-home-hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.cs-home-hero-media img {
    object-fit: cover;
    object-position: center right;
    opacity: .42;
    filter: grayscale(.4) brightness(.85);
    transform-origin: 72% 50%;
    animation: cs-hero-kenburns 24s ease-in-out infinite alternate;
}

.cs-home-hero-scrim {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(4, 7, 6, .92) 0%, rgba(4, 7, 6, .72) 38%, rgba(4, 7, 6, .30) 70%, rgba(4, 7, 6, .08) 100%);
}
.cs-home-hero-scrim::after {
    position: absolute;
    top: -10%;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(2px 2px at 12% 80%, rgba(255,107,122,.9), transparent 60%), radial-gradient(1.5px 1.5px at 28% 60%, rgba(255,140,152,.7), transparent 60%), radial-gradient(2px 2px at 46% 90%, rgba(255,213,219,.8), transparent 60%), radial-gradient(1.5px 1.5px at 63% 70%, rgba(255,107,122,.7), transparent 60%), radial-gradient(2.5px 2.5px at 78% 85%, rgba(255,140,152,.6), transparent 60%), radial-gradient(1.5px 1.5px at 90% 65%, rgba(255,213,219,.7), transparent 60%);
    background-size: 100% 50%;
    content: '';
    opacity: .7;
    animation: cs-hero-motes 16s linear infinite;
}

.cs-home-hero-fx {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.cs-home-hero-fx::before {
    position: absolute;
    top: -30%;
    left: -40%;
    width: 55%;
    height: 160%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 65%, transparent 100%);
    content: '';
    filter: blur(10px);
    transform: rotate(14deg);
    animation: cs-hero-sweep 9s ease-in-out infinite;
}
.cs-home-hero-fx::after {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
    content: '';
    opacity: .6;
}

.cs-home-hero-art {
    position: absolute;
    z-index: 3;
    top: 6%;
    right: -4%;
    width: min(46vw, 560px);
    color: var(--cs-hero-red-soft);
    opacity: .5;
    pointer-events: none;
}
.cs-home-hero-art svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: #e76b78; stroke-width: 1.6; stroke-linejoin: round; }
.cs-hero-molecule-a { transform-origin: 170px 120px; animation: cs-hero-molecule-float 16s ease-in-out infinite alternate; }
.cs-hero-molecule-b { transform-origin: 250px 296px; animation: cs-hero-molecule-float 12s ease-in-out -4s infinite alternate-reverse; }
.cs-home-hero-art line { stroke-dasharray: 420; stroke-dashoffset: 420; animation: cs-hero-molecule-draw 2.4s ease-out .4s forwards; }
.cs-home-hero-art circle { fill: #ff8c98; stroke: none; transform-box: fill-box; transform-origin: center; animation: cs-hero-molecule-pulse 2.6s ease-in-out infinite; }
.cs-home-hero-art circle:nth-of-type(2n) { animation-delay: -1.3s; }

.cs-home-hero-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1240px;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 0 32px;
}
.cs-home-hero-content { max-width: 600px; font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
.cs-home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #ff6b7a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .24em;
    line-height: 1.6;
    text-transform: uppercase;
}
.cs-home-hero-eyebrow::after { width: 26px; height: 1px; flex: 0 0 26px; background: rgba(255,107,122,.55); content: ''; }
.cs-home-hero h1 {
    max-width: 18ch;
    margin: 18px 0 0;
    padding-bottom: .06em;
    color: #fff;
    background: linear-gradient(100deg, #fff, #fff 38%, var(--cs-hero-rose) 46%, var(--cs-hero-red-soft) 50%, var(--cs-hero-rose) 54%, #fff 62%, #fff);
    background-size: 300% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(40px, 5.4vw, 68px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
    animation: cs-hero-title-shine 6s ease-in-out 1s infinite;
}
.cs-home-hero-copy { max-width: 48ch; margin: 20px 0 0; color: var(--cs-hero-text); font-size: 17px; line-height: 1.6; }

.cs-home-hero .cs-hero-search {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    width: min(100%, 540px);
    min-width: 0;
    min-height: 62px;
    align-items: center;
    gap: 12px;
    margin: 30px 0 0;
    padding: 10px 10px 10px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(10,14,12,.55);
    box-shadow: none;
    animation: cs-hero-search-glow 4s ease-in-out 1.2s infinite;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cs-home-hero .cs-hero-search:focus-within { border-color: rgba(218,48,61,.65); box-shadow: 0 0 0 3px rgba(218,48,61,.2); animation: none; }
.cs-home-hero .cs-hero-search-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #ff6b7a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-home-hero .cs-hero-search input[type="search"] {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    outline: none;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
}
.cs-home-hero .cs-hero-search input[type="search"]::placeholder { color: var(--cs-hero-muted); opacity: 1; }
.cs-home-hero .cs-hero-search input[type="search"]:focus-visible { outline: none; }
.cs-home-hero .cs-hero-search button {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--cs-hero-red);
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}
.cs-home-hero .cs-hero-search button:hover { filter: brightness(1.06); box-shadow: 0 6px 20px -8px rgba(218,48,61,.6); transform: none; }
.cs-home-hero .cs-hero-search button:focus-visible,
.cs-home-hero .cs-hero-shop-link:focus-visible { outline: 3px solid #ff9aa7; outline-offset: 3px; }
.cs-home-hero .cs-hero-search button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-hero-shop-link { display: inline-flex; min-height: 50px; align-items: center; gap: 18px; margin-top: 30px; padding: 0 20px; border-radius: 11px; color: #fff; background: var(--cs-hero-red); font-weight: 700; text-decoration: none; }
.cs-hero-shop-link span { font-size: 22px; line-height: 1; }

@keyframes cs-hero-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes cs-hero-sweep { 0% { transform: translateX(-20%) rotate(14deg); } 55%, 100% { transform: translateX(240%) rotate(14deg); } }
@keyframes cs-hero-motes { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes cs-hero-search-glow { 0%, 100% { box-shadow: 0 0 rgba(218,48,61,0); } 50% { box-shadow: 0 0 0 3px rgba(218,48,61,.16), 0 0 30px -6px rgba(218,48,61,.45); } }
@keyframes cs-hero-title-shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
@keyframes cs-hero-molecule-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-hero-molecule-float { 0% { transform: translate(0) rotate(0); } 100% { transform: translate(-18px, 22px) rotate(14deg); } }
@keyframes cs-hero-molecule-pulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.6); opacity: 1; } }

@media (max-width: 1024px) {
    .cs-home-hero-inner { padding-inline: 24px; }
}
@media (max-width: 760px) {
    .cs-home-hero-art { top: auto; right: -18%; bottom: 4%; width: 78vw; opacity: .2; }
}
@media (max-width: 560px) {
    .cs-home-hero { min-height: auto; padding: 92px 0 52px; }
    .cs-home-hero-inner { width: 100%; max-width: none; padding: 0 18px; }
    .cs-home-hero-content { max-width: none; }
    .cs-home-hero h1 { max-width: none; font-size: clamp(30px, 8.4vw, 44px); }
    .cs-home-hero-art { right: -18%; bottom: 4%; width: 78vw; opacity: .2; }
    .cs-home-hero .cs-hero-search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-home-hero-media img,
    .cs-home-hero-scrim::after,
    .cs-home-hero-fx::before,
    .cs-home-hero h1,
    .cs-home-hero .cs-hero-search,
    .cs-home-hero-art line,
    .cs-hero-molecule-a,
    .cs-hero-molecule-b,
    .cs-home-hero-art circle { animation: none !important; }
    .cs-home-hero h1 { color: #fff; background: none; -webkit-text-fill-color: #fff; }
    .cs-home-hero-art line { stroke-dashoffset: 0; }
    .cs-home-hero .cs-hero-search { animation: none; }
    .cs-home-hero .cs-hero-search button { transition: none; }
}

/* Brand-fusion layout is opt-in; the classic banner above remains unchanged. */
.cs-home-hero--lab-fusion {
    --cs-hero-red: #168b82;
    --cs-hero-red-soft: #91e2d4;
    --cs-hero-rose: #d4fff5;
    --cs-hero-text: #e2f2ee;
    --cs-hero-muted: #b8d5cf;
    min-height: clamp(520px, 41.67vw, 760px);
    background: #102527;
}
.cs-home-hero--lab-fusion .cs-home-hero-media {
    background: #102527;
}
.cs-home-hero--lab-fusion .cs-home-hero-media img {
    opacity: 1;
    filter: none;
    object-position: center right;
    transform-origin: 100% 50%;
    animation: cs-home-hero-lab-zoom 10s ease-in-out infinite;
    will-change: transform;
}
.cs-home-hero--lab-fusion .cs-home-hero-scrim {
    background: linear-gradient(90deg, rgba(5, 24, 25, .42) 0%, rgba(5, 24, 25, .22) 34%, rgba(5, 24, 25, .08) 47%, transparent 64%);
}
.cs-home-hero--lab-fusion .cs-home-hero-scrim::after,
.cs-home-hero--lab-fusion .cs-home-hero-fx,
.cs-home-hero--lab-fusion .cs-home-hero-art {
    display: none;
}
.cs-home-hero--lab-fusion .cs-home-hero-inner {
    max-width: 1320px;
    padding-inline: 40px;
}
.cs-home-hero--lab-fusion .cs-home-hero-content {
    width: min(40%, 520px);
    max-width: 520px;
}
.cs-home-hero--lab-fusion .cs-home-hero-eyebrow {
    color: #a4eee0;
}
.cs-home-hero--lab-fusion .cs-home-hero-eyebrow::after {
    background: rgba(164, 238, 224, .72);
}
.cs-home-hero--lab-fusion h1 {
    font-size: clamp(42px, 4vw, 58px);
    line-height: 1.08;
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
    animation: none;
}
.cs-home-hero--lab-fusion .cs-home-hero-copy {
    color: #e2f2ee;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .24);
}
.cs-home-hero--lab-fusion .cs-hero-search {
    border-color: rgba(170, 231, 220, .48);
    background: rgba(9, 35, 35, .82);
    animation: none;
}
.cs-home-hero--lab-fusion .cs-hero-search:focus-within {
    border-color: #9be5d8;
    box-shadow: 0 0 0 3px rgba(92, 201, 183, .24);
}
.cs-home-hero--lab-fusion .cs-hero-search-icon {
    stroke: #b1f1e5;
}
.cs-home-hero--lab-fusion .cs-hero-search button {
    background: #da303d;
}
.cs-home-hero--lab-fusion .cs-hero-search button:hover {
    box-shadow: 0 6px 20px -8px rgba(218, 48, 61, .6);
}

@keyframes cs-home-hero-lab-zoom {
    0%,
    100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.045, 1.045, 1); }
}

@media (max-width: 1100px) {
    .cs-home-hero--lab-fusion {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-inner {
        position: relative;
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 34px 20px 24px;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-content {
        width: 100%;
        max-width: 560px;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-media {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-media picture,
    .cs-home-hero--lab-fusion .cs-home-hero-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-media img {
        object-position: right center;
        transform-origin: 100% 50%;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-scrim {
        display: none;
    }
    .cs-home-hero--lab-fusion h1 {
        max-width: 18ch;
        font-size: clamp(32px, 8vw, 44px);
    }
    .cs-home-hero--lab-fusion .cs-hero-search {
        width: 100%;
        margin-top: 22px;
    }
}

@media (max-width: 560px) {
    .cs-home-hero--lab-fusion {
        position: relative;
        display: block;
        isolation: isolate;
        min-height: 0;
        height: clamp(400px, 115vw, 650px);
        padding: 0;
        background: #10212a;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-media {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-media img {
        object-fit: cover;
        object-position: center bottom;
        transform-origin: center bottom;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-scrim {
        display: block;
        background: linear-gradient(
            0deg,
            rgba(4, 18, 27, .65) 0%,
            rgba(4, 18, 27, .38) 10%,
            rgba(4, 18, 27, .12) 20%,
            rgba(4, 18, 27, 0) 32%
        );
    }
    .cs-home-hero--lab-fusion .cs-home-hero-inner {
        position: absolute;
        z-index: 3;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 20px 20px;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-content {
        width: 100%;
        max-width: none;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-eyebrow,
    .cs-home-hero--lab-fusion .cs-home-hero-copy {
        display: none;
    }
    .cs-home-hero--lab-fusion h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        margin: -1px;
        padding: 0;
        border: 0;
    }
    .cs-home-hero--lab-fusion .cs-hero-search {
        width: 100%;
        min-width: 0;
        margin: 0;
        background: rgba(9, 35, 35, .84);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

@media (max-width: 360px) {
    .cs-home-hero--lab-fusion .cs-home-hero-inner {
        padding: 0 16px 16px;
    }
    .cs-home-hero--lab-fusion h1 {
        font-size: 30px;
        line-height: 1.08;
    }
    .cs-home-hero--lab-fusion .cs-home-hero-copy {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.45;
    }
    .cs-home-hero--lab-fusion .cs-hero-search {
        min-width: 0;
        gap: 8px;
        padding: 8px 8px 8px 12px;
    }
    .cs-home-hero--lab-fusion .cs-hero-search input[type="search"] {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-home-hero--lab-fusion .cs-home-hero-media img {
        animation: none !important;
        transform: scale3d(1, 1, 1);
        will-change: auto;
    }
}

/* Restore the verified red and navy search treatment for the fusion layout. */
.cs-home-hero--lab-fusion .cs-hero-search {
    border-color: rgba(218, 48, 61, .78);
    background: rgba(8, 24, 47, .92);
}
.cs-home-hero--lab-fusion .cs-hero-search:focus-within {
    border-color: rgb(255, 107, 120);
    box-shadow: 0 0 0 3px rgba(218, 48, 61, .24);
}
.cs-home-hero--lab-fusion .cs-hero-search-icon {
    stroke: rgb(255, 107, 120);
}
.cs-home-hero--lab-fusion .cs-hero-search input[type="search"] {
    color: rgb(244, 247, 255);
}
.cs-home-hero--lab-fusion .cs-hero-search input[type="search"]::placeholder {
    color: rgb(185, 199, 220);
}
.cs-home-hero--lab-fusion .cs-hero-search button {
    background: rgb(218, 48, 61);
}
.cs-home-hero--lab-fusion .cs-hero-search button:hover {
    box-shadow: 0 6px 20px -8px rgba(218, 48, 61, .6);
}