/* Safety Venture — event medical standby
   Direction A: cinematic dark. Tokens first, then base, then one block per section. */

:root {
  --bg: #07090d;
  --bg-raised: #0f131a;
  --bg-raised-2: #151a23;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.55);
  --red: #d7192a;
  --red-hover: #b81322;
  --red-soft: #ff5a66;
  --wa: #25d366;
  --wa-hover: #1fb857;
  --wa-ink: #062b14;

  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1840px;
  --gutter: clamp(16px, 5vw, 80px);
  --radius: 14px;
  --radius-lg: 22px;
  --section-y: clamp(72px, 10vw, 140px);
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-soft);
}

.section { padding-block: var(--section-y); }

.section__head {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section__head h2 { font-size: clamp(32px, 4vw, 68px); }
.section__head p:not(.eyebrow) { font-size: clamp(16px, 1.4vw, 18px); color: var(--text-2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--wa { background: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { background: var(--wa-hover); }

.btn--red { background: var(--red); color: var(--text); }
.btn--red:hover { background: var(--red-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(7, 9, 13, 0.35); }
.btn--ghost:hover { border-color: var(--text); }

.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(7, 9, 13, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  min-width: 0;
}
.brand__mark { width: auto; height: 40px; flex: none; }
.brand__text { display: grid; line-height: 1.1; }
.brand__name { font: 700 17px/1.1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.brand__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav a:not(.btn):hover { color: var(--text); }

.site-header__actions { display: none; align-items: center; gap: 12px; }

.menu-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1023px) {
  .site-header__actions { display: flex; }

  /* Dropdown panel under the header; the page stays visible behind a scrim. It opens as a circle growing out of
     the menu button (app.js sets --menu-x / --menu-y to the button's centre, relative to the panel). */
  .nav {
    --menu-x: calc(100% - 40px);
    --menu-y: -36px;
    position: fixed;
    inset: var(--header-h) 0 auto;
    max-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 8px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    visibility: hidden;
    clip-path: circle(0 at var(--menu-x) var(--menu-y));
    transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.55s;
  }
  .nav.is-open {
    visibility: visible;
    clip-path: circle(150% at var(--menu-x) var(--menu-y));
    transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  /* The links follow the circle in, one after another. */
  .nav > a {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav.is-open > a {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease calc(0.12s + var(--i, 0) * 0.045s), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(0.12s + var(--i, 0) * 0.045s);
  }
  .nav a:not(.btn) {
    padding: 18px 0;
    font: 600 20px/1.2 var(--font-display);
    color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  .nav__cta { margin-top: 28px; }
  /* backdrop-filter would make the header the containing block for the fixed nav. app.js keeps .menu-active on
     until the closing circle has shrunk away, so the panel doesn't jump mid-animation. */
  .site-header.menu-active { background: var(--bg); backdrop-filter: none; }
  .site-header::after {
    content: '';
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: -1;
    background: rgba(7, 9, 13, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .site-header:has(.nav.is-open)::after { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .nav, .nav.is-open { clip-path: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; opacity: 0; }
  .nav.is-open { opacity: 1; transition: opacity 0.2s ease, visibility 0s; }
  .nav > a, .nav.is-open > a { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 1024px) {
  .nav__cta { min-height: 42px; padding: 9px 18px; font-size: 14px; }
}

@media (max-width: 479px) {
  .header-cta { display: none; }
  .brand__mark { height: 34px; }
  .brand__name { font-size: 16px; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 64px 32px;
  background: var(--bg);
}

.site-footer__inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: start;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .footer-menu { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); }
  .footer-menu { grid-column: auto; grid-row: auto; }
}

.footer-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-menu__title {
  margin-bottom: 14px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.footer-menu li { display: flex; align-items: center; gap: 8px; }
.footer-menu a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-menu a:hover { color: var(--text); }
.footer-menu a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
/* Every footer link shows where it goes: → stays on the site, ↗ opens another site. */
.footer-menu a:not(.footer-menu__ext)::after {
  content: '\2192';
  color: var(--text-3);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.footer-menu a:hover::after { color: var(--text); transform: translateX(3px); }

.site-footer__brand { display: grid; gap: 20px; max-width: 420px; }
.site-footer__brand img { width: 140px; }
.site-footer__brand p { color: var(--text-2); font-size: 15px; }

.site-footer__contact { display: grid; gap: 14px; justify-items: start; }
.site-footer__phone {
  font: 700 clamp(26px, 3vw, 34px)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-footer__phone:hover { color: var(--wa); }
.site-footer__email { color: var(--text-2); font-size: 15px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.site-footer__email:hover { color: var(--text); }
.site-footer__google { font-weight: 600; text-underline-offset: 3px; }
.site-footer__google:hover { color: var(--wa); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer__copy { font-size: 13px; color: var(--text-3); }

.footer__credit { position: relative; margin: 0; font-size: 13px; color: var(--text-2); }
.footer__credit-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__credit-name:hover { color: var(--red-soft); }

/* Hidden until the name is clicked, then shown for 2 seconds (app.js). */
.footer__credit-photo {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-strong), 0 18px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.6);
  transform-origin: bottom right;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
  pointer-events: none;
}
.footer__credit-photo.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
@media (max-width: 767px) {
  .footer__credit-photo { right: auto; left: 0; transform-origin: bottom left; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 920px);
  display: flex;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.7) 0%, rgba(7, 9, 13, 0.1) 22%, rgba(7, 9, 13, 0.55) 48%, var(--bg) 78%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 48px;
  padding-top: calc(var(--header-h) + 22vh);
  padding-bottom: 32px;
}

.hero__content { display: grid; gap: 18px; max-width: 640px; }

.hero h1 { font-size: clamp(36px, 5.4vw, 100px); line-height: 1.02; letter-spacing: -0.03em; }

.hero__lead { font-size: clamp(15px, 1.2vw, 21px); color: var(--text-2); max-width: 620px; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.hero__eyebrow { color: var(--text-2); }

.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.proof > div { padding: 18px 16px 4px 0; }
.proof > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.proof dt { font: 700 clamp(15px, 1.6vw, 20px)/1.25 var(--font-display); letter-spacing: -0.01em; }
.proof dd { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 767px) {
  .hero__media img { object-position: 68% 18%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(7, 9, 13, 0.65) 0%, rgba(7, 9, 13, 0) 16%, rgba(7, 9, 13, 0.35) 30%, rgba(7, 9, 13, 0.88) 46%, var(--bg) 66%);
  }
}

@media (max-width: 767px) {
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__inner { padding-top: calc(var(--header-h) + 26vh); }
}

/* Hero entrance (home and Join pages; the inline script in <head> adds .js-hero unless motion is reduced). The photo
   fades in and settles, the headline rises word by word out of its own line (app.js wraps the words), then the
   copy, buttons and proof row follow, and a light sweeps once across the WhatsApp button. Layout is unchanged. */
@keyframes hero-photo { from { opacity: 0; scale: 1.1; } to { opacity: 1; scale: 1; } }
@keyframes hero-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes hero-sheen { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
.js-hero .hero .hero__media { overflow: hidden; }
.js-hero .hero .hero__media img { animation: hero-photo 1.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js-hero .hero .hero__eyebrow { animation: hero-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
/* Until app.js has split the words (or if it never runs), the headline simply fades up. */
.js-hero .hero h1:not(.is-split) { animation: hero-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.hero h1 .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em; /* room for descenders inside the mask */
  margin-bottom: -0.12em;
}
.hero h1 .hw > span {
  display: inline-block;
  animation: hero-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i) * 0.06s) both;
}
.js-hero .hero .hero__lead { animation: hero-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.js-hero .hero .hero__ctas { animation: hero-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.js-hero .hero .proof { animation: hero-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both; }
.js-hero .hero .hero__ctas .btn--wa { position: relative; overflow: hidden; isolation: isolate; }
.js-hero .hero .hero__ctas .btn--wa::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
  animation: hero-sheen 1.1s ease 1.5s both;
}

/* Home hero on phones: the photo takes the top of the screen, zoomed in a little on the medic so the MEDICAL vest
   reads clearly against the crowd and stage, and the text starts below the vest instead of covering it. */
@media (max-width: 767px) {
  .hero:not(.join-hero) .hero__media { bottom: auto; height: 56svh; overflow: hidden; }
  .hero:not(.join-hero) .hero__media img { object-position: 50% 52%; transform: scale(1.18); transform-origin: 80% 40%; }
  .hero:not(.join-hero) .hero__media::after {
    background: linear-gradient(180deg, rgba(7, 9, 13, 0.6) 0%, rgba(7, 9, 13, 0) 16%, rgba(7, 9, 13, 0) 62%, var(--bg) 100%);
  }
  .hero:not(.join-hero) .hero__inner { padding-top: 42svh; }
}

@media (min-width: 768px) {
  .hero__media { left: 48%; }
  .hero__media img { object-position: 50% 30%; }
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 13, 0.6) 22%, rgba(7, 9, 13, 0) 55%),
      linear-gradient(180deg, rgba(7, 9, 13, 0.55) 0%, rgba(7, 9, 13, 0) 20%, rgba(7, 9, 13, 0) 70%, var(--bg) 100%);
  }
  .hero__inner { padding-top: calc(var(--header-h) + 64px); justify-content: center; gap: 72px; }
  .hero__content { max-width: min(760px, 44vw); }
}

@media (min-width: 1024px) {
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof > div,
  .proof > div:nth-child(even) { padding: 22px 24px 4px; border-left: 1px solid var(--line); }
  .proof > div:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Clients ---------- */

.clients { padding-block: clamp(36px, 5vw, 56px); border-block: 1px solid var(--line); }
.clients__inner { display: grid; gap: 24px; justify-items: center; }
.clients__title {
  font: 500 14px/1.4 var(--font-body);
  color: var(--text-3);
  text-align: center;
}
.clients__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 48px;
}
/* Logos keep their brand colours on transparency (dark ink reversed to white for the dark page). */
.clients__logos li { display: grid; place-items: center; }
.clients__logos img { width: auto; height: clamp(64px, 6vw, 88px); max-width: 100%; object-fit: contain; }
.clients__logos img.clients__wide { height: clamp(34px, 3vw, 44px); }
@media (min-width: 1024px) {
  .clients__inner { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; gap: clamp(48px, 6vw, 112px); }
  .clients__title { text-align: left; font-size: 15px; white-space: nowrap; }
  .clients__logos { justify-content: flex-start; gap: clamp(48px, 5vw, 88px); }
}
@media (max-width: 599px) {
  .clients__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 32px 20px; }
  .clients__logos img { height: 64px; }
  .clients__logos img.clients__wide { height: auto; width: 100%; max-height: 40px; }
}

/* ---------- Events ---------- */

.events__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.events__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.events__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.events__tile:hover img { transform: scale(1.04); }
/* A hairline inner edge so night-time photos don't melt into the dark page. */
.events__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
/* Tap-to-enlarge badge. */
.events__tile::before {
  content: '';
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.events__tile:hover::before { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .events__scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .events__scroller::-webkit-scrollbar { display: none; }
  .events__scroller .container { width: max-content; max-width: none; }
  .events__grid { grid-auto-flow: column; grid-auto-columns: 78vw; }
  .events__tile { aspect-ratio: 4 / 5; scroll-snap-align: center; }
  /* Spotlight: the photo in view is bright and full size, its neighbours sit back. */
  .has-spotlight .events__tile {
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    opacity: 0.4;
    transform: scale(0.94);
  }
  .has-spotlight .events__tile.is-current { opacity: 1; transform: none; }
  .events__tile.is-current::before { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .events__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, clamp(180px, 19vw, 380px));
  }
  /* 9 photos, 4 x 4: portrait shots take the tall slots, landscape ones the wide slots. */
  .events__tile:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } /* stage */
  .events__tile:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } /* arena */
  .events__tile:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } /* tiers */
  .events__tile:nth-child(4) { grid-area: 1 / 4 / 3 / 5; } /* glow */
  .events__tile:nth-child(5) { grid-area: 3 / 1 / 5 / 2; } /* crowd */
  .events__tile:nth-child(6) { grid-area: 3 / 2 / 4 / 4; } /* floor */
  .events__tile:nth-child(7) { grid-area: 2 / 3 / 3 / 4; } /* red */
  .events__tile:nth-child(8) { grid-area: 4 / 2 / 5 / 4; } /* bowl */
  .events__tile:nth-child(9) { grid-area: 3 / 4 / 5 / 5; } /* monsters */
}

.pills {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pills li {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

/* ---------- Crew ---------- */

.crew { background: var(--bg-raised); }

.crew__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

.crew__text { display: grid; gap: 18px; max-width: 520px; }
.crew__text h2 { font-size: clamp(32px, 4vw, 68px); }
.crew__text > p:not(.eyebrow) { color: var(--text-2); font-size: clamp(16px, 1.4vw, 18px); }

.crew__media { display: grid; gap: 12px; }
.crew__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.crew__photo img { width: 100%; }
.crew__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.crew__strip li { overflow: hidden; border-radius: var(--radius); }
/* One row of 4 on the page; the rest of the crew photos are a swipe away in the photo viewer. The 4th tile says how
   many more there are (data-more, set by app.js). */
.crew__strip li:nth-child(n + 5) { display: none; }
.crew__strip li { position: relative; }
.crew__strip li[data-more]::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 13, 0.62);
  font: 700 clamp(18px, 2vw, 28px)/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
  pointer-events: none;
  transition: background-color 0.2s var(--ease);
}
.crew__strip li[data-more]:hover::after { background: rgba(7, 9, 13, 0.45); }
.crew__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crew__strip img[src*="field-crew-latest"] { object-position: center 56%; } /* portrait: keep the whole group in the tile */

.ladder {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}
.ladder li {
  position: relative;
  padding: 10px 0 10px 30px;
  font: 600 18px/1.3 var(--font-display);
}
.ladder li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 25, 42, 0.2);
}
.ladder::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--red), rgba(255, 255, 255, 0.35), var(--red));
}
.ladder .ladder__mid { font: 500 14px/1.3 var(--font-body); color: var(--text-3); padding-block: 18px; }
.ladder .ladder__mid::before { width: 8px; height: 8px; margin-top: -4px; left: 6px; background: var(--text-3); box-shadow: none; }

@media (min-width: 768px) {
  .ladder li { font-size: 20px; }
}

@media (min-width: 1024px) {
  .crew__inner { grid-template-columns: 1fr 1.25fr; gap: 64px; }
}

/* ---------- Services ---------- */

.services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg);
  transition: background-color 0.3s var(--ease);
}
.service:hover { background: var(--bg-raised); }
.service__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
/* Command centre: full-width lead card, photo beside the text from tablet up. */
.service--feature { grid-column: 1 / -1; }
.service--feature .service__photo { aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .service--feature {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;  /* empty rows above and below centre the text */
    column-gap: clamp(28px, 4vw, 56px);
  }
  .service--feature .service__photo { grid-row: 1 / -1; margin: 0; }
  .service--feature .service__icon { grid-row: 2; }
  .service--feature h3 { grid-row: 3; }
  .service--feature p { grid-row: 4; }
  .service.service--feature h3 { font-size: clamp(22px, 2.2vw, 30px); }
  .service.service--feature p { font-size: 16px; max-width: 420px; }
}

.service__photo--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: hidden;
}
.service__photo--pair img { width: 100%; height: 100%; object-fit: cover; }
.service__photo--pair img[src*="field-medic-bay"] { object-position: 80% center; } /* keep the MEDIC BAY sign in frame */
.service__photo--pair img[src*="field-mo-2"] { object-position: 40% 25%; } /* the MO and stethoscope */
.service__photo--pair img[src*="field-build-480"] { object-position: center 62%; } /* the crew member at the truss */
.service__photo--pair img[src*="field-build-2-480"] { object-position: center 48%; } /* the trusses over the floor */
.service__icon { color: var(--text); margin-bottom: 12px; }
.service h3 { font-size: 21px; letter-spacing: -0.01em; }
.service p { color: var(--text-2); font-size: 15px; }

