/* ============================================================
   CAPE — Per-section styles
   ============================================================ */

/* ============================================================
   SECTION 0 — SIZZLE HERO  (#sizzle-hero)
   Full-bleed autoplaying video with a cream "knockout plate"
   centered on top. CAPE letters are cut out of the plate so the
   video only shows through the letter shapes.
   ============================================================ */
#sizzle-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-slate-black);
}

#sizzle-hero #sizzle-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Approach C: the SVG IS the plate (rectangle with CAPE letter cutouts);
   inlined into the HTML with fill recolored from blue to cream. */
#sizzle-hero .knockout-plate-svg {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 1190px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ============================================================
   SECTION 1 — HERO  (#hero)
   ============================================================ */
.hero {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
  box-sizing: border-box;
}

.hero__cape {
  color: var(--color-yves-klein);
  font-size: var(--type-hero-cape);
  display: inline-block;
}

.hero__cape .l {
  display: inline-block;
}

.hero__sub {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.015em;
  font-size: var(--type-hero-supporting);
  line-height: 1.2;
  color: var(--color-slate-black);
  max-width: 880px;
  margin: clamp(20px, 3vh, 40px) auto 0;
  text-align: center;
}

/* ============================================================
   SECTION 2 — PLATFORMS  (#platforms)
   ============================================================ */
.platforms {
  position: relative;
  min-height: auto;
  display: block;
  /* Right padding is 0 so the absolutely-positioned video column can
     sit at right: 0 and land flush with the viewport edge. The text
     column's own padding-right reserves the inner gap to the video. */
  padding: clamp(120px, 18vh, 240px) 0 clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
  box-sizing: border-box;
}

/* If a .row wrapper is ever used inside #platforms, make sure it doesn't
   re-introduce a flex layout. */
#platforms .row {
  display: block;
}

.platforms__text,
#platforms .text-col {
  width: 100%;
  max-width: none;
  /* Reserve space on the right so the absolutely-positioned video
     never overlaps the text. Matches the video column width. */
  padding-right: clamp(320px, 32vw, 520px);
}

.platforms__headline {
  color: var(--color-slate-black);
  font-size: var(--type-display-headline);
}

.platforms__headline .line {
  display: block;
}

.platforms__body,
#platforms .body {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: lowercase;
  color: var(--color-slate-black);
  font-size: var(--type-body-large);
  line-height: 1.55;
  max-width: 540px;
  margin-top: clamp(28px, 4vh, 56px);
  /* Single-block slide-up start state. Triggered when the section
     gains .play via the observer (transition-delay set in JS). */
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 700ms var(--ease-out-quint), transform 900ms var(--ease-out-quint);
}

.platforms.play .platforms__body,
#platforms.play .platforms__body,
.platforms.play #platforms .body,
#platforms.play .body,
#platforms .body.play {
  opacity: 1;
  transform: translateY(0);
}

/* Platform image column — absolutely positioned, pinned to the right
   edge of the section (which is full-bleed since #platforms padding
   doesn't constrain absolute children's right anchor when right: 0). */
#platforms .img-col {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(280px, 28vw, 460px);
  height: clamp(420px, 56vw, 720px);
  z-index: 2;
}

#platforms .platform-video-frame {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-slate-black);
  /* slide-in start state — starts off-screen right, no rotation. */
  opacity: 0;
  transform: translateX(200px);
  will-change: transform, opacity;
  transition: transform 850ms var(--ease-out-quint), opacity 500ms ease;
}

/* End state — triggered when the section gains .play via the observer.
   The per-element transition-delay (set in JS) controls when this kicks
   in relative to the rest of the section's animation. */
.platforms.play .platform-video-frame,
#platforms.play .platform-video-frame,
#platforms .platform-video-frame.play {
  opacity: 1;
  transform: translateX(0);
}

#platforms #platform-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   SECTION 3 — ONE PARTNER  (#one-partner)
   ============================================================ */
.one-partner {
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
  box-sizing: border-box;
}

/* Background layer — full-bleed hero video sits behind the centered text. */
#one-partner > .one-partner-bg,
#one-partner .one-partner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-slate-black);
}

#one-partner > .one-partner-bg > video,
#one-partner .one-partner-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark scrim so the cream text pops cleanly against bright video frames. */
#one-partner .one-partner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  z-index: 1;
  pointer-events: none;
}

#one-partner > .one-partner-content {
  position: relative;
  z-index: 2;
}

/* Text flips to off-white now that it sits over a darker video.
   Yves Klein accent block stays blue — it reads on both. */
#one-partner .one-partner-content,
#one-partner .one-partner-content h2,
#one-partner .one-partner-content p,
#one-partner .one-partner-content .body-block,
#one-partner .one-partner-content .body-block.regular,
#one-partner .one-partner-content .one-partner__headline,
#one-partner .one-partner-content .one-partner__body,
#one-partner .one-partner-content .one-partner__body--top,
#one-partner .one-partner-content .one-partner__body--bottom {
  color: var(--color-off-white);
}

/* Accent block now also flips to off-white — every text element in the
   one-partner content sits on the same off-white color over the video. */
#one-partner .one-partner-content .body-block.accent,
#one-partner .one-partner-content .one-partner__accent {
  color: var(--color-off-white);
}

.one-partner__headline {
  color: var(--color-slate-black);
  font-size: var(--type-display-headline);
}

.one-partner__body {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: lowercase;
  color: var(--color-slate-black);
  font-size: var(--type-body-large);
  line-height: 1.55;
  max-width: 720px;
  margin: clamp(28px, 4vh, 56px) auto 0;
}

.one-partner__body--bottom {
  margin-top: 18px;
}

.one-partner__accent {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-yves-klein);
  font-size: var(--type-accent-uppercase);
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-top: 18px;
  margin-bottom: 18px;
}

.one-partner__accent .line {
  display: block;
}

/* accent block uses LINE RISE per line — each line wrapped in a mask */
.one-partner__accent .mask {
  display: block;
}

/* ============================================================
   SECTION 4 — WORK OPENER  (#work)
   ============================================================ */
.work {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px) clamp(40px, 6vh, 80px);
  box-sizing: border-box;
}

.work__title-wrap {
  position: relative;
  display: inline-block;
}

.work__title {
  color: var(--color-slate-black);
  font-size: var(--type-section-title);
  display: inline-block;
}

/* The mask that wipes off to reveal "WORK" — chunky banner-style vertical
   extension so the bar fully encloses the letterforms. */
.work__mask {
  position: absolute;
  top: -0.55em;
  bottom: -0.55em;
  left: 0;
  right: -48px;
  background: var(--color-yves-klein);
  transform-origin: right center;
  transform: scaleX(1);
  z-index: 2;
  transition: transform 1100ms var(--ease-mask-wipe);
}

.work.play .work__mask {
  transform: scaleX(0);
}

#work .opener,
.work__opener {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.015em;
  font-size: var(--type-body-medium);
  line-height: 1.25;
  color: var(--color-slate-black);
  margin: clamp(28px, 4vh, 56px) 0 0 0;
  max-width: none;
  text-align: left;
}

#work .closer,
.work__closer {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  font-size: var(--type-display-closer);
  line-height: 1.0;
  color: var(--color-slate-black);
  margin: clamp(4px, 0.8vh, 12px) 0 0 0;
}

/* ============================================================
   SECTION 4b — PROJECT SHOWCASE  (#work-showcase)
   Two horizontal auto-scrolling marquee rows.
   ============================================================ */
#work-showcase {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 40px);
  /* Pulled up tight against the #work opener so the WORK title,
     opener, "in the world.", and carousels read as one moment. */
  padding-top: clamp(20px, 3vh, 48px);
  padding-bottom: clamp(120px, 18vh, 240px);
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.marquee-row {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: clamp(20px, 2vw, 36px);
  width: max-content;
  will-change: transform;
}

.marquee-track[data-direction="left"] {
  animation: marqueeLeft 80s linear infinite;
}
.marquee-track[data-direction="right"] {
  animation: marqueeRight 80s linear infinite;
}

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pause animation only when an actual tile is hovered. Using :has() so the
   gap between tiles (which is still inside the track) does NOT trigger pause
   — that was causing the overlay-flicker loop. */
.marquee-track:has(.work-tile:hover) {
  animation-play-state: paused;
}

/* Fallback for browsers without :has() support (older Safari). Keeps the
   marquee usable; the gap-pause flicker is acceptable degradation since
   :has() is supported in all current evergreen browsers as of 2023+. */
