/* St Bernard's (heritage) landing: the opening film, the moving hero, and
   the footage in the offices. Loaded by templates/school_landing_heritage.html.

   Nothing in here hides content unless <html> carries .js (set by the inline
   head script), and the film only exists while <html> carries .play-film
   (once per session, motion allowed). Without JavaScript the page is whole.

   No url() to a file in here on purpose: production's manifest storage
   resolves every url() in a stylesheet at collectstatic, and a missing one
   fails the whole deploy. Data URIs are left alone by it.               */

:root {
  --sb-navy: #123C69;
  --sb-ink: #0b2545;
  --sb-night: #071a33;
  --sb-brass: #C89B3C;
  --sb-brass-hi: #E7C77A;
  --sb-cream: #F5F6F7;
  --spring: cubic-bezier(.22, 1, .36, 1);      /* settles without overshoot: nothing here was thrown */
  --out: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.77, 0, .175, 1);
}

/* =====================================================================
   THE OPENING FILM
   One clock, in seconds (js keeps FILM_MS and the canvas beats in step):
   0.00  photographs fade up in navy duotone; light gathers to the centre
   0.35  brass rings draw themselves round an empty seal
   0.95  the crest rises into the rings, out of blur; a glint crosses it
   2.20  the seven office marks orbit in and lock, one by one
   3.70  "One school."  4.45 "Seven offices."  5.20 "One system."
   6.60  the three lines lift away; the school's name is set, then the motto
   8.55  the iris opens onto the homepage (9.50 gone)
   ===================================================================== */
.sb-film { display: none; }
.play-film { overflow: hidden; }
.play-film .sb-film {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 3000;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  animation: sf-gone .01s linear 9.5s forwards;
}
/* held at frame zero until the first paint (see the head script) */
.play-film:not(.rolling) .sb-film,
.play-film:not(.rolling) .sb-film * { animation-play-state: paused !important; }
@property --iris {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.sf-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--film-ground, #111214);
  color: var(--sb-cream);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  --iris: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris), #000 calc(var(--iris) + 1px));
  mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris), #000 calc(var(--iris) + 1px));
  animation: sf-iris .95s cubic-bezier(.7, 0, .2, 1) 8.55s forwards,
             sf-fade .25s linear 9.25s forwards;
}
.film-out .sf-body { animation: sf-iris .6s cubic-bezier(.6, 0, .2, 1) forwards, sf-fade .2s linear .45s forwards; }
.film-out .sf-ring { animation: sf-ringout .6s cubic-bezier(.6, 0, .2, 1) forwards; }
.film-out .sf-skip, .film-out .sf-sound, .film-out .sf-reel { opacity: 0 !important; transition: opacity .2s; }

/* the footage: the school's own photographs, in their own colour */
.sf-shots { position: absolute; inset: 0; overflow: hidden; }
.sf-shot {
  position: absolute; inset: -6%;
  background: #111214 center / cover no-repeat;
  opacity: 0;
  animation: sf-shot 3.9s linear both;
}
.sf-shot.s1 { --x0: -2%; --y0: 1%; --x1: 2%; --y1: -1%; --s0: 1.16; --s1: 1.04; }
.sf-shot.s2 { --x0: 3%; --y0: 0%; --x1: -2%; --y1: 1%; --s0: 1.05; --s1: 1.15; animation-delay: 3s; }
.sf-shot.s3 { --x0: 0%; --y0: 2%; --x1: -2%; --y1: -2%; --s0: 1.14; --s1: 1.04;
  animation: sf-shot-last 3.6s linear 6s both; }
/* one flat, neutral shade so the seal and the words read; no tint */
.sf-veil { position: absolute; inset: 0; background: rgba(14, 15, 17, .5); }

/* the stage, on a slow dolly toward the seal */
.sf-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 3.4vh, 34px);
  width: min(100%, 720px);
  margin-top: -2vh;
  animation: sf-dolly 9.5s cubic-bezier(.33, 0, .2, 1) both;
}
.sf-seal {
  --S: min(66vw, 40vh, 330px);
  position: relative;
  width: var(--S);
  height: var(--S);
}
.sf-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sf-rings circle { fill: none; stroke: var(--sb-brass); }
.sf-rings .r1 { stroke-width: 1.4; stroke-dasharray: 1 2; stroke-dashoffset: 1;
  animation: sf-draw 1.5s cubic-bezier(.65, 0, .35, 1) .35s forwards; }
