.has-js {
    --motion-duration-fast: 350ms;
    --motion-duration-base: 700ms;
    --motion-duration-slow: 1000ms;
    --motion-duration-text: 820ms;
    --motion-duration-media: 900ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-section: cubic-bezier(0.76, 0, 0.24, 1);
    --motion-reveal-distance-section: clamp(16px, 1.45vw, 30px);
    --motion-reveal-distance-media: clamp(18px, 1.9vw, 34px);
    --motion-stagger-step: 110ms;
    --motion-overlap-distance: clamp(80px, 18vh, 260px);
    --motion-stack-shadow: 0 -22px 46px rgba(4, 8, 16, 0.24);
}

.has-js .site-main {
    isolation: isolate;
}

.has-js .motion-transition-panel {
    position: relative;
    z-index: 1;
}

.has-js .motion-stack-panel {
    position: relative;
    top: auto;
    isolation: isolate;
    box-shadow: var(--motion-stack-shadow);
}
.has-js .motion-pin-stack-panel {
    position: sticky;
    top: 0;
    transform: translateZ(0);
}

.has-js .motion-overlap-panel {
    position: relative;
    z-index: var(--stack-index, 2);
}

.has-js .motion-reveal-panel {
    position: relative;
}

.has-js .motion-transition-panel + .motion-overlap-panel {
    margin-top: calc(var(--motion-overlap-distance) * -1);
}

.has-js .motion-stack-panel[data-animate~="section-reveal"],
.has-js .motion-stack-panel.animate-section {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
}

.has-js .motion-stack-panel[data-animate~="section-wipe"],
.has-js .motion-stack-panel.animate-section-wipe {
    overflow: visible;
}

.has-js .motion-stack-panel[data-animate~="section-wipe"]::before,
.has-js .motion-stack-panel.animate-section-wipe::before {
    display: none;
}

.has-js [data-animate~="section-reveal"],
.has-js .animate-section,
.has-js [data-animate~="media-reveal"],
.has-js .animate-media,
.has-js [data-animate~="section-wipe"],
.has-js .animate-section-wipe {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-section), 0);
    filter: saturate(0.94);
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out),
        filter var(--motion-duration-base) var(--motion-ease-out);
    will-change: opacity, transform;
}

.has-js [data-animate~="media-reveal"],
.has-js .animate-media {
    transform: translate3d(0, var(--motion-reveal-distance-media), 0);
    transition-duration: var(--motion-duration-media);
}

.has-js [data-animate~="section-reveal"].is-visible,
.has-js .animate-section.is-visible,
.has-js [data-animate~="media-reveal"].is-visible,
.has-js .animate-media.is-visible,
.has-js [data-animate~="section-wipe"].is-visible,
.has-js .animate-section-wipe.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.has-js [data-animate~="media-reveal"] .work-card-media__asset,
.has-js .animate-media .work-card-media__asset,
.has-js [data-animate~="media-reveal"] .case-media-item-frame,
.has-js .animate-media .case-media-item-frame,
.has-js [data-animate~="media-reveal"] .about-image-media,
.has-js .animate-media .about-image-media {
    opacity: 0.001;
    transform: translate3d(0, 24px, 0) scale(1.03);
    transition:
        opacity var(--motion-duration-media) var(--motion-ease-out),
        transform var(--motion-duration-media) var(--motion-ease-out);
}

.has-js [data-animate~="media-reveal"].is-visible .work-card-media__asset,
.has-js .animate-media.is-visible .work-card-media__asset,
.has-js [data-animate~="media-reveal"].is-visible .case-media-item-frame,
.has-js .animate-media.is-visible .case-media-item-frame,
.has-js [data-animate~="media-reveal"].is-visible .about-image-media,
.has-js .animate-media.is-visible .about-image-media {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.has-js [data-animate~="text-reveal"],
.has-js .animate-text {
    opacity: 1;
    transform: none;
    filter: none;
}

.has-js [data-animate~="text-reveal"] .text-line,
.has-js .animate-text .text-line,
.has-js [data-animate~="text-reveal"] .about-display-line,
.has-js .animate-text .about-display-line,
.has-js [data-animate~="text-reveal"] .people-page-title-line,
.has-js .animate-text .people-page-title-line {
    display: block;
    opacity: 0;
    transform: translate3d(0, 0.96em, 0);
    transition:
        opacity var(--motion-duration-text) var(--motion-ease-out),
        transform var(--motion-duration-text) var(--motion-ease-out);
    transition-delay: calc(var(--text-line-index, 0) * var(--motion-stagger-step));
    will-change: opacity, transform;
}

.has-js [data-animate~="text-reveal"].is-visible .text-line,
.has-js .animate-text.is-visible .text-line,
.has-js [data-animate~="text-reveal"].is-visible .about-display-line,
.has-js .animate-text.is-visible .about-display-line,
.has-js [data-animate~="text-reveal"].is-visible .people-page-title-line,
.has-js .animate-text.is-visible .people-page-title-line {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.has-js [data-animate~="stagger-children"],
.has-js .animate-stagger {
    opacity: 1;
    transform: none;
    filter: none;
}

.has-js [data-animate~="stagger-children"] > *,
.has-js .animate-stagger > * {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-section), 0);
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out);
    transition-delay: calc(var(--stagger-index, 0) * var(--motion-stagger-step));
    will-change: opacity, transform;
}

.has-js [data-animate~="stagger-children"].is-visible > *,
.has-js .animate-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

.has-js [data-animate~="section-wipe"],
.has-js .animate-section-wipe {
    position: relative;
    overflow: clip;
    isolation: isolate;
}

.has-js [data-animate~="section-wipe"]::before,
.has-js .animate-section-wipe::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--section-wipe-color, rgba(10, 13, 20, 0.28));
    transform-origin: top;
    transform: scaleY(1);
    transition: transform var(--motion-duration-slow) var(--motion-ease-section);
    transition-delay: 90ms;
}

.has-js [data-animate~="section-wipe"].is-visible::before,
.has-js .animate-section-wipe.is-visible::before {
    transform: scaleY(0);
}
.hero-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: var(--type-meta);
    line-height: 1.24;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-video-background.is-video-ready .hero-video-poster {
    opacity: 0;
}


