/* Homepage flight: one film driven by scrolling. Without JavaScript the poster and steps stack. */
.flight-section{background:#fff}
.flight-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.flight-film img,.flight-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flight-film canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flight-film video{opacity:0;transition:opacity .4s ease}
.flight-section.is-ready .flight-film video{opacity:1}
.flight-steps{display:grid;gap:40px;margin:0;padding:clamp(40px,6vw,72px) var(--gutter);list-style:none}
.flight-step .eyebrow{margin-bottom:12px}
.flight-step h3{font-size:clamp(32px,3.6vw,54px);line-height:1.04;letter-spacing:-.035em}
.flight-step h3 em{color:var(--red)}
.flight-text{max-width:32em;margin-top:14px;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--graphite)}

/* Wide screens: the section is tall, the film stays pinned, and the scroll position moves through the shot. */
.flight-section.is-scrub{height:360vh}
.is-scrub .flight-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.is-scrub .flight-film{position:absolute;inset:0;aspect-ratio:auto}
.is-scrub .flight-steps{--edge:max(var(--gutter),calc((100% - 1440px)/2));position:absolute;right:var(--edge);top:calc(50% + 72px);display:grid;width:min(480px,38%);padding:0;gap:0;transform:translateY(-50%)}
.is-scrub .flight-step{grid-area:1/1;align-self:center;padding:30px 34px 32px;border-radius:var(--radius);background:#fffffff5;box-shadow:0 18px 50px #11131526;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.is-scrub .flight-step.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .4s ease}
.flight-rail{position:absolute;inset:88px 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:56px;background:var(--nardo);color:#fff}
.flight-rail[hidden]{display:none}
.flight-progress{position:absolute;inset:auto 0 0;height:3px;background:#ffffff40;pointer-events:none}
.flight-progress::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(var(--flight,0));transform-origin:left}
.flight-mark{border:0;border-left:1px solid #ffffff33;background:none;color:#fff;font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:.82;transition:background .25s,opacity .25s,color .25s}
.flight-mark:first-of-type{border-left:0}
.flight-mark:hover{background:#ffffff1f;opacity:1}
.flight-mark[aria-current]{background:#fff;color:var(--ink);opacity:1}
.flight-mark:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.flight-mark[aria-current]:focus-visible{outline-color:var(--red)}
/* Phones: the same idea, a full-screen vertical film with one short step card over the floor of the shot. */
@media(max-width:600px){
 .flight-film{aspect-ratio:9/16}
 .flight-section.is-frames{height:460vh;height:460svh}
 .is-frames .flight-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
 .is-frames .flight-film{position:absolute;inset:0;aspect-ratio:auto}
 .is-frames .flight-film video{display:none}
 .is-frames .flight-steps{position:absolute;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));display:grid;gap:0;padding:0}
 .is-frames .flight-step{grid-area:1/1;align-self:end;padding:16px 18px 18px;border-radius:var(--radius);background:#fffffff5;box-shadow:0 12px 36px #11131526;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
 .is-frames .flight-step.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
 .is-frames .flight-step .eyebrow{margin-bottom:6px}
 .is-frames .flight-step h3{font-size:25px}
 .is-frames .flight-text{margin-top:8px;font-size:14.5px;line-height:1.4}
 .is-frames .flight-progress{top:72px;bottom:auto;background:#11131522}
 .is-frames .flight-progress::after{background:var(--red)}
}
@media(prefers-reduced-motion:reduce){.flight-film video,.is-scrub .flight-step,.is-frames .flight-step{transition:none}}

/* The Stoking Fire reel runs edge to edge at its own shape and plays by itself. */
.film-picture{aspect-ratio:16/9;border-radius:0}
.film-controlbar{padding-inline:max(var(--gutter),calc((100% - 1440px)/2));border-radius:0}
.film-section .section-head{margin-bottom:clamp(30px,3.6vw,52px)}

/* A service page opens on its film, edge to edge, with the copy on the calm side. */
.service-hero.is-film{position:relative;display:grid;padding:0;background:#fff}
.service-hero-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.service-hero-film img,.service-hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-hero-film video{opacity:0;transition:opacity .5s ease}
.service-hero-film.is-playing video{opacity:1}
.service-hero-film .image-chip{left:auto;right:20px}
.service-hero-copy{padding:30px var(--gutter) 46px}
.service-media{padding-block:clamp(48px,6vw,84px) 0}
.service-media figure{margin:0}
.service-media figure img{width:100%;height:auto;border-radius:var(--radius)}
.service-media figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
@media(min-width:901px){
 .service-hero-film{grid-area:1/1;aspect-ratio:auto;height:min(calc(100vh - 88px),56.25vw);height:min(calc(100svh - 88px),56.25vw);min-height:560px}
 .service-hero-film img,.service-hero-film video{object-position:center top}
 .service-hero-film::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fffffff5 0,#ffffffe6 32%,#ffffff99 42%,#ffffff40 52%,#fff0 62%);pointer-events:none}
 .service-hero-copy{--edge:max(var(--gutter),calc((100% - 1440px)/2));position:relative;z-index:2;grid-area:1/1;align-self:center;width:calc(41% - var(--edge));margin-left:var(--edge);padding:0}
 .service-hero.is-right .service-hero-film::after{background:linear-gradient(270deg,#fffffff5 0,#ffffffe6 32%,#ffffff99 42%,#ffffff40 52%,#fff0 62%)}
 .service-hero.is-right .service-hero-copy{justify-self:end;margin-left:0;margin-right:var(--edge)}
 .service-hero.is-right .service-hero-film .image-chip{left:20px;right:auto}
 .service-hero.is-film p:not(.eyebrow){color:var(--graphite)}
}
/* The six cards on /services move too, each with a small copy of its film. */
.service-picture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .5s}
.service-picture.is-playing video{opacity:1}
.service-card:hover .service-picture video{transform:scale(1.035)}
.service-picture .image-chip,.service-picture .round-arrow{z-index:2}
@media(prefers-reduced-motion:reduce){.service-hero-film video,.service-picture video{transition:none}}