/* =========================================================
   Exodus Sports — static rebuild
   Section 01: Hero
   ========================================================= */

/* ---------- Display font -------------------------------------------------
   "Hussar Woodtype Ultra" is not a Google Font (see notes.md > Pending).
   Drop the licensed file at fonts/hussar-woodtype-ultra.woff2 and it takes
   over automatically; until then the stack falls back to Montserrat 800,
   which is the closest free match to the reference captures.
   The 100-900 weight range stops the browser faux-bolding the single-weight
   Hussar file once it is present.
------------------------------------------------------------------------- */
@font-face {
  font-family: "Hussar Woodtype Ultra";
  src: url("../fonts/hussar-woodtype-ultra.woff2") format("woff2"),
       url("../fonts/hussar-woodtype-ultra.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Brand */
  --purple: rgb(125, 11, 244);
  --purple-deep: #4a0b96;
  --purple-muted: rgba(122, 116, 166, 1);
  --white: #ffffff;
  --gray-200: rgb(214, 214, 214);
  --gray-300: rgb(204, 204, 204);
  --gray-400: rgb(179, 179, 179);
  --gray-500: rgb(153, 153, 153);
  --bg: #0d0d0d;          /* exact base sampled off the reference captures */

  /* Type */
  --font-display: "Hussar Woodtype Ultra", "Montserrat", sans-serif;
  --font-secondary: "Montserrat", sans-serif;
  --font-supporting: "Manrope", sans-serif;
  --font-numeric: "Inter", sans-serif;
  --font-footer: "Source Sans 3", sans-serif;

  /* Layout */
  --container: 980px;
  --container-wide: 1280px;
  --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-secondary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: 12px;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
  will-change: transform;
}

.btn--outline {
  padding: 11px 18px;
  font-size: 16px;
  color: var(--white);
  border: 1.5px solid var(--purple);
  background: transparent;
}
.btn--outline:hover { background: var(--purple); }

.btn--solid {
  padding: 16px 26px;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--purple);
  border: 1.5px solid var(--purple);
}
.btn--solid:hover { transform: translateY(-2px); }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  padding: 26px var(--gutter);
}

.nav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The source PNG carries ~24% transparent padding on each side, so the box
   is set wider than the mark reads on screen. */