@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- On the ground ----------
   The source photos are small (256-480px wide), so columns stay narrow
   and row height tracks column width instead of stretching the images.
   Tile order is chosen so dense packing leaves no gaps at 2, 4 and 6 columns:
   re-check every width after adding or reordering tiles. */

.field { padding-top: 0; }

.field__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 30vw;
  grid-auto-flow: dense;
  gap: 8px;
}

.field__tile { overflow: hidden; border-radius: var(--radius); background: var(--bg-raised); }
.field__tile--tall { grid-row: span 2; }
.field__tile--big { grid-column: span 2; grid-row: span 2; }

.field__tile figure { position: relative; margin: 0; height: 100%; }
.field__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.field__tile:hover img { transform: scale(1.04); }

.field__tile figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.85), transparent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .field__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15vw; gap: 12px; }
}

@media (min-width: 1280px) {
  .field__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: min(10.4vw, 200px); }
}

/* The preview app.js builds from the grid: two drifting rows on wide screens, a filmstrip on phones.
   "View all photos" swaps it for the full grid (.is-collapsed hides the grid). */
.field { overflow-x: clip; }
/* The form's .field rule also makes this section a grid: stop the filmstrip from stretching its column. */
.section.field > .container { min-width: 0; }
.field__grid.is-collapsed { display: none; }
.field__reel[hidden] { display: none; }