.hero-title {
    max-width: 15ch;
    margin-bottom: var(--space-4);
    font-size: var(--type-display-lg);
    line-height: 0.97;
    padding-bottom: 0.06em;
}

.hero-subtitle {
    max-width: 60ch;
    color: var(--color-muted);
    font-size: var(--type-small);
    line-height: 1.4;
}

.home-video-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #05070f;
    color: #ffffff;
}

.hero-video-background--desktop {
    display: block;
}

.hero-video-background--mobile {
    display: none;
}

.hero-video-background {
    position: relative;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #05070f;
    isolation: isolate;
}

.hero-video-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #05070f;
}

.hero-video-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--hero-video-fallback, #05070f);
}

.hero-video-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #05070f;
    transition: opacity 260ms ease;
}

.hero-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100svh;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-video-embed--mobile {
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100svh;
}

.hero-video-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    height: 100%;
    padding: var(--edge-y) var(--edge-x);
    background: linear-gradient(180deg, rgba(6, 7, 13, 0) 0%, rgba(6, 7, 13, 0.62) 100%);
}

.hero-video-label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-display-lg);
    line-height: 0.98;
    padding-bottom: 0.06em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
}

.hero-video-overlay--mobile-placeholder {
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(6, 7, 13, 0.25) 0%, rgba(6, 7, 13, 0.82) 100%);
}

.home-claim-block {
    display: grid;
    align-items: center;
    background: var(--color-home-claim);
    color: #05070f;
    padding-block: clamp(2.25rem, 5svh, 4rem);
}

.home-claim-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.home-claim-title {
    margin: 0;
    max-width: 7.4ch;
    font-size: var(--type-claim);
    line-height: 0.97;
    padding-bottom: 0.08em;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.home-work-showcase {
    background: var(--color-home-work-surface);
    color: var(--color-home-work-text);
    padding-block: clamp(3.25rem, 10svh, 7.75rem);
}

.home-work-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.home-work-heading {
    margin-bottom: clamp(1.8rem, 5vw, 4rem);
}

.home-work-heading h2 {
    margin: 0;
    max-width: 10ch;
    font-size: var(--type-work-title);
    line-height: 0.97;
    padding-bottom: 0.08em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.home-work-grid-wrap {
    width: 100%;
}

.home-work-actions {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    justify-content: center;
}

.work-grid--home {
    gap: clamp(var(--space-4), 2.8vw, var(--space-7));
}

.work-card--home {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


.work-card--home .work-card-body {
    padding: var(--space-2) 0 0;
}

.work-card--home .work-card-meta {
    margin-bottom: 0.2rem;
    color: #4f5564;
    font-size: var(--type-small);
    line-height: 1.32;
    text-transform: none;
    letter-spacing: 0;
}

.work-card--home h3 {
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 0.98;
    padding-bottom: 0.04em;
}

.work-card--home h3 a {
    color: #0a0d14;
    text-decoration: none;
}

.button--home-cases {
    background: transparent;
    color: #0a0d14;
    border-color: #8e95a2;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: var(--type-button);
    line-height: 1.2;
    padding: clamp(8px, 0.8vw, 16px) clamp(18px, 1.8vw, 36px);
    border-radius: clamp(18px, 1.6vw, 34px);
    min-height: clamp(40px, 3.2vw, 56px);
}

.button--home-cases:hover,
.button--home-cases:focus-visible {
    border-color: #0a0d14;
}
.section--work-header {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.3rem, 6.2vw, 5.2rem) clamp(1.1rem, 3.3vw, 2.6rem);
}

.work-header-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.work-header-eyebrow {
    margin: 0 0 var(--space-2);
    color: #4d5669;
    font-size: var(--type-meta);
    line-height: 1.24;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-header-title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2.5rem, 7.2vw, 6.4rem);
    line-height: 0.97;
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.work-header-subtitle {
    margin: var(--space-3) 0 0;
    max-width: 56ch;
    color: #4d5669;
    font-size: var(--type-small);
    line-height: 1.4;
}

.section--work-overview {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.8rem, 8vw, 6.6rem);
}
.section--work-overview--mk-layout {
    padding-block: clamp(1.05rem, 3.4vw, 2.4rem) clamp(2.8rem, 8vw, 6.6rem);
}

.work-overview-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.work-grid--portfolio {
    gap: clamp(1.5rem, 2.6vw, 3.1rem);
    align-items: start;
}

.work-card--portfolio {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.work-card--home .work-card-media,
.work-card--portfolio .work-card-media {
    position: relative;
    display: block;
    gap: 0;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: transparent;
}

.work-card--home .work-card-media img,
.work-card--home .work-card-media video,
.work-card--home .work-card-media iframe,
.work-card--home .work-card-media .work-card-media__asset,
.work-card--portfolio .work-card-media img,
.work-card--portfolio .work-card-media video,
.work-card--portfolio .work-card-media iframe,
.work-card--portfolio .work-card-media .work-card-media__asset {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    background: transparent;
    transition: transform 220ms ease;
}

.work-card--portfolio .work-card-body {
    min-width: 0;
    padding: var(--space-2) 0 0;
}

.work-card--portfolio .work-card-meta {
    margin-bottom: 0.4rem;
    color: #545d6f;
    font-size: var(--type-meta);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

.work-card--portfolio h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3.45vw, 3.05rem);
    line-height: 0.99;
    padding-bottom: 0.04em;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.work-card--portfolio h3 a {
    color: #0a0d14;
    text-decoration: none;
}
.work-card--portfolio .work-card-body > p:not(.work-card-meta) {
    margin-top: 0.5rem;
    margin-bottom: 0;
    max-width: 58ch;
    color: #1e2535;
    font-size: clamp(0.9rem, 0.98vw, 1.04rem);
    line-height: 1.42;
}

.work-card--portfolio:hover .work-card-media img,
.work-card--portfolio:focus-within .work-card-media img,
.work-card--portfolio:hover .work-card-media video,
.work-card--portfolio:focus-within .work-card-media video,
.work-card--portfolio:hover .work-card-media iframe,
.work-card--portfolio:focus-within .work-card-media iframe,
.work-card--portfolio:hover .work-card-media .work-card-media__asset,
.work-card--portfolio:focus-within .work-card-media .work-card-media__asset {
    transform: scale(1.01);
}

.section--case-header-media {
    padding: 0;
    background: #05070f;
    overflow: hidden;
}

.case-header-media {
    position: relative;
    min-height: var(--immersive-min-height);
    overflow: hidden;
    background: #05070f;
    isolation: isolate;
}

.case-header-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.08) 0%, rgba(4, 5, 10, 0.42) 100%);
}