@supports not selector(:has(*)) {
  .marquee-track:hover {
    animation-play-state: paused;
  }
}

/* Respect users who've disabled motion in their OS settings — kill the
   marquee scroll AND the tile hover-scale, so the showcase reads as a
   static grid with hover overlays only. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  .work-tile-inner {
    transition: none;
  }
  .work-tile:hover .work-tile-inner {
    transform: none;
  }
}

.work-tile {
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 480px);
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-slate-black);
  /* NOTE: no transform here. The hover scale lives on .work-tile-inner so
     the tile's own hittable bounds stay stable — fixes hover flicker. */
}

.work-tile:hover {
  z-index: 10;
}

/* Inner wrapper takes the scale on hover so the tile's geometry (and the
   marquee track's hit-test) is unaffected by the zoom animation.
   transform-origin and backface-visibility lock the rendering layer so
   browsers don't reflow during transitions (cause of stale-cache flicker). */
.work-tile-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 380ms var(--ease-out-quint);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.work-tile:hover .work-tile-inner {
  transform: scale(1.04);
}

/* Media fills the tile — works for both <img> and <video>. */
.work-tile-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The <video> (and <img>) inside a tile must NOT capture pointer events,
   otherwise the cursor entering the video flips the cursor target away
   from .work-tile and the :hover overlay flickers off. */
#work-showcase .work-tile-media {
  pointer-events: none;
}

/* Overlay: dark scrim + project title / location, revealed on tile hover. */
.work-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vh, 16px);
  background: rgba(20, 20, 20, 0.55);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  padding: 16px;
  text-align: center;
}

.work-tile:hover .work-tile-overlay {
  opacity: 1;
}

.work-tile-overlay .work-tile-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-off-white);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.1;
}

/* ============================================================
   SECTION 4c — WORK CTA  (#work-cta)
   ============================================================ */
.work-cta {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
  box-sizing: border-box;
  background: var(--color-off-white);
}

.work-cta__lead {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-slate-black);
  letter-spacing: 0.05em;
  font-size: var(--type-cta-lead);
  line-height: 1.35;
  max-width: 720px;
  margin: 0 auto;
}

.work-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(24px, 4vh, 48px);
  text-decoration: none;
}

.cta-text {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-cta-script);
  color: var(--color-yves-klein);
  line-height: 0.95;
  display: inline-block;
  transform: translate(-20px, 10px) rotate(-6deg);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 900ms var(--ease-out-quint),
    opacity 600ms ease;
}

.work-cta.play .cta-text {
  transform: translate(0, 0) rotate(-4deg);
  opacity: 1;
}

.cta-arrow {
  display: inline-block;
  width: var(--type-cta-arrow);
  height: var(--type-cta-arrow);
  color: var(--color-yves-klein);
  transform: translateX(-32px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 700ms var(--ease-out-quint),
    opacity 500ms ease;
}

.work-cta.play .cta-arrow {
  transform: translateX(0);
  opacity: 1;
}

.cta-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cta-arrow .arrow-line,
.cta-arrow .arrow-head {
  transition: transform 480ms var(--ease-out-quint);
}

.cta-arrow .arrow-line {
  transform-origin: left center;
}

/* HOVER */
.work-cta__link:hover .cta-text {
  transform: translate(4px, -4px) rotate(-2deg);
  transition: transform 480ms var(--ease-out-quint);
}

.work-cta__link:hover .cta-arrow {
  transform: translateX(14px);
  transition: transform 480ms var(--ease-out-quint);
}

.work-cta__link:hover .cta-arrow .arrow-line {
  transform: scaleX(1.18);
}

.work-cta__link:hover .cta-arrow .arrow-head {
  transform: translateX(8px);
}

/* ============================================================
   SECTION 5 — TEAM INTRO  (#team)
   5.1 mask wipe → 5.2 "we saw a gap." → 5.3 "5 continents." + photo
   ============================================================ */
#team {
  position: relative;
  background: var(--color-off-white);
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 16vh, 200px);
}

/* === 5.1 — TEAM mask wipe === */
#team .team-title-block {
  position: relative;
  /* Pull the whole block past the section's right padding so the absolute
     mask inside can extend to the viewport edge (mirrors #work pattern). */
  margin-right: calc(-1 * clamp(48px, 6vw, 120px));
}
#team .team-row {
  position: relative;
  display: block;
  width: 100%;
}
#team .team-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.85;
  color: var(--color-slate-black);
  font-size: var(--type-section-title);
  margin: 0;
  display: inline-block;
}
#team .team-mask {
  position: absolute;
  top: -0.55em;
  bottom: -0.55em;
  left: 0;
  right: calc(-1 * clamp(48px, 6vw, 120px));
  background: var(--color-yves-klein);
  transform-origin: right center;
  transform: scaleX(1);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}
#team .team-title-block.play .team-mask {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-mask-wipe);
}

/* === 5.2 — "we saw a gap in the industry. / so we filled it."
   Full-bleed band with the TEAM_HERO video playing behind. === */
#team .team-gap-block {
  position: relative;
  width: 100vw;
  margin-left: calc(-1 * clamp(48px, 6vw, 120px));
  margin-right: calc(-1 * clamp(48px, 6vw, 120px));
  margin-top: clamp(80px, 12vh, 160px);
  min-height: clamp(640px, 88vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#team .team-gap-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-slate-black);
}

#team .team-gap-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#team .team-gap-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(48px, 6vw, 120px);
  text-align: center;
}

#team .team-gap-headline {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  /* Off-white because the headline now sits over a darker hero video. */
  color: var(--color-off-white);
  font-size: var(--type-display-headline);
  margin: 0;
  text-align: center;
}
#team .team-gap-headline .mask-wrap {
  display: block;
  overflow: hidden;
  line-height: 1.0;
}
#team .team-gap-headline .line {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
#team .team-gap-headline .blue-word {
  color: var(--color-yves-klein);
}
#team .team-gap-block.play .line {
  transform: translateY(0);
  opacity: 1;
}
#team .team-gap-block.play .line[data-i="0"] {
  transition: transform 900ms var(--ease-out-quint), opacity 500ms ease;
}
#team .team-gap-block.play .line[data-i="1"] {
  transition: transform 900ms var(--ease-out-quint) 260ms, opacity 500ms ease 260ms;
}

/* === 5.3 — "5 continents. / one standard." + body + group photo === */
#team .team-continents-block {
  position: relative;
  margin-top: clamp(120px, 18vh, 200px);
  min-height: clamp(540px, 68vw, 720px);
}
#team .team-continents-block .img-col {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* larger photo so the gap to the text column tightens up */
  width: clamp(360px, 36vw, 560px);
  height: clamp(520px, 64vw, 700px);
  /* escape section's left padding so photo is flush to the viewport edge */
  margin-left: calc(-1 * clamp(48px, 6vw, 120px));
  z-index: 2;
}
#team .team-continents-block .group-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-slate-black);
  opacity: 0;
  transform: translateX(-200px);
  will-change: opacity, transform;
}
#team .team-continents-block .group-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#team .team-continents-block.photo-play .group-img {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms ease, transform 850ms var(--ease-out-quint);
}

#team .team-continents-block .text-col {
  width: 100%;
  /* widen left padding so the headline + body sit clearly on the right side
     and don't crowd against the now-larger photo */
  padding-left: clamp(500px, 50vw, 760px);
  padding-right: 0;
}
#team .continents-headline {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--color-slate-black);
  font-size: var(--type-display-headline);
  margin: 0;
  white-space: nowrap;
}
#team .continents-headline .mask-wrap {
  display: block;
  overflow: hidden;
  line-height: 1.0;
}
#team .continents-headline .line {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
#team .continents-headline .blue-word {
  color: var(--color-yves-klein);
}
#team .team-continents-block.play .line {
  transform: translateY(0);
  opacity: 1;
}
#team .team-continents-block.play .line[data-i="0"] {
  transition: transform 900ms var(--ease-out-quint), opacity 500ms ease;
}
#team .team-continents-block.play .line[data-i="1"] {
  transition: transform 900ms var(--ease-out-quint) 260ms, opacity 500ms ease 260ms;
}

#team .continents-body {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: var(--type-body-large);
  line-height: 1.55;
  color: var(--color-slate-black);
  margin-top: clamp(28px, 4vh, 56px);
  max-width: 520px;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
#team .team-continents-block.body-play .continents-body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease-out-quint), transform 900ms var(--ease-out-quint);
}

/* ============================================================
   SECTION 5 — TEAM / FOUNDERS  (#team .team-founders-block)
   Full-bleed video frame with "Founders" Rizado eyebrow above,
   and two-column overlay grid (Jessica + Brown).
   ============================================================ */
