/* Detail players preserve the complete frame; the home hero fills its viewport. */
.workflow-player { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workflow-player__picture { position: relative; flex: 1; min-height: 0; aspect-ratio: 16 / 9; background: #050606; overflow: hidden; }
.workflow-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.workflow-player__controls { display: flex; flex-shrink: 0; align-items: center; gap: 14px; min-height: 44px; color: #d6d5cf; }
.workflow-player__controls[hidden] { display: none; }
.workflow-player__controls button { min-height: 44px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font-size: 11px; white-space: nowrap; }
.workflow-player__controls button:first-child { min-width: 34px; text-align: left; }
.workflow-player__controls output { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.workflow-player__controls input { --seek: 0%; appearance: none; -webkit-appearance: none; flex: 1; width: 0; min-width: 35px; height: 36px; margin: 0; cursor: ew-resize; background: transparent; touch-action: none; }
.workflow-player__controls input::-webkit-slider-runnable-track { box-sizing: border-box; height: 12px; border: 1px solid #e5be8899; border-radius: 2px; background: linear-gradient(to right, #e5be88 var(--seek), #171a1be6 var(--seek)); }
.workflow-player__controls input::-moz-range-track { box-sizing: border-box; height: 12px; border: 1px solid #e5be8899; border-radius: 2px; background: #171a1be6; }
.workflow-player__controls input::-moz-range-progress { height: 10px; border-radius: 1px; background: #e5be88; }
.workflow-player__controls input::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 18px; margin-top: -4px; border-radius: 1px; background: #fff0d7; border: 0; }
.workflow-player__controls input::-moz-range-thumb { width: 4px; height: 18px; border-radius: 1px; background: #fff0d7; border: 0; }
.workflow-player__controls input:focus-visible { outline: 1px solid #e5be88; outline-offset: 3px; }
.workflow-player__controls input:disabled { opacity: .3; cursor: wait; }
.workflow-player__status { font-size: 11px; color: #e5be88; }
.workflow-player__status:empty { display: none; }

/* Home: edge-to-edge moving image with the same centered hierarchy as project 0. */
.cinema-home { position: absolute; inset: 0; isolation: isolate; }
.cinema-home__heading { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(82vw, 1000px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; text-shadow: 0 2px 24px #0009; pointer-events: none; }
.cinema-home__kicker > span { white-space: nowrap; }
.cinema-home__kicker .project-tool { text-transform: none; }
.cinema-home__kicker .project-tool-logo { width: 14px; height: 14px; flex-basis: 14px; }
.cinema-home__kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; color: #eeece4; font-size: var(--home-project-meta-size); letter-spacing: .1em; text-transform: uppercase; }
.home-page .cinema-home .cinema-home__title { position: static; transform: none; display: block; width: auto; max-width: none; padding: 0; font-size: var(--home-project-title-size); line-height: .98; letter-spacing: -.05em; white-space: normal; text-align: center; pointer-events: auto; }
.cinema-home__title span { display: block; }
.cinema-home__meta { display: flex; align-items: center; gap: 20px; font-size: var(--home-project-meta-size); letter-spacing: .035em; }

.cinema-home > .workflow-player { position: absolute; inset: 0; }
.cinema-home .workflow-player__picture { position: absolute; inset: 0; aspect-ratio: auto; }
.cinema-home .workflow-player__picture::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0005, transparent 25%, #0003 50%, transparent 68%, #0009); }
.cinema-home .workflow-player video { object-fit: cover; }
.cinema-home .workflow-player__controls { position: absolute; z-index: 5; left: clamp(24px, 7vw, 130px); right: clamp(24px, 7vw, 130px); bottom: 108px; min-height: 54px; padding: 0; background: none; color: #fff; text-shadow: 0 1px 8px #000; transition: opacity 1.2s ease-in-out; }
.cinema-home .workflow-player__status { position: absolute; z-index: 5; left: 7vw; bottom: 172px; padding: 6px 10px; background: #050709b3; }
.comparison-title-link { color: inherit; text-decoration: none; pointer-events: auto; }
.comparison-title-link:focus-visible { outline: 1px solid #e5be88; outline-offset: 8px; }
.home-page .deck-card--comparison .comparison-copy em { padding: 11px 20px; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .06em; text-transform: none; }
.home-page .deck-card--comparison .comparison-copy em::after { content: none; }
.cinema-home .workflow-player__controls[data-visible="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
.project-deck.is-strip .cinema-home { inset: 0; }
.project-deck.is-strip .cinema-home__heading, .project-deck.is-strip .workflow-player__controls, .project-deck.is-strip .workflow-player__status { display: none; }
.project-deck.is-strip .workflow-player { height: 100%; pointer-events: none; }
.project-deck.is-strip .workflow-player__picture { aspect-ratio: auto; }
.project-deck.is-strip .workflow-player video { object-fit: cover; }

/* The page title is a full cinema banner, separate from the pinned story controls. */
.ai-cinema-banner { position: relative; isolation: isolate; min-height: 520px; height: min(76svh, 850px); padding: 150px var(--pad) 58px; display: flex; align-items: end; justify-content: space-between; overflow: hidden; border-bottom: 1px solid var(--line); background: #080b0e; }
.ai-cinema-banner__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: .7; }
.ai-cinema-banner::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #06090ded 0%, #06090d8c 52%, #06090d26), linear-gradient(0deg, #07090cd9, transparent 60%); }
.ai-cinema-banner__copy { position: relative; }
.ai-cinema-banner__label { margin: 0 0 30px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #e5be88; }
.ai-cinema-banner h1 { margin: 0; font-size: clamp(76px, 11.5vw, 180px); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
.ai-cinema-banner h1 em { font-style: normal; color: #e5e3dc; }
.ai-cinema-banner__subtitle { margin: 30px 0 0; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -.025em; color: #c6c6c1; }
.ai-cinema-banner__index { display: flex; flex-direction: column; gap: 12px; padding-bottom: 3px; color: #d9d8d1; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 680px) {
  .ai-cinema-banner { min-height: 480px; height: 70svh; padding-top: 150px; padding-bottom: 38px; align-items: end; }
  .ai-cinema-banner h1 { font-size: clamp(55px, 14vw, 92px); }
  .ai-cinema-banner__label { font-size: 9px; margin-bottom: 24px; }
  .ai-cinema-banner__subtitle { margin-top: 24px; }
  .ai-cinema-banner__index { display: none; }
}

/* Native scrolling advances two stories within one pinned editorial canvas. */
.ai-workflows { --workflow-top: 100px; --workflow-accent: #e5be88; padding: var(--workflow-top) var(--pad) 40px; border-bottom: 1px solid var(--line); }
.content-page:has(.ai-workflows) .site-header { background: #0b0b0b; }
.ai-workflows__pin { max-width: 1720px; margin: 0 auto; }
.ai-workflows__eyebrow { display: flex; gap: 24px; align-items: center; padding: 12px 0 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.ai-workflows__eyebrow > p { color: var(--ink); margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .12em; }
.ai-workflows__eyebrow > span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-workflows__layout { display: grid; grid-template-columns: clamp(180px, 18vw, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 68px); padding-top: 22px; min-height: 0; }
.ai-workflows__directory { display: flex; flex-direction: column; gap: 26px; align-self: center; border-left: 1px solid var(--line); }
.ai-workflows__directory a { position: relative; display: grid; gap: 12px; padding-left: 18px; text-decoration: none; color: var(--muted); font-size: 11px; line-height: 1.5; transition: color .35s; }
.ai-workflows__directory a::before { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--workflow-accent); transition: transform .35s; }
.ai-workflows__directory a[aria-current="true"] { color: var(--ink); }
.ai-workflows__directory a[aria-current="true"]::before { transform: scaleY(1); }
.ai-workflows__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; opacity: .38; transition: opacity .35s; }
.ai-workflows__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-workflows__directory a:is([aria-current="true"], :hover) .ai-workflows__thumb { opacity: 1; }
.ai-workflows__directory b { display: block; margin-bottom: 3px; font-weight: 400; color: var(--workflow-accent); font-size: 9px; letter-spacing: .06em; }
.ai-workflows__directory a > span:last-child { white-space: nowrap; }
.ai-workflows__directory small { display: inline; font-size: inherit; }
.ai-workflows__scroll { margin: 6px 0 0 18px; font-size: 9px; color: var(--muted); }
.ai-workflows__scroll span { display: block; margin-top: 12px; font-size: 20px; }
.ai-workflows__stage { min-width: 0; min-height: 0; }
.ai-workflows__item { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: calc(var(--workflow-top) + 12px); }
.ai-workflows__item + .ai-workflows__item { margin-top: 80px; }
.ai-workflows__title p { margin: 0 0 12px; color: var(--workflow-accent); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.ai-workflows__title h2 { margin: 0; font-size: clamp(44px, min(6.3vw, 8svh), 82px); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.ai-workflows__title em { font-style: normal; color: #aaa9a3; }
.ai-workflows__description { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; flex-shrink: 0; }
.ai-workflows__description h3 { margin: 0 0 8px; font-weight: 400; font-size: 15px; letter-spacing: -.02em; }
.ai-workflows__description p { margin: 0; max-width: 760px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-workflows__credits { display: flex; flex-direction: column; gap: 12px; align-items: end; font-size: 10px; white-space: nowrap; }
.ai-workflows__credits time { color: var(--muted); }
.ai-workflows.is-enhanced { height: 250svh; padding-bottom: 0; }
.ai-workflows.is-enhanced .ai-workflows__pin { position: sticky; top: var(--workflow-top); height: calc(100svh - var(--workflow-top)); display: flex; flex-direction: column; padding-bottom: 28px; }
.ai-workflows.is-enhanced .ai-workflows__layout { flex: 1; }
.ai-workflows.is-enhanced .ai-workflows__stage { position: relative; }
.ai-workflows.is-enhanced .ai-workflows__item { position: absolute; inset: 0; margin: 0; opacity: 1; transform: translateY(0); transition: opacity .38s, transform .5s; }
.ai-workflows.is-enhanced .ai-workflows__item[aria-hidden="true"] { opacity: 0; transform: translateY(20px); pointer-events: none; visibility: hidden; }
.ai-workflows.is-enhanced .ai-workflows__item > .ab-compare, .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { flex: 1; min-height: 0; }

/* Reuse the About page's synchronized comparison and divider controls. */
.ai-workflows .ab-compare { --compare-split: 50%; display: flex; flex-direction: column; }
.ai-workflows .ab-compare__frame { position: relative; flex: 1; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #050505; isolation: isolate; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ai-workflows .ab-compare__frame video, .ai-workflows .ab-compare__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ai-workflows .ab-compare__after { z-index: 1; clip-path: inset(0 0 0 var(--compare-split)); }
.ai-workflows .ab-compare__label { position: absolute; z-index: 2; top: 14px; padding: 7px 10px; border-radius: 20px; background: #f5f4f0eb; color: #111; font-size: 9px; letter-spacing: .09em; line-height: 1; pointer-events: none; }
.ai-workflows .ab-compare__label--before { left: 14px; }
.ai-workflows .ab-compare__label--after { right: 14px; }
.ai-workflows .ab-compare__divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--compare-split); width: 1px; background: #ffffffcc; pointer-events: none; }
.ai-workflows .ab-compare__handle { position: absolute; z-index: 4; left: var(--compare-split); top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 56px; height: 64px; border: 0; padding: 0; background: transparent; cursor: ew-resize; touch-action: none; color: #17140e; }
.ai-workflows .ab-compare__handle > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffffcc; border-radius: 50%; background: #e8b676; font-size: 19px; }
.ai-workflows .ab-compare__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; flex-shrink: 0; min-height: 44px; color: var(--muted); font-size: 10px; }
.ai-workflows .ab-compare__controls p { margin: 0; }
.ai-workflows .ab-compare__play { min-height: 44px; margin-left: auto; padding: 8px 0 8px 16px; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.ai-workflows .ab-compare__status:not(:empty) { flex-basis: 100%; padding-bottom: 6px; }

@media (max-width: 680px) {
  .cinema-home__heading { width: calc(100vw - 64px); gap: 14px; }
  .home-page .cinema-home .cinema-home__title { font-size: clamp(32px, 8.5vw, 48px); }
  .cinema-home__kicker, .cinema-home__meta { font-size: 9px; }
  .cinema-home .workflow-player__controls { left: 18px; right: 18px; bottom: 152px; padding: 0; }
  .cinema-home .workflow-player__status { left: 18px; bottom: 212px; }
  .home-page .deck-card--comparison .comparison-copy em { font-size: 12px; padding: 8px 14px; }
  .ai-workflows__eyebrow { gap: 8px; padding: 5px 0 14px; }
  .ai-workflows__eyebrow > p { font-size: 10px; }
  .ai-workflows__eyebrow > span:nth-child(2) { display: none; }
  .ai-workflows__layout { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding-top: 20px; }
  .ai-workflows__directory { gap: 22px; }
  .ai-workflows__directory a { gap: 7px; padding-left: 8px; font-size: 9px; line-height: 1.4; }
  .ai-workflows__scroll { display: none; }
  .ai-workflows__directory a > span:last-child { white-space: normal; }
  .ai-workflows__thumb { aspect-ratio: 1; }
  .ai-workflows__title h2 { font-size: clamp(31px, 7.5vw, 48px); }
  .ai-workflows__title p { font-size: 8px; letter-spacing: .05em; line-height: 1.6; }
  .ai-workflows__item { gap: 18px; }
  .ai-workflows__description { grid-template-columns: 1fr; gap: 14px; }
  .ai-workflows__description h3 { font-size: 14px; }
  .ai-workflows__description p { font-size: 11px; line-height: 1.5; }
  .ai-workflows__credits { flex-direction: row; justify-content: space-between; font-size: 9px; }
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare, .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { flex: 0 0 auto; }
  .ai-workflows .workflow-player__picture, .ai-workflows .ab-compare__frame { flex: none; }
  .ai-workflows.is-enhanced .ai-workflows__item { justify-content: center; }
  .ai-workflows .ab-compare__controls { gap: 0 8px; font-size: 8px; }
  .ai-workflows .ab-compare__controls p span { display: none; }
  .ai-workflows .ab-compare__play { font-size: 9px; padding-left: 0; }
  .ai-workflows .ab-compare__label { top: 8px; font-size: 7px; padding: 5px 7px; }
  .ai-workflows .ab-compare__label--before { left: 8px; }
  .ai-workflows .ab-compare__label--after { right: 8px; }
  .workflow-player__controls { gap: 9px; }
  .ai-workflows .workflow-player__controls button { font-size: 9px; }
  .ai-workflows .workflow-player__controls output { font-size: 8px; }
}
@media (max-height: 650px) {
  .ai-workflows.is-enhanced { height: auto; padding-bottom: 40px; }
  .ai-workflows.is-enhanced .ai-workflows__pin { position: static; height: auto; }
  .ai-workflows.is-enhanced .ai-workflows__stage { min-height: 750px; }
  .ai-workflows.is-enhanced .ai-workflows__item { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-home .workflow-player__controls { transition: none; }
  .ai-workflows__item, .ai-workflows__directory a, .ai-workflows__thumb, .ai-workflows__directory a::before { transition: none !important; }
  .ai-workflows__directory { align-self: start; position: sticky; top: var(--workflow-top); }
}
/* Size the image and its controls as one 16:9 frame, without empty side panels. */
@media (min-width: 681px) and (min-height: 651px) {
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare,
  .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { container-type: size; align-items: start; justify-content: end; }
  .ai-workflows.is-enhanced .ab-compare__frame,
  .ai-workflows.is-enhanced .workflow-player__picture { flex: none; width: min(100cqw, calc((100cqh - 44px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
  .ai-workflows.is-enhanced .ab-compare__controls,
  .ai-workflows.is-enhanced .workflow-player__controls { width: min(100cqw, calc((100cqh - 44px) * 16 / 9)); }
}
/* Wide, shallow windows keep the large headline on one line to give the film more height. */
@media (min-width: 1200px) and (min-height: 651px) and (max-height: 850px) {
  .ai-workflows__title h2 { font-size: clamp(48px, 4.15vw, 62px); }
  .ai-workflows__title br { display: none; }
  .ai-workflows__title em::before { content: ' '; }
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare,
  .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { align-items: center; }
}
@media (min-width: 1025px) {
  .home-v2 .home-pagination { right: calc(max(clamp(18px, 3.3vw, 64px), env(safe-area-inset-right)) + 9 * clamp(68px, 5.2vw, 100px) + 58px); }
}
@media (orientation: portrait) and (max-width: 900px) {
  .home-page .deck-card--comparison .comparison-copy h1 { font-size: clamp(24px, 7vw, 38px); line-height: .98; }
  .home-page .deck-card--comparison .comparison-copy p,
  .home-page .deck-card--comparison .comparison-copy > span { font-size: 9px; }
}