.field__shot {
  position: relative;
  flex: none;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  cursor: zoom-in;
}
.field__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.field__shot:hover img { transform: scale(1.04); }
.field__shot:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.field__shot-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 36px 14px 12px;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.85), transparent);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* Phones: the filmstrip. */
.field__marquee { display: none; }
.field__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.field__strip::-webkit-scrollbar { display: none; }
.field__strip .field__shot { width: min(76vw, 340px); height: min(100vw, 440px); scroll-snap-align: start; }
.field__film-meta { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.field__count { margin: 0; flex: none; font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.field__bar { position: relative; flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.field__fill {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

/* Wide screens: two rows, full bleed, drifting in opposite directions. */
@media (min-width: 768px) {
  .field__film { display: none; }
  .field__marquee { display: grid; gap: 12px; margin-inline: calc(50% - 50vw); }
  .field__row {
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--gutter);
  }
  .field__row::-webkit-scrollbar { display: none; }
  .field__track { display: flex; gap: 12px; width: max-content; }
  .field__row .field__shot { height: 280px; }
  .field__row--reverse .field__shot { height: 220px; }
  .field__marquee.is-moving .field__row {
    overflow: hidden;
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .field__marquee.is-moving .field__track { padding-right: 12px; animation: field-left var(--field-dur, 80s) linear infinite; }
  .field__marquee.is-moving .field__row--reverse .field__track { animation-name: field-right; }
  .field__marquee.is-paused .field__track,
  .field__marquee.is-moving .field__row:hover .field__track,
  .field__marquee.is-moving .field__row:focus-within .field__track { animation-play-state: paused; }
}
@keyframes field-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes field-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.field__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.field__controls[hidden] { display: none; }
.field__more,
.field__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
}
.field__more:hover,
.field__pause:hover { border-color: var(--text); }
.field__pause[hidden] { display: none; }
.field__pause .field__play-icon,
.field__pause[aria-pressed="true"] .field__pause-icon { display: none; }
.field__pause[aria-pressed="true"] .field__play-icon { display: block; }
.field__more svg { transition: transform 0.3s var(--ease); }
.field__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.field__more:active,
.field__pause:active { background: rgba(255, 255, 255, 0.06); }
.field__more:focus-visible,
.field__pause:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 767px) {
  .field__pause { display: none !important; }
  .field__more { width: 100%; }
}

/* ---------- How we work ---------- */

.process { background: var(--bg-raised); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.step {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 0 0 36px 28px;
  border-left: 1px solid var(--line-strong);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 25, 42, 0.2);
}
.step__n {
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-soft);
}
.step h3 { font-size: 22px; letter-spacing: -0.01em; }
.step p { color: var(--text-2); font-size: 15px; }

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .step { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .step::before { left: 0; top: -5px; }
}

/* ---------- What we bring ---------- */

.bring__inner { display: grid; gap: 48px; align-items: center; }

.fleet { min-width: 0; }

.fleet__stage {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(215, 25, 42, 0.16), transparent 62%),
    #090c12;
  overflow: hidden;
  user-select: none;
}

.fleet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-inline: 4px;
}

.fleet__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1.2 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.fleet__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 25, 42, 0.24);
}

.fleet__caption {
  font: 500 13px/1.3 var(--font-body);
  color: var(--text-3);
}

.fleet__viewport {
  position: relative;
  display: grid;
  aspect-ratio: 20 / 13;
  border-radius: calc(var(--radius-lg) - 8px);
  background:
    radial-gradient(68% 54% at 50% 62%, rgba(215, 25, 42, 0.16), transparent 72%),
    radial-gradient(75% 65% at 50% 42%, rgba(28, 36, 52, 0.65), transparent 75%),
    linear-gradient(180deg, #090c12 0%, #0d121b 68%, #080b10 100%);
  perspective: 1100px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.fleet__viewport:active { cursor: grabbing; }
.fleet__viewport:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.fleet__floor {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.fleet__shadow {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: 72%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.68) 48%, transparent 100%);
  transform: translate3d(-50%, 0, 0) scaleX(0.68);
  will-change: transform;
}

.fleet__ring {
  position: absolute;
  left: 50%;
  bottom: -29%;
  width: 86%;
  aspect-ratio: 1;
  transform: translate3d(-50%, 0, 0) rotateX(76deg) rotateZ(0deg);
  transform-origin: center center;
  will-change: transform;
  opacity: 0.9;
}

.fleet__canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--ease);
}

.fleet.is-360 .fleet__canvas {
  opacity: 1;
}

/* The 3D scene draws its own contact shadow, turning with the van. */
.fleet__shadow { transition: opacity 280ms var(--ease); }
.fleet.is-360 .fleet__shadow { opacity: 0; }

.fleet__slide {
  grid-area: 1 / 1;
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  z-index: 1;
  transform-origin: 50% 62%;
  will-change: transform, opacity;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fleet__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
}

.fleet.is-ready .fleet__slide {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(7%, 0, 0) rotateY(-14deg) scale(0.94);
}

.fleet.is-ready:not(.is-360) .fleet__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
}

.fleet.is-ready .fleet__slide.is-prev {
  transform: translate3d(-7%, 0, 0) rotateY(14deg) scale(0.94);
}

.fleet.is-ready .fleet__slide.is-next {
  transform: translate3d(7%, 0, 0) rotateY(-14deg) scale(0.94);
}

.fleet__hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.72);
  color: var(--text-2);
  font: 500 11px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.fleet.is-360 .fleet__hint {
  opacity: 1;
}

.fleet.is-360.is-dragging .fleet__hint {
  opacity: 0.35;
}

.fleet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fleet__tabs {
  position: relative;
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  isolation: isolate;
}

.fleet__tabs::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: 999px;
  background: var(--text);
  transform: translate3d(calc(var(--active-idx, 0) * 100%), 0, 0);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms var(--ease);
  z-index: 0;
}

.fleet.is-360 .fleet__tabs::before {
  opacity: 0.16;
}

.fleet__tab {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 220ms var(--ease);
}

.fleet__tab:hover { color: var(--text); }
.fleet:not(.is-360) .fleet__tab.is-active { color: #0b0d12; }
.fleet.is-360 .fleet__tab.is-active { color: var(--text); }
.fleet__tab:focus-visible {
  outline: 2px solid var(--red-ink);
  outline-offset: 2px;
}

.fleet__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fleet__mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 90, 102, 0.45);
  border-radius: 999px;
  background: rgba(215, 25, 42, 0.14);
  color: var(--text);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 140ms var(--ease);
}

.fleet__mode:hover {
  border-color: var(--red-ink);
  background: rgba(215, 25, 42, 0.26);
}

.fleet__mode[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 18px rgba(215, 25, 42, 0.45);
}

.fleet__mode:active { transform: scale(0.96); }
.fleet__mode:disabled,
.fleet__mode:disabled:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.fleet__mode:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.fleet__arrows {
  display: inline-flex;
  gap: 6px;
}

.fleet__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 140ms var(--ease);
}

.fleet__arrow:hover {
  border-color: var(--line-strong);
  background: var(--bg-soft);
}

.fleet__arrow:active { transform: scale(0.94); }
.fleet__arrow:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.bring__text .section__head { margin-bottom: 28px; }

.bring__list { list-style: none; margin: 0; padding: 0; display: grid; }
.bring__list li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.bring__list li:last-child { border-bottom: 1px solid var(--line); }
.bring__list h3 { font-size: 20px; letter-spacing: -0.01em; }
.bring__list p { color: var(--text-2); font-size: 15px; }

@media (min-width: 1024px) {
  .bring__inner { grid-template-columns: 1.15fr 1fr; gap: 72px; }
}

/* ---------- Enquiry ---------- */

.enquiry { position: relative; isolation: isolate; overflow: hidden; }

.enquiry__bg { position: absolute; inset: 0; z-index: -1; }
.enquiry__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.enquiry__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 9, 13, 0.86) 30%, rgba(7, 9, 13, 0.92) 100%);
}

.enquiry__inner { display: grid; gap: 48px; align-items: start; }

.enquiry__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }

.field label,
.field legend {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.field legend { margin-bottom: 8px; }
.field__opt { color: var(--text-3); font-weight: 400; }

.field input,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(15, 19, 26, 0.9);
  color: var(--text);
  font: 400 16px/1.3 var(--font-body);
  color-scheme: dark;
  transition: border-color 0.2s var(--ease);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.field input:hover,
.field select:hover { border-color: rgba(255, 255, 255, 0.4); }
.field input:focus-visible,
.field select:focus-visible { outline: 2px solid var(--wa); outline-offset: 1px; border-color: transparent; }

.field [aria-invalid="true"] { border-color: var(--red-soft); }
.field__error { font-size: 13px; color: var(--red-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover span { border-color: rgba(255, 255, 255, 0.5); }
.chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--wa); outline-offset: 2px; }
.chips[aria-invalid="true"] .chip span { border-color: var(--red-soft); }

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background-color 0.2s var(--ease);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--wa); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--wa); outline-offset: 2px; }

.enquiry__submit { display: grid; gap: 14px; margin-top: 8px; }
.btn--block { width: 100%; min-height: 56px; font-size: 16px; }
.enquiry__alt { font-size: 14px; color: var(--text-2); text-align: center; }
.enquiry__alt a { color: var(--text); font-weight: 600; }

.enquiry__preview { display: none; }

.chat {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #0b141a;
}
.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 15px;
}
.chat__head img { width: 44px; height: auto; }
.chat__head small { display: block; font-weight: 400; font-size: 12px; color: #8696a0; }
.chat__bubble {
  margin-left: 28px;
  padding: 14px 16px;
  border-radius: 12px 12px 2px 12px;
  background: #005c4b;
  color: #e9edef;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.chat__note { margin-top: 12px; text-align: center; font-size: 12px; color: #8696a0; }

@media (max-width: 479px) {
  .enquiry__form { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .enquiry__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; }
  .enquiry__preview { display: block; position: sticky; top: calc(var(--header-h) + 32px); margin-top: 180px; }
}

/* ---------- Licensed (hidden until filled) ---------- */

.licensed__grid { display: grid; gap: 16px; margin: 0; }
.licensed__grid > div { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
.licensed__grid dt { font-size: 14px; color: var(--text-3); }
.licensed__grid dd { margin: 6px 0 0; font: 600 20px/1.3 var(--font-display); }
@media (min-width: 768px) { .licensed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */

.faq__inner { display: grid; gap: 8px; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { font: inherit; }

.faq__q {
  position: relative;
  width: 100%;
  padding: 24px 48px 24px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: 600 clamp(17px, 1.6vw, 20px)/1.35 var(--font-display);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--text-2);
  transition: transform 0.25s var(--ease);
}
.faq__q::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"]::after { transform: rotate(0deg); }
.faq__q:hover { color: var(--text); }

.faq__a { padding: 0 48px 24px 0; }
.faq__a p { color: var(--text-2); max-width: 680px; }

@media (min-width: 1024px) {
  .faq__inner { grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- How we work: medic-on-duty photo ---------- */

.process__top { display: grid; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.process__top .section__head { margin-bottom: 0; }

.process__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.process__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

@media (min-width: 1024px) {
  .process__top { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
}

/* ---------- Mobile refinements ---------- */

/* Pieces that only exist on small screens. */
.field__add-end,
.events__controls { display: none; }

.peek { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(37, 211, 102, 0.25); border-radius: var(--radius); background: #0b2a19; }
.peek[hidden] { display: none; }
.peek__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.peek__toggle {
  min-height: 44px;
  margin-block: -12px;
  padding: 0 0 0 12px;
  border: 0;
  background: none;
  color: var(--wa);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
}
.peek__text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.peek.is-open .peek__text { display: block; }

@media (min-width: 1024px) {
  .peek { display: none; }
}

@media (max-width: 1023px) {
  /* Menu: numbered links. */
  .nav { counter-reset: nav; }
  .nav a:not(.btn) {
    counter-increment: nav;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0;
  }
  .nav a:not(.btn)::before {
    content: counter(nav, decimal-leading-zero);
    font: 600 12px/1 var(--font-body);
    letter-spacing: 0.1em;
    color: var(--red-soft);
  }
  .nav a:not(.btn)::after {
    content: '';
    width: 8px;
    height: 8px;
    margin: 0 4px 0 auto;
    border-top: 2px solid var(--text-3);
    border-right: 2px solid var(--text-3);
    transform: rotate(45deg);
  }
  .nav a:not(.btn):nth-last-child(2) { border-bottom: 0; }
  .nav__cta { display: none; }
}

@media (max-width: 767px) {
  /* Tighter rhythm between sections on phones. */
  :root { --section-y: 32px; }
  .section__head { gap: 12px; margin-bottom: 24px; }

  .header-cta { display: none; }

  /* Hero: photo on top, copy and CTAs stacked below it. */
  .hero__inner { padding-top: calc(var(--header-h) + clamp(150px, 30svh, 270px)); gap: 28px; }
  .hero__content { gap: 14px; }
  .hero__eyebrow {
    justify-self: start;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(7, 9, 13, 0.7);
    letter-spacing: 0.08em;
  }
  .hero h1 { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.04; }
  .hero__ctas { gap: 10px; margin-top: 6px; }
  .hero__ctas .btn--wa { min-height: 52px; font-size: 16px; }
  .proof dt { font-size: 15px; }
  .proof dd { font-size: 12px; }
  .proof > div { padding-top: 14px; }

  /* Events: tiles snap to the left edge with arrows and dots underneath. */
  .events__scroller { scroll-padding-inline: var(--gutter); }
  .events__tile { scroll-snap-align: start; }
  .events__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
  }
  .events__controls[hidden] { display: none; }
  .events__progress { display: flex; align-items: center; gap: 14px; flex: 1; max-width: 200px; }
  .events__count {
    font: 500 14px/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
    white-space: nowrap;
  }
  .events__now { font-weight: 700; color: var(--text); }
  .events__track {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
  }
  .events__fill {
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: scaleX(0.1);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
  }
  .events__arrows { display: flex; gap: 8px; }
  .events__arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .events__arrow:disabled { color: var(--text-3); border-color: var(--line); cursor: default; }
  .events__arrow:not(:disabled):active { background: rgba(255, 255, 255, 0.1); }
  .events__arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .pills { margin-top: 24px; gap: 8px; }


  /* Crew: photo between the heading and the copy. */
  .crew__inner { gap: 18px; }
  .crew__text { display: contents; }
  .crew__text .eyebrow { order: 1; }
  .crew__text h2 { order: 2; }
  .crew__media { order: 3; margin-top: 6px; gap: 8px; }
  .crew__photo { border-radius: var(--radius); }
  .crew__strip { gap: 8px; }
  .crew__strip li { border-radius: 10px; }
  .crew__text > p:not(.eyebrow) { order: 4; }
  .ladder { order: 5; }

  /* Services: two compact cards per row. */
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; }
  .service { gap: 6px; padding: 16px 14px 18px; background: var(--bg-raised); }
  .service__icon {
    width: 40px;
    height: 40px;
    margin: 0 0 6px;
    padding: 9px;
    border-radius: 10px;
    background: var(--bg-raised-2);
  }
  .service h3 { font-size: 16px; line-height: 1.25; }
  .service p { font-size: 13px; line-height: 1.45; }
  .service__photo { border-radius: 10px; margin-bottom: 4px; }

  /* How we work: numbered timeline. */
  .process__photo img { aspect-ratio: 16 / 10; }
  .steps { counter-reset: step; padding-left: 18px; }
  .step { counter-increment: step; gap: 4px; padding: 6px 0 28px 34px; border-left-color: var(--line); }
  .step::before {
    content: counter(step);
    left: -18px;
    top: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid var(--line-strong);
    background: var(--bg-raised);
    box-shadow: none;
    font: 700 14px/1 var(--font-display);
  }
  .step:first-child::before { border-color: var(--red); background: var(--red); }
  .step:last-child { border-left-color: transparent; }
  .step__n { color: var(--text-3); }
  .step h3 { font-size: 18px; line-height: 1.25; }
  .step p { font-size: 14px; }

  /* What we bring: heading, 360° ambulance turntable, then cards. */
  .bring__inner { gap: 18px; }
  .bring__text { display: contents; }
  .bring__text .section__head { order: 1; margin-bottom: 0; }
  .fleet { order: 2; }
  .fleet__stage { padding: 12px; border-radius: var(--radius); gap: 10px; }
  .fleet__caption { font-size: 12px; }
  .fleet__hint { bottom: 8px; padding: 4px 10px; font-size: 10px; }
  .fleet__bar { gap: 8px; }
  .fleet__tabs { flex-basis: 100%; }
  .fleet__tab { min-height: 44px; padding: 5px 8px; font-size: 13px; }
  .fleet__actions { width: 100%; justify-content: space-between; }
  .fleet__mode { min-height: 44px; padding: 5px 14px; font-size: 12px; }
  .fleet__arrow { width: 44px; height: 44px; }
  .bring__list { order: 3; gap: 10px; }
  .bring__list li,
  .bring__list li:last-child {
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-raised);
  }
  .bring__list h3 { font-size: 17px; }
  .bring__list p { font-size: 14px; }

  /* FAQ: plus/minus sits in a round button. */
  .faq__item h3 { position: relative; }
  .faq__item h3::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    box-sizing: border-box;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    pointer-events: none;
    transition: background-color 0.2s var(--ease);
  }
  .faq__item:has(.faq__q[aria-expanded="true"]) h3::after { background: var(--text); border-color: var(--text); }
  .faq__q { z-index: 1; padding: 18px 52px 18px 0; }
  .faq__q::before,
  .faq__q::after { right: 8px; width: 16px; }
  .faq__q[aria-expanded="true"]::before,
  .faq__q[aria-expanded="true"]::after { background: var(--bg); }
  .faq__a { padding: 0 44px 20px 0; }
  .faq__a p { font-size: 15px; }

  /* Enquiry form: one column, bigger targets, end date on request. */
  .enquiry__form { grid-template-columns: minmax(0, 1fr); }
  .field label,
  .field legend { font-weight: 600; color: var(--text); }
  .field input,
  .field select { min-height: 52px; }
  .enquiry__form.is-end-collapsed .field--end { display: none; }
  .field__add-end {
    display: block;
    justify-self: start;
    min-height: 44px;
    margin-top: -14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wa);
    font: 600 14px/1.2 var(--font-body);
    cursor: pointer;
  }
  .field__add-end[hidden] { display: none; }
  .chip span { min-height: 44px; padding-inline: 18px; font-size: 15px; }
  .switch {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    line-height: 1.4;
    color: var(--text);
  }
  .switch__track { width: 48px; height: 28px; }
  .switch__track::after { width: 22px; height: 22px; }
  .switch input:checked + .switch__track::after { transform: translateX(20px); }
  .enquiry__alt a { display: inline-block; padding-block: 13px; }

  /* Footer: logo beside the blurb, phone in a card. */
  .site-footer { padding-top: 48px; }
  .site-footer__inner { gap: 28px; }
  .site-footer__brand { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; }
  .site-footer__brand img { width: 72px; }
  .site-footer__brand p { font-size: 14px; }
  .site-footer__brand p[lang] { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); }
  .site-footer__contact { padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
  .site-footer__phone { font-size: 26px; }
  .site-footer__phone,
  .site-footer__email,
  .site-footer__google { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__credit-name { padding-block: 12px; }
  /* One row on phones: the trading name already sits under the header logo. */
  .footer__copy-alias { display: none; }
}

/* ---------- Photo lightbox ---------- */

.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
/* Captions laid over a photo must not block the tap that opens it. */
figure:has(.is-zoomable) figcaption { pointer-events: none; }
html.has-lightbox { overflow: hidden; }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(7, 9, 13, var(--drag-fade, 1));
  color: var(--text);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(7, 9, 13, 0.8); }
.lightbox[open] { animation: lightbox-in 0.2s var(--ease); }
@keyframes lightbox-in { from { opacity: 0; } }

.lightbox__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 68px 16px 60px;
  /* All touch gestures (pinch, pan, swipe) are handled in JS. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.lightbox__img.is-animating { transition: transform 0.28s var(--ease); }
.lightbox__caption[hidden] { display: none; }
/* No caption: let the photo use the space. */
.lightbox.is-zoomed .lightbox__img { cursor: grab; border-radius: 0; }
.lightbox.is-zoomed .lightbox__img:active { cursor: grabbing; }

.lightbox__caption {
  max-width: 640px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
  transition: opacity 0.2s;
}
.lightbox__count {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 20px;
  margin: 0;
  font: 600 14px/1 var(--font-body);
  color: var(--text-3);
}
.lightbox__tools {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.7);
  color: var(--text);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.lightbox__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.lightbox__btn:disabled { opacity: 0.35; cursor: default; }
.lightbox__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lightbox__nav { position: absolute; z-index: 2; top: 50%; margin-top: -24px; }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }

.lightbox__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.75);
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.4s;
}
.lightbox.hint-done .lightbox__hint,
.lightbox.is-zoomed .lightbox__hint { opacity: 0; }

/* A photo with no set to page through: no arrows, no counter. */
.lightbox.is-single .lightbox__nav,
.lightbox.is-single .lightbox__count { display: none; }

/* Zoomed in: get the caption and arrows out of the way of the photo. */
.lightbox.is-zoomed .lightbox__caption,
.lightbox.is-zoomed .lightbox__nav { opacity: 0; pointer-events: none; }

/* Phones: swipe is the main way to browse; keep the arrows small at the bottom, out of the photo. */
@media (max-width: 767px) {
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__nav { top: auto; bottom: 10px; margin-top: 0; }
  .lightbox__prev { left: calc(50% - 52px); }
  .lightbox__next { right: calc(50% - 52px); }
  .lightbox__stage { padding: 64px 8px 72px; }
  .lightbox__hint { bottom: 66px; }
  .lightbox__count { top: 20px; left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
  .lightbox__img.is-animating { transition: none; }
}

/* ---------- Join the crew (/join/) ---------- */

.nav a[aria-current="page"]:not(.btn) { color: var(--text); }

/* Phones: the photo gets the top of the screen to itself, framed on the stage, the crowd and the medic in the
   vest, and the text starts below it instead of covering them. */
@media (max-width: 767px) {
  .join-hero .hero__media { bottom: auto; height: 62svh; }
  .join-hero .hero__media img { object-position: 50% 88%; }
  .join-hero .hero__media::after {
    background: linear-gradient(180deg, rgba(7, 9, 13, 0.55) 0%, rgba(7, 9, 13, 0) 18%, rgba(7, 9, 13, 0) 66%, var(--bg) 100%);
  }
  .join-hero .hero__inner { padding-top: 54svh; }
}
@media (min-width: 768px) {
  .join-hero .hero__media img { object-position: 50% 45%; }
}

.job { background: var(--bg-raised); }
.job__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
.job__facts li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.job__facts h3 { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.job__facts p { max-width: 52ch; color: var(--text-2); font-size: 16px; }
@media (min-width: 768px) {
  .job__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
}
@media (min-width: 1280px) {
  .job__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .job__facts li { padding: 28px 0 32px; border-bottom: 0; }
}

.apply__inner { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .apply__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 120px); }
  .apply__aside { position: sticky; top: calc(var(--header-h) + 32px); }
}

.apply__aside .section__head { margin-bottom: 36px; }
.apply__block { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.apply__block h3 { margin-bottom: 14px; font: 600 13px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.apply__list,
.apply__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--text-2); font-size: 16px; }
.apply__list li { position: relative; padding-left: 26px; }
.apply__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 10px;
  height: 6px;
  border: solid var(--red-soft);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.apply__steps { counter-reset: step; }
.apply__steps li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; }
.apply__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 600 13px/1 var(--font-body);
  color: var(--text);
}
.apply__list strong,
.apply__steps strong { color: var(--text); font-weight: 600; }