#team .team-founders-block {
  position: relative;
  margin-top: clamp(120px, 16vh, 200px);
  width: 100vw;
  /* Break out of #team's horizontal padding so the frame is true full-bleed. */
  margin-left: calc(-1 * clamp(48px, 6vw, 120px));
  margin-right: calc(-1 * clamp(48px, 6vw, 120px));
}

/* Eyebrow "Founders" in Rizado script, yves klein, centered, slides in
   from offscreen left and lands at the centered resting position. */
#team .founders-eyebrow {
  padding-left: clamp(48px, 6vw, 120px);
  padding-right: clamp(48px, 6vw, 120px);
  margin-bottom: clamp(32px, 5vh, 64px);
  overflow: hidden;
  text-align: center;
}

#team .founders-eyebrow-text {
  font-family: 'rizado-script', 'Allura', cursive;
  font-style: italic;
  font-weight: 400;
  /* bumped up so the eyebrow has more presence */
  font-size: clamp(72px, 9vw, 140px);
  line-height: 1;
  color: var(--color-yves-klein);
  display: inline-block;
  /* slide-in start state — translates from offscreen left to the centered rest */
  opacity: 0;
  transform: translateX(-120px) rotate(-4deg);
  will-change: opacity, transform;
}

#team .team-founders-block.eyebrow-play .founders-eyebrow-text {
  opacity: 1;
  transform: translateX(0) rotate(-2deg);
  transition: opacity 600ms ease, transform 900ms var(--ease-out-quint);
}

/* Video frame — full-bleed, generous height. */
#team .founders-video-frame {
  position: relative;
  width: 100%;
  height: clamp(640px, 92vh, 920px);
  overflow: hidden;
  background: var(--color-slate-black);
}

#team .founders-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Text overlays — anchored to the lower portion of the video frame.
   The two columns auto-size to their content and are centered as a pair
   on the page; each column's content stays left-aligned inside itself. */
#team .founders-overlays {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(80px, 8vw, 160px);
  align-items: end;
  justify-content: center;
  padding-left: clamp(48px, 6vw, 120px);
  padding-right: clamp(48px, 6vw, 120px);
  max-width: 1600px;
  margin: 0 auto;
}

/* Ensure each row's text inside the columns is left-aligned even though
   the column pair is centered on the page. */
#team .f-name,
#team .f-title,
#team .f-bio,
#team .f-pull {
  text-align: left;
  justify-self: start;
}

/* display:contents lets each .founder-col's children become direct grid
   children of .founders-overlays so the two columns can share row tracks
   (and bios meet at a shared bottom baseline). */
.founder-col {
  display: contents;
}

.col-jess  .f-name      { grid-column: 1; grid-row: 1; }
.col-brown .f-name      { grid-column: 2; grid-row: 1; }
.col-jess  .f-title     { grid-column: 1; grid-row: 2; }
.col-brown .f-title     { grid-column: 2; grid-row: 2; }
.col-jess  .f-bio-wrap  { grid-column: 1; grid-row: 3; }
.col-brown .f-bio-wrap  { grid-column: 2; grid-row: 3; }
.col-jess  .f-pull      { grid-column: 1; grid-row: 4; }
.col-brown .f-pull      { grid-column: 2; grid-row: 4; }

/* Row 1 — NAMES (large, off-white, Coolvetica bold; names stay Title Case) */
#team .f-name {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(48px, 6vw, 96px);
  color: var(--color-off-white);
  margin: 0 0 8px 0;
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* Row 2 — TITLES (yves klein blue, UPPERCASE; significantly larger now) */
#team .f-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  font-size: clamp(18px, 1.8vw, 28px);
  color: var(--color-yves-klein);
  margin: 0 0 clamp(24px, 3.5vh, 48px) 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* Row 3 — BIO wrap (bottom-aligned so bios share a baseline) */
#team .f-bio-wrap {
  align-self: end;
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

#team .f-bio {
  font-family: coolvetica, sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: clamp(14px, 1.15vw, 18px);
  color: var(--color-off-white);
  margin: 0;
  text-align: left;
  max-width: 580px;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* Row 4 — PULL TEXT (medium Coolvetica bold, off-white) */
#team .f-pull {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: clamp(22px, 2.3vw, 36px);
  color: var(--color-off-white);
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* Synchronized stagger across both columns when .play lands.
   Offsets: name 0ms, title 280ms, bio 560ms, pull 1000ms */
#team .team-founders-block.play .f-name {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 800ms var(--ease-out-quint);
}

#team .team-founders-block.play .f-title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms ease 280ms,
              transform 700ms var(--ease-out-quint) 280ms;
}

#team .team-founders-block.play .f-bio {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease 560ms,
              transform 800ms var(--ease-out-quint) 560ms;
}

#team .team-founders-block.play .f-pull {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease 1000ms,
              transform 800ms var(--ease-out-quint) 1000ms;
}

/* ============================================================
   SECTION 5 — TEAM / LEADERSHIP + PARTNERS + CLOSER + CTA
   ============================================================ */

/* === Shared section title with mask wipe === */
#team .team-leadership-block,
#team .team-partners-block {
  margin-top: clamp(80px, 12vh, 140px);
}

/* Wrap that holds the title + the absolute mask bar that wipes off it.
   The wrap is full-width and uses text-align: center so the inline-block
   title sits centered horizontally on the page. */
#team .roster-title-wrap {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 80px);
}

#team .team-roster-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: var(--type-display-closer);
  color: var(--color-slate-black);
  margin: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* Yves Klein bar — extends past BOTH section padding edges to the viewport
   edges, then wipes off right-to-left when the parent gains .play. The
   centered title sits beneath the chunky banner-style mask. */
#team .roster-title-mask {
  position: absolute;
  top: -0.55em;
  bottom: -0.55em;
  left: calc(-1 * clamp(48px, 6vw, 120px));
  right: calc(-1 * clamp(48px, 6vw, 120px));
  background: var(--color-yves-klein);
  transform-origin: right center;
  transform: scaleX(1);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}

#team .team-leadership-block.play .roster-title-mask,
#team .team-partners-block.play .roster-title-mask {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-mask-wipe);
}

/* === Roster grid layouts === */
#team .roster-grid {
  display: grid;
  gap: clamp(20px, 2.5vw, 40px);
  margin-bottom: clamp(20px, 2.5vw, 40px);
}

#team .roster-grid:last-child {
  margin-bottom: 0;
}

#team .roster-grid-leadership {
  display: grid;
  grid-template-columns: repeat(3, clamp(260px, 22vw, 380px));
  justify-content: center;
  align-items: start;
  column-gap: clamp(20px, 2.5vw, 48px);
  row-gap: clamp(48px, 6vh, 96px);
}

#team .roster-grid-partners-row-1 {
  grid-template-columns: repeat(4, clamp(200px, 18vw, 300px));
  gap: clamp(40px, 5vw, 80px);
  justify-content: center;
  align-items: start;
  max-width: 100%;
}

#team .roster-grid-partners-row-2 {
  grid-template-columns: repeat(3, clamp(200px, 18vw, 300px));
  gap: clamp(40px, 5vw, 80px);
  justify-content: center;
  align-items: start;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* === Roster card === */
#team .roster-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

#team .team-leadership-block.play .roster-card,
#team .team-partners-block.play .roster-card {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered card entry — starts AFTER the 1100ms mask wipe finishes,
   then 80ms apart across cards. */
#team .team-leadership-block.play .roster-card:nth-child(1) { transition: opacity 600ms ease 1100ms, transform 700ms var(--ease-out-quint) 1100ms; }
#team .team-leadership-block.play .roster-card:nth-child(2) { transition: opacity 600ms ease 1180ms, transform 700ms var(--ease-out-quint) 1180ms; }
#team .team-leadership-block.play .roster-card:nth-child(3) { transition: opacity 600ms ease 1260ms, transform 700ms var(--ease-out-quint) 1260ms; }
#team .team-leadership-block.play .roster-card:nth-child(4) { transition: opacity 600ms ease 1340ms, transform 700ms var(--ease-out-quint) 1340ms; }

