/* astra1 2026-11-03 — original on-demand motion explainers. */
.service-film-section{padding:clamp(70px,7vw,200px) var(--pad);background:#0b2219}.service-film-heading{display:grid;grid-template-columns:1fr 2fr;gap:25px 8vw;align-items:start;margin-bottom:50px}.service-film-heading>.eyebrow{font-size:11px;letter-spacing:.14em;color:#9dc6ae}.service-film-heading h2{font-size:clamp(42px,5vw,145px);line-height:1.05}.service-film-heading h2 i{color:#ff2424}.service-film-heading p{grid-column:2;max-width:35em;color:#b4c8bb;font-size:clamp(16px,1.2vw,28px)}.service-film-player{position:relative;max-width:1500px;margin:auto;aspect-ratio:16/9;border:1px solid #95c5aa40;border-radius:24px;overflow:hidden;box-shadow:0 35px 65px #0006}.service-film-player video{display:block;width:100%;height:100%;background:#06110c}.service-film-play{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #ff2439;border-radius:40px;padding:16px 30px;background:#081b14f5;box-shadow:0 0 35px #ff243933;color:#e1eee5;font-size:clamp(14px,1.1vw,24px)}.service-film-play:hover{background:#741122}.service-film-play[hidden]{display:none}.service-film-play span{margin-left:15px}.service-film-transcript{max-width:1500px;margin:35px auto 0;border-top:1px solid #9ac3aa44;padding-top:20px}.service-film-transcript summary{display:flex;justify-content:space-between;cursor:pointer;font-size:17px;list-style:none;min-height:44px}.service-film-transcript summary span{color:#ff2439}.service-film-transcript p{font-size:clamp(16px,1vw,23px);max-width:60em;margin:20px 0}.service-film-transcript strong{color:#e2ece4!important}@media(max-width:750px){.service-film-heading{grid-template-columns:1fr;gap:20px}.service-film-heading p{grid-column:1}.service-film-player{border-radius:14px}.service-film-play{padding:12px 18px;font-size:13px;bottom:15%}.service-film-transcript summary{font-size:15px}}
/* astra1 2026-11-03 — a cinema stage, with chapters that explain the image. */
.cinematic-section{background:#081a13!important;position:relative;overflow:hidden}.cinematic-section .service-film-heading{grid-template-columns:.65fr 1.8fr;max-width:2200px;margin:0 auto 60px}.cinematic-section .service-film-heading h2{font-size:clamp(36px,4.8vw,120px)}.cinematic-player{max-width:2000px;border:0;border-radius:22px;box-shadow:0 45px 90px #0009;isolation:isolate}.cinematic-player video{object-fit:cover;aspect-ratio:16/9}.cinematic-player .service-film-play{bottom:auto;top:50%;transform:translate(-50%,-50%);padding:20px 32px;background:#07150eef;backdrop-filter:blur(16px);font-size:clamp(15px,1.1vw,24px)}.cinema-label{position:absolute;top:25px;left:30px;padding:8px 12px;background:#06110cb0;font-size:9px;letter-spacing:.14em;pointer-events:none;color:#b7ccbe}.cinema-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:2000px;margin:38px auto 0}.cinema-chapter{position:relative;text-align:left;padding:25px 0 30px;border:0;border-top:1px solid #98bba54d;color:#d6e6db;background:transparent;cursor:pointer}.cinema-chapter>span{color:#ff283b;font-size:11px;letter-spacing:.12em}.cinema-chapter strong{display:block;font-size:clamp(21px,1.8vw,40px);font-weight:400;line-height:1.15;margin:20px 0;color:#dce7df!important}.cinema-chapter small{display:block;font-size:clamp(15px,1vw,22px);line-height:1.6;color:#a5c0b0;max-width:34em}.cinema-chapter b{position:absolute;left:0;top:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--chapter-progress,0));background:#ff2638;box-shadow:0 0 14px #ff2439}.cinema-chapter:hover strong,.cinema-chapter.active strong{color:#ff303f!important}.cinema-chapter:focus-visible{outline:2px solid #d4ebdc;outline-offset:7px}.cinematic-section .service-film-transcript{max-width:2000px}.cinematic-section .service-film-heading p{font-size:clamp(16px,1.2vw,25px)}
@media(max-width:750px){.cinematic-section .service-film-heading{grid-template-columns:1fr;margin-bottom:30px}.cinematic-section .service-film-heading p{grid-column:1}.cinema-chapters{grid-template-columns:1fr;gap:0;margin-top:20px}.cinema-chapter{padding:20px 0 24px}.cinema-chapter strong{font-size:24px;margin:12px 0}.cinema-chapter small{font-size:16px}.cinema-label{top:10px;left:10px;font-size:7px;padding:5px}.cinematic-player .service-film-play{padding:13px 18px;font-size:13px}.cinematic-player{border-radius:15px}}