.case-header-media-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.case-header-media-cover {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--case-header-fallback, #05070f);
}

.case-header-media-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--case-header-fallback, #05070f);
}

.case-header-media-poster-wrap,
.case-header-media-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
}

.case-header-media-poster,
.case-header-media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-header-media-poster {
    transition: opacity 260ms ease;
}

.case-header-media.is-video-ready .case-header-media-poster {
    opacity: 0;
}

.case-header-media-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100svh;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    background: #05070f;
}

.case-header-media-embed--mobile {
    display: none;
}

.section--case-intro-modular {
    padding-block: clamp(2.6rem, 8.6vw, 8rem);
    background: #ffffff;
    color: #0a0d14;
}

.case-intro-grid {
    display: grid;
    gap: clamp(1.5rem, 4.6vw, 5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
}

.case-intro-kicker {
    margin: 0 0 var(--space-3);
    color: #4f596e;
    font-size: var(--type-meta);
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-intro-title {
    margin: 0;
    max-width: 11ch;
    font-size: var(--type-headline);
    line-height: 0.97;
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.case-intro-subline {
    margin: var(--space-3) 0 0;
    color: #1b2232;
    font-size: clamp(1.05rem, 1.85vw, 1.85rem);
    line-height: 1.18;
}

.case-intro-copy p {
    margin-bottom: var(--space-4);
    color: #222b3c;
    font-size: var(--type-small);
    line-height: 1.48;
}

.case-intro-copy p:last-child {
    margin-bottom: 0;
}

.section--case-block {
    padding-block: clamp(1.2rem, 3.8vw, 3.8rem);
}

.case-block-shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.case-media-grid,
.case-media-grid--two,
.case-block-shell--two-column {
    display: grid;
    gap: var(--case-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.case-media-grid > *,
.case-media-grid--two > *,
.case-block-shell--two-column > * {
    min-width: 0;
    max-width: 100%;
}

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

.case-media-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-block-shell--text {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.case-block-shell--media,
.case-block-shell--media-grid,
.case-block-shell--color-media,
.case-block-shell--two-column {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.case-block-shell--media-grid,
.case-block-shell--color-media {
    display: grid;
    gap: clamp(1.1rem, 3vw, 2.2rem);
}

.case-color-media-head {
    max-width: min(100%, 62rem);
    display: grid;
    gap: var(--space-3);
}

.case-color-media-head h2 {
    margin: 0;
    font-size: var(--type-subheadline);
    line-height: 0.98;
    padding-bottom: 0.05em;
    text-transform: uppercase;
}

.case-color-media-head p {
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.45;
}

.case-text-block-content {
    display: grid;
    gap: var(--space-4);
    max-width: 62ch;
}

.case-text-block-kicker {
    margin: 0;
    font-size: var(--type-meta);
    line-height: 1.24;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(12, 16, 27, 0.72);
}

.case-text-block-content h2 {
    margin: 0;
    font-size: var(--type-subheadline);
    line-height: 0.98;
    padding-bottom: 0.05em;
    text-transform: uppercase;
}

.case-text-block-content p {
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.5;
    color: inherit;
}

.case-media-item {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
}

.case-media-item-frame {
    position: relative;
    overflow: clip;
    background: var(--case-media-fallback, #0b1019);
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
}

.media--viewport-cover .case-media-item-frame {
    aspect-ratio: 16 / 9;
    min-height: clamp(20rem, 72svh, 66rem);
}

.media--viewport-cover .case-media-item-image,
.media--viewport-cover .case-media-item-poster {
    height: 100%;
    object-fit: cover;
}

.media--full-width-contain .case-media-item-frame,
.media--content-width .case-media-item-frame {
    aspect-ratio: auto;
    min-height: 0;
}

.media--content-width {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.media--grid-item .case-media-item-frame {
    aspect-ratio: 16 / 10;
    min-height: 0;
}

.media--grid-item.case-media-item--portrait .case-media-item-frame {
    aspect-ratio: 4 / 5;
}

.media--grid-item.case-media-item--tall .case-media-item-frame {
    aspect-ratio: 3 / 4;
}

.media--grid-item.case-media-item--full .case-media-item-frame {
    aspect-ratio: 16 / 9;
}

.media--full-width-contain.case-media-item--video .case-media-item-frame,
.media--content-width.case-media-item--video .case-media-item-frame,
.media--grid-item.case-media-item--video .case-media-item-frame {
    aspect-ratio: var(--case-media-video-ratio, 16 / 9);
}

.case-media-item-image,
.case-media-item-poster {
    display: block;
    width: 100%;
    max-width: 100%;
}

.case-media-item-image {
    height: auto;
    object-fit: contain;
}

.media--grid-item .case-media-item-image {
    height: 100%;
    object-fit: contain;
    background: var(--case-media-fallback, #0b1019);
}

.case-media-item--video .case-media-item-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    transition: opacity 220ms ease;
}

.case-media-item--video.is-video-ready .case-media-item-poster {
    opacity: 0;
}

.case-media-item-embed {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.case-media-item figcaption {
    margin: 0;
    max-width: 100%;
    color: rgba(12, 16, 27, 0.68);
    font-size: var(--type-meta);
    line-height: 1.34;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.case-block-bg--white {
    background: #ffffff;
    color: #0a0d14;
}

.case-block-bg--paper {
    background: #f2f4f8;
    color: #0a0d14;
}

.case-block-bg--charcoal {
    background: #0b1019;
    color: #f6f8ff;
}

.case-block-bg--sun,
.case-block-bg--lime {
    background: #d8ff02;
    color: #0a0d14;
}

.case-block-bg--red {
    background: #ef3535;
    color: #fef7f8;
}

.case-block-bg--charcoal .case-text-block-kicker,
.case-block-bg--charcoal .case-media-item figcaption,
.case-block-bg--red .case-text-block-kicker,
.case-block-bg--red .case-media-item figcaption {
    color: rgba(245, 247, 255, 0.86);
}
.section--case-all-cases {
    padding-block: clamp(1.4rem, 4vw, 3rem);
    background: #f3f5f9;
    color: #0a0d14;
}

.case-all-cases-stage {
    width: 100%;
    padding-inline: var(--edge-x);
    display: flex;
    justify-content: center;
}

.button--case-all-cases {
    color: #556076;
    border-color: #556076;
}

.button--case-all-cases:hover,
.button--case-all-cases:focus-visible {
    color: #0a0d14;
    border-color: #0a0d14;
}

.section--case-related {
    padding-block: clamp(3rem, 8vw, 7.2rem);
    background: #f3f5f9;
    color: #0a0d14;
}

.case-related-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.case-related-heading {
    max-width: min(100%, 68rem);
    margin-bottom: clamp(1.5rem, 4.4vw, 4rem);
}

.case-related-kicker {
    margin: 0 0 var(--space-2);
    color: #556076;
    font-size: var(--type-meta);
    line-height: 1.24;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-related-heading h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2.3rem, 4.8vw, 4.6rem);
    line-height: 0.97;
    padding-bottom: 0.06em;
    text-transform: uppercase;
}

.case-related-heading p:last-child {
    margin: 0;
    color: #1f2737;
    font-size: var(--type-small);
    line-height: 1.42;
}

.work-grid--related {
    gap: clamp(1.2rem, 2.2vw, 2.2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card--related {
    background: #ffffff;
    border: 1px solid #d9dfeb;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.work-card--related .work-card-media img {
    aspect-ratio: 16 / 10;
    min-height: clamp(12rem, 20vw, 20rem);
    object-fit: cover;
}

.work-card--related .work-card-body {
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.work-card--related .work-card-meta {
    margin-bottom: var(--space-2);
    color: #556076;
    font-size: var(--type-meta);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.work-card--related h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2.35rem);
    line-height: 0.99;
    padding-bottom: 0.04em;
    text-transform: uppercase;
}

.section--case-hero {
    padding: 0;
    background: #05070f;
}

.case-media-hero {
    position: relative;
    min-height: var(--immersive-min-height);
    display: grid;
    align-items: end;
    overflow: hidden;
}

.case-media-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.22) 0%, rgba(4, 5, 10, 0.8) 100%);
}

.case-media-hero-media {
    position: absolute;
    inset: 0;
}

.case-media-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-media-hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, var(--site-max));
    padding: var(--edge-y) var(--edge-x);
}

.case-media-hero-kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--type-meta);
    line-height: 1.22;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.case-media-hero-title {
    margin: 0;
    max-width: 10ch;
    font-size: var(--type-display-lg);
    line-height: 0.97;
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.case-media-hero-meta {
    margin: var(--space-3) 0 0;
    font-size: var(--type-small);
    line-height: 1.35;
    color: rgba(245, 247, 255, 0.94);
}

.section--case-vimeo .container,
.section--case-gallery .container {
    width: min(calc(100% - (2 * var(--edge-x))), var(--site-max));
}

.section--case-vimeo .vimeo-frame {
    aspect-ratio: 16 / 9;
    min-height: clamp(20rem, 70svh, 54rem);
}

.section--case-gallery .gallery-grid {
    gap: clamp(var(--space-4), 2.4vw, var(--space-6));
}

.section--case-gallery .image-block img {
    border-radius: 0;
    border: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.section--case-intro .container,
.section--case-credits .container {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-wide));
}

.section-heading p {
    color: var(--color-muted);
    font-size: var(--type-small);
    line-height: 1.42;
}

.site-body .card h2 {
    margin-bottom: var(--space-3);
}

.site-body .card p {
    font-size: var(--type-small);
    line-height: 1.42;
}

.site-body .card p:last-child {
    margin-bottom: 0;
}

.section--people-page {
    background: #e6e6e6;
    color: #0a0d14;
    padding-block: clamp(7.6rem, 12.2vw, 10.6rem) clamp(2.2rem, 5.5vw, 4.4rem);
}

.people-page-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.people-page-intro {
    max-width: min(100%, 72rem);
    margin-bottom: clamp(1.6rem, 4vw, 3.4rem);
}

.people-page-title {
    margin: 0;
    max-width: 8.4ch;
    font-size: clamp(3.15rem, 10.9vw, 8.6rem);
    line-height: 0.9;
    padding-bottom: 0.06em;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.people-page-title-line {
    display: block;
}

.people-page-copy {
    margin-top: clamp(1.3rem, 3.5vw, 2.8rem);
    max-width: min(100%, 56rem);
}

.people-page-copy p {
    margin-bottom: var(--space-4);
    color: #1f2532;
    font-size: clamp(1rem, 1.3vw, 2rem);
    line-height: 1.42;
}

.people-page-copy p:last-child {
    margin-bottom: 0;
}

.people-team-grid {
    display: grid;
    gap: clamp(0.85rem, 1.55vw, 1.45rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.people-team-card {
    --people-object-position: 50% 20%;
    position: relative;
    min-width: 0;
    aspect-ratio: 561 / 825;
    overflow: hidden;
    background: #b5b5b5;
    outline: 0;
}

.people-team-card__media,
.people-team-card__image,
.people-team-card__placeholder {
    width: 100%;
    height: 100%;
}

.people-team-card__image {
    display: block;
    object-fit: cover;
    object-position: var(--people-object-position, 50% 20%);
}

.people-team-card__placeholder {
    background: #9f9f9f;
}

.people-team-card__trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.people-team-card__trigger:focus-visible {
    outline: 3px solid #0a0d14;
    outline-offset: -3px;
}

.people-team-card__info {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(0.9rem, 1.55vw, 1.15rem);
    display: grid;
    background: #ef3535;
    color: #fff7f8;
    opacity: 0;
    transform: translateY(3%);
    transition: opacity 210ms ease, transform 210ms ease;
}

.people-team-card__info-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.7rem, 1.4vw, 1.1rem);
}

.people-team-card__info-top {
    display: grid;
    gap: clamp(0.42rem, 0.92vw, 0.72rem);
    align-content: start;
}

.people-team-card__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.8vw, 3.6rem);
    line-height: 0.9;
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.people-team-card__name-line {
    display: block;
}

.people-team-card__title {
    margin: 0;
    color: #fff7f8;
    font-size: clamp(0.98rem, 1.15vw, 1.42rem);
    line-height: 1.24;
    font-weight: 700;
}

.people-team-card__info-bottom {
    margin-top: auto;
}

.people-team-card__contacts {
    align-self: stretch;
}

.people-team-card__contacts p {
    margin: 0;
    color: rgba(255, 247, 248, 0.97);
    font-size: clamp(0.9rem, 1.02vw, 1.18rem);
    line-height: 1.28;
}

.people-team-card.is-active .people-team-card__info,
.people-team-card:focus-within .people-team-card__info {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .people-team-card:hover .people-team-card__info {
        opacity: 1;
        transform: translateY(0);
    }
}

.section--about-claim,
.section--about-split {
    display: grid;
    align-items: center;
    padding-block: clamp(2.8rem, 8svh, 8rem);
}


.section--about-claim--lime {
    background: var(--color-home-claim);
    color: #0a0d14;
}

.section--about-split--red {
    background: #ef3535;
    color: #fff7f8;
}

.section--about-split--charcoal {
    background: #05070f;
    color: #f6f8ff;
}

.about-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.about-split-grid {
    display: grid;
    gap: clamp(1.7rem, 4.6vw, 6.4rem);
}

.about-split-grid--claim,
.about-split-grid--side-by-side {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: end;
}
.about-split-grid--offset-copy,
.about-split-grid--vertical-offset {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: clamp(29rem, 70svh, 51rem);
    row-gap: clamp(2rem, 4.5svh, 6rem);
}

.about-split-grid > * {
    min-width: 0;
}

.about-display {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.98;
    padding-bottom: 0.08em;
}

.about-display--claim {
    font-size: clamp(3.15rem, 12.6vw, 13rem);
}

.about-display--split {
    font-size: clamp(2.8rem, 8.9vw, 9.8rem);
}

.about-display-line {
    display: block;
}

.about-copy-col {
    justify-self: end;
    max-width: 60ch;
}
.about-split-grid--offset-copy .about-display-col {
    align-self: start;
    max-width: min(72vw, 56rem);
}

.about-split-grid--vertical-offset .about-display-col {
    align-self: start;
    width: 100%;
    max-width: none;
}

.about-split-grid--offset-copy .about-display,
.about-split-grid--vertical-offset .about-display {
    max-width: 100%;
}

.about-split-grid--offset-copy .about-split-copy,
.about-split-grid--vertical-offset .about-split-copy {
    align-self: flex-end;
    width: min(100%, clamp(22rem, 42vw, 38.75rem));
    max-width: min(100%, clamp(22rem, 42vw, 38.75rem));
    margin-top: clamp(2.5rem, 7.5svh, 7.5rem);
}

.about-split-grid--vertical-offset .about-split-copy {
    width: clamp(22rem, 50%, 40rem);
    max-width: 100%;
}

.about-split-grid--offset-small .about-split-copy {
    margin-top: clamp(1.75rem, 4.8svh, 4.5rem);
}

.about-split-grid--offset-medium .about-split-copy {
    margin-top: clamp(2.8rem, 8svh, 8.5rem);
}

.about-split-grid--offset-large .about-split-copy {
    margin-top: clamp(4rem, 10.8svh, 11rem);
}

.about-copy-col p {
    margin-bottom: var(--space-4);
    color: inherit;
    font-size: clamp(1.06rem, 1.2vw, 1.38rem);
    line-height: 1.55;
}

.about-split-grid--offset-copy .about-split-copy p,
.about-split-grid--vertical-offset .about-split-copy p {
    font-size: clamp(1.1rem, 1.28vw, 1.46rem);
    line-height: 1.55;
}

.about-copy-col p:last-child {
    margin-bottom: 0;
}

.section--about-claim--lime .about-copy-col p {
    color: rgba(10, 13, 20, 0.95);
}

.section--about-split--red .about-copy-col p {
    color: rgba(255, 247, 248, 0.98);
}

.section--about-split--charcoal .about-copy-col p {
    color: rgba(246, 248, 255, 0.97);
}

.section--about-image {
    padding: 0;
    background: #05070f;
}

.about-image-stage {
    width: 100%;
}

.about-image-shell {
    position: relative;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.about-image-shell.media--viewport-cover {
    min-height: clamp(24rem, 92svh, 76rem);
}

.section--about-image--plain .about-image-shell {
    min-height: 0;
}


.section--about-image--plain .about-image-shell.media--viewport-cover {
    min-height: clamp(22rem, 86svh, 70rem);
}

.about-image-shell.media--content-width {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.about-image-media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.about-image-shell.media--viewport-cover .about-image-media {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

.about-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--edge-y) var(--edge-x);
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.06) 0%, rgba(4, 5, 10, 0.74) 100%);
}

.about-image-content {
    max-width: min(100%, 68rem);
}

.section--about-image--plain .about-image-overlay {
    align-items: end;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.02) 0%, rgba(4, 5, 10, 0.56) 100%);
}

.section--about-image--plain .about-image-content {
    max-width: min(100%, 40rem);
}

.about-image-title {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.6rem, 9.2vw, 8rem);
    line-height: 0.98;
    padding-bottom: 0.08em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #f6f8ff;
}

.about-image-copy {
    max-width: 56ch;
}

.about-image-copy p {
    margin-bottom: var(--space-3);
    color: rgba(245, 247, 255, 0.96);
    font-size: var(--type-small);
    line-height: 1.5;
}

.about-image-copy p:last-child {
    margin-bottom: 0;
}

.section--about-image--plain .about-image-copy p {
    font-size: clamp(0.92rem, 1.06vw, 1.14rem);
    line-height: 1.44;
    color: rgba(245, 247, 255, 0.96);
    max-width: 48ch;
    text-shadow: 0 1px 2px rgba(2, 3, 6, 0.58);
}

.section--about-logo-wall {
    background: #05070f;
    color: #f6f8ff;
    padding-block: clamp(3rem, 9svh, 8rem);
}

.about-logo-wall-header {
    max-width: 56rem;
    margin-bottom: clamp(1.5rem, 4.4vw, 3.8rem);
}

.about-logo-wall-header h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2.2rem, 6.8vw, 5.4rem);
    line-height: 0.98;
    padding-bottom: 0.06em;
    text-transform: uppercase;
}