#team .team-partners-block.play .roster-grid-partners-row-1 .roster-card:nth-child(1) { transition: opacity 600ms ease 1100ms, transform 700ms var(--ease-out-quint) 1100ms; }
#team .team-partners-block.play .roster-grid-partners-row-1 .roster-card:nth-child(2) { transition: opacity 600ms ease 1180ms, transform 700ms var(--ease-out-quint) 1180ms; }
#team .team-partners-block.play .roster-grid-partners-row-1 .roster-card:nth-child(3) { transition: opacity 600ms ease 1260ms, transform 700ms var(--ease-out-quint) 1260ms; }
#team .team-partners-block.play .roster-grid-partners-row-1 .roster-card:nth-child(4) { transition: opacity 600ms ease 1340ms, transform 700ms var(--ease-out-quint) 1340ms; }
#team .team-partners-block.play .roster-grid-partners-row-2 .roster-card:nth-child(1) { transition: opacity 600ms ease 1420ms, transform 700ms var(--ease-out-quint) 1420ms; }
#team .team-partners-block.play .roster-grid-partners-row-2 .roster-card:nth-child(2) { transition: opacity 600ms ease 1500ms, transform 700ms var(--ease-out-quint) 1500ms; }
#team .team-partners-block.play .roster-grid-partners-row-2 .roster-card:nth-child(3) { transition: opacity 600ms ease 1580ms, transform 700ms var(--ease-out-quint) 1580ms; }

/* === Roster frame (headshot placeholder + hover overlay) ===
   No max-width on desktop — the grid column width controls the frame size
   so every photo in a row is identical regardless of the caption beneath. */
#team .roster-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-slate-black);
  cursor: pointer;
}

#team .roster-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-slate-black) 0%, #2a2a2a 100%);
}

/* === Leadership headshots — wire to /assets/img/team/ === */
#team .leadership-frame[data-person="chad-bolduc"] {
  background-image: url('/assets/img/team/Chad_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .leadership-frame[data-person="genevieve-mcgreevy"] {
  background-image: url('/assets/img/team/Genevieve_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .leadership-frame[data-person="wes-burnley"] {
  background-image: url('/assets/img/team/Wes_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === Partner headshots (all 7 wired) === */
#team .partner-frame[data-person="stefan-rubicz"] {
  background-image: url('/assets/img/team/Stefan_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="josh-wilson"] {
  background-image: url('/assets/img/team/Josh_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="liz-stiles"] {
  background-image: url('/assets/img/team/Liz_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="holly-peters"] {
  background-image: url('/assets/img/team/Holly_bw.png');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="adma-kawage"] {
  background-image: url('/assets/img/team/Adma_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="luca-del-vescovo"] {
  background-image: url('/assets/img/team/Luca_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team .partner-frame[data-person="megan-monoghan"] {
  background-image: url('/assets/img/team/Megan_bw.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hide the dark placeholder gradient for every photo'd tile (now all 11
   leadership + partners have a real headshot). */
#team .roster-frame[data-person="chad-bolduc"] .roster-placeholder,
#team .roster-frame[data-person="genevieve-mcgreevy"] .roster-placeholder,
#team .roster-frame[data-person="wes-burnley"] .roster-placeholder,
#team .roster-frame[data-person="stefan-rubicz"] .roster-placeholder,
#team .roster-frame[data-person="josh-wilson"] .roster-placeholder,
#team .roster-frame[data-person="liz-stiles"] .roster-placeholder,
#team .roster-frame[data-person="holly-peters"] .roster-placeholder,
#team .roster-frame[data-person="adma-kawage"] .roster-placeholder,
#team .roster-frame[data-person="luca-del-vescovo"] .roster-placeholder,
#team .roster-frame[data-person="megan-monoghan"] .roster-placeholder {
  display: none;
}

#team .roster-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(20, 20, 20, 0.78);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  padding: 20px;
  text-align: center;
}

#team .roster-frame:hover .roster-hover {
  opacity: 1;
}

#team .roster-hover-label {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-off-white);
  font-size: clamp(10px, 0.85vw, 13px);
  opacity: 0.7;
}

#team .roster-hover-credits {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-off-white);
  font-size: clamp(14px, 1.3vw, 20px);
  line-height: 1.3;
}

/* === Caption (name + title under frame) === */
#team .roster-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#team .roster-name {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-yves-klein);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.15;
}

#team .roster-title {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-yves-klein);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.2;
  opacity: 0.85;
}

/* === Team closer === */
#team .team-closer-block {
  position: relative;
  overflow: hidden;
  margin-top: clamp(160px, 22vh, 280px);
  text-align: center;
}

/* Full-bleed background video sits behind the centered headline. */
#team .team-closer-block > .team-closer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-slate-black);
}

#team .team-closer-block > .team-closer-bg > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle dark scrim so the off-white text stays legible during bright frames. */
#team .team-closer-block > .team-closer-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  z-index: 1;
  pointer-events: none;
}

#team .team-closer-block > .team-closer-content {
  position: relative;
  z-index: 2;
  /* Mobile-friendly inside-padding so text isn't pinned to viewport edges
     when the bg breaks out of the section's content padding later. */
  padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 60px);
}

/* Text flips to off-white now that it sits over a darker video. */
#team .team-closer-content h2,
#team .team-closer-content p,
#team .team-closer-block > .team-closer-content .team-closer-headline,
#team .team-closer-block > .team-closer-content .team-closer-sub {
  color: var(--color-off-white);
}

#team .team-closer-headline {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: var(--type-display-headline);
  color: var(--color-slate-black);
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

#team .team-closer-sub {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-size: var(--type-hero-supporting);
  color: var(--color-slate-black);
  max-width: 880px;
  margin: clamp(28px, 4vh, 56px) auto 0;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

#team .team-closer-block.play .team-closer-headline {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 900ms var(--ease-out-quint);
}

#team .team-closer-block.play .team-closer-sub {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease 600ms, transform 900ms var(--ease-out-quint) 600ms;
}

/* === "Work with us" CTA (mirrors the "let's fly" CTA pattern) === */
#team .team-cta-block {
  margin-top: clamp(60px, 8vh, 120px);
  margin-bottom: clamp(60px, 8vh, 120px);
  text-align: center;
}

#team .team-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  position: relative;
  opacity: 0;
  will-change: opacity;
}

#team .team-cta-link .cta-text {
  font-family: 'rizado-script', 'Allura', cursive;
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-cta-script);
  color: var(--color-yves-klein);
  line-height: 0.9;
  display: inline-block;
  padding-bottom: 0.18em;
  transform: translate(-20px, 10px) rotate(-6deg);
  transition: transform 900ms var(--ease-out-quint), opacity 600ms ease;
  will-change: transform;
}

#team .team-cta-link .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--type-cta-arrow);
  height: var(--type-cta-arrow);
  color: var(--color-yves-klein);
  transform: translateX(-32px);
  transition: transform 700ms var(--ease-out-quint), opacity 500ms ease;
  will-change: transform;
  opacity: 0;
}

#team .team-cta-link .cta-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  overflow: visible;
}

#team .team-cta-link .arrow-line {
  transition: transform 480ms var(--ease-out-quint);
  transform-origin: left center;
}

#team .team-cta-link .arrow-head {
  transition: transform 480ms var(--ease-out-quint);
  transform-origin: 56px 32px;
}

#team .team-cta-block.play .team-cta-link {
  opacity: 1;
}

#team .team-cta-block.play .team-cta-link .cta-text {
  opacity: 1;
  transform: translate(0, 0) rotate(-4deg);
}

#team .team-cta-block.play .team-cta-link .cta-arrow {
  opacity: 1;
  transform: translateX(0);
  transition: transform 700ms var(--ease-out-quint) 280ms, opacity 500ms ease 280ms;
}

/* CTA hover — same lift + extend pattern as "let's fly" */
#team .team-cta-block.play .team-cta-link:hover .cta-text {
  transform: translate(4px, -4px) rotate(-2deg);
  transition: transform 480ms var(--ease-out-quint);
}
#team .team-cta-block.play .team-cta-link:hover .cta-arrow {
  transform: translateX(14px);
  transition: transform 480ms var(--ease-out-quint);
}
#team .team-cta-block.play .team-cta-link:hover .arrow-line {
  transform: scaleX(1.18);
}
#team .team-cta-block.play .team-cta-link:hover .arrow-head {
  transform: translateX(8px);
}

/* ============================================================
   SECTION 6 — SERVICES  (#services)
   Title mask wipe → 4-line intro rise → 3x2 service tile grid
   ============================================================ */
#services {
  position: relative;
  background: var(--color-off-white);
  padding: clamp(120px, 18vh, 240px) clamp(48px, 6vw, 120px);
}

