/* Requested 2026-09-19: workshop integration, clean AI metadata, draggable client marquee. */

/* Adobe apps now live inside the existing catalog groups, so they inherit the page's editorial layout. */
.ai-tool-entry .ai-logo img[src*="/adobe/"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.18rem;
}

/* AI project cards on the homepage: two quiet metadata rows instead of a bulky footer/table. */
html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .video-media-frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    background: #e7edf4 !important;
}

html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badges {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.42rem !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.72rem 0 0.78rem !important;
    border: 0 !important;
    border-top: 1px solid #cbd6e2 !important;
    background: transparent !important;
    pointer-events: none !important;
}

html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badges::before {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    color: #6b7f96 !important;
    font: 650 0.52rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace !important;
    letter-spacing: 0.105em !important;
}
html[lang="pl"] #ai-reels .model-badges::before { content: "MODELE WYKORZYSTANE" !important; }
html[lang="en"] #ai-reels .model-badges::before { content: "MODELS USED" !important; }
html[lang="de"] #ai-reels .model-badges::before { content: "VERWENDETE MODELLE" !important; }
html[lang="cs"] #ai-reels .model-badges::before { content: "POUŽITÉ MODELY" !important; }
html[lang="fr"] #ai-reels .model-badges::before { content: "MODÈLES UTILISÉS" !important; }
html[lang="uk"] #ai-reels .model-badges::before { content: "ВИКОРИСТАНІ МОДЕЛІ" !important; }

html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.56rem !important;
    border: 1px solid #ccd7e2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #2d435d !important;
    box-shadow: none !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badge + .model-badge::before {
    display: none !important;
    content: none !important;
}
html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badge img {
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex: 0 0 1.2rem !important;
    object-fit: contain !important;
}

html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .video-caption {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.76rem 0 0 !important;
    border-top: 1px solid #d8e0e9 !important;
    color: #617389 !important;
    font-size: 0.75rem !important;
    line-height: 1.65 !important;
}
html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .video-caption::before {
    display: block;
    margin-bottom: 0.42rem;
    color: #6b7f96;
    font: 650 0.52rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.105em;
}
html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .video-caption::before {
    content: attr(data-project-title);
}

/* Dedicated AI page: make models readable and keep them visually tied to the description. */
html[data-theme] body.light-theme.ai-page .ai-project-description {
    min-height: 0 !important;
    margin-top: 0.08rem !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-models {
    display: grid !important;
    grid-template-columns: minmax(7.5rem, 0.65fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.75rem 1rem !important;
    min-height: 0 !important;
    margin-top: 0.3rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #d8e0e9 !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-models-label {
    display: block !important;
    margin: 0 !important;
    color: #6a7d94 !important;
    font-size: 0.54rem !important;
    line-height: 1.35 !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-models-label::before { display: none !important; content: none !important; }
html[data-theme] body.light-theme.ai-page .ai-project-models-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.38rem !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-models a.ai-project-model-logo {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 2rem !important;
    max-width: 100% !important;
    place-items: initial !important;
    align-items: center !important;
    gap: 0.42rem !important;
    padding: 0.3rem 0.52rem !important;
    border: 1px solid #ccd7e2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #2d435d !important;
    font-size: 0.69rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-models a.ai-project-model-logo::after { display: none !important; }
html[data-theme] body.light-theme.ai-page .ai-project-models a.ai-project-model-logo .ai-logo {
    width: 1.18rem !important;
    height: 1.18rem !important;
    flex: 0 0 1.18rem !important;
    margin: 0 !important;
}
html[data-theme] body.light-theme.ai-page .ai-project-model-name {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Client logos: horizontal pointer/touch drag, no native image drag, clear grab affordance. */
.reel-showcase .reel-viewport {
    cursor: grab;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-inline: contain;
    -webkit-user-select: none;
    user-select: none;
}
.reel-showcase .reel-viewport.is-dragging { cursor: grabbing !important; }
.reel-showcase :is(.reel-track, .reel-card, .reel-picture) {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
.client-logos.has-js-marquee {
    cursor: grab;
    touch-action: pan-y pinch-zoom !important;
    -webkit-user-select: none;
    user-select: none;
}
.client-logos.has-js-marquee.is-dragging { cursor: grabbing !important; }
.client-logos.has-js-marquee .client-logo,
.client-logos.has-js-marquee .client-logo img {
    -webkit-user-drag: none;
    user-drag: none;
}
.client-logos.has-js-marquee.is-dragging .client-logo { pointer-events: none; }

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badges {
        gap: 0.36rem !important;
        padding-top: 0.65rem !important;
        padding-bottom: 0.7rem !important;
    }
    html[data-theme] body.light-theme #main #showreel #ai-reels .ai-grid .video-card.has-models .model-badge {
        min-height: 1.86rem !important;
        padding: 0.31rem 0.48rem !important;
        font-size: 0.66rem !important;
    }
    html[data-theme] body.light-theme.ai-page .ai-project-models {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* Compact location note below the contact card. */
.rp-footer-brand::after {
    display: block;
    margin-top: 18px;
    color: var(--theme-ink, #191c20);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
}

.rp-footer-contact::after {
    display: none;
    content: none;
}

html[lang="pl"] .rp-footer-brand::after { content: "Częstochowa, Polska"; }
html[lang="en"] .rp-footer-brand::after { content: "Based in Częstochowa, Poland"; }
html[lang="de"] .rp-footer-brand::after { content: "Standort: Częstochowa, Polen"; }
html[lang="fr"] .rp-footer-brand::after { content: "Basé à Częstochowa, Pologne"; }
html[lang="cs"] .rp-footer-brand::after { content: "Působím v Čenstochové, Polsko"; }
html[lang="uk"] .rp-footer-brand::after, html[lang="ua"] .rp-footer-brand::after { content: "Працюю в Ченстохові, Польща"; }

/* One editorial heading for corporate films, interviews and music videos. */
body.light-theme #long-form .category-top {
    display: flex;
    justify-content: center;
    text-align: center;
    border-bottom: 0 !important;
}

body.light-theme #long-form .category-top > div {
    width: 100%;
}

body.light-theme #long-form .section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 52rem;
    margin: 0 auto;
    padding: .58rem .9rem;
    background: color-mix(in srgb, var(--theme-accent-soft, #edf2fb) 76%, transparent);
    color: var(--theme-accent, #285cc4);
    font-size: clamp(.92rem, 1.35vw, 1.18rem);
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: .08em;
    text-align: center;
    text-wrap: balance;
}

/* Music videos continue the same collection without a second visual heading. */
body.light-theme #music-videos {
    padding-top: 0;
}

body.light-theme #music-videos .category-top {
    display: none;
}

body.light-theme #long-form + #music-videos {
    margin-top: -3.8rem;
}

body.light-theme #longGrid .video-card.has-project-meta,
body.light-theme #longGrid .external-card.has-project-meta {
    margin-bottom: 8.4rem !important;
}

/* The AI chapter already ends with its own guide bridge. Do not leave a
   second empty grid band before the classic montage chapter begins. */
html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > .ai-zone + #long-form {
    margin-top: -4.8rem !important;
}

@media (max-width: 680px) {
    body.light-theme #long-form .section-kicker {
        font-size: .9rem;
        letter-spacing: .055em;
    }

    body.light-theme #long-form + #music-videos {
        margin-top: -3.2rem;
    }

    body.light-theme #longGrid .video-card.has-project-meta,
    body.light-theme #longGrid .external-card.has-project-meta {
        margin-bottom: 11rem !important;
    }
}

/* Compact bridge from the homepage tool directory to the long-form AI guide. */
body.light-theme #ai-model-directory .ai-guide-note {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(280px, 1.14fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-top: clamp(3.5rem, 6vw, 6rem);
    padding-top: clamp(1.5rem, 2.8vw, 2.25rem);
    border-top: 1px solid var(--ai-line, #d4deea);
}

body.light-theme #ai-model-directory .ai-guide-note-kicker {
    margin: 0 0 .8rem;
    color: var(--ai-cyan, #285cc4);
    font: 650 .66rem/1.2 ui-monospace, Consolas, monospace;
    letter-spacing: .14em;
}

body.light-theme #ai-model-directory .ai-guide-note h3 {
    max-width: 17ch;
    margin: 0;
    color: var(--ai-ink, #18283b);
    font-size: clamp(1.7rem, 2.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.045em;
}

body.light-theme #ai-model-directory .ai-guide-note-copy p {
    max-width: 57ch;
    margin: 0;
    color: var(--ai-muted, #63758b);
    font-size: clamp(.94rem, 1.15vw, 1.05rem);
    line-height: 1.68;
}

body.light-theme #ai-model-directory .ai-guide-note-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1.35rem;
    padding-bottom: .24rem;
    border-bottom: 1px solid currentColor;
    color: var(--ai-ink, #18283b);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
}

body.light-theme #ai-model-directory .ai-guide-note-link::after {
    content: "→";
    color: var(--ai-cyan, #285cc4);
}

body.light-theme #ai-model-directory .ai-guide-note-link:hover {
    color: var(--ai-cyan, #285cc4);
}

body.light-theme #ai-model-directory .ai-guide-note-link:focus-visible {
    outline: 2px solid var(--ai-cyan, #285cc4);
    outline-offset: 5px;
}

@media (max-width: 760px) {
    body.light-theme #ai-model-directory .ai-guide-note {
        grid-template-columns: 1fr;
        gap: 1.35rem;
        margin-top: 3rem;
    }

    body.light-theme #ai-model-directory .ai-guide-note h3 {
        max-width: none;
    }
}

/* Reel portfolio: company, title and description sit below the image, never on it. */
#client-reels .video-card.has-reel-meta {
    overflow: visible !important;
    margin-bottom: 9.2rem;
}