.nav__logo img { width: 56px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.nav__links a {
  position: relative;
  color: var(--white);
  transition: color .25s ease;
}
.nav__links a:hover { color: var(--purple); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px var(--gutter) 90px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Hero glow ----------------------------------------------------
   Colour-matched to hero-ss1/ss2 rather than eyeballed. The captures show a
   deep, desaturated plum (peak rgb(50,12,90) — NOT the bright brand purple)
   over a flat rgb(13,13,13) base, with a hard falloff to pure black at the
   sides and by ~72% of the hero's height.

   Two layers, because the horizontal and vertical falloffs have different
   shapes and a single radial-gradient can't express both:
     1. a vertical ramp carrying the plum -> black decay
     2. a black side-mask on top, pinching the glow into a centre column
   Compositing black over black is a no-op, so layer 2 only ever affects the
   lit band. Stop positions come straight off the sampled pixel profiles.
------------------------------------------------------------------------- */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* 2. side mask — corners fall to the base black.
       The capture's lit band runs 30%->87%, i.e. centred at ~59%, not 50%
       (both desktop captures and the mobile one agree, by differing amounts,
       so it reads as a Framer rendering artefact rather than intent). This
       keeps the reference's 57%-wide lit band but centres it, and compresses
       the measured falloff curve into the narrower margin so both sides reach
       near-black faster than the original does. */
    linear-gradient(to right,
      rgba(13, 13, 13, .99) 0%,
      rgba(13, 13, 13, .95) 4.5%,
      rgba(13, 13, 13, .83) 9%,
      rgba(13, 13, 13, .64) 13%,
      rgba(13, 13, 13, .39) 17.5%,
      rgba(13, 13, 13, .18) 22%,
      rgba(13, 13, 13, .065) 26%,
      rgba(13, 13, 13, 0) 30%,
      rgba(13, 13, 13, 0) 70%,
      rgba(13, 13, 13, .065) 74%,
      rgba(13, 13, 13, .18) 78%,
      rgba(13, 13, 13, .39) 82.5%,
      rgba(13, 13, 13, .64) 87%,
      rgba(13, 13, 13, .83) 91%,
      rgba(13, 13, 13, .95) 95.5%,
      rgba(13, 13, 13, .99) 100%),
    /* 1. vertical ramp — hotspot sits just below the nav, at ~15% */
    linear-gradient(to bottom,
      rgb(41, 13, 70)  0%,
      rgb(45, 12, 79)  5%,
      rgb(49, 12, 87)  10%,
      rgb(50, 12, 90)  15.5%,
      rgb(46, 12, 80)  25.5%,
      rgb(40, 13, 69)  31%,
      rgb(34, 13, 56)  36%,
      rgb(28, 13, 43)  41%,
      rgb(23, 13, 33)  46%,
      rgb(19, 13, 25)  51%,
      rgb(16, 13, 20)  56.5%,
      rgb(14, 13, 16)  61.5%,
      rgb(13, 13, 13)  72%,
      rgb(13, 13, 13)  100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

/* ---------- Centered logo lockup ---------- */
.hero__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 46px;
}
.hero__logo-x { width: clamp(76px, 8vw, 100px); }
.hero__logo-word {
  width: clamp(102px, 10.6vw, 133px);
  margin-top: 7px;
}

/* ---------- Headline ----------
   Sized so line 2 fills --container, matching the block width in the capture.
   Montserrat ExtraBold sets ~15% wider than Hussar Woodtype Ultra, so once the
   real face is installed this can go up to ~4.1vw (the reference's true size)
   and still fit the same measure. */
.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.15rem, 4.8vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Subheadline ---------- */
.hero__sub {
  max-width: 780px;
  margin: 38px auto 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.52;
  color: var(--white);
}

.hero__cta { margin-top: 42px; }

/* =========================================================
   Floating objects
   ========================================================= */
.hero__objects {
  position: absolute;
  inset: 0;
  z-index: 1;          /* above the glow, below nothing interactive */
  pointer-events: none;
}

/* .obj places the object; the inner <img> owns the drift animation so the
   positioning transform and the animation transform never fight. */
.obj {
  position: absolute;
  transform: translate(-50%, -50%);
}
.obj img {
  width: 100%;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
}

/* Positions are percentages of the hero box, matching the desktop capture:
   each object overlaps the type rather than sitting beside it. */
.obj--shuttle    { left: 20.5%; top: 46%; width: clamp(84px, 6.8vw, 120px); }
.obj--rugby      { left: 73%;   top: 42%; width: clamp(104px, 8.4vw, 140px); }
.obj--basketball { left: 28%;   top: 84%; width: clamp(100px, 8.2vw, 140px); }
.obj--racket     { left: 68%;   top: 85%; width: clamp(180px, 15.5vw, 250px); }

/* Each object gets its own keyframes, duration and delay so they never sync */
.obj--shuttle img    { animation: drift-shuttle 13s ease-in-out -2s infinite alternate; }
.obj--rugby img      { animation: drift-rugby 17s ease-in-out -6s infinite alternate; }
.obj--basketball img { animation: drift-basketball 15s ease-in-out -9s infinite alternate; }
.obj--racket img     { animation: drift-racket 21s ease-in-out -4s infinite alternate; }

@keyframes drift-shuttle {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  50%  { transform: translate(10px, -20px) rotate(4deg); }
  100% { transform: translate(-8px, 16px) rotate(-9deg); }
}

@keyframes drift-rugby {
  0%   { transform: translate(0, 0) rotate(-24deg); }
  50%  { transform: translate(-16px, 18px) rotate(-14deg); }
  100% { transform: translate(12px, -14px) rotate(-32deg); }
}

@keyframes drift-basketball {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(14px, -22px) rotate(11deg); }
  100% { transform: translate(-10px, 12px) rotate(-8deg); }
}

@keyframes drift-racket {
  0%   { transform: translate(0, 0) rotate(35deg); }
  50%  { transform: translate(-18px, -16px) rotate(42deg); }
  100% { transform: translate(14px, 20px) rotate(29deg); }
}

/* =========================================================
   Client / partner logo strip
   ---------------------------------------------------------
   Measured off section3.png / section3again.png. The strip is a full-bleed
   leftward marquee with a wide black fade on both edges. The logos are NOT a
   uniform height — the original sizes each one by hand — so each carries its
   own width ratio, taken from the captures (as a fraction of viewport width)
   and multiplied by a single --logo-scale. The inter-logo gutter measured a
   consistent 107px across both frames.
   ========================================================= */
.clients {
  padding: clamp(48px, 6vw, 110px) 0 clamp(40px, 5vw, 96px);
  background: var(--bg);
  overflow: hidden;

  --logo-scale: 100vw;
  --marquee-gap: calc(var(--logo-scale) * 0.0582);
}

.clients__tagline {
  max-width: 76%;
  margin: 0 auto clamp(40px, 4.4vw, 80px);
  text-align: center;
  font-family: var(--font-supporting);
  font-weight: 600;
  font-size: clamp(14px, 1.47vw, 22px);
  line-height: 1.4;
  color: rgb(127, 127, 127);
}

.clients__strip { --dur: 30s; }

.client { flex: none; }

.client img {
  display: block;
  width: calc(var(--logo-scale) * var(--w));
  /* aspect-ratio, not height:auto — these are lazy-loaded, and without an
     intrinsic ratio an undecoded image collapses to 0 height and the row
     jumps as each logo arrives. */
  aspect-ratio: var(--logo-ar);
  height: auto;
  object-fit: contain;
}

/* Per-logo width ratios measured from the reference captures (px / 1838),
   paired with each file's native aspect ratio. */
.client--ufc       { --w: 0.1344; --logo-ar: 1200 / 416; }
.client--amazon    { --w: 0.2383; --logo-ar: 2403 / 514; }
.client--adil      { --w: 0.1779; --logo-ar: 512 / 98; }
.client--sports360 { --w: 0.1719; --logo-ar: 2290 / 697; }
.client--psl       { --w: 0.1143; --logo-ar: 2560 / 1326; }
.client--f1        { --w: 0.1148; --logo-ar: 1200 / 675; }

/* =========================================================
   Section 02 — Poster slider (3 independent marquee rows)
   ---------------------------------------------------------
   Sizing is measured off section2a/2b/2c. In those captures a poster box is
   501x567 in rows 1-2 and 526x567 in row 3 (the reference really is ~5% wider
   on the bottom row), with a 12px gutter, a 33px row gap, and the whole strip
   clipped to ~80% of the viewport width. Those ratios are what the clamps
   below reproduce. Boxes are fixed and the art is object-fit: cover, exactly
   as the original does it — the posters have several different native aspect
   ratios but always render to the same box.
   ========================================================= */
.posters {
  position: relative;
  padding: clamp(36px, 4.4vw, 84px) 0;
  background: var(--bg);
  overflow: hidden;

  --poster-h: clamp(280px, 30.7vw, 500px);
  --marquee-gap: clamp(6px, 0.65vw, 12px);
  --poster-radius: clamp(6px, 0.65vw, 12px);
  --row-gap: clamp(14px, 1.79vw, 34px);
}

.posters__inner {
  width: min(80%, 1560px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

/* ---------- Marquee mechanics ----------
   The track holds two identical groups. Each group carries a trailing gutter
   (padding-right) so its width is exactly n * (poster + gutter) — which makes
   translateX(-50%) advance by precisely one group, gutter included. That is
   what keeps the seam invisible; a gap on the track instead would leave a
   half-gutter jump at the wrap. */
.marquee {
  overflow: hidden;
  /* clip strictly to the row box so nothing bleeds between rows */
  contain: paint;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-shift var(--dur, 30s) linear infinite;
}

.marquee--right .marquee__track { animation-direction: reverse; }

/* ---------- Edge vignette ----------
   A mask on the row, so items dissolve into whatever is behind them rather
   than into an opaque overlay colour that would only work on a flat backdrop.
   Reusable: add .marquee--faded to any marquee row (the "We Believe In" pills
   in section 4 will want it too) and set --fade / --fade-edge to taste.

   Stop positions traced off section3again.png by reading the brightest pixel
   per column as a white wordmark crosses the edge: the reference holds full
   black for the first ~4% and reaches full opacity at ~27.7%. */
.marquee--faded {
  --fade: 28%;
  --fade-edge: 4%;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    transparent var(--fade-edge),
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent calc(100% - var(--fade-edge)),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    transparent var(--fade-edge),
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent calc(100% - var(--fade-edge)),
    transparent 100%);
}

/* Per-row box shape and cycle time. Durations are set so every row travels at
   roughly the same px/sec despite holding 5, 6 and 4 posters respectively —
   flip a row by swapping its marquee--left / marquee--right class. */
.marquee[data-row="1"] { --ar: 501 / 567; --dur: 30s; }
.marquee[data-row="2"] { --ar: 501 / 567; --dur: 36s; }
.marquee[data-row="3"] { --ar: 526 / 567; --dur: 25s; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}

@keyframes marquee-shift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Poster ---------- */
.poster {
  flex: none;
  margin: 0;
  height: var(--poster-h);
  aspect-ratio: var(--ar);
  border-radius: var(--poster-radius);
  overflow: hidden;
  background: #17171a;
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   Section 04 — "Is your sports brand struggling with" + We Believe In
   ---------------------------------------------------------
   Measured off section4again.png, which is cropped exactly to the card row:
   three 572px cards with a 25px gutter fill 1767px, so a card is 32.37% of
   the container and the gutter 1.44%. Card fill is rgb(10,10,10) — slightly
   DARKER than the rgb(13,13,13) page — with a hairline lighter border, and
   the body copy is rgb(153,153,153). "STRUGGLING" is the brand purple.
   ========================================================= */
.problem {
  padding: clamp(56px, 7vw, 130px) 0 clamp(48px, 6vw, 100px);
  background: var(--bg);
}

.problem__inner {
  width: min(90%, 1340px);
  margin: 0 auto;
}

.problem__title {
  margin: 0 0 clamp(22px, 2.2vw, 32px);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.problem__accent { color: var(--purple); }

.problem__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.44vw, 20px);
  align-items: stretch;
}

.pcard {
  margin: 0;
  padding: clamp(24px, 2.6vw, 38px) clamp(18px, 2.2vw, 32px);
  text-align: center;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
}

.pcard__title {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  font-family: var(--font-supporting);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.3;
  color: var(--white);
}

.pcard__body {
  margin: 0;
  font-family: var(--font-supporting);
  font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.7;
  color: var(--gray-500);
}

/* ---------- We Believe In ---------- */
.believe { margin-top: clamp(44px, 5vw, 88px); }

.believe__label {
  margin: 0 0 clamp(14px, 1.7vw, 24px);
  text-align: center;
  font-family: var(--font-supporting);
  font-weight: 600;
  font-size: clamp(13px, 1.2vw, 17px);
  color: rgb(127, 127, 127);
}

/* The pill row is a narrower centred track than the cards — in the reference
   its content spans ~60% of the container, centred, with the same edge
   vignette as the section 3 logo strip. */
.believe__row {
  width: min(56%, 800px);
  margin: 0 auto;
  --marquee-gap: clamp(8px, 0.75vw, 14px);
  --dur: 34s;
  --fade: 18%;
  --fade-edge: 2%;
}

.pill {
  flex: none;
  padding: clamp(9px, 0.85vw, 12px) clamp(14px, 1.3vw, 19px);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 999px;
  background: #0a0a0a;
  font-family: var(--font-supporting);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--gray-400);
}

/* =========================================================
   Section 05 — Trust headline + numbered services list
   ---------------------------------------------------------
   Measured off section5.png (1842px wide). Column edges land at x=170 (label),
   518 (number/title) and 818 (description), with the description measure
   ending at ~1450 — so the grid deliberately leaves the right ~15% empty.
   Every text colour in this section samples as pure white; only the numbers
   and the two headline phrases are rgb(125,11,244).
   ========================================================= */
.services {
  padding: clamp(56px, 7vw, 130px) 0 clamp(64px, 8vw, 150px);
  background: var(--bg);
}

.services__inner {
  width: min(81.6%, 1500px);
  margin: 0 auto;
}

/* ---------- Trust headline ---------- */
.trust { text-align: center; }

.trust__title {
  /* Sized so the headline keeps the reference's two-line break, after
     "TEAM,". Montserrat is ~15% wider than Hussar, so at the reference's own
     size it spills to three lines — raise this once the real face lands. */
  max-width: 74%;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.55vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.trust__accent { color: var(--purple); }

.trust__sub {
  max-width: 72%;
  margin: clamp(14px, 1.4vw, 24px) auto 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(1rem, 1.63vw, 1.5rem);
  line-height: 1.45;
  color: var(--white);
}

/* ---------- Services grid ----------
   Left label column, then the list. The label is NOT sticky — see the two
   zoomed-out captures: it sits level with item 01 and the column below it is
   empty for the rest of the list. Adding `position: sticky; top: 40px;` here
   is all it would take if that changes. */
.services__grid {
  margin-top: clamp(40px, 5vw, 96px);
  display: grid;
  grid-template-columns: 23% 1fr;
  gap: 0;
}

.services__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.3vw, 3.125rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.services__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 130px);
}

