/* ===== Lunaray Hero ===== */
    /* Brand color tokens & .glass-btn base styles now live in client/assets/css/lunaray-brand.css (loaded site-wide) */

    .lunaray-hero {
        position: relative;
        min-height: max(64vh, 740px);
        max-height: 860px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #fdfbf9;
        padding-top: 110px;
        padding-bottom: 50px;
        box-sizing: border-box;
    }

    .lunaray-hero-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .lunaray-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 22%;
        border-radius: 0;
    }

    .lunaray-hero-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .lunaray-hero-text {
        max-width: 600px;
        padding: 24px 0;
    }

    .hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Nexa', sans-serif;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--lunaray-salmon-dark);
        margin-bottom: 22px;
    }

    .eyebrow-dash {
        display: inline-block;
        width: 32px;
        height: 2px;
        background: var(--lunaray-salmon);
    }

    .hero-heading {
        font-family: 'Nexa', sans-serif;
        font-size: clamp(28px, 2.8vw, 40px);
        line-height: 1.18;
        color: var(--lunaray-navy);
        margin-bottom: 16px;
        letter-spacing: -0.5px;
    }

    .hero-heading-bold {
        font-weight: 700;
    }

    .hero-heading-accent {
        font-weight: 300;
        color: var(--lunaray-salmon-dark);
    }

    .hero-heading-accent-bold {
        font-weight: 700;
        color: var(--lunaray-salmon-dark);
    }

    .hero-subheading {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 17px;
        color: var(--lunaray-navy);
        max-width: 480px;
        margin-bottom: 14px;
    }

    .hero-desc {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.6;
        color: var(--lunaray-text);
        max-width: 460px;
        margin-bottom: 20px;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        margin-bottom: 28px;
    }

    .hero-highlights {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
    }

    .hero-highlight {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 10px;
        width: 100px;
    }

    .hero-highlight svg {
        color: var(--lunaray-salmon-dark);
    }

    .hero-highlight span {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
        line-height: 1.4;
    }

    .hero-scroll {
        position: absolute;
        left: 5vw;
        bottom: 36px;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 900;
        color: var(--lunaray-navy);
    }

    .hero-scroll-mouse {
        display: inline-flex;
        justify-content: center;
        width: 22px;
        height: 34px;
        border: 2px solid var(--lunaray-navy);
        border-radius: 12px;
        padding-top: 6px;
    }

    .hero-scroll-mouse i {
        width: 4px;
        height: 8px;
        border-radius: 2px;
        background: var(--lunaray-salmon-dark);
        animation: scrollDot 1.6s infinite;
    }

    @keyframes scrollDot {
        0% { transform: translateY(0); opacity: 1; }
        70% { transform: translateY(8px); opacity: 0; }
        100% { transform: translateY(0); opacity: 0; }
    }

    @media (max-width: 992px) {
        .lunaray-hero {
            min-height: auto;
            /* The desktop cap would clip the stacked mobile layout, which is taller */
            max-height: none;
            display: block;
            padding-top: 100px;
            padding-bottom: 0;
        }

        .lunaray-hero-media {
            position: relative;
            height: 60vh;
            min-height: 380px;
        }

        .lunaray-hero-media img {
            object-position: 65% center;
        }

        .lunaray-hero-media::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(253,251,249,0) 55%, #fdfbf9 100%);
        }

        .lunaray-hero-inner {
            padding: 0 24px;
        }

        .lunaray-hero-text {
            max-width: 100%;
            padding: 0 0 50px;
            margin-top: -60px;
            position: relative;
        }

        /* Desktop sizes are tuned for a wide column; on a phone they read too small */
        .hero-desc,
        .hero-desc--wide,
        .hero-desc--narrow {
            font-size: 15.5px;
            line-height: 1.7;
            max-width: 100%;
        }

        .hero-scroll {
            display: none;
        }

        /* Dark-background slides need a dark mobile fade/backdrop so white text stays readable */
        .swiper-slide[data-bg="dark"] {
            background: #05070d;
        }

        .swiper-slide[data-bg="dark"] .lunaray-hero-media::after {
            background: linear-gradient(180deg, rgba(5, 7, 13, 0) 45%, #05070d 100%);
        }
    }

    @media (max-width: 576px) {
        .hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .glass-btn {
            justify-content: center;
        }

        /* Four across leaves ~70px per label, which the longer words overflow into
           each other; two columns give each label room to wrap cleanly. */
        .hero-highlights {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 16px;
        }

        .hero-highlight {
            width: auto;
            flex-direction: row;
            align-items: center;
            text-align: left;
            gap: 10px;
        }

        .hero-highlight span {
            font-size: 11.5px;
            line-height: 1.35;
        }
    }

    /* ===== Lunaray Hero Slider ===== */
    .lunaray-hero-swiper {
        width: 100%;
    }

    @media (min-width: 993px) {
        .lunaray-hero-swiper {
            position: absolute;
            inset: 0;
        }

        .lunaray-hero-swiper .swiper-slide {
            display: flex;
            align-items: flex-start;
            padding-top: 95px;
            padding-bottom: 50px;
            box-sizing: border-box;
        }
    }

    /* Light text variant — used on slides with a dark/moody background image */
    .lunaray-hero-text--light .hero-eyebrow {
        color: rgba(255, 255, 255, .92);
    }

    .lunaray-hero-text--light .eyebrow-dash {
        background: rgba(255, 255, 255, .7);
    }

    .lunaray-hero-text--light .hero-heading-bold {
        color: #fff;
    }

    .lunaray-hero-text--light .hero-heading-accent {
        color: var(--lunaray-salmon);
    }

    .lunaray-hero-text--light .hero-desc {
        color: rgba(255, 255, 255, .82);
    }

    .hero-desc--wide {
        max-width: 500px;
    }

    .hero-desc--narrow {
        max-width: 400px;
    }

    .hero-event-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        margin-top: 4px;
    }

    .hero-event-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    @media (min-width: 577px) {
        .hero-event-item + .hero-event-item {
            padding-left: 20px;
            border-left: 1px solid rgba(255, 255, 255, .25);
        }
    }

    .hero-event-item svg {
        flex-shrink: 0;
        color: var(--lunaray-salmon);
    }

    .hero-event-item strong {
        display: block;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 13px;
        color: #fff;
        line-height: 1.35;
    }

    .hero-event-item span {
        display: block;
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 11.5px;
        color: rgba(255, 255, 255, .65);
        line-height: 1.35;
    }

    .hero-microcopy {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .microcopy-dash {
        display: inline-block;
        flex-shrink: 0;
        width: 32px;
        height: 1px;
        margin-top: 10px;
        background: rgba(74, 85, 104, .35);
    }

    .hero-microcopy p br {
        display: inline;
    }

    .hero-microcopy p {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-style: italic;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--lunaray-text);
        margin: 0;
    }

    .lunaray-hero-text--light .microcopy-dash {
        background: rgba(255, 255, 255, .4);
    }

    .lunaray-hero-text--light .hero-microcopy p {
        color: rgba(255, 255, 255, .72);
    }

    .lunaray-hero-swiper .lunaray-hero-pagination {
        top: 95px;
        left: 5vw;
        right: auto;
        bottom: auto;
        width: auto;
        display: flex;
        gap: 8px;
    }

    .lunaray-hero-swiper .lunaray-hero-pagination .swiper-pagination-bullet {
        width: 24px;
        height: 24px;
        margin: 0 !important;
        background: transparent;
        opacity: 1;
        position: relative;
        cursor: pointer;
    }

    .lunaray-hero-swiper .lunaray-hero-pagination .swiper-pagination-bullet::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .55);
        box-shadow: 0 0 0 1px rgba(28, 43, 69, .25);
        transition: all .25s ease;
    }

    .lunaray-hero-swiper .lunaray-hero-pagination .swiper-pagination-bullet-active::before {
        background: var(--lunaray-salmon-dark);
        box-shadow: none;
        transform: translate(-50%, -50%) scale(1.3);
    }

    @media (max-width: 992px) {
        .lunaray-hero-swiper .lunaray-hero-pagination {
            top: 20px;
            left: 24px;
        }
    }

    /* Header text/icon color follows the currently active hero slide.
       Mobile keeps the header dark at all times regardless of slide -- there's
       no room for the tagline there and no room to re-check contrast per slide. */
    @media (min-width: 1141px) {
        #site-header.header-on-dark:not(.is-scrolled) .logo-tagline {
            color: rgba(255, 255, 255, .85);
            border-left-color: rgba(255, 255, 255, .3);
        }

        #site-header.header-on-dark:not(.is-scrolled) .lunaray-header-nav a {
            color: #fff;
        }

        #site-header.header-on-dark:not(.is-scrolled) .lunaray-header-nav a::after {
            background: var(--lunaray-salmon);
        }

        #site-header.header-on-dark:not(.is-scrolled) .lunaray-lang-switch {
            color: #fff;
        }

        #site-header.header-on-dark:not(.is-scrolled) .lunaray-mobile-toggle span {
            background: #fff;
        }
    }

    /* ===== Ask Ailuna ===== */
    .ailuna-section {
        position: relative;
        overflow: hidden;
        background: #05070d;
        padding: 56px 0 0;
    }

    .ailuna-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .ailuna-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ailuna-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(4, 8, 18, .68) 0%, rgba(4, 8, 18, .38) 45%, rgba(4, 8, 18, .1) 75%);
    }

    .ailuna-inner {
        position: relative;
        z-index: 2;
        max-width: 1760px;
        margin: 0 auto;
        padding: 0 5vw;
        display: grid;
        /* Both tracks need an explicit 0 minimum: a bare 1fr keeps an auto min-width,
           which lets the avatar's aspect-ratio width squeeze the card track to zero. */
        grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
        align-items: end;
        gap: 40px;
    }

    .ailuna-card {
        width: 100%;
        max-width: 560px;
        padding: 32px;
        margin-bottom: 24px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
        border: 1px solid rgba(255, 255, 255, .28);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 30px 80px rgba(3, 8, 20, .45), inset 0 1px 1px rgba(255, 255, 255, .35);
        color: #fff;
    }

    .ailuna-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .25);
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 16px;
    }

    .ailuna-card-badge svg {
        color: var(--lunaray-salmon);
        flex-shrink: 0;
    }

    .ailuna-card-title {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(24px, 2.4vw, 32px);
        line-height: 1.25;
        margin-bottom: 14px;
        color: #fff;
        letter-spacing: -.3px;
    }

    .ailuna-card-subtitle {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .75);
        max-width: 440px;
        margin-bottom: 18px;
    }

    .ailuna-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 8px 8px 20px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .92);
        margin-bottom: 16px;
    }

    .ailuna-search input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        outline: none;
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: var(--lunaray-navy);
    }

    .ailuna-search input::placeholder {
        color: rgba(28, 43, 69, .45);
    }

    .ailuna-search button {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(120deg, var(--lunaray-glass-glow-a), var(--lunaray-glass-glow-b));
        color: #fff;
        transition: transform .25s ease;
    }

    .ailuna-search button:hover {
        transform: scale(1.06);
    }

    .ailuna-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 18px;
    }

    .ailuna-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .18);
        text-align: left;
        cursor: pointer;
        transition: background .25s ease, transform .25s ease, border-color .25s ease;
    }

    .ailuna-option:hover {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .32);
        transform: translateY(-2px);
    }

    .ailuna-option-icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .15);
        color: var(--lunaray-salmon);
    }

    .ailuna-option-label {
        flex: 1;
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.35;
        color: rgba(255, 255, 255, .9);
    }

    .ailuna-option-arrow {
        flex-shrink: 0;
        color: rgba(255, 255, 255, .4);
    }

    .ailuna-card-footer {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .ailuna-card-footer svg {
        flex-shrink: 0;
        color: var(--lunaray-salmon);
        margin-top: 2px;
    }

    .ailuna-card-footer strong {
        display: block;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 3px;
    }

    .ailuna-card-footer span {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 13px;
        color: rgba(255, 255, 255, .65);
    }

    .ailuna-avatar-wrap {
        position: relative;
        width: auto;
        max-width: min(900px, 100%);
        height: min(64vh, 760px);
        aspect-ratio: 1139 / 1381;
        margin: 0 auto;
        justify-self: center;
    }

    .ailuna-avatar-base,
    .ailuna-avatar-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

    .ailuna-avatar-canvas {
        z-index: 1;
    }

    @media (max-width: 992px) {
        .ailuna-section {
            padding: 70px 0;
        }

        .ailuna-inner {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .ailuna-avatar-wrap {
            order: -1;
            width: 100%;
            max-width: 240px;
            height: auto;
            justify-self: center;
            /* Overlaps into the card below instead of floating above it as a
               separate block, so the two read as one composition. */
            margin-bottom: -28px;
        }

        .ailuna-card {
            max-width: 100%;
            padding: 44px 28px 28px;
            margin-bottom: 0;
        }

        .ailuna-options {
            grid-template-columns: 1fr;
        }
    }

    /* ===== Why Lunaray ===== */
    .why-lunaray-section {
        position: relative;
        overflow: hidden;
        background: #fdfbf9;
    }

    .why-lunaray-media {
        position: relative;
        width: 100%;
        line-height: 0;
    }

    .why-lunaray-media::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .why-lunaray-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .why-lunaray-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
        display: flex;
        align-items: flex-start;
    }

    .why-lunaray-text {
        max-width: 560px;
        padding: 70px 0 40px;
    }

    .why-lunaray-statement {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-top: 32px;
    }

    /* The inherited template hides `p br` below 992px, which would run the two
       halves of this statement together into one word. */
    .why-lunaray-statement p br {
        display: inline;
    }

    .why-lunaray-statement p {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 13.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.6;
        color: var(--lunaray-navy);
        max-width: 320px;
        margin: 0;
    }

    @media (max-width: 992px) {
        .why-lunaray-media {
            height: 46vh;
            min-height: 320px;
        }

        .why-lunaray-media img {
            height: 100%;
            object-fit: cover;
            object-position: 25% center;
        }

        /* Blends the image into the section below instead of a hard cut,
           mirroring the hero's own image-to-text transition. */
        .why-lunaray-media::after {
            background: linear-gradient(180deg, rgba(253, 251, 249, 0) 60%, #fdfbf9 100%);
        }

        .why-lunaray-inner {
            position: relative;
            padding: 40px 24px;
        }

        .why-lunaray-text {
            max-width: 100%;
            padding: 0;
        }

        .why-lunaray-text .hero-desc {
            font-size: 15.5px;
            line-height: 1.7;
            max-width: 100%;
        }

        .why-lunaray-statement p {
            font-size: 15px;
            letter-spacing: .6px;
            max-width: 100%;
        }
    }

    /* ===== Find Your Path ===== */
    .path-finder-section {
        position: relative;
        overflow: hidden;
        background: #05070d;
        padding: 100px 0;
    }

    /* This section has no photo behind it like the hero/Ailuna sections do,
       so its "not flat black" feel has to come entirely from layered color
       glows instead -- one pink/salmon, one blue, echoing the same
       --lunaray-glass-glow-a/b pairing used on every glass-btn and card. */
    .path-finder-section::before,
    .path-finder-section::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .path-finder-section::before {
        top: -18%;
        left: 8%;
        width: 780px;
        height: 780px;
        background: radial-gradient(circle, rgba(217, 141, 128, .28), transparent 68%);
    }

    .path-finder-section::after {
        bottom: -18%;
        right: 2%;
        width: 820px;
        height: 820px;
        background: radial-gradient(circle, rgba(111, 184, 255, .3), transparent 68%);
    }

    .path-finder-inner {
        position: relative;
        z-index: 1;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .path-finder-header {
        max-width: 640px;
        margin: 0 auto 72px;
        text-align: center;
    }

    .path-finder-header .hero-eyebrow {
        justify-content: center;
    }

    .path-finder-header .hero-heading {
        margin-bottom: 18px;
    }

    .path-finder-header .hero-desc {
        max-width: 100%;
        margin: 0 auto;
    }

    .path-finder-body {
        display: grid;
        grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
        align-items: center;
        gap: 60px;
    }

    /* ----- Orbit ----- */
    .path-orbit {
        position: relative;
        width: 100%;
        max-width: 520px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .path-orbit-ring {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 76%;
        height: 76%;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, .14);
    }

    .path-orbit-center {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 36%;
        height: 36%;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding: 10px;
        background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
        border: 1px solid rgba(255, 255, 255, .28);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 20px 50px rgba(3, 8, 20, .5), inset 0 1px 1px rgba(255, 255, 255, .35);
    }

    .path-orbit-center-title {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(15px, 1.6vw, 19px);
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #fff;
    }

    .path-orbit-center-sub {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 10.5px;
        line-height: 1.4;
        color: rgba(255, 255, 255, .65);
    }

    .path-item {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26%;
        aspect-ratio: 1 / 1;
        /* Centers the box on the 50%/50% anchor point *before* the orbit
           transform runs -- without this, rotate() spins around the box's own
           off-center origin instead of the orbit's center, and every orb ends
           up clumped toward one side instead of evenly spaced in a ring. */
        margin: -13% 0 0 -13%;
        transform: rotate(var(--angle)) translate(150%) rotate(calc(-1 * var(--angle)));
        transition: transform .25s ease;
    }

    .path-item:hover {
        transform: rotate(var(--angle)) translate(150%) rotate(calc(-1 * var(--angle))) scale(1.06);
    }

    .path-orb {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 6px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .2);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        cursor: pointer;
        transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
        font-family: inherit;
    }

    .path-orb-label {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(10px, 1vw, 12.5px);
        letter-spacing: .5px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .85);
        transition: color .25s ease;
    }

    .path-orb-text {
        display: contents;
    }

    .path-orb-quote {
        display: none;
    }

    .path-orb-chevron {
        display: none;
    }

    .path-item:hover .path-orb {
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .4);
    }

    .path-orb.is-active {
        background: linear-gradient(160deg, rgba(217, 141, 128, .32), rgba(111, 184, 255, .18));
        border-color: rgba(255, 255, 255, .55);
        box-shadow: 0 0 0 4px rgba(217, 141, 128, .12), 0 12px 30px rgba(3, 8, 20, .45);
    }

    .path-orb.is-active .path-orb-label {
        color: #fff;
    }

    /* Accordion content only renders visibly on mobile (see the media query
       below) -- on desktop the same content already lives in the side panel,
       so this stays fully collapsed and out of the layout. */
    .path-accordion {
        display: none;
    }

    /* ----- Panel ----- */
    .path-panel-card {
        position: relative;
        width: 100%;
        padding: 40px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
        border: 1px solid rgba(255, 255, 255, .28);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 30px 80px rgba(3, 8, 20, .45), inset 0 1px 1px rgba(255, 255, 255, .35);
        min-height: 420px;
    }

    .path-panel {
        display: none;
    }

    .path-panel.is-active {
        display: block;
        animation: pathPanelIn .35s ease;
    }

    @keyframes pathPanelIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .path-panel-quote {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .72);
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .path-panel-tag {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--lunaray-salmon);
        margin-bottom: 8px;
    }

    .path-panel-name {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(26px, 2.6vw, 34px);
        color: #fff;
        margin-bottom: 14px;
        letter-spacing: -.3px;
    }

    .path-panel-headline {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.5;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: rgba(255, 255, 255, .9);
        margin-bottom: 14px;
    }

    .path-panel-desc {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 14.5px;
        line-height: 1.65;
        color: rgba(255, 255, 255, .8);
        margin-bottom: 28px;
    }

    .path-panel-steps {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 30px;
    }

    .path-panel-step {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .path-panel-step-index {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        color: #fff;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .2);
    }

    .path-panel-step-text strong {
        display: block;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #fff;
        margin-bottom: 3px;
    }

    .path-panel-step-text span {
        display: block;
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .72);
    }

    .path-panel-cta {
        width: 100%;
        justify-content: center;
    }

    @media (max-width: 992px) {
        .path-finder-section {
            padding: 70px 0;
        }

        .path-finder-header {
            margin-bottom: 40px;
        }

        .path-finder-body {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        /* A single column keeps each chip's expanded accordion content free
           to grow without dragging a same-row neighbor's height along with
           it, which a 2-column grid would do. */
        .path-orbit {
            position: static;
            max-width: 100%;
            aspect-ratio: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .path-orbit-ring,
        .path-orbit-center {
            display: none;
        }

        .path-item {
            position: static;
            width: auto;
            aspect-ratio: auto;
            /* The desktop orbit rule's negative margin and radial transform
               are still in the cascade here and would stack these items on
               top of each other with no reset. */
            margin: 0;
            transform: none;
        }

        .path-item:hover {
            transform: none;
        }

        .path-orb {
            width: 100%;
            border-radius: 18px;
            padding: 18px 18px 18px 20px;
            justify-content: space-between;
            gap: 12px;
        }

        .path-orb-text {
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: left;
        }

        .path-orb-quote {
            display: block;
            font-family: 'Nexa', sans-serif;
            font-weight: 400;
            font-style: italic;
            font-size: 12px;
            line-height: 1.4;
            color: rgba(255, 255, 255, .65);
        }

        .path-orb-chevron {
            display: block;
            flex-shrink: 0;
            color: rgba(255, 255, 255, .55);
            transition: transform .3s ease, color .3s ease;
        }

        .path-orb.is-active .path-orb-chevron {
            color: #fff;
            transform: rotate(180deg);
        }

        /* Modern grid-rows expand/collapse: animating 0fr -> 1fr grows the
           row to the content's natural height with no JS measuring needed. */
        .path-accordion {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .35s ease;
        }

        .path-accordion.is-open {
            grid-template-rows: 1fr;
        }

        .path-accordion-inner {
            overflow: hidden;
        }

        .path-accordion .path-panel-tag {
            margin-top: 20px;
        }

        .path-accordion .path-panel-name {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .path-accordion .path-panel-headline {
            font-size: 13.5px;
            margin-bottom: 12px;
        }

        .path-accordion .path-panel-desc {
            font-size: 13.5px;
            margin-bottom: 20px;
        }

        .path-accordion .path-panel-steps {
            gap: 14px;
            margin-bottom: 22px;
        }

        /* The shared desktop side panel has nothing to sit beside on mobile
           -- each path's detail now lives inline in its own accordion. */
        .path-panel-card {
            display: none;
        }
    }

    /* ===== Evidence-to-Product Method ===== */
    .evidence-section {
        position: relative;
        overflow: hidden;
        background: #fdfbf9;
    }

    .evidence-section--dark {
        background: #0b1626;
    }

    /* Plenty of clear space in this photo, so the text can run wider than
       the 440px default before it'd run into anything -- but only the top
       ~45%: the Develop/Validate/Manufacture cards fill the bottom half, so
       vertically centering (the shared default) would push the text down
       into them. Anchor to the top instead, where the whole width is clear. */
    #capabilities .evidence-inner {
        align-items: flex-start;
        /* vw-based so this offset scales with the image's own rendered
           height (which tracks viewport width, not the viewport height). */
        padding-top: 4vw;
    }

    #capabilities .evidence-text {
        max-width: 540px;
    }

    /* This section's content (eyebrow + heading + 2 paragraphs + a 3-line
       statement + CTA) is tall enough that centering it vertically -- the
       shared default -- pushes its bottom edge down into the photo's own
       Science/Research/Experts icon row once word-wrap adds a line or two
       at narrower desktop widths. Anchoring to the top keeps it clear
       regardless of exactly how many lines it wraps to. */
    #science-expertise .evidence-inner {
        align-items: flex-start;
        padding-top: 6vw;
    }

    /* This section's text content is tall enough (eyebrow + heading + 2
       paragraphs + a 3-line statement + CTA) that at narrower desktop
       widths the image -- height:auto, so it shrinks together with the
       viewport -- becomes shorter than the text needs, and the text spills
       out past the image's own bottom edge into whatever follows. Giving
       the section a min-height and switching the image to cover it (the
       same technique the hero uses) decouples "how tall this section is"
       from "how tall the image happens to be at this width". Scoped to
       desktop only -- mobile already stacks image-above-text via the
       shared .evidence-inner{position:relative} reset below, and this
       would turn the image into a full-bleed background behind the text
       there instead. */
    @media (min-width: 993px) {
        #science-expertise {
            /* max() rather than a flat min-height: at wide viewports 56.3vw
               (the image's own native aspect ratio, 941/1671) already
               exceeds 850px and wins, keeping the natural look untouched;
               only below ~1510px width does the 850px floor take over and
               add height the aspect ratio alone wouldn't give the text. */
            min-height: max(850px, 56.3vw);
        }

        #science-expertise .evidence-media {
            position: absolute;
            inset: 0;
            line-height: normal;
        }

        #science-expertise .evidence-media img {
            height: 100%;
            object-fit: cover;
            object-position: 30% center;
        }
    }

    .evidence-media {
        position: relative;
        width: 100%;
        line-height: 0;
    }

    .evidence-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .evidence-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
        display: flex;
        align-items: center;
    }

    .evidence-text {
        max-width: 440px;
    }

    .evidence-text .hero-heading {
        margin-bottom: 20px;
    }

    .evidence-text .hero-desc {
        max-width: 100%;
    }

    .evidence-statement {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* The inherited template hides `p br` below 992px, which would run the
       two halves of this statement together into one word. */
    .evidence-statement-script br {
        display: inline;
    }

    .evidence-statement-script {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: clamp(20px, 2.2vw, 26px);
        line-height: 1.3;
        color: var(--lunaray-salmon-dark);
        margin: 0;
    }

    .evidence-statement-sub {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
        margin: 0;
    }

    .evidence-cta {
        margin-top: 32px;
    }

    /* This photo's own "Concept" graphic starts at ~17.3% of the image
       width, roughly level with where the paragraph text begins (the
       heading above it sits entirely clear, so only the content from the
       paragraphs down needs the narrower, vw-scaled column). */
    #concept-manufacturing .evidence-text .hero-desc,
    #concept-manufacturing .evidence-text .why-lunaray-statement {
        max-width: clamp(230px, 19vw, 320px);
    }

    @media (max-width: 992px) {
        .evidence-inner {
            position: relative;
            padding: 48px 24px;
        }

        .evidence-text {
            max-width: 100%;
        }

        .evidence-text .hero-heading {
            font-size: clamp(28px, 7vw, 38px);
        }
    }

    /* ===== Product Categories ===== */
    .cat-section {
        position: relative;
        background: #fdfbf9;
        padding-bottom: 70px;
    }

    .cat-hero {
        position: relative;
        width: 100%;
        line-height: 0;
    }

    .cat-hero-img {
        width: 100%;
        height: auto;
        display: block;
        /* At some zoom/DPI combinations Chromium tiles very wide stretched
           images for GPU compositing and a hairline seam shows at the tile
           boundary (most visible over this photo's smooth blurred left
           side). Forcing the image onto its own single composited layer
           avoids that. */
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* The source banner (product.png) is a short, wide crop with its
       own baked-in "Beauty can take..." / "Idea. Formula..." copy and a blank dark
       pill button at a fixed spot. .cat-hero-inner spans the raw image 1:1 (no
       padding/max-width) so left/top percentages below map straight onto the
       image's own pixel coordinates instead of a separately-centered container. */
    .cat-hero-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .cat-hero-text {
        position: absolute;
        left: 3%;
        top: 16%;
        width: min(27vw, 400px);
    }

    .cat-hero-text .hero-eyebrow {
        font-size: clamp(9px, .68vw, 12.5px);
        gap: clamp(6px, .7vw, 12px);
        margin-bottom: clamp(6px, 1.1vw, 18px);
    }

    .cat-hero-text .eyebrow-dash {
        width: clamp(16px, 1.6vw, 32px);
    }

    .cat-hero-text .hero-heading {
        font-size: clamp(15px, 2.1vw, 36px);
        line-height: 1.15;
        margin-bottom: clamp(4px, .7vw, 12px);
    }

    .cat-hero-text .hero-desc {
        max-width: 100%;
        font-size: clamp(8.5px, .95vw, 14px);
        line-height: 1.45;
        margin-bottom: 0;
    }

    /* Sized/positioned to land directly on the blank dark pill baked into the
       image (~3.4%-22.3% of width, vertically centered ~92% down the banner). */
    .cat-hero-cta {
        position: absolute;
        left: 3.4%;
        bottom: 3%;
        width: 18.8%;
        min-width: 150px;
        justify-content: center;
        padding: clamp(9px, 1vw, 15px) clamp(14px, 1.6vw, 26px);
        font-size: clamp(10px, .78vw, 14px);
        font-weight: 700;
        background: var(--lunaray-navy);
        color: #fff;
        border: none;
        box-shadow: 0 6px 14px rgba(28, 43, 69, .25);
        /* Solid navy fill has nothing to blur through - the base .glass-btn's
           backdrop-filter is a no-op here but can still trigger a GPU
           compositing pass that, combined with the box-shadow, renders as a
           smudgy "doubled" pill on some systems. Turning it off removes the
           whole class of glitch. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateZ(0);
    }

    .cat-hero-cta svg {
        background: rgba(255, 255, 255, .16);
        color: #fff;
        border-radius: 50%;
        padding: 5px;
        width: 20px;
        height: 20px;
        box-sizing: content-box;
        flex-shrink: 0;
    }

    .cat-hero-cta:hover {
        background: #141f33;
        color: #fff;
        box-shadow: 0 12px 28px rgba(28, 43, 69, .36);
    }

    /* ----- Category grid ----- */
    .cat-grid {
        position: relative;
        z-index: 1;
        max-width: 1600px;
        margin: clamp(32px, 3.2vw, 56px) auto 0;
        padding: 0 5vw;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
    }

    .cat-card {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 16px 40px rgba(28, 43, 69, .1);
        text-decoration: none;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .cat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 48px rgba(28, 43, 69, .16);
        text-decoration: none;
    }

    .cat-card-media {
        position: relative;
        width: 100%;
        aspect-ratio: 190 / 140;
        overflow: hidden;
    }

    .cat-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

    .cat-card:hover .cat-card-media img {
        transform: scale(1.06);
    }

    .cat-card-body {
        position: relative;
        padding: 16px 40px 20px 16px;
        flex: 1;
    }

    .cat-card-title {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 13.5px;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
        margin: 0 0 8px;
    }

    .cat-card-lines,
    .cat-card-desc {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 11.5px;
        line-height: 1.55;
        color: var(--lunaray-text);
        margin: 0;
    }

    .cat-card-arrow {
        position: absolute;
        right: 14px;
        bottom: 16px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid rgba(201, 119, 104, .4);
        color: var(--lunaray-salmon-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background .25s ease, color .25s ease;
    }

    .cat-card:hover .cat-card-arrow {
        background: var(--lunaray-salmon-dark);
        color: #fff;
    }

    /* ----- Specialty care ----- */
    .cat-specialty {
        max-width: 1600px;
        margin: 56px auto 0;
        padding: 40px 5vw;
        display: flex;
        gap: 32px;
        align-items: stretch;
        border-radius: 24px;
        background: linear-gradient(160deg, rgba(28, 43, 69, .04), rgba(28, 43, 69, .01));
        border: 1px solid rgba(28, 43, 69, .08);
    }

    .cat-specialty-intro {
        flex: 0 0 260px;
    }

    .cat-specialty-heading {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(22px, 2vw, 28px);
        line-height: 1.2;
        color: var(--lunaray-navy);
        margin: 10px 0 14px;
    }

    .cat-specialty-intro .hero-desc {
        max-width: 100%;
        font-size: 13.5px;
        margin-bottom: 0;
    }

    .cat-specialty-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .cat-card-sm .cat-card-media {
        aspect-ratio: 230 / 110;
    }

    .cat-card-sm .cat-card-title {
        font-size: 12.5px;
        line-height: 1.35;
    }

    .cat-specialty-more {
        flex: 0 0 200px;
        padding-left: 32px;
        border-left: 1px solid rgba(28, 43, 69, .14);
        display: flex;
        flex-direction: column;
    }

    .cat-specialty-more svg {
        color: var(--lunaray-salmon-dark);
        margin-bottom: 14px;
    }

    .cat-specialty-more-text {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--lunaray-text);
        margin: 10px 0 16px;
    }

    .cat-specialty-more-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--lunaray-salmon-dark);
        text-decoration: none;
        margin-top: auto;
    }

    .cat-specialty-more-link:hover {
        color: var(--lunaray-navy);
        text-decoration: none;
    }

    /* ----- Footer microcopy ----- */
    .cat-footer-micro {
        max-width: 1600px;
        margin: 40px auto 0;
        padding: 24px 5vw 0;
        border-top: 1px solid rgba(28, 43, 69, .1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .cat-footer-micro span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.5;
        color: rgba(28, 43, 69, .55);
    }

    @media (max-width: 1300px) {
        .cat-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (max-width: 992px) {
        .cat-hero-inner {
            position: relative;
            padding: 48px 24px 32px;
        }

        .cat-hero-text {
            position: static;
            width: 100%;
            max-width: 100%;
        }

        .cat-hero-text .hero-eyebrow {
            font-size: 12.5px;
            gap: 12px;
            margin-bottom: 16px;
        }

        .cat-hero-text .eyebrow-dash {
            width: 32px;
        }

        .cat-hero-text .hero-heading {
            font-size: clamp(28px, 7vw, 38px);
            line-height: 1.18;
            margin-bottom: 14px;
        }

        .cat-hero-text .hero-desc {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .cat-hero-cta {
            position: static;
            transform: none;
            width: auto;
            min-width: 0;
            display: inline-flex;
            padding: 15px 28px;
            font-size: 14px;
        }

        .cat-grid {
            margin-top: 0;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .cat-card-body {
            padding: 14px 40px 16px 14px;
        }

        .cat-specialty {
            flex-direction: column;
            gap: 24px;
            margin-top: 32px;
            padding: 28px 24px;
        }

        .cat-specialty-intro {
            flex: none;
        }

        .cat-specialty-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .cat-specialty-more {
            flex: none;
            padding-left: 0;
            border-left: none;
            padding-top: 24px;
            border-top: 1px solid rgba(28, 43, 69, .14);
        }

        .cat-footer-micro {
            flex-direction: column;
            align-items: flex-start;
            padding-left: 24px;
            padding-right: 24px;
        }
    }

    @media (max-width: 480px) {
        .cat-grid {
            grid-template-columns: 1fr 1fr;
        }

        .cat-specialty-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ===== Beautyversity ===== */
    .bv-section {
        position: relative;
        overflow: hidden;
        background: #051734;
        padding: clamp(56px, 6vw, 96px) 0 70px;
    }

    .bv-decor {
        position: absolute;
        top: 0;
        right: 0;
        width: min(48%, 720px);
        pointer-events: none;
        z-index: 0;
        opacity: .95;
    }

    .bv-decor img {
        width: 100%;
        height: auto;
        display: block;
    }

    .bv-inner {
        position: relative;
        z-index: 1;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .bv-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 56px;
    }

    .bv-header-main {
        flex: 1 1 380px;
        max-width: 480px;
    }

    .bv-header-main .hero-heading {
        margin-bottom: 0;
    }

    .bv-header-body {
        flex: 0 1 320px;
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .72);
        padding-left: 28px;
        border-left: 1px solid rgba(255, 255, 255, .18);
        margin-top: 6px;
    }

    .bv-header-micro {
        flex: 0 0 auto;
        display: flex;
        gap: 32px;
        margin-top: 6px;
    }

    .bv-micro-col {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bv-micro-col li {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        line-height: 1.9;
        color: rgba(255, 255, 255, .6);
        white-space: nowrap;
    }

    .bv-micro-col--accent li {
        color: rgba(255, 255, 255, .92);
    }

    /* ----- Cards: 1 featured (2 units wide) + 2 regular ----- */
    .bv-cards {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .bv-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        transition: transform .25s ease;
    }

    .bv-card:hover {
        transform: translateY(-4px);
        text-decoration: none;
    }

    .bv-card-media {
        position: relative;
        width: 100%;
        aspect-ratio: 398 / 526;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .14);
        margin-bottom: 20px;
    }

    .bv-card-featured .bv-card-media {
        aspect-ratio: 756 / 526;
    }

    .bv-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

    .bv-card:hover .bv-card-media img {
        transform: scale(1.05);
    }

    .bv-card-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 7px 16px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .92);
        color: var(--lunaray-navy);
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .bv-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .bv-card-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    .bv-card-category {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--lunaray-salmon);
    }

    .bv-card-index {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 13px;
        color: rgba(255, 255, 255, .5);
        flex-shrink: 0;
    }

    .bv-card-index-dash {
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, .3);
    }

    .bv-card-title {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(17px, 1.3vw, 22px);
        line-height: 1.3;
        color: #fff;
        margin: 0 0 12px;
    }

    .bv-card-featured .bv-card-title {
        font-size: clamp(20px, 1.7vw, 27px);
    }

    .bv-card-excerpt {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 13.5px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .62);
        margin: 0 0 18px;
    }

    .bv-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #fff;
        margin-top: auto;
    }

    .bv-card-cta svg {
        color: var(--lunaray-salmon);
        transition: transform .25s ease;
    }

    .bv-card:hover .bv-card-cta svg {
        transform: translateX(4px);
    }

    /* ----- Footer: divider + outline glow CTA ----- */
    .bv-footer {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 44px;
    }

    .bv-footer-line {
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, .16);
    }

    .bv-cta {
        flex-shrink: 0;
        background: transparent;
        color: #fff;
        border: 1px solid rgba(217, 141, 128, .55);
        box-shadow: 0 0 0 1px rgba(217, 141, 128, .12), 0 0 26px rgba(217, 141, 128, .22);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bv-cta svg {
        background: transparent;
        color: var(--lunaray-salmon);
        padding: 0;
        width: 18px;
        height: 18px;
    }

    .bv-cta:hover {
        border-color: rgba(217, 141, 128, .85);
        box-shadow: 0 0 0 1px rgba(217, 141, 128, .2), 0 0 34px rgba(217, 141, 128, .32);
        color: #fff;
    }

    /* ----- Footer microcopy ----- */
    .bv-footer-micro {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .12);
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.5;
        color: rgba(255, 255, 255, .45);
    }

    @media (max-width: 1140px) {
        .bv-decor {
            width: 58%;
            opacity: .7;
        }
    }

    @media (max-width: 992px) {
        .bv-header {
            flex-direction: column;
            gap: 24px;
            margin-bottom: 40px;
        }

        /* flex-basis on these was meant as a row-mode width (380px/320px) --
           in column mode that same basis governs height instead, which was
           forcing tall empty gaps under the heading and body copy. */
        .bv-header-main,
        .bv-header-body {
            flex: none;
        }

        .bv-header-body {
            padding-left: 0;
            border-left: none;
            max-width: 100%;
        }

        .bv-header-micro {
            gap: 40px;
        }

        .bv-cards {
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .bv-card-featured {
            grid-column: 1 / -1;
        }

        .bv-card-featured .bv-card-media {
            aspect-ratio: 756 / 400;
        }
    }

    @media (max-width: 640px) {
        .bv-decor {
            width: 80%;
            opacity: .5;
        }

        .bv-header-micro {
            flex-wrap: wrap;
            gap: 24px;
        }

        .bv-cards {
            grid-template-columns: 1fr;
        }

        .bv-card-featured {
            grid-column: auto;
        }

        .bv-card-featured .bv-card-media {
            aspect-ratio: 756 / 526;
        }

        .bv-footer {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 20px;
        }

        .bv-footer-line {
            display: none;
        }

        .bv-cta {
            justify-content: center;
        }

        .bv-footer-micro {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* ===== AI & Intelligence at Lunaray ===== */
    .ai-section {
        position: relative;
        background: #fdfbf9;
    }

    /* Everything above the value strip -- hero copy, application layers,
       simulator -- now lives directly on one continuous photo (same
       plain-background-photo technique as FAQ/Start Your Development)
       instead of a photo hero followed by separate white/glass cards.
       Height simply follows content in normal flow, no min-height or
       negative-margin overlap needed to fake the two pieces together.
       The image itself is applied responsively below: full-bleed behind
       the whole zone on desktop, and bounded to just the intro text on
       mobile (see the max-width:992px block) so it isn't forced to cover
       a much taller single-column stack, which would zoom it in badly. */
    .ai-photo-zone {
        position: relative;
        background-color: #fdfbf9;
        padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 110px);
    }

    .ai-photo-inner {
        position: relative;
        z-index: 2;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .ai-hero-top {
        position: relative;
    }

    @media (min-width: 993px) {
        .ai-photo-zone {
            background-image: url('/assets/img/lunaray/content/ai-explore.webp');
            background-size: cover;
            background-position: center top;
            background-color: #dce8f5;
        }
    }

    /* This photo is bright and fairly uniform throughout, so rather than a
       corner scrim (which left a visible hard-edged rectangle once the
       photo extended behind the layers/simulator/value-strip content
       too, since that box no longer matched the scrim's own bounds), text
       legibility here rests entirely on this shadow, the same way it
       already does on Start Your Development's dark photo. */
    .ai-photo-inner .ai-hero-number,
    .ai-photo-inner .ai-hero-label-text,
    .ai-photo-inner .ai-hero-heading,
    .ai-photo-inner .ai-hero-desc,
    .ai-photo-inner .hero-eyebrow,
    .ai-photo-inner .ai-layer-label,
    .ai-photo-inner .ai-simulator-title,
    .ai-photo-inner .ai-simulator-sub,
    .ai-photo-inner .ai-simulator-body,
    .ai-photo-inner .ai-simulator-secondary,
    .ai-photo-inner .ai-value-item span,
    .ai-photo-inner .ai-footer-micro span {
        text-shadow: 0 2px 14px rgba(255, 255, 255, .85);
    }

    /* The current photo's sky/floor is a fairly uniform hazy silver-grey,
       close enough in tone to the shared muted-grey body-copy color that
       the white text-shadow alone doesn't lift it clear. Bumping these two
       paragraphs to the same navy already proven legible on this photo
       (used by the headings and by <strong> inside .ai-hero-desc) and
       doubling the shadow -- a tight pass for the letterforms themselves,
       plus the original wide halo -- fixes it without touching the shared
       .hero-desc/.ai-simulator-body color used elsewhere on the page. */
    .ai-photo-inner .ai-hero-desc,
    .ai-photo-inner .ai-simulator-body {
        color: var(--lunaray-navy);
        text-shadow: 0 1px 2px rgba(255, 255, 255, .9), 0 2px 14px rgba(255, 255, 255, .85);
    }

    .ai-hero-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: clamp(36px, 5vw, 80px);
    }

    .ai-hero-label {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: clamp(10px, 1.4vw, 22px);
    }

    .ai-hero-number {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(14px, 1.3vw, 20px);
        color: var(--lunaray-navy);
    }

    .ai-hero-label-dash {
        width: 1px;
        height: 18px;
        background: rgba(28, 43, 69, .3);
    }

    .ai-hero-label-text {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(10px, .78vw, 12.5px);
        letter-spacing: 1.2px;
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--lunaray-salmon-dark);
    }

    .ai-hero-heading {
        font-size: clamp(21px, 2.15vw, 38px);
        line-height: 1.2;
        /* Kept clear of the globe/thumbnail cluster, which starts around
           31% of this photo's width -- narrower than the shared 640px
           default so it can't drift into it at wider desktop sizes, and
           the font-size scales down enough at in-between widths that
           "Human Expertise Decides." never needs a 3rd wrapped line
           (which would otherwise drop down onto the scientist's face). */
        max-width: clamp(320px, 33vw, 560px);
        margin-bottom: clamp(10px, 1.2vw, 18px);
    }

    .ai-hero-desc {
        max-width: clamp(260px, 25vw, 420px);
        font-size: clamp(12.5px, 1vw, 14.5px);
    }

    .ai-hero-desc strong {
        font-weight: 700;
        color: var(--lunaray-navy);
    }

    .ai-hero-micro {
        position: absolute;
        top: clamp(24px, 3vw, 44px);
        right: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    .ai-hero-micro span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(9px, .68vw, 11px);
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.5;
        color: var(--lunaray-navy);
        text-align: right;
    }

    /* ----- Body: application layers + simulator, both directly on the photo ----- */
    .ai-body {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: clamp(32px, 4vw, 64px);
        align-items: start;
    }

    .ai-layers-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 1.6vw, 22px);
        margin-top: clamp(16px, 1.8vw, 26px);
    }

    .ai-layer-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ai-layer-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, .8);
        box-shadow: 0 4px 14px rgba(28, 43, 69, .22);
    }

    .ai-layer-label {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .2px;
        color: var(--lunaray-navy);
    }

    .ai-simulator {
        display: flex;
        flex-direction: column;
    }

    .ai-simulator-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--lunaray-salmon-dark);
        margin-bottom: 18px;
    }

    .ai-simulator-title {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(20px, 1.8vw, 27px);
        line-height: 1.25;
        color: var(--lunaray-navy);
        margin: 0 0 10px;
    }

    .ai-simulator-sub {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: var(--lunaray-navy);
        margin: 0 0 14px;
    }

    .ai-simulator-body {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--lunaray-text);
        margin: 0 0 22px;
    }

    .ai-simulator-features {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 26px;
    }

    .ai-simulator-feature {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .8);
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
    }

    .ai-simulator-feature svg {
        color: var(--lunaray-salmon-dark);
        flex-shrink: 0;
    }

    .ai-simulator-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        margin-top: auto;
    }

    .ai-simulator-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
        text-decoration: none;
    }

    .ai-simulator-secondary svg {
        color: var(--lunaray-salmon-dark);
        transition: transform .25s ease;
    }

    .ai-simulator-secondary:hover {
        color: var(--lunaray-navy);
        text-decoration: none;
    }

    .ai-simulator-secondary:hover svg {
        transform: translateX(4px);
    }

    /* ----- Value strip ----- */
    .ai-value-strip {
        margin-top: clamp(40px, 5vw, 64px);
        padding-top: clamp(24px, 2.6vw, 36px);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, .4);
    }

    .ai-value-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 28px;
        border-left: 1px solid rgba(255, 255, 255, .4);
    }

    .ai-value-item:first-child {
        border-left: none;
    }

    .ai-value-item svg {
        color: var(--lunaray-salmon-dark);
        flex-shrink: 0;
    }

    .ai-value-item span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--lunaray-navy);
        white-space: nowrap;
    }

    /* ----- Footer microcopy ----- */
    .ai-footer-micro {
        margin-top: clamp(28px, 3vw, 40px);
    }

    .ai-footer-line {
        height: 1px;
        background: rgba(255, 255, 255, .4);
        margin-bottom: 20px;
    }

    .ai-footer-micro span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.6;
        color: rgba(28, 43, 69, .55);
    }

    @media (max-width: 992px) {
        /* The photo can't cover the whole zone on mobile the way it does on
           desktop -- stacked single-column, the zone is far taller than it
           is wide, and a cover-fit photo on that shape gets zoomed in until
           it's an unrecognizable blur. Instead the photo stays bounded to
           just the intro text, and the application layers / simulator
           content below it sits on the section's own plain background. */
        .ai-photo-inner {
            padding: 0;
        }

        .ai-hero-top {
            background-image: url('/assets/img/lunaray/content/ai-explore.webp');
            background-size: cover;
            background-position: center 25%;
            background-color: #dce8f5;
            padding: 40px 24px 32px;
        }

        .ai-hero-heading {
            font-size: clamp(26px, 6vw, 34px);
            max-width: 100%;
        }

        .ai-hero-desc {
            max-width: 100%;
        }

        .ai-hero-micro {
            position: relative;
            top: auto;
            right: auto;
            padding: 20px 0 0;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 6px 20px;
        }

        .ai-hero-micro span {
            text-align: left;
        }

        .ai-body {
            background: #fdfbf9;
            padding: 32px 24px 0;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .ai-value-strip {
            margin-top: 32px;
            padding: 24px 24px 0;
            justify-content: flex-start;
            border-top-color: rgba(28, 43, 69, .1);
        }

        .ai-value-item {
            padding: 10px 20px;
            flex: 1 1 45%;
            border-left-color: rgba(28, 43, 69, .1);
        }

        .ai-footer-micro {
            padding: 0 24px;
        }
    }

    @media (max-width: 576px) {
        .ai-value-item {
            flex: 1 1 100%;
            border-left: none;
            border-top: 1px solid rgba(28, 43, 69, .1);
            padding: 14px 4px;
        }

        .ai-value-item:first-child {
            border-top: none;
        }

        .ai-simulator-cta {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
    }

    /* ===== FAQ ===== */
    .faq-section {
        position: relative;
        background-image: url('/assets/img/lunaray/content/faq.webp');
        background-size: cover;
        background-position: center;
        background-color: #fdfbf9;
        padding: clamp(56px, 7vw, 110px) 0 clamp(56px, 6vw, 90px);
    }

    .faq-inner {
        position: relative;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .faq-header {
        position: relative;
        text-align: center;
        max-width: 720px;
        margin: 0 auto clamp(40px, 4vw, 64px);
    }

    .faq-label {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 22px;
        text-align: left;
    }

    .faq-eyebrow {
        justify-content: center;
        margin-bottom: 14px;
    }

    .faq-heading {
        font-size: clamp(28px, 3.4vw, 46px);
        margin-bottom: 16px;
    }

    .faq-desc {
        max-width: 100%;
        margin: 0 auto;
    }

    .faq-micro {
        position: absolute;
        top: clamp(56px, 7vw, 110px);
        right: 5vw;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    .faq-micro span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.5;
        color: var(--lunaray-navy);
        text-align: right;
    }

    /* ----- Question grid ----- */
    .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 32px;
    }

    /* Solid rather than translucent: the background photo bakes in its own
       faint card/row outlines at a different width than this grid actually
       renders at, so a see-through card lets those misaligned shapes show
       through underneath ours as a ghosting artifact. Fully opaque hides
       them completely regardless of alignment. */
    .faq-item {
        background: #fff;
        border: 1px solid rgba(28, 43, 69, .06);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(28, 43, 69, .08);
        overflow: hidden;
    }

    .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 22px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: 'Nexa', sans-serif;
    }

    .faq-index {
        flex-shrink: 0;
        font-weight: 700;
        font-size: 13px;
        color: var(--lunaray-salmon-dark);
    }

    .faq-index-dash {
        flex-shrink: 0;
        width: 1px;
        height: 16px;
        background: rgba(217, 141, 128, .4);
    }

    .faq-question-text {
        flex: 1;
        font-weight: 700;
        font-size: 13.5px;
        line-height: 1.4;
        color: var(--lunaray-navy);
    }

    .faq-toggle {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(28, 43, 69, .06);
        color: var(--lunaray-navy);
        transition: background .25s ease, color .25s ease;
    }

    .faq-toggle svg {
        transition: transform .3s ease;
    }

    .faq-item.is-open .faq-toggle {
        background: var(--lunaray-navy);
        color: #fff;
    }

    .faq-item.is-open .faq-toggle svg {
        transform: rotate(45deg);
    }

    /* Same 0fr -> 1fr expand technique as the Find Your Path accordion. */
    .faq-accordion {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s ease;
    }

    .faq-item.is-open .faq-accordion {
        grid-template-rows: 1fr;
    }

    .faq-accordion-inner {
        overflow: hidden;
    }

    .faq-answer {
        margin: 0;
        padding: 0 22px 20px 58px;
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--lunaray-text);
    }

    /* ----- Still have questions panel ----- */
    .faq-cta-panel {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        background: #fff;
        border: 1px solid rgba(28, 43, 69, .06);
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(28, 43, 69, .08);
        padding: clamp(24px, 2.6vw, 36px);
        margin-bottom: clamp(36px, 4vw, 56px);
    }

    .faq-cta-text {
        flex: 1 1 380px;
        max-width: 560px;
    }

    .faq-cta-heading {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(22px, 2vw, 30px);
        color: var(--lunaray-navy);
        margin: 0 0 10px;
    }

    .faq-cta-accent {
        color: var(--lunaray-salmon-dark);
    }

    .faq-cta-text p {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--lunaray-text);
        margin: 0;
    }

    .faq-cta-btn {
        flex-shrink: 0;
        background: var(--lunaray-navy);
        color: #fff;
        border: none;
        box-shadow: 0 10px 26px rgba(28, 43, 69, .28);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .faq-cta-btn svg {
        background: rgba(255, 255, 255, .16);
        color: #fff;
        border-radius: 50%;
        padding: 6px;
        width: 22px;
        height: 22px;
        box-sizing: content-box;
    }

    .faq-cta-btn:hover {
        background: #141f33;
        color: #fff;
    }

    /* ----- Footer microcopy ----- */
    .faq-footer-micro {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .faq-footer-item {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1;
    }

    .faq-footer-item--right {
        flex-direction: row-reverse;
    }

    .faq-footer-item span:not(.faq-footer-line) {
        flex-shrink: 0;
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: rgba(28, 43, 69, .6);
    }

    .faq-footer-line {
        flex: 1;
        height: 1px;
        background: rgba(28, 43, 69, .15);
    }

    @media (max-width: 992px) {
        .faq-label {
            margin-bottom: 24px;
        }

        .faq-micro {
            position: relative;
            top: auto;
            right: auto;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 16px;
            margin-bottom: 32px;
        }

        .faq-micro span {
            text-align: center;
        }

        .faq-grid {
            grid-template-columns: 1fr;
        }

        .faq-cta-panel {
            flex-direction: column;
            align-items: flex-start;
        }

        .faq-cta-btn {
            width: 100%;
            justify-content: center;
        }

        .faq-footer-micro {
            flex-direction: column;
            gap: 10px;
        }

        .faq-footer-item,
        .faq-footer-item--right {
            flex-direction: row;
            width: 100%;
        }
    }

    @media (max-width: 560px) {
        .faq-question {
            padding: 16px;
            gap: 12px;
        }

        .faq-question-text {
            font-size: 13px;
        }

        .faq-answer {
            padding: 0 16px 18px 44px;
        }
    }

    /* ===== Start Your Development (closing CTA) ===== */
    .start-cta-section {
        position: relative;
        background-image: url('/assets/img/lunaray/content/start-development.webp');
        background-size: cover;
        background-position: center;
        background-color: #05070d;
        padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 6vw, 90px);
    }

    .start-cta-inner {
        position: relative;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
    }

    .start-cta-label {
        margin-bottom: 24px;
    }

    .start-cta-label .eyebrow-dash {
        background: rgba(255, 255, 255, .35);
    }

    .start-cta-label .ai-hero-label-text {
        text-transform: uppercase;
    }

    .start-cta-heading {
        max-width: 640px;
        font-size: clamp(30px, 3.6vw, 50px);
        margin-bottom: 22px;
    }

    .start-cta-body {
        max-width: 520px;
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 15px;
        line-height: 1.65;
        color: rgba(255, 255, 255, .78);
        margin: 0 0 14px;
    }

    /* ----- CTAs ----- */
    .start-cta-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin: 36px 0 44px;
    }

    .start-cta-btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 300px;
    }

    .start-cta-btn {
        justify-content: center;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .start-cta-btn--primary {
        background: linear-gradient(100deg, #f0c9a8, #d99b74);
        color: var(--lunaray-navy);
        border: none;
        box-shadow: 0 10px 26px rgba(217, 155, 116, .3);
    }

    .start-cta-btn--primary svg {
        background: rgba(28, 43, 69, .16);
        color: var(--lunaray-navy);
        border-radius: 50%;
        padding: 6px;
        width: 20px;
        height: 20px;
        box-sizing: content-box;
    }

    .start-cta-btn--primary:hover {
        box-shadow: 0 14px 32px rgba(217, 155, 116, .4);
        color: var(--lunaray-navy);
    }

    .start-cta-btn--ailuna {
        background: rgba(255, 255, 255, .06);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .35);
    }

    .start-cta-btn--ailuna svg:first-child {
        color: var(--lunaray-salmon);
    }

    .start-cta-btn--ailuna:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .start-cta-btn--whatsapp {
        background: rgba(37, 165, 108, .16);
        color: #fff;
        border: 1px solid rgba(90, 210, 150, .45);
    }

    .start-cta-btn--whatsapp svg:first-child {
        color: #5ad296;
    }

    .start-cta-btn--whatsapp:hover {
        background: rgba(37, 165, 108, .26);
        color: #fff;
    }

    .start-cta-caption {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .55);
        margin: 0;
        padding: 0 4px;
    }

    /* ----- Trust row ----- */
    .start-cta-bottom-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, .12);
        margin-bottom: 60px;
    }

    .start-cta-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 36px;
        max-width: 800px;
    }

    .start-cta-trust-item {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .start-cta-trust-item svg {
        flex-shrink: 0;
        color: var(--lunaray-salmon);
    }

    .start-cta-trust-item span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .6px;
        text-transform: uppercase;
        line-height: 1.5;
        color: rgba(255, 255, 255, .85);
    }

    /* ----- Top-right micro list ----- */
    .start-cta-micro {
        position: absolute;
        top: 0;
        right: 5vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .start-cta-micro span {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        line-height: 1.6;
        color: rgba(255, 255, 255, .8);
        text-align: right;
    }

    .start-cta-micro-dash {
        width: 1px;
        height: 20px;
        margin: 4px 0;
        background: rgba(255, 255, 255, .3);
    }

    /* ----- Signature ----- */
    .start-cta-signature {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .start-cta-signature-name {
        font-family: 'Nexa', sans-serif;
        font-weight: 700;
        font-size: clamp(20px, 2vw, 30px);
        letter-spacing: 4px;
        color: #fff;
    }

    .start-cta-signature-tag {
        font-family: 'Nexa', sans-serif;
        font-weight: 300;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .55);
    }

    /* ----- Closing belief ----- */
    .start-cta-belief {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .start-cta-belief-line {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: clamp(15px, 1.4vw, 19px);
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .6);
    }

    .start-cta-belief-accent {
        color: var(--lunaray-salmon);
        font-weight: 700;
    }

    @media (max-width: 1140px) {
        .start-cta-signature {
            align-items: flex-start;
        }

        .start-cta-signature-name,
        .start-cta-signature-tag {
            text-align: left;
        }
    }

    @media (max-width: 992px) {
        .start-cta-micro {
            position: relative;
            top: auto;
            right: auto;
            align-items: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px 18px;
            margin-bottom: 28px;
        }

        .start-cta-micro span {
            text-align: left;
        }

        .start-cta-micro-dash {
            display: none;
        }

        .start-cta-heading {
            max-width: 100%;
            font-size: clamp(28px, 7vw, 38px);
        }

        .start-cta-body {
            max-width: 100%;
        }

        .start-cta-buttons {
            flex-direction: column;
        }

        .start-cta-btn-group {
            max-width: 100%;
        }

        .start-cta-trust {
            flex-direction: column;
            gap: 20px;
            margin-bottom: 44px;
        }
    }

    .widget-tags .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .widget-tags .tag-item {
        display: inline-block;
        padding: 6px 12px;
        background-color: #f8f9fa;
        color: #495057;
        text-decoration: none;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }
    
    .widget-tags .tag-item:hover {
        background-color: #007bff;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,123,255,0.3);
    }
    
    .advertisement-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        border: 1px solid #e9ecef;
    }
    
    .advertisement-card img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    
    .section-heading h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 0;
        padding-bottom: 10px;
        border-bottom: 2px solid #007bff;
    }
    
    .section-heading h3 svg {
        color: #007bff;
    }

    .post-layout-2 {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .post-layout-item {
        flex: 1;
        min-width: 300px;
    }

    .post-layout-item:first-child {
        flex: 1.5;
    }

    .post-layout-item:nth-child(2) {
        flex: 1;
    }

    .post-layout-item:nth-child(3) {
        flex: 1;
    }

    .vartical-post-carousel {
        overflow: hidden;
    }

    .vertical-post-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .vertical-post-list .post-layout-item {
        min-width: 0;
        flex: unset;
    }

    .information-post .widget-post-content {
        padding: 12px 0;
    }

    .information-post .widget-post-content h3 {
        font-size: 1rem;
        margin: 0;
    }

    @media (max-width: 768px) {
        .post-layout-2 {
            flex-direction: column;
        }
        .post-layout-item,
        .post-layout-item:first-child,
        .post-layout-item:nth-child(2),
        .post-layout-item:nth-child(3) {
            flex: unset;
            min-width: 0;
        }
    }