#client-reels .reel-project-meta {
    position: absolute;
    top: calc(100% + .78rem);
    right: 0;
    left: 0;
    z-index: 4;
    display: grid;
    gap: .48rem;
    min-height: 7.8rem;
    padding: .78rem .08rem 0;
    border-top: 1px solid var(--theme-line, #d7dde4);
    text-align: left;
}

#client-reels .reel-project-eyebrow {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: .65rem;
    color: var(--theme-muted, #677587);
    font-size: clamp(.49rem, .58vw, .56rem);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#client-reels .reel-project-eyebrow span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#client-reels .reel-project-client {
    color: var(--theme-ink, #202831);
}

#client-reels .reel-project-meta h3 {
    margin: 0;
    color: var(--theme-ink, #202831);
    font-size: clamp(.9rem, 1.08vw, 1.08rem);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.03em;
}

#client-reels .reel-project-meta p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--theme-muted, #677587);
    font-size: clamp(.72rem, .82vw, .82rem);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#client-reels .video-card.has-reel-meta:fullscreen .reel-project-meta,
#client-reels .video-card.has-reel-meta:-webkit-full-screen .reel-project-meta,
#client-reels .video-card.has-reel-meta.is-fullscreen .reel-project-meta {
    display: none !important;
}

@media (max-width: 680px) {
    #client-reels .video-card.has-reel-meta {
        margin-bottom: 11.2rem;
    }

    #client-reels .reel-project-meta {
        gap: .42rem;
        min-height: 9.8rem;
        padding-top: .64rem;
    }

    #client-reels .reel-project-eyebrow {
        display: grid;
        gap: .2rem;
        font-size: .45rem;
        letter-spacing: .075em;
    }

    #client-reels .reel-project-meta h3 {
        font-size: .82rem;
        line-height: 1.32;
    }

    #client-reels .reel-project-meta p {
        font-size: .7rem;
        line-height: 1.5;
        -webkit-line-clamp: 3;
    }
}

/* Secondary client list uses the same restrained micro-heading language as
   the rest of the page rather than another large display heading. */
html[data-theme] body.light-theme #contact #clients-secondary-title {
    margin: 0 !important;
    color: var(--theme-muted, #667587) !important;
    font: 650 clamp(.68rem, .82vw, .8rem)/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

/* Reel descriptions are content, not teasers: show every line and reserve
   enough room before the following row. */
html[data-theme] body.light-theme #client-reels .video-card.has-reel-meta {
    margin-bottom: 10.5rem !important;
}

html[data-theme] body.light-theme #client-reels .reel-project-meta {
    min-height: 0 !important;
}

html[data-theme] body.light-theme #client-reels .reel-project-meta p {
    display: block !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #client-reels .video-card.has-reel-meta {
        margin-bottom: 12.6rem !important;
    }
}

/* A restrained editorial chapter for work made with classic video editing. */
html[data-theme] body.light-theme #main #showreel #long-form .category-top {
    display: block !important;
    margin-bottom: clamp(1.5rem, 2.4vw, 2.35rem) !important;
    padding: clamp(1.5rem, 2.8vw, 2.5rem) 1rem !important;
    border-top: 1px solid var(--theme-line, #dce1e5);
    border-bottom: 1px solid var(--theme-line, #dce1e5);
    background: transparent !important;
    text-align: center;
}

html[data-theme] body.light-theme #main #showreel #long-form .category-top > div {
    display: grid;
    gap: .55rem;
    justify-items: center;
}

html[data-theme] body.light-theme #main #showreel #long-form .section-kicker {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--theme-ink, #1e2c3b) !important;
    font-family: var(--editorial-font, Manrope, sans-serif) !important;
    font-size: clamp(2rem, 3.35vw, 3.35rem) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -.05em !important;
    text-align: center !important;
    text-transform: none !important;
    text-wrap: balance;
}

html[data-theme] body.light-theme #main #showreel #long-form .long-form-formats {
    margin: 0;
    color: var(--theme-muted, #667587);
    font: 650 clamp(.68rem, .84vw, .82rem)/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel #long-form .category-top {
        padding: 1.3rem .65rem !important;
    }

    html[data-theme] body.light-theme #main #showreel #long-form .section-kicker {
        min-height: 0 !important;
        padding: 0 !important;
        font-size: clamp(1.8rem, 9vw, 2.45rem) !important;
        letter-spacing: -.045em !important;
    }

    html[data-theme] body.light-theme #main #showreel #long-form .long-form-formats {
        max-width: 30ch;
        font-size: .64rem;
        letter-spacing: .075em;
    }
}

/* Keep the three quote inputs available without making the contact section
   permanently tall. Native details semantics are retained for accessibility. */
html[data-theme] body.light-theme #contact details.contact-brief {
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden;
}

html[data-theme] body.light-theme #contact .contact-brief-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.75rem;
    padding: 1rem clamp(1.25rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--theme-accent-soft, #edf2fb) 64%, var(--theme-surface, #fff));
    color: var(--theme-ink, #1e2c3b);
    cursor: pointer;
    font-size: clamp(.94rem, 1.2vw, 1.08rem);
    font-weight: 650;
    line-height: 1.35;
    list-style: none;
}

html[data-theme] body.light-theme #contact .contact-brief-toggle::-webkit-details-marker {
    display: none;
}

html[data-theme] body.light-theme #contact .contact-brief-toggle:hover {
    background: color-mix(in srgb, var(--theme-accent-soft, #edf2fb) 84%, var(--theme-surface, #fff));
}

html[data-theme] body.light-theme #contact .contact-brief-toggle:focus-visible {
    outline: 2px solid var(--theme-accent, #285cc4);
    outline-offset: -3px;
}

html[data-theme] body.light-theme #contact .contact-brief-toggle-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border: 1px solid var(--theme-line-strong, #bac6d5);
    color: var(--theme-accent, #285cc4);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 260ms cubic-bezier(.22, .72, .18, 1), background-color 180ms ease;
}

html[data-theme] body.light-theme #contact details.contact-brief[open] .contact-brief-toggle {
    border-bottom: 1px solid var(--theme-line, #dce1e5);
}

html[data-theme] body.light-theme #contact details.contact-brief[open] .contact-brief-toggle-icon {
    transform: rotate(45deg);
    background: var(--theme-surface, #fff);
}

html[data-theme] body.light-theme #contact details.contact-brief:not([open]) > .contact-brief-panel {
    display: none !important;
}

html[data-theme] body.light-theme #contact details.contact-brief[open] > .contact-brief-panel {
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(0, 2.2fr);
}

@media (max-width: 780px) {
    html[data-theme] body.light-theme #contact .contact-brief-toggle {
        min-height: 4.25rem;
        padding: .9rem 1rem;
        font-size: .9rem;
    }

    html[data-theme] body.light-theme #contact details.contact-brief[open] > .contact-brief-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.light-theme #contact .contact-brief-toggle-icon {
        transition: none;
    }
}

/* Hero hierarchy: the brand descriptor is already present in the navigation,
   so the opening can give the actual offer more room and weight. */
.portfolio-intro .intro-kicker {
    display: none !important;
}

@media (min-width: 1001px) {
    .portfolio-intro h1 {
        font-size: clamp(50px, 6.5vw, 94px);
        line-height: 1.02;
        letter-spacing: -.072em;
    }
}

@media (max-width: 1000px) and (min-width: 701px) {
    .portfolio-intro h1 {
        font-size: clamp(46px, 6.4vw, 68px);
        line-height: 1.04;
    }
}

/* Keep every logo in the AI tools catalog anchored on hover and keyboard focus. */
html[data-theme] body.light-theme .ai-catalog-group .ai-logo,
html[data-theme] body.light-theme .ai-catalog-group .ai-logo-link:is(:hover, :focus-visible, :focus-within) .ai-logo,
html[data-theme] body.light-theme .ai-catalog-group .ai-model-mark:is(:hover, :focus-visible, :focus-within) .ai-logo {
    transform: none !important;
    translate: none !important;
}

/* The AI projects heading already opens the section, so it needs no lower divider. */
html[data-theme] body.light-theme #main #showreel #ai-reels > .category-top.ai-gallery-header {
    border-bottom: 0 !important;
}

/* Classic montage keeps the white editorial surface separate from the AI chapter. */
html[data-theme] body.light-theme #main #showreel #long-form {
    position: relative;
    isolation: isolate;
    padding-block: clamp(1.5rem, 2.8vw, 2.8rem);
}

html[data-theme] body.light-theme #main #showreel #long-form::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background: var(--theme-surface, #fff);
    transform: translateX(-50%);
    pointer-events: none;
}

html[data-theme] body.light-theme #main #showreel #long-form .category-top {
    border-block: 0;
    background: transparent !important;
}

/* Keep the second reel row visible only halfway in the collapsed desktop
   preview. The height is measured from the card itself so vertical cards and
   responsive widths keep the same editorial crop. */
@media (min-width: 861px) {
    html[data-theme] body.light-theme #main #client-reels .rp-motion-reels.desktop-preview:not(.is-open) {
        max-height: var(--rp-reels-preview-height, 24rem) !important;
        overflow: hidden !important;
    }
}

/* The expand label sits inside the fade; keep it as unboxed text. */
html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) + .reels-toggle {
    border: 0 !important;
    background: transparent !important;
}

html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) + .reels-toggle:hover {
    border: 0 !important;
    background: transparent !important;
}

/* The typewriter replaces the heading markup with its own line elements. Keep
   the two lines on the same editorial contrast scale after that replacement. */
html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title .tools-type-line:first-child {
    color: #191c20 !important;
}

html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title .tools-type-line:first-child .tools-type-text {
    color: #191c20 !important;
}

html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title .tools-type-line.is-muted,
html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title .tools-type-line.is-muted .tools-type-text {
    color: #65707a !important;
}

/* Keep the heading palette correct both before the typewriter starts and
   after it has replaced the original text with line elements. */
html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title {
    color: #191c20 !important;
}

html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title > span:first-child,
html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title > span:first-child .tools-type-text {
    color: #191c20 !important;
}