.svc {
  display: grid;
  /* minmax(0, …) so a long word can never force a track wider than its share */
  grid-template-columns: minmax(0, 26%) minmax(0, 54.5%);
  gap: 0;
  align-items: start;
}

.svc__num {
  display: block;
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.9vw, 4.5rem);
  line-height: 1;
  color: var(--purple);
}

.svc__title {
  grid-column: 1;
  margin: clamp(10px, 1.2vw, 20px) 0 0;
  /* A reserved gutter inside the title track. The description column starts
     immediately after this track, so without it any title line wider than the
     track runs straight into the description — which is what "Motion Graphics"
     and "Sports Collateral" did. Text now wraps inside the padded box instead
     of overflowing, whatever the title length. */
  padding-right: clamp(10px, 1.2vw, 24px);
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-secondary);
  font-weight: 400;
  /* 2vw not 2.28vw: at the reference's own size Montserrat runs the title
     right up against the description column, where Hussar leaves a ~48px gap. */
  font-size: clamp(1.125rem, 2vw, 1.875rem);
  line-height: 1.18;
  color: var(--white);
}

/* Every title breaks to two lines in the reference, at a fixed point. Relying
   on the column width to wrap them only works while the column happens to be
   narrower than the text — on wide viewports the short titles ("Sports
   Collateral", "Motion Graphics") stayed on one line and ran into the
   description. The break is explicit so it holds at every width. */
