/* ==========================================================================
   Superneat 2026 (temp) · main stylesheet
   Order: tokens → base → layout helpers → header → hero → about/services/reel
          → clients → crew → contact → footer → motion → responsive
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Sparkly Original: letter shapes traced from Superneat's hand-lettered titles.
   It only covers the letters used in titles/nav (no H, g, q or most punctuation;
   the L was built from the l stroke for "Leadership"),
   so longer titles use Permanent Marker instead. */
@font-face {
  font-family: 'Sparkly Original';
  src: url('../fonts/sparkly-original.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Superneat Numbers: the hand-drawn digits 0-9 from site-full.psd ("numbers" layer).
   unicode-range limits it to digits, so it can sit at the front of any font stack and
   only the numbers change. Rebuild with tools/build-numbers-font.py. */
/* Comfortaa (SIL Open Font License): the About intro under "We make neat stuff". */
@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/comfortaa-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Superneat Numbers';
  src: url('../fonts/superneat-numbers.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --paper: #f8f8f8;
  --white: #ffffff;
  --ink: #2b2723;
  --muted: #6f6862;
  --teal: #28cbb8;
  --teal-deep: #12a08f;
  --pink: #e35f8c;
  --pink-soft: #f589ac;
  --pink-bright: #ff95ea;
  --yellow: #ffcf29;
  --blue: #0064f9;
  --sky: #59c2f8;
  --azure: #1da1e6;
  --paint: #ffdf70;
  --mint: #4bd4bc;
  --gold: #fccf2f;
  --line: rgba(43, 39, 35, 0.14);

  /* type */
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  /* the hand-lettered stacks use the hand-drawn digits for any numbers */
  --font-sparkly: 'Superneat Numbers', 'Sparkly Original', 'Permanent Marker', cursive;
  --font-marker: 'Superneat Numbers', 'Permanent Marker', cursive;

  /* space + shape
     Three tiers, so grouping reads at a glance: tight inside a group (title +
     its line), --group-gap between blocks in a section, --section-y between sections. */
  --section-y: clamp(88px, 12vw, 176px);
  --group-gap: clamp(64px, 9vw, 136px);
  --gutter: 24px;
  --radius: 10px;
  --shadow: 0 16px 34px -18px rgba(40, 30, 20, 0.4);
  --cloud-shadow: drop-shadow(0 18px 26px rgba(20, 14, 8, 0.035)); /* the service, crew bio and Contact clouds */

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* icon masks (header SN mark, menu, close), inlined so they also show when
     index.html is opened from disk: browsers block masks loaded from local files.
     Sources: assets/images/brand/sn-mark.png, assets/images/ui/menu-open.png, menu-close.png */
  --icon-sn: url('data:image/png;base64,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');
  --icon-menu: url('data:image/png;base64,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');
  --icon-close: url('data:image/png;base64,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');
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The page is three layers: the paper (here, on the page canvas), the doodles
   (.doodles, below) and everything else on top. paper.jpg is a plain seamless tile
   (edges cross-faded) so the repeats don't show; the doodles are separate images. */
/* No scroll-behavior: smooth here: the header links glide by script (main.js), and on some
   Chrome versions it turned the splash's frame-by-frame scrolling into little animations,
   which cut the wheel glide short and left the second scroll crawling. */
html {
  /* No rubber-band bounce past the top or bottom (Mac trackpads, iPhone) */
  overscroll-behavior-y: none;
  background: var(--paper) url('../images/backgrounds/paper.jpg?v=2026-10-16') center top / 1400px auto repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Doodles: pencil drawings scattered on the paper ----------
   doodles.js places them and makes each drift a little on scroll at its own depth,
   so they feel further back than the page. They sit at z-index -1: above the paper,
   under everything else, so the white clouds and bands cover them.
   --doodle-opacity sets how faint they are, so the PNGs can be full-strength line art. */
.doodles {
  --doodle-opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 0; /* doodles.js sets it to the page's height */
  overflow: hidden;
  opacity: var(--doodle-opacity);
  pointer-events: none;
  user-select: none;
}
.doodle {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: var(--fade, 1);
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
}
/* Where the browser can tie an animation to the scroll, the drift runs there, in step
   with the page. doodles.js writes the doodle-drift keyframes (they follow the reel's
   ease-out) and moves the doodles itself in browsers that can't. */
@supports (animation-timeline: scroll()) {
  .doodle { animation: doodle-drift linear both; animation-timeline: scroll(root block); }
}
@media (prefers-reduced-motion: reduce) {
  .doodle { animation: none; translate: none; }
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--pink-soft); color: var(--white); }
:is(a, button):focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2 * var(--gutter), 1000px); margin-inline: auto; }
.section { padding-block: var(--section-y); }

/* ==========================================================================
   Header: logo and links fixed to the top, with no background bar.
   They fade in white over the reel when hero-splash.js adds .is-visible, then
   turn mint (like "Get in touch") with .is-on-paper once the reel has scrolled
   up past them. Pink on hover either way.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2.5rem;
  isolation: isolate;
  pointer-events: none;
}
.site-header.is-visible { pointer-events: auto; }

.site-header__logo,
.site-header__burger { position: relative; z-index: 2; display: flex; }
.site-header__burger { display: none; padding: 4px; }

/* The SN mark and menu icon are PNG masks filled with the text colour, so they
   fade between white, mint and pink exactly like the links. */
.site-header__mark,
.site-header__menu-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.site-header__mark { --icon: var(--icon-sn); width: 44px; height: 34px; }
.site-header__menu-icon { --icon: var(--icon-menu); width: 28px; height: 22px; }
.site-header__burger[aria-expanded="true"] .site-header__menu-icon { --icon: var(--icon-close); }

.site-nav { --nav-gap: clamp(1rem, 2vw, 2.25rem); display: flex; align-items: center; gap: var(--nav-gap); }
.site-nav__link {
  font-family: var(--font-sparkly);
  font-size: 1.4rem;
  line-height: 1.2;
  text-transform: lowercase;
}
/* Desktop: pad each link out so hover (and the click) catches the pointer as it
   nears the word, not only on it. Matching negative margins keep the layout put,
   and half the gap each side means neighbouring hit areas meet without overlapping. */
@media (min-width: 769px) {
  .site-nav__link {
    padding: 1rem calc(var(--nav-gap) / 2);
    margin: -1rem calc(var(--nav-gap) / -2);
  }
}
/* The nav words are hand-lettered (Aboutfix, reelfix, contactfix in site-full.psd);
   like the SN mark each is a PNG mask filled with the text colour, sized off the font.
   Heights keep the three at their drawn scale: "about" is 135px tall in the PSD. */
.site-nav__word {
  display: inline-block;
  vertical-align: baseline; /* the lettering has no descenders, so its bottom edge is the baseline */
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
/* "Join us" lives in the mobile menu only (see the mobile menu block below) */
.site-nav__join { display: none; }
.site-nav__word--about {
  --icon: url('../images/ui/nav-about.png?v=2026-10-18');
  height: 0.9em;
  aspect-ratio: 309 / 135;
}
.site-nav__word--reel {
  --icon: url('../images/ui/nav-reel.png?v=2026-10-21');
  height: calc(0.9em * 109 / 135);
  aspect-ratio: 191 / 109;
}
.site-nav__word--contact {
  --icon: url('../images/ui/nav-contact.png?v=2026-10-21');
  height: calc(0.9em * 124 / 135);
  aspect-ratio: 400 / 124;
}

.site-header :is(.site-header__logo, .site-nav__link, .site-header__burger) {
  color: var(--white);
  opacity: 0; /* hidden until the splash finishes */
  transition: opacity 0.7s ease, color 0.3s ease;
}
.site-header.is-visible :is(.site-header__logo, .site-nav__link, .site-header__burger) { opacity: 1; }
.site-header.is-on-paper :is(.site-header__logo, .site-nav__link, .site-header__burger) { color: var(--mint); }
/* Mouse/trackpad only: on phones a tap leaves :hover stuck until you tap elsewhere. */
@media (hover: hover) {
  .site-header :is(.site-header__logo, .site-nav__link, .site-header__burger):hover { color: var(--pink); }
}

/* ==========================================================================
   Hero: a tall scroll track with a sticky viewport. hero-splash.js paints a
   white curtain on the canvas with the SUPERNEAT wordmark cut out of it, so
   the reel plays through the letters, then fades the curtain away.
   The reel's bottom is cut into a cloud edge (the top edge of "Cloud cropper" in
   site-full.psd, flipped) and lies straight on the paper. Before it lets go, the
   pinned reel eases out: over the last --hero-ease of the track (after the splash
   has finished) it starts creeping up and speeds up to the page's own speed, so
   there's no jolt when it starts scrolling.
   ========================================================================== */
/* registered so scripts can read it back in px (hero-splash.js, hero-ease.js) */
@property --hero-ease { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --hero-lift { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root { --hero-ease: 16vh; } /* short, so the reel is moving with the scroll right after the splash */
/* How far hero-splash.js raises the SUPERNEAT logo from the hero's middle. On phones
   the hero is taller than what shows with the address bar (lvh vs svh), so this centres
   it in the visible part, plus a little extra (logos sit better just above centre). */
@media (max-width: 768px) {
  @supports (height: 100svh) {
    :root { --hero-lift: calc((100lvh - 100svh) / 2 + 2svh); }
  }
}
.hero {
  position: relative;
  height: calc(230vh + var(--hero-ease));
  view-timeline: --hero block;
}
/* clip-path rather than overflow: hidden, so the reel's cloud edge can hang below.
   The clip stops 10px past the bottom of the edge, never right on it: when the clip
   and the masked reel end on the same line, at some display scalings (125–175% on
   Windows) and window heights Chrome rounds them apart and draws the reel's last row
   of pixels without the mask, a straight line of video under the bumps.
   lvh: on phones it's always as tall as the screen with the address bar hidden, so
   nothing resizes (and no gap opens under the curtain) when the bar slides away.
   While the bar shows, the bottom of the hero just sits behind it. */
.hero__sticky {
  /* The cloud matte (tools/build-reel-matte.py, from longcloudmatte.psd): one 4971x100 strip
     shown at --matte-w by --matte-h, centred, so phones get its middle. --matte-room is
     spare space under it for the layers to spread into (.hero__media), and --edge is the
     two together. Sizes are plain px because hero-splash.js reads --edge. */
  --matte-w: 4356px;
  --matte-h: 87.6px;
  --matte-gray-h: 131.4px; /* the gray layers have 50 solid rows on top: --matte-h * 150 / 100 */
  --matte-room: 18px;
  --edge: 105.6px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  clip-path: inset(0 0 calc(var(--edge) * -1 - 10px) 0);
}
/* The ease-out: the reel rises half of --hero-ease over the last --hero-ease of scroll,
   on a quadratic ease-in (zero speed at first, the page's speed when it lets go).
   Scroll-driven animations stay in step with the scroll itself; browsers without
   them get the same curve from hero-ease.js, one frame behind. */
@keyframes hero-ease-out { to { transform: translateY(calc(var(--hero-ease) / -2)); } }
@supports (animation-timeline: view()) {
  .hero__sticky {
    animation: hero-ease-out cubic-bezier(0.333, 0, 0.667, 0.333) both;
    animation-timeline: --hero;
    animation-range: exit calc(var(--hero-ease) * -1) exit 0%;
  }
}
/* The reel runs one matte-height past the bottom of the screen, so the matte stays out
   of sight while it's pinned and only comes into view as the reel leaves.
   The matte is three masks (tools/build-reel-matte.py): the white clouds cut the reel,
   and it thins out through the light gray clouds, then the darker ones under them.
   Each mask's top 4 rows are cleared and the solid block runs 8px down over them.
   Browsers tile repeat-x vertically too, and at in-between scroll offsets (high-DPI
   screens especially) a row of the next tile's top can land under the bumps. With the
   top clear, that row is invisible, not a hairline.
   As the reel scrolls away the layers spread apart: each starts --matte-*-from below
   where it's drawn (negative = above) and ends --matte-*-to by the time the edge leaves
   the top of the screen, so they start bunched up and finish fanned out. The dark one
   sinks into --matte-room, so keep --matte-dark-to within it. Browsers without
   scroll-driven animations just show the layers where they're drawn. */
.hero__media {
  --matte-white-from: 6px;  --matte-white-to: -8px;
  --matte-light-from: 2px;  --matte-light-to: -1.5px;
  --matte-dark-from: -8px;  --matte-dark-to: 8px;
  --matte-y: calc(100% - var(--matte-room)); /* where the layers sit as drawn */
  position: absolute;
  inset: 0 0 calc(var(--edge) * -1);
  /* the solid block above the clouds moves with the white layer; the gray layers carry
     their own solid strip on top (build-reel-matte.py), so they need no block */
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    url('../images/backgrounds/reel-matte-white.png?v=2026-10-22d'),
    url('../images/backgrounds/reel-matte-light.png?v=2026-10-22d'),
    url('../images/backgrounds/reel-matte-dark.png?v=2026-10-22d');
          mask-image:
    linear-gradient(#000 0 0),
    url('../images/backgrounds/reel-matte-white.png?v=2026-10-22d'),
    url('../images/backgrounds/reel-matte-light.png?v=2026-10-22d'),
    url('../images/backgrounds/reel-matte-dark.png?v=2026-10-22d');
  -webkit-mask-size: 100% calc(100% - var(--edge) + 8px), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
          mask-size: 100% calc(100% - var(--edge) + 8px), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
          mask-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
  -webkit-mask-position: 0 0, 50% var(--matte-y), 50% var(--matte-y), 50% var(--matte-y);
          mask-position: 0 0, 50% var(--matte-y), 50% var(--matte-y), 50% var(--matte-y);
}
@keyframes matte-spread {
  from {
    -webkit-mask-size: 100% calc(100% - var(--edge) + 8px + var(--matte-white-from)), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
            mask-size: 100% calc(100% - var(--edge) + 8px + var(--matte-white-from)), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
    -webkit-mask-position: 0 0, 50% calc(var(--matte-y) + var(--matte-white-from)), 50% calc(var(--matte-y) + var(--matte-light-from)), 50% calc(var(--matte-y) + var(--matte-dark-from));
            mask-position: 0 0, 50% calc(var(--matte-y) + var(--matte-white-from)), 50% calc(var(--matte-y) + var(--matte-light-from)), 50% calc(var(--matte-y) + var(--matte-dark-from));
  }
  to {
    -webkit-mask-size: 100% calc(100% - var(--edge) + 8px + var(--matte-white-to)), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
            mask-size: 100% calc(100% - var(--edge) + 8px + var(--matte-white-to)), var(--matte-w) var(--matte-h), var(--matte-w) var(--matte-gray-h), var(--matte-w) var(--matte-gray-h);
    -webkit-mask-position: 0 0, 50% calc(var(--matte-y) + var(--matte-white-to)), 50% calc(var(--matte-y) + var(--matte-light-to)), 50% calc(var(--matte-y) + var(--matte-dark-to));
            mask-position: 0 0, 50% calc(var(--matte-y) + var(--matte-white-to)), 50% calc(var(--matte-y) + var(--matte-light-to)), 50% calc(var(--matte-y) + var(--matte-dark-to));
  }
}
@supports (animation-timeline: view()) {
  .hero__media {
    animation: matte-spread linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%; /* from about when the edge comes up into view */
  }
}
.hero__video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 30%);
}
/* Crisp teal letters on first load (mint, like the arrow). hero-splash.js adds
   .is-gone after INTRO_MS and sets the fade length (INTRO_FADE_MS, or quicker if
   scrolling beats it). */
.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--mint);
  transition: opacity 1.4s ease;
}
.hero__tint.is-gone { opacity: 0; }

/* Inside .hero__media, so it runs on over the reel's cloud edge and one mask cuts both: if
   the reel lifts away while the letters still show, no video peeks out under the curtain
   (two masks never quite line up on the edge's soft wisps). */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease;
  /* plain white until hero-splash.js has the letters ready (.is-ready), so the first
     thing on screen is the curtain, not the teal or reel behind it */
  background: #fff;
}
.hero__canvas.is-ready { background: none; }