html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title > span:nth-child(2),
html body.light-theme #ai-model-directory .ai-section-heading #ai-tools-title > span:nth-child(2) .tools-type-text {
    color: #65707a !important;
}

/* Keep the secondary client strip aligned with the rest of the page. */
html[data-theme] body.light-theme #contact .clients--secondary .client-collaborations-header h3,
html[data-theme] body.light-theme #contact .clients--secondary #clients-secondary-title {
    font-family: var(--editorial-font, "Manrope", sans-serif) !important;
}

html[data-theme] body.light-theme #contact .clients--secondary > .client-list-toggle {
    display: flex !important;
    margin-inline: auto !important;
    justify-self: center !important;
}

/* Give the portfolio chapter label a more open, wider word shape. */
html[data-theme] body.light-theme #showreel .portfolio-display-title {
    letter-spacing: -.012em !important;
}

/* Open up the large contact headline so its lines do not feel compressed. */
html[data-theme] body.light-theme #contact .contact-card h2#contact-title {
    letter-spacing: -.02em !important;
}

/* Keep classic montage visually separate from the AI chapter in both themes. */
html[data-theme] #main #showreel #long-form {
    position: relative;
    isolation: isolate;
    background: #fff !important;
    color: #202934 !important;
    padding-block: clamp(1.5rem, 2.8vw, 2.8rem);
}

html[data-theme] #main #showreel #long-form::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background: #fff !important;
    transform: translateX(-50%);
    pointer-events: none;
}

html[data-theme] #main #showreel #long-form .category-top {
    border-block: 0 !important;
    background: transparent !important;
}

html[data-theme] #main #showreel #long-form :is(.section-kicker, .long-form-formats, .video-card + *, .external-card + *) {
    color: #202934 !important;
}

/* The action belongs below the preview fade, so it never covers card copy. */
html[data-theme] [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"]) {
    position: relative;
    max-height: var(--rp-catalog-preview-height);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--rp-catalog-fade-height, 88px)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--rp-catalog-fade-height, 88px)), transparent 100%);
}

html[data-theme] [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"]) + .rp-tools-expand-all {
    position: relative !important;
    z-index: 5;
    display: flex !important;
    width: max-content !important;
    margin: 1rem auto 0 !important;
    padding: .35rem 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-accent, currentColor) !important;
}

/* The tool tabs are category navigation, not boxed controls. The separate
   action below the preview describes its global scope explicitly. */
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.15rem, 2.3vw, 2.25rem);
    border-bottom: 1px solid var(--theme-line, #dce1e5);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button {
    position: relative;
    min-height: 46px;
    padding: .65rem 0 .8rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--theme-muted, #65707a) !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--theme-accent, #285cc4);
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.2, .72, .2, 1);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    color: var(--theme-ink, #191c20) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"]::after {
    opacity: 1;
    transform: scaleX(1);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover:not([aria-pressed="true"]) {
    color: var(--theme-ink, #191c20) !important;
}

/* A stronger, longer workshop fade ends fully in the page background. It is
   separate from the gentler reel fade below. */
html[data-theme] body.light-theme #main [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"]) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

html[data-theme] body.light-theme #main [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"])::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: min(100%, var(--rp-catalog-fade-height, 180px));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 0%, transparent) 0%,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 34%, transparent) 30%,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 82%, transparent) 67%,
        var(--theme-bg, #fafaf9) 100%);
    pointer-events: none;
}

html[data-theme] body.light-theme #main [data-ai-catalog="full"] + .rp-tools-expand-all {
    letter-spacing: .015em;
    text-decoration: none;
}

html[data-theme] body.light-theme #main [data-ai-catalog="full"] + .rp-tools-expand-all:hover {
    color: var(--theme-ink, #191c20) !important;
}

/* Social-reel preview: a longer but softer fade keeps more of the second row
   legible before it dissolves into the chapter background. */
html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open)::after {
    height: min(100%, clamp(16rem, 24vw, 23rem)) !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 0%, transparent) 0%,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 7%, transparent) 27%,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 30%, transparent) 56%,
        color-mix(in srgb, var(--theme-bg, #fafaf9) 72%, transparent) 82%,
        var(--theme-bg, #fafaf9) 100%) !important;
}

@media (min-width: 1500px) {
    html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) .video-card:nth-child(4) {
        display: block !important;
    }

    html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid .video-card {
        grid-column: auto !important;
    }
}

/* Responsive reel density: two cards on narrower screens, three on desktop,
   and four in the wider portfolio view. The collapsed preview shows exactly
   one complete row before the expand action. */
html[data-theme] body.light-theme #main #client-reels .work-grid.reels-featured-grid,
html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-theme] body.light-theme #main #client-reels .work-grid.reels-featured-grid .video-card,
html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid .video-card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

@media (min-width: 861px) {
    html[data-theme] body.light-theme #main #client-reels .work-grid.reels-featured-grid,
    html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.light-theme #main #client-reels .rp-motion-reels.desktop-preview:not(.is-open) {
        max-height: none !important;
        overflow: visible !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) .video-card:nth-child(n + 4) {
        display: none !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open)::after {
        display: none !important;
    }
}

@media (min-width: 1500px) {
    html[data-theme] body.light-theme #main #client-reels .work-grid.reels-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) .video-card:nth-child(n + 4) {
        display: block !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) .video-card:nth-child(n + 5) {
        display: none !important;
    }
}

/* The tools rail must keep its measured height even while the first carousel
   frame is being positioned. This prevents a blank pale panel during startup
   or after a theme change. */
html[data-theme] body.light-theme #main #ai-model-directory [data-ai-continuous-carousel="true"],
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport {
    min-height: clamp(430px, 38vw, 540px) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-track,
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-loop,
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Theme ownership for the contact finale. editorial-light.css contains an
   older transparent-card rule with equal specificity; these final selectors
   keep the section and its foregrounds in the same theme. */
html[data-theme] body.light-theme #contact {
    background: var(--theme-bg) !important;
    border-top-color: var(--theme-line) !important;
}

html[data-theme="light"] body.light-theme #contact .contact-card,
html[data-theme="dark"] body.light-theme #contact .contact-card {
    background: #19222d !important;
    color: #f7f9fc !important;
}

html[data-theme="dark"] body.light-theme #contact .contact-card {
    background: #172130 !important;
}

html[data-theme] body.light-theme #contact .contact-card h2,
html[data-theme] body.light-theme #contact .contact-card h2 span,
html[data-theme] body.light-theme #contact .contact-card-actions strong,
html[data-theme] body.light-theme #contact .contact-vcard-copy strong {
    color: #f7f9fc !important;
}

html[data-theme] body.light-theme #contact .contact-card-copy > p:last-child,
html[data-theme] body.light-theme #contact .contact-card-actions-label,
html[data-theme] body.light-theme #contact .contact-action span,
html[data-theme] body.light-theme #contact .contact-vcard-copy small {
    color: #bdc7d3 !important;
}