.apply__form { display: grid; gap: 20px; }
.apply__form[hidden] { display: none; }
.apply__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.apply__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  float: left; /* lets the legend sit inside the grid like a normal row */
  width: 100%;
  grid-column: 1 / -1;
  margin-bottom: 4px;
  padding: 0;
  font: 700 clamp(19px, 1.8vw, 22px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.apply__legend span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--red);
  font: 700 14px/1 var(--font-body);
}
@media (max-width: 599px) {
  .apply__group { grid-template-columns: minmax(0, 1fr); }
}

.field__label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.field textarea {
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(7, 9, 13, 0.6);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  resize: vertical;
  transition: border-color 0.2s var(--ease);
}
.field textarea:hover { border-color: rgba(255, 255, 255, 0.4); }
.field textarea:focus-visible { outline: 2px solid var(--wa); outline-offset: 1px; border-color: transparent; }
.field input::placeholder,
.field textarea::placeholder,
.cert input::placeholder { color: var(--text-3); }
.apply__group .field input,
.apply__group .field select { background-color: rgba(7, 9, 13, 0.6); }

/* Checkbox rows: a custom box that stays a real, focusable checkbox. */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
  cursor: pointer;
}
.check input,
.field .check input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(7, 9, 13, 0.6) center / 14px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.check input:hover { border-color: rgba(255, 255, 255, 0.5); }
.check input:checked {
  border-color: var(--red);
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 2px solid var(--wa); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--red-soft); }

