/* Claude layout round 1 (2026-10-19): media framing, hero hierarchy, page rhythm. Loaded last. */

/* 1. Media framing: frames match the 16:9 films; vertical covers sit on a blurred fill instead of black bars. */
.gallery .film-image,.hero-card .film-image,.hero-card:first-child .film-image{aspect-ratio:16/9}
.hero-card .film-image img,.hero-preview{object-fit:cover}
.film-image.is-portrait{background:#0d1422}
.film-image.is-portrait::before{content:"";position:absolute;inset:-30px;background:var(--cover) center/cover;filter:blur(26px) saturate(1.15) brightness(.82);opacity:.9}
.film-image.is-portrait img{position:relative}
/* Service previews: half-width frames, so every cover gets the fill. */
.use-preview{position:relative;overflow:hidden;background:#0d1422}
.use-preview::before{content:"";position:absolute;inset:-30px;background:var(--cover) center/cover;filter:blur(26px) saturate(1.15) brightness(.82);opacity:.9}
.use-preview img{position:relative}

/* 3. Hero: main card leads, side cards sit back with a gentle tilt and keep playing. */
.hero{padding-top:118px}
.hero h1{font-size:clamp(58px,6.4vw,92px)}
.hero-showcase{width:min(1240px,calc(100% - 64px));margin-top:30px}
.hero-card:nth-child(2){transform:rotate(-2deg) translateY(26px) scale(.95)}
.hero-card:nth-child(3){transform:rotate(2deg) translateY(26px) scale(.95)}
.hero-card:nth-child(2).is-playing{transform:rotate(-2deg) translateY(26px) scale(.95)}
.hero-card:nth-child(3).is-playing{transform:rotate(2deg) translateY(26px) scale(.95)}
.hero-card:not(:first-child) .film-caption p{opacity:0;transition:opacity .3s}
.hero-card:not(:first-child):hover .film-caption p,.hero-card:not(:first-child):focus-within .film-caption p{opacity:1}
.preview-controls{margin-top:18px}

/* 5. Rhythm: tighter promise strip joined to the hero, workspace mirrored so media alternates sides. */
.promise{padding-block:22px 40px}
.promise>div{margin-top:16px}
@media(min-width:821px){
 .workspace-tour{grid-template-columns:minmax(0,1fr) 300px}
 .workspace-tour .real-tabs{order:2}
}
@media(max-width:1100px) and (min-width:821px){.workspace-tour{grid-template-columns:minmax(0,1fr) 245px}}

@media(max-width:640px){
 .hero{padding-top:108px}
 .hero h1{font-size:52px}
 .hero-note{display:none}
 .hero-showcase{margin-top:22px}
 .hero-card:nth-child(n),.hero-card:nth-child(n).is-playing{transform:none}
 .hero-card:not(:first-child) .film-caption p{opacity:1}
 .promise{padding-block:18px 30px}
 /* Two-up portfolio on phones: 12 films in six rows instead of a 4,000px column. */
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 /* Square frames; every cover stays uncropped on the blurred fill. */
 .gallery .film-image{aspect-ratio:1;border-radius:12px;background:#0d1422}
 .gallery .film-image::before{content:"";position:absolute;inset:-30px;background:var(--cover) center/cover;filter:blur(26px) saturate(1.15) brightness(.82);opacity:.9}
 .gallery .film-image img{position:relative}
 .gallery .film-label{font-size:9px;left:8px;top:8px;padding:4px 7px}
 .gallery .film-duration{font-size:9px;left:8px;bottom:8px}
 .gallery .play-icon{width:30px;height:30px;font-size:10px;right:8px;bottom:8px}
 .gallery .film-caption{padding-top:10px}
 .gallery .film-caption h3{font-size:15px;line-height:1.25}
 .gallery .film-caption p{font-size:12px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.hero-card:nth-child(n),.hero-card:nth-child(n).is-playing{transform:none}}

/* C07 / C08: portrait films and readable, purpose-cropped workspace details. */
@media(min-width:641px){
 .hero-showcase{grid-template-columns:1fr 2.1fr 1fr;max-width:1120px;gap:30px}
 .hero-card.portrait-preview{width:100%;max-width:190px;justify-self:center}
 .hero-card.portrait-preview .film-caption{padding:12px}
 .hero-card.portrait-preview .film-caption h3{font-size:16px}
}
.hero-card.portrait-preview .film-image{aspect-ratio:9/16}
.hero-card.portrait-preview .film-image img,.hero-card.portrait-preview .hero-preview{object-fit:contain}
.real-screen{aspect-ratio:16/10}
.real-screen img{width:100%;height:100%;object-fit:contain;transform:none}
.tour-stage.overview-view .real-screen img{object-fit:contain;transform:none}
@media(max-width:640px){
 .hero-showcase{width:100%;align-items:center}
 .hero-card.portrait-preview{flex-basis:62%}
 .real-screen{aspect-ratio:16/10}
 .real-screen img{object-fit:contain;object-position:center}
}
@media(max-width:640px){.hero-showcase{align-items:flex-start}}

/* Clear customer-facing collaboration steps, replacing the internal UI demo. */
.collaboration-section{padding:88px 0;background:linear-gradient(155deg,#eff7ff,#f7faff 70%,#fffefa)}
.collaboration-section .center-heading{max-width:760px;margin:0 auto 46px}
.collaboration-steps{gap:24px;counter-reset:step}
.collaboration-steps .collaboration-step{padding:30px;background:#fff;border:1px solid #dce7f3;border-radius:20px;position:relative}
.collaboration-steps .step-number{width:42px;height:42px;background:#eaf2ff;color:#2457df;border:0;font-size:13px}
.collaboration-step h3{font-size:26px;margin:25px 0 16px;line-height:1.2;max-width:250px}
.collaboration-step p{font-size:16px;line-height:1.7;color:#58667b}
.collaboration-step .step-result{margin-top:28px;padding-top:18px;border-top:1px solid #e7eef6;color:#254570;font-size:13px;font-weight:550}
.collaboration-footer{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:32px}.collaboration-footer p{max-width:670px;font-size:15px;line-height:1.7;color:#58667b}.collaboration-footer .button{flex-shrink:0}
.collaboration-section .timing{max-width:800px;margin:28px auto 0;font-size:12px}
@media(max-width:1000px){.collaboration-steps{gap:16px}.collaboration-steps .collaboration-step{padding:24px}.collaboration-step h3{font-size:23px}.collaboration-footer{gap:24px}}
@media(max-width:640px){.collaboration-section{padding:55px 0}.collaboration-section .center-heading{margin-bottom:28px}.collaboration-steps{grid-template-columns:1fr}.collaboration-step h3{max-width:none;margin-top:20px}.collaboration-step .step-result{margin-top:20px}.collaboration-footer{display:block}.collaboration-footer .button{width:100%;margin-top:22px;font-size:14px}.collaboration-section .timing{text-align:left}}