/* === Section title with full-bleed mask wipe (same as #work / #team) === */
#services .services-title-wrap {
  position: relative;
  display: block;
  width: 100%;
  /* Big gap below the title — leaves room for a future hero video / image
     between the title and the 4-line intro. */
  margin-bottom: clamp(160px, 22vh, 280px);
}

#services .services-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: var(--type-section-title);
  color: var(--color-slate-black);
  margin: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}

#services .services-mask {
  position: absolute;
  top: -0.55em;
  bottom: -0.55em;
  left: 0;
  right: calc(-1 * clamp(48px, 6vw, 120px));
  background: var(--color-yves-klein);
  transform-origin: right center;
  transform: scaleX(1);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}

#services.play .services-mask {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-mask-wipe);
}

/* === Four-line intro — sequential line-rise === */
#services .services-intro {
  text-align: center;
  margin-bottom: clamp(220px, 28vh, 360px);
}

#services .intro-line {
  display: block;
  overflow: hidden;
  line-height: 1.0;
}

#services .intro-text {
  display: inline-block;
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(28px, 3.6vw, 56px);
  color: var(--color-slate-black);
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
  padding: 0.02em 0;
}

#services .blue-word {
  color: var(--color-yves-klein);
}

#services.play .intro-line:nth-child(1) .intro-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 1200ms, opacity 500ms ease 1200ms;
}
#services.play .intro-line:nth-child(2) .intro-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 1480ms, opacity 500ms ease 1480ms;
}
#services.play .intro-line:nth-child(3) .intro-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 1760ms, opacity 500ms ease 1760ms;
}
#services.play .intro-line:nth-child(4) .intro-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 2040ms, opacity 500ms ease 2040ms;
}

/* === 3 x 2 service tile grid === */
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
}

#services .service-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-slate-black);
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Staggered tile entry — begins ~2600ms (after the 4-line intro completes). */
#services.play .service-tile:nth-child(1) { transition: opacity 600ms ease 2600ms, transform 700ms var(--ease-out-quint) 2600ms; opacity: 1; transform: translateY(0); }
#services.play .service-tile:nth-child(2) { transition: opacity 600ms ease 2680ms, transform 700ms var(--ease-out-quint) 2680ms; opacity: 1; transform: translateY(0); }
#services.play .service-tile:nth-child(3) { transition: opacity 600ms ease 2760ms, transform 700ms var(--ease-out-quint) 2760ms; opacity: 1; transform: translateY(0); }
#services.play .service-tile:nth-child(4) { transition: opacity 600ms ease 2840ms, transform 700ms var(--ease-out-quint) 2840ms; opacity: 1; transform: translateY(0); }
#services.play .service-tile:nth-child(5) { transition: opacity 600ms ease 2920ms, transform 700ms var(--ease-out-quint) 2920ms; opacity: 1; transform: translateY(0); }
#services.play .service-tile:nth-child(6) { transition: opacity 600ms ease 3000ms, transform 700ms var(--ease-out-quint) 3000ms; opacity: 1; transform: translateY(0); }

/* Background — per-tile photos sized to fill the frame, scale on hover. */
#services .tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 600ms var(--ease-out-quint);
}

/* Per-tile background images — matched by tile order via :nth-of-type.
   HTML order: Strategy, Brand Activations, Creative, Production, Social, PR. */
#services .service-tile:nth-of-type(1) .tile-bg { background-image: url('/assets/img/services/STRATEGY.png'); }
#services .service-tile:nth-of-type(2) .tile-bg { background-image: url('/assets/img/services/BRAND.png'); }
#services .service-tile:nth-of-type(3) .tile-bg { background-image: url('/assets/img/services/CREATIVE.png'); }
#services .service-tile:nth-of-type(4) .tile-bg { background-image: url('/assets/img/services/PRODUCTION.png'); }
#services .service-tile:nth-of-type(5) .tile-bg { background-image: url('/assets/img/services/SOCIAL.png'); }
#services .service-tile:nth-of-type(6) .tile-bg { background-image: url('/assets/img/services/PR.png'); }

#services .service-tile:hover .tile-bg {
  transform: scale(1.04);
}

/* Dark scrim — top-lighter to bottom-darker gradient so the centered title
   stays legible regardless of where the photo's bright areas land.
   Deepens on hover so the bullet list reads cleanly. */
#services .tile-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.45) 0%, rgba(20, 20, 20, 0.65) 100%);
  transition: background 320ms ease;
}

#services .service-tile:hover .tile-scrim {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.75) 0%, rgba(20, 20, 20, 0.85) 100%);
}

/* Title — centered at rest, slides up + shrinks on hover */
#services .tile-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 clamp(14px, 1.5vw, 22px);
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(34px, 3.6vw, 56px);
  color: var(--color-off-white);
  text-align: center;
  transition:
    top 500ms var(--ease-out-quint),
    transform 500ms var(--ease-out-quint),
    font-size 500ms var(--ease-out-quint);
  z-index: 3;
}

#services .service-tile:hover .tile-title {
  top: clamp(16px, 3vh, 28px);
  transform: translateY(0);
  font-size: clamp(24px, 2.6vw, 40px);
}

/* Bullets — hidden at rest, fade in centered between top title and tile bottom */
#services .tile-bullets {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(64px, 10vh, 100px);
  bottom: clamp(24px, 3vh, 40px);
  padding: 0 clamp(20px, 2.4vw, 36px);
  color: var(--color-off-white);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms ease 80ms, transform 500ms var(--ease-out-quint) 80ms;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#services .service-tile:hover .tile-bullets {
  opacity: 1;
  transform: translateY(0);
}

#services .tile-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  width: 100%;
}

#services .tile-bullets ul li {
  color: var(--color-off-white);
  line-height: 1.25;
}

/* Per-tile bullet sizing — keeps every list balanced regardless of count. */
#services .service-tile[data-count="5"] .tile-bullets ul li {
  font-size: clamp(20px, 1.9vw, 28px);
  padding: 12px 0;
}
#services .service-tile[data-count="9"] .tile-bullets ul li {
  font-size: clamp(16px, 1.5vw, 22px);
  padding: 7px 0;
}
#services .service-tile[data-count="10"] .tile-bullets ul li {
  font-size: clamp(15px, 1.4vw, 20px);
  padding: 6px 0;
}
#services .service-tile[data-count="17"] .tile-bullets ul li {
  font-size: clamp(13px, 1.25vw, 17px);
  padding: 4.5px 0;
  line-height: 1.25;
}

/* ============================================================
   COLLABORATE PAGE  (#collaborate)
   Title mask wipe → form fields stagger up → closer lines rise
   → "Let's fly" Rizado sweeps in → email link rises.
   ============================================================ */
#collaborate {
  position: relative;
  background: var(--color-off-white);
  padding: clamp(120px, 16vh, 220px) clamp(48px, 6vw, 120px);
  min-height: 100vh;
  overflow: hidden;
}

/* === TITLE — mask wipe === */
#collaborate .collab-title-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: clamp(80px, 12vh, 160px);
}

#collaborate .collab-title {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(48px, 7vw, 110px);
  color: var(--color-slate-black);
  margin: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}

#collaborate .collab-title .blue-word { color: var(--color-yves-klein); }

#collaborate .collab-title-mask {
  position: absolute;
  top: -0.55em;
  bottom: -0.55em;
  left: 0;
  right: calc(-1 * clamp(48px, 6vw, 120px));
  background: var(--color-yves-klein);
  transform-origin: right center;
  transform: scaleX(1);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}

#collaborate.play .collab-title-mask {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-mask-wipe);
}

/* === FORM === */
#collaborate .collab-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(28px, 3.5vh, 48px);
  margin-bottom: clamp(120px, 16vh, 200px);
}

#collaborate .collab-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

#collaborate .collab-field-full { grid-column: 1 / -1; }

#collaborate.play .collab-field:nth-child(1) { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1300ms, opacity 500ms ease 1300ms; }
#collaborate.play .collab-field:nth-child(2) { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1430ms, opacity 500ms ease 1430ms; }
#collaborate.play .collab-field:nth-child(3) { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1560ms, opacity 500ms ease 1560ms; }
#collaborate.play .collab-field:nth-child(4) { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1690ms, opacity 500ms ease 1690ms; }
#collaborate.play .collab-field:nth-child(5) { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1820ms, opacity 500ms ease 1820ms; }
#collaborate.play .collab-submit-row { opacity: 1; transform: translateY(0); transition: transform 700ms var(--ease-out-quint) 1990ms, opacity 500ms ease 1990ms; }

#collaborate .collab-field label {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--color-slate-black);
}