.certs { display: grid; gap: 8px; }
.certs[aria-invalid="true"] .cert { border-color: rgba(255, 90, 102, 0.6); }
.cert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cert.is-on { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); }
.cert .check { align-items: center; color: var(--text); font-weight: 500; }
.cert__expiry {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
}
.field .cert input[type="date"],
.field .cert__name {
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(7, 9, 13, 0.6);
  color: var(--text);
  font: 400 15px/1.2 var(--font-body);
  color-scheme: dark;
}
.cert input:disabled { opacity: 0.35; cursor: not-allowed; }
.field .cert input[type="date"]:focus-visible,
.field .cert__name:focus-visible { outline: 2px solid var(--wa); outline-offset: 1px; border-color: transparent; }
.cert--other { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 599px) {
  .cert,
  .cert--other { grid-template-columns: minmax(0, 1fr); }
  .cert__expiry { justify-content: space-between; }
  .field .cert__expiry input { flex: 1; max-width: 200px; }
  .field .cert__name { width: 100%; }
  .cert:not(.is-on) .cert__expiry,
  .cert:not(.is-on) .cert__name { display: none; }
}


.apply__tip {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.apply__tip strong { color: var(--text); }

.apply__submit { display: grid; gap: 14px; margin-top: 4px; }
.apply__submit .btn--block { margin-top: 6px; }
.apply__submit .btn:disabled { opacity: 0.7; cursor: progress; }
.apply__status { min-height: 1.4em; font-size: 14px; color: var(--red-soft); text-align: center; }
.apply__status:empty { display: none; }

.apply__done,
.apply__fallback {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.apply__done[hidden],
.apply__fallback[hidden] { display: none; }
.apply__done svg { color: var(--wa); }
.apply__done h3,
.apply__fallback h3 { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.apply__done p,
.apply__fallback p { color: var(--text-2); }
.apply__fallback { margin-top: 20px; justify-items: stretch; border-color: rgba(37, 211, 102, 0.45); }
.apply__done:focus,
.apply__fallback:focus { outline: none; }

.apply__alt { margin-top: 20px; font-size: 14px; color: var(--text-2); text-align: center; }
.apply__alt a { color: var(--text); font-weight: 600; }

/* Home page: the way in for future crew. */
.crew__join { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.crew__join a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.crew__join a:hover { color: var(--red-soft); }

.nav a { white-space: nowrap; }
/* Mid-size desktops: "Google ↗" keeps the menu on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { gap: 22px; }
  .nav__ext-lead { display: none; }
}

/* The external link carries its own ↗; no menu chevron as well. */
.nav a.nav__ext:not(.btn)::after { display: none; }

/* Text for screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   Night Shift redesign (Nov 2026). Overrides the section styles above.
   ===================================================================== */


.btn--light { background: #fff; color: var(--bg); }
.btn--light:hover { background: rgba(255, 255, 255, 0.86); }

/* ---------- Services: numbered rows (desktop), swipe cards (phone) ---------- */
.services__grid { counter-reset: svc; }
.service { counter-increment: svc; }
.service::before {
  content: counter(svc, decimal-leading-zero);
  font: 600 14px/1 var(--font-body);
  color: var(--red-soft);
}
.service .service__icon { display: none; }

@media (min-width: 768px) {
  .services__grid {
    display: block;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .service,
  .service--feature {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.25fr) clamp(140px, 14vw, 200px);
    grid-template-rows: auto;
    grid-template-areas: "num title body photo";
    align-items: center;
    column-gap: clamp(16px, 2.4vw, 32px);
    padding: 22px 0;
    border-top: 1px solid var(--line);
    background: none;
    border-radius: 0;
  }
  .service:hover { background: none; }
  .service::before { grid-area: num; }
  .service h3,
  .service.service--feature h3 { grid-area: title; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }
  .service p,
  .service.service--feature p { grid-area: body; max-width: none; font-size: 16px; }
  .service .service__photo,
  .service--feature .service__photo {
    grid-area: photo;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0;
    border-radius: 12px;
  }
}

@media (max-width: 767px) {
  .services__grid {
    display: flex;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .service,
  .service--feature {
    flex: none;
    width: 78vw;
    max-width: 300px;
    scroll-snap-align: start;
    gap: 10px;
    padding: 14px 14px 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg-raised);
    grid-template-columns: minmax(0, 1fr);
  }
  .service::before { order: 1; font-size: 12px; }
  .service .service__photo,
  .service--feature .service__photo { order: 0; aspect-ratio: 4 / 3; margin: 0; }
  .service h3 { order: 2; font-size: 19px; }
  .service p { order: 3; font-size: 14px; }
  .services__hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-3);
  }
}
.services__hint { display: none; }
@media (max-width: 767px) { .services__hint { display: flex; } }

/* ---------- How we work: step cards (desktop), tabs (phone) ---------- */
@media (min-width: 1024px) {
  .steps { gap: 16px; }
  .step {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg);
  }
  .step::before { display: none; }
  .step__n { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.08em; color: var(--text-3); }
}
.step__dot {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0;
  color: #fff;
}
.steps__tabs { display: none; }
@media (max-width: 767px) {
  .steps.is-tabbed { padding-left: 0; }
  .steps.is-tabbed .step { display: none; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
  .steps.is-tabbed .step.is-current { display: grid; }
  .steps.is-tabbed .step::before { display: none; }
  .steps__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
  }
  .steps__tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: 600 13px/1 var(--font-body);
    color: var(--text-2);
    cursor: pointer;
  }
  .steps__tabs button[aria-selected="true"] { background: #fff; color: var(--bg); }
  .steps__tabs button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
}

/* ---------- Join the crew band ---------- */
.join-band { padding-bottom: 0; }
.join-band__card {
  display: grid;
  overflow: hidden;
  border-radius: 28px;
  background: var(--red);
}
.join-band__text { display: grid; align-content: center; justify-items: start; gap: 16px; padding: clamp(28px, 5vw, 64px); }
.join-band__text .eyebrow { color: rgba(255, 255, 255, 0.85); }
.join-band__text h2 { font-size: clamp(30px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.03em; }
.join-band__text p:not(.eyebrow) { max-width: 520px; font-size: clamp(15px, 1.3vw, 18px); color: rgba(255, 255, 255, 0.9); }
.join-band__text .btn { margin-top: 6px; }
.join-band__photo { width: 100%; height: 100%; min-height: 240px; max-height: 520px; object-fit: cover; object-position: 60% 62%; }
@media (min-width: 768px) {
  .join-band__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
@media (max-width: 767px) {
  .join-band__photo { order: -1; height: 220px; min-height: 0; }
  .join-band__text .btn { width: 100%; }
}

/* ---------- FAQ ---------- */
.faq .section__head a { color: var(--text); font-weight: 600; }

/* ---------- Phone action bar: call or WhatsApp from anywhere ---------- */
.action-bar { display: none; }
@media (max-width: 767px) {
  .action-bar {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7, 9, 13, 0), rgba(7, 9, 13, 0.96) 32%);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .action-bar .btn { min-height: 50px; }
  .action-bar .btn--ghost { background: var(--bg); }
  /* Out of the way at the top of the page, on the form and in the footer. */
  .action-bar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .site-footer { padding-bottom: 96px; }
}

/* ---------- Job page: phone form in steps ---------- */
.apply__progress,
.apply__wizard-nav { display: none; }
.apply__form.is-wizard .apply__progress { display: grid; gap: 8px; scroll-margin-top: calc(var(--header-h) + 16px); }
.apply__progress-text { margin: 0; font-size: 13px; color: var(--text-2); }
.apply__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.apply__bars span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); transition: background-color 0.3s var(--ease); }
.apply__bars span.is-done { background: var(--red); }
.apply__form.is-wizard .apply__group:not(.is-current) { display: none; }
.apply__form.is-wizard .apply__wizard-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.apply__form.is-wizard .apply__wizard-nav [hidden] { display: none; }
.apply__form.is-wizard .apply__wizard-nav [data-go="1"]:only-of-type,
.apply__form.is-wizard .apply__wizard-nav [data-go="-1"][hidden] + [data-go="1"] { grid-column: 1 / -1; }
.apply__form.is-wizard:not(.is-last) .apply__submit { display: none; }
.apply__wizard-nav .btn { min-height: 52px; }

/* ---------- Stats row: Google reviews ---------- */
.proof__google dt { display: flex; align-items: center; gap: 8px; }
.proof__google dd a { color: var(--text-2); text-underline-offset: 3px; }
.proof__google dd a:hover { color: var(--text); }
@media (max-width: 1023px) {
  .proof > .proof__google { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .proof { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Enquiry: Google rating under the WhatsApp button. */
.enquiry__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
}
.enquiry__rating a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Reviews (Google reviews marquee) ---------- */

.reviews { overflow: hidden; }
.reviews__head { display: grid; gap: 28px; margin-bottom: clamp(32px, 4vw, 56px); }
.reviews__head .section__head { margin-bottom: 0; }
.reviews__meta { display: grid; gap: 18px; justify-items: start; }
.reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.reviews__num { font: 700 clamp(32px, 3.4vw, 44px)/1 var(--font-display); letter-spacing: -0.02em; }
.reviews__stars { color: #fbbc04; font-size: 18px; letter-spacing: 2px; }
.reviews__on { color: var(--text-2); font-size: 14px; }
.reviews__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 1024px) {
  .reviews__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .reviews__meta { justify-items: end; }
}

.reviews__band { display: grid; gap: 14px; }

/* Without the marquee (no JavaScript, or reduced motion): each row is a swipeable list. */
.reviews__row {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.reviews__row::-webkit-scrollbar { display: none; }
.reviews__track {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review {
  --w: 460px;
  flex: 0 0 auto;
  width: min(var(--w), 84vw);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  scroll-snap-align: start;
}
.review--long { --w: 600px; }
.review--short { --w: 320px; }
.review__stars { color: #fbbc04; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.review__star-off { color: var(--line-strong); }
.review__text { margin: 0; }
.review__text p { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; }
.review--short .review__text p { font: 600 clamp(19px, 1.7vw, 22px)/1.3 var(--font-display); }
.review__translation { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.review__by { margin: auto 0 0; padding-top: 4px; font-size: 14px; color: var(--text-2); }
.review__by strong { color: var(--text); font-weight: 600; }

/* The marquee: app.js repeats each row's cards (copies hidden from screen readers) and sets --reviews-dur. */
.reviews__band.is-marquee .reviews__row {
  overflow: hidden;
  padding-inline: 0;
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews__band.is-marquee .reviews__track {
  padding-right: 14px; /* one gap, so -50% lands exactly on the start of the copy */
  animation: reviews-left var(--reviews-dur, 60s) linear infinite;
}
.reviews__band.is-marquee .reviews__row--reverse .reviews__track { animation-name: reviews-right; }
.reviews__band.is-paused .reviews__track,
.reviews__band.is-marquee .reviews__row:hover .reviews__track,
.reviews__band.is-marquee .reviews__row:focus-within .reviews__track { animation-play-state: paused; }

@keyframes reviews-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reviews-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.reviews__controls { display: flex; justify-content: flex-end; }
.reviews__pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}
.reviews__pause:hover { border-color: var(--text); }
.reviews__pause[hidden] { display: none; }
.reviews__pause .reviews__play-icon,
.reviews__pause[aria-pressed="true"] .reviews__pause-icon { display: none; }
.reviews__pause[aria-pressed="true"] .reviews__play-icon { display: block; }

@media (max-width: 767px) {
  .reviews__head { gap: 20px; }
  .reviews__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .reviews__actions .btn { padding-inline: 12px; font-size: 14px; }
  .reviews__band { gap: 10px; }
  .reviews__track { gap: 10px; }
  .reviews__band.is-marquee .reviews__track { padding-right: 10px; }
  .review { --w: 300px; width: min(var(--w), 80vw); padding: 18px; gap: 10px; }
  .review--short { --w: 230px; }
  .review__text p { font-size: 14px; line-height: 1.45; }
  .review--short .review__text p { font-size: 18px; }
  .review__translation { font-size: 12px; }
}

/* ---------- Also from Safety Venture: courses and equipment ---------- */

.extras { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.extras__title { margin: 0; }
.extras__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.extra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.extra__icon { color: var(--red-soft); margin-top: 2px; }
.extra__body h4 { margin: 0 0 6px; font: 600 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.extra__body p { margin: 0; font-size: 15px; color: var(--text-2); }
.extra__cta { grid-column: 1 / -1; justify-self: start; }

.extras__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Phones: the two cards share one row, so each card stacks icon, text and a full-width button. */
@media (max-width: 767px) {
  .extras__list { gap: 10px; }
  .extra { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px; }
  .extra__body h4 { font-size: 16px; }
  .extra__body p { font-size: 13.5px; }
  .extra__cta { justify-self: stretch; min-height: 44px; padding: 10px 6px; font-size: 13px; }
}
@media (min-width: 1024px) {
  .extra { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .extra__cta { grid-column: auto; }
}


/* ---------- Page motion (app.js initMotion; only with .js-motion, which reduced motion never gets) ---------- */

/* Section headings: label and copy fade up, heading words rise out of their own line. Cards follow in a stagger. */
.js-motion .rv-head > :not(h2) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-motion .rv-head > p:not(.eyebrow) { transition-delay: 0.35s; }
.js-motion .rv-head.is-in > :not(h2) { opacity: 1; transform: none; }
.rv-head h2 .rw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.rv-head h2 .rw > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.08s + var(--i) * 0.045s);
}
.rv-head.is-in h2 .rw > span { transform: none; }
.js-motion .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease calc(var(--rv-i, 0) * 0.09s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--rv-i, 0) * 0.09s), border-color 0.4s ease;
}
.js-motion .rv.is-in { opacity: 1; transform: none; }
.js-motion .rv img { scale: 1.08; transition: scale 1.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--rv-i, 0) * 0.09s + 0.1s); }
.js-motion .rv.is-in img { scale: 1; }

/* Scroll progress under the header. */
.site-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* Progress rings: the menu button (phones and tablets) and back to top (wide screens). */
.ring { position: absolute; inset: -1px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ring circle { fill: none; stroke-width: 2; }
.ring__track { stroke: transparent; }
.ring__fill { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--page-progress, 0) * 100); }
.menu-toggle { position: relative; }
.menu-toggle[aria-expanded="true"] .ring { opacity: 0; }

.to-top { display: none; }
@media (min-width: 1024px) {
  .to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(15, 19, 26, 0.9);
    color: var(--text);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
  }
  .to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { border-color: var(--text); }
  .to-top:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
  .to-top svg:not(.ring) { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .to-top:hover svg:not(.ring) { transform: translateY(-2px); }

  /* The menu underlines the section you're in. */
  .nav a:not(.btn):not(.nav__ext) { position: relative; }
  .nav a:not(.btn):not(.nav__ext)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav a.is-active:not(.btn) { color: var(--text); }
  .nav a.is-active:not(.btn)::after { transform: scaleX(1); }
}

/* How we work: each step fills with red as the line reaches it. */
.step__fill { display: none; }
.js-motion .step__fill {
  position: absolute;
  display: block;
  background: var(--red);
  pointer-events: none;
  /* Tablet: the steps hang off a vertical line on the left. */
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
}
.step__dot { transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js-motion .step.is-lit .step__dot { box-shadow: 0 0 0 6px rgba(215, 25, 42, 0.22); }
@media (min-width: 1024px) {
  .js-motion .step__fill { left: 24px; right: 24px; top: -1px; bottom: auto; width: auto; height: 2px; transform: scaleX(var(--fill, 0)); transform-origin: left; }
  .js-motion .step.is-lit { border-color: var(--line-strong); }
}
@media (max-width: 767px) {
  .js-motion .steps.is-tabbed .step__fill { display: none; }
}

/* Buttons: arrows nudge forward on hover; fields ease their focus ring in; the send button confirms. */
.btn svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover svg[viewBox="0 0 24 24"]:not([fill="currentColor"]) { transform: translateX(3px); }
.btn { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease; }
.btn:active { transform: scale(0.98); }
.field input, .field select { transition: border-color 0.3s ease, outline-offset 0.25s ease; }
.field input:focus-visible, .field select:focus-visible { outline-offset: 1px; }
.field input:not(:focus-visible), .field select:not(:focus-visible) { outline-offset: 6px; }
@keyframes sent-pop { 0% { transform: scale(1); } 40% { transform: scale(0.96); } 100% { transform: scale(1); } }

/* Phone action bar: a softer slide. */
@media (max-width: 767px) {
  .action-bar { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .field input, .field select { transition: none; }
  .btn.is-sent { animation: none; }
}


/* ---------- More motion: labels, photos, steps, FAQ, buttons, events light, rating, footer ---------- */

/* A short red line leads every section label; it draws in as the heading reveals. */
.section__head > .eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform-origin: left;
}
.js-motion .rv-head > .eyebrow::before { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.js-motion .rv-head.is-in > .eyebrow::before { transform: scaleX(1); }

/* Photos are revealed bottom to top (replaces the zoom settle). */
/* A mask (not clip-path) so the photo can still be tapped while it reveals. */
.js-motion .rv img {
  scale: 1.06;
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% 0% no-repeat;
  mask: linear-gradient(#000, #000) bottom / 100% 0% no-repeat;
  transition: -webkit-mask-size 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--rv-i, 0) * 0.09s + 0.1s), mask-size 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--rv-i, 0) * 0.09s + 0.1s), scale 1.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--rv-i, 0) * 0.09s + 0.1s);
}
.js-motion .rv.is-in img { scale: 1; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* How we work: steps the line hasn't reached yet wait, dimmed. */
@media (min-width: 768px) {
  .js-motion .step > :not(.step__fill) { transition: opacity 0.5s ease; }
  .js-motion .step:not(.is-lit) > :not(.step__fill) { opacity: 0.4; }
}

/* FAQ: the + turns into a red × when open. */
.faq__q::before, .faq__q::after { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }
.faq__q[aria-expanded="true"]::before { transform: rotate(45deg); background: var(--red-soft); }
.faq__q[aria-expanded="true"]::after { transform: rotate(-45deg); background: var(--red-soft); }
.faq__q[aria-expanded="true"] { color: var(--text); }
@media (max-width: 767px) {
  .faq__item h3::after { transition: background-color 0.3s ease, border-color 0.3s ease; }
  .faq__item:has(.faq__q[aria-expanded="true"]) h3::after { background: var(--red); border-color: var(--red); }
  .faq__q[aria-expanded="true"]::before,
  .faq__q[aria-expanded="true"]::after { background: #fff; }
}

/* Buttons fill with colour on hover (mouse only). */
@media (hover: hover) {
  .btn--wa, .btn--red, .btn--ghost { position: relative; overflow: hidden; isolation: isolate; }
  .btn--wa::before, .btn--red::before, .btn--ghost::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .btn--wa::before { background: var(--wa-hover); }
  .btn--red::before { background: var(--red-hover); }
  .btn--ghost::before { background: var(--text); }
  .btn--wa:hover::before, .btn--red:hover::before, .btn--ghost:hover::before { transform: none; }
  .btn--wa:hover { background: var(--wa); }
  .btn--red:hover { background: var(--red); }
  .btn--ghost:hover { color: var(--bg); }
  /* Text links with an arrow: the underline slides away and the arrow moves on. */
  .crew__join a { text-decoration: none; background: linear-gradient(currentColor, currentColor) right bottom / 100% 1px no-repeat; transition: background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s; }
  .crew__join a:hover { background-size: 0 1px; }
  /* Footer links: an underline slides in. */
  .footer-menu a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s; }
  .footer-menu a:hover { background-size: 100% 1px; }
}

/* Send on WhatsApp: a spinner, then a tick and "Opening WhatsApp…". */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn.is-sending, .btn.is-sent { position: relative; color: transparent; }
.btn.is-sending > *, .btn.is-sent > * { visibility: hidden; }
.btn.is-sending::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border: 2.4px solid var(--wa-ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.btn.is-sent::after {
  content: '\2713  Opening WhatsApp\2026';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre;
  color: var(--wa-ink);
  animation: sent-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Events (mouse only): a soft light follows the pointer; the photo you're on brightens, the rest dim a touch. */
.events__light { display: none; }
@media (hover: hover) and (pointer: fine) {
  .events__light {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(280px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.26), rgba(255, 90, 102, 0.08) 45%, transparent 70%);
    mix-blend-mode: soft-light;
    transition: opacity 0.45s ease;
  }
  .events__tile:hover .events__light { opacity: 1; }
  .events__tile img { transition: transform 0.8s var(--ease), filter 0.5s ease; }
  .events__tile:hover img { filter: brightness(1.08); }
  .events__scroller:hover .events__tile:not(:hover) img { filter: brightness(0.72); }
}

/* Hero rating: five stars (the fifth 80% filled for 4.8) pop in one by one. The score text itself never changes. */
.proof__stars { display: inline-flex; gap: 2px; }
.proof__stars svg { width: 13px; height: 13px; fill: #fbbc04; }
.proof__google dt > span:last-child { white-space: nowrap; }
.proof__score { font-variant-numeric: tabular-nums; }
@keyframes star-pop { 0% { transform: scale(0.3) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.js-hero .proof__stars svg { animation: star-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js-hero .proof__stars svg:nth-child(1) { animation-delay: 1.1s; }
.js-hero .proof__stars svg:nth-child(2) { animation-delay: 1.22s; }
.js-hero .proof__stars svg:nth-child(3) { animation-delay: 1.34s; }
.js-hero .proof__stars svg:nth-child(4) { animation-delay: 1.46s; }
.js-hero .proof__stars svg:nth-child(5) { animation-delay: 1.58s; }

@media (prefers-reduced-motion: reduce) {
  .btn--wa::before, .btn--red::before, .btn--ghost::before { transition: none; }
  .btn.is-sending::after { animation-duration: 2s; }
}


/* ---------- Background glow, Services cards, FAQ numbers, send button circle, floating labels ---------- */

/* A faint red glow drifts slowly behind How we work and Enquire (app.js adds the spans; motion only). */
.has-glow { position: relative; isolation: isolate; overflow: clip; }
.glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.glow--a { width: 620px; height: 620px; left: -160px; top: -180px; background: radial-gradient(closest-side, rgba(215, 25, 42, 0.26), transparent); animation: glow-a 24s ease-in-out infinite; }
.glow--b { width: 520px; height: 520px; right: -120px; bottom: -220px; background: radial-gradient(closest-side, rgba(215, 25, 42, 0.18), transparent); animation: glow-b 30s ease-in-out infinite; }
@keyframes glow-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(160px, 60px) scale(1.15); } }
@keyframes glow-b { 0%, 100% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-200px, -40px) scale(0.95); } }
@media (max-width: 767px) {
  .glow--a { width: 380px; height: 380px; left: -140px; }
  .glow--b { width: 320px; height: 320px; }
}

/* Services: photo cards from tablet up (2 across, 4 across on desktop; the command centre card spans two),
   matching the swipe cards on phones. */
@media (min-width: 768px) {
  .services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    border: 0;
    background: none;
  }
  .service,
  .service--feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg-raised);
    overflow: hidden;
    text-align: left;
    align-items: stretch;
    transition: border-color 0.4s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .service--feature { grid-column: span 2; }
  .service:hover { background: var(--bg-raised); border-color: var(--line-strong); translate: 0 -4px; }
  .service .service__photo,
  .service--feature .service__photo {
    order: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0 0 8px;
    border-radius: 0;
  }
  .service--feature .service__photo { aspect-ratio: auto; height: 0; flex: 1 0 auto; min-height: 220px; }
  .service::before { order: 1; padding: 0 24px; font-size: 13px; }
  .service h3,
  .service.service--feature h3 { order: 2; padding: 0 24px; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; }
  .service p,
  .service.service--feature p { order: 3; padding: 0 24px; font-size: 15px; max-width: none; }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .service:hover { translate: none; }
}