.about-logo-wall-header p {
    margin: 0;
    color: rgba(245, 247, 255, 0.82);
    font-size: var(--type-small);
    line-height: 1.42;
}
.about-logo-marquees {
    --about-logo-visible: 5;
    --about-logo-gap: clamp(0.75rem, 1.35vw, 1.45rem);
    --about-logo-marquee-width: calc(100vw - (2 * var(--edge-x)));
    display: grid;
    gap: var(--about-logo-gap);
}

.about-logo-marquee-row {
    width: 100%;
    overflow: hidden;
}

.about-logo-marquee-strip {
    display: flex;
    gap: var(--about-logo-gap);
    width: max-content;
    will-change: transform;
    animation: about-logo-marquee-forward 58s linear infinite;
}

.about-logo-marquee-row--reverse .about-logo-marquee-strip {
    animation-name: about-logo-marquee-reverse;
}

.about-logo-track {
    display: flex;
    gap: var(--about-logo-gap);
    width: max-content;
}

.about-logo-item {
    margin: 0;
    flex: 0 0 calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    min-width: calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    max-width: calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    min-height: clamp(3.8rem, 7vw, 7.4rem);
    display: grid;
    place-items: center;
    padding: clamp(0.55rem, 0.95vw, 1.08rem);
}