@media (max-width: 700px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
        gap: 0 1.15rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters::-webkit-scrollbar {
        display: none;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button {
        flex: 0 0 auto;
    }
}

/* Final cascade: these are intentionally last so the review decisions win
   over the earlier experimental carousel rules above. */
html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form { margin-top: -4.8rem !important; }

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    min-height: 2.65rem !important;
    padding: .58rem .9rem !important;
    border: 1px solid var(--theme-line, #cbd5e1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-muted, #657487) !important;
    transform: none !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    border-color: var(--theme-ink, #26384e) !important;
    color: var(--theme-ink, #26384e) !important;
    font-weight: 650 !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button::after { display: none !important; }

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link {
    display: inline-flex !important;
    align-items: center;
    gap: .85rem;
    min-height: 3rem;
    padding: .78rem 1rem !important;
    border: 1px solid #1d2a39 !important;
    border-radius: 0 !important;
    background: #1d2a39 !important;
    color: #fff !important;
    text-decoration: none;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link::after { content: "↗"; color: #b9c9de !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:focus-visible {
    border-color: #285cc4 !important;
    background: #285cc4 !important;
    color: #fff !important;
    transform: translateY(-2px);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group {
    grid-template-columns: clamp(170px, 16vw, 205px) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 2.2vw, 2.5rem) !important;
    padding-block: clamp(1.8rem, 2.6vw, 2.5rem) !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.3rem, 1.8vw, 2rem) clamp(1rem, 1.4vw, 1.5rem) !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-entry .ai-logo {
    width: clamp(3rem, 3.6vw, 3.75rem) !important;
    height: clamp(3rem, 3.6vw, 3.75rem) !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-use { font-size: clamp(.61rem, .66vw, .72rem) !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body h4 { font-size: clamp(.96rem, 1.08vw, 1.16rem) !important; line-height: 1.12 !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body p { font-size: clamp(.73rem, .79vw, .86rem) !important; line-height: 1.52 !important; }

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row { column-gap: clamp(28px, 2.8vw, 48px) !important; }
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
    flex-basis: clamp(166px, 13vw, 190px) !important;
    width: clamp(166px, 13vw, 190px) !important;
    min-width: clamp(166px, 13vw, 190px) !important;
    min-height: 122px !important;
    padding: 1.15rem .55rem .55rem !important;
    gap: .5rem !important;
}
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
    width: min(128px, 88%) !important;
    max-width: 88% !important;
    height: 44px !important;
    transform: translateY(6px) !important;
}
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo-name { font-size: .53rem !important; line-height: 1.22 !important; }
html[data-theme] body.light-theme #clients .rp-scroll-cue > .rp-scroll-cue-mark { color: #b8c0c9 !important; }

html[data-theme] body.light-theme #showreel :is(.video-card, .video-media-frame, .video-media-frame video, .hover-preview-video, .ai-project, .ai-project-player, .ai-project-player video) {
    border-radius: 14px !important;
    overflow: hidden !important;
}
html[data-theme] body.light-theme #showreel :is(.reels-toggle, .ai-project-carousel-arrow, .ai-project-play) { border-radius: 10px !important; }

@media (max-width: 900px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form { margin-top: -3rem !important; }
    html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group { grid-template-columns: 1fr !important; }
    html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list { grid-template-columns: 1fr !important; }
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row { column-gap: 18px !important; }
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
        flex-basis: 144px !important; width: 144px !important; min-width: 144px !important; min-height: 112px !important;
    }
}

/* Final polish pass from the review: keep the guide connected to the next
   chapter, make controls angular, and keep the catalogue readable at normal
   monitor sizes. */
html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form {
    margin-top: -4.8rem !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
    gap: .35rem !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--theme-line, #d8e0e9) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    min-height: 2.65rem !important;
    padding: .58rem .9rem !important;
    border: 1px solid var(--theme-line, #cbd5e1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-muted, #657487) !important;
    transform: none !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    border-color: var(--theme-ink, #26384e) !important;
    color: var(--theme-ink, #26384e) !important;
    font-weight: 650 !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button::after {
    display: none !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link {
    display: inline-flex !important;
    align-items: center;
    gap: .85rem;
    min-height: 3rem;
    margin-top: 1.35rem;
    padding: .78rem 1rem !important;
    border: 1px solid #1d2a39 !important;
    border-radius: 0 !important;
    background: #1d2a39 !important;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link::after {
    color: #b9c9de !important;
    content: "↗";
    font-size: 1.05rem;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:focus-visible {
    border-color: #285cc4 !important;
    background: #285cc4 !important;
    color: #fff !important;
    transform: translateY(-2px);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group {
    grid-template-columns: clamp(170px, 16vw, 205px) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 2.2vw, 2.5rem) !important;
    padding-block: clamp(1.8rem, 2.6vw, 2.5rem) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.3rem, 1.8vw, 2rem) clamp(1rem, 1.4vw, 1.5rem) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-entry .ai-logo {
    width: clamp(3rem, 3.6vw, 3.75rem) !important;
    height: clamp(3rem, 3.6vw, 3.75rem) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-use {
    font-size: clamp(.61rem, .66vw, .72rem) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body h4 {
    font-size: clamp(.96rem, 1.08vw, 1.16rem) !important;
    line-height: 1.12 !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body p {
    font-size: clamp(.73rem, .79vw, .86rem) !important;
    line-height: 1.52 !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row {
    column-gap: clamp(28px, 2.8vw, 48px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
    flex-basis: clamp(166px, 13vw, 190px) !important;
    width: clamp(166px, 13vw, 190px) !important;
    min-width: clamp(166px, 13vw, 190px) !important;
    min-height: 122px !important;
    padding: 1.15rem .55rem .55rem !important;
    gap: .5rem !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
    width: min(128px, 88%) !important;
    max-width: 88% !important;
    height: 44px !important;
    transform: translateY(6px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo-name {
    max-width: 15ch;
    font-size: .53rem !important;
    line-height: 1.22 !important;
}

html[data-theme] body.light-theme #clients .rp-scroll-cue > .rp-scroll-cue-mark {
    color: #b8c0c9 !important;
}

/* Reels use the same soft corners as the rest of the visual portfolio. */
html[data-theme] body.light-theme #showreel :is(.video-card, .video-media-frame, .video-media-frame video, .hover-preview-video, .ai-project, .ai-project-player, .ai-project-player video) {
    border-radius: 14px !important;
    overflow: hidden !important;
}

html[data-theme] body.light-theme #showreel :is(.reels-toggle, .ai-project-carousel-arrow, .ai-project-play) {
    border-radius: 10px !important;
}

@media (max-width: 900px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form {
        margin-top: -3rem !important;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row {
        column-gap: 18px !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
        flex-basis: 144px !important;
        width: 144px !important;
        min-width: 144px !important;
        min-height: 112px !important;
    }
}

/* Keep both sides on one line. The paired marks appear together on a long,
   quiet cycle instead of competing with the portfolio label. */
.rp-scroll-cue {
    gap: .55rem !important;
}

.rp-scroll-cue-marks {
    display: inline-flex !important;
    width: 2.8rem !important;
    min-width: 2.8rem !important;
    height: 1.35rem !important;
    align-items: center !important;
    gap: .08rem !important;
}

.rp-scroll-cue-marks-right {
    justify-content: flex-end !important;
}

.rp-scroll-cue-mark {
    display: grid !important;
    width: 1.2rem !important;
    height: 1.35rem !important;
    place-items: center !important;
    background: transparent !important;
    color: #b8c0c9 !important;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    animation: rp-scroll-cue-pulse 4.8s ease-in-out infinite !important;
}

.rp-scroll-cue:hover .rp-scroll-cue-mark,
.rp-scroll-cue:focus-visible .rp-scroll-cue-mark {
    transform: translateY(2px);
}

@keyframes rp-scroll-cue-pulse {
    0%, 100% { opacity: .38; transform: translateY(-1px); }
    50% { opacity: 1; transform: translateY(3px); }
}

/* A stale class from an older cached script must never re-enable the broken
   RGB effect. */
html body.light-theme .ai-zone-intro.is-ai-rgb-glitching .ai-zone-heading h2,
html body.light-theme .ai-zone-intro.is-ai-rgb-glitching .ai-zone-heading p,
html body.light-theme .ai-zone-intro.is-ai-rgb-glitching .ai-zone-mark {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .rp-scroll-cue-mark { animation: none !important; }
}

/* vCard redesign: replace the old boxed download tile with two quiet,
   editorial action rails. The contact block keeps the mark; the footer uses
   a compact vCard label so the two placements still feel related without
   looking duplicated. */
html[data-theme] body.light-theme #contact .contact-vcard {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    gap: 14px;
    min-height: 72px;
    margin-top: 24px;
    padding: 12px 0 12px 2px !important;
    border: 0 !important;
    border-top: 1px solid rgba(143, 180, 251, .34) !important;
    border-bottom: 1px solid rgba(143, 180, 251, .34) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme #contact .contact-vcard::before {
    content: none !important;
}

html[data-theme] body.light-theme #contact .contact-vcard-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: none;
}

html[data-theme] body.light-theme #contact .contact-vcard-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(143, 180, 251, .5);
    border-radius: 50%;
    background: transparent;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

html[data-theme] body.light-theme #contact .contact-vcard:hover,
html[data-theme] body.light-theme #contact .contact-vcard:focus-visible {
    transform: none !important;
    background: rgba(255, 255, 255, .045) !important;
    border-top-color: rgba(143, 180, 251, .68) !important;
    border-bottom-color: rgba(143, 180, 251, .68) !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme #contact .contact-vcard:hover .contact-vcard-arrow,
html[data-theme] body.light-theme #contact .contact-vcard:focus-visible .contact-vcard-arrow {
    transform: none;
    border-color: #9dc1ff;
    background: #9dc1ff;
    color: #172536;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 12px;
    min-height: 54px;
    margin-top: 14px;
    padding: 12px 0 12px 48px !important;
    border: 0 !important;
    border-top: 1px solid var(--theme-line, #dce1e5) !important;
    border-bottom: 1px solid var(--theme-line, #dce1e5) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard::before {
    content: "vCard";
    position: absolute;
    left: 0;
    top: 50%;
    display: grid;
    width: 36px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--theme-line-strong, #bfcbd9);
    border-radius: 7px;
    color: var(--theme-accent, #285cc4);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    transform: translateY(-50%);
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard-copy strong {
    color: var(--theme-ink, #191c20);
    font-size: .78rem;
    line-height: 1.25;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard-copy small {
    color: var(--theme-muted, #65707a);
    font-size: .67rem;
    line-height: 1.25;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard-arrow {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--theme-line-strong, #bfcbd9);
    border-radius: 50%;
    background: transparent;
    color: var(--theme-accent, #285cc4);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard:hover,
html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard:focus-visible {
    transform: none !important;
    background: var(--theme-accent-soft, #edf2fb) !important;
    border-top-color: var(--theme-line-strong, #bfcbd9) !important;
    border-bottom-color: var(--theme-line-strong, #bfcbd9) !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard:hover .rp-footer-vcard-arrow,
html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard:focus-visible .rp-footer-vcard-arrow {
    border-color: var(--theme-accent, #285cc4);
    background: var(--theme-accent, #285cc4);
    color: #fff;
}

@media (max-width: 700px) {
    html[data-theme] body.light-theme #contact .contact-vcard {
        grid-template-columns: 42px minmax(0, 1fr) 36px !important;
        gap: 11px;
        min-height: 66px;
        margin-top: 18px;
        padding: 10px 0 10px 2px !important;
    }

    html[data-theme] body.light-theme #contact .contact-vcard-mark {
        width: 38px;
        height: 38px;
    }

    html[data-theme] body.light-theme #contact .contact-vcard-arrow {
        width: 34px;
        height: 34px;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-vcard {
        padding-left: 44px !important;
    }
}

/* Hero typing: a quiet, steady editor-like reveal. */
.portfolio-intro .hero-rotating-text {
    transition: font-size 180ms ease, letter-spacing 180ms ease;
}

.portfolio-intro .hero-type-char {
    display: inline-block;
    white-space: pre;
    will-change: opacity, transform;
}

.portfolio-intro .hero-type-char.is-entering {
    animation: hero-type-char-in 150ms ease-out both;
}

.portfolio-intro .hero-type-char.is-leaving {
    animation: hero-type-char-out 90ms ease-in both;
}

@keyframes hero-type-char-in {
    from {
        opacity: 0;
        transform: translate3d(0, .035em, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-type-char-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -.02em, 0);
    }
}

.portfolio-intro .hero-typing-cursor {
    width: .045em;
    height: .78em;
    margin-left: .14em;
    border-radius: 999px;
    background: currentColor;
    box-shadow: none;
    animation: hero-typing-cursor-blink 1s steps(2, end) infinite;
    transition: opacity 180ms ease;
}

.portfolio-intro .hero-typing-cursor.is-static {
    animation: none;
    opacity: .68;
}

@keyframes hero-typing-cursor-blink {
    0%, 48% { opacity: .82; }
    49%, 100% { opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-intro .hero-rotating-text {
        transition: none;
    }

    .portfolio-intro .hero-type-char.is-entering,
    .portfolio-intro .hero-type-char.is-leaving {
        animation: none;
    }

    .portfolio-intro .hero-typing-cursor {
        animation: none;
        opacity: .68;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button::after {
        transition: none;
    }
}

/* AI subcategories: use one quiet rule to separate the chapters without
   turning the workshop into another boxed panel. */
html[data-theme] body.light-theme #main .ai-zone > #ai-voiceover,
html[data-theme] body.light-theme #main .ai-zone > #ai-model-directory {
    border-top: 1px solid var(--theme-line, #dce1e5) !important;
}

html[data-theme] body.light-theme #main .ai-zone > #ai-voiceover {
    margin-top: clamp(2.75rem, 5vw, 5rem) !important;
    padding-top: clamp(1.75rem, 3vw, 2.75rem) !important;
}

html[data-theme] body.light-theme #main .ai-zone > #ai-model-directory {
    margin-top: clamp(2.75rem, 5vw, 5rem) !important;
    padding-top: clamp(2rem, 3.4vw, 3.25rem) !important;
}

/* Featured client marquee: bring the marks closer together and reveal the
   existing company names as a restrained caption beneath each logo. */
html[data-theme] body.light-theme #clients.clients--featured .client-logos .client-logo-row .client-logo {
    flex: 0 0 clamp(142px, 12.5vw, 158px) !important;
    width: clamp(142px, 12.5vw, 158px) !important;
    min-width: clamp(142px, 12.5vw, 158px) !important;
    max-width: clamp(142px, 12.5vw, 158px) !important;
    min-height: 88px !important;
    gap: .15rem !important;
    padding: .2rem .15rem .35rem !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logos .client-logo-row .client-logo--compact {
    flex-basis: clamp(122px, 10.8vw, 138px) !important;
    width: clamp(122px, 10.8vw, 138px) !important;
    min-width: clamp(122px, 10.8vw, 138px) !important;
    max-width: clamp(122px, 10.8vw, 138px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logos .client-logo-name {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: .1rem !important;
    overflow: hidden !important;
    color: #7b8795 !important;
    font-family: var(--font-text, sans-serif) !important;
    font-size: .56rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #clients.clients--featured .client-logos .client-logo-row .client-logo {
        flex-basis: 136px !important;
        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logos .client-logo-row .client-logo--compact {
        flex-basis: 116px !important;
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }
}

/* Night theme: the classic montage surface must follow the page palette too.
   The earlier editorial surface is intentionally retained for light mode. */
html[data-theme="dark"] body.light-theme #main #showreel #long-form {
    background: var(--theme-bg, #101319) !important;
    color: var(--theme-ink, #edf1f6) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form::before {
    background: var(--theme-bg, #101319) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form .category-top {
    background: transparent !important;
    border-color: var(--theme-line, #2e3847) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form :is(
    .section-kicker,
    .long-form-formats,
    .video-card + *,
    .external-card + *
) {
    color: var(--theme-ink, #edf1f6) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form :is(.video-card, .external-card) {
    background: transparent !important;
    border-color: var(--theme-line, #2e3847) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-meta {
    border-color: var(--theme-line, #2e3847) !important;
    background: transparent !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-meta h3,
html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-credits strong {
    color: var(--theme-ink, #edf1f6) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-meta p,
html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-credits span {
    color: var(--theme-muted, #b0b9c7) !important;
}

html[data-theme="dark"] body.light-theme #main #showreel #long-form .music-project-code {
    color: var(--theme-accent, #91b5fa) !important;
}

/* Featured company rail: make the marks a touch more prominent without
   widening the cards or bringing back the oversized gaps between them. */
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img {
    scale: 1.18;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
    scale: 1.14;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img {
        scale: 1.14;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
        scale: 1.11;
    }
}

/* Contact download actions become direct call buttons on small screens. The
   plain phone rows stay visible on desktop, while mobile gets one decisive
   action that can be tapped immediately. */
html[data-theme] body.light-theme #contact .contact-phone-cta,
html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta {
    display: none !important;
}

@media (max-width: 700px) {
    html[data-theme] body.light-theme #contact .contact-action[href^="tel:"],
    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone {
        display: none !important;
    }

    html[data-theme] body.light-theme #contact .contact-phone-cta,
    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta {
        display: grid !important;
        animation: rp-mobile-phone-vibrate 5.8s linear infinite;
    }

    html[data-theme] body.light-theme #contact .contact-phone-cta-mark,
    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta-mark {
        display: grid !important;
        place-items: center;
        font-family: var(--font-text, sans-serif);
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1;
    }

    html[data-theme] body.light-theme #contact .contact-phone-cta-mark {
        color: #9dc1ff;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta {
        grid-template-columns: 42px minmax(0, 1fr) 28px !important;
        gap: 10px;
        min-height: 58px;
        margin-top: 10px;
        padding: 8px 10px !important;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta-mark {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--theme-accent-soft, #edf2fb);
        color: var(--theme-accent, #285cc4);
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta .rp-footer-vcard-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta .rp-footer-vcard-copy strong {
        color: var(--theme-ink, #191c20);
        font-size: .82rem;
        line-height: 1.2;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta .rp-footer-vcard-copy small {
        color: var(--theme-muted, #65707a);
        font-size: .72rem;
        line-height: 1.25;
    }

    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta .rp-footer-vcard-arrow {
        display: grid;
        place-items: center;
        color: var(--theme-accent, #285cc4);
        font-size: 1rem;
    }
}

/* A phone-like micro-vibration: a few rapid horizontal pulses, always back
   at rest and never tilted or lifted. The long quiet interval keeps it from
   reading as a continuous shake. */
@keyframes rp-mobile-phone-vibrate {
    0%, 94.8%, 100% { transform: translate3d(0, 0, 0); }
    94.9% { transform: translate3d(-.7px, 0, 0); }
    95% { transform: translate3d(.7px, 0, 0); }
    95.1% { transform: translate3d(-.6px, 0, 0); }
    95.2% { transform: translate3d(.5px, 0, 0); }
    95.3% { transform: translate3d(-.3px, 0, 0); }
    95.4% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.light-theme #contact .contact-phone-cta,
    html[data-theme] body.light-theme .rp-footer-contact .rp-footer-phone-cta {
        animation: none !important;
    }
}

/* The workshop preview should dissolve into the AI surface itself, not into
   the page's warmer white background. Use explicit colors for reliable
   rendering in browsers that do not interpolate color-mix in gradients. */
html[data-theme] body.light-theme #main #ai-model-directory {
    --rp-workshop-ground: #f0f3f7;
}

html[data-theme] body.light-theme #main #ai-model-directory [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"])::after {
    background: linear-gradient(180deg,
        rgba(240, 243, 247, 0) 0%,
        rgba(240, 243, 247, .08) 28%,
        rgba(240, 243, 247, .78) 74%,
        var(--rp-workshop-ground) 100%) !important;
}

html[data-theme="dark"] body.light-theme #main #ai-model-directory {
    --rp-workshop-ground: #121c2a;
}

html[data-theme="dark"] body.light-theme #main #ai-model-directory [data-ai-catalog="full"].rp-catalog-compact.rp-catalog-preview-clipped:has(+ .rp-tools-expand-all[aria-expanded="false"])::after {
    background: linear-gradient(180deg,
        rgba(18, 28, 42, 0) 0%,
        rgba(18, 28, 42, .08) 28%,
        rgba(18, 28, 42, .8) 74%,
        var(--rp-workshop-ground) 100%) !important;
}

/* Turn the guide link into a compact, tactile CTA while keeping the section
   editorial rather than turning it into a large promotional card. */
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 176px;
    min-height: 48px;
    margin-top: 1.45rem;
    padding: .72rem .95rem .72rem 1.05rem;
    border: 1px solid #c5d4e6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 57, 94, .08);
    color: var(--ai-ink, #18283b);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.2;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link::after {
    content: "↗";
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    background: var(--ai-cyan, #285cc4);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:hover {
    border-color: var(--ai-cyan, #285cc4);
    background: #f8fbff;
    box-shadow: 0 11px 28px rgba(28, 57, 94, .13);
    color: var(--ai-ink, #18283b);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link {
        width: max-content;
        max-width: 100%;
    }
}

/* Keep the opening film rail compact: project context appears inside the
   preview only when the visitor pauses over a card. The mobile rail keeps its
   captions in the normal flow because touch screens have no reliable hover. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card {
        position: relative;
        display: block !important;
        height: auto !important;
        overflow: visible;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-picture {
        position: relative;
        z-index: 0;
        overflow: hidden;
        border-radius: 10px !important;
        box-shadow: 0 1px 0 rgba(24, 32, 40, .08);
        transition: transform 220ms cubic-bezier(.2, .72, .2, 1), box-shadow 220ms ease;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-picture::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: clamp(120px, 29%, 168px);
        z-index: 1;
        background: linear-gradient(
            180deg,
            rgba(8, 14, 22, 0) 0%,
            rgba(8, 14, 22, 0) 24%,
            rgba(8, 14, 22, .1) 48%,
            rgba(8, 14, 22, .5) 100%
        );
        opacity: 0;
        pointer-events: none;
        -webkit-backdrop-filter: blur(12px) saturate(1.14);
        backdrop-filter: blur(12px) saturate(1.14);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 28%, #000 58%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 28%, #000 58%, #000 100%);
        transition: opacity 220ms ease;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-caption {
        position: absolute !important;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: block !important;
        box-sizing: border-box;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(14px, 1.6vw, 21px) clamp(13px, 1.5vw, 19px) clamp(15px, 1.75vw, 22px) !important;
        overflow: visible;
        visibility: hidden;
        border-radius: 0 0 10px 10px;
        background: transparent;
        color: #fff !important;
        opacity: 0 !important;
        pointer-events: none;
        filter: blur(8px);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: translateY(16px) scale(.985);
        transform-origin: bottom center;
        transition:
            opacity 240ms ease,
            transform 360ms cubic-bezier(.16, .78, .18, 1),
            filter 300ms ease,
            visibility 0s linear 360ms;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-caption > span {
        display: block;
        min-width: 0;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-caption small {
        display: block;
        max-width: 100%;
        margin: 0 0 5px;
        overflow: hidden;
        color: rgba(255, 255, 255, .72) !important;
        font-size: .51rem;
        font-weight: 600;
        letter-spacing: .105em;
        line-height: 1.35;
        text-overflow: ellipsis;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .38);
        white-space: nowrap;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-caption strong {
        display: block;
        color: #fff !important;
        font-size: clamp(.82rem, .9vw, .98rem);
        font-weight: 600;
        letter-spacing: -.018em;
        line-height: 1.18;
        text-shadow: 0 1px 12px rgba(0, 0, 0, .42);
        text-wrap: balance;
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:hover .reel-picture,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-visible .reel-picture,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-within .reel-picture {
        box-shadow: 0 12px 24px rgba(18, 31, 45, .14);
        transform: scale(1.008);
    }

    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:hover .reel-picture::after,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-visible .reel-picture::after,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-within .reel-picture::after,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:hover .reel-caption,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-visible .reel-caption,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-card:focus-within .reel-caption {
        visibility: visible;
        opacity: 1 !important;
        filter: blur(0);
        transform: translateY(0);
        transition-delay: 0s;
    }
}

/* Featured businesses: give every mark a real breathing zone. The rail is
   deliberately wider and the logos are larger, while the second row remains
   untouched. */
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row {
    column-gap: clamp(18px, 1.8vw, 34px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo {
    flex: 0 0 clamp(184px, 15vw, 226px) !important;
    width: clamp(184px, 15vw, 226px) !important;
    min-width: clamp(184px, 15vw, 226px) !important;
    max-width: clamp(184px, 15vw, 226px) !important;
    min-height: 116px !important;
    padding: .75rem clamp(1rem, 1.35vw, 1.55rem) .65rem !important;
    gap: .55rem !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
    flex-basis: clamp(166px, 13.5vw, 202px) !important;
    width: clamp(166px, 13.5vw, 202px) !important;
    min-width: clamp(166px, 13.5vw, 202px) !important;
    max-width: clamp(166px, 13.5vw, 202px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img {
    height: clamp(54px, 6.25vh, 84px) !important;
    max-width: 92% !important;
    scale: 1.08;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
    height: clamp(50px, 5.8vh, 78px) !important;
    max-width: 90% !important;
    scale: 1.05;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo-name {
    max-width: 100% !important;
    font-size: .56rem !important;
}

/* Normalize the visible rhythm of the featured company rail. Every logo gets
   the same card width and the same optical logo slot; compact source files no
   longer create a second, narrower spacing system. */
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row {
    column-gap: clamp(10px, 1vw, 18px) !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
    flex: 0 0 clamp(164px, 13vw, 190px) !important;
    width: clamp(164px, 13vw, 190px) !important;
    min-width: clamp(164px, 13vw, 190px) !important;
    max-width: clamp(164px, 13vw, 190px) !important;
    min-height: 108px !important;
    padding: .65rem .55rem .55rem !important;
    gap: .38rem !important;
}

html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
    width: min(148px, 100%) !important;
    height: 54px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    scale: 1 !important;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row {
        column-gap: 12px !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo {
        flex-basis: 144px !important;
        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;
        min-height: 92px !important;
        padding-inline: .5rem !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact {
        flex-basis: 144px !important;
        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;
    }

    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img,
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img {
        width: min(132px, 100%) !important;
        height: 46px !important;
    }
}

/* AI workshop: one continuous rail instead of expandable category blocks. */
html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-toolbar {
    margin: clamp(2rem, 4vw, 3.75rem) 0 0 !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
    display: flex !important;
    width: min(100%, 760px);
    align-items: center;
    gap: clamp(.2rem, .7vw, .65rem);
    margin: 0 !important;
    padding: 0 0 .55rem !important;
    overflow-x: auto;
    border-bottom: 1px solid var(--theme-line, #d8e0e9);
    scrollbar-width: none;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters::-webkit-scrollbar {
    display: none;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button {
    position: relative;
    flex: 0 0 auto;
    min-height: 2.7rem;
    padding: .55rem .85rem !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--theme-muted, #657487) !important;
    font-family: var(--font-text, sans-serif);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible {
    border-color: var(--theme-line, #c8d3e1) !important;
    background: color-mix(in srgb, var(--theme-accent, #285cc4) 7%, transparent) !important;
    color: var(--theme-ink, #192638) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    border-color: var(--theme-accent, #285cc4) !important;
    background: var(--theme-accent-soft, #e8f0fc) !important;
    color: var(--theme-accent, #285cc4) !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    right: .72rem;
    bottom: -.62rem;
    left: .72rem;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-accent, #285cc4);
}

html[data-theme] body.light-theme #main #ai-model-directory [data-ai-continuous-carousel="true"] {
    display: block !important;
    width: 100%;
    max-width: none;
    max-height: none !important;
    margin: clamp(1.5rem, 3vw, 2.8rem) 0 0 !important;
    overflow: visible !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--theme-line, #d8e0e9);
    cursor: grab;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport::before,
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(24px, 5vw, 88px);
    pointer-events: none;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport::before {
    left: 0;
    background: linear-gradient(90deg, var(--ai-dynamic-bg, #f0f4fa), transparent);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--ai-dynamic-bg, #f0f4fa), transparent);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-loop {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.7rem, 3vw, 3rem) clamp(1rem, 4vw, 4.5rem) clamp(2rem, 3.6vw, 3.5rem);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card {
    position: relative;
    display: flex;
    flex: 0 0 clamp(250px, 24vw, 360px);
    width: clamp(250px, 24vw, 360px);
    min-height: 360px;
    box-sizing: border-box;
    flex-direction: column;
    padding: clamp(1rem, 1.8vw, 1.65rem) clamp(1rem, 1.8vw, 1.7rem) clamp(1.3rem, 2.1vw, 2rem);
    border-top: 1px solid var(--theme-line, #d8e0e9);
    border-bottom: 1px solid var(--theme-line, #d8e0e9);
    background: color-mix(in srgb, var(--theme-bg, #f0f4fa) 74%, white 26%);
    color: var(--theme-ink, #192638);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-category,
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-index {
    color: var(--theme-accent, #285cc4);
    font-size: .58rem;
    font-weight: 650;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-index {
    color: var(--theme-muted, #718094);
    letter-spacing: .08em;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo-link {
    display: inline-flex;
    width: max-content;
    margin: 0 0 1.3rem;
    color: inherit;
    text-decoration: none;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo {
    display: grid;
    width: 4.35rem;
    height: 4.35rem;
    place-items: center;
    padding: .2rem;
    border-radius: 1rem;
    background: transparent;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card-use {
    margin-bottom: .5rem;
    color: var(--theme-muted, #718094);
    font-size: .73rem;
    line-height: 1.35;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card h3 {
    margin: 0 0 .8rem;
    color: var(--theme-ink, #192638);
    font-family: var(--font-display, var(--font-text, sans-serif));
    font-size: clamp(1.2rem, 1.7vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.05;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card p {
    margin: 0;
    color: var(--theme-muted, #66788e);
    font-size: clamp(.86rem, .98vw, 1rem);
    line-height: 1.58;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo-link:hover .ai-logo,
html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo-link:focus-visible .ai-logo {
    transform: translateY(-2px) scale(1.04);
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo {
    transition: transform 180ms ease;
}

html[data-theme] body.light-theme #main #ai-model-directory .rp-tools-expand-all,
html[data-theme] body.light-theme #main #ai-model-directory .rp-tool-toggle,
html[data-theme] body.light-theme #main #ai-model-directory .rp-catalog-preview-clipped::after {
    display: none !important;
}

@media (max-width: 700px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-loop {
        gap: 1rem;
        padding: 1.35rem 1rem 2rem;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card {
        flex-basis: min(78vw, 300px);
        width: min(78vw, 300px);
        min-height: 330px;
        padding: 1rem;
    }

    html[data-theme] body.light-theme #main #ai-model-directory .ai-carousel-card .ai-logo {
        width: 3.8rem;
        height: 3.8rem;
    }
}

/* Final cascade for the current review. */
html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form { margin-top: -4.8rem !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    min-height: 2.65rem !important;
    padding: .58rem .9rem !important;
    border: 1px solid var(--theme-line, #cbd5e1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-muted, #657487) !important;
    transform: none !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] { border-color: var(--theme-ink, #26384e) !important; color: var(--theme-ink, #26384e) !important; font-weight: 650 !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button::after { display: none !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link {
    display: inline-flex !important; align-items: center; gap: .85rem; min-height: 3rem; padding: .78rem 1rem !important;
    border: 1px solid #1d2a39 !important; border-radius: 0 !important; background: #1d2a39 !important; color: #fff !important; text-decoration: none;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link::after { content: "↗"; color: #b9c9de !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-guide-note-link:focus-visible { border-color: #285cc4 !important; background: #285cc4 !important; color: #fff !important; transform: translateY(-2px); }
html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group { grid-template-columns: clamp(170px, 16vw, 205px) minmax(0, 1fr) !important; gap: clamp(1.5rem, 2.2vw, 2.5rem) !important; padding-block: clamp(1.8rem, 2.6vw, 2.5rem) !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(1.3rem, 1.8vw, 2rem) clamp(1rem, 1.4vw, 1.5rem) !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-entry .ai-logo { width: clamp(3rem, 3.6vw, 3.75rem) !important; height: clamp(3rem, 3.6vw, 3.75rem) !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-use { font-size: clamp(.61rem, .66vw, .72rem) !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body h4 { font-size: clamp(.96rem, 1.08vw, 1.16rem) !important; line-height: 1.12 !important; }
html[data-theme] body.light-theme #main #ai-model-directory .ai-tool-body p { font-size: clamp(.73rem, .79vw, .86rem) !important; line-height: 1.52 !important; }
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row { column-gap: clamp(28px, 2.8vw, 48px) !important; }
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact { flex-basis: clamp(166px, 13vw, 190px) !important; width: clamp(166px, 13vw, 190px) !important; min-width: clamp(166px, 13vw, 190px) !important; min-height: 122px !important; padding: 1.15rem .55rem .55rem !important; gap: .5rem !important; }
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo img,
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact img { width: min(128px, 88%) !important; max-width: 88% !important; height: 44px !important; transform: translateY(6px) !important; }
html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo-name { font-size: .53rem !important; line-height: 1.22 !important; }
html[data-theme] body.light-theme #clients .rp-scroll-cue > .rp-scroll-cue-mark { color: #b8c0c9 !important; }
html[data-theme] body.light-theme #showreel :is(.video-card, .video-media-frame, .video-media-frame video, .hover-preview-video, .ai-project, .ai-project-player, .ai-project-player video) { border-radius: 14px !important; overflow: hidden !important; }
html[data-theme] body.light-theme #showreel :is(.reels-toggle, .ai-project-carousel-arrow, .ai-project-play) { border-radius: 10px !important; }
@media (max-width: 900px) { html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel > .section-inner > .portfolio-stack > #long-form { margin-top: -3rem !important; }
    html[data-theme] body.light-theme #main #ai-model-directory .ai-catalog-group { grid-template-columns: 1fr !important; }
    html[data-theme] body.light-theme #main #ai-model-directory .ai-model-list { grid-template-columns: 1fr !important; }
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row { column-gap: 18px !important; }
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo,
    html[data-theme] body.light-theme #clients.clients--featured .client-logo-row .client-logo--compact { flex-basis: 144px !important; width: 144px !important; min-width: 144px !important; min-height: 112px !important; }
}

/* Reel glass stays over the film during browsing and hover previews. It fades
   only when the visitor starts the full player. */
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    bottom: auto !important;
    left: -2px !important;
    z-index: 8 !important;
    display: grid !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: var(--reel-panel-row-height, calc(8rem + 2px)) !important;
    min-height: var(--reel-panel-row-height, calc(8rem + 2px)) !important;
    max-height: var(--reel-panel-row-height, calc(8rem + 2px)) !important;
    align-content: start !important;
    margin-top: 0 !important;
    padding: calc(.9rem + 2px) calc(1rem + 2px) 1rem !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scaleY(1) !important;
    transform-origin: top center !important;
    filter: blur(0) saturate(1) !important;
    clip-path: inset(0 0 0 0 round 16px 16px 0 0) !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .055) 42%, rgba(255, 255, 255, 0) 72%),
        var(--reel-panel-bg, rgba(255, 255, 255, .46)) !important;
    color: var(--reel-panel-ink, #202831) !important;
    box-shadow: 0 18px 42px rgba(24, 35, 46, .13) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) contrast(1.04) !important;
    backdrop-filter: blur(24px) saturate(1.4) contrast(1.04) !important;
    backface-visibility: hidden !important;
    will-change: opacity, transform, filter, clip-path;
    pointer-events: none !important;
    transition:
        opacity 760ms cubic-bezier(.2, .7, .16, 1) 80ms,
        transform 1040ms cubic-bezier(.16, .82, .14, 1),
        filter 880ms cubic-bezier(.2, .72, .16, 1),
        clip-path 1020ms cubic-bezier(.16, .82, .14, 1),
        visibility 0s linear 0s !important;
}
html[data-theme] body.light-theme #main #client-reels .work-grid.is-measuring-reel-panels .video-card.has-reel-meta .reel-project-meta {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta::after {
    content: "";
    position: absolute;
    inset: -45% -28%;
    z-index: 0;
    background:
        radial-gradient(circle at 24% 48%, rgba(255, 255, 255, .2), transparent 22%),
        radial-gradient(circle at 72% 62%, rgba(255, 255, 255, .13), transparent 25%),
        linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .17) 48%, transparent 66%);
    opacity: .32;
    transform: translate3d(-18%, 0, 0) rotate(4deg);
    transition: opacity 760ms ease, transform 1080ms cubic-bezier(.16, .82, .14, 1);
    pointer-events: none;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta > * {
    position: relative;
    z-index: 1;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta.is-playing .reel-project-meta {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translate3d(0, -108%, 0) scaleY(.9) !important;
    filter: blur(18px) saturate(1.55) brightness(1.06) !important;
    clip-path: inset(0 0 100% 0 round 16px 16px 0 0) !important;
    transition-delay: 0s, 0s, 0s, 0s, 1040ms !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta.is-playing .reel-project-meta::after {
    opacity: 0;
    transform: translate3d(32%, -18%, 0) rotate(9deg) scale(1.12);
}
html[data-theme] body.light-theme #main #client-reels .reel-project-meta .reel-project-eyebrow {
    color: var(--reel-panel-muted, #677587) !important;
}
html[data-theme] body.light-theme #main #client-reels .reel-project-meta .reel-project-client,
html[data-theme] body.light-theme #main #client-reels .reel-project-meta h3 {
    color: var(--reel-panel-ink, #202831) !important;
}
html[data-theme] body.light-theme #main #client-reels .reel-project-meta p {
    color: var(--reel-panel-muted, #677587) !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}
@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta {
        height: var(--reel-panel-row-height, calc(10.5rem + 2px)) !important;
        min-height: var(--reel-panel-row-height, calc(10.5rem + 2px)) !important;
        max-height: var(--reel-panel-row-height, calc(10.5rem + 2px)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta,
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta::after,
    html[data-theme] body.light-theme .portfolio-intro [data-reel-showcase="portfolio"] .reel-caption {
        transition-duration: .01ms !important;
    }
}

/* Only the silent moving preview of the Szwagro-Bud film is enlarged to
   remove its baked-in letterbox bars. The poster and full player stay 16:9. */
html[data-theme] body.light-theme #main #longGrid .video-card.has-preview-crop .hover-preview-video {
    object-fit: cover !important;
    transform: scale(var(--preview-zoom, 1)) !important;
    transform-origin: center center !important;
    transition: opacity .24s ease, transform .3s ease !important;
}
html[data-theme] body.light-theme #main #longGrid .video-card.has-preview-crop .work-video {
    transform: none !important;
}

/* Project descriptions remain readable on the light editorial surface. */
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-meta {
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--theme-ink, #202831) !important;
}
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-meta h3,
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-credits strong {
    color: var(--theme-ink, #202831) !important;
}
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-meta p,
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-credits span {
    color: var(--theme-muted, #677587) !important;
}
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-code,
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-details {
    color: var(--theme-accent, #285cc4) !important;
}
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-details {
    margin: 0 0 .4rem !important;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
    font-size: .56rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-night { --reel-panel-bg: rgba(18, 28, 38, .34); --reel-panel-ink: #fff; --reel-panel-muted: rgba(255, 255, 255, .86); }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-sky { --reel-panel-bg: rgba(221, 239, 249, .36); --reel-panel-ink: #142d45; --reel-panel-muted: #38546d; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-graphite { --reel-panel-bg: rgba(35, 43, 51, .34); --reel-panel-ink: #fff; --reel-panel-muted: rgba(255, 255, 255, .86); }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-cream { --reel-panel-bg: rgba(250, 243, 228, .38); --reel-panel-ink: #34251b; --reel-panel-muted: #5e4938; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-sage { --reel-panel-bg: rgba(225, 237, 226, .36); --reel-panel-ink: #172d22; --reel-panel-muted: #435e4d; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-moss { --reel-panel-bg: rgba(231, 239, 223, .36); --reel-panel-ink: #283220; --reel-panel-muted: #506044; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-warm { --reel-panel-bg: rgba(246, 234, 214, .37); --reel-panel-ink: #342319; --reel-panel-muted: #5d4835; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-lilac { --reel-panel-bg: rgba(237, 232, 247, .36); --reel-panel-ink: #211f37; --reel-panel-muted: #534d6c; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-sand { --reel-panel-bg: rgba(239, 232, 215, .37); --reel-panel-ink: #2e271d; --reel-panel-muted: #5d5244; }
html[data-theme] body.light-theme #main #client-reels .video-card.reel-panel-navy { --reel-panel-bg: rgba(23, 38, 52, .34); --reel-panel-ink: #fff; --reel-panel-muted: rgba(255, 255, 255, .86); }
html[data-theme] body.light-theme #main #client-reels .reels-toggle,
html[data-theme] body.light-theme #main #client-reels .reels-toggle:hover,
html[data-theme] body.light-theme #main #client-reels .reels-toggle:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-ink, #293441) !important;
}
html[data-theme] body.light-theme #main #client-reels .reels-toggle::after { color: currentColor !important; }

/* AI tool filters: slightly wider controls with a quiet auto-advance bar. The
   content transition is handled by ai-catalog.js and pauses while the user
   points at or focuses the controls. */
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
    gap: .45rem !important;
    align-items: stretch !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    flex: 1 1 0 !important;
    min-width: clamp(8.5rem, 11vw, 10rem) !important;
    min-height: 3rem !important;
    padding: .72rem 1.1rem .84rem !important;
    overflow: hidden;
    white-space: nowrap;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[data-ai-auto-active="true"]::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--theme-accent, #285cc4);
    transform: scaleX(0);
    transform-origin: left center;
    animation: rp-ai-filter-progress 7200ms linear forwards;
    pointer-events: none;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters[data-ai-rotation-paused] button[data-ai-auto-active="true"]::before {
    animation-play-state: paused;
}
@keyframes rp-ai-filter-progress {
    to { transform: scaleX(1); }
}
@media (max-width: 700px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
        gap: .45rem !important;
    }
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
        flex: 0 0 auto !important;
        min-width: 8.5rem !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[data-ai-auto-active="true"]::before {
        animation: none;
        transform: scaleX(1);
    }
}

/* AI chapter finishing pass: kept after the older polish layers so they cannot
   restore boxed filters or the thumbnail-overlaid disclosure control. */
html[data-theme] body.light-theme #main #ai-reels .ai-gallery-header {
    align-items: start !important;
}
html[data-theme] body.light-theme #main #ai-reels .ai-gallery-title,
html[data-theme] body.light-theme #main #ai-reels .ai-gallery-meta {
    align-self: start !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    color: var(--theme-ink, #26384e) !important;
}

html[data-theme] body.light-theme #main #client-reels .reels-stack {
    gap: 0 !important;
}
html[data-theme] body.light-theme #main #client-reels .reels-toggle,
html[data-theme] body.light-theme #main #client-reels .reels-toggle:hover,
html[data-theme] body.light-theme #main #client-reels .reels-toggle:focus-visible,
html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) + .reels-toggle,
html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) + .reels-toggle:hover,
html[data-theme] body.light-theme #main #client-reels .reels-more.desktop-preview:not(.is-open) + .reels-toggle:focus-visible {
    position: relative !important;
    z-index: 5 !important;
    display: inline-flex !important;
    width: min(100%, 38rem) !important;
    min-height: 2.8rem !important;
    margin: clamp(1.1rem, 2vw, 1.7rem) auto 0 !important;
    padding: .65rem clamp(4.8rem, 10vw, 7rem) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(currentColor, currentColor) left center / calc(50% - 4.5rem) 1px no-repeat,
        linear-gradient(currentColor, currentColor) right center / calc(50% - 4.5rem) 1px no-repeat !important;
    box-shadow: none !important;
    color: var(--theme-muted, #697789) !important;
    font-size: .68rem !important;
    font-weight: 650 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    transform: none !important;
}
html[data-theme] body.light-theme #main #client-reels .reels-toggle:hover,
html[data-theme] body.light-theme #main #client-reels .reels-toggle:focus-visible {
    color: var(--theme-accent, #285cc4) !important;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #client-reels .reels-toggle,
    html[data-theme] body.light-theme #main #client-reels .reels-toggle:hover,
    html[data-theme] body.light-theme #main #client-reels .reels-toggle:focus-visible {
        padding-inline: 3.75rem !important;
        background-size: calc(50% - 3.5rem) 1px, calc(50% - 3.5rem) 1px !important;
    }
}

/* Reel controls use the exact glass palette assigned to their title panel.
   The stronger blur lets both surfaces stay more transparent without losing
   contrast over moving footage. */
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035) 44%, rgba(255, 255, 255, 0) 74%),
        var(--reel-panel-bg, rgba(255, 255, 255, .36)) !important;
    box-shadow: 0 14px 38px rgba(24, 35, 46, .1) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.32) contrast(1.07) !important;
    backdrop-filter: blur(30px) saturate(1.32) contrast(1.07) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-dock {
    --rp-player-ink: var(--reel-panel-ink, #202831);
    --rp-player-accent: var(--reel-panel-ink, #202831);
    color: var(--reel-panel-ink, #202831) !important;
    border: 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035) 44%, rgba(255, 255, 255, 0) 74%),
        var(--reel-panel-bg, rgba(255, 255, 255, .36)) !important;
    box-shadow: 0 10px 30px rgba(18, 28, 38, .13) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.32) contrast(1.07) !important;
    backdrop-filter: blur(30px) saturate(1.32) contrast(1.07) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-dock :is(.rp-player-button, .rp-player-speed > summary, .rp-player-time, .rp-time-duration) {
    color: var(--reel-panel-ink, #202831) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-track {
    background: color-mix(in srgb, var(--reel-panel-ink, #202831) 24%, transparent) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-buffer {
    background: color-mix(in srgb, var(--reel-panel-ink, #202831) 16%, transparent) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-volume-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--reel-panel-ink, #202831) 0 var(--rp-volume),
        color-mix(in srgb, var(--reel-panel-ink, #202831) 24%, transparent) var(--rp-volume) 100%
    ) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-volume-range::-moz-range-track {
    background: color-mix(in srgb, var(--reel-panel-ink, #202831) 24%, transparent) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-progress,
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-volume-range::-moz-range-progress {
    background: var(--reel-panel-ink, #202831) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta :is(.rp-player-seek, .rp-player-volume-range)::-webkit-slider-thumb,
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta :is(.rp-player-seek, .rp-player-volume-range)::-moz-range-thumb {
    background: var(--reel-panel-ink, #202831) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .24) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-speed-options {
    border: 0 !important;
    background: var(--reel-panel-bg, rgba(255, 255, 255, .36)) !important;
    color: var(--reel-panel-ink, #202831) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.32) !important;
    backdrop-filter: blur(30px) saturate(1.32) !important;
}
html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .rp-player-speed-options button {
    color: var(--reel-panel-ink, #202831) !important;
}

/* Classic montage descriptions belong to the normal document flow. Keeping
   the 16:9 media inside its own frame prevents the rounded-thumbnail clipping
   rule from cutting off titles, descriptions and credits below the film. */
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) {
    align-items: start !important;
    row-gap: clamp(3rem, 5vw, 4.5rem) !important;
}

html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) :is(.video-card, .external-card).has-project-meta {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    aspect-ratio: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .video-card.has-project-meta .video-media-frame,
html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .external-card.has-project-meta .external-preview {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border: 1px solid var(--theme-line, #d7dde4) !important;
    border-radius: 14px !important;
    background: #e7edf4 !important;
    box-shadow: 0 16px 40px rgba(24, 35, 46, .1) !important;
}

html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .video-card.has-project-meta::after {
    inset: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
}

html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-meta {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: .9rem 0 0 !important;
    padding-top: .9rem !important;
}

html[data-theme] body.light-theme #main #showreel #long-form + #music-videos {
    margin-top: clamp(3rem, 7vw, 5rem) !important;
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) {
        row-gap: 2.5rem !important;
    }

    html[data-theme] body.light-theme #main #showreel :is(#longGrid, #musicGrid) .music-project-meta {
        margin-top: .75rem !important;
        padding-top: .75rem !important;
    }
}

/* Keep the reel matrix rhythm square: the space between stacked rows is the
   same value as the space between neighbouring columns. The first extra row
   lives in a separate disclosure wrapper, so its top padding completes the
   same grid gap without changing the reveal button spacing. */
html[data-theme] body.light-theme #main #client-reels {
    --reel-card-gap: clamp(.75rem, 1.25vw, 1rem);
}

html[data-theme] body.light-theme #main #client-reels :is(#featuredReelsGrid, #reelsGrid) {
    column-gap: var(--reel-card-gap) !important;
    row-gap: var(--reel-card-gap) !important;
}

html[data-theme] body.light-theme #main #client-reels #reelsMore:not([hidden]) {
    box-sizing: border-box !important;
    padding-top: var(--reel-card-gap) !important;
}

/* Mobile reels read as one compact editorial card: the uninterrupted 9:16
   film comes first and its glass information strip sits immediately below.
   Natural caption height replaces desktop row equalisation. */
@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta {
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .video-media-frame {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        overflow: hidden !important;
        border: 1px solid var(--theme-line, #d7dde4) !important;
        border-radius: 13px 13px 0 0 !important;
        background: #e7edf4 !important;
        box-shadow: 0 10px 26px rgba(24, 35, 46, .08) !important;
    }

    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta::after {
        inset: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        border-radius: 13px 13px 0 0 !important;
        pointer-events: none !important;
    }

    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta,
    html[data-theme] body.light-theme #main #client-reels .work-grid.is-measuring-reel-panels .video-card.has-reel-meta .reel-project-meta,
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta.is-playing .reel-project-meta {
        position: relative !important;
        inset: auto !important;
        z-index: 3 !important;
        display: grid !important;
        align-content: start !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: .52rem .62rem .58rem !important;
        gap: .2rem !important;
        overflow: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        border: 0 !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 8px 22px rgba(24, 35, 46, .07) !important;
        pointer-events: none !important;
        transition: none !important;
    }

    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta .reel-project-meta::after,
    html[data-theme] body.light-theme #main #client-reels .video-card.has-reel-meta.is-playing .reel-project-meta::after {
        inset: -80% -35% !important;
        opacity: .22 !important;
        transform: translate3d(-12%, 0, 0) rotate(3deg) !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reel-project-meta .reel-project-eyebrow {
        gap: .38rem !important;
        font-size: .43rem !important;
        line-height: 1.15 !important;
        letter-spacing: .08em !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reel-project-meta h3 {
        margin: 0 !important;
        font-size: .77rem !important;
        line-height: 1.18 !important;
    }

    html[data-theme] body.light-theme #main #client-reels .reel-project-meta p {
        display: -webkit-box !important;
        margin: 0 !important;
        overflow: hidden !important;
        font-size: .61rem !important;
        line-height: 1.3 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* Final responsive corrections: the five workshop tabs always share one
   uninterrupted rail, while the three featured mobile reels form a complete
   1 + 2 composition instead of leaving the third card beside an empty cell. */
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

@media (max-width: 700px) {
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:hover,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button:focus-visible,
    html[data-theme] body.light-theme #main #ai-model-directory .ai-filters button[aria-pressed="true"] {
        flex: 0 0 6.5rem !important;
        min-width: 6.5rem !important;
    }
}

@media (max-width: 680px) {
    html[data-theme] body.light-theme #main #client-reels #featuredReelsGrid > .video-card:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    html[data-theme] body.light-theme #main #client-reels #featuredReelsGrid > .video-card:nth-child(n + 2) {
        grid-column: auto !important;
    }
}