@font-face{font-family:'Josefin Sans';src:url('/assets/fonts/JosefinSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('/assets/fonts/JosefinSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('/assets/fonts/JosefinSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('/assets/fonts/JosefinSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* Brand hexes only — BRAND.md p21. Blue #003DFF, Deep #0036BC, Yellow #FFE600
   (accent, never a surface), White, Ink #0A0A0A, Soft Grey #6B7280, and the
   #EFEFEF light surface grey the brand assets use. Nothing invented. */
.hf-seq,.hf-load{--white:#FFFFFF;--surface:#EFEFEF;--ink:#0A0A0A;--grey:#6B7280;
       --blue:#003DFF;--deep:#0036BC;--yellow:#FFE600;
       --track:1500;--ease:cubic-bezier(.16,1,.3,1)}
.hf-seq{height:calc(var(--track) * 1vh);position:relative}
/* --open is the curtain: 0 = shut to a slot, 1 = fully parted. The first slice
   of the scroll drives it, and only once it reaches 1 does the film start to
   scrub — see the JS. The stage ground IS the curtain, so the panels are the
   blue showing through around a widening aperture rather than two extra divs
   sliding about; one animated clip-path is cheaper and cannot leave a seam. */
.hf-stage{position:sticky;top:0;height:100vh;overflow:hidden;--open:0;--shut:1;
       /* The shut aperture is ONE size var, so width and height cannot drift
          apart: a 3:4 portrait slot that is the same shape on every screen.
          The old build sized it as percentage insets of the viewport, which made
          its aspect a function of the window — on a 1920-wide monitor that
          became a tall letterbox through the top of his head. */
       --asz:43.5vmin;--acx:70%;
       --aw:calc(var(--asz) / 2);--ah:calc(var(--asz) * 0.66667);
       --ins-t:calc(var(--shut) * 50% - var(--shut) * var(--ah));
       --ins-b:calc(var(--shut) * 50% - var(--shut) * var(--ah));
       --ins-l:calc(var(--shut) * var(--acx) - var(--shut) * var(--aw));
       --ins-r:calc(var(--shut) * (100% - var(--acx)) - var(--shut) * var(--aw));
       /* rounded while it is a slot, square once it is full-bleed — the radius
          rides --shut to 0, so the open film still meets the viewport edge
          cleanly. Sized in vmin so it stays proportionate on a 3440 monitor. */
       --arad:calc(var(--shut) * 2.4vmin);
       background:linear-gradient(160deg,var(--deep) 0%,var(--blue) 58%,var(--deep) 100%)}
.hf-band{position:absolute;inset:0;z-index:1}
.hf-filmwrap{position:absolute;inset:0;
  clip-path:inset(var(--ins-t) var(--ins-r) var(--ins-b) var(--ins-l) round var(--arad))}
.hf-filmwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the reference carries its title on the shut curtain and fades it as the halves
   part; without it the blue is a large empty field, badly so on a phone */
.hf-curtain-copy{position:absolute;z-index:4;left:clamp(20px,6vw,104px);top:50%;
  transform:translateY(-50%);max-width:27rem;color:var(--white);
  opacity:calc(1 - var(--open));pointer-events:none}
.hf-curtain-copy .hf-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:14px;opacity:.85}
.hf-curtain-copy .hf-eyebrow::before{content:"";width:30px;height:2px;background:var(--yellow)}
.hf-curtain-copy h1{font-size:clamp(34px,4.8vw,60px);line-height:1.02;letter-spacing:-.02em;
  font-weight:700}
.hf-curtain-copy h1 mark{background:var(--yellow);color:var(--ink);padding:0 .1em;border-radius:2px}
.hf-curtain-copy .hf-sub{margin-top:16px;font-size:16px;line-height:1.55;opacity:.8}
@media (max-width:900px) and (orientation:portrait){
/* sit straight under the film band (46vh) rather than pinning to the bottom,
     which left a dead field of blue between the slot and the title */
  .hf-curtain-copy{top:52vh;bottom:auto;transform:none;max-width:none;
                right:clamp(20px,6vw,104px)}
}
/* light spilling off the curtain edges onto the blue; sits behind the film and
   is NOT clipped, which is the whole point — a shadow on .hf-filmwrap is clipped away */
.hf-seam{position:absolute;z-index:0;pointer-events:none;
      top:var(--ins-t);right:var(--ins-r);bottom:var(--ins-b);left:var(--ins-l);
      border-radius:var(--arad);
      box-shadow:0 0 100px 14px rgba(255,255,255,calc(.5 * var(--shut)));
      opacity:var(--shut)}
/* The composed first frame. The film is only 1280x714; this plate is the same
   frame at 2752x1536 (SSIM 0.985 against the film's frame 0 — it is what the
   film was grown from), so the shut curtain shows a genuinely sharp picture
   instead of a 1.5x stretch of a 720p video.

   The inner box is the trick. It is the aperture scaled by 1.1707 and nudged up,
   which turns object-fit:cover into a CHOSEN crop — plate x 1150..2170,
   y 88..1400: headroom above him, the whole gesturing hand, the laptop in the
   bottom corner, the desk edge across the base. As --shut falls to 0 the box
   relaxes to the aperture itself and object-position lands on 50% 50%, which is
   precisely the video's own cover framing — so by the time the plate fades out
   it is pixel-aligned with the frame underneath and the swap cannot be seen. */
.hf-plate{position:absolute;z-index:2;overflow:hidden;pointer-events:none;
       top:var(--ins-t);right:var(--ins-r);bottom:var(--ins-b);left:var(--ins-l);
       border-radius:var(--arad);opacity:var(--plate,1);
       /* a 27x36 blur of the composed crop, inline, so the slot is a correct
          picture from the very first paint and never shows the poster's cut */
       background:#EFEFEF url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA8LDA0MCg8NDA0REA8SFyYZFxUVFy8iJBwmODE7OjcxNjU9RVhLPUFUQjU2TWlOVFteY2RjPEpsdGxgc1hhY1//2wBDARARERcUFy0ZGS1fPzY/X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX1//wAARCAAkABsDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAYCBAUBA//EACkQAAIBAwMCBAcAAAAAAAAAAAECAwAEEQUSITFBImFxgRMUUXKSoeH/xAAXAQADAQAAAAAAAAAAAAAAAAACAwQB/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECETL/2gAMAwEAAhEDEQA/AHI1E1I1ygGGbNrWlwSiKS+hDltuAc4PnjpV6kfXobYzpDFBCJNx8AG3auec042AT5C3EDfFiEahXHOQBjrWJ6bSwuTzQw8O6qcZx3x9aifLnNZOo6hYTRBLnaSDkYOCp9aVbvUdRs5DHZarvgkBKqRnYOmM9vagl6w6WLSxr0kc91dtDEkZbwNMOWZRwR7n9VircvEoRHZVXoATQLgpbqjvvYZ5FUXlTccnn0pyEtjhJrFy4w0cOPt/teDX8jDmKH8aKKgLhY1Sdmv5cKiAAcIMdqrDkUUVdPKIb6Z//9k=) center/cover}
.hf-plate.hf-is-gone{visibility:hidden}
.hf-plate img{position:absolute;
       left:calc(var(--shut) * -6.471%);top:calc(var(--shut) * -8.824%);
       width:calc(100% + var(--shut) * 12.941%);height:calc(100% + var(--shut) * 12.941%);
       object-fit:cover;object-position:calc(50% + var(--shut) * 17.750%) 50%}
@media (max-width:900px) and (orientation:portrait){
.hf-stage{--asz:min(55vw, 30vh);--acx:58%}
/* the film sits at object-position 68% on portrait, so that is where the
     plate has to arrive for the cross-fade to stay invisible */
  .hf-plate img{object-position:calc(68% + var(--shut) * -0.250%) 50%}
}
/* the film is shot with the man in the right third, so the copy sits in the
   cleared left half and the scrim only has to lift contrast, not hide him */
/* the scrim rides inside the aperture, so it must not paint over the curtain */
.hf-scrim{position:absolute;inset:0;z-index:1;opacity:var(--open);
  background:linear-gradient(to right,#FFFFFF 0%,rgba(255,255,255,.985) 26%,rgba(255,255,255,.88) 40%,rgba(255,255,255,0) 66%)}
@media (max-width:900px) and (orientation:landscape){
.hf-scrim{background:linear-gradient(to right,rgba(255,255,255,.96) 0%,rgba(255,255,255,.74) 38%,rgba(255,255,255,0) 66%)}
}
.hf-panels{position:absolute;inset:0;z-index:3;display:grid;align-items:center;
        padding:0 clamp(20px,6vw,104px)}
.hf-panel{grid-area:1/1;max-width:31rem;opacity:0;transform:translateY(26px);
       transition:opacity .55s ease,transform .7s var(--ease);pointer-events:none}
.hf-panel.hf-is-on{opacity:1;transform:none;pointer-events:auto}
.hf-panel .hf-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:16px}
.hf-panel .hf-eyebrow::before{content:"";width:30px;height:2px;background:var(--blue)}
.hf-panel h2{font-size:clamp(30px,4.6vw,56px);line-height:1.04;letter-spacing:-.02em;
          font-weight:700;margin-bottom:18px}
.hf-panel h2 em{font-style:normal;color:var(--blue)}
/* yellow behind a key word — composition rule 2, p24 */
.hf-panel h2 mark{background:var(--yellow);color:var(--ink);padding:0 .12em;border-radius:2px}
.hf-panel p{color:var(--grey);font-size:clamp(15px,1.5vw,18px);line-height:1.6;max-width:40ch}
.hf-stat{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.hf-stat div{display:grid;gap:4px}
.hf-stat b{font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.hf-stat span{font-size:13px;letter-spacing:.06em;color:var(--grey);text-transform:uppercase}
.hf-go{display:inline-flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hf-go a{text-decoration:none;font-weight:600;font-size:16px;padding:13px 26px;border-radius:999px}
.hf-go .hf-a{background:var(--yellow);color:var(--ink)}
.hf-go .hf-b{border:1px solid var(--ink);color:var(--ink);opacity:.8}
/* left-aligned with the copy column, not centred: centred put it over the
   chair, where the scrim has faded out and it was unreadable */
.hf-cue{position:absolute;left:clamp(20px,6vw,104px);bottom:78px;z-index:5;display:grid;
     justify-items:start;gap:9px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
     color:var(--white);transition:opacity .5s ease}
.hf-cue i{width:1px;height:40px;display:block;background:linear-gradient(to bottom,var(--white),transparent);
       animation:cue 2.2s var(--ease) infinite;opacity:.7}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}
/* the orbit sweeps a dark chair and a desk through this corner, so the meter
   needs its own ground — black-on-dark was unreadable for a third of the scroll */
.hf-meter{position:absolute;right:clamp(20px,4vw,52px);bottom:78px;z-index:5;text-align:right;
       background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
       padding:9px 14px 7px;border-radius:12px;opacity:var(--open)}
.hf-meter b{display:block;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.hf-meter span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.hf-bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:6;background:rgba(10,10,10,.12)}
.hf-bar i{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--yellow)}
.hf-load{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;display:flex;
      align-items:center;gap:12px;padding:12px 22px;border-radius:999px;background:var(--deep);
      font-size:14px;color:var(--white);transition:opacity .4s ease}
.hf-load.hf-is-done{opacity:0;pointer-events:none}
.hf-load i{width:14px;height:14px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.3);
        border-top-color:var(--yellow);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px) and (orientation:portrait){
.hf-band{inset:0 0 auto 0;height:46vh}
.hf-stage video{height:100%;bottom:auto;object-position:68% center}
.hf-scrim{background:linear-gradient(to bottom,rgba(255,255,255,0) 34vh,var(--white) 46vh)}
.hf-panels{inset:46vh 0 0 0;align-items:start;padding-top:28px;background:var(--white)}
.hf-panel{max-width:none}
.hf-panel h2{font-size:clamp(28px,7.4vw,40px);margin-bottom:14px}
.hf-panel p{max-width:none;font-size:16px}
.hf-stat{margin-top:20px}
.hf-stat b{font-size:34px}
.hf-cue{bottom:26px}
.hf-meter{bottom:26px}
}
@media (prefers-reduced-motion:reduce){
.hf-seq{height:100vh}
.hf-cue,.hf-bar,.hf-meter,.hf-seam{display:none}
.hf-stage{--open:1;--shut:0}
.hf-filmwrap{clip-path:none;box-shadow:none}
.hf-plate{display:none}
.hf-panel{opacity:1;transform:none;position:relative}
.hf-panels{position:relative;display:grid;gap:52px;padding:110px clamp(20px,6vw,104px)}
}
.hf-panel h2{color:var(--ink)}.hf-panel p{color:var(--grey)}
.hf-curtain-copy h1,.hf-curtain-copy .hf-sub{color:var(--white)}
.hf-seq{font-family:'Josefin Sans',system-ui,sans-serif;color:var(--ink)}
.hf-seq img,.hf-seq video{max-width:none}