.about-logo-item img {
    width: auto;
    max-width: min(100%, 10.8rem);
    max-height: clamp(1.65rem, 2.6vw, 3.1rem);
    height: auto;
    object-fit: contain;
}

@keyframes about-logo-marquee-forward {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - (var(--about-logo-gap) / 2)));
    }
}

@keyframes about-logo-marquee-reverse {
    from {
        transform: translateX(calc(-50% - (var(--about-logo-gap) / 2)));
    }
    to {
        transform: translateX(0);
    }
}

.section--about-cta {
    background: #05070f;
    color: #f6f8ff;
    padding-block: clamp(3rem, 9svh, 7.4rem);
}

.about-cta-grid {
    display: grid;
    gap: clamp(1.2rem, 3.4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: start;
}

.about-cta-copy {
    min-width: 0;
}

.about-cta-title {
    margin: 0;
    font-size: clamp(2.6rem, 8.8vw, 8.2rem);
    line-height: 1;
    padding-bottom: 0.08em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.about-cta-title .about-display-line + .about-display-line {
    margin-top: 0.03em;
}

.about-cta-text {
    margin: var(--space-4) 0 0;
    max-width: 48ch;
    color: rgba(245, 247, 255, 0.9);
    font-size: var(--type-small);
    line-height: 1.42;
}

@media (max-width: 64rem) {
    .hero-title {
        max-width: 20ch;
    }

    .people-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-page-title {
        font-size: clamp(2.9rem, 11.8vw, 7.1rem);
    }

    .work-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-related-heading h2 {
        max-width: 18ch;
    }


}

@media (max-width: 56rem) {
    .has-js .motion-stack-panel,
    .has-js .motion-overlap-panel {
        position: relative;
        top: auto;
        margin-top: 0 !important;
        box-shadow: none;
    }
    .hero-video-background--desktop {
        display: none;
    }

    .hero-video-background--mobile {
        display: block;
    }

    .home-video-hero,
    .home-video-hero .hero-video-background,
    .home-video-hero .hero-video-overlay {
        min-height: 100svh;
        height: 100svh;
    }

    .hero-video-background--mobile .hero-video-media,
    .hero-video-background--mobile .hero-video-cover {
        position: absolute;
        inset: 0;
    }

    .hero-video-background--mobile .hero-video-poster {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    .hero-video-background--mobile .hero-video-embed {
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw;
        min-width: 177.7778svh;
        min-height: 100svh;
        transform: translate(-50%, -50%);
    }

    .home-claim-title {
        max-width: 9ch;
        font-size: clamp(3.1rem, 13.2vw, 6.2rem);
    }

    .home-work-heading h2 {
        font-size: clamp(2.65rem, 11vw, 4.9rem);
    }
    .work-grid--home {
        grid-template-columns: 1fr;
    }
    .work-grid--portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .work-card--portfolio h3 {
        font-size: clamp(2rem, 9vw, 3.2rem);
    }

    .case-header-media {
        min-height: 92svh;
        height: 100svh;
    }

    .case-intro-grid {
        grid-template-columns: 1fr;
    }

    .case-intro-title {
        max-width: 14ch;
        font-size: clamp(2.4rem, 10.5vw, 5rem);
    }

    .case-intro-subline {
        font-size: clamp(1rem, 5vw, 1.8rem);
    }

    .case-media-grid,
    .case-media-grid--two,
    .case-block-shell--two-column {
        grid-template-columns: 1fr;
    }

    .case-media-item,
    .case-media-item img,
    .case-media-item video,
    .case-media-item iframe {
        width: 100%;
        max-width: 100%;
    }

    .case-header-media-poster,
    .case-header-media-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .case-header-media-embed {
        width: 177.7778svh;
        height: 100svh;
        min-width: 100%;
        min-height: 100%;
    }

    .case-header-media-embed--desktop {
        display: none;
    }

    .case-header-media-embed--mobile {
        display: block;
    }


    .work-grid--related {
        grid-template-columns: 1fr;
    }

    .work-card--home h3 {
        font-size: clamp(2rem, 8.2vw, 3.1rem);
    }


    .case-media-hero-title {
        font-size: clamp(2.3rem, 10.8vw, 4.8rem);
        max-width: 12ch;
    }

    .section--people-page {
        padding-block: clamp(6.8rem, 16vw, 8.8rem) clamp(2.1rem, 8vw, 3.4rem);
    }

    .people-page-title {
        max-width: 100%;
        font-size: clamp(2.5rem, 15vw, 5.8rem);
    }

    .people-page-copy {
        max-width: min(100%, 64ch);
    }

    .people-page-copy p {
        font-size: clamp(1rem, 4.3vw, 1.35rem);
    }

    .people-team-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.85rem, 3.8vw, 1.3rem);
    }

    .people-team-card {
        aspect-ratio: 561 / 825;
    }

    .people-team-card__name {
        font-size: clamp(2rem, 11vw, 3.6rem);
    }

    .people-team-card__title {
        font-size: clamp(0.96rem, 4.4vw, 1.24rem);
    }

    .section--about-claim,
    .section--about-split {
        padding-block: clamp(2rem, 10vw, 4.8rem);
    }

    .about-split-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .about-split-grid--offset-copy,
    .about-split-grid--vertical-offset {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 0;
        row-gap: clamp(0.9rem, 4vw, 1.8rem);
    }

    .about-split-grid--offset-copy .about-split-copy,
    .about-split-grid--vertical-offset .about-split-copy {
        align-self: start;
        justify-self: start;
        width: 100%;
        max-width: 62ch;
        margin-top: clamp(0.9rem, 4.5vw, 1.8rem);
    }

    .about-split-grid--offset-small .about-split-copy,
    .about-split-grid--offset-medium .about-split-copy,
    .about-split-grid--offset-large .about-split-copy {
        margin-top: clamp(0.9rem, 4.5vw, 1.8rem);
    }

    .about-display--claim {
        font-size: clamp(2.8rem, 14vw, 7.2rem);
    }

    .about-display--split {
        font-size: clamp(2.4rem, 12vw, 6.2rem);
    }

    .about-copy-col {
        justify-self: start;
        max-width: 60ch;
    }


    .about-image-title {
        font-size: clamp(2.2rem, 12vw, 5rem);
    }


    .about-cta-title {
        font-size: clamp(2.2rem, 12vw, 5.4rem);
    }
}

@media (max-width: 40rem) {
    .home-work-actions {
        justify-content: flex-start;
    }
    .section--work-overview {
        padding-block: clamp(2.1rem, 10vw, 4.2rem);
    }
    .section--work-overview--mk-layout {
        padding-block-start: clamp(0.8rem, 3.8vw, 1.6rem);
    }
    .work-grid--portfolio {
        grid-template-columns: 1fr;
    }

    .case-header-media {
        min-height: 92svh;
        height: 100svh;
    }


    .case-related-heading h2 {
        font-size: clamp(2rem, 12vw, 3.1rem);
    }

    .button--home-cases {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .motion-stack-panel,
    .motion-overlap-panel,
    .motion-transition-panel {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }
    [data-animate~="section-reveal"],
    .animate-section,
    [data-animate~="text-reveal"] .text-line,
    .animate-text .text-line,
    [data-animate~="text-reveal"] .about-display-line,
    .animate-text .about-display-line,
    [data-animate~="text-reveal"] .people-page-title-line,
    .animate-text .people-page-title-line,
    [data-animate~="media-reveal"],
    .animate-media,
    [data-animate~="media-reveal"] .work-card-media__asset,
    .animate-media .work-card-media__asset,
    [data-animate~="media-reveal"] .case-media-item-frame,
    .animate-media .case-media-item-frame,
    [data-animate~="media-reveal"] .about-image-media,
    .animate-media .about-image-media,
    [data-animate~="stagger-children"] > *,
    .animate-stagger > *,
    [data-animate~="section-wipe"],
    .animate-section-wipe {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: inset(0 0 0 0) !important;
        transition: none !important;
        animation: none !important;
    }

    [data-animate~="section-wipe"]::before,
    .animate-section-wipe::before {
        transform: scaleY(0) !important;
        transition: none !important;
    }
    .hero-video-embed {
        display: none;
    }

    .hero-video-poster {
        opacity: 1;
    }

    .about-logo-marquee-strip {
        animation: none;
        transform: translateX(0);
    }

    .people-team-card__info {
        transition: none;
    }
}

/* ============================================================
   Jobs (Phase 2.7) – Übersicht & Detail
   Grün-gelbes Layout nach 7-Jobs._v2, kein dunkles Card-Raster.
   ============================================================ */
.section--jobs-intro,
.section--jobs-media,
.section--jobs-list,
.section--jobs-initiative,
.section--job-detail-hero,
.section--job-application {
    background: var(--color-home-claim);
    color: #0a0d14;
}

.jobs-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

/* ---- Übersicht: Intro ---- */
.section--jobs-intro {
    padding-block: clamp(120px, 16vh, 220px) clamp(1.4rem, 4vw, 3rem);
}

.jobs-intro-title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.6rem, 7.4vw, 6.6rem);
    line-height: 0.98;
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.jobs-intro-title .text-line {
    display: block;
}

.jobs-intro-copy {
    margin-top: clamp(1.4rem, 3vw, 2.4rem);
    max-width: 54ch;
    display: grid;
    gap: var(--space-4);
}

.jobs-intro-copy p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    line-height: 1.5;
}