#collaborate .collab-field input,
#collaborate .collab-field textarea {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--color-slate-black);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-slate-black);
  padding: 10px 0;
  outline: none;
  width: 100%;
  transition: border-color 240ms ease;
  resize: none;
}

#collaborate .collab-field input:focus,
#collaborate .collab-field textarea:focus {
  border-bottom-color: var(--color-yves-klein);
}

#collaborate .collab-field textarea {
  min-height: 140px;
  line-height: 1.4;
}

#collaborate .collab-submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 3vh, 40px);
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

#collaborate .collab-submit-btn {
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 1.9vw, 30px);
  background: transparent;
  color: var(--color-slate-black);
  border: 2px solid var(--color-slate-black);
  padding: 14px 36px;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}

#collaborate .collab-submit-btn:hover {
  background: var(--color-yves-klein);
  border-color: var(--color-yves-klein);
  color: var(--color-off-white);
}

/* === CLOSER === */
#collaborate .collab-closer {
  text-align: center;
  margin-top: clamp(40px, 6vh, 80px);
}

#collaborate .collab-closer .closer-line {
  display: block;
  overflow: hidden;
  line-height: 1.1;
}

#collaborate .collab-closer .closer-text {
  display: inline-block;
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: clamp(28px, 3.4vw, 52px);
  color: var(--color-slate-black);
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
  padding: 0.02em 0;
}

#collaborate .collab-closer .closer-text .blue-word {
  color: var(--color-yves-klein);
}

#collaborate.play .collab-closer .closer-line:nth-child(1) .closer-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 2400ms, opacity 500ms ease 2400ms;
}
#collaborate.play .collab-closer .closer-line:nth-child(2) .closer-text {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms var(--ease-out-quint) 2680ms, opacity 500ms ease 2680ms;
}

#collaborate .lets-fly-wrap {
  margin: clamp(20px, 3vh, 40px) 0 clamp(40px, 6vh, 80px);
  display: inline-block;
  overflow: visible;
  padding: 0.15em 0.1em 0.25em;
  line-height: 1;
}

#collaborate .lets-fly {
  font-family: 'rizado-script', cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--color-yves-klein);
  font-size: clamp(80px, 11vw, 180px);
  line-height: 1;
  display: inline-block;
  transform: translateY(110%) rotate(-2deg);
  opacity: 0;
  will-change: transform, opacity;
}

#collaborate.play .lets-fly {
  transform: translateY(0) rotate(-2deg);
  opacity: 1;
  transition: transform 1000ms var(--ease-out-quint) 3000ms, opacity 600ms ease 3000ms;
}

#collaborate .email-line-wrap {
  overflow: hidden;
  display: block;
}

#collaborate .email-line {
  font-family: coolvetica, sans-serif;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--color-slate-black);
  display: inline-block;
  border-bottom: 1.5px solid var(--color-slate-black);
  padding-bottom: 2px;
  text-decoration: none;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}

#collaborate.play .email-line {
  transform: translateY(0);
  opacity: 1;
  transition: transform 700ms var(--ease-out-quint) 3700ms, opacity 400ms ease 3700ms, color 240ms ease, border-color 240ms ease;
}

#collaborate .email-line:hover {
  color: var(--color-yves-klein);
  border-bottom-color: var(--color-yves-klein);
}

/* === Thank-you message — replaces the form after successful submit === */
#collaborate .collab-thanks {
  text-align: center;
  margin: clamp(80px, 12vh, 160px) 0 clamp(120px, 16vh, 200px);
}

#collaborate .collab-thanks .closer-line {
  display: block;
  overflow: hidden;
  line-height: 1.1;
}

#collaborate .collab-thanks .closer-text {
  display: inline-block;
  font-family: coolvetica, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: clamp(36px, 5vw, 72px);
  color: var(--color-yves-klein);
  animation: collabThanksRise 900ms var(--ease-out-quint) forwards;
  opacity: 0;
  transform: translateY(110%);
}

@keyframes collabThanksRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   MOBILE BREAKPOINT
   ============================================================ */