/* A hand-drawn arrow under the logo, cut out of the white curtain (.is-cut below). Each time it appears it points twice
   ("doink doink"), rests 1.4s, and repeats. The frames are a strip
   (scroll-arrow-frames.png: rest, then 4 pointing frames) played by cue-point;
   the animation only runs while .is-shown, so it restarts from the double point
   each time the arrow comes back. hero-splash.js adds .is-shown after a beat or a
   pause in scrolling, removes it on scroll. Only tappable while shown (it glides on
   down); the padding is a bigger target for thumbs. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 26px; /* visible arrow sits 40px off the bottom edge (14px tap padding below it) */
  padding: 14px 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  /* no grey box on touch/pen taps, and a pen press can't select it */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}
.hero__cue.is-shown { opacity: 1; pointer-events: auto; cursor: pointer; }
/* the hero is full-screen-with-the-address-bar-hidden tall (see .hero__sticky), so lift
   the arrow by the bar's height to keep it above the bar while it shows */
@supports (height: 100svh) {
  .hero__cue { bottom: calc(100lvh - 100svh + 26px); }
}
/* over the reel (end of the splash) the gray arrow turns solid white */
.hero__cue.is-on-reel .hero__cue-arrow { filter: brightness(0) invert(1); }
@media (hover: hover) {
  .hero__cue.is-shown:hover .hero__cue-arrow { filter: brightness(0.6); }
  .hero__cue.is-on-reel.is-shown:hover .hero__cue-arrow { filter: brightness(0) invert(0.8); }
}
/* 50% bigger than the old arrow (~52px long at rest) */
.hero__cue-arrow {
  display: block;
  height: 63px;
  aspect-ratio: 51 / 116;
  background: url(../images/ui/scroll-arrow-frames.png?v=2026-10-18) 0 0 / 500% 100% no-repeat;
  transition: filter 0.2s ease;
}
.hero__cue.is-shown .hero__cue-arrow { animation: cue-point 2.3s step-end 0.35s infinite; }
/* on the white curtain hero-splash.js cuts the arrow out of it (the reel shows through),
   following this one's frame and fade, so this one only keeps its place, animation and
   click target. Without .is-cut (frames not loaded, or over the reel) it shows as usual. */
.hero__cue.is-cut .hero__cue-arrow { opacity: 0; }
/* 100ms a frame: point, back to rest, point again, then hold */
@keyframes cue-point {
  0%     { background-position-x: 25%; }
  4.35%  { background-position-x: 50%; }
  8.7%   { background-position-x: 75%; }
  13.04% { background-position-x: 100%; }
  17.39% { background-position-x: 0%; }
  21.74% { background-position-x: 25%; }
  26.09% { background-position-x: 50%; }
  30.43% { background-position-x: 75%; }
  34.78% { background-position-x: 100%; }
  39.13%, 100% { background-position-x: 0%; }
}

/* ==========================================================================
   About · services · reel
   ========================================================================== */
/* Pulled up by the distance the reel rose while easing out (see .hero), so it follows the reel's edge.
   --about-gap is the space from the reel's cloud edge to the title, and (less --about-peek)
   from the intro to the service clouds. --about-hang is how far the cloud edge's bumps hang
   below the reel's box (hero-splash.js reads it to place where the splash's last scroll settles). */
.about {
  --about-gap: max(21svh, 64px);
  --about-peek: 36px;
  --about-hang: 45px; /* the faded reel reads as ending around the light gray clouds' bumps */
  margin-top: calc(var(--hero-ease) / -2);
  padding-top: calc(var(--about-gap) + var(--about-hang));
  text-align: center;
}
/* hero-splash.js fades this in during the zoom (inline opacity/transform) */
.about { will-change: opacity, transform; transition: opacity 0.15s ease-out, transform 0.15s ease-out; }

/* The GIF has empty space around the lettering (rows 109–365 of 538, at 1700 wide); the
   margins trim it so the spacing above and below is measured from the letters themselves. */
.about__title {
  --w: min(92vw, 820px);
  --title-gap: 32px; /* letters to intro */
  display: flex;
  justify-content: center;
  margin: calc(var(--w) * -109 / 1700) auto calc(var(--w) * -173 / 1700 + var(--title-gap));
}
.about__title img { width: var(--w); height: auto; filter: url(#teal-tint); }

/* Laid out like the mockup: Comfortaa in mid grey, a little wider than the lettering
   above. 29.6em just fits the first line ("...We bring"), so the breaks fall where
   the mockup has them. */
.about__intro {
  max-width: 29.6em;
  margin-inline: auto;
  font-family: 'Comfortaa', system-ui, sans-serif;
  font-size: clamp(16px, 1.85vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: #606060;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: calc(var(--about-gap) - var(--about-peek));
  scroll-margin-top: 90px;
}
/* Hand-drawn white cloud behind each card (exported from the mockup PSD). */
.service {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 55px 34px 42px;
}
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: center / 100% 100% no-repeat;
  filter: var(--cloud-shadow);
}
.service--animation::before   { background-image: url('../images/about/bubble-animation.png'); }
.service--supervision::before { background-image: url('../images/about/bubble-supervision.png'); }
.service--production::before  { background-image: url('../images/about/bubble-production.png'); }

/* Slow bob, on threes: 14 held drawings × 3 frames at 24fps = a 42f (1.75s) cycle, 6.5px of travel
   on a sine, snapped to half pixels. Tuned by eye in tools/cloud-tuner.html.
   step-end holds each drawing until the next, so it pops like drawings rather than gliding.
   The delays are each cloud's offset in frames (7f, 0f, 23f ÷ 24). They aren't whole drawings,
   so the clouds change on different frames. Production bobs 10% bigger, which snaps to
   different half pixels, hence its own keyframes. */
.service { animation: cloud-bob 1.75s step-end infinite; }
.service--animation  { animation-delay: calc(-7s / 24); }
.service--production { animation-name: cloud-bob-big; animation-delay: calc(-23s / 24); }
@keyframes cloud-bob {
  0%, 7.143%, 92.857%, 100%  { translate: 0 -3px; }
  14.286%, 85.714%           { translate: 0 -2px; }
  21.429%, 78.571%           { translate: 0 -0.5px; }
  28.571%, 71.429%           { translate: 0 0.5px; }
  35.714%, 64.286%           { translate: 0 2px; }
  42.857%, 57.143%           { translate: 0 3px; }
  50%                        { translate: 0 3.5px; }
}
@keyframes cloud-bob-big {
  0%, 100%                   { translate: 0 -3.5px; }
  7.143%, 92.857%            { translate: 0 -3px; }
  14.286%, 85.714%           { translate: 0 -2px; }
  21.429%, 78.571%           { translate: 0 -1px; }
  28.571%, 71.429%           { translate: 0 1px; }
  35.714%, 64.286%           { translate: 0 2px; }
  42.857%, 57.143%           { translate: 0 3px; }
  50%                        { translate: 0 3.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .service { animation: none; }
}

.service__title {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sparkly);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  color: var(--sky);
}
.service p {
  max-width: 220px;
  margin: 30px 0;
  font-family: 'Comfortaa', system-ui, sans-serif; /* same as the About intro */
  font-size: 14px;
  line-height: 1.5;
  color: #606060;
  text-wrap: pretty; /* no lone last word */
}
.service__drawing { width: 150px; height: 140px; margin-top: auto; object-fit: contain; }
/* the bee + eyes fill their canvas top to bottom, so lift them a touch to sit centred in the cloud */
.service--supervision .service__drawing { translate: 0 -5px; }
/* white line-art drawing → ink */
.service__drawing--line { filter: invert(1); }

/* the reel is its own idea, so it gets a touch more air than the cards above */
/* Springs for the hover, so things bounce a few times before they settle (made with a
   damped spring: --spring overshoots 25% then 6% then 2%; --spring-soft just 8%). */
.reel {
  --spring: linear(0.0, 0.037, 0.133, 0.272, 0.434, 0.603, 0.766, 0.912, 1.035, 1.131, 1.199, 1.238, 1.253, 1.248, 1.226, 1.192, 1.152, 1.109, 1.067, 1.029, 0.996, 0.971, 0.952, 0.941, 0.936, 0.937, 0.941, 0.95, 0.959, 0.97, 0.981, 0.991, 0.999, 1.006, 1.011, 1.015, 1.016, 1.016, 1.015, 1.013, 1.011, 1.008, 1.005, 1.003, 1.001, 0.999, 0.997, 0.996, 1);
  --spring-soft: linear(0.0, 0.016, 0.06, 0.124, 0.202, 0.289, 0.38, 0.472, 0.561, 0.645, 0.723, 0.793, 0.856, 0.91, 0.955, 0.993, 1.023, 1.046, 1.062, 1.074, 1.081, 1.083, 1.083, 1.08, 1.075, 1.069, 1.062, 1.055, 1.047, 1.039, 1.032, 1.025, 1.019, 1.014, 1.009, 1.005, 1.002, 0.999, 0.997, 0.995, 0.994, 0.993, 0.993, 0.993, 0.993, 0.994, 0.994, 0.995, 1);
}
.reel { position: relative; isolation: isolate; width: min(100%, 880px); margin: calc(var(--group-gap) * 1.2) auto 0; scroll-margin-top: 130px; }
/* Hover clouds (Player_cloud in site-full.psd, exported by tools/build-reel-player.py).
   Each cloud's span covers the reel frame exactly and scales from the frame's centre,
   so at --cloud-from the cloud is tucked out of sight behind the reel and grows out from
   behind it on hover, on --spring. The darker clouds follow by --cloud-lag on the
   softer spring, and go back in first. Positions are % of the frame, as the script prints them. */
.reel__clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the back clouds, the PSD's light grey (#efefef), under all the white ones */
.reel__clouds-back { position: absolute; inset: 0; }
.reel__cloud {
  --cloud-from: 0.7;
  --cloud-lag: 40ms;
  position: absolute;
  inset: 0;
  transform: scale(var(--cloud-from));
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.75, 0) var(--cloud-lag);
}
.reel__cloud--dark { transition-delay: 0s; }
.reel__cloud img { position: absolute; height: auto; max-width: none; }
.reel__cloud--right-dark  img { left: 68.578%;  top: -6.077%;  width: 43.126%; }
.reel__cloud--right       img { left: 66.222%;  top: -6.077%;  width: 43.362%; }
.reel__cloud--left-dark   img { left: -10.448%; top: -9.807%;  width: 17.832%; }
.reel__cloud--left        img { left: -8.798%;  top: -4.42%;   width: 16.182%; }
.reel__cloud--bottom-dark img { left: -3.064%;  top: 85.773%;  width: 106.127%; }
.reel__cloud--bottom      img { left: -3.064%;  top: 85.773%;  width: 106.127%; }
.reel__cloud--top-dark    img { left: -1.493%;  top: -17.956%; width: 103.378%; }
.reel__cloud--top         img { left: -1.493%;  top: -15.746%; width: 104.321%; }
@media (hover: hover) {
  .reel:hover .reel__cloud {
    transform: none;
    transition: transform 1s var(--spring) 0s;
  }
  .reel:hover .reel__cloud--dark { transition: transform 0.9s var(--spring-soft) var(--cloud-lag); }
}
.reel:has(:focus-visible) .reel__cloud { transform: none; }
.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #111;
  box-shadow: var(--shadow);
}
.reel__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel__thumb { position: absolute; inset: 0; width: 100%; }
.reel__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* the thumbnail shows clean; a faint white wash comes in on hover, with the clouds */
.reel__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.35s ease;
}
.reel:hover .reel__thumb::after,
.reel__thumb:focus-visible::after { background-color: rgba(255, 255, 255, 0.05); }
/* Play button: a see-through dark circle ("Color Fill 6 copy" in site-full.psd, exported by
   tools/build-reel-player.py) with the hand-drawn arrow on it, both PNG masks so colour and
   opacity are set here. The arrow is play-arrow-strip.webp, its frames side by side (built
   by tools/build-mask-strip.py from reel/src/play-arrow.gif), wobbling on a loop in white.
   The arrow is a little see-through (--arrow-rest). On hovering the reel, with the clouds,
   it turns solid and grows by --arrow-grow, and the circle grows a touch (--circle-grow),
   both on the clouds' spring (see .reel__cloud). */
.reel__play {
  --size: 27%; /* the mockup's size (31.343% in the PSD) */
  --arrow-grow: 1.18;
  --circle-grow: 1.05;
  --arrow-rest: 0.65;
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: var(--size);
  aspect-ratio: 399 / 411;
  transform: translate(-50%, -50%);
}
.reel__play-circle,
.reel__play-arrow { position: absolute; }
.reel__play-circle {
  inset: 0;
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.75, 0);
  background: #000;
  opacity: 0.4;
  -webkit-mask: url('../images/reel/play-circle.png?v=2026-10-21') center / 100% 100% no-repeat;
          mask: url('../images/reel/play-circle.png?v=2026-10-21') center / 100% 100% no-repeat;
}
/* the strip's cell is sized so every wobble frame stays inside the circle, with the
   resting arrow centred a touch right of middle (55%, 50%) */
.reel__play-arrow {
  left: 17.48%; top: 26.96%; width: 70%;
  opacity: var(--arrow-rest);
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.75, 0), opacity 0.25s ease;
  aspect-ratio: 318 / 223.2; /* the art's 318 x 240, squashed 7% in height */
  background: #fff;
  -webkit-mask: url('../images/reel/play-arrow-strip.webp') 0 0 / 700% 100% no-repeat;
          mask: url('../images/reel/play-arrow-strip.webp') 0 0 / 700% 100% no-repeat;
  animation: reel-play-arrow 2650ms step-end infinite;
}
/* the GIF's own timings (frame 0 holds 200ms, the rest 100ms each), with frames
   1-6 played twice, then the last frame holds a further 1.35s before it goes round
   again: 200ms + 2 x 600ms + 1250ms = 2650ms (LOOPS in tools/build-mask-strip.py) */
