/* Homepage hero: the team film, edge to edge, with the headline in a white field above it.
   Scoped to .hero-studio because the landing pages reuse the .hero-* classes from home-app.css. */

.hero-studio{
  --hs-ink:var(--green);--hs-ink-2:var(--ink-3);
  /* Where the picture rests once the copy is out; phones override it. */
  --scene-top:clamp(96px,16vh,180px);
  position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;
  min-height:max(calc(100svh - 20px),700px);border-radius:var(--radius-xl);background:#fff;color:var(--hs-ink)
}

/* The film runs to the screen edges. Sections under it keep the 1600px column and the page frame. */
[data-page="home"] .rz{max-width:none;width:100%;padding-top:0;padding-inline:0}
[data-page="home"] .rz>:not(.hero-studio){width:min(1580px,calc(100% - 2 * var(--frame)));margin-inline:auto}
.rz>.hero-studio{width:100%;max-width:none;margin:0;border-radius:0}
@media (min-width:721px){.rz>.hero-studio{min-height:100svh}}

/* While the film plays it fills the hero. Once the copy is released the scene settles lower, under the white field. */
.hero-studio .hero-scene{position:absolute;top:var(--scene-top);right:0;bottom:0;left:0;z-index:-2;transition:top 2.4s cubic-bezier(.65,0,.35,1)}
.motion-intro .hero-studio .hero-scene{top:0}
.hero-studio .hero-scene picture{display:contents}
.hero-studio .hero-scene img,.hero-studio .hero-scene-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-studio .hero-scene-film{display:none;opacity:1;transition:opacity .8s ease}
.hero-film .hero-studio .hero-scene-film{display:block}
html[data-hero-film-state="done"] .hero-studio .hero-scene-film{opacity:0}
/* White, not the peach of the sky: solid behind the header and the headline, then gone before the figures. */
.hero-studio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#fff 0,#fff 16%,rgba(255,255,255,.96) 28%,rgba(255,255,255,.72) 40%,rgba(255,255,255,0) 56%);transition:opacity 2.4s cubic-bezier(.65,0,.35,1)}
.motion-intro .hero-studio::before{opacity:0}
/* The garden dissolves into the white page below instead of ending on a hard edge. */
.hero-studio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(72px,12vh,140px);z-index:-1;pointer-events:none;background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 100%);transition:opacity 2.4s cubic-bezier(.65,0,.35,1)}
.motion-intro .hero-studio::after{opacity:0}

.hero-studio .hero-inner{width:100%;max-width:1040px;padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(48px,8vh,96px)}
.hero-studio .hero-copy{display:flex;flex-direction:column;align-items:center;max-width:860px;margin-inline:auto;text-align:center}
.hero-studio .hero-kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hs-ink-2)}
.hero-studio .hero-title{margin:14px 0 0;font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.05em;font-weight:560;color:var(--hs-ink);text-wrap:balance}
.hero-studio .hero-lead{margin:20px 0 0;max-width:34em;font-size:clamp(16.5px,1.3vw,19px);line-height:1.5;font-weight:500;color:var(--hs-ink-2);text-wrap:pretty}
.hero-studio .btn-row{justify-content:center;align-items:center;gap:8px 22px;margin-top:32px}
.hero-studio .bm{height:52px;padding-inline:24px;background:var(--hs-ink);color:#fff;font-size:15px}
.hero-studio .bm:hover{background:var(--green-2);color:#fff}
.hero-studio .bm svg{color:var(--cta)}
.hero-studio .bm:active{transform:scale(.97)}
.hero-studio .hero-quiet{font-size:15px;font-weight:700;color:var(--hs-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(15,48,38,.35)}
.hero-studio .hero-quiet:hover{color:var(--hs-ink);text-decoration-color:var(--hs-ink)}
/* Skip the intro film: only while it plays, and gone once the copy is released (home-hero-film.js sets [hidden]).
   Replay it: only for visitors who have seen it before (the head script sets data-hero-returning), same pill, same corner. */
.hero-studio .hero-skip,.hero-studio .hero-replay{display:none;position:absolute;z-index:2;right:clamp(16px,3vw,36px);bottom:clamp(20px,4vh,40px);align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid rgba(15,48,38,.14);border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--hs-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .2s ease}
html[data-hero-film-state="playing"] .hero-studio .hero-skip:not([hidden]),html[data-hero-returning] .hero-studio .hero-replay{display:inline-flex}
.hero-studio .hero-skip:hover,.hero-studio .hero-replay:hover{background:#fff}
.hero-studio .hero-skip:active,.hero-studio .hero-replay:active{transform:scale(.97)}
.hero-studio .hero-skip:focus-visible,.hero-studio .hero-replay:focus-visible{outline:2px solid var(--hs-ink);outline-offset:3px}

/* Narrow and tall screens (phones, portrait tablets, slim windows) get the portrait film and still,
   which keep the sky on top and the garden at the bottom. The cut matches the (max-aspect-ratio: 4/5)
   query that home-hero-film.js and the <picture> source use. */
@media (max-aspect-ratio:4/5){
  .hero-studio .hero-scene img,.hero-studio .hero-scene-film{object-position:50% 100%}
  .hero-studio::before{background:linear-gradient(180deg,#fff 0,#fff 20%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.7) 46%,rgba(255,255,255,0) 62%)}
  /* The portrait film already carries its own white and spacing, so the picture never moves or zooms.
     The copy joins the film part-way through; only the white wash fades in under it. */
  .hero-studio .hero-scene,.motion-intro .hero-studio .hero-scene{top:var(--scene-top);transition:none}
  .hero-studio::before,.hero-studio::after{transition-duration:1.2s}
}

/* Phones: the portrait film fills the screen and the copy sits in the sky above the garden. */
@media (max-width:720px){
  .hero-studio{--scene-top:clamp(64px,10svh,96px);min-height:max(100svh,760px)}
  .hero-studio .hero-inner{padding-top:88px;padding-bottom:32px}
  .hero-studio .hero-kicker{font-size:11.5px;letter-spacing:.08em}
  .hero-studio .hero-title{font-size:clamp(36px,10.4vw,52px)}
  .hero-studio .hero-lead{font-size:16px;margin-top:16px}
  .hero-studio .btn-row{flex-direction:column;align-items:stretch;align-self:stretch;margin-top:24px}
  .hero-studio .hero-quiet{display:inline-flex;justify-content:center;min-height:44px;align-items:center}
}