/* ---- Übersicht: Header-Media (full bleed) ---- */
.section--jobs-media {
    padding-block: clamp(0.6rem, 2vw, 1.6rem);
}

.jobs-media {
    width: 100%;
}

.jobs-media__asset {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82svh;
    object-fit: cover;
    object-position: center 38%;
}

/* ---- Übersicht: Jobliste ---- */
.section--jobs-list {
    padding-block: clamp(2rem, 6vw, 4.6rem);
}

.jobs-list {
    display: grid;
    gap: clamp(1.2rem, 3.2vw, 2.8rem);
}

.job-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    color: #0a0d14;
    text-decoration: none;
    padding-block: clamp(0.4rem, 1.2vw, 0.9rem);
}

.job-link-row:hover,
.job-link-row:focus-visible {
    text-decoration: none;
}

.job-link-row__title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 6.2vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-link-row__title-line {
    display: block;
}

.job-link-row__arrow {
    flex: 0 0 auto;
    width: clamp(2.4rem, 5vw, 4.4rem);
    color: #0a0d14;
    transition: transform 220ms ease;
}

.job-link-row__arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (hover: hover) and (pointer: fine) {
    .job-link-row:hover .job-link-row__arrow,
    .job-link-row:focus-visible .job-link-row__arrow {
        transform: translate(6px, -6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-link-row__arrow {
        transition: none;
    }
}

/* ---- Übersicht: Initiativbewerbung ---- */
.section--jobs-initiative {
    padding-block: clamp(1.6rem, 5vw, 3.6rem) clamp(2.6rem, 8vw, 6rem);
}

.jobs-initiative-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 4rem);
    align-items: start;
}

