/* ============================================================
   HOMEPAGE HERO: "the board" (2026-10-06, built from
   _design/tuumata-hero-board-mockup.html)

   Resting state (no JS, reduced motion, or after the intro):
   photo, centred headline + paragraph, two buttons.

   html.hb-play (set in <head> before first paint) runs the intro:
   0. the brand lockup spins in large and flies to the nav corner
   1. "For leaders of organisations" in the centre of a 3x3 board
   2. the camera goes clockwise round the four stage cards
   3. pull back: route traced, ghost marks, a muted spark circles
   4. headline word by word, paragraph line by line
   5. board fades, photo fades in, buttons drop in and pulse 3 times
   Scroll, a key or a click skips straight to the resting state.
   ============================================================ */

.hb{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--ink)}

/* ---------- photo (same image, grade and river clip as before) ---------- */
.hb__photo{position:absolute;inset:0;z-index:0;transition:opacity 1.8s var(--ease)}
.hb__photo img,.hb__photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.65)}
.hb__photo video{opacity:0;transition:opacity 1s}
.hb__photo video.is-playing{opacity:1}
.hb__photo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(12,15,19,.82) 0%,rgba(12,15,19,.5) 70%,rgba(12,15,19,.38) 100%),
             linear-gradient(to top,#0C0F13 0%,rgba(12,15,19,0) 30%)}

/* ---------- copy ---------- */
.hb__copy{position:relative;z-index:3;display:grid;place-items:center;padding:clamp(7.5rem,15vh,9.5rem) var(--gut) 2.5rem}
.hb__inner{position:relative;width:min(100%,1100px);text-align:center}
.hb__h1{font-family:var(--font-d);font-weight:600;letter-spacing:-.03em;font-size:var(--t-h1);line-height:1.02;
  max-width:15ch;margin:0 auto;color:var(--text)}
/* the line in progress is bronze during the intro, every line settles to
   white; the resting heading is a single colour. */
.hb__h1 .seg{color:var(--bronze);transition:color .6s var(--ease)}
.hb__h1 .seg.done{color:var(--text)}
.hb__h1 .seg.acc{color:var(--text)}
.hb__br{display:none}   /* the two-line break is desktop only; smaller screens wrap naturally */
/* tablet and phone: body-size paragraph, full width, 24px under the heading, 28px to the buttons */
.hb__para{max-width:100%;margin:1.5rem auto 0;font-family:var(--font-d);font-weight:400;color:var(--text-dim);
  font-size:clamp(1.0625rem,1rem + .3vw,1.125rem);line-height:1.55}
.hb__actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.hb__actions .btn{position:relative}

/* Desktop (home-hero-spacing, 2026-10-07): a big two-line heading with clear
   space either side, then a narrower body-size paragraph (about 46ch) with room
   above and below, then the buttons. The 6.6vw cap keeps "Is your organisation
   set up" inside the gutter at narrow desktop widths. */
@media (min-width:1024px){
  .hb__copy{padding-top:clamp(7.5rem,20vh,10rem)}   /* balances the space above the heading with the space under the buttons */
  .hb__inner{width:min(100%,1340px)}
  .hb__h1{font-size:min(clamp(3rem,1.4rem + 5vw,6.5rem),6.6vw);line-height:1;max-width:none}
  .hb__br{display:inline}
  .hb__para{max-width:46ch;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.55;margin-top:clamp(1.75rem,1.5rem + 1vw,3rem)}
  .hb__actions{margin-top:2.5rem;gap:1rem}
}

@media (max-width:700px){
  /* phones: a touch tighter so the whole resting hero fits one screen */
  .hb__copy{padding-top:7rem;padding-bottom:1.6rem}
}
@media (max-width:479.98px){
  .hb__actions{flex-direction:column;align-items:stretch}   /* buttons stack full width */
}

/* ---------- board + intro exist only while the intro plays ---------- */
.hb__world,.hb__intro{display:none}

/* ============================================================
   PLAY MODE
   ============================================================ */
.hb-play .hb__world{display:block}
.hb-play .hb__intro{display:grid}

/* nav: brand hidden until the lockup lands, links until the hero lands */
.hb-play .nav .nav__brand,.hb-play .nav .nav__links,.hb-play .nav .nav__burger{transition:opacity .9s var(--ease)}
.hb-intro .nav .nav__brand{opacity:0}
.hb-intro .nav .nav__links,.hb-intro .nav .nav__burger{opacity:0;pointer-events:none}
.hb-brand .nav .nav__brand{opacity:1}

/* hidden until their moment */
.hb-play .hb:not(.is-landed) .hb__photo{opacity:0}
.hb-play .hb .hw{display:inline-block;opacity:0}
.hb-play .hb .hw.on{animation:hb-word 1s cubic-bezier(.22,1,.36,1) both}
.hb-play .hb:not(.hb--split) .hb__para{opacity:0}
.hb-play .hb .hb__para .w{display:inline-block;opacity:0}
.hb-play .hb .hb__para .w.on{animation:hb-line .9s cubic-bezier(.22,1,.36,1) calc(var(--line,0) * 280ms) both}
.hb-play .hb:not(.is-landed) .hb__actions .btn{opacity:0}
@keyframes hb-word{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes hb-line{from{opacity:0;transform:translateY(.6em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* buttons drop in, then the primary pulses three times (fill backwards so
   the site's own :active press still works once they've landed) */
.hb-play .hb.is-landed .hb__actions .btn{animation:hb-drop .75s cubic-bezier(.34,1.5,.64,1) backwards}
.hb-play .hb.is-landed .hb__actions .btn--solid{animation-delay:.35s}
.hb-play .hb.is-landed .hb__actions .btn--tonal{animation-delay:.5s}
@keyframes hb-drop{0%{opacity:0;transform:translateY(-36px)}55%{opacity:1}100%{opacity:1;transform:none}}
.hb__actions .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.hb-play .hb.is-landed .hb__actions .btn--solid::after{animation:hb-pulse 2.8s cubic-bezier(.22,1,.36,1) 1.3s 3}
.hb-play .hb.is-landed .hb__actions .btn--tonal::after{animation:hb-pulse-soft 2.8s cubic-bezier(.22,1,.36,1) 1.5s 1}
@keyframes hb-pulse{0%{opacity:1;box-shadow:0 0 0 0 rgba(214,164,97,.55)}70%,100%{opacity:1;box-shadow:0 0 0 14px rgba(214,164,97,0)}}
@keyframes hb-pulse-soft{0%{opacity:1;box-shadow:0 0 0 0 rgba(214,164,97,.3)}70%,100%{opacity:1;box-shadow:0 0 0 12px rgba(214,164,97,0)}}

/* dim glow behind the headline while the board is still showing */
.hb__inner::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:150%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(ellipse at center,var(--ink) 35%,rgba(12,15,19,0) 70%);opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.hb-play .hb.is-dim .hb__inner::before{opacity:1}

/* ---------- the board: 3x3 screens, camera = transform ---------- */
.hb__world{position:absolute;left:0;top:0;z-index:1;width:300vw;height:300svh;transform-origin:0 0;transition:opacity 1.2s var(--ease)}
.hb.is-landed .hb__world{opacity:0;pointer-events:none}
.hb__cell{position:absolute;width:100vw;height:100svh;display:grid;place-items:center;overflow:hidden;transition:opacity 1s var(--ease)}
.hb.is-dim .hb__cell,.hb.is-dim .hb__route{opacity:.32}
/* phones/portrait: the copy is taller than the board's middle, so the board steps right back */
@media (max-aspect-ratio:4/5){.hb.is-dim .hb__cell,.hb.is-dim .hb__route{opacity:.1}}
.hb__path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hb__path polyline{fill:none;stroke:#C6A57C;stroke-width:.25;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8}
.hb__route{transition:opacity 1s var(--ease)}
.is-wall .hb__path .hb__route{transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .5s,opacity 1s var(--ease);stroke-dashoffset:0}
.hb__path .hb__spark{stroke-width:.35;stroke-linecap:round;stroke-dasharray:.05 .95;stroke-dashoffset:.05;opacity:0}
.is-zip .hb__path .hb__spark{opacity:.3}

/* opener (centre cell) */
.hb__open{text-align:center;transition:opacity .6s}
.hb__open-a{white-space:nowrap;font-family:var(--font-d);font-weight:300;font-size:9vmin;letter-spacing:.45em;margin-right:-.45em;text-transform:uppercase;line-height:1;color:var(--text)}
.hb__open-b{margin-top:3vmin;font-family:var(--font-d);font-weight:400;text-transform:uppercase;letter-spacing:.34em;margin-right:-.34em;font-size:3.6vmin;color:var(--bronze)}
.pre .hb__open-a,.pre .hb__open-b{opacity:0}
.go .hb__open-a{animation:hb-track 1.4s var(--ease) both}
.go .hb__open-b{animation:hb-fadeup .9s var(--ease) .6s both}
.is-wall .hb__open,.is-gone .hb__open{opacity:0}

/* stage cards: number, name, rule */
.hb__card{position:relative;z-index:1;text-align:center}
.hb__num{display:block;font-family:var(--font-d);font-weight:500;font-size:3.2vmin;letter-spacing:.24em;margin-right:-.24em;color:#C6A57C;margin-bottom:2.4vmin}
.hb__name{font-family:var(--font-d);font-weight:700;font-size:15vmin;line-height:1;letter-spacing:-.02em;overflow:hidden;padding-bottom:.06em;color:var(--text)}
.hb__name span{display:block;transition:color .35s}
.hb__rule{display:block;height:2px;width:22vmin;background:#C6A57C;margin:3.4vmin auto 0;transform-origin:center}
.pre .hb__num{opacity:0}
.pre .hb__name span{transform:translateY(105%)}
.pre .hb__rule{transform:scaleX(0)}
.go .hb__num{animation:hb-fade .5s var(--ease) .1s both}
.go .hb__name span{animation:hb-up .7s var(--ease) .12s both}
.go .hb__rule{animation:hb-grow .6s var(--ease) .4s both}
.is-wall .hb__name span,.is-wall .hb__num{text-shadow:0 0 .25em var(--ink),0 0 .12em var(--ink),0 0 .5em var(--ink)}
.hb__stage.lit .hb__name span{color:#C6A57C}

/* stage mark behind each card: rises, grows, swells out as the camera leaves;
   back as a ghost on the board, brightening as the spark arrives */
.hb__bgic{position:absolute;left:50%;top:50%;width:62vmin;height:69vmin;margin:-34.5vmin 0 0 -31vmin;
  fill:none;stroke:#C6A57C;stroke-width:2.2;overflow:visible;opacity:0;transform:scale(.35);transform-origin:50% 60%}
.hb__bgic use{transform-box:fill-box;transform-origin:50% 100%}
.go .hb__bgic{animation:hb-bg-grow 3.2s cubic-bezier(.2,.7,.3,1) both}
.go .hb__bgic use{animation:hb-rise 1.1s cubic-bezier(.22,.8,.3,1) both}
.leave .hb__bgic{animation:hb-bg-out 1.1s cubic-bezier(.5,0,.75,0) both}
.is-wall .hb__stage .hb__bgic{animation:none;opacity:0;transform:translateY(-9vmin) scale(1.3);transition:opacity 1.2s var(--ease),stroke .35s}
.is-ghost .hb__stage .hb__bgic{opacity:.2}
.is-ghost .hb__stage.lit .hb__bgic{opacity:.5;stroke:#F0DEC4;transition:opacity .25s,stroke .25s}

@keyframes hb-fade{from{opacity:0}}
@keyframes hb-up{from{transform:translateY(105%)}}
@keyframes hb-grow{from{transform:scaleX(0)}}
@keyframes hb-fadeup{from{opacity:0;transform:translateY(1.5vmin)}}
@keyframes hb-track{from{opacity:0;letter-spacing:1.1em}}
@keyframes hb-rise{from{opacity:0;transform:translateY(60%) rotateY(90deg)}}
@keyframes hb-bg-grow{0%{opacity:0;transform:scale(.35)}25%{opacity:.22}100%{opacity:.2;transform:scale(1)}}
@keyframes hb-bg-out{from{opacity:.2;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}

/* ---------- intro lockup: a scaled copy of the nav lockup, above the nav ---------- */
.hb__intro{position:fixed;inset:0;z-index:900;place-items:center;pointer-events:none;perspective:900px}
.hb__intro.is-done{display:none}
.hb__lockup{display:inline-flex;align-items:center;gap:.9em;font-size:clamp(14px,5.4vmin,46px)}
.hb__lockup img{width:3.75em;height:auto;display:block;opacity:0}
.hb__lockup-word{font-family:var(--font-d);font-weight:600;letter-spacing:.22em;font-size:1.25em;line-height:1;display:flex;flex-direction:column;gap:.25em;color:var(--text)}
.hb__lockup-word b{font-weight:inherit;opacity:0}
.hb__lockup-word i{font-style:normal;font-weight:400;letter-spacing:.34em;font-size:.656em;color:var(--bronze);opacity:0}

/* ---------- "Skip to homepage" (only while the intro plays) ---------- */
.hb__skip{position:fixed;right:24px;bottom:24px;z-index:10001;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;font-family:var(--font-b);font-weight:500;font-size:14px;line-height:1;color:var(--text);
  background:rgba(12,15,19,.35);border:1px solid rgba(245,242,235,.3);border-radius:2px;cursor:pointer;
  opacity:0;transition:opacity .4s ease,border-color .25s ease}
.hb__skip[hidden]{display:none}
.hb__skip.is-in{opacity:1}
.hb__skip:hover{border-color:var(--bronze)}
.hb__skip:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-color:var(--bronze)}
@media (prefers-reduced-motion:reduce){.hb__skip{display:none}}
/* after a keyboard skip, focus lands on the heading (not interactive), so no ring */
.hb__h1[tabindex="-1"]:focus{outline:none}