@keyframes reel-play-arrow {
  0%        { -webkit-mask-position: 0 0;        mask-position: 0 0; }        /*    0ms */
  7.5472%   { -webkit-mask-position: 16.6667% 0; mask-position: 16.6667% 0; } /*  200ms */
  11.3208%  { -webkit-mask-position: 33.3333% 0; mask-position: 33.3333% 0; } /*  300ms */
  15.0943%  { -webkit-mask-position: 50% 0;      mask-position: 50% 0; }      /*  400ms */
  18.8679%  { -webkit-mask-position: 66.6667% 0; mask-position: 66.6667% 0; } /*  500ms */
  22.6415%  { -webkit-mask-position: 83.3333% 0; mask-position: 83.3333% 0; } /*  600ms */
  26.4151%  { -webkit-mask-position: 100% 0;     mask-position: 100% 0; }     /*  700ms */
  30.1887%  { -webkit-mask-position: 16.6667% 0; mask-position: 16.6667% 0; } /*  800ms, second wobble */
  33.9623%  { -webkit-mask-position: 33.3333% 0; mask-position: 33.3333% 0; } /*  900ms */
  37.7358%  { -webkit-mask-position: 50% 0;      mask-position: 50% 0; }      /* 1000ms */
  41.5094%  { -webkit-mask-position: 66.6667% 0; mask-position: 66.6667% 0; } /* 1100ms */
  45.2830%  { -webkit-mask-position: 83.3333% 0; mask-position: 83.3333% 0; } /* 1200ms */
  49.0566%  { -webkit-mask-position: 100% 0;     mask-position: 100% 0; }     /* 1300ms, held to 2650ms */
}
@media (hover: hover) {
  .reel:hover .reel__play-arrow {
    transform: scale(var(--arrow-grow));
    opacity: 1;
    transition: transform 1s var(--spring), opacity 0.2s ease;
  }
  .reel:hover .reel__play-circle {
    transform: scale(var(--circle-grow));
    transition: transform 1s var(--spring);
  }
}
.reel:has(:focus-visible) .reel__play-arrow { transform: scale(var(--arrow-grow)); opacity: 1; }
.reel:has(:focus-visible) .reel__play-circle { transform: scale(var(--circle-grow)); }
/* The Mux player that takes the thumbnail's place (built in main.js, which also holds its
   layout, volume-slider and auto-hide settings). Its whole look is these --rp-* values;
   ?tune-player=1 opens tools/player-tuner.js to change them live and copy them back here.
   The --media-* lines underneath hand them to Media Chrome, so leave those be. */
.reel-player {
  /* buttons: icon heights (the width follows each image's shape) */
  --rp-play: 28px;
  --rp-volume: 34px;
  --rp-fullscreen: 34px;
  --rp-hit: 10px;             /* room around each icon that still counts as the button */
  --rp-gap: 2px;              /* between controls */
  --rp-idle-opacity: 0.85;    /* icons until hovered */
  --rp-hover-scale: 1.12;
  --rp-icon-color: #ffffff;   /* icons, when main.js has icons: 'tint' */
  --rp-icon-hover: #00ffe1;   /* ...and with the pointer over them */
  /* the bar the controls sit on */
  --rp-bar-bottom: 0px;       /* lift off the video's bottom edge */
  --rp-bar-side: 8px;         /* in from the left and right edges */
  --rp-bar-pad-y: 2px;
  --rp-bar-pad-x: 4px;
  --rp-bar-bg: 0;             /* a dark pill behind the controls, 0 = none */
  --rp-bar-radius: 12px;
  --rp-scrim: 0.08;           /* the shade rising from the bottom so white icons read */
  --rp-scrim-height: 110px;
  /* trackbar */
  --rp-track: 4px;
  --rp-track-radius: 4px;
  --rp-thumb: 12px;           /* the dot you drag, 0 = none */
  --rp-played: #ff66d6;
  --rp-rail: 0.3;             /* the unplayed line, white at this opacity */
  --rp-buffered: 0.64;        /* the downloaded-ahead part */
  /* volume slider */
  --rp-vol-width: 71px;

  --media-primary-color: #fff;
  --media-font-family: var(--font-body);
  --media-control-background: transparent;
  --media-control-hover-background: transparent;
  --media-control-height: max(var(--rp-play), var(--rp-volume), var(--rp-fullscreen));
  --media-control-padding: var(--rp-hit);
  --media-range-track-height: var(--rp-track);
  --media-range-track-border-radius: var(--rp-track-radius);
  --media-range-track-background: rgb(255 255 255 / var(--rp-rail));
  --media-time-range-buffered-color: rgb(255 255 255 / var(--rp-buffered));
  --media-range-bar-color: var(--rp-played);
  --media-range-thumb-background: var(--rp-played);
  --media-range-thumb-width: var(--rp-thumb);
  --media-range-thumb-height: var(--rp-thumb);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #111;
}
.reel-player__scrim {
  position: absolute;
  inset: auto 0 0;
  height: var(--rp-scrim-height);
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / var(--rp-scrim)));
  pointer-events: none !important;
}
.reel-player media-control-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--rp-gap);
  margin: 0 var(--rp-bar-side) var(--rp-bar-bottom);
  padding: var(--rp-bar-pad-y) var(--rp-bar-pad-x);
  border-radius: var(--rp-bar-radius);
  background: rgb(0 0 0 / var(--rp-bar-bg));
}
.reel-player media-play-button { --media-button-icon-height: var(--rp-play); }
.reel-player media-mute-button { --media-button-icon-height: var(--rp-volume); }
.reel-player media-fullscreen-button { --media-button-icon-height: var(--rp-fullscreen); }
.reel-player :is(media-play-button, media-mute-button, media-fullscreen-button) {
  padding: var(--rp-hit); /* set here as well, or the page's reset zeroes it */
  opacity: var(--rp-idle-opacity);
  transition: opacity 0.2s, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* only with a mouse: a phone keeps "hover" on whatever was last tapped */
@media (hover: hover) {
  .reel-player :is(media-play-button, media-mute-button, media-fullscreen-button):hover { opacity: 1; scale: var(--rp-hover-scale); }
}
.reel-player media-time-range { flex: 1; min-width: 0; min-height: 0; }
.reel-player__volume { display: flex; align-items: center; }
.reel-player media-volume-range { width: var(--rp-vol-width); }
.reel-player[data-volume="hover"] media-volume-range {
  width: 0;
  --media-range-padding: 0px;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.2s;
}
.reel-player[data-volume="hover"] .reel-player__volume:is(:hover, :focus-within) media-volume-range {
  width: var(--rp-vol-width);
  --media-range-padding: var(--rp-hit);
  opacity: 1;
}
.reel-player[data-volume="none"] media-volume-range { display: none; }
/* touch screens: no slider (iPhones can't set a page's volume anyway), the speaker just mutes */
@media (hover: none) { .reel-player media-volume-range { display: none; } }
/* tint: the icon file is only used for its shape (as a mask) and painted in --rp-icon-color.
   The image itself is pushed out of its own box so only the paint shows. */
.reel-player[data-icons="tint"] :is(media-play-button, media-mute-button, media-fullscreen-button) img {
  background: var(--rp-icon-color);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  object-position: -9999px 0;
  transition: background-color 0.2s;
}
@media (hover: hover) {
  .reel-player[data-icons="tint"] :is(media-play-button, media-mute-button, media-fullscreen-button):hover img { background: var(--rp-icon-hover); }
}
/* stack: the trackbar takes the whole first line; play stays left, the rest go right */
.reel-player[data-layout="stack"] media-time-range { order: -1; flex-basis: 100%; }
.reel-player[data-layout="stack"] .reel-player__volume { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .reel__play-arrow,
  .reel:hover .reel__play-arrow,
  .reel:has(:focus-visible) .reel__play-arrow,
  .reel:hover .reel__play-circle,
  .reel:has(:focus-visible) .reel__play-circle { animation: none; transform: none; }
  /* clouds just appear, no growing */
  .reel__cloud { transform: none; opacity: 0; transition: opacity 0.2s; }
  .reel:hover .reel__cloud,
  .reel:has(:focus-visible) .reel__cloud { opacity: 1; transition: opacity 0.2s; }
}

/* ==========================================================================
   Clients: a white cloud band so the logos read cleanly over the paper. Its top
   and bottom are the two edges of "Cloud cropper" in site-full.psd (the same
   strips the hero and footer use, turned back the right way up), at the footer's
   scale. The edge strips tile sideways; the plain white fill sits between them.
   The band is its own layer behind the logos so it can breathe with the scroll:
   main.js sets --band-squeeze (0 when the section is centred on screen, up to 1 as
   it enters or leaves). Centred, both edges reach --band-grow past the section;
   squeezed, both pull --band-pull inside it. Top and bottom travel the same
   distance, so the band swells towards you on the way up the screen and recedes
   after. The section's own box never changes, so nothing around it moves.
   ========================================================================== */
.clients {
  --edge-top: 33px;
  --edge-bottom: 29px;
  /* capped by height as well as width, so short laptop screens get a slimmer band
     while tall monitors still reach the full padding */
  --pad-top: clamp(48px, min(7vw, 8vh), 103px);
  --pad-bottom: clamp(56px, min(8.9vw, 10vh), 128px);
  --band-squeeze: 0;
  --band-grow: 16px;
  --band-pull: calc(0.4 * var(--pad-top)); /* how far each edge pulls in when squeezed */
  position: relative;
  isolation: isolate;
  padding-block: var(--pad-top) var(--pad-bottom);
  text-align: center;
}
.clients::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: calc(var(--band-squeeze) * (var(--band-pull) + var(--band-grow)) - var(--band-grow));
  bottom: calc(var(--band-squeeze) * (var(--band-pull) + var(--band-grow)) - var(--band-grow));
  background:
    url('../images/backgrounds/band-cloud-top.png') left top / 880px var(--edge-top) repeat-x,
    url('../images/backgrounds/band-cloud-bottom.png') left bottom / 730px var(--edge-bottom) repeat-x,
    linear-gradient(var(--white) 0 0) 0 calc(var(--edge-top) - 1px) / 100% calc(100% - var(--edge-top) - var(--edge-bottom) + 2px) no-repeat;
  pointer-events: none;
}
/* The title is hand-lettered ("Trusted" in site-full.psd) on its own little cloud
   ("Color Fill 4"), both PNG masks filled with the mockup's colours. The lettering's
   box is placed inside the cloud's box exactly where it sits in the PSD. */
.clients__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1;
}
.clients__title-art {
  position: relative;
  display: block;
  width: 12.5em;
  aspect-ratio: 481 / 82;
  margin-inline: auto;
}
.clients__title-art::before,
.clients__title-art::after {
  content: '';
  position: absolute;
  -webkit-mask: var(--icon) center / 100% 100% no-repeat;
          mask: var(--icon) center / 100% 100% no-repeat;
}
.clients__title-art::before {
  --icon: url('../images/clients/trusted-cloud.png?v=2026-10-18');
  inset: 0;
  background-color: #f1f1f0;
}
.clients__title-art::after {
  --icon: url('../images/clients/trusted-title.png?v=2026-10-18');
  left: 9.15%;   /*  44 / 481 */
  top: 24.39%;   /*  20 / 82  */
  width: 82.74%; /* 398 / 481 */
  height: 58.54%; /* 48 / 82  */
  background-color: #1da1e6;
}
.clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px clamp(32px, 4.5vw, 64px);
  margin-top: clamp(26px, 2.6vw, 36px);
}
/* Logo PNGs are trimmed to their edges. Fixed height + a width cap keeps the
   wide wordmarks (Passion, Psyop) from dwarfing the compact ones. */
.clients__list img {
  width: auto;
  height: 56px;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.clients__list img:hover { opacity: 1; }
/* the Flying Bark wordmark reads big at the full cap, so it sits about 20% smaller */
.clients__list .clients__logo--flying-bark { max-width: 121px; }

/* ==========================================================================
   Crew: each photo is cut to a hand-drawn shape by a mask PNG, so any
   square-ish photo dropped into assets/images/crew/ takes the shape.
   Hover cross-fades the photo to its drawing.
   ========================================================================== */
/* overflow-x: clip keeps the faces that step aside on phones (out past the screen's edge)
   from widening the page, which phone browsers otherwise do for a moment despite body's
   own clip, nudging the fixed header's menu button out and back. */
.crew { padding-bottom: calc(var(--section-y) * 0.4); text-align: center; overflow-x: clip; }
/* The title and names are hand-lettered SVGs (traced from site-full.psd), sized in em
   so they scale with font-size like text would. */
.crew__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.2;
  color: var(--pink-bright);
}
.crew__title-art { display: block; height: 1.24em; width: auto; margin-inline: auto; fill: currentColor; }

.crew__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --crew-gap: clamp(18px, 3vw, 40px);
  gap: var(--crew-gap);
  max-width: 860px;
  margin: clamp(40px, 5vw, 72px) auto 0;
}
.crew-member {
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent; /* no grey box flashing over the photo on touch/pen taps */
}
.crew-member__pic {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  -webkit-mask: var(--crew-mask) center / 100% 100% no-repeat;
          mask: var(--crew-mask) center / 100% 100% no-repeat;
}
/* Shapes traced from the mockup, inlined so they also work when index.html is
   opened from disk. Editable copies: assets/images/crew/<name>-mask.svg (and the
   original <name>-mask.png). To use a file instead: url('../images/crew/<name>-mask.png'). */