/* FAQ: numbered questions; the number turns red when its answer is open. */
.faq__list { counter-reset: faq; }
.faq__item { counter-increment: faq; }
.faq__item h3 { position: relative; }
.faq__item h3::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  color: var(--text-3);
  pointer-events: none;
  transition: color 0.3s ease;
}
.faq__item:has(.faq__q[aria-expanded="true"]) h3::before { color: var(--red-soft); }
.faq__q { padding-left: 40px; }
.faq__a { padding-left: 40px; }

/* Send on WhatsApp: the button shrinks into a spinning circle, then opens back out with a tick. */
#enquiry-form [type="submit"] {
  max-width: 100%;
  margin-inline: auto;
  transition: max-width 0.5s cubic-bezier(0.65, 0, 0.35, 1), padding 0.5s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}
#enquiry-form [type="submit"].is-sending { max-width: 56px; padding-inline: 0; }

/* Floating labels (enquiry form; app.js adds .is-floating, so without JS the labels stay above the fields). */
.enquiry__form.is-floating .field:not(fieldset) { position: relative; gap: 6px; }
.enquiry__form.is-floating .field:not(fieldset) > label {
  position: absolute;
  z-index: 1;
  left: 15px;
  right: 40px;
  top: 0;
  height: 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-2);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.enquiry__form.is-floating .field__opt { margin-left: 4px; }
.enquiry__form.is-floating .field:not(fieldset) input,
.enquiry__form.is-floating .field:not(fieldset) select { min-height: 60px; padding-top: 24px; padding-bottom: 6px; }
.enquiry__form.is-floating .field:focus-within > label,
.enquiry__form.is-floating .field.is-filled > label,
.enquiry__form.is-floating .field.is-static > label { transform: translateY(-13px) scale(0.75); }
.enquiry__form.is-floating .field:focus-within > label { color: var(--wa); }
.enquiry__form.is-floating .field:has([aria-invalid="true"]) > label { color: var(--red-soft); }
@media (prefers-reduced-motion: reduce) {
  .enquiry__form.is-floating .field:not(fieldset) > label, #enquiry-form [type="submit"] { transition: none; }
}