/* Scroll film kit: the rules. Everything is scoped under .sf-film or .sf-end and every name begins sf-, so a host
   stylesheet cannot reach in by accident and these rules cannot leak out. Colours, type and spacing are variables set
   on the section by the builder from film.config.json. The first block undoes what a host theme commonly does to
   headings, paragraphs, links and buttons; nothing outside the film is touched. No rem anywhere: a host that sets its root
   font size (measured on the demo host, 22px) would resize the whole film; lengths are multiples of --sf-u, 16px.
   Not pinned (no script, reduced motion, data saving): the first still, then the cards one under another.
   Pinned: the stage holds for the section's length, the picture rests where the map is flat, the card for that rest
   comes up over a veil, and at the end the stage closes to the page's colour. */
.sf-film,.sf-end{--sf-bg:#0A0D0E;--sf-ink:#E4E9EA;--sf-muted:#9AA3AB;--sf-line:rgba(228,233,234,.3);--sf-accent:#8FC0D1;--sf-pad:clamp(calc(1*var(--sf-u)),5.5vw,calc(4*var(--sf-u)));--sf-u:16px;--sf-len:9;--sf-fade:.93;--sf-veil:.86;--sf-veil-far:.5;--sf-veil-mid:.64;
  --sf-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--sf-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sf-film,.sf-film *,.sf-film *::before,.sf-film *::after,.sf-end,.sf-end *{box-sizing:border-box}
.sf-film,.sf-end{display:block;position:relative;margin:0;padding:0;border:0;background:var(--sf-bg);color:var(--sf-ink);font:400 16px/1.62 var(--sf-font);letter-spacing:0;text-align:left;text-transform:none;-webkit-font-smoothing:antialiased}
.sf-film h1,.sf-film h2,.sf-film p,.sf-film a,.sf-film button,.sf-film span,.sf-film i,.sf-film div,.sf-end h2,.sf-end p,.sf-end a,.sf-end span,.sf-end div{margin:0;padding:0;border:0;border-radius:0;outline:0;background:none;font:inherit;font-style:normal;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-indent:0;text-decoration:none;text-shadow:none;box-shadow:none;float:none;max-width:none;min-width:0;width:auto;height:auto}
.sf-film a:hover,.sf-end a:hover{background:none}
.sf-film canvas{outline:0;border:0;margin:0;max-width:none}
.sf-stage{position:relative;padding:calc(5.5*var(--sf-u)) 0 calc(4*var(--sf-u))}
.sf-pic{position:relative;width:calc(100% - 2*var(--sf-pad));margin:0 auto;aspect-ratio:16/9;background:var(--sf-bg);overflow:hidden}
.sf-film .sf-still,.sf-film .sf-cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0;border:0;border-radius:0}
.sf-film .sf-cv{display:none}
.sf-cards{padding:0 var(--sf-pad)}
.sf-card{display:block;max-width:calc(38*var(--sf-u));margin:calc(3.4*var(--sf-u)) 0 0}
.sf-film .sf-card h1{font-weight:300;font-size:clamp(calc(2*var(--sf-u)),6.6vw,calc(4.2*var(--sf-u)));letter-spacing:.2em;text-transform:uppercase;line-height:1}
.sf-film .sf-card h2{font-weight:300;font-size:clamp(calc(1.55*var(--sf-u)),3.1vw,calc(2.7*var(--sf-u)));line-height:1.14;letter-spacing:-.005em;max-width:22ch;text-wrap:balance;margin:0 0 calc(1.15*var(--sf-u))}
.sf-film .sf-card p{max-width:46ch;margin:0 0 calc(1*var(--sf-u))}
.sf-film .sf-card h1+p{margin-top:calc(1.8*var(--sf-u));font-size:clamp(calc(1*var(--sf-u)),1.7vw,calc(1.2*var(--sf-u)));font-weight:300}
.sf-film .sf-eyebrow{display:block;font-family:var(--sf-mono);font-size:calc(.64*var(--sf-u));letter-spacing:.34em;text-transform:uppercase;color:var(--sf-muted);margin:0 0 calc(1.6*var(--sf-u))}
.sf-film .sf-more a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.sf-film .sf-more a:hover,.sf-film .sf-more a:focus-visible{color:var(--sf-accent)}
.sf-film .sf-doors{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(1.2*var(--sf-u));margin:calc(1.8*var(--sf-u)) 0 0;max-width:calc(44*var(--sf-u))}
.sf-film .sf-door{display:block;border:1px solid var(--sf-line);padding:calc(1.4*var(--sf-u)) calc(1.4*var(--sf-u)) calc(1.3*var(--sf-u));min-height:44px;transition:border-color .3s}
.sf-film .sf-door:hover,.sf-film .sf-door:focus-visible{border-color:var(--sf-accent);outline:none}
.sf-film .sf-door b{display:block;font-family:var(--sf-mono);font-weight:400;font-size:calc(.66*var(--sf-u));letter-spacing:.28em;text-transform:uppercase;margin:0 0 calc(.8*var(--sf-u))}
.sf-film .sf-door span{display:block;font-size:calc(.95*var(--sf-u));font-weight:300;color:var(--sf-muted);line-height:1.55}
.sf-film img.sf-word{display:block;position:static;width:min(74vw,calc(30*var(--sf-u)));height:auto;max-width:none;margin:0 0 calc(1.6*var(--sf-u));border:0;border-radius:0}
.sf-film .sf-cue,.sf-film .sf-play,.sf-film .sf-prop{display:none}
/* the closing screen: the client's call to action, exactly one screen, centred both ways */
.sf-end{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(5*var(--sf-u)) var(--sf-pad) calc(3*var(--sf-u));text-align:center}
.sf-end .sf-end-in{width:min(100%,calc(34*var(--sf-u)))}
.sf-end .sf-eyebrow{display:block;font-family:var(--sf-mono);font-size:calc(.64*var(--sf-u));letter-spacing:.34em;text-transform:uppercase;color:var(--sf-muted);margin:0 0 calc(1.4*var(--sf-u))}
.sf-end h2{font-weight:300;font-size:clamp(calc(1.7*var(--sf-u)),3.4vw,calc(2.8*var(--sf-u)));line-height:1.14;margin:0 0 calc(1*var(--sf-u))}
.sf-end p{color:var(--sf-muted);margin:0 0 calc(1.8*var(--sf-u))}
.sf-end .sf-btn{display:inline-block;padding:calc(.95*var(--sf-u)) calc(1.6*var(--sf-u));background:var(--sf-ink);color:var(--sf-bg);font-family:var(--sf-mono);font-size:calc(.7*var(--sf-u));letter-spacing:.24em;text-transform:uppercase;min-height:44px}
.sf-end .sf-btn:hover,.sf-end .sf-btn:focus-visible{background:var(--sf-accent)}
@media screen and (prefers-reduced-motion:no-preference){
  /* the still picture stays until the canvas has drawn its first still: on a client's page that can take a moment,
     and hiding the picture first left the stage empty (measured on the demo host, about a second, one run in three) */
  .sf-film.sf-go.sf-on .sf-still{visibility:hidden}
  .sf-film.sf-go .sf-cv{display:block;opacity:0;transition:opacity .6s}
  .sf-film.sf-go.sf-on .sf-cv{opacity:1}
  .sf-film.sf-pin{height:calc(var(--sf-len)*100vh)}
  .sf-film.sf-pin .sf-stage{position:sticky;top:0;height:100vh;height:100lvh;padding:0;overflow:hidden;background:var(--sf-bg)}
  .sf-film.sf-pin .sf-pic{position:absolute;inset:0;width:auto;margin:0;aspect-ratio:auto}
  /* the veil: what keeps the words readable. Heaviest where the words sit. */
  .sf-film.sf-pin .sf-pic::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.2,.6,.2,1);background:linear-gradient(90deg,rgb(var(--sf-bg-rgb) / var(--sf-veil)) 0%,rgb(var(--sf-bg-rgb) / var(--sf-veil)) 48%,rgb(var(--sf-bg-rgb) / var(--sf-veil-far)) 100%)}
  .sf-film.sf-pin.sf-read .sf-pic::after{opacity:1}
  .sf-film.sf-pin.sf-mid .sf-pic::after{background:rgb(var(--sf-bg-rgb) / var(--sf-veil-mid))}
  /* the end: the film fades out completely, to the page */
  .sf-film.sf-pin .sf-stage::after{content:"";position:absolute;inset:0;background:var(--sf-bg);pointer-events:none;opacity:calc((var(--p,0) - var(--sf-fade))/(1 - var(--sf-fade)))}
  /* the prop sits over the picture and its veil, under the words; the script sets its size, place, turn and opacity */
  .sf-film.sf-pin .sf-prop{display:block;position:absolute;left:0;top:0;width:auto;max-width:none;height:20%;margin:0;border:0;opacity:0;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 18px 28px rgb(0 0 0 / .45))}
  .sf-film.sf-pin .sf-cards{position:absolute;inset:0;padding:0;pointer-events:none}
  .sf-film.sf-pin .sf-card{position:absolute;left:var(--sf-pad);right:var(--sf-pad);top:50%;margin:0;max-width:calc(44*var(--sf-u));opacity:0;transform:translateY(calc(-50% + 12px));pointer-events:none;transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .sf-film.sf-pin .sf-card>*{max-width:calc(38*var(--sf-u))}.sf-film.sf-pin .sf-card>.sf-doors{max-width:calc(44*var(--sf-u))}
  .sf-film.sf-pin .sf-card.sf-in{opacity:1;transform:translateY(-50%);pointer-events:auto}
  /* A card that is not up is not there for a keyboard or a screen reader either: on the first film Tab landed on
     three links nobody could see. It leaves after its fade, and returns at once. */
  .sf-film.sf-pin .sf-card{visibility:hidden;transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1),visibility 0s .6s}
  .sf-film.sf-pin .sf-card.sf-in{visibility:visible;transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1),visibility 0s 0s}
  /* Before the engine has started, the block's own first line of script has already pinned the stage (.sf-pre), so the
     page is laid out once and nothing jumps when the engine takes over; the first card is up from the first paint. */
  .sf-film.sf-pin.sf-pre .sf-card:first-child{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto;transition:none}
  /* a centred card is exactly as tall as its wordmark, so the wordmark sits dead centre and its line hangs under it */
  .sf-film.sf-pin .sf-card.sf-center{left:0;right:0;max-width:none;padding:0 var(--sf-pad);text-align:center}
  .sf-film.sf-pin .sf-card.sf-center>*{max-width:none}
  .sf-film.sf-pin .sf-card.sf-center img.sf-word{width:min(78vw,calc(40*var(--sf-u)));margin:0 auto}
  .sf-film.sf-pin .sf-card.sf-center h2{position:absolute;left:var(--sf-pad);right:var(--sf-pad);top:100%;max-width:none;font-size:clamp(calc(1.05*var(--sf-u)),1.9vw,calc(1.5*var(--sf-u)));line-height:1.4;margin:calc(2*var(--sf-u)) 0 0}
  .sf-film.sf-pin .sf-cue{display:block;position:absolute;left:50%;bottom:calc(2*var(--sf-u));transform:translateX(-50%);font-family:var(--sf-mono);font-size:calc(.58*var(--sf-u));letter-spacing:.3em;text-transform:uppercase;color:var(--sf-muted);opacity:calc(1 - var(--p,0)*60)}
  .sf-film.sf-pin .sf-play{display:inline-flex;align-items:center;justify-content:center;position:absolute;z-index:2;right:var(--sf-pad);bottom:calc(1.5*var(--sf-u));width:44px;height:44px;border-radius:50%;background:rgb(var(--sf-bg-rgb) / .55);color:var(--sf-ink);border:1px solid var(--sf-line);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s,border-color .2s}
  .sf-film.sf-pin .sf-play[hidden]{display:none}
  .sf-film.sf-pin .sf-play:hover,.sf-film.sf-pin .sf-play:focus-visible{border-color:var(--sf-ink);outline:none}
  .sf-film.sf-pin .sf-play svg{width:10px;height:10px;fill:currentColor;display:block}
  .sf-film.sf-pin .sf-play .sf-tri{transform:translateX(.6px)}
  .sf-film.sf-pin .sf-play .sf-bars,.sf-film.sf-pin .sf-play[aria-pressed="true"] .sf-tri{display:none}
  .sf-film.sf-pin .sf-play[aria-pressed="true"] .sf-bars{display:inline}
  .sf-film.sf-pin.sf-done .sf-play{opacity:0;pointer-events:none}
  .sf-film.sf-pin .sf-play.sf-wait svg{animation:sf-wait 1s ease-in-out infinite}
  @keyframes sf-wait{50%{opacity:.25}}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:760px){
  .sf-film.sf-pin .sf-pic::after{background:linear-gradient(0deg,rgb(var(--sf-bg-rgb) / .9) 0%,rgb(var(--sf-bg-rgb) / var(--sf-veil)) 60%,rgb(var(--sf-bg-rgb) / .45) 100%)}
  .sf-film.sf-pin.sf-mid .sf-pic::after{background:rgb(var(--sf-bg-rgb) / var(--sf-veil-mid))}
  .sf-film.sf-pin .sf-card{top:auto;bottom:calc(5.2*var(--sf-u));transform:translateY(12px)}
  .sf-film.sf-pin .sf-card.sf-in,.sf-film.sf-pin.sf-pre .sf-card:first-child{transform:none}
  .sf-film.sf-pin .sf-card.sf-center{top:50%;bottom:auto;transform:translateY(calc(-50% + 12px))}
  .sf-film.sf-pin .sf-card.sf-center.sf-in{transform:translateY(-50%)}
  .sf-film.sf-pin .sf-doors{grid-template-columns:1fr;gap:calc(.7*var(--sf-u));margin-top:calc(1.2*var(--sf-u))}
  .sf-film.sf-pin .sf-door span{display:none}
  .sf-film.sf-pin .sf-cue{display:none}
}