.jobs-initiative-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 5.8vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.jobs-initiative-title-line {
    display: block;
}

.jobs-initiative-body {
    display: grid;
    gap: var(--space-4);
    max-width: 46ch;
}

.jobs-initiative-body p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.5;
}

.jobs-initiative-button {
    justify-self: start;
    margin-top: clamp(0.4rem, 1.4vw, 0.9rem);
}

/* ---- Detail: Hero (grün) ---- */
.section--job-detail-hero {
    padding-block: clamp(120px, 16vh, 220px) clamp(1.2rem, 3vw, 2.2rem);
}

.job-detail-hero-grid {
    display: block;
}

.job-detail-hero-title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6.6vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-detail-hero-title .text-line {
    display: block;
}

.job-detail-hero-department {
    margin: clamp(0.7rem, 1.5vw, 1.15rem) 0 0;
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    line-height: 1.2;
}

.job-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.3rem, 3.2vw, 2.8rem);
    margin-top: clamp(1.3rem, 3.2vw, 2.6rem);
}

.job-detail-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    line-height: 1.2;
}

.job-detail-hero-meta-icon {
    display: inline-flex;
    width: 1.35em;
    height: 1.35em;
}

.job-detail-hero-meta-icon svg {
    width: 100%;
    height: 100%;
}