.svc__break { display: inline; }

.svc__desc {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.79vw, 1.6875rem);
  line-height: 1.19;
  color: var(--white);
}

/* =========================================================
   Section 07 — Testimonials
   ---------------------------------------------------------
   Measured off section7a.png: cards sit on rgb(10,10,10) with a hairline
   border over the rgb(13,13,13) page, separated by a 27px gutter, quote text
   is rgb(179,179,179), and the row edges carry the same vignette as the other
   marquees. Reference card widths run 382-549px — hand-sized in the original —
   so these use one consistent width near that midpoint.
   ========================================================= */
.tmr {
  padding: clamp(56px, 7vw, 130px) 0 clamp(56px, 7vw, 120px);
  background: var(--bg);
  overflow: hidden;
}

.tmr__title {
  margin: 0 auto;
  max-width: 90%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.tmr__badge {
  display: block;
  width: fit-content;
  max-width: 90%;
  margin: clamp(14px, 1.3vw, 22px) auto 0;
  padding: clamp(8px, 0.8vw, 12px) clamp(16px, 1.7vw, 28px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-supporting);
  font-weight: 500;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.35;
  color: var(--gray-200);
}

.tmr__rows {
  margin-top: clamp(34px, 4.4vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 56px);
}

.tmr__row {
  --marquee-gap: clamp(14px, 1.47vw, 28px);
  --fade: 15%;
  --fade-edge: 1%;
}
.tmr__row[data-trow="1"] { --dur: 46s; }
.tmr__row[data-trow="2"] { --dur: 52s; }

.tcard {
  flex: none;
  width: clamp(255px, 23.6vw, 440px);
  margin: 0;
  padding: clamp(20px, 1.95vw, 34px);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
}

.tcard__quote {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.37;
  color: var(--gray-400);
}

.tcard__author {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 16px);
  margin-top: clamp(18px, 1.7vw, 30px);
  padding-top: clamp(16px, 1.5vw, 26px);
  border-top: 1px dashed rgba(255, 255, 255, .1);
}

/* Placeholder avatars — initials in a disc. Swap the span for an <img> once
   the real headshots arrive; only Rd Agency has a known colour treatment. */
.tcard__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.7vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #26262b;
  font-family: var(--font-supporting);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.02em;
  color: var(--gray-300);
}

.tcard__avatar--rd {
  background: #e01b24;
  color: #ffffff;
  font-size: clamp(15px, 1.3vw, 20px);
}

.tcard__name {
  font-family: var(--font-supporting);
  font-weight: 700;
  font-size: clamp(15px, 1.46vw, 22px);
  line-height: 1.2;
  color: var(--white);
}

/* =========================================================
   Section 09 — Final CTA
   ---------------------------------------------------------
   Measured off section9-gif.png: the media box is 946x577 (a 1.639 ratio)
   with a 1px rgb(125,11,244) border and square corners, and the headline sits
   top-aligned with it at the largest type tier in notes.md (70px/84px).
   The source GIF is 429x343 (1.25), so it is cover-fitted into the wider box
   exactly as the reference frames it.
   ========================================================= */
.cta {
  padding: clamp(56px, 7vw, 120px) 0;
  background: var(--bg);
}

.cta__inner {
  width: min(94%, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 56%);
  column-gap: 4%;
  align-items: start;
}

.cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 4.375rem);
  line-height: 1.2;          /* 84/70 in the reference */
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.cta__accent { color: var(--purple); }

/* The box keeps the reference's 946x577 (1.639) shape; the supplied GIF is
   1.251, so it is cover-fitted. The GIF animates from a wide two-shot to a
   close-up, and object-position biases the crop upward so no head is clipped
   at either end of that zoom. */
.cta__media {
  aspect-ratio: 946 / 577;
  border: 1px solid var(--purple);
  overflow: hidden;
}

.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}