.sf-rings .r2 { stroke-width: 7; stroke-opacity: .55; stroke-dasharray: .002 .0123; opacity: 0;
  transform-origin: 50% 50%; animation: sf-ticks 1.4s var(--out) .8s forwards; }
.sf-rings .r3 { stroke-width: 1; stroke-opacity: .45; stroke-dasharray: 1 2; stroke-dashoffset: -1;
  animation: sf-draw 1.7s cubic-bezier(.65, 0, .35, 1) .55s forwards; }
.sf-rings .r4 { stroke-width: 2.2; stroke: var(--sb-brass-hi); opacity: 0; transform-origin: 50% 50%;
  animation: sf-pulse 1.1s var(--out) 3.55s forwards; }

.sf-crest {
  position: absolute;
  left: 50%; top: 50%;
  width: 46%;
  translate: -50% -52%;
  opacity: 0;
  filter: blur(14px) drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
  clip-path: circle(0% at 50% 55%);
  animation: sf-crest 1.25s var(--out) .95s forwards;
}
/* the seven offices, flown in on an orbit and locked to the ring */
.sf-orbit { position: absolute; inset: 0; animation: sf-turn 6s linear 3.5s both; }
.sf-ic {
  --r: calc(var(--S) * .5);
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--S) * .155);
  height: calc(var(--S) * .155);
  margin: calc(var(--S) * -.0775) 0 0 calc(var(--S) * -.0775);
  opacity: 0;
  transform: rotate(calc(var(--a) - 140deg)) translateX(calc(var(--r) * 2.6)) rotate(calc(var(--a) * -1 + 140deg));
  animation: sf-orbit 1.15s cubic-bezier(.2, .8, .25, 1) calc(2.2s + var(--k) * 95ms) forwards;
}
.sf-ic b {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--navy, #04264C);
  border: 1.5px solid var(--sb-brass);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45);
  animation: sf-upright 6s linear 3.5s both;
}
.sf-ic svg { width: 52%; height: 52%; fill: none; stroke: var(--sb-brass-hi); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.sf-ic::after {             /* the lock: a brass ring that rings out */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--sb-brass-hi); opacity: 0;
  animation: sf-lock .7s var(--out) calc(3.25s + var(--k) * 95ms) forwards;
}

/* words, built one line at a time; then the name takes their place */
.sf-copy { display: grid; justify-items: center; text-align: center; min-height: 9.6rem; }
.sf-copy > * { grid-area: 1 / 1; }
.sf-words { display: grid; justify-items: center; gap: .05em;
  font: 600 clamp(1.7rem, 6.4vw, 2.9rem)/1.06 Fraunces, Georgia, serif; letter-spacing: -.02em;
  animation: sf-away .7s cubic-bezier(.6, 0, .4, 1) 6.55s forwards; }
.sf-line { display: block; overflow: hidden; padding: 0 .1em .08em; }
.sf-line span { display: inline-block; transform: translateY(105%); filter: blur(10px); opacity: 0;
  animation: sf-rise .9s var(--out) forwards; }
.sf-line.l1 span { animation-delay: 3.7s; }
.sf-line.l2 span { animation-delay: 4.45s; }
.sf-line.l3 span { animation-delay: 5.2s; color: var(--sb-brass-hi); font-style: italic; font-weight: 400; }