.crew-member--dylan { --crew-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M98.2 50.2C98.2 50.8 98.2 51.5 98.1 52.1C98.1 52.7 98.0 53.4 98.0 54.0C97.9 54.6 97.9 55.3 97.7 55.9C97.6 56.5 97.1 57.1 97.0 57.7C96.9 58.3 97.0 59.0 97.0 59.6C96.9 60.2 96.7 60.8 96.6 61.5C96.5 62.1 96.4 62.7 96.2 63.3C96.1 64.0 96.1 64.6 95.9 65.2C95.7 65.8 95.2 66.3 95.0 66.9C94.7 67.5 94.6 68.1 94.4 68.7C94.1 69.3 93.8 69.9 93.6 70.5C93.4 71.1 93.4 71.8 93.2 72.4C93.0 73.0 92.7 73.6 92.5 74.2C92.2 74.8 92.0 75.4 91.7 76.0C91.5 76.6 91.3 77.3 91.0 77.8C90.7 78.4 90.2 78.9 89.9 79.4C89.5 80.0 89.2 80.6 88.9 81.1C88.5 81.7 88.1 82.2 87.7 82.7C87.3 83.3 86.9 83.8 86.5 84.3C86.1 84.8 85.6 85.2 85.1 85.7C84.6 86.2 84.2 86.6 83.7 87.1C83.3 87.6 82.8 88.0 82.3 88.5C81.8 89.0 81.4 89.4 80.9 89.9C80.4 90.3 79.9 90.8 79.4 91.2C78.9 91.6 78.3 91.9 77.7 92.3C77.2 92.7 76.7 93.1 76.1 93.5C75.6 93.8 74.9 94.0 74.3 94.4C73.7 94.7 73.2 95.0 72.6 95.3C72.0 95.7 71.4 96.0 70.8 96.2C70.2 96.5 69.6 96.8 69.0 97.0C68.4 97.2 67.7 97.3 67.0 97.5C66.4 97.7 65.8 97.9 65.2 98.1C64.5 98.3 63.9 98.5 63.3 98.6C62.6 98.8 62.0 98.9 61.3 99.0C60.7 99.1 60.0 99.1 59.4 99.2C58.7 99.3 58.1 99.5 57.4 99.6C56.8 99.7 56.1 99.7 55.5 99.7C54.8 99.8 54.2 99.7 53.5 99.7C52.8 99.7 52.2 99.6 51.5 99.6C50.9 99.6 50.2 99.6 49.6 99.6C49.0 99.6 48.3 99.7 47.7 99.6C47.0 99.6 46.4 99.4 45.7 99.3C45.1 99.3 44.5 99.2 43.8 99.1C43.2 99.0 42.5 98.9 41.9 98.9C41.2 98.8 40.6 99.0 39.9 98.9C39.3 98.8 38.7 98.4 38.1 98.2C37.4 98.0 36.8 97.9 36.2 97.7C35.6 97.6 34.9 97.5 34.3 97.4C33.7 97.2 33.1 96.8 32.5 96.6C31.9 96.3 31.3 96.1 30.7 95.9C30.1 95.6 29.4 95.5 28.8 95.2C28.2 95.0 27.7 94.7 27.1 94.4C26.5 94.1 26.0 93.7 25.4 93.4C24.8 93.1 24.2 92.8 23.7 92.5C23.1 92.2 22.6 91.8 22.0 91.5C21.5 91.1 21.0 90.7 20.4 90.4C19.9 90.0 19.3 89.7 18.8 89.3C18.2 88.9 17.8 88.5 17.3 88.0C16.8 87.6 16.3 87.2 15.8 86.7C15.3 86.3 15.0 85.8 14.5 85.3C14.1 84.8 13.6 84.4 13.2 83.9C12.8 83.4 12.4 82.8 12.1 82.2C11.7 81.7 11.5 81.1 11.1 80.5C10.8 79.9 10.5 79.4 10.1 78.9C9.8 78.3 9.4 77.8 9.1 77.2C8.8 76.7 8.5 76.1 8.3 75.5C8.0 74.9 7.8 74.3 7.5 73.8C7.3 73.2 7.0 72.6 6.8 72.0C6.5 71.4 6.3 70.9 6.0 70.3C5.8 69.7 5.5 69.1 5.3 68.6C5.0 68.0 4.7 67.4 4.5 66.8C4.3 66.2 4.3 65.6 4.1 65.0C4.0 64.4 3.7 63.8 3.5 63.2C3.4 62.6 3.3 62.0 3.1 61.3C3.0 60.7 2.9 60.1 2.8 59.5C2.6 58.9 2.5 58.3 2.4 57.7C2.3 57.0 2.3 56.4 2.3 55.8C2.2 55.2 2.1 54.6 2.0 53.9C2.0 53.3 1.9 52.7 1.9 52.1C1.9 51.4 1.9 50.8 1.9 50.2C1.9 49.6 1.8 48.9 1.8 48.3C1.7 47.7 1.7 47.0 1.7 46.4C1.7 45.8 1.7 45.2 1.8 44.5C1.8 43.9 1.8 43.3 1.9 42.6C1.9 42.0 1.9 41.4 2.0 40.7C2.1 40.1 2.1 39.4 2.3 38.8C2.4 38.2 2.5 37.6 2.6 36.9C2.8 36.3 2.9 35.7 3.0 35.1C3.2 34.4 3.3 33.8 3.5 33.2C3.7 32.6 3.9 32.0 4.1 31.4C4.3 30.7 4.5 30.1 4.7 29.5C4.9 28.9 5.1 28.3 5.4 27.7C5.6 27.0 5.8 26.4 6.1 25.8C6.4 25.3 6.8 24.7 7.1 24.2C7.5 23.6 7.8 23.1 8.2 22.5C8.5 22.0 8.9 21.4 9.3 20.9C9.6 20.3 10.0 19.8 10.4 19.3C10.7 18.7 11.1 18.2 11.5 17.7C11.9 17.2 12.4 16.7 12.9 16.2C13.3 15.8 13.7 15.2 14.1 14.7C14.6 14.2 14.9 13.6 15.4 13.2C15.8 12.7 16.4 12.3 16.9 11.9C17.4 11.4 17.8 10.9 18.3 10.5C18.8 10.1 19.4 9.8 20.0 9.4C20.5 9.0 21.0 8.6 21.6 8.3C22.1 7.9 22.7 7.5 23.3 7.2C23.8 6.9 24.5 6.7 25.1 6.4C25.7 6.1 26.3 5.9 26.9 5.6C27.5 5.4 28.1 5.2 28.8 5.0C29.4 4.8 30.0 4.6 30.6 4.4C31.3 4.2 31.9 4.0 32.5 3.8C33.1 3.5 33.7 3.2 34.3 3.0C34.9 2.8 35.6 2.8 36.2 2.6C36.8 2.4 37.4 2.1 38.0 1.9C38.6 1.7 39.3 1.6 39.9 1.5C40.6 1.4 41.2 1.2 41.8 1.1C42.5 1.1 43.1 1.2 43.8 1.2C44.4 1.1 45.1 0.9 45.7 0.8C46.4 0.7 47.0 0.6 47.6 0.5C48.3 0.4 48.9 0.4 49.6 0.3C50.3 0.2 50.9 0.0 51.6 0.0C52.2 -0.0 52.9 -0.0 53.5 0.0C54.2 0.1 54.8 0.3 55.5 0.4C56.1 0.5 56.8 0.5 57.5 0.5C58.1 0.6 58.8 0.6 59.4 0.8C60.1 0.9 60.7 1.3 61.3 1.5C61.9 1.8 62.5 2.0 63.1 2.3C63.7 2.6 64.3 2.9 64.8 3.3C65.4 3.6 66.0 3.9 66.6 4.1C67.2 4.4 67.8 4.6 68.4 4.9C69.0 5.1 69.5 5.4 70.1 5.6C70.7 5.9 71.3 6.1 71.9 6.4C72.5 6.6 73.1 6.8 73.7 7.1C74.3 7.4 74.8 7.8 75.4 8.1C75.9 8.5 76.4 9.0 76.9 9.4C77.4 9.8 77.9 10.1 78.4 10.5C78.9 10.9 79.4 11.4 79.9 11.8C80.4 12.1 81.0 12.5 81.5 12.9C82.0 13.3 82.4 13.8 82.8 14.3C83.3 14.7 83.7 15.2 84.1 15.7C84.5 16.1 85.0 16.6 85.4 17.1C85.8 17.6 86.1 18.2 86.5 18.7C86.9 19.2 87.2 19.7 87.6 20.2C88.0 20.7 88.4 21.2 88.7 21.8C89.1 22.3 89.5 22.8 89.9 23.3C90.2 23.8 90.5 24.4 90.9 24.9C91.2 25.4 91.6 26.0 91.9 26.5C92.2 27.1 92.4 27.6 92.7 28.2C93.0 28.8 93.3 29.3 93.6 29.9C93.9 30.4 94.3 31.0 94.6 31.5C94.9 32.1 95.3 32.7 95.5 33.3C95.7 33.9 95.8 34.5 96.0 35.1C96.2 35.7 96.4 36.3 96.6 36.9C96.8 37.5 97.1 38.1 97.2 38.7C97.4 39.4 97.6 40.0 97.7 40.6C97.8 41.2 97.9 41.9 98.0 42.5C98.1 43.2 98.0 43.8 98.1 44.4C98.2 45.1 98.3 45.7 98.4 46.3C98.4 47.0 98.4 47.6 98.4 48.3C98.4 48.9 98.3 49.5 98.2 50.2Z'/%3E%3C/svg%3E"); }
.crew-member--john  { --crew-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.9 50.0C96.8 50.6 96.6 51.2 96.5 51.8C96.4 52.4 96.4 53.0 96.4 53.6C96.3 54.2 96.4 54.9 96.4 55.5C96.3 56.1 96.1 56.7 96.0 57.3C95.9 57.9 95.7 58.5 95.6 59.1C95.5 59.7 95.4 60.3 95.2 60.9C95.1 61.5 95.0 62.1 94.9 62.7C94.7 63.3 94.6 63.9 94.5 64.5C94.3 65.1 94.2 65.7 94.0 66.3C93.8 66.9 93.5 67.5 93.3 68.0C93.2 68.6 93.0 69.2 92.9 69.9C92.7 70.5 92.7 71.2 92.5 71.8C92.3 72.4 92.0 72.9 91.7 73.5C91.5 74.1 91.1 74.6 90.9 75.2C90.6 75.8 90.3 76.3 90.0 76.9C89.7 77.5 89.4 78.1 89.1 78.6C88.8 79.2 88.4 79.7 88.1 80.2C87.7 80.8 87.3 81.2 86.9 81.7C86.4 82.2 86.0 82.7 85.6 83.2C85.2 83.7 84.9 84.2 84.4 84.7C84.0 85.2 83.5 85.7 83.1 86.1C82.6 86.6 82.2 87.0 81.7 87.5C81.3 88.0 80.9 88.5 80.4 89.0C80.0 89.5 79.4 89.8 78.9 90.2C78.4 90.6 77.9 91.0 77.4 91.4C76.8 91.8 76.3 92.1 75.7 92.5C75.2 92.8 74.7 93.3 74.1 93.6C73.5 93.9 72.9 94.1 72.4 94.5C71.8 94.8 71.3 95.3 70.7 95.6C70.1 96.0 69.5 96.2 68.9 96.5C68.3 96.8 67.7 97.0 67.1 97.2C66.5 97.5 65.9 97.7 65.2 97.9C64.6 98.0 64.0 98.2 63.3 98.3C62.7 98.5 62.0 98.6 61.4 98.7C60.7 98.9 60.1 99.1 59.5 99.2C58.8 99.4 58.2 99.6 57.5 99.6C56.9 99.7 56.2 99.5 55.5 99.6C54.9 99.7 54.3 99.9 53.6 100.0C53.0 100.0 52.3 100.0 51.6 100.0C51.0 100.0 50.3 100.0 49.7 100.0C49.0 99.9 48.4 99.7 47.7 99.6C47.1 99.5 46.4 99.5 45.8 99.4C45.1 99.3 44.5 99.1 43.9 99.0C43.2 98.9 42.6 98.8 41.9 98.7C41.3 98.6 40.7 98.5 40.0 98.4C39.4 98.2 38.8 98.1 38.1 98.0C37.5 97.9 36.8 97.9 36.2 97.7C35.5 97.6 34.9 97.5 34.3 97.2C33.7 97.0 33.1 96.7 32.5 96.5C31.9 96.3 31.2 96.1 30.6 95.9C30.0 95.7 29.4 95.5 28.8 95.2C28.2 95.0 27.6 94.8 27.0 94.5C26.4 94.2 25.8 93.9 25.2 93.6C24.6 93.3 24.0 93.1 23.4 92.7C22.9 92.4 22.4 92.0 21.8 91.6C21.3 91.2 20.8 90.9 20.2 90.5C19.7 90.1 19.1 89.7 18.6 89.4C18.1 89.0 17.5 88.6 17.0 88.2C16.5 87.8 16.1 87.3 15.6 86.9C15.1 86.4 14.5 86.1 14.0 85.6C13.5 85.2 13.1 84.6 12.7 84.1C12.3 83.6 11.9 83.1 11.5 82.5C11.1 82.0 10.6 81.6 10.3 81.0C9.9 80.5 9.5 80.0 9.1 79.4C8.8 78.8 8.6 78.2 8.3 77.6C8.0 77.0 7.6 76.5 7.4 75.9C7.1 75.3 7.0 74.6 6.8 74.0C6.6 73.3 6.4 72.7 6.3 72.1C6.1 71.5 5.8 70.9 5.6 70.2C5.5 69.6 5.3 69.0 5.1 68.4C5.0 67.8 4.9 67.1 4.8 66.5C4.7 65.9 4.5 65.3 4.4 64.7C4.3 64.0 4.3 63.4 4.3 62.8C4.3 62.1 4.3 61.5 4.3 60.9C4.2 60.2 4.1 59.6 4.0 59.0C3.9 58.4 3.7 57.8 3.6 57.2C3.6 56.6 3.6 56.0 3.5 55.4C3.5 54.8 3.3 54.2 3.3 53.6C3.2 53.0 3.3 52.4 3.3 51.8C3.2 51.2 3.1 50.6 3.1 50.0C3.1 49.3 3.2 48.7 3.3 48.1C3.3 47.5 3.3 46.9 3.3 46.3C3.3 45.7 3.2 45.1 3.3 44.5C3.3 43.9 3.5 43.3 3.5 42.6C3.6 42.0 3.5 41.4 3.6 40.8C3.7 40.2 3.9 39.6 4.0 39.0C4.2 38.4 4.3 37.8 4.4 37.2C4.5 36.6 4.6 36.0 4.8 35.4C4.9 34.8 5.1 34.2 5.3 33.6C5.5 33.0 5.7 32.4 5.9 31.8C6.1 31.2 6.2 30.6 6.4 30.0C6.6 29.4 6.9 28.9 7.1 28.3C7.4 27.7 7.5 27.1 7.8 26.5C8.0 25.9 8.3 25.4 8.6 24.8C8.9 24.2 9.2 23.7 9.5 23.1C9.8 22.6 10.0 22.0 10.4 21.4C10.7 20.9 11.1 20.4 11.5 19.9C11.9 19.4 12.3 18.9 12.6 18.3C13.0 17.8 13.3 17.2 13.8 16.8C14.2 16.3 14.7 15.9 15.1 15.4C15.5 14.9 15.9 14.3 16.3 13.9C16.8 13.4 17.3 13.1 17.8 12.6C18.2 12.1 18.6 11.6 19.1 11.1C19.5 10.7 20.0 10.3 20.5 9.8C21.0 9.4 21.5 9.0 22.0 8.6C22.5 8.2 23.1 7.8 23.6 7.5C24.2 7.1 24.7 6.7 25.3 6.4C25.8 6.1 26.4 5.8 27.0 5.5C27.6 5.2 28.2 4.9 28.8 4.6C29.4 4.4 30.0 4.1 30.6 3.9C31.2 3.6 31.8 3.4 32.4 3.1C33.0 2.9 33.6 2.7 34.3 2.5C34.9 2.3 35.5 2.2 36.1 2.0C36.8 1.9 37.4 1.8 38.1 1.6C38.7 1.5 39.3 1.3 40.0 1.1C40.6 1.0 41.2 0.9 41.9 0.9C42.5 0.8 43.2 0.8 43.8 0.8C44.5 0.7 45.1 0.6 45.8 0.5C46.4 0.5 47.1 0.4 47.7 0.4C48.4 0.4 49.0 0.4 49.7 0.4C50.3 0.4 51.0 0.3 51.6 0.3C52.3 0.3 52.9 0.2 53.6 0.3C54.2 0.3 54.9 0.4 55.5 0.4C56.2 0.4 56.9 0.4 57.5 0.4C58.2 0.4 58.9 0.3 59.5 0.4C60.2 0.5 60.8 0.6 61.5 0.8C62.1 0.9 62.8 1.1 63.4 1.3C64.0 1.5 64.6 1.8 65.2 2.0C65.9 2.2 66.6 2.2 67.2 2.4C67.8 2.6 68.4 3.0 69.0 3.3C69.6 3.5 70.2 3.7 70.8 4.0C71.5 4.3 72.1 4.6 72.6 4.9C73.2 5.2 73.8 5.5 74.3 5.9C74.9 6.3 75.4 6.7 75.9 7.1C76.4 7.5 77.0 7.9 77.5 8.3C78.0 8.7 78.5 9.2 79.0 9.6C79.4 10.1 79.9 10.5 80.4 11.0C80.8 11.5 81.3 11.9 81.7 12.4C82.2 12.9 82.6 13.4 83.0 13.9C83.4 14.4 83.9 14.8 84.4 15.3C84.8 15.7 85.2 16.2 85.6 16.7C86.0 17.2 86.4 17.7 86.9 18.2C87.3 18.7 87.7 19.1 88.1 19.6C88.5 20.1 88.9 20.7 89.2 21.2C89.6 21.8 89.8 22.4 90.1 22.9C90.4 23.5 90.7 24.1 91.0 24.6C91.3 25.2 91.7 25.7 92.0 26.3C92.3 26.8 92.5 27.4 92.7 28.0C93.0 28.6 93.3 29.1 93.6 29.7C93.9 30.3 94.3 30.8 94.5 31.4C94.7 32.0 94.7 32.7 94.9 33.3C95.0 33.9 95.1 34.5 95.2 35.2C95.4 35.8 95.6 36.4 95.7 37.0C95.9 37.6 96.1 38.2 96.2 38.8C96.3 39.4 96.3 40.0 96.3 40.7C96.4 41.3 96.4 41.9 96.5 42.5C96.6 43.2 96.7 43.8 96.7 44.4C96.8 45.0 96.8 45.6 96.9 46.2C96.9 46.9 96.8 47.5 96.8 48.1C96.8 48.7 96.9 49.3 96.9 50.0Z'/%3E%3C/svg%3E"); }
.crew-member--mike  { --crew-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M97.6 50.2C97.6 50.8 97.5 51.4 97.5 52.0C97.4 52.7 97.3 53.3 97.2 53.9C97.2 54.5 97.3 55.1 97.1 55.7C97.0 56.3 96.6 56.9 96.4 57.5C96.2 58.1 96.1 58.7 96.0 59.3C95.8 59.9 95.6 60.5 95.5 61.1C95.3 61.7 95.3 62.3 95.2 62.9C95.1 63.5 95.0 64.1 94.9 64.7C94.7 65.3 94.5 65.9 94.4 66.5C94.2 67.1 94.1 67.7 94.0 68.3C93.8 68.9 93.8 69.6 93.6 70.2C93.5 70.8 93.3 71.4 93.0 72.0C92.8 72.6 92.5 73.2 92.2 73.7C91.9 74.3 91.6 74.8 91.2 75.3C90.9 75.9 90.6 76.4 90.2 76.9C89.9 77.4 89.4 77.9 89.0 78.4C88.6 78.9 88.2 79.3 87.9 79.8C87.5 80.4 87.2 80.9 86.9 81.5C86.5 82.0 86.2 82.6 85.9 83.1C85.5 83.6 85.1 84.1 84.6 84.6C84.2 85.0 83.7 85.4 83.2 85.9C82.8 86.3 82.3 86.8 81.9 87.2C81.4 87.7 81.0 88.2 80.5 88.6C80.1 89.1 79.6 89.5 79.1 90.0C78.6 90.4 78.2 90.8 77.7 91.2C77.2 91.6 76.6 92.0 76.1 92.4C75.5 92.7 74.9 93.0 74.4 93.3C73.8 93.6 73.2 93.9 72.7 94.2C72.1 94.5 71.5 94.9 70.9 95.1C70.3 95.4 69.7 95.5 69.1 95.7C68.5 95.9 67.9 96.2 67.3 96.4C66.7 96.6 66.0 96.6 65.4 96.9C64.8 97.1 64.2 97.4 63.6 97.6C63.0 97.8 62.4 97.9 61.7 98.1C61.1 98.3 60.5 98.6 59.9 98.7C59.3 98.9 58.6 99.2 58.0 99.2C57.4 99.3 56.7 99.2 56.0 99.2C55.4 99.2 54.7 99.2 54.1 99.2C53.4 99.2 52.8 99.2 52.2 99.2C51.5 99.3 50.9 99.5 50.2 99.6C49.6 99.7 48.9 99.6 48.3 99.6C47.6 99.6 47.0 99.6 46.3 99.6C45.7 99.6 45.0 99.6 44.4 99.6C43.7 99.6 43.0 99.7 42.4 99.6C41.8 99.5 41.1 99.2 40.5 99.0C39.9 98.8 39.3 98.5 38.7 98.4C38.0 98.2 37.4 98.2 36.7 98.1C36.1 98.0 35.4 98.1 34.7 98.0C34.0 97.9 33.4 97.8 32.7 97.6C32.1 97.4 31.5 97.2 30.9 96.9C30.3 96.7 29.7 96.4 29.1 96.1C28.5 95.8 27.9 95.5 27.3 95.1C26.8 94.7 26.3 94.3 25.7 94.0C25.1 93.6 24.5 93.4 23.9 93.1C23.4 92.8 22.8 92.4 22.3 92.0C21.7 91.6 21.2 91.3 20.6 90.9C20.1 90.5 19.6 90.2 19.1 89.7C18.6 89.3 18.1 88.8 17.6 88.4C17.2 87.9 16.7 87.4 16.3 86.9C15.8 86.5 15.4 86.0 14.9 85.5C14.4 85.1 13.9 84.7 13.4 84.2C12.9 83.8 12.5 83.3 12.1 82.7C11.7 82.2 11.3 81.7 10.9 81.2C10.5 80.7 10.1 80.1 9.8 79.6C9.4 79.0 9.1 78.5 8.8 77.9C8.4 77.4 8.0 76.8 7.6 76.3C7.3 75.8 6.8 75.2 6.5 74.7C6.2 74.1 6.0 73.5 5.7 72.9C5.5 72.3 5.1 71.7 4.9 71.1C4.6 70.5 4.4 69.9 4.2 69.3C3.9 68.7 3.8 68.0 3.6 67.4C3.5 66.7 3.5 66.1 3.4 65.4C3.3 64.8 3.3 64.1 3.3 63.4C3.2 62.8 3.0 62.2 2.9 61.6C2.8 60.9 2.9 60.3 2.9 59.6C2.9 59.0 2.8 58.3 2.8 57.7C2.7 57.1 2.7 56.4 2.8 55.8C2.8 55.2 2.9 54.5 2.9 53.9C2.9 53.3 2.9 52.7 2.9 52.1C2.9 51.4 2.9 50.8 2.9 50.2C2.9 49.6 2.9 49.0 2.9 48.3C2.9 47.7 2.9 47.1 3.0 46.5C3.1 45.9 3.2 45.2 3.3 44.6C3.4 44.0 3.4 43.4 3.5 42.8C3.6 42.2 3.7 41.6 3.8 40.9C3.9 40.3 4.0 39.7 4.2 39.1C4.3 38.5 4.6 38.0 4.8 37.4C4.9 36.8 5.1 36.2 5.3 35.6C5.4 35.0 5.5 34.3 5.6 33.7C5.8 33.1 6.1 32.6 6.4 32.0C6.6 31.5 6.9 30.9 7.2 30.3C7.4 29.8 7.6 29.2 7.9 28.6C8.1 28.0 8.4 27.5 8.7 26.9C8.9 26.3 9.2 25.8 9.5 25.2C9.8 24.7 10.0 24.1 10.3 23.5C10.6 22.9 10.9 22.4 11.3 21.9C11.6 21.4 12.0 20.9 12.4 20.4C12.8 19.9 13.2 19.4 13.6 18.9C14.1 18.5 14.6 18.1 15.0 17.6C15.4 17.2 15.9 16.7 16.3 16.3C16.7 15.8 17.2 15.4 17.6 14.9C18.1 14.5 18.5 14.0 19.0 13.6C19.5 13.2 20.0 12.9 20.5 12.5C21.0 12.1 21.5 11.7 21.9 11.3C22.4 10.8 22.9 10.4 23.4 10.0C23.9 9.6 24.4 9.3 24.9 8.9C25.4 8.5 25.9 8.0 26.4 7.6C26.9 7.3 27.5 7.0 28.1 6.8C28.7 6.5 29.3 6.3 29.9 6.0C30.4 5.8 31.0 5.5 31.6 5.3C32.2 5.0 32.8 4.8 33.4 4.5C34.0 4.3 34.5 4.0 35.1 3.8C35.7 3.5 36.4 3.4 37.0 3.2C37.6 2.9 38.1 2.6 38.8 2.4C39.4 2.2 40.0 2.1 40.6 1.9C41.3 1.7 41.9 1.5 42.5 1.3C43.1 1.1 43.7 0.9 44.4 0.8C45.0 0.6 45.7 0.4 46.3 0.4C47.0 0.3 47.6 0.4 48.3 0.4C48.9 0.4 49.6 0.4 50.2 0.4C50.9 0.4 51.5 0.4 52.2 0.4C52.8 0.4 53.5 0.4 54.2 0.4C54.8 0.4 55.5 0.3 56.1 0.4C56.8 0.4 57.4 0.6 58.1 0.8C58.7 0.9 59.3 1.1 60.0 1.3C60.6 1.5 61.2 1.8 61.8 2.0C62.4 2.3 63.0 2.5 63.6 2.7C64.2 2.9 64.9 3.0 65.5 3.3C66.1 3.5 66.7 3.8 67.3 4.0C67.9 4.2 68.5 4.4 69.1 4.6C69.7 4.8 70.3 5.1 70.9 5.3C71.6 5.5 72.2 5.6 72.9 5.8C73.5 5.9 74.1 6.2 74.8 6.4C75.4 6.6 76.1 6.8 76.7 7.0C77.3 7.3 77.9 7.6 78.5 7.9C79.1 8.2 79.8 8.4 80.4 8.7C81.0 9.0 81.5 9.5 82.0 9.9C82.5 10.3 83.0 10.8 83.5 11.2C84.0 11.7 84.5 12.1 85.0 12.6C85.5 13.1 85.8 13.6 86.3 14.1C86.7 14.6 87.3 15.0 87.7 15.5C88.1 16.1 88.4 16.7 88.8 17.3C89.2 17.8 89.6 18.3 90.0 18.8C90.4 19.4 90.8 19.9 91.1 20.5C91.5 21.1 91.8 21.6 92.0 22.3C92.3 22.9 92.4 23.6 92.7 24.1C93.0 24.7 93.5 25.2 93.7 25.8C94.0 26.4 94.3 27.0 94.5 27.6C94.8 28.2 95.1 28.8 95.2 29.4C95.4 30.1 95.5 30.8 95.6 31.4C95.8 32.0 96.0 32.6 96.2 33.2C96.4 33.8 96.6 34.5 96.7 35.1C96.9 35.7 97.0 36.3 97.1 37.0C97.2 37.6 97.3 38.2 97.4 38.9C97.4 39.5 97.6 40.1 97.6 40.8C97.7 41.4 97.6 42.1 97.6 42.7C97.6 43.3 97.6 44.0 97.6 44.6C97.6 45.2 97.7 45.8 97.6 46.5C97.6 47.1 97.2 47.7 97.2 48.3C97.2 49.0 97.6 49.6 97.6 50.2Z'/%3E%3C/svg%3E"); }
.crew-member--toby  { --crew-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M99.6 50.8C99.6 51.4 99.6 52.0 99.6 52.7C99.6 53.3 99.7 54.0 99.7 54.6C99.7 55.3 99.6 55.9 99.6 56.6C99.6 57.2 99.6 57.9 99.6 58.5C99.6 59.2 99.8 59.9 99.7 60.5C99.7 61.2 99.6 61.9 99.4 62.5C99.3 63.1 99.0 63.7 98.7 64.3C98.5 65.0 98.2 65.6 98.0 66.2C97.7 66.8 97.6 67.4 97.4 68.0C97.1 68.6 96.9 69.3 96.6 69.8C96.3 70.4 95.9 71.0 95.6 71.5C95.3 72.1 95.1 72.7 94.7 73.3C94.4 73.8 94.0 74.3 93.6 74.9C93.3 75.4 92.9 75.9 92.5 76.5C92.2 77.0 91.9 77.6 91.5 78.1C91.1 78.7 90.7 79.2 90.4 79.7C90.0 80.2 89.6 80.7 89.2 81.3C88.9 81.8 88.5 82.3 88.1 82.8C87.7 83.4 87.3 83.9 86.9 84.3C86.4 84.8 86.0 85.3 85.5 85.7C85.0 86.1 84.4 86.5 83.9 86.9C83.4 87.3 83.0 87.7 82.4 88.1C81.9 88.5 81.4 88.9 80.9 89.2C80.3 89.6 79.8 90.0 79.2 90.3C78.7 90.5 78.0 90.6 77.3 90.9C76.7 91.1 76.2 91.4 75.6 91.7C75.0 92.0 74.5 92.2 73.9 92.5C73.4 92.8 72.8 93.1 72.2 93.4C71.7 93.6 71.1 93.8 70.5 94.0C69.9 94.2 69.3 94.3 68.7 94.5C68.1 94.7 67.5 94.9 66.9 95.1C66.3 95.3 65.8 95.7 65.2 95.9C64.6 96.0 63.9 96.0 63.3 96.1C62.7 96.2 62.1 96.3 61.5 96.4C60.9 96.4 60.3 96.5 59.7 96.6C59.1 96.7 58.4 96.8 57.8 96.9C57.2 97.0 56.6 97.1 56.0 97.1C55.4 97.2 54.8 97.2 54.2 97.2C53.6 97.3 53.0 97.5 52.4 97.6C51.8 97.7 51.2 97.6 50.5 97.6C49.9 97.6 49.3 97.6 48.7 97.6C48.1 97.6 47.5 97.6 46.9 97.6C46.2 97.6 45.6 97.7 45.0 97.6C44.4 97.6 43.8 97.4 43.2 97.2C42.6 97.1 42.0 97.0 41.4 96.9C40.8 96.7 40.2 96.6 39.6 96.5C39.0 96.4 38.3 96.3 37.7 96.1C37.1 96.0 36.6 95.8 36.0 95.6C35.4 95.5 34.7 95.4 34.1 95.2C33.5 95.1 32.9 95.0 32.3 94.9C31.6 94.7 31.0 94.6 30.4 94.5C29.8 94.3 29.1 94.2 28.5 94.0C27.9 93.8 27.4 93.5 26.8 93.2C26.1 93.0 25.5 92.9 24.9 92.6C24.3 92.4 23.7 92.0 23.2 91.7C22.6 91.4 22.0 91.2 21.4 90.9C20.9 90.5 20.3 90.1 19.8 89.7C19.3 89.3 18.9 88.8 18.4 88.4C17.9 88.0 17.4 87.5 16.9 87.1C16.5 86.7 16.0 86.2 15.5 85.8C15.0 85.3 14.5 84.9 14.1 84.5C13.6 84.0 13.1 83.6 12.7 83.1C12.2 82.6 11.7 82.2 11.3 81.7C10.8 81.2 10.4 80.7 10.0 80.2C9.5 79.7 9.2 79.2 8.8 78.7C8.3 78.2 7.9 77.7 7.5 77.1C7.1 76.6 6.8 76.0 6.4 75.5C6.0 74.9 5.7 74.3 5.4 73.8C5.0 73.2 4.7 72.6 4.4 72.0C4.1 71.4 3.8 70.9 3.5 70.2C3.2 69.6 3.0 69.0 2.8 68.4C2.5 67.8 2.2 67.2 2.0 66.5C1.8 65.9 1.6 65.2 1.5 64.6C1.4 63.9 1.4 63.2 1.3 62.6C1.1 61.9 0.8 61.3 0.8 60.7C0.7 60.0 0.8 59.3 0.8 58.6C0.7 58.0 0.5 57.3 0.4 56.7C0.3 56.0 0.4 55.4 0.4 54.7C0.4 54.0 0.4 53.4 0.4 52.7C0.4 52.1 0.4 51.4 0.4 50.8C0.4 50.1 0.4 49.4 0.4 48.8C0.4 48.1 0.4 47.5 0.5 46.8C0.6 46.2 0.7 45.5 0.8 44.9C0.8 44.2 0.8 43.5 0.9 42.9C1.0 42.2 1.3 41.6 1.5 41.0C1.7 40.4 1.9 39.7 2.1 39.1C2.3 38.5 2.5 37.9 2.8 37.3C3.0 36.7 3.3 36.1 3.5 35.5C3.8 34.9 4.1 34.3 4.4 33.7C4.7 33.2 5.0 32.6 5.3 32.0C5.5 31.4 5.8 30.8 6.1 30.3C6.4 29.7 6.8 29.2 7.1 28.6C7.5 28.1 7.7 27.5 8.0 26.9C8.3 26.4 8.7 25.9 9.1 25.4C9.5 24.9 10.0 24.5 10.5 24.0C10.9 23.5 11.5 23.1 11.8 22.6C12.2 22.1 12.4 21.5 12.8 21.0C13.2 20.5 13.8 20.2 14.3 19.8C14.7 19.4 15.3 19.0 15.8 18.6C16.2 18.2 16.6 17.7 17.1 17.3C17.6 17.0 18.2 16.6 18.6 16.2C19.1 15.9 19.5 15.4 20.0 15.0C20.5 14.6 21.0 14.3 21.5 13.9C22.0 13.6 22.5 13.2 23.0 12.9C23.5 12.5 24.0 12.2 24.5 11.8C25.0 11.5 25.5 11.1 26.0 10.7C26.5 10.4 27.0 10.0 27.5 9.6C28.0 9.3 28.6 9.1 29.1 8.7C29.7 8.4 30.2 8.1 30.7 7.8C31.2 7.4 31.8 7.0 32.3 6.8C32.9 6.5 33.5 6.3 34.0 6.0C34.6 5.8 35.2 5.5 35.8 5.3C36.3 5.0 37.0 4.9 37.6 4.8C38.2 4.6 38.8 4.7 39.4 4.5C40.0 4.4 40.6 4.0 41.2 3.9C41.8 3.8 42.5 3.7 43.1 3.7C43.7 3.6 44.4 3.8 45.0 3.8C45.6 3.7 46.2 3.4 46.8 3.3C47.4 3.2 48.0 3.1 48.7 3.1C49.3 3.2 49.9 3.3 50.5 3.6C51.2 3.9 51.7 4.7 52.3 4.9C52.9 5.1 53.5 4.9 54.2 4.8C54.8 4.6 55.5 4.0 56.1 3.9C56.7 3.8 57.3 4.0 57.9 4.0C58.6 4.0 59.2 4.0 59.8 4.0C60.5 4.1 61.0 4.3 61.7 4.4C62.3 4.4 63.0 4.3 63.6 4.4C64.3 4.4 64.8 4.7 65.5 4.8C66.1 4.8 66.9 4.6 67.5 4.8C68.1 5.0 68.5 5.8 69.1 6.0C69.7 6.3 70.5 6.0 71.1 6.3C71.7 6.5 72.1 7.1 72.7 7.3C73.3 7.5 74.1 7.3 74.8 7.5C75.4 7.7 76.0 8.0 76.6 8.3C77.2 8.5 77.8 8.8 78.4 9.1C78.9 9.5 79.4 9.9 80.0 10.3C80.5 10.6 81.0 11.0 81.6 11.4C82.1 11.8 82.7 12.1 83.2 12.5C83.7 12.9 84.1 13.4 84.6 13.9C85.1 14.3 85.8 14.6 86.2 15.0C86.7 15.5 87.0 16.2 87.4 16.6C87.9 17.1 88.4 17.5 88.9 18.0C89.3 18.5 89.7 19.0 90.1 19.5C90.5 20.1 90.9 20.6 91.2 21.2C91.6 21.7 92.1 22.2 92.5 22.8C92.8 23.3 93.2 23.9 93.5 24.4C93.8 25.0 94.1 25.6 94.4 26.2C94.6 26.8 95.0 27.4 95.2 28.0C95.5 28.6 95.7 29.2 96.0 29.8C96.2 30.4 96.5 31.0 96.7 31.6C96.9 32.2 97.1 32.9 97.2 33.5C97.4 34.2 97.5 34.8 97.6 35.5C97.7 36.1 97.8 36.7 98.0 37.4C98.1 38.0 98.3 38.6 98.4 39.3C98.5 39.9 98.5 40.6 98.6 41.2C98.7 41.8 98.7 42.5 98.7 43.1C98.8 43.8 98.8 44.4 98.9 45.0C98.9 45.7 99.2 46.3 99.2 46.9C99.3 47.6 99.3 48.2 99.3 48.8C99.4 49.5 99.6 50.1 99.6 50.8Z'/%3E%3C/svg%3E"); }

.crew-member__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s var(--ease-out), scale 0.35s var(--ease-out);
}
/* Add filter: grayscale(1) here to show every photo in black and white. */
.crew-member__photo { object-position: 50% 30%; }
/* The still drawing is the face you see; the photo under it shows only while that
   face is open in the bio cloud (.is-active, below). Each drawing PNG is cropped with
   the head centred, so no zoom or offset is needed here. */
.crew-member__drawing {
  transform: translate(var(--face-x, 0%), var(--face-y, 0%)) scale(var(--face-scale, 1));
  /* A drawing moved off-centre (below) leaves a strip of the outline uncovered. This
     fills it in the face's colour and fades with the drawing, so the photo can't show
     through that strip as a square edge while the two cross-fade (closing a bio). */
  box-shadow: 0 0 0 40px var(--face-bg, var(--white));
}
/* Where each drawing sits in its outline: --face-x/--face-y move it (in % of the face's
   width), --face-scale zooms it. Set by eye with ?tune-faces=1 (tools/face-tuner.js),
   whose Lock in rewrites the lines between these markers. */
/* face-placement:start */
.crew-member--dylan { --face-x: -1.9%; --face-y: -1.03%; --face-scale: 0.875; }
.crew-member--john { --face-x: -0.8%; --face-y: 2.1%; --face-scale: 0.96; }
.crew-member--mike { --face-x: 3.8%; --face-y: -3.6%; --face-scale: 0.91; }
.crew-member--toby { --face-x: 0%; --face-y: -2.4%; --face-scale: 0.86; }
/* face-placement:end */
/* Behind each drawing: its own flat background colour, so a face scaled down or moved
   off-centre above never shows a gap at its edge. The photo
   stays hidden until the face is open, so it can't peek through either. */
.crew-member__pic { background: var(--face-bg, var(--white)); }
.crew-member--dylan { --face-bg: #2af98c; }
.crew-member--john  { --face-bg: #66c4ff; }
.crew-member--mike  { --face-bg: #fff76f; }
.crew-member--toby  { --face-bg: #ff56a6; }
.crew-member:not(.is-active) .crew-member__photo { opacity: 0; }
/* The "click" drawing sits over the still one, in the same framing and placement, and
   swaps in instantly while the mouse is over a face (or it has keyboard focus), but not
   on the open face, which shows the photo. Touch screens don't get it (no hover). */
.crew-member .crew-member__pic img.crew-member__drawing--click { opacity: 1; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .crew-member:not(.is-active, .is-hover-spent):hover .crew-member__pic img.crew-member__drawing--click { visibility: visible; }
}
.crew-member:not(.is-active, .is-hover-spent):focus-visible .crew-member__pic img.crew-member__drawing--click { visibility: visible; }
/* Hover is mouse/trackpad only: iOS Safari spends the first tap on a :hover that
   changes the picture and only clicks on the second. The outline stays put and the
   drawing inside it eases up a little (--head-grow, no bounce), and back down a bit
   slower when the mouse leaves. */
.crew { --head-grow: 1.05; }
.crew-member__pic .crew-member__drawing {
  transition: opacity 0.35s var(--ease-out), scale 0.6s var(--ease-out);
}
.crew-member:not(.is-active, .is-hover-spent):is(:hover, :focus-visible) .crew-member__drawing {
  transition: opacity 0.35s var(--ease-out), scale 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .crew-member:not(.is-active, .is-hover-spent):hover .crew-member__drawing { scale: var(--head-grow); }
  .crew-member:hover .crew-member__name { color: var(--teal-deep); }
}
.crew-member:not(.is-active, .is-hover-spent):focus-visible .crew-member__drawing { scale: var(--head-grow); }
/* Full name under each picture, always visible (touch screens can't hover).
   Each name shares the same band height, so the lettering keeps one scale. */
.crew-member__name {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--name-colour, var(--azure));
  transition: color 0.2s ease, opacity 0.25s ease;
}
.crew-member__name-art { display: block; height: 1.68em; width: auto; max-width: 100%; margin-inline: auto; fill: currentColor; }
.crew-member--john, .crew-member--toby { --name-colour: var(--sky); }
/* Pink dots between the names (and at each end of a row), hand-placed a little
   unevenly like in the design. */
.crew-member__name::before,
.crew-member__name::after {
  position: absolute;
  top: calc(50% + var(--dot-y, 0em));
  width: 0.27em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink-bright);
  translate: -50% -50%;
  pointer-events: none;
}
.crew-member__name::before { content: ''; left: calc(var(--crew-gap) / -2); }
.crew__grid li:nth-child(4n) .crew-member__name::after { content: ''; left: calc(100% + var(--crew-gap) / 2); --dot-y: 0em; }
.crew__grid li:nth-child(1) .crew-member__name { --dot-y: 0.26em; }
.crew__grid li:nth-child(2) .crew-member__name { --dot-y: 0.03em; }
.crew__grid li:nth-child(3) .crew-member__name { --dot-y: 0.12em; }
.crew__grid li:nth-child(4) .crew-member__name { --dot-y: 0.2em; }
/* Dots are hidden for now; delete this rule to bring them back. */
.crew-member__name::before,
.crew-member__name::after { display: none; }
.crew-member:focus-visible .crew-member__name { color: var(--teal-deep); }
/* No focus box on the faces: the growing drawing and teal name already show focus. */
.crew-member:focus-visible { outline: none; }

/* ==========================================================================
   Crew bios: clicking a face opens its bio in a cloud under the faces.
   The other faces step aside, each drifting away from the picked one (main.js sets
   --ax/--ay, the way out, and --step, nearest first). The picked face glides into its
   spot in the cloud (--to-x/--to-y, and --to-k to shrink big faces), keeping its
   drawing on, and the cloud rises up behind it. main.js places the cloud (--cloud-*)
   centred over the top of the row, the same for everyone, animates .crew-panel's
   height (so everything below glides down) and fills .crew-panel__content from the
   face's <template class="crew-bio">. The slot is an empty spacer the size of the
   face (--slot-w/--slot-h), so the text starts beside it.
   ========================================================================== */
.crew__grid li {
  position: relative;
  z-index: 2; /* over the cloud */
  transform-origin: 0 0;
  /* heading home as the picked face (--set-off, below) is settling into its spot, in a
     random order (--step) and each at its own pace (--pace), both from main.js */
  --home: calc(var(--set-off) + 0.22s + var(--step, 0) * 0.03s);
  --back: calc(0.4s * var(--pace, 1));
  transition:
    opacity 0.25s ease var(--home),
    translate var(--back) var(--ease-out) var(--home),
    rotate var(--back) var(--ease-out) var(--home),
    scale var(--back) var(--ease-out) var(--home),
    visibility 0s linear 0s;
}
/* the face that was in the cloud heads home first, easing off as the cloud starts to fold
   and settling in gently, rather than zipping off (main.js tags it as the cloud closes,
   until the next one opens) */
.crew__grid li.is-homing {
  transition:
    translate var(--return) cubic-bezier(0.3, 0, 0.2, 1) var(--set-off),
    scale var(--return) cubic-bezier(0.3, 0, 0.2, 1) var(--set-off),
    visibility 0s linear 0s;
}
.crew__grid.is-picking li:not(.is-picked) {
  opacity: 0;
  translate: calc(var(--ax, 1) * 80px) calc(var(--ay, 0) * 80px + 16px);
  rotate: calc(var(--ax, 1) * 9deg);
  scale: 0.8;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease calc(var(--step, 0) * 0.06s),
    translate 0.5s var(--ease-out) calc(var(--step, 0) * 0.06s),
    rotate 0.5s var(--ease-out) calc(var(--step, 0) * 0.06s),
    scale 0.5s var(--ease-out) calc(var(--step, 0) * 0.06s),
    visibility 0s linear calc(0.5s + var(--step, 0) * 0.06s);
}
/* only its picture takes clicks (to close): its name's box is wider than the lettering
   and would otherwise sit over the LinkedIn icon beside it */
.crew__grid.is-picking li.is-picked { pointer-events: none; }
.crew__grid.is-picking li.is-picked .crew-member__pic { pointer-events: auto; }
.crew__grid.is-picking li.is-picked {
  translate: var(--to-x, 0) var(--to-y, 0);
  scale: var(--to-k, 1);
  transition:
    translate 0.7s cubic-bezier(0.34, 1.2, 0.5, 1),
    scale 0.7s cubic-bezier(0.34, 1.2, 0.5, 1);
}
/* Desktop: the other faces shrink away on the spot, nearest first, starting the moment
   the face is clicked and easing out as they go (the dots in the cloud switch person).
   The faces scale from their top left (for the picked one's glide), so each also moves
   half its size as it shrinks: with the same timing on both, its middle stays put the
   whole way, out and back. */
@media (min-width: 761px) {
  .crew__grid.is-picking li:not(.is-picked) {
    translate: 50% 50%;
    rotate: 0deg;
    scale: 0;
    transition:
      opacity 0.15s ease calc(0.1s + var(--step, 0) * 0.05s),
      translate 0.3s var(--ease-out) calc(var(--step, 0) * 0.05s),
      scale 0.3s var(--ease-out) calc(var(--step, 0) * 0.05s),
      visibility 0s linear calc(0.3s + var(--step, 0) * 0.05s);
  }
}
/* While a bio is open every face bobs on the clouds' rhythm: the picked one in step with
   its cloud (the same offset, --bio-bob, and main.js lines their clocks up), so face, name,
   bio and LinkedIn icon move as one; the others each a few frames apart, like the service
   clouds. --bio-bob is the bio cloud's offset in frames (11f ÷ 24), so it doesn't bob in
   step with the Contact cloud below it (0f). */
/* --hold, --fold-wait, --fold: see .crew-panel below; the picked face's glide home: when it
   sets off (--set-off), and how long it takes (--return) */
.crew {
  --bio-bob: calc(-11s / 24);
  --hold: 0.0833s;
  --fold-wait: 0.1s;
  --fold: calc(3 * var(--hold));
  --set-off: calc((var(--fold-wait) + var(--fold)) / 2); /* halfway through the cloud folding away */
  --return: 0.85s;
}
.crew__grid.is-picking .crew-member { animation: cloud-bob 1.75s step-end infinite; }
.crew__grid.is-picking li:nth-child(1) .crew-member { animation-delay: calc(-7s / 24); }
.crew__grid.is-picking li:nth-child(2) .crew-member { animation-delay: calc(-23s / 24); }
.crew__grid.is-picking li:nth-child(3) .crew-member { animation-delay: calc(-14s / 24); }
.crew__grid.is-picking li:nth-child(4) .crew-member { animation-delay: calc(-3s / 24); }
.crew__grid.is-picking li.is-picked .crew-member { animation-delay: var(--bio-bob); }
@media (prefers-reduced-motion: reduce) {
  .crew__grid.is-picking .crew-member { animation: none; }
}
/* the picked face flips to its photo (back to the drawing when it closes or another
   face is picked), and its name keeps the hover colour */
.crew-member.is-active .crew-member__drawing { opacity: 0; }
.crew-member.is-active .crew-member__name { color: var(--teal-deep); }

/* --cloud-gap: on desktop the cloud reaches on down until it's this far above the Contact
   cloud; only past that does the page below move down for it (main.js). Closing, the page
   below waits until the cloud has folded away before it closes back up, so the Contact
   cloud never rises into it.
   --hold: how long the cloud holds each drawing as it pops up and folds away, like drawn
   animation: on twos (2 frames at 24fps), a snappy beat (0.125s would be on threes, the
   clouds' bob's), set on .crew so the faces can wait out the fold too. The text comes in on
   the same beat (main.js).
   --fold-wait: closing, how long the cloud waits for its text and dots to go before it
   folds; --fold: the fold itself, three drawings. */
.crew-panel {
  --cloud-gap: 40px;
  height: 0;
  transition: height 0.6s var(--ease-soft) calc(var(--fold-wait) + 2 * var(--hold));
}
.crew-panel.is-open { transition: height 0.6s var(--ease-soft); }
.crew-panel__inner { display: flow-root; padding-bottom: 56px; } /* flow-root: the cloud's pull-up margin stays inside */
/* Mobile_cloud in site-full.psd: standing up on phones (bio-cloud-tall.png), turned on its side here (bio-cloud-wide.png) */
.crew-panel__cloud {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--slot-w, 180px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
  --cloud-drop: 40px; /* how far the cloud's top padding reaches below the row's top, clear of the title */
  width: var(--cloud-w, auto);
  margin: var(--cloud-y, 0) 0 0 var(--cloud-x, 0);
  padding: clamp(60px, 8%, 80px) clamp(80px, 11%, 112px) clamp(112px, 12%, 128px) clamp(72px, 10%, 104px); /* the bottom holds the dots */
  visibility: hidden; /* once folded away, so its dots can't be clicked or tabbed to */
  transition: visibility 0s linear calc(var(--fold-wait) + var(--fold));
  animation: cloud-bob 1.75s step-end infinite;
  animation-delay: var(--bio-bob);
}
.crew-panel.is-open .crew-panel__cloud { visibility: visible; transition: none; }
/* The cloud itself pops up from its middle, a drawing per --hold (each value in linear()
   is one drawing: how far along it is, and the stretch of the pop it's held for), two
   holds after the face sets off, once it's well on its way: from a speck, one in-between,
   then straight into a small overshoot that it eases back down from. Closing, it waits
   while the LinkedIn icon pops away beside the name (main.js), then folds back into its
   middle as the face heads home. The leading "0 0% 0.1%" keeps it as it was through the
   delay (a transition shows its 0% value while it waits). */
.crew-panel__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  filter: var(--cloud-shadow);
  pointer-events: none;
  scale: 0;
  /* closing: 70%, 30%, gone */
  transition: scale var(--fold) linear(0 0% 0.1%, 0.3 0.1% 33.33%, 0.7 33.33% 66.67%, 1 66.67% 100%) var(--fold-wait);
}
.crew-panel.is-open .crew-panel__bg {
  scale: 1;
  /* opening: 10%, 55%, 104%, then easing back down 102%, 100.7%, 100% */
  transition: scale calc(6 * var(--hold)) linear(0 0% 0.1%, 0.1 0.1% 16.67%, 0.55 16.67% 33.33%, 1.04 33.33% 50%, 1.02 50% 66.67%, 1.007 66.67% 83.33%, 1 83.33% 100%) calc(2 * var(--hold));
}
/* The text and dots don't grow with the cloud: main.js brings them in once it has
   popped up. They go the moment it starts to fold away. */
.crew-panel .crew-panel__content > :not(.bio__link),
.crew-panel .crew-panel__pager { visibility: hidden; transition: visibility 0s linear var(--fold-wait); }
.crew-panel.is-open .crew-panel__content > :not(.bio__link),
.crew-panel.is-open .crew-panel__pager { visibility: visible; transition: none; }
.crew-panel__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/crew/bio-cloud-wide.png?v=2026-10-18') center / 100% 100% no-repeat;
}
.crew-panel__slot { width: var(--slot-w, 180px); height: var(--slot-h, auto); }

/* the bio, top-aligned beside the face so the role sits at the same spot for everyone */
.crew-panel__content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; }
.bio__role {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sky);
}
/* the role takes whichever blue the name isn't */
.crew-panel__content:is(.crew-member--john, .crew-member--toby) .bio__role { color: var(--azure); }
.bio__text { max-width: 560px; margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: #4a443e; }
.bio__text p + p { margin-top: 0.6em; }

/* credits run on in one quiet, light grey line, so the bio above does the talking:
   Title (Role) · Title · … */
.bio__credits {
  max-width: 560px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.6;
  color: #a19990;
}
.bio__credits::before {
  content: 'Selected credits';
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8b1a9;
}
.bio__credits li { display: inline; }
/* the dot hangs off the end of a credit, so a line never starts with one */
.bio__credits li:not(:last-child)::after { content: '\00b7'; margin-left: 0.4em; }
.bio__film { white-space: nowrap; }
.bio__position { font-style: italic; white-space: nowrap; }
.bio__position::before { content: '('; }
.bio__position::after { content: ')'; }

/* LinkedIn's square, small and paper-grey so it stays quiet, just right of the name
   (main.js works out --link-x/--link-y from where the name lands); its own blue on hover.
   It belongs to the name: it pops up from nothing once the name has landed, both when the
   cloud opens and after each switch's slide (main.js shortens --link-delay for those), and
   main.js shrinks it away again before the name moves off. On hover it fades to
   LinkedIn's blue. */
.bio__link {
  position: absolute;
  left: var(--link-x, 0);
  top: var(--link-y, 0);
  translate: 0 -50%;
  display: flex;
  margin-left: 2px;
  padding: 4px;
  transition: transform 0.25s var(--ease-out);
}
.bio__link::before {
  content: '';
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23cdc6be'/%3E%3Cpath fill='%23fff' d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bio__link:hover { transform: translateY(-2px); }
.crew-panel.is-open .bio__link { animation: bio-link-pop 0.3s cubic-bezier(0.34, 1.7, 0.64, 1) var(--link-delay, 0.35s) both; }
@keyframes bio-link-pop { from { scale: 0; } }
.bio__link::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%230A66C2'/%3E%3Cpath fill='%23fff' d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bio__link:hover::after { opacity: 1; }

/* phones and narrow tablets: the face on top in the middle, the text under it, in the cloud standing up */
@media (max-width: 760px) {
  .crew-panel__cloud {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 14px;
    align-content: start; /* main.js fixes its height; a short bio's spare room goes at the bottom */
    padding: 60px 46px 112px; /* the bottom holds the dots */
    touch-action: pan-y; /* sideways swipes step through the crew (main.js) */
    --cloud-drop: 44px;
  }
  .crew-panel__bg::before { background-image: url('../images/crew/bio-cloud-tall.png?v=2026-10-18'); }
  /* everything centred, so the lines stay clear of the cloud as it narrows top and bottom */
  .crew-panel__content { align-self: stretch; align-items: center; text-align: center; }
  .crew-panel__content :is(.bio__role, .bio__text, .bio__credits) { align-self: center; text-align: center; }
  .crew-panel__content .bio__text { font-size: 12.5px; line-height: 1.55; }
  .crew-panel__content .bio__credits { font-size: 10.5px; }
  .crew-panel__content .bio__film, .crew-panel__content .bio__position { white-space: normal; }
}
/* Along the bottom of the cloud, one dot per person in the colour of their hover drawing,
   each its own slightly lumpy splotch (--blob). The one on show is big; the rest are small
   and lighten under the pointer. A click switches to that person, or, on the one on show,
   folds the cloud away (main.js). The cloud's bottom padding (above, and in the
   phone layout) leaves room for them. */
.crew-panel__pager {
  position: absolute;
  left: 50%;
  bottom: 34px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.crew-panel__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px; /* a comfortable tap target round each dot, so the gaps stay even as they swell */
  -webkit-tap-highlight-color: transparent;
}
.crew-panel__dot span {
  width: 22px;
  height: 22px;
  background: var(--dot);
  -webkit-mask: var(--blob) center / 100% 100% no-repeat;
          mask: var(--blob) center / 100% 100% no-repeat;
  scale: 0.5;
  transition: scale 0.25s cubic-bezier(0.34, 1.7, 0.64, 1), background-color 0.15s;
}
.crew-panel__dot--dylan { --dot: #2af98c; --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M92.3 50.2C92.7 53.4 94.4 56.7 94.5 60.0C94.6 63.3 93.7 66.5 92.9 70.0C92.2 73.4 91.6 77.3 90.1 80.7C88.6 84.1 86.5 87.7 83.8 90.2C81.0 92.6 77.1 94.0 73.6 95.3C70.2 96.6 66.4 97.6 62.8 98.0C59.2 98.4 55.5 97.9 51.9 97.7C48.3 97.6 44.7 97.9 41.2 97.1C37.8 96.4 33.9 95.5 31.1 93.4C28.4 91.3 26.5 87.5 24.5 84.6C22.5 81.8 21.3 78.8 19.2 76.3C17.1 73.8 13.8 72.3 11.7 69.6C9.6 67.0 7.8 63.8 6.8 60.5C5.8 57.3 5.5 53.7 5.5 50.2C5.5 46.8 6.2 43.4 6.9 40.0C7.6 36.6 8.3 33.1 9.6 29.9C10.9 26.6 12.2 23.0 14.5 20.4C16.8 17.8 20.4 16.3 23.3 14.4C26.3 12.6 29.2 10.9 32.2 9.3C35.2 7.7 38.3 6.0 41.6 4.8C44.8 3.6 48.4 2.2 51.9 2.0C55.4 1.8 59.0 3.0 62.5 3.8C66.1 4.5 69.6 5.2 73.0 6.4C76.5 7.6 80.5 8.6 83.4 10.7C86.4 12.9 89.1 16.1 90.7 19.3C92.3 22.6 92.9 26.8 93.1 30.4C93.4 34.0 92.4 37.7 92.3 41.0C92.1 44.3 91.9 47.1 92.3 50.2Z'/%3E%3C/svg%3E"); }
.crew-panel__dot--john  { --dot: #66c4ff; --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M97.3 49.3C96.7 53.0 95.9 56.6 94.7 59.9C93.4 63.3 91.7 66.4 89.8 69.4C88.0 72.3 85.9 75.0 83.7 77.6C81.5 80.2 79.3 82.9 76.6 84.9C74.0 87.0 70.9 88.7 67.8 90.1C64.8 91.5 61.5 92.8 58.3 93.4C55.0 93.9 51.5 93.6 48.2 93.2C45.0 92.8 42.0 91.6 38.7 91.0C35.4 90.5 32.2 90.5 28.7 89.9C25.1 89.4 20.5 89.7 17.4 88.0C14.4 86.3 12.0 82.7 10.3 79.6C8.6 76.4 8.1 72.5 7.2 69.1C6.3 65.7 6.0 62.5 5.2 59.2C4.3 55.9 2.5 52.7 2.0 49.3C1.5 46.0 1.9 42.4 2.2 38.8C2.5 35.3 2.5 31.3 3.6 27.9C4.7 24.4 6.7 21.0 8.9 18.0C11.1 15.0 13.7 11.8 16.8 9.9C19.9 8.0 24.0 7.1 27.7 6.6C31.3 6.2 35.2 7.1 38.6 7.3C42.1 7.5 45.1 7.7 48.2 7.8C51.4 7.9 54.6 7.5 57.7 8.0C60.7 8.6 63.8 9.8 66.6 11.2C69.5 12.5 71.9 14.4 74.8 16.0C77.8 17.5 81.1 18.7 84.3 20.6C87.4 22.5 91.7 24.4 94.0 27.3C96.3 30.2 97.4 34.3 98.0 38.0C98.6 41.7 97.9 45.7 97.3 49.3Z'/%3E%3C/svg%3E"); }
.crew-panel__dot--mike  { --dot: #fbf46f; --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M98.0 50.6C97.9 54.2 96.3 57.7 95.4 61.2C94.5 64.7 93.6 68.1 92.5 71.6C91.3 75.1 90.6 79.2 88.5 82.1C86.3 85.0 83.1 87.8 79.6 89.0C76.1 90.2 71.2 89.1 67.6 89.3C64.0 89.5 61.1 89.6 58.0 90.2C54.9 90.9 52.2 92.5 48.9 93.4C45.7 94.4 42.1 95.9 38.6 96.0C35.1 96.1 31.6 94.9 28.1 93.9C24.6 92.8 20.9 91.7 17.7 89.8C14.4 88.0 10.8 85.8 8.4 82.9C6.1 80.0 4.6 76.0 3.6 72.4C2.6 68.8 2.8 64.8 2.5 61.2C2.2 57.6 2.0 54.1 2.0 50.6C2.0 47.1 1.7 43.4 2.4 40.0C3.2 36.6 4.4 33.0 6.3 30.1C8.2 27.1 11.2 24.8 13.7 22.5C16.2 20.1 18.9 18.4 21.3 15.9C23.7 13.4 25.4 9.5 28.2 7.6C31.1 5.6 34.9 4.5 38.3 4.0C41.8 3.6 45.5 4.2 48.9 4.9C52.3 5.5 55.3 7.3 58.7 7.9C62.1 8.5 65.7 7.9 69.1 8.7C72.5 9.5 76.4 10.6 79.2 12.7C82.0 14.8 83.6 18.4 85.8 21.2C88.1 24.0 90.9 26.4 92.7 29.5C94.4 32.6 95.4 36.3 96.3 39.8C97.2 43.3 98.1 47.0 98.0 50.6Z'/%3E%3C/svg%3E"); }
.crew-panel__dot--toby  { --dot: #ff57a7; --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M96.7 50.9C96.8 54.5 97.6 58.1 97.4 61.6C97.1 65.2 96.9 69.4 95.2 72.4C93.4 75.5 89.9 77.9 87.0 79.9C84.0 82.0 80.6 83.3 77.7 84.9C74.7 86.5 72.1 88.0 69.2 89.5C66.3 91.0 63.4 92.8 60.3 93.6C57.2 94.4 54.0 93.7 50.6 94.3C47.2 94.9 43.8 96.7 40.0 97.4C36.2 98.0 31.6 99.0 27.9 98.0C24.3 97.0 20.9 94.2 18.4 91.4C15.8 88.6 13.9 84.8 12.6 81.3C11.3 77.8 11.9 73.5 10.6 70.2C9.3 66.9 6.2 64.6 4.9 61.4C3.5 58.2 2.4 54.4 2.6 50.9C2.9 47.5 5.1 44.1 6.3 40.8C7.5 37.6 8.6 34.5 10.0 31.4C11.4 28.3 12.7 25.0 14.7 22.3C16.8 19.7 19.7 17.6 22.3 15.5C25.0 13.5 27.8 11.4 30.9 10.0C33.9 8.5 37.2 8.1 40.5 6.8C43.8 5.5 47.1 2.6 50.6 2.0C54.1 1.4 58.1 2.3 61.5 3.4C64.9 4.5 68.1 6.5 71.0 8.5C73.9 10.5 76.0 13.5 78.9 15.5C81.7 17.6 85.6 18.6 88.3 20.9C91.0 23.2 93.7 26.3 95.1 29.5C96.4 32.8 96.0 37.0 96.3 40.5C96.6 44.1 96.5 47.4 96.7 50.9Z'/%3E%3C/svg%3E"); }
/* under the pointer a small dot just lightens a touch; it doesn't grow */
@media (hover: hover) and (pointer: fine) { .crew-panel__dot:not([aria-current="true"]):hover span { background-color: color-mix(in srgb, var(--dot), #fff 40%); } }
.crew-panel__dot:focus-visible { outline: none; }
.crew-panel__dot:focus-visible span { box-shadow: inset 0 0 0 3px var(--ink); }
.crew-panel__dot[aria-current="true"] span { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .crew-panel, .crew-panel__cloud, .crew-panel__bg { transition: none !important; animation: none; }
  .crew-panel :is(.crew-panel__content > *, .crew-panel__pager) { transition: none !important; }
  .crew-panel.is-open .bio__link { animation: none; }
}

/* ==========================================================================
   Contact: "Get in touch", the email link, then the mail dog, centred.
   ========================================================================== */
/* the bottom padding has to clear the contact cloud (it reaches well below the dog)
   and the footer's cloud edge, leaving ~60px of paper between them */
.contact { padding-top: calc(var(--section-y) * 0.85); padding-bottom: max(calc(var(--section-y) * 1.1), 172px); }
.contact__info { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* sizes are 72% of the original design's (80% to sit in proportion with the crew
   photos, then 10% less so the head shake stays inside the cloud) */
.contact__dog {
  --frame: 9; /* the sitting pose, until main.js takes over */
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 497 / 364;
  margin-top: clamp(1.12rem, 2.56vw, 2.16rem);
}
/* The box above is sized to the sitting pose (as big as the old still dog); the
   head shake reaches further, so the window onto the strip spills past it.
   Numbers from tools/build-dog.py. */
.contact__dog-window { position: absolute; inset: -4.670% -15.895% -2.198% -22.736%; overflow: hidden; }
.contact__dog-strip {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(calc(var(--frame) * -100% / 14)); /* 14 frames */
}
/* With a mouse (main.js): while he looks straight at you, the strip gives way to
   his face without pupils, and his own pupils (masked to the eye whites, under the
   face's lines) follow the cursor. Images from tools/build-dog-eyes.py. */
/* kept rendered (only see-through) while hidden, so its images are decoded and ready */
.contact__dog-eyes { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.contact__dog.is-watching .contact__dog-eyes { opacity: 1; }
.contact__dog.is-watching .contact__dog-strip { visibility: hidden; }
.contact__dog-eyes > * { position: absolute; }
.contact__dog-pupils {
  inset: 0;
  -webkit-mask: url('../images/contact/dog-eyes-mask.webp?v=2026-10-21c') 0 0 / 100% 100% no-repeat;
  mask: url('../images/contact/dog-eyes-mask.webp?v=2026-10-21c') 0 0 / 100% 100% no-repeat;
}
.contact__dog-pupils img { position: absolute; display: block; max-width: none; will-change: transform; }
.contact__dog-face { inset: 0; width: 100%; height: 100%; max-width: none; }
/* White cloud behind the address and the dog (DogCloud in site-full.psd). The insets
   are the mockup's grown 12% about its centre, so the dog's head shake (which reaches
   past his sitting box) stays well inside: it reaches well above the address, a
   little below the dog and ~23% past each side, and stretches with the block at
   every screen size. */
.contact__cloud {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.contact__cloud::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -46% -22.6% -30.9%;
  background: url('../images/contact/dog-cloud.png') center / 100% 100% no-repeat;
  filter: var(--cloud-shadow);
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* The title, address and dog always bob on the service clouds' rhythm (cloud-bob, on
   .contact__info so the title rides along). With a mouse, the moment the pointer is
   in the cloud it swells 2.5%, the address swaps colour, the cursor is the hand, and
   a click anywhere copies the address (main.js). ::after is the hover area, an oval
   over the cloud so its empty corners don't count. */
.contact__cloud::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -46% -22.6% -30.9%;
  border-radius: 50%;
}
.contact__info { animation: cloud-bob 1.75s step-end infinite; }
@media (hover: hover) and (pointer: fine) {
  .contact__cloud:hover { cursor: pointer; }
  .contact__cloud:hover::before { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .contact__info { animation: none; }
  .contact__cloud::before { transform: none !important; }
}
.contact__title {
  position: relative; /* stays above the cloud, which reaches up behind it */
  z-index: 1;
  pointer-events: none; /* so the pointer over it is still over the cloud (its hover) */
  font-family: var(--font-sparkly);
  font-weight: 400;
  font-size: clamp(1.76rem, 4vw, 2.72rem);
  line-height: 1.1;
  color: var(--mint);
}
/* Hand-lettered address on a paint stroke (SVG traced from site-full.psd). */
.contact__email {
  display: block;
  max-width: 100%;
  margin-top: 0.1rem;
  font-size: clamp(1.12rem, 2.08vw, 1.52rem);
}
/* nudged left so the lettering (not the stroke) centres under the title, as in the design */
.contact__email-art { display: block; width: 15.6em; max-width: 100%; height: auto; translate: -2% 0; }
.contact__stroke { fill: var(--paint); transition: fill 0.2s ease; }
.contact__letters { fill: #000; transition: fill 0.2s ease; }
/* hovering anywhere in the cloud swaps the colours round: pink stroke, letters in the
   stroke's yellow. Touch screens only swap while a finger is on the address (a tapped
   link keeps :hover). */
@media (hover: hover) and (pointer: fine) {
  .contact__cloud:hover .contact__stroke { fill: var(--pink); }
  .contact__cloud:hover .contact__letters { fill: var(--paint); }
}
.contact__email:active .contact__stroke,
.contact__email.is-tapped .contact__stroke { fill: var(--pink); }
.contact__email:active .contact__letters,
.contact__email.is-tapped .contact__letters { fill: var(--paint); }
/* on touch, main.js holds the swap (.is-tapped) for half a second after a tap,
   then it eases slowly back */
@media not all and (hover: hover) and (pointer: fine) {
  .contact__stroke, .contact__letters { transition: fill 0.6s ease; }
  .contact__email:active :is(.contact__stroke, .contact__letters),
  .contact__email.is-tapped :is(.contact__stroke, .contact__letters) { transition-duration: 0.1s; }
}
.contact__email { -webkit-tap-highlight-color: transparent; }
/* "Copied" bubble under the address, shown by main.js after a click copies it */
.contact__email-wrap { position: relative; max-width: 100%; }
.contact__copied {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: -50% -4px;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.25s var(--ease-out);
}
.contact__copied:empty { display: none; }
.contact__copied.is-shown { opacity: 1; translate: -50% 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  padding-block: 1.1rem;
  background: var(--white);
}
/* Cloud edge along the top: the bottom edge of "Cloud cropper" in site-full.psd,
   flipped and made to tile sideways. Same scale as the clients band edges. */
.site-footer::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0; right: 0;
  height: 29px;
  background: url('../images/backgrounds/footer-edge.png') left bottom / 730px 29px repeat-x;
  pointer-events: none;
}
.site-footer__inner {
  width: min(100% - 4rem, 1360px);
  /* side columns share the leftover space equally, so the icons sit dead centre */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.site-footer__social { grid-column: 2; display: flex; gap: 1.5rem; }
/* paper-grey and quiet like the client logos; teal on hover */
.site-footer__social a { display: flex; color: #b4b1ad; transition: color 0.2s ease; }
.site-footer__social a:hover { color: var(--teal); }
.site-footer__social svg { width: 20px; height: 20px; }
.site-footer__copy { justify-self: end; font-size: 0.8rem; text-align: right; color: #aaa59f; }
/* "Join us" button, bottom left: the envelope drawing (trimmed from
   footer/src/join-us.gif) in its own colours, as two layers so the black lines
   (join-us-lines.webp) can fade apart from the pink heart (join-us-heart.webp).
   In the footer it rests faded, lines lighter still, and goes solid and grows a
   touch on hover. Nudged up a touch to sit level in the footer. */
.site-footer__join {
  grid-column: 1;
  justify-self: start;
  display: block;
  width: 80px;
  margin-top: -12px;
}
.site-footer__join-art {
  position: relative;
  display: block;
  aspect-ratio: 276 / 157;
  background: url('../images/footer/join-us-heart.webp?v=2026-11-02') center / contain no-repeat;
  transition: scale 0.2s ease, opacity 0.2s ease;
}
.site-footer__join-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/footer/join-us-lines.webp?v=2026-11-02') center / contain no-repeat;
  transition: opacity 0.2s ease;
}
.site-footer__join .site-footer__join-art { opacity: 0.6; }
.site-footer__join .site-footer__join-art::before { opacity: 0.5; }
.site-footer__join:is(:hover, :focus-visible) .site-footer__join-art { scale: 1.04; opacity: 1; }
.site-footer__join:is(:hover, :focus-visible) .site-footer__join-art::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-footer__join-art, .site-footer__join-art::before { transition: none; }
}

/* ==========================================================================
   Motion: scroll reveals (main.js adds .is-in)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.reveal.is-in { opacity: 1; transform: none; }
.crew__grid li:nth-child(2) .reveal { transition-delay: 0.08s; }
.crew__grid li:nth-child(3) .reveal { transition-delay: 0.16s; }
.crew__grid li:nth-child(4) .reveal { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__cue.is-shown .hero__cue-arrow { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .crew__grid { grid-template-columns: 1fr 1fr; }
  /* two names per row, so a dot closes each row */
  .crew__grid li:nth-child(2n) .crew-member__name::after { content: ''; left: calc(100% + var(--crew-gap) / 2); --dot-y: 0em; }
  .contact__dog { width: min(100%, 230px); }
}

/* Mobile menu: full-screen white sheet that slides in from the right. */
@media (max-width: 768px) {
  .site-header { padding: 0.85rem 1.5rem; }
  .site-header .site-header__burger { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-soft);
  }
  .site-nav.is-open { transform: none; }
  /* the sheet is white, so its links and the close icon stay mint even over the reel */
  .site-nav__link { font-size: 2rem; }
  .site-header :is(.site-nav__link, .site-header__burger[aria-expanded="true"]) { color: var(--mint); }
  @media (hover: hover) {
    .site-header :is(.site-nav__link, .site-header__burger):hover { color: var(--pink); }
  }
  /* "Join us" sits apart from the main links at the foot of the sheet, in the footer's
     hand-drawn art. */
  .site-nav__join {
    display: block;
    position: absolute;
    bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: 138px;
    translate: -50% 0;
  }
}

/* Mobile spacing: a touch more air than desktop gives at this size, same three
   tiers (sections, groups, within a group) so it stays consistent. */
@media (max-width: 768px) {
  :root { --section-y: 112px; --group-gap: 96px; }
  .about__title { --title-gap: 28px; }
  .clients { --pad-top: 80px; --pad-bottom: 87px; }
  .clients__list { margin-top: 31px; }
  .crew__title { font-size: 2.8rem; } /* a clear step up from the names */
  .crew__grid { margin-top: 45px; }
  /* ~35% bigger than the desktop minimums */
  .contact__title { font-size: 2.4rem; }
  .contact__email { margin-top: 0.64rem; font-size: 1.2rem; }
  .contact { padding-bottom: 185px; }
  .contact__dog { margin-top: 4.3rem; }
  /* Bio cloud on a phone: taller than the cloud's own shape (it stretches) so the bio
     fits one screen, with the text left-aligned for easier reading. */
  .bio { width: calc(100% - 24px); }
  .bio__card {
    aspect-ratio: auto;
    height: min(660px, 100vh - 24px);
    height: min(660px, 100svh - 24px);
    max-height: none;
    padding: 21% 12% 13%;
  }
  .bio__pic { width: min(150px, 20svh); }
  .bio__name { margin-top: 6px; font-size: 1.35rem; }
  .bio__role { margin-top: 2px; font-size: 12px; line-height: 1.4; }
  .bio__text, .bio__credits { justify-self: stretch; text-align: left; }
  .bio__text { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .bio__credits { margin-top: 8px; font-size: 10px; line-height: 1.5; }
  .bio__credits::before { font-size: 9px; }
  .bio__film, .bio__position { white-space: normal; }
  .bio__nav { width: min(100%, 220px); margin-top: 8px; }
  .bio__step svg { width: 28px; height: 18px; }
  .bio__close { top: 6%; right: 9%; }
  .bio__close span { width: 18px; height: 18px; }
}

@media (max-width: 540px) {
  /* the contact block narrows so its cloud (about 1.45x as wide) fits the screen
     with a little paper either side; the dog keeps his share of it */
  .contact__cloud { width: min(255px, calc((100vw - 32px) / 1.452)); }
  .contact__dog { width: 77%; }
  :root { --gutter: 20px; }
  .about__intro { font-size: 16px; text-wrap: pretty; } /* no lone "spark." */
  .services { grid-template-columns: 1fr; gap: 36px; max-width: 320px; margin-inline: auto; }
  .service { padding: 44px 40px 30px; }
  .service p { margin: 18px 0; }
  .service__drawing { width: 120px; height: 110px; }
  /* 3 + 2 logos instead of 4 + 1: each slot takes a third of the row */
  .clients__list { gap: 25px 0; }
  .clients__list li { flex: 0 0 33.333%; display: flex; justify-content: center; }
  .clients__list img { height: 40px; max-width: 92px; }
  .clients__list .clients__logo--flying-bark { max-width: 75px; }
  .crew__grid { --crew-gap: 14px; gap: 50px var(--crew-gap); }
  .site-footer__inner { width: min(100% - 2.5rem, 1360px); grid-template-columns: 1fr; justify-items: center; }
  .site-footer__social,
  .site-footer__join { grid-column: auto; }
  .site-footer__join { justify-self: center; }
  .site-footer__copy { justify-self: center; text-align: center; }
}