/* ---- Detail: Inhalt (weiß) ---- */
.section--job-detail-content {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.4rem, 6vw, 5rem);
}

.job-detail-content {
    max-width: var(--container-wide);
    margin-inline: auto;
    display: grid;
    gap: clamp(1.8rem, 3.6vw, 3.2rem);
}

.job-detail-intro__heading {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.job-detail-intro__subheading {
    margin: clamp(0.7rem, 1.5vw, 1.15rem) 0 0;
    max-width: 30ch;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: 0;
    color: rgba(10, 13, 20, 0.82);
}

.job-detail-lead {
    margin: 0;
    max-width: 74ch;
    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
    line-height: 1.6;
}

.job-detail-block__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: 0;
}

.job-detail-block__text {
    margin: 0 0 var(--space-3);
    max-width: 72ch;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.55;
}

.job-detail-block__list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.45;
}

.job-detail-block__note {
    margin: var(--space-3) 0 0;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.4;
}

.job-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start;
}

/* ---- Detail: Bewerbungsblock (grün) ---- */
.section--job-application {
    padding-block: clamp(2.6rem, 7vw, 5rem);
}

.job-application-inner {
    max-width: var(--container-default);
    margin-inline: auto;
    display: grid;
    justify-items: start;
    gap: clamp(1.1rem, 2.6vw, 1.8rem);
}

.job-application-lead {
    margin: 0;
    max-width: 26ch;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.6vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-application-contact {
    display: grid;
    gap: 0.35rem;
}

.job-application-name {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    color: rgba(10, 13, 20, 0.75);
}

.job-application-mail {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.05;
    color: #0a0d14;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 2px;
    word-break: break-word;
}

.job-application-mail:hover,
.job-application-mail:focus-visible {
    text-decoration-thickness: 3px;
}

.job-application-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.4vw, 1rem);
    margin-top: clamp(0.3rem, 1vw, 0.7rem);
}

.button--home-cases-solid {
    background: #0a0d14;
    color: #ffffff;
    border-color: #0a0d14;
}

.button--home-cases-solid:hover,
.button--home-cases-solid:focus-visible {
    background: #000000;
    border-color: #000000;
}

@media (max-width: 64rem) {
    .jobs-initiative-grid {
        grid-template-columns: 1fr;
    }

    .job-detail-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .section--jobs-intro,
    .section--job-detail-hero {
        padding-block-start: clamp(104px, 26vw, 150px);
    }

    .jobs-initiative-button,
    .job-application-actions .button {
        width: 100%;
    }
}

/* ============================================================
   Contact (Phase 2.8) – dunkles Layout nach 8-Kontaktformular
   Kein Card-/Box-Stil, Underline-Inputs, Pill-Outline-Button.
   ============================================================ */
.section--contact-intro {
    padding-block: clamp(120px, 16vh, 220px) clamp(1rem, 2.5vw, 2rem);
}

.section--contact-form {
    padding-block: 0 clamp(3rem, 8vw, 6rem);
}

.contact-stage {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--edge-x);
}

.contact-title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.6rem, 7.4vw, 6.6rem);
    line-height: 0.98;
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.contact-title .text-line {
    display: block;
}

.contact-direct {
    margin-top: clamp(1.3rem, 3vw, 2.2rem);
    display: grid;
    gap: 0.15rem;
    justify-items: start;
}

.contact-direct__link {
    color: var(--color-text);
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 1px;
    word-break: break-word;
}

.contact-direct__link:hover,
.contact-direct__link:focus-visible {
    text-decoration-thickness: 2px;
}

.contact-form {
    width: 100%;
    max-width: min(100%, 58rem);
    margin-top: clamp(1.6rem, 4vw, 3rem);
}

.contact-form-grid {
    display: grid;
    gap: clamp(1.3rem, 3vw, 2.1rem);
}

.contact-field {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.contact-field__label {
    font-size: clamp(0.95rem, 1.1vw, 1.12rem);
    line-height: 1.3;
    color: rgba(245, 247, 255, 0.72);
}

.contact-field__control {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 247, 255, 0.32);
    border-radius: 0;
    padding: 0.55rem 0;
    color: var(--color-text);
    font: inherit;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.4;
    transition: border-color 160ms ease;
}

.contact-field__control:focus {
    outline: none;
    border-bottom-color: var(--color-text);
    border-bottom-width: 2px;
}

.contact-field__control:focus-visible {
    outline: none;
}

.contact-field__control--textarea {
    min-height: clamp(8.5rem, 18vh, 13rem);
    resize: vertical;
}

.contact-form-actions {
    margin-top: clamp(1.8rem, 4.5vw, 3.2rem);
    display: flex;
    justify-content: center;
}

.button--contact-submit {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: var(--type-button);
    line-height: 1.2;
    padding: clamp(10px, 1vw, 16px) clamp(28px, 3vw, 54px);
    min-height: clamp(48px, 3.4vw, 60px);
}

.button--contact-submit:hover,
.button--contact-submit:focus-visible {
    background: var(--color-text);
    color: #05070f;
    border-color: var(--color-text);
}

@media (max-width: 40rem) {
    .contact-form-actions {
        justify-content: stretch;
    }

    .button--contact-submit {
        width: 100%;
    }
}