.sf-title { display: grid; justify-items: center; gap: .9rem; align-content: center; }
.sf-name {
  margin: 0;
  font: 800 clamp(1.9rem, 7.4vw, 3.6rem)/1 Fraunces, Georgia, serif;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.sf-name span { display: inline-block; opacity: 0; transform: translateY(.5em) rotateX(-70deg);
  transform-origin: 50% 100%; filter: blur(8px);
  animation: sf-word .9s var(--out) calc(6.75s + var(--i) * 120ms) forwards; }
.sf-motto { margin: 0; display: flex; align-items: center; gap: .9rem;
  font: 600 .74rem/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: var(--sb-brass-hi); opacity: 0; white-space: nowrap; animation: sf-in .8s ease 7.55s forwards; }
@media (max-width: 480px) { .sf-motto { font-size: .64rem; letter-spacing: .22em; gap: .6rem; } .sf-motto::before, .sf-motto::after { width: 22px; } }
.sf-motto::before, .sf-motto::after { content: ""; width: 36px; height: 1px; background: var(--sb-brass);
  transform: scaleX(0); animation: sf-bar .8s var(--out) 7.6s forwards; }
.sf-motto::before { transform-origin: 100% 50%; }
.sf-motto::after { transform-origin: 0 50%; }

/* the iris edge: a brass ring that runs out with the opening */
.sf-ring {
  position: absolute; left: 50%; top: 44%;
  width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax;
  border-radius: 50%;
  border: 2px solid var(--sb-brass-hi);
  opacity: 0; transform: scale(0);
  pointer-events: none;
  animation: sf-ringout .95s cubic-bezier(.7, 0, .2, 1) 8.55s forwards;
}

.sf-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px 0 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: #1A1C1F;
  color: var(--sb-cream);
  font: 600 .74rem/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; opacity: 0;
  animation: sf-in .5s ease .6s forwards;
  transition: background-color .2s, border-color .2s, transform .16s ease-out;
}
.sf-skip:hover { background: #2A2D31; border-color: #fff; }
.sf-skip:active { transform: scale(.97); }
.sf-skip:focus-visible { outline: 2px solid var(--sb-brass-hi); outline-offset: 3px; }
.sf-skip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Sound: browsers wait for a tap before any sound, so it is offered, top left. */
.sf-sound {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: #1A1C1F;
  color: var(--sb-cream);
  font: 600 .74rem/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; opacity: 0;
  animation: sf-in .5s ease .6s forwards, sf-call 1.6s ease-in-out 1.4s 3;
  transition: background-color .2s, border-color .2s, transform .16s ease-out;
}
.sf-sound:hover { background: #2A2D31; border-color: #fff; }
.sf-sound:active { transform: scale(.97); }
.sf-sound:focus-visible { outline: 2px solid var(--sb-brass-hi); outline-offset: 3px; }
.sf-sound svg { width: 17px; height: 17px; fill: currentColor; }
.sf-sound svg .w { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .35; }
.sf-sound.on { background: #3A3D42; border-color: #fff; animation: sf-in .01s forwards; }
.sf-sound.on svg .w { opacity: 1; }
@keyframes sf-call { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .12); } }
.sf-reel { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(231, 199, 122, .14); }
.sf-reel i { display: block; height: 100%; background: var(--sb-brass); transform: scaleX(0); transform-origin: 0 50%;
  animation: sf-reel 8.55s linear forwards; }

@keyframes sf-shot {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  24%, 76% { opacity: .62; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}
@keyframes sf-shot-last {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  30% { opacity: .62; }
  100% { opacity: .62; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}
@keyframes sf-dolly { from { transform: scale(.93); } to { transform: none; } }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-ticks { from { opacity: 0; transform: rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes sf-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes sf-crest {
  0% { opacity: 0; clip-path: circle(0% at 50% 55%); filter: blur(14px) drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); transform: translateY(14%) scale(1.06); }
  40% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(120% at 50% 55%); filter: blur(0) drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); transform: none; }
}
@keyframes sf-orbit {
  0% { opacity: 0; transform: rotate(calc(var(--a) - 140deg)) translateX(calc(var(--r) * 2.6)) rotate(calc(var(--a) * -1 + 140deg)) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)) scale(1); }
}
@keyframes sf-lock { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sf-turn { to { transform: rotate(22deg); } }
@keyframes sf-upright { to { transform: rotate(-22deg); } }
@keyframes sf-rise { to { transform: none; filter: blur(0); opacity: 1; } }
@keyframes sf-away { to { opacity: 0; transform: translateY(-.6em); filter: blur(10px); } }
@keyframes sf-word { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sf-in { to { opacity: 1; } }
@keyframes sf-bar { to { transform: scaleX(1); } }
@keyframes sf-reel { to { transform: scaleX(1); } }
@keyframes sf-iris { from { --iris: 0px; } to { --iris: 150vmax; } }
@keyframes sf-fade { to { opacity: 0; } }
@keyframes sf-ringout { 0% { opacity: 1; transform: scale(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(3); } }
@keyframes sf-gone { to { visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .play-film .sb-film { display: none; }
  .play-film { overflow: visible; }
}

/* =====================================================================
   THE HERO
   ===================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #111214;
  color: var(--cream);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hb-shot { position: absolute; inset: -4%; margin: 0; opacity: 0; }
.hb-shot:first-child { opacity: 1; }
.hb-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* The photograph is shown as it was taken, in its own colour. One neutral
   scrim, no tint: dark where the words sit (the left, the nav, the counts)
   and clear over the rest of the room, so the picture still reads as a
   picture and not as a coloured wash. */
.hb-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 14, 11, .84) 0%, rgba(16, 14, 11, .74) 32%, rgba(16, 14, 11, .3) 60%, rgba(16, 14, 11, .12) 100%),
    linear-gradient(0deg, rgba(16, 14, 11, .85) 0%, rgba(16, 14, 11, 0) 30%),
    linear-gradient(180deg, rgba(16, 14, 11, .5) 0%, rgba(16, 14, 11, 0) 18%);
}

.hero-grid {
  position: relative;
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  min-height: min(860px, calc(100svh - 150px));
  padding: 7.2rem 0 2.6rem;
}
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; }
.hero-brand span { display: flex; align-items: center; gap: .8rem; font-family: var(--serif); font-style: italic;
  color: var(--gold-light); font-size: 1.05rem; line-height: 1.3; }
