/* ==========================================================================
   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, L, g, q or punctuation),
   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;
}

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

  /* type */
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sparkly: 'Sparkly Original', 'Permanent Marker', cursive;
  --font-marker: 'Permanent Marker', cursive;

  /* space + shape */
  --section-y: clamp(72px, 9vw, 128px);
  --gutter: 24px;
  --radius: 10px;
  --shadow: 0 16px 34px -18px rgba(40, 30, 20, 0.4);

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

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

html {
  scroll-behavior: smooth;
  background-color: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--ink);
  /* paper.jpg is a seamless tile (edges cross-faded) so the repeats don't show. */
  background: var(--paper) url('../images/backgrounds/paper.jpg') center top / 1400px auto repeat;
  -webkit-font-smoothing: antialiased;
}

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 when hero-splash.js adds .is-visible.
   ========================================================================== */
.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 { position: relative; z-index: 2; }
.site-header__logo img { height: 34px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.site-nav__link {
  font-family: var(--font-sparkly);
  font-size: 1.4rem;
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--ink);
  transition: color 0.2s ease;
}
.site-nav__link:hover { color: var(--teal); }

.site-header__burger { display: none; position: relative; z-index: 2; padding: 4px; }
.site-header__burger img { height: 22px; width: auto; }

/* Hidden until the splash finishes */
.site-header :is(.site-header__logo img, .site-nav__link, .site-header__burger img) {
  opacity: 0;
  transition: opacity 0.7s ease, color 0.2s ease;
}
.site-header.is-visible :is(.site-header__logo img, .site-nav__link, .site-header__burger img) { opacity: 1; }

/* ==========================================================================
   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.
   ========================================================================== */
.hero { position: relative; height: 335vh; }
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  /* the reel melts into the paper at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.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%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   About · services · reel
   ========================================================================== */
.about { padding-top: calc(var(--section-y) * 0.6); 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; }

.about__title { display: flex; justify-content: center; margin: -4% auto -5%; }
.about__title img { width: min(92vw, 820px); height: auto; filter: url(#teal-tint); }

.about__intro {
  max-width: 600px;
  margin-inline: auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 6vw, 80px);
  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;
}
.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'); }

.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-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
}
.service__drawing { width: 150px; height: 140px; margin-top: auto; object-fit: contain; }
/* white line-art drawing → ink */
.service__drawing--line { filter: invert(1); }

.reel { width: min(100%, 880px); margin: clamp(56px, 6vw, 88px) auto 0; scroll-margin-top: 130px; }
.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; }
.reel__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease;
}
/* Scribbled play button from the mockup, filled white with a teal triangle. */
.reel__play {
  --size: 104px;
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: var(--size);
  transform: translate(-50%, -50%);
}
.reel__play img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
  transition: filter 0.2s ease;
}
.reel__thumb:hover::after { background: rgba(0, 0, 0, 0.25); }
.reel__thumb:hover .reel__play img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3)) brightness(0.9); }

/* ==========================================================================
   Clients: a white band with scribbly brushed edges (traced from the mockup)
   so the logos read cleanly over the paper. The edge strips tile sideways;
   the plain white fill sits between them.
   ========================================================================== */
.clients {
  --edge-top: 28px;
  --edge-bottom: 15px;
  padding-block: clamp(44px, 4.6vw, 66px) clamp(40px, 4.3vw, 60px);
  background:
    url('../images/backgrounds/band-edge-top.png') left top / 1204px var(--edge-top) repeat-x,
    url('../images/backgrounds/band-edge-bottom.png') left bottom / 1349px 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;
  text-align: center;
}
.clients__title {
  font-family: var(--font-sparkly);
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: var(--yellow);
}
.clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 36px;
  margin-top: clamp(18px, 1.6vw, 24px);
}
.clients__list img {
  width: auto;
  height: 34px;
  max-width: 84px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.3s ease;
}
.clients__list img:hover { opacity: 1; }

/* ==========================================================================
   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.
   ========================================================================== */
.crew { padding-bottom: calc(var(--section-y) * 0.5); text-align: center; }
.crew__title {
  font-family: var(--font-sparkly);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.2;
  color: var(--blue);
}
.crew__intro { margin-top: 14px; font-size: 15px; color: var(--muted); }

.crew__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 40px);
  max-width: 860px;
  margin: clamp(36px, 4vw, 56px) auto 0;
}
.crew-member { display: block; }
.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);
}
/* Add filter: grayscale(1) here to show every photo in black and white. */
.crew-member__photo { object-position: 50% 30%; }
/* the drawings sit low in their frames; zoom them in a little */
.crew-member__drawing {
  inset: -17.5% 0 auto 0;
  height: 135%;
  max-width: none;
  background: var(--white);
  opacity: 0;
}
.crew-member:hover .crew-member__photo,
.crew-member:focus-visible .crew-member__photo { opacity: 0; }
.crew-member:hover .crew-member__drawing,
.crew-member:focus-visible .crew-member__drawing { opacity: 1; }
.crew-member { position: relative; }
/* First name over the middle of the picture on hover, semi-transparent.
   (Full names stay in each photo's alt text for screen readers.) */
.crew-member__name {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-marker);
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}
.crew-member:hover .crew-member__name,
.crew-member:focus-visible .crew-member__name { opacity: 0.65; }

/* ==========================================================================
   Contact: "Get in touch", the email link, then the mail dog, centred.
   ========================================================================== */
.contact { padding-top: calc(var(--section-y) * 0.85); padding-bottom: calc(var(--section-y) * 1.1); }
.contact__info { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact__dog { width: min(100%, 416px); height: auto; margin-top: clamp(2rem, 4.5vw, 3.75rem); }
.contact__title {
  font-family: var(--font-sparkly);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: var(--mint);
}
.contact__email {
  margin-top: 0.35rem;
  font-family: var(--font-sparkly);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  color: var(--gold);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.contact__email:hover { color: var(--mint); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: 1.1rem;
  border-top: 1px solid rgba(43, 39, 35, 0.08);
  background: var(--white);
}
.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; }
.site-footer__social a { display: flex; color: var(--ink); 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: var(--muted); }

/* ==========================================================================
   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) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: 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; }
  .contact__dog { width: min(100%, 320px); }
}

/* 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__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; }
  .site-nav__link { font-size: 2rem; }
}

@media (max-width: 540px) {
  :root { --gutter: 20px; }
  .about__intro { font-size: 16px; }
  .services { grid-template-columns: 1fr; gap: 8px; max-width: 320px; margin-inline: auto; }
  .service { padding: 44px 40px 30px; }
  .service p { margin: 18px 0; }
  .service__drawing { width: 120px; height: 110px; }
  .reel__play { --size: 80px; }
  /* 3 + 2 logos instead of 4 + 1 */
  .clients__list { max-width: 300px; margin-inline: auto; gap: 20px 28px; }
  .clients__list img { height: 30px; max-width: 72px; }
  .crew__grid { gap: 18px 14px; }
  .site-footer__inner { width: min(100% - 2.5rem, 1360px); grid-template-columns: 1fr; justify-items: center; }
  .site-footer__social { grid-column: auto; }
  .site-footer__copy { justify-self: center; text-align: center; }
}