@media (max-width: 768px) {
  /* Sizzle hero: knockout plate fills more of the screen */
  #sizzle-hero .knockout-plate,
  #sizzle-hero .knockout-plate-wrap,
  #sizzle-hero .knockout-plate-img,
  #sizzle-hero .knockout-plate-svg {
    width: 75%;
  }

  /* Section 02 — drop the absolute video column back into normal flow
     so it stacks below the text on small screens. */
  #platforms .text-col {
    padding-right: 0;
  }
  #platforms .img-col {
    position: static;
    transform: none;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 24px auto 0;
  }
  #platforms .platform-video-frame {
    aspect-ratio: 9 / 14;
    height: auto;
    max-height: 60vh;
  }

  /* WORK title mask — pull mask in so it doesn't go off the screen */
  #work .work__mask {
    right: 0;
  }

  /* Work tiles scale down */
  .work-tile {
    width: clamp(240px, 70vw, 380px);
  }

  /* All sections — tighter padding on mobile, content-height driven.
     #one-partner intentionally omitted — see consolidated block below. */
  #hero,
  #platforms,
  #work,
  #work-showcase,
  #work-cta {
    min-height: auto;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 40px);
  }

  /* Nav — smaller font + flex wrap */
  nav.site-nav {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  nav.site-nav a {
    font-size: 11px;
  }

  /* Section 5 — Team: stack photo above text, tighter rhythm */
  #team {
    padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 40px);
    gap: clamp(80px, 12vh, 140px);
  }
  #team .team-title-block {
    margin-right: calc(-1 * clamp(20px, 5vw, 40px));
  }
  #team .team-mask {
    right: 0;
  }

  /* 5.2 gap block — keep full-bleed, but use mobile padding */
  #team .team-gap-block {
    min-height: clamp(480px, 75vh, 640px);
    margin-top: clamp(48px, 8vh, 80px);
    margin-left: calc(-1 * clamp(20px, 5vw, 40px));
    margin-right: calc(-1 * clamp(20px, 5vw, 40px));
    width: 100vw;
  }
  #team .team-gap-content {
    padding: 0 clamp(20px, 5vw, 40px);
  }

  /* 5.3 continents block — stack photo above text */
  #team .team-continents-block {
    margin-top: clamp(60px, 10vh, 100px);
    min-height: auto;
  }
  #team .team-continents-block .img-col {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: clamp(360px, 65vw, 520px);
    margin-left: 0;
    margin-bottom: 32px;
  }
  #team .team-continents-block .group-img {
    transform: translateY(-40px);
  }
  #team .team-continents-block.photo-play .group-img {
    transform: translateY(0);
  }
  #team .team-continents-block .text-col {
    padding-left: 0;
  }
  #team .continents-headline {
    white-space: normal;
  }

  /* Founders block — KEEP only the eyebrow rules here. The video frame,
     overlays grid, column ordering, and per-element typography all live
     in the consolidated FOUNDERS block further below — single source of
     truth, prevents cascade conflicts. */
  #team .team-founders-block {
    margin-left: calc(-1 * clamp(20px, 5vw, 40px));
    margin-right: calc(-1 * clamp(20px, 5vw, 40px));
  }
  #team .founders-eyebrow {
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
    margin-bottom: clamp(20px, 4vh, 40px);
  }
  #team .founders-eyebrow-text {
    font-size: clamp(48px, 14vw, 80px);
  }

  /* Roster grids — single column on mobile */
  #team .roster-grid-leadership,
  #team .roster-grid-partners-row-1,
  #team .roster-grid-partners-row-2 {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vh, 56px);
    justify-content: stretch;
    align-items: start;
    max-width: 100%;
  }
  #team .team-leadership-block,
  #team .team-partners-block {
    margin-top: clamp(60px, 10vh, 100px);
  }
  #team .roster-title-mask {
    left: calc(-1 * clamp(20px, 5vw, 40px));
    right: calc(-1 * clamp(20px, 5vw, 40px));
  }
  #team .team-closer-block {
    margin-top: clamp(96px, 14vh, 160px);
  }
  #team .roster-frame {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  #team .roster-name {
    font-size: 18px;
  }
  #team .roster-title {
    font-size: 14px;
  }

  /* Section 6 — Services: tighter padding, 1-col grid, scaled intro */
  #services {
    padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 40px);
  }
  #services .services-mask {
    right: calc(-1 * clamp(20px, 5vw, 40px));
  }
  #services .services-title-wrap {
    margin-bottom: clamp(80px, 14vh, 140px);
  }
  #services .services-intro {
    margin-bottom: clamp(100px, 16vh, 160px);
  }
  #services .intro-text {
    font-size: clamp(22px, 5.5vw, 34px);
  }
  #services .services-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vh, 28px);
  }
  #services .service-tile {
    aspect-ratio: 4 / 5;
    max-width: 460px;
    margin: 0 auto;
  }
  #services .tile-title {
    font-size: clamp(28px, 7vw, 38px);
  }
  #services .service-tile:hover .tile-title {
    font-size: clamp(20px, 5vw, 28px);
  }
  #services .service-tile[data-count="5"] .tile-bullets ul li,
  #services .service-tile[data-count="9"] .tile-bullets ul li,
  #services .service-tile[data-count="10"] .tile-bullets ul li {
    font-size: 16px;
    padding: 7px 0;
  }
  #services .service-tile[data-count="17"] .tile-bullets ul li {
    font-size: 15px;
    padding: 5px 0;
  }

  /* Collaborate page — single-column form on mobile */
  #collaborate {
    padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 40px);
  }
  #collaborate .collab-title-mask {
    right: calc(-1 * clamp(20px, 5vw, 40px));
  }
  #collaborate .collab-form {
    grid-template-columns: 1fr;
  }
  #collaborate .collab-submit-row {
    justify-content: stretch;
  }
  #collaborate .collab-submit-btn {
    width: 100%;
  }

  /* ============================================================
     COMPREHENSIVE MOBILE REWORK
     Aligned to design intent: text-on-video stays on video, text-as-
     bridge sits above video, video-as-supporting sits below text.
     Tight section padding and tight intra-section spacing so blocks
     read as connected moments, not isolated full-screens. The earlier
     mobile rules above remain; these come last and override where
     selectors overlap.
     ============================================================ */

  /* ===== UNIVERSAL: tighter section padding (override earlier rule) =====
     #one-partner intentionally omitted — it has its own consolidated
     padding rule below. */
  #hero,
  #platforms,
  #work,
  #work-showcase,
  #work-cta,
  #team,
  #services,
  #collaborate {
    padding: clamp(48px, 7vh, 80px) clamp(20px, 5vw, 40px);
  }
  #team {
    gap: clamp(48px, 7vh, 80px);
  }

  /* ===== 1. SIZZLE HERO — full-screen video, knockout logo ON video ===== */
  #sizzle-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: auto;
    padding: 0;
    background: var(--color-slate-black);
    overflow: hidden;
    display: block;
  }
  #sizzle-hero #sizzle-video,
  #sizzle-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-slate-black);
  }
  /* Knockout logo overlay — centered ON the video, scaled for mobile */
  #sizzle-hero .knockout-plate-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82%;
    max-width: 360px;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }

  /* ===== 2. HERO (CAPE letter scatter) — no overrides, already works ===== */

  /* ===== 3. PLATFORMS — headline + body, then horizontal video below ===== */
  #platforms .img-col {
    margin-top: clamp(20px, 3vh, 32px);
    margin-bottom: 0;
    max-width: 100%;
  }
  #platforms .platform-video-frame {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
    background: var(--color-slate-black);
  }
  #platforms #platform-video,
  #platforms .platform-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-slate-black);
  }

  /* ===== #one-partner (mobile) — single consolidated source of truth =====
     Text content stacks above the video as a bridge moment, both inside
     a column-flex container. Symmetrical padding so the section feels
     centered between sizzle hero above and the next section below. */
  #one-partner {
    padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 40px);
    background: var(--color-off-white);
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  #one-partner .one-partner-content {
    order: 1;
    margin-bottom: clamp(56px, 9vh, 96px);
    position: relative;
    z-index: 1;
    color: var(--color-slate-black);
    text-align: center;
  }
  #one-partner .one-partner-bg,
  #one-partner > .one-partner-bg {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--color-slate-black);
    margin: 0;
  }
  #one-partner .one-partner-bg video,
  #one-partner > .one-partner-bg > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Scrim hidden on mobile — text isn't over the video */
  #one-partner .one-partner-bg::after,
  #one-partner > .one-partner-bg::after {
    display: none;
  }
  /* Headline: slate, mobile size, gap to body */
  #one-partner .one-partner-content h2,
  #one-partner .one-partner__headline {
    color: var(--color-slate-black);
    font-size: clamp(30px, 7.5vw, 44px);
    line-height: 1.05;
    margin: 0 0 clamp(24px, 4vh, 40px);
  }
  /* Body paragraphs: slate, mobile size */
  #one-partner .one-partner-content p,
  #one-partner .one-partner-content .body-block,
  #one-partner .one-partner-content .body-block.regular,
  #one-partner .one-partner__body,
  #one-partner .one-partner__body--top,
  #one-partner .one-partner__body--bottom {
    color: var(--color-slate-black);
    font-size: clamp(15px, 4vw, 19px);
    line-height: 1.5;
    max-width: 100%;
    padding: 0 16px;
    margin: 0 0 clamp(12px, 2vh, 20px);
  }
  /* Accent block stays Yves Klein blue — covers both spec and BEM names */
  #one-partner .one-partner-content .body-block.accent,
  #one-partner .one-partner__accent {
    color: var(--color-yves-klein);
    font-size: clamp(15px, 4vw, 19px);
    line-height: 1.5;
    margin: 0 0 clamp(12px, 2vh, 20px);
  }
  /* Last body block has no bottom margin (section padding handles it) */
  #one-partner .one-partner__body--bottom {
    margin-bottom: 0;
  }

  /* ===== 5. TEAM INTRO (team-gap-block) — text STAYS ON video ===== */
  #team .team-gap-block {
    position: relative;
    min-height: clamp(420px, 65vh, 560px);
    height: auto;
    margin-top: clamp(32px, 5vh, 56px);
    margin-bottom: 0;
    background: var(--color-slate-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #team .team-gap-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--color-slate-black);
  }
  #team .team-gap-bg video,
  #team #team-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Text stays on video, off-white, smaller font */
  #team .team-gap-content {
    position: relative;
    z-index: 2;
    padding: 0 clamp(20px, 5vw, 40px);
    text-align: center;
  }
  #team .team-gap-headline {
    color: var(--color-off-white);
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.1;
  }

  /* ===== 6. CONTINENTS BLOCK — TEXT FIRST, then photo BELOW =====
     Reverse the desktop layout (which had photo pinned left) using
     flex order. Tight gap between text and photo. */
  #team .team-continents-block {
    display: flex;
    flex-direction: column;
    margin-top: clamp(32px, 5vh, 56px);
    min-height: auto;
  }
  #team .team-continents-block .text-col {
    order: 1;
    width: 100%;
    padding: 0;
    text-align: left;
  }
  #team .team-continents-block .img-col {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    margin: clamp(20px, 3vh, 32px) 0 0;
  }
  #team .team-continents-block .group-img {
    position: relative;
    width: 100%;
    height: auto;
    transform: translateY(0);
  }
  #team .team-continents-block.photo-play .group-img {
    transform: translateY(0);
  }
  #team .team-continents-block .group-img img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
  }
  #team .continents-headline {
    white-space: normal;
    font-size: clamp(32px, 8vw, 48px);
    line-height: 1.05;
    margin: 0 0 clamp(16px, 3vh, 28px);
  }
  #team .continents-body {
    font-size: clamp(15px, 4vw, 19px);
    line-height: 1.5;
    margin: 0;
  }

  /* ===== FOUNDERS (mobile) — single consolidated source of truth =====
     Video at top, then each founder's text block stacked beneath in the
     order: name → title → bio → pull. Titles are Yves Klein blue. */
  #team .team-founders-block {
    margin-top: clamp(32px, 5vh, 56px);
  }
  #team .founders-video-frame {
    position: relative;
    height: auto;
    min-height: 0;
    background: var(--color-slate-black);
    display: flex;
    flex-direction: column;
  }
  #team .founders-video-frame > video,
  #team #founders-video {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
  /* Hide gradient scrim — text is below video on cream, not on video */
  #team .founders-overlays::before {
    display: none;
  }
  /* Overlays container: single-column grid; founder columns are flex stacks */
  #team .founders-overlays,
  #team .founders-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: clamp(24px, 4vh, 48px) clamp(20px, 5vw, 40px);
    background: var(--color-off-white);
    position: relative;
  }
  /* Override desktop's display:contents so the columns become real flex
     containers with their own children reordered via flex `order`. */
  #team .founder-col,
  #team .col-jess,
  #team .col-brown {
    display: flex;
    flex-direction: column;
  }
  /* Order within each founder block: name → title → bio → pull quote */
  #team .founder-col .f-name,
  #team .col-jess .f-name,
  #team .col-brown .f-name        { order: 1; }
  #team .founder-col .f-title,
  #team .col-jess .f-title,
  #team .col-brown .f-title       { order: 2; }
  #team .founder-col .f-bio-wrap,
  #team .col-jess .f-bio-wrap,
  #team .col-brown .f-bio-wrap    { order: 3; }
  #team .founder-col .f-pull,
  #team .col-jess .f-pull,
  #team .col-brown .f-pull        { order: 4; }
  /* Founder NAME — slate, big, tight (no margins) */
  #team .founder-col .f-name,
  #team .col-jess .f-name,
  #team .col-brown .f-name {
    color: var(--color-slate-black);
    font-size: clamp(32px, 8vw, 48px);
    line-height: 1.05;
    margin: 0;
  }
  /* Founder TITLE — Yves Klein blue, uppercase, tight under name */
  #team .founder-col .f-title,
  #team .col-jess .f-title,
  #team .col-brown .f-title {
    color: var(--color-yves-klein);
    text-transform: uppercase;
    font-family: coolvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.2;
    margin-top: clamp(4px, 1vh, 8px);
  }
  /* Founder BIO wrap — sits under title with breathing room */
  #team .founder-col .f-bio-wrap,
  #team .col-jess .f-bio-wrap,
  #team .col-brown .f-bio-wrap {
    margin-top: clamp(24px, 4vh, 40px);
  }
  #team .founder-col .f-bio,
  #team .col-jess .f-bio,
  #team .col-brown .f-bio {
    color: var(--color-slate-black);
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.5;
    margin: 0;
  }
  /* Founder PULL quote — closes each founder's block under the bio */
  #team .founder-col .f-pull,
  #team .col-jess .f-pull,
  #team .col-brown .f-pull {
    color: var(--color-slate-black);
    font-family: coolvetica, sans-serif;
    font-weight: 700;
    text-transform: lowercase;
    font-size: clamp(18px, 4.6vw, 22px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-top: clamp(24px, 4vh, 40px);
    margin-bottom: 0;
  }
  /* Large clear break between Jessica's block and Brown's block */
  #team .col-brown .f-name {
    margin-top: clamp(96px, 14vh, 160px);
  }

  /* ===== LEADERSHIP + PARTNERS — already 1-col stacked above ===== */

  /* ===== 10. TEAM CLOSER — text STAYS ON video ===== */
  #team .team-closer-block {
    position: relative;
    min-height: clamp(380px, 60vh, 520px);
    margin-top: clamp(32px, 5vh, 56px);
    padding: 0;
    background: var(--color-slate-black);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #team .team-closer-block > .team-closer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--color-slate-black);
  }
  #team .team-closer-block > .team-closer-bg > video,
  #team #team-last-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Keep the dark scrim — text is on video on mobile too */
  #team .team-closer-block > .team-closer-bg::after {
    display: block;
  }
  /* Text stays on video, off-white */
  #team .team-closer-block > .team-closer-content,
  #team .team-closer-content h2,
  #team .team-closer-content p,
  #team .team-closer-headline,
  #team .team-closer-sub {
    color: var(--color-off-white);
  }
  #team .team-closer-block > .team-closer-content {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 4vh, 56px) clamp(20px, 5vw, 40px);
    text-align: center;
  }
  #team .team-closer-headline {
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.05;
  }
  #team .team-closer-sub {
    font-size: clamp(15px, 4vw, 19px);
    line-height: 1.4;
    margin-top: clamp(12px, 2vh, 20px);
  }

  /* ===== 11. ROSTER CARDS — tap-to-reveal credits ===== */
  #team .roster-frame.is-open .roster-hover,
  #team .leadership-frame.is-open .roster-hover,
  #team .partner-frame.is-open .roster-hover {
    opacity: 1;
    pointer-events: auto;
  }
  #team .roster-frame {
    cursor: pointer;
  }

  /* ===== 12. SERVICES TITLE — shrink to fit ===== */
  #services .services-title {
    font-size: clamp(48px, 14vw, 80px);
  }
  #services .services-title-wrap {
    margin-bottom: clamp(40px, 6vh, 64px);
  }
  #services .services-intro {
    margin-bottom: clamp(48px, 7vh, 80px);
  }

  /* ===== 13. SERVICES TILES — always-open, ensure rendering =====
     Override desktop aspect-ratio + absolute positioning so content
     drives the tile height. Title at top, bullets in remaining space. */
  #services .service-tile {
    aspect-ratio: auto;
    min-height: clamp(440px, 75vw, 560px);
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: block;
  }
  /* Title at top of tile */
  #services .tile-title {
    position: absolute;
    top: clamp(16px, 3vh, 28px);
    left: 0;
    right: 0;
    transform: translateY(0);
    text-align: center;
    font-size: clamp(22px, 6vw, 30px);
    z-index: 3;
    padding: 0 clamp(16px, 4vw, 28px);
  }
  /* Lock hover-state to match default so a pointer/stylus can't shift it */
  #services .service-tile:hover .tile-title {
    top: clamp(16px, 3vh, 28px);
    transform: translateY(0);
    font-size: clamp(22px, 6vw, 30px);
  }
  /* Bullets always visible, fill area below title */
  #services .tile-bullets {
    position: absolute;
    top: clamp(64px, 9vh, 96px);
    bottom: clamp(20px, 3vh, 32px);
    left: 0;
    right: 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #services .tile-bullets ul {
    list-style: none;
    padding: 0 clamp(20px, 5vw, 40px);
    margin: 0;
    width: 100%;
  }
  /* Darker scrim for legibility */
  #services .tile-scrim {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.6) 0%, rgba(20, 20, 20, 0.85) 100%);
  }
  /* Bullet sizes per data-count (preserve from prior pass) */
  #services .service-tile[data-count="5"] .tile-bullets ul li {
    font-size: clamp(15px, 4vw, 18px);
    padding: 8px 0;
  }
  #services .service-tile[data-count="9"] .tile-bullets ul li {
    font-size: clamp(13px, 3.5vw, 16px);
    padding: 6px 0;
  }
  #services .service-tile[data-count="10"] .tile-bullets ul li {
    font-size: clamp(13px, 3.4vw, 15px);
    padding: 5px 0;
  }
  #services .service-tile[data-count="17"] .tile-bullets ul li {
    font-size: clamp(11px, 3vw, 13px);
    padding: 3px 0;
    line-height: 1.25;
  }

  /* ===== 14. COLLABORATE — no regressions; first-block rules already apply ===== */

  /* ---- SERVICES TILES: render fix. The prior pass set
     aspect-ratio: auto + min-height which collapsed in some browsers;
     this restores aspect-ratio: 4/5 and ensures absolute children
     get a real positioning context. ---- */
  #services .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vh, 32px);
  }
  #services .service-tile {
    aspect-ratio: 4 / 5;
    max-width: 100%;
    width: 100%;
    margin: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: block;
  }

  /* Title at top, smaller — like desktop's hover state */
  #services .tile-title {
    position: absolute;
    top: clamp(18px, 4vh, 32px);
    left: 0;
    right: 0;
    transform: translateY(0);
    text-align: center;
    font-size: clamp(22px, 6.5vw, 32px);
    z-index: 3;
    padding: 0 clamp(16px, 4vw, 28px);
  }
  /* Lock hover-state to the default so it can't shift the title */
  #services .service-tile:hover .tile-title {
    top: clamp(18px, 4vh, 32px);
    transform: translateY(0);
    font-size: clamp(22px, 6.5vw, 32px);
  }

  /* Bullets visible always — fill area beneath title */
  #services .tile-bullets {
    position: absolute;
    top: clamp(60px, 9vh, 90px);
    bottom: clamp(20px, 3vh, 32px);
    left: 0;
    right: 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 3;
    padding: 0 clamp(20px, 5vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #services .tile-bullets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Scrim darker — this is the default state on mobile */
  #services .tile-scrim {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.65) 0%, rgba(20, 20, 20, 0.8) 100%);
  }

  /* Bullet sizes per data-count — readable mobile defaults */
  #services .service-tile[data-count="5"] .tile-bullets ul li,
  #services .service-tile[data-count="9"] .tile-bullets ul li,
  #services .service-tile[data-count="10"] .tile-bullets ul li {
    font-size: clamp(13px, 3.5vw, 16px);
    padding: 5px 0;
  }
  #services .service-tile[data-count="17"] .tile-bullets ul li {
    font-size: clamp(11px, 3vw, 13px);
    padding: 3px 0;
  }
}