.hero-brand span::before { content: ""; width: 34px; height: 1px; background: var(--sb-brass); flex-shrink: 0; }
.hero h1 {
  font-size: clamp(2.35rem, 4.7vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--cream);
}
.hero h1 .h1-a { display: block; }
.rot {
  display: inline-grid;
  vertical-align: top;
  overflow: hidden;
  padding: .02em .08em .14em 0;
  margin-bottom: -.12em;
}
.rot > span {
  grid-area: 1 / 1;
  font-style: italic;
  font-weight: 400;
  color: var(--sb-brass-hi);
  white-space: nowrap;
  visibility: hidden;
}
.rot > span.on { visibility: visible; }
.hero .lede { margin-top: 1.5rem; color: #DADDE2; font-size: 1.1rem; max-width: 42ch; }
.hero .lede b { color: var(--cream); font-weight: 600; }
.actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* the stage: a laptop playing the real system, a phone taking the SMS */
.stage { position: relative; min-width: 0; perspective: 1800px; perspective-origin: 40% 40%; }
.rig {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(7deg) rotateZ(.6deg);
  padding: 3.2rem 0 3.6rem 2rem;
}
.laptop { position: relative; transform-style: preserve-3d; }
.lp-lid {
  position: relative;
  padding: 1.4% 1.4% 1.9%;
  border-radius: 18px 18px 10px 10px;
  background: #16181C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 40px -24px rgba(0, 0, 0, .6);
}
.lp-lid::before { content: ""; position: absolute; top: .55%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #2A2D31; }
.lp-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #F2F4F7; }
.lp-screen video, .lp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-base {
  position: relative;
  height: 14px;
  margin: 0 -6.5%;
  border-radius: 2px 2px 14px 14px;
  background: #A3A9B1;
  box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .6);
}
.lp-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; margin-left: -8%;
  border-radius: 0 0 8px 8px; background: #6b7380; }

.handset {
  position: absolute;
  right: -1.2rem;
  bottom: 0;
  width: clamp(150px, 25%, 200px);
  transform: translateZ(90px) rotateY(9deg);
  padding: 7px;
  border-radius: 30px;
  background: #16181C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 34px -20px rgba(0, 0, 0, .7);
}
.hs-screen {
  position: relative;
  aspect-ratio: 9 / 18.5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--navy, #04264C);
  padding: 2.1rem .45rem .5rem;
}
.hs-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 15px; margin-left: -15%;
  border-radius: 10px; background: #05080e; }
.hs-time { position: absolute; top: 2.4rem; left: 0; right: 0; text-align: center;
  font: 600 2.1rem/1 var(--sans); letter-spacing: -.02em; color: rgba(244, 238, 226, .92); font-variant-numeric: tabular-nums; }
.hs-time small { display: block; font-size: .56rem; font-weight: 500; letter-spacing: .04em; margin-top: .3rem; color: rgba(244, 238, 226, .65); }
.hs-stack { position: absolute; left: .45rem; right: .45rem; top: 6.4rem; display: grid; gap: .4rem; }
.nt {
  background: rgba(244, 238, 226, .9);
  color: #131C28;
  border-radius: 13px;
  padding: .45rem .55rem .5rem;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6);
  font-size: .6rem;
  line-height: 1.32;
}
.nt:nth-child(n+4) { display: none; }
.nt header { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; font-size: .54rem; color: #5b6370; }
.nt header i { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; background: var(--sb-navy); flex-shrink: 0; }
.nt header i.wa { background: #1fae59; }
.nt header svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nt header b { color: #131C28; font-weight: 700; letter-spacing: .02em; }
.nt header span { margin-left: auto; }
.nt p { line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* JS takes the stack over: one arrives at a time and pushes the rest down */
.js .hs-stack.live { display: block; height: 15rem; }
.js .hs-stack.live .nt {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  transform: translateY(var(--y, 0px)) scale(calc(1 - var(--slot, 0) * .03));
  transform-origin: 50% 0;
  opacity: 1;
  transition: transform .7s var(--spring), opacity .45s ease, filter .45s ease;
}
.js .hs-stack.live .nt.wait { transform: translateY(-120%) scale(.92); opacity: 0; filter: blur(6px); transition: none; }
.js .hs-stack.live .nt.gone { opacity: 0; filter: blur(4px); }

/* toasts: paper slips that pop over the scene, one or two at a time */
.toast {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  width: max-content;
  max-width: 270px;
  padding: .6rem .9rem .62rem .62rem;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(19, 28, 40, .08);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55);
  color: #131C28;
  transform: translateZ(140px);
}
.toast i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--navy, #04264C); }
.toast i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast b { display: block; font-size: .8rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast small { display: block; font-size: .7rem; color: #4D5867; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.toast.t1 { top: .4rem; right: 6%; }
.toast.t2 { top: 34%; left: -1.4rem; }
.toast.t3 { bottom: 1.2rem; left: 12%; }
.toast.t4 { top: 2.2rem; left: 4%; }
.toast.t3, .toast.t4 { display: none; }
.live .toast { display: grid; opacity: 0; transform: translateZ(140px) translateY(10px) scale(.94); filter: blur(6px);
  transition: opacity .28s ease-in, transform .28s ease-in, filter .28s ease-in; }
.live .toast.on { opacity: 1; transform: translateZ(140px); filter: blur(0);
  transition: opacity .5s var(--out), transform .75s var(--spring), filter .5s var(--out); }

/* the foot: the live counts, then the ticker */
.hero-foot { position: relative; z-index: 2; }
.counts {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.counts .fig { text-align: left; padding: 1.15rem 1.2rem 1.15rem 0; border-left: 0; }
.counts .fig + .fig { padding-left: 1.2rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.counts .fig .num { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.counts .fig small { margin-top: .35rem; letter-spacing: .16em; }
.counts .note { padding: 0 0 1.2rem 1.2rem; font-size: .74rem; color: #B3B9C2; font-style: italic; font-family: var(--serif);
  max-width: 17ch; line-height: 1.35; }
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 0;
  background: var(--ticker-ground, var(--navy, #04264C));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tk-track { display: flex; width: max-content; }
.tk-run { display: flex; align-items: center; flex-shrink: 0; padding: .95rem 0; }
.tk-run span { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--ticker-ink, #ECEEF1); }
.tk-run svg { width: 12px; height: 12px; fill: var(--sb-brass); flex-shrink: 0; }
.tk-run + .tk-run { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .tk-run + .tk-run { display: flex; }
  .js .tk-track { animation: tk 46s linear infinite; }
  .ticker:hover .tk-track { animation-play-state: paused; }
  @keyframes tk { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .tk-track { width: auto; }
  .tk-run { flex-wrap: wrap; justify-content: center; gap: .4rem 0; }
}

/* entrance: plays once the film opens (or at once, when there is none) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .hx { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  .hero-go .hero .hx { opacity: 1; transform: none; filter: blur(0);
    transition: opacity .9s var(--out), transform 1.1s var(--out), filter .9s var(--out);
    transition-delay: calc(var(--d, 0) * 1ms); }
  .js .hero .h1-a > span { display: inline-block; clip-path: inset(0 0 110% 0); transform: translateY(40%); }
  .hero-go .hero .h1-a > span { clip-path: inset(-10% -5% -20% -5%); transform: none;
    transition: clip-path 1s var(--out), transform 1.1s var(--out); transition-delay: calc(var(--d, 0) * 1ms); }
  .js .hero .rig { opacity: 0; transform: rotateY(-32deg) rotateX(14deg) translateY(80px) scale(.92); }
  .hero-go .hero .rig { opacity: 1; transform: rotateY(-15deg) rotateX(7deg) rotateZ(.6deg);
    transition: opacity 1s var(--out) .25s, transform 1.8s var(--out) .25s; }
  .hero-go .hero .rig.settled { transition: none; }

  /* the background breathes: three photographs, each in its own slow pan */
  .js .hb-shot { animation: hb-shot 27s linear infinite; animation-delay: calc(var(--i) * 9s); opacity: 0; }
  .js .hb-shot:only-child { animation-name: hb-solo; opacity: 1; }
  @keyframes hb-shot {
    0% { opacity: 0; transform: scale(1.14) translate(-1.5%, 1%); }
    6% { opacity: 1; }
    33.3% { opacity: 1; }
    40% { opacity: 0; transform: scale(1.03) translate(1.5%, -1%); }
    100% { opacity: 0; transform: scale(1.03) translate(1.5%, -1%); }
  }
  @keyframes hb-solo { 0%, 100% { transform: scale(1.12); } 50% { transform: scale(1.02) translate(1%, -1%); } }

  /* the rotating word: the old one lifts and blurs, the new one rises */
  .rot.live > span { visibility: visible; opacity: 0; transform: translateY(115%);
    transition: opacity .22s ease-in, transform .3s ease-in; }
  .rot.live > span.out { transform: translateY(-115%); }
  .rot.live > span.on { opacity: 1; transform: none;
    transition: opacity .55s var(--out), transform .8s var(--spring); }

  /* scroll-linked depth, where the browser can do it off the main thread */
  @supports (animation-timeline: scroll()) {
    .hero-bg { animation: hb-par linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hb-par { to { transform: translateY(18vh) scale(1.04); } }
    .stage { animation: st-par linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes st-par { to { transform: translateY(-9vh); } }
  }
}

/* -- hero, at tablet and phone widths -- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 7rem 0 1.4rem; gap: 1.2rem; }
  .hero h1 { font-size: clamp(2.3rem, 7.2vw, 3.8rem); }
  .stage { max-width: 760px; width: 100%; margin: 0 auto; }
  .hb-veil { background:
    linear-gradient(180deg, rgba(16, 14, 11, .78) 0%, rgba(16, 14, 11, .72) 45%, rgba(16, 14, 11, .4) 70%, rgba(16, 14, 11, .85) 100%); }
}
@media (max-width: 720px) {
  .hero-grid { padding-top: 6.2rem; }
  .hero-brand { margin-bottom: 1.2rem; }
  .hero-brand img { width: 42px; }
  .hero .lede { font-size: 1rem; }
  .stage { perspective: 2400px; }
  .rig { transform: rotateY(-5deg) rotateX(4deg); padding: 2.8rem 2.6rem 2.4rem .4rem; }
  .hero-go .hero .rig { transform: rotateY(-5deg) rotateX(4deg); }
  .lp-lid { border-radius: 12px 12px 7px 7px; }
  .lp-base { height: 9px; }
  .handset { width: 36%; right: -.2rem; bottom: -.4rem; border-radius: 22px; padding: 5px; transform: translateZ(60px); }
  .hs-screen { border-radius: 18px; }
  .hs-time { top: 1.9rem; font-size: 1.5rem; }
  .hs-stack { top: 4.9rem; left: .3rem; right: .3rem; }
  .nt { font-size: .53rem; padding: .35rem .42rem .4rem; border-radius: 10px; }
  .nt p { -webkit-line-clamp: 2; }
  .nt header { font-size: .5rem; }
  .toast { max-width: 228px; padding: .5rem .75rem .52rem .5rem; gap: .5rem; grid-template-columns: 26px minmax(0, 1fr); }
  .toast i { width: 26px; height: 26px; border-radius: 8px; }
  .toast.t1 { top: 0; right: 2rem; }
  .toast.t2 { top: auto; bottom: 0; left: 0; }
  .toast.t3 { bottom: 0; left: 0; }
  .toast.t4 { top: 0; left: auto; right: 2rem; }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts .fig, .counts .fig + .fig { padding: .9rem .9rem .9rem 0; border-left: 0; }
  .counts .fig:nth-child(even) { padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .16); }
  .counts .fig:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .counts .note { grid-column: 1 / -1; padding: .2rem 0 .9rem; max-width: none; }
  .tk-run span { font-size: 1rem; gap: 1.2rem; padding-right: 1.2rem; }
}
@media (max-width: 420px) {
  .toast small { display: none; }
  .toast { max-width: 200px; }
}

/* =====================================================================
   FOOTAGE IN THE OFFICES
   A real screen in a browser frame, playing only while it is on screen,
   with one of the hand-drawn vignettes seated over its corner.
   ===================================================================== */
.o-media.reeled { position: relative; padding-bottom: 3.2rem; }
.o-media.reeled.peek-left { padding-left: 0; }
.reel {
  position: relative;
  background: #EEF0F2;
  border: 1px solid #E1E4E8;
  border-radius: 20px;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 28px -18px rgba(0, 0, 0, .28);
}
.reel-in { border-radius: 14px; overflow: hidden; background: #1A1C1F; }
.reel-bar { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; background: #1A1C1F;
  color: #9AA6B8; font-size: .7rem; font-weight: 500; }
.reel-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3D42; }
.reel-bar i:first-child { background: var(--sb-brass); }
.reel-bar span { margin-left: .5rem; padding: .22rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .06);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.reel-screen { position: relative; aspect-ratio: 16 / 10; background: #F2F4F7; }
.reel-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.peek { position: absolute; z-index: 2; width: min(330px, 62%); }
.peek.bl { left: -2.2rem; bottom: 0; }
.peek.br { right: -1.6rem; bottom: 0; }
.peek.phone-peek { width: 210px; right: -1.4rem; bottom: -.5rem; }
.reel-under { margin: 1.1rem 0 0 auto; width: calc(100% - min(330px, 62%) + 1rem); }
@media (max-width: 880px) {
  .o-media.reeled { padding-bottom: 0; }
  .reel-under { width: auto; margin-top: 1.1rem; }
  .peek, .peek.bl, .peek.br { position: relative; left: auto; right: auto; bottom: auto;
    width: min(340px, 92%); margin: -2.6rem 0 0 auto; }
  .peek.bl { margin: -2.6rem auto 0 .8rem; }
  .peek.phone-peek { width: 200px; margin: -4rem .6rem 0 auto; }
}

/* scroll-driven settle for the footage, where supported */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reel { animation: reel-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes reel-settle { from { transform: perspective(1400px) rotateX(14deg) translateY(50px) scale(.94); }
                             to { transform: none; } }
    .peek { animation: peek-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes peek-rise { from { transform: translateY(70px); } to { transform: none; } }
  }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tilt { transform-style: preserve-3d; will-change: transform; }