/* =========================================================
   Section 08 — FAQs
   ---------------------------------------------------------
   Measured off section8a.png (a ~1:1 capture at 1338px): the container is
   74.7% of the viewport, filled rgb(15,15,15) — a shade lighter than the
   rgb(13,13,13) page — with a 1px rgba(255,255,255,.1) border and no dividers
   between rows. Label, icons and the headline accent are all exactly
   rgb(125,11,244); question and answer text are both pure white in every
   state (the questions do not brighten when expanded).
   ========================================================= */
.faq {
  padding: clamp(56px, 7vw, 130px) 0 clamp(56px, 7vw, 120px);
  background: var(--bg);
}

.faq__label {
  margin: 0 0 clamp(4px, 0.5vw, 9px);
  text-align: center;
  font-family: var(--font-numeric);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--purple);
}

.faq__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.faq__accent { color: var(--purple); }

.faq__list {
  width: min(74.7%, 1150px);
  margin: clamp(26px, 3.2vw, 58px) auto 0;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: hidden;
}

.faq__h { margin: 0; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(15px, 1.45vw, 21px) clamp(16px, 1.5vw, 22px);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.3;
  color: var(--white);
}

/* Plus that becomes a cross — one glyph, rotated 45deg when open */
.faq__icon {
  position: relative;
  flex: none;
  width: clamp(15px, 1.3vw, 19px);
  aspect-ratio: 1;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--purple);
}
.faq__icon::after { transform: rotate(90deg); }

.faq__item.is-open .faq__icon { transform: rotate(45deg); }

/* 0fr -> 1fr animates the panel open without hard-coding a max-height */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.22, 1, .36, 1);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__panel-inner { overflow: hidden; }

.faq__a {
  margin: 0;
  padding: 0 clamp(16px, 1.5vw, 22px) clamp(16px, 1.6vw, 24px);
  font-family: var(--font-numeric);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.3;
  color: var(--white);
}

/* =========================================================
   Section — "Pass us the ball" marquee
   ---------------------------------------------------------
   The dimming on the outer letters is the same edge vignette used elsewhere
   on the site, NOT a shine baked into the type. Proof from the reference
   frames: the second "S" of PASS is grey while it sits at the right edge in
   pass-us1, and pure white once it has scrolled to mid-screen in pass-us2 —
   so the effect is positional, not attached to the glyph. Hence plain white
   text under .marquee--faded, with no gradient text-fill.
   ========================================================= */
.passball {
  padding: clamp(30px, 5vw, 70px) 0;
  background: var(--bg);
  overflow: hidden;
}

.passball__row {
  --marquee-gap: 0px;
  --dur: 26s;
  --fade: 12%;
  --fade-edge: 0%;
}

.passball__row .marquee__group {
  gap: clamp(18px, 2.2vw, 42px);
  padding-right: clamp(18px, 2.2vw, 42px);
}

.passball__text {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 9.375rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}

.passball__ball {
  flex: none;
  width: clamp(46px, 6.4vw, 108px);
  aspect-ratio: 1;
  height: auto;
}

/* =========================================================
   Section 10 — Closing CTA
   ---------------------------------------------------------
   Measured off section10.png / section10-hover.png. The resting button is a
   flat rgb(20,20,20) capsule on the rgb(13,13,13) page — sampling across its
   edge gives 13 -> 17 -> 20 with no brighter ring, so there is no border,
   just a fill a shade lighter than the page. Hover fills with exactly
   rgb(125,11,244). The arrow is assets/mini-gray-arrow.svg inlined so its
   #999 stroke can lift to white on hover.
   ========================================================= */
.close {
  padding: clamp(48px, 6vw, 110px) 0 clamp(56px, 7vw, 120px);
  background: var(--bg);
  text-align: center;
}

.close__inner {
  width: min(92%, 1400px);
  margin: 0 auto;
}

.close__line {
  /* The measure lives here, not on the wrapper — an em cap on .close__inner
     would resolve against its inherited 16px rather than this 28px, which is
     what collapsed it to 640px. 39em lands at 1106px @1440, against the
     reference's 1108px, keeping sentence one on a single line. */
  max-width: 39em;
  margin: 0 auto;
  font-family: var(--font-supporting);
  font-weight: 500;
  font-size: clamp(1rem, 1.97vw, 1.8rem);
  line-height: 1.3;
  color: var(--white);
}
.close__line strong { font-weight: 700; }

.teamup {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 11px);
  margin-top: clamp(18px, 2vw, 32px);
  padding: clamp(11px, 0.95vw, 14px) clamp(18px, 1.7vw, 26px);
  border-radius: 999px;
  background: #141414;
  font-family: var(--font-supporting);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.2;
  color: var(--white);
  transition: background-color .28s ease, color .28s ease;
}

.teamup__arrow {
  flex: none;
  width: clamp(15px, 1.25vw, 18px);
  height: auto;
  color: #999999;
  transition: color .28s ease, transform .28s ease;
}

.teamup:hover { background: var(--purple); }
.teamup:hover .teamup__arrow {
  color: #ffffff;
  transform: translateX(2px);
}

/* =========================================================
   Section 11 — Footer
   ---------------------------------------------------------
   Measured off section11-footer.png. Contrary to a first read, the purple
   glow is NOT behind the large logo — sampling the blue channel up the centre
   gives 13 at the logo (y=120-220) rising to 57 at the bottom edge, so it is
   a radial anchored to the bottom centre that the logo sits above. Peak works
   out at roughly rgba(125,11,244,.19) over the rgb(13,13,13) base.
   All footer type is pure white; the social marks are rgb(125,11,244), which
   is already baked into the three SVGs.
   ========================================================= */
.footer {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8.2vw, 137px) 0 clamp(48px, 6vw, 100px);
  background: var(--bg);
  overflow: hidden;
}

.footer__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(62% 78% at 50% 100%,
    rgba(125, 11, 244, .21) 0%,
    rgba(125, 11, 244, .11) 45%,
    rgba(125, 11, 244, 0) 100%);
}

/* The full stacked lockup ships as one square PNG (ink is 71.8% of its width),
   so the box is sized up to land the mark at the reference's ~141px. */
.footer__mark {
  display: block;
  width: clamp(150px, 13.3vw, 205px);
  height: auto;
  margin: 0 auto clamp(50px, 5.6vw, 94px);
}

/* Fixed column shares, so the three keep their relative spacing. The row is
   offset as a unit: a smaller fixed margin on the right and auto on the left
   pushes the whole block right of centre. Column 1 narrowed to bring column 2
   left; column 3's share grew to match, so "Follow us" stays put.
   Column 1's track is then widened again to carry columns 2 and 3 further
   right — its own content is left-aligned, so it does not move.
   Final shares: column 1's track ends level with the left edge of the
   EXODUSPORTS *wordmark* above (643px @1440) so "Contact Info" starts under
   it. Note that is not the logo <img>'s own left edge — the PNG carries about
   13.65% transparent padding, putting the image box ~26px further left.
   Column 2 absorbs the difference so "Follow us" holds its position. */
.footer__inner {
  width: min(86%, 1500px);
  margin-left: auto;
  margin-right: 5%;
  display: grid;
  grid-template-columns: 42% 37% 21%;
  align-items: start;
}

/* Column 1 needs the X beside the wordmark; no single asset is a horizontal
   lockup, so it is composed from the two pieces. */
.footer__lockup {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
}
.footer__lockup-x { width: clamp(26px, 2.4vw, 34px); height: auto; }
.footer__lockup-word { width: clamp(94px, 8.6vw, 123px); height: auto; }

.footer__tagline {
  margin: clamp(9px, 0.85vw, 13px) 0 0;
  font-family: var(--font-footer);
  font-weight: 400;
  font-size: clamp(15px, 1.24vw, 18px);
  line-height: 1.61;
  color: var(--white);
}

/* Fixed break points — the requested wrap has the third line longer than the
   first two, which greedy wrapping cannot produce from a single measure. */
.footer__break { display: inline; }

.footer__head {
  margin: 0 0 clamp(18px, 1.75vw, 26px);
  font-family: var(--font-footer);
  font-weight: 700;
  font-size: clamp(19px, 1.62vw, 24px);
  line-height: 1.4;
  color: var(--white);
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.5vw, 23px);
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 0.9vw, 14px);
  font-family: var(--font-footer);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
  color: var(--white);
  transition: color .25s ease;
}
.footer__list a:hover { color: var(--purple); }

/* No envelope/phone assets were supplied — these are drawn inline */
.footer__icon {
  flex: none;
  width: clamp(15px, 1.25vw, 19px);
  aspect-ratio: 1;
  color: var(--white);
}

.footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.5vw, 36px);
}

.footer__social img {
  width: clamp(18px, 1.55vw, 22px);
  aspect-ratio: 1;
  display: block;
  transition: transform .25s ease;
}
.footer__social a:hover img { transform: translateY(-2px); }

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
.cursor.is-active { opacity: 1; }

.cursor__dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);   /* centre on the pointer */
  border-radius: 50%;
  background: var(--purple);
  /* No scale transform — size only ever changes for the labelled pill state
     below, which is an explicit opt-in (data-cursor="open"). */
  transition: background-color .3s ease,
              width .28s cubic-bezier(.22, 1, .36, 1),
              height .28s cubic-bezier(.22, 1, .36, 1),
              border-radius .28s ease,
              box-shadow .3s ease;
}
.cursor.is-hover .cursor__dot { background: #000000; }

/* Labelled pill — the FAQ rows turn the cursor into a purple "Open" capsule.
   In section8b the capsule sits offset from the row's own + icon, and in
   section8c it is caught mid-fade floating in empty space between two rows,
   so it belongs to the cursor rather than to any row. */
.cursor__label {
  font-family: var(--font-supporting);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  opacity: 0;
  transition: opacity .18s ease;
}

.cursor.is-pill .cursor__dot {
  width: 86px;
  height: 40px;
  border-radius: 999px;
  background: var(--purple);
  box-shadow: 0 0 26px rgba(125, 11, 244, .55);
}
.cursor.is-pill .cursor__label { opacity: 1; transition-delay: .06s; }

/* Hide the native cursor only where the custom one actually runs */
html.has-custom-cursor,
html.has-custom-cursor * { cursor: none !important; }

/* =========================================================
   Responsive
   ========================================================= */

/* --- Tablet / small laptop (breakpoint flagged as a known gap in notes) --- */
@media (max-width: 1023px) {
  .nav__links { gap: 30px; font-size: 16px; }

  .obj--shuttle    { left: 16%; top: 45%; }
  .obj--rugby      { left: 84%; top: 40%; }
  .obj--basketball { left: 20%; top: 84%; }
  .obj--racket     { left: 78%; top: 86%; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  .nav { padding: 20px var(--gutter); }
  .nav__inner { gap: 12px; }
  .nav__logo img { width: 34px; }
  /* Reference captures show no inline links on mobile — logo + CTA only */
  .nav__links { display: none; }

  .btn { border-radius: 999px; }
  .btn--outline { padding: 10px 16px; font-size: 15px; border-width: 2px; }
  .btn--solid { padding: 17px 34px; font-size: 15px; }

  .hero {
    min-height: 100svh;
    padding: min(28vh, 230px) var(--gutter) 64px;
    align-items: flex-start;
  }

  .hero__glow {
    /* Mobile carries the glow noticeably further down and a touch brighter
       (peak rgb(56,12,101) at ~22%), with a softer side falloff — sampled
       from mobile-hero-ss1. */
    background:
      linear-gradient(to right,
        rgba(13, 13, 13, .83) 0%,
        rgba(13, 13, 13, .69) 11%,
        rgba(13, 13, 13, .51) 22%,
        rgba(13, 13, 13, .32) 33%,
        rgba(13, 13, 13, .12) 44%,
        rgba(13, 13, 13, 0) 50%,
        rgba(13, 13, 13, .12) 56%,
        rgba(13, 13, 13, .32) 67%,
        rgba(13, 13, 13, .51) 78%,
        rgba(13, 13, 13, .69) 89%,
        rgba(13, 13, 13, .83) 100%),
      linear-gradient(to bottom,
        rgb(38, 13, 66)  0%,
        rgb(41, 13, 71)  4%,
        rgb(45, 12, 81)  8%,
        rgb(51, 13, 90)  12%,
        rgb(54, 12, 96)  16%,
        rgb(56, 12, 101) 22%,
        rgb(52, 13, 94)  36%,
        rgb(49, 13, 87)  40%,
        rgb(40, 13, 66)  48%,
        rgb(34, 13, 54)  52%,
        rgb(27, 12, 41)  56%,
        rgb(19, 13, 23)  64%,
        rgb(15, 13, 16)  72%,
        rgb(13, 13, 13)  80%,
        rgb(13, 13, 13)  100%);
  }

  .hero__logo { margin-bottom: 56px; }
  .hero__logo-x { width: 22vw; }
  .hero__logo-word { width: 29vw; margin-top: 8px; }

  /* Headline wraps naturally on mobile — this size reproduces the reference's
     six-line break (UNITING / TEAMS & / FANS / THROUGH / CREATIVE / EXCELLENCE) */
  .hero__break { display: none; }
  .hero__headline {
    font-size: clamp(2.1rem, 12.4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
  }

  .hero__sub {
    margin-top: 30px;
    font-size: clamp(1rem, 4.6vw, 1.25rem);
    line-height: 1.5;
  }

  .hero__cta { margin-top: 34px; }

  /* Only the basketball and the shuttlecock appear on mobile */
  .obj--rugby,
  .obj--racket { display: none; }

  .obj--basketball { left: 15.5%; top: 35.5%; width: 23vw; }
  .obj--shuttle    { left: 87%;   top: 50%;   width: 17vw; }

  /* ---------- Poster slider ----------
     Mobile runs full-bleed with much larger, far more portrait boxes: from
     mobile-section2a a poster is 58.9vw wide and 126.7vw tall (a 0.465 box,
     so the art is cropped to a tall slice), gutter 2.8vw, row gap 12.2vw. */
  .posters {
    padding: 44px 0;
    --poster-h: 126.7vw;
    --marquee-gap: 2.8vw;
    --poster-radius: 8px;
    --row-gap: 12.2vw;
  }

  .posters__inner { width: 100%; }

  .marquee[data-row] { --ar: 530 / 1140; }

  /* ---------- Client logos ----------
     Mobile keeps the logos at roughly their desktop pixel size while the
     viewport shrinks, so only ~1.7 fit across — that is what the reference
     shows (PSL plus a part-cropped UFC). Hence a fixed scale, not 100vw.
     The edge fade also tightens; 27% of a phone screen would swallow the
     strip. */
  .clients {
    padding: 40px 0 56px;
    --logo-scale: 1420px;
  }

  /* 27% of a phone screen would swallow the strip, so the vignette tightens
     (the flat edge scales with it, keeping the same shape). */
  .clients__strip {
    --fade: 12%;
    --fade-edge: 2%;
  }

  .clients__tagline {
    /* An em cap, so the measure scales with the font and the two-line break
       lands after "prestigious" — as the reference does — at every phone
       width. A % cap flips to three lines on narrow screens, a px cap flips
       on wide ones (the font keeps growing while the cap does not).
       Line 2 needs 23.3em; line 1 would take the next word at 25.2em. */
    max-width: min(24.2em, 90%);
    margin-bottom: 90px;
    font-size: clamp(12px, 3.15vw, 15px);
  }

  /* ---------- Problem section ----------
     Cards stack full-width (93% of the screen in mobile-section4a) and the
     headline drops to three lines. Text sizes hold — the reference uses the
     same 18/15px card type on both breakpoints. */
  .problem { padding: 56px 0 64px; }

  .problem__inner { width: 93%; }

  .problem__title {
    /* 8.2vw keeps the reference's three-line break (IS YOUR SPORTS / BRAND
       STRUGGLING / WITH). The reference sets this at ~34px, but Hussar is
       ~15% narrower than the Montserrat stand-in, so at 34px "STRUGGLING"
       drops to its own line here. Raise it once the real face is installed. */
    font-size: clamp(1.6rem, 8vw, 2.25rem);
    margin-bottom: 26px;
  }

  .problem__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pcard { padding: 30px 24px; }
  .pcard__title { font-size: 18px; margin-bottom: 16px; }
  .pcard__body { font-size: 15px; }

  .believe { margin-top: 52px; }
  .believe__label { font-size: 14.5px; margin-bottom: 20px; }

  /* Near full-bleed on mobile, with a tighter vignette */
  .believe__row {
    width: 100%;
    --marquee-gap: 22px;
    --fade: 12%;
    --fade-edge: 2%;
  }

  .pill { padding: 11px 20px; font-size: 15px; }

  /* ---------- Trust + services ----------
     The label centres above the list and the three columns collapse to one
     stack: number, title, then description. */
  .services { padding: 56px 0 72px; }
  .services__inner { width: 90%; }

  .trust__title {
    max-width: 100%;
    font-size: clamp(1.55rem, 7.4vw, 2.25rem);
    line-height: 1.1;
  }

  .trust__sub {
    max-width: 100%;
    margin-top: 18px;
    font-size: clamp(1.0625rem, 5.6vw, 1.6rem);
    line-height: 1.4;
  }

  .services__grid {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .services__label {
    text-align: center;
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    margin-bottom: 36px;
  }

  .services__list { gap: 44px; }

  .svc {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .svc__num { font-size: clamp(3rem, 15vw, 4.25rem); }

  .svc__title {
    margin-top: 6px;
    font-size: clamp(1.375rem, 6.6vw, 1.875rem);
  }

  /* Mobile puts each title on one line, as mobile-section5a/5b do */
  .svc__break { display: none; }

  /* ---------- Testimonials ---------- */
  .tmr { padding: 56px 0 64px; }

  .tmr__title { font-size: clamp(1.5rem, 7.4vw, 2.1rem); }

  .tmr__badge {
    margin-top: 16px;
    padding: 10px 18px;
    font-size: clamp(12px, 3.3vw, 15px);
  }

  .tmr__rows {
    margin-top: 32px;
    gap: 16px;
  }

  .tmr__row {
    --marquee-gap: 14px;
    --fade: 8%;
    --fade-edge: 1%;
  }

  .tcard {
    width: 78vw;
    max-width: 330px;
    padding: 20px;
    border-radius: 14px;
  }

  /* The reference runs 18px quotes / 21px names inside a ~208px card, which is
     why its names clip ("Davi…", "Billy Jhowe…"). Same type scale here, but in
     a wider card so nothing is cut off. */
  /* ---------- Footer ----------
     No mobile capture supplied — columns stack in source order and the glow
     tightens so it still reads on a narrow screen. */
  .footer { padding: 56px 0 56px; }

  .footer__mark { width: 150px; margin-bottom: 44px; }

  .footer__inner {
    width: 88%;
    /* recentre — the desktop rule offsets the row to the right */
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .footer__glow {
    background: radial-gradient(90% 46% at 50% 100%,
      rgba(125, 11, 244, .22) 0%,
      rgba(125, 11, 244, .09) 45%,
      rgba(125, 11, 244, 0) 100%);
  }

  .footer__head { font-size: 21px; margin-bottom: 18px; }
  .footer__tagline { font-size: 16px; }
  /* let it wrap naturally to the phone's width */
  .footer__break { display: none; }
  .footer__list a { font-size: 17px; }

  /* ---------- Pass us the ball ----------
     The reference runs this far larger relative to the screen than desktop
     would: ~92px on a 390px phone, so only two or three words are in view. */
  .passball { padding: 34px 0; }

  .passball__text { font-size: clamp(3.75rem, 23.6vw, 6rem); }
  .passball__ball { width: clamp(52px, 20vw, 84px); }
  .passball__row .marquee__group { gap: 26px; padding-right: 26px; }

  /* ---------- Closing CTA ----------
     The reference sets this at ~30px, which overruns the screen — both
     sentences are clipped at the left and right edges in mobile-section10.
     Sized to fit here instead, and the two sentences take a visible gap as
     they do in the reference. */
  .close { padding: 48px 0 64px; }

  .close__inner { width: 88%; }

  .close__line {
    font-size: clamp(17px, 5.4vw, 22px);
    line-height: 1.32;
  }
  .close__line { max-width: 100%; }
  .close__line + .close__line { margin-top: 18px; }

  .teamup {
    margin-top: 28px;
    padding: 14px 26px;
    font-size: 17px;
    gap: 10px;
  }
  .teamup__arrow { width: 17px; }

  /* ---------- Final CTA ----------
     No mobile reference was supplied for this section, so the two columns
     stack in reading order: headline, then the GIF at full width. */
  .cta { padding: 56px 0; }

  .cta__inner {
    width: 90%;
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .cta__title { font-size: clamp(1.9rem, 9vw, 2.75rem); }

  /* ---------- FAQs ----------
     Container widens to ~84% and the type steps up to 18px, matching
     mobile-section8c. Padding stays at the reference's 20px. */
  .faq { padding: 56px 0 64px; }

  .faq__label { font-size: 14px; }
  .faq__title { font-size: clamp(1.5rem, 7.4vw, 2.1rem); }

  .faq__list {
    width: 84%;
    margin-top: 28px;
    border-radius: 18px;
  }

  .faq__q {
    padding: 18px 20px;
    font-size: 18px;
    gap: 16px;
  }

  .faq__icon { width: 20px; }

  .faq__a {
    padding: 0 20px 22px;
    font-size: 18px;
    line-height: 1.25;
  }

  .tcard__quote { font-size: 16.5px; line-height: 1.45; }
  .tcard__author { margin-top: 18px; padding-top: 16px; }
  .tcard__avatar { width: 42px; font-size: 14px; }
  .tcard__name { font-size: 19px; }

  /* The reference drops the descriptions entirely on mobile — its three-column
     grid never restacks, so the copy is pushed off-screen and the titles clip.
     Kept visible here; that looks like a defect in the original, not intent. */
  .svc__desc {
    grid-column: 1;
    grid-row: auto;
    margin-top: 14px;
    font-size: clamp(0.9375rem, 4.1vw, 1.125rem);
    line-height: 1.45;
    color: var(--gray-200);
  }
}

/* =========================================================
   Motion / input preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .obj img { animation: none !important; }
  .btn { transition: none; }
  .cursor__dot { transition: background-color .2s ease; }

  /* Stop the rows, but hand the posters back as a manual scroll so the work
     is still reachable rather than half-cropped. */
  .marquee__track { animation-play-state: paused; }
  .marquee {
    overflow-x: auto;
    contain: none;
    scrollbar-width: thin;
  }
}

/* Touch devices never get the custom cursor */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}