.hero.cinematic-hero{display:block;background:#101311;isolation:auto}
.cinematic-actions .button>span{font:inherit;line-height:inherit}
.cinematic-actions .hero-buttons .button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px}.hero-cta-arrow{display:block;flex:0 0 24px;width:24px;height:24px;color:inherit}
.cinematic-media{position:relative;height:clamp(320px,48vw,660px);overflow:hidden;background:#19221c;--zoom:1}
.cinematic-scene,.cinematic-layer{position:absolute;inset:0}.cinematic-scene[hidden]{display:none}
.cinematic-layer{overflow:hidden}.cinematic-layer img{width:100%;height:100%;object-fit:cover;transform:translate(var(--camera-x,0%),var(--camera-y,0%)) scale(var(--zoom));transform-origin:center;will-change:transform}
.cinematic-layer.move-in{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.cinematic-labels{position:absolute;inset:24px 4% auto;display:flex;justify-content:space-between;gap:16px;pointer-events:none}
.cinematic-labels span{background:#101311c9;color:#f2dfb5;font-size:.8rem;letter-spacing:.14em;padding:9px 14px;backdrop-filter:blur(8px)}.cinematic-labels span:last-child{margin-left:auto}
.cinematic-wipe{position:absolute;top:0;bottom:0;left:var(--reveal);width:2px;background:#e4c78c;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 16px #0005}
.cinematic-scenes,.cinematic-controls{display:flex;align-items:center;gap:14px}.cinematic-toolbar button{background:transparent;color:#c7cbc2;font-size:.875rem;min-height:44px;padding:8px 12px;border:1px solid transparent}.cinematic-scenes button[aria-pressed=true]{color:#e4c78c;border-bottom-color:#e4c78c}.cinematic-controls label{font-size:.875rem}.cinematic-controls input{width:110px;accent-color:#c8ac71}.cinematic-controls button{border-color:#68705e}
.hero.cinematic-hero .hero-content{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;padding-block:48px 60px}.hero.cinematic-hero h1{font-size:clamp(2.9rem,4.4vw,5rem)}.cinematic-actions .hero-buttons{flex-direction:column;align-items:flex-start;margin-top:0}
@media(max-width:760px){.cinematic-media{height:clamp(290px,65vw,480px)}.cinematic-labels{inset:16px 16px auto}.cinematic-labels span{font-size:.75rem;padding:7px 9px;letter-spacing:.08em}.hero.cinematic-hero .hero-content{grid-template-columns:1fr;gap:28px;padding-block:32px 40px}.cinematic-toolbar{gap:6px;padding-block:10px}.cinematic-controls{width:100%;justify-content:space-between;gap:8px}.cinematic-controls input{flex:1;max-width:180px}.cinematic-scenes{width:100%;justify-content:space-between}.cinematic-actions .hero-buttons{align-items:stretch}}
.hero.cinematic-hero{position:relative;min-height:0}
.cinematic-media{height:clamp(680px,76vh,860px);--slant:6%;isolation:isolate}
.cinematic-media::after{content:"";position:absolute;inset:20% 0 0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(7,14,12,.97),rgba(7,14,12,.72) 37%,rgba(7,14,12,0) 100%)}
.cinematic-layer.move-in{clip-path:polygon(0 0,calc(var(--reveal) + var(--slant)) 0,calc(var(--reveal) - var(--slant)) 100%,0 100%)}
.cinematic-media[data-side=ready] .cinematic-layer.move-in{clip-path:inset(0)}
.cinematic-media[data-side=work] .cinematic-layer.move-in{clip-path:inset(0 100% 0 0)}
.cinematic-wipe{inset:0;width:auto;transform:none;z-index:2;box-shadow:none;clip-path:polygon(calc(var(--reveal) + var(--slant) - 1px) 0,calc(var(--reveal) + var(--slant) + 1px) 0,calc(var(--reveal) - var(--slant) + 1px) 100%,calc(var(--reveal) - var(--slant) - 1px) 100%)}
.cinematic-media[data-side=ready] .cinematic-wipe,.cinematic-media[data-side=work] .cinematic-wipe{display:none}
.cinematic-labels{z-index:2}
.hero.cinematic-hero .hero-content{position:absolute;left:0;right:0;bottom:0;z-index:3;color:white;padding-block:28px 58px}
.hero.cinematic-hero .hero-content .eyebrow{color:#e4c78c}
@media(max-width:760px){.hero.cinematic-hero .cinematic-media{height:max(660px,calc(100svh - 84px));--slant:9%}.hero.cinematic-hero .hero-content{position:absolute;grid-template-columns:1fr;gap:24px;padding-block:26px 34px}.hero.cinematic-hero h1{font-size:clamp(2.75rem,8vw,3.8rem)}.cinematic-actions .hero-buttons{max-width:none}.cinematic-media::after{inset:12% 0 0;background:linear-gradient(0deg,rgba(7,14,12,.98),rgba(7,14,12,.76) 40%,rgba(7,14,12,0) 100%)}}
@media(prefers-reduced-motion:reduce){.cinematic-layer img{will-change:auto}}