/* ============================================================
   RealQuick Media
   Black / white, purple as a hairline accent + button flood.
   Type: Manrope throughout — thin weight for headers, no all-caps.
   Signature: wide wordmark masking the showreel video.
   ============================================================ */

:root {
  --ink:    #101012;
  --paper:  #F3F2EF;
  --purple: #5E17CC;

  --display: 'Manrope', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;

  --pad:   clamp(20px, 5vw, 80px);
  --maxw:  1380px;
  --ease:  cubic-bezier(.22, 1, .36, 1);

  --fs-hero: clamp(3.2rem, 11vw, 12rem);
  --fs-h2:   clamp(2.2rem, 5.2vw, 4.6rem);
  --fs-lede: clamp(1.15rem, 1.4vw + .8rem, 1.55rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- scroll morph: body owns bg + fg; sections transparent ---- */
body {
  --page-bg: var(--ink);
  --page-fg: var(--paper);
  background: var(--page-bg);
  color: var(--page-fg);
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.t-dark   { --page-bg: var(--ink);   --page-fg: var(--paper); }
body.t-light  { --page-bg: var(--paper); --page-fg: var(--ink); }
body.t-purple { --page-bg: color-mix(in srgb, var(--purple) 13%, #fff); --page-fg: var(--ink); }

/* thin-weight headers, sentence case */
h1, h2, h3 { font-family: var(--display); font-weight: 200; line-height: 1.0; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }

/* hairline helper that reads on either theme */
.rule { border-color: color-mix(in srgb, var(--page-fg) 16%, transparent); }

.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- utility label (no longer all-caps) ---- */
.eyebrow {
  font-family: var(--body); font-weight: 500; letter-spacing: .01em; font-size: .82rem;
  display: inline-flex; align-items: center; gap: .7em; opacity: .6;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex: none; }
.eyebrow__logo { height: 1.35em; width: auto; display: block; position: relative; top: .02em; }

/* ============================================================
   BUTTONS — purple floods in radially from the centre on hover.
   Sleek: no glow, no lift.
   ============================================================ */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  padding: 1.05em 2em; border-radius: 9999px;
  background: var(--page-fg); color: var(--page-bg); border: 1px solid var(--page-fg);
  transition: color .7s var(--ease), border-color .7s var(--ease), background-color .7s var(--ease);
}
.btn::before {
  content: ''; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--purple);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .85s var(--ease);
}
.btn:hover { color: #fff; background: transparent; border-color: var(--purple); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* ghost variant — hairline outline, no fill; purple flood still takes over on hover.
   Border matches the section hairlines; text softened but kept legible. */
.btn--ghost { background: transparent; color: color-mix(in srgb, var(--page-fg) 65%, transparent); border-color: color-mix(in srgb, var(--page-fg) 16%, transparent); }
.btn--ghost:hover { color: #fff; border-color: var(--purple); }

.link-underline { position: relative; font-family: var(--body); font-weight: 500; font-size: .95rem; letter-spacing: .01em; }
.link-underline::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--purple); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); }
.link-underline:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* ============================================================
   FROSTED NAV — full bar at top, condenses to a pill on scroll
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; display: flex; justify-content: center; padding: 16px 0; pointer-events: none; }
/* Expanded: bare elements floating on the page (no pill).
   Condensed: everything draws together into a frosted pill. */
.nav__pill {
  pointer-events: auto; width: 100%; max-width: var(--maxw); height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 var(--pad); color: var(--page-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%);
  transition: max-width .9s var(--ease), height .9s var(--ease), padding .9s var(--ease),
              background-color .7s var(--ease), border-color .7s var(--ease),
              -webkit-backdrop-filter .7s var(--ease), backdrop-filter .7s var(--ease),
              color .7s var(--ease);
}
/* condensed pill wears the liquid-glass material (theme-aware via --page-fg) */
.nav.is-scrolled .nav__pill {
  max-width: 620px; height: 52px; padding: 0 10px 0 22px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--page-fg) 10%, transparent) 0%,
    color-mix(in srgb, var(--page-fg) 3%, transparent) 48%,
    color-mix(in srgb, var(--page-fg) 6%, transparent) 100%);
  border-color: color-mix(in srgb, var(--page-fg) 16%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--page-fg) 22%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--page-fg) 8%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--page-fg) 6%, transparent),
    0 18px 40px -22px rgba(18, 10, 44, .35);
}

/* brand: stacked wordmark (expanded) crossfades to the chevron mark (condensed) */
.nav__brand { position: relative; display: block; height: 28px; width: 76px; transition: width .9s var(--ease); }
.nav.is-scrolled .nav__brand { width: 40px; }
.nav__logo { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: auto; display: block; transition: opacity .55s var(--ease); }
.nav__logo--full { height: 25px; opacity: 1; }
.nav__logo--mark { height: 22px; opacity: 0; }
.nav.is-scrolled .nav__logo--full { opacity: 0; }
.nav.is-scrolled .nav__logo--mark { opacity: 1; }
.nav__links { display: flex; gap: 1.9rem; }
.nav__links a { font-family: var(--body); font-weight: 500; font-size: .86rem; letter-spacing: .01em; opacity: .65; transition: opacity .3s; }
.nav__links a:hover { opacity: 1; }
.nav__cta {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--body); font-weight: 600; font-size: .82rem; letter-spacing: .01em;
  color: var(--page-bg); background: var(--page-fg);
  padding: .85em 1.5em; border-radius: 9999px; border: 1px solid var(--page-fg);
  transition: color .7s var(--ease), background-color .7s var(--ease), border-color .7s var(--ease);
}
.nav__cta::before {
  content: ''; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--purple);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .85s var(--ease);
}
.nav__cta:hover { color: #fff; background: transparent; border-color: var(--purple); }
.nav__cta:hover::before { transform: translate(-50%, -50%) scale(1); }

/* hamburger — hidden on desktop, shown ≤920px (see RESPONSIVE) */
.nav__toggle {
  display: none; pointer-events: auto; flex: none;
  width: 44px; height: 44px; margin-right: -8px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: var(--page-fg);
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-bar {
  width: 22px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__toggle.is-open .nav__toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle.is-open .nav__toggle-bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* full-screen overlay menu — inherits the current section's light/dark theme */
.navmenu {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--page-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.navmenu.is-open { opacity: 1; visibility: visible; }
.navmenu__links { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.navmenu__links a {
  font-family: var(--display); font-weight: 200; font-size: clamp(2rem, 9vw, 3.1rem);
  letter-spacing: -.02em; line-height: 1; color: var(--page-fg);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.navmenu__links a[aria-current="page"] { color: var(--purple); }
.navmenu.is-open .navmenu__links a { opacity: 1; transform: none; }
.navmenu.is-open .navmenu__links a:nth-child(1) { transition-delay: .06s; }
.navmenu.is-open .navmenu__links a:nth-child(2) { transition-delay: .11s; }
.navmenu.is-open .navmenu__links a:nth-child(3) { transition-delay: .16s; }
.navmenu.is-open .navmenu__links a:nth-child(4) { transition-delay: .21s; }
.navmenu.is-open .navmenu__links a:nth-child(5) { transition-delay: .28s; }
/* CTA link gets a pill outline to read as the primary action */
.navmenu__cta {
  margin-top: 1rem; font-family: var(--body) !important; font-weight: 500 !important;
  font-size: 1rem !important; padding: .9em 2em; border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--page-fg) 40%, transparent);
}
body.menu-open { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 5rem; }
.hero__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); }
.hero .eyebrow { margin-bottom: 2rem; }
.hero__title { font-family: var(--display); font-weight: 200; font-size: clamp(2.8rem, 8vw, 8.5rem); line-height: .98; letter-spacing: -.03em; margin-bottom: 2rem; }
/* "real." emphasises on load: regular -> italic lean -> bold.
   Manrope's variable weight axis lets the bold ramp tween smoothly;
   font-style can't tween, so the slant is animated with skewX. */
.hero__accent {
  display: inline-block; transform-origin: 0% 78%;
  font-weight: 200; transform: skewX(0deg);
  will-change: transform, font-weight; backface-visibility: hidden;
  animation: accentEmphasize 1.8s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes accentEmphasize {
  0%   { font-weight: 200; transform: skewX(0deg); }
  50%  { font-weight: 300; transform: skewX(-11deg); }
  100% { font-weight: 700; transform: skewX(-11deg); }
}
.hero__lede { max-width: 44ch; font-size: var(--fs-lede); font-weight: 300; line-height: 1.45; opacity: .82; }
.hero__cta { margin-top: 2.6rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

/* ============================================================
   ABOUT (light)
   ============================================================ */
.about { padding: clamp(6rem, 14vh, 11rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.about .eyebrow { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.about__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.about__statement { font-size: var(--fs-h2); font-weight: 200; line-height: 1.08; }
.about__body { font-size: 1.05rem; font-weight: 300; line-height: 1.65; display: flex; flex-direction: column; gap: 1.3rem; max-width: 46ch; padding-top: .6rem; }
.featured { font-family: var(--body); font-size: .9rem; line-height: 1.8; letter-spacing: .01em; opacity: .7; margin-top: 1rem; padding-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
.featured__label { display: block; font-weight: 500; font-size: .82rem; opacity: .55; margin-bottom: 1rem; }
.featured__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.2rem); }
.press { display: block; width: auto; height: clamp(26px, 3.2vw, 34px); object-fit: contain; opacity: .7; transition: opacity .3s; }
.press:hover { opacity: 1; }
/* single-line wordmarks read larger than the stacked logos at the same height,
   so trim them down to keep the row optically balanced */
.press--line { height: clamp(17px, 2.1vw, 23px); }

/* ============================================================
   ROSTER
   ============================================================ */
.roster { padding: clamp(5rem, 12vh, 9rem) 0; }
.roster__head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 5vh, 4rem); padding: 0 var(--pad); }
.roster .eyebrow { margin-bottom: 1.6rem; }
.roster__title { font-size: var(--fs-h2); font-weight: 200; max-width: 22ch; }
/* the play-button outline (your logo); draws/undraws scrubbed by scroll (see script.js) */
.roster__mark { display: inline-block; height: .68em; width: auto; margin-left: .42em; vertical-align: -.04em; overflow: visible; }
.roster__mark path {
  fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: -1;   /* hidden; -1 draws tip-first (clockwise) */
  transition: stroke-dashoffset 1.1s var(--ease);
}
.roster__mark.is-drawn path { stroke-dashoffset: 0; }
.roster__mark.is-drawn path:nth-child(2) { transition-delay: .22s; }   /* right chevron trails the left */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee { cursor: grab; }
.marquee.is-dragging { cursor: grabbing; }
.marquee__track { display: flex; gap: 16px; width: max-content; padding: 0 var(--pad); will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-dragging .marquee__track { cursor: grabbing; }
.marquee__track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.marquee__track a, .marquee__track .btn { pointer-events: auto; }
.tcard { position: relative; flex: none; width: clamp(220px, 21vw, 300px); aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.tcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* glass tab — sits flush at the bottom edge, rises slightly on hover */
.tcard__tab {
  position: absolute; left: 14px; bottom: -14px;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .42rem .85rem calc(.5rem + 14px) .85rem;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, #fff 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.5); border-bottom: none;
  box-shadow: 0 -2px 14px rgba(0,0,0,.12);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tcard:hover .tcard__tab { transform: translateY(-10px); box-shadow: 0 -6px 20px rgba(0,0,0,.18); }
.tcard__name { font-family: var(--body); font-weight: 600; font-size: .82rem; letter-spacing: .01em; color: #101012; }
.tcard__tabsoc { display: inline-flex; align-items: center; gap: .55rem; }
.tcard__tabsoc a { display: inline-flex; opacity: .8; transition: opacity .3s; }
.tcard__tabsoc a:hover { opacity: 1; }
.tcard__tabsoc img { width: 15px; height: 15px; display: block; }
/* subtle frosted-glass play-button logo, bottom-right, fades in on hover.
   The mark shape is a mask, so it frosts the image behind it (etched-glass look). */
.tcard__play {
  position: absolute; right: 16px; bottom: 18px;
  width: 34px; aspect-ratio: 421 / 230;
  background: color-mix(in srgb, #fff 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20421%20230%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M224.06%2015.3151V214.035C224.06%20225.735%20236.81%20232.975%20246.86%20226.985L413.42%20127.625C423.22%20121.775%20423.22%20107.575%20413.42%20101.735L246.86%202.37505C236.81%20-3.63495%20224.06%203.61506%20224.06%2015.3151Z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M0%2015.095V213.815C0%20225.515%2012.7499%20232.755%2022.7999%20226.765L189.36%20127.405C199.16%20121.555%20199.16%20107.355%20189.36%20101.515L22.7999%202.15503C12.7499%20-3.84497%200%203.39503%200%2015.095Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20421%20230%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M224.06%2015.3151V214.035C224.06%20225.735%20236.81%20232.975%20246.86%20226.985L413.42%20127.625C423.22%20121.775%20423.22%20107.575%20413.42%20101.735L246.86%202.37505C236.81%20-3.63495%20224.06%203.61506%20224.06%2015.3151Z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M0%2015.095V213.815C0%20225.515%2012.7499%20232.755%2022.7999%20226.765L189.36%20127.405C199.16%20121.555%20199.16%20107.355%20189.36%20101.515L22.7999%202.15503C12.7499%20-3.84497%200%203.39503%200%2015.095Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  /* drop-shadow (not box-shadow) so the raise follows the masked play silhouette */
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.28));
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease);
}
.tcard:hover .tcard__play { opacity: 1; transform: translateY(0); filter: drop-shadow(0 9px 16px rgba(0,0,0,.32)); }
/* "request the full roster" CTA card — sits in the marquee, matches the cards */
.tcard--cta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: clamp(1.3rem, 1.8vw, 1.9rem);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--page-fg) 18%, transparent);
}
.tcard__cta-label { font-size: .78rem; font-weight: 500; letter-spacing: .04em; opacity: .55; }
.tcard__cta-title { font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 200; line-height: 1.12; letter-spacing: -.01em; margin-top: auto; margin-bottom: 1.1rem; }
.tcard__cta-btn { align-self: stretch; font-size: .82rem; padding: .9em 1.4em; }

/* ============================================================
   SERVICES (light)
   ============================================================ */
.services { padding: clamp(6rem, 13vh, 10rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.services .eyebrow { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.services__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 6rem); }
.svc-col__title { font-family: var(--body); font-weight: 500; font-size: .9rem; letter-spacing: .01em; opacity: .55; margin-bottom: 1.2rem; }
.svc-list { list-style: none; }
.svc-item { border-top: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
.svc-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
.svc-item__btn { width: 100%; background: none; border: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 200; letter-spacing: -.01em; text-align: left; transition: color .3s; }
.svc-item__btn:hover { color: var(--purple); }
.svc-item__btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.svc-item__icon { position: relative; width: 22px; height: 22px; flex: none; color: var(--purple); }
.svc-item__icon::before, .svc-item__icon::after { content:''; position:absolute; background:currentColor; transition:transform .4s var(--ease), opacity .3s; border-radius:2px; }
.svc-item__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.svc-item__icon::after  { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.svc-item__btn[aria-expanded="true"] .svc-item__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.svc-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.svc-item__panel > p { overflow: hidden; max-width: 50ch; line-height: 1.6; font-weight: 300; opacity: .8; }
.svc-item.is-open .svc-item__panel { grid-template-rows: 1fr; }
.svc-item.is-open .svc-item__panel > p { padding-bottom: 1.5rem; }

/* ============================================================
   LONG-TERM INFRASTRUCTURE — light-mode slideshow
   ============================================================ */
.infra { padding: clamp(4rem, 9vh, 7rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.infra .eyebrow { margin-bottom: 1.5rem; }
.infra__title { font-size: var(--fs-h2); font-weight: 200; line-height: 1.0; margin-bottom: .9rem; }
.infra__lede { max-width: 56ch; font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; opacity: .8; }

.infra__show { margin-top: 0; }
.infra__slides { position: relative; display: grid; }
.infra__slide {
  grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2vw, 1.5rem); align-items: stretch;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
/* text card: just a black border, transparent fill.
   eyebrow pinned top-left; the rest stays vertically centred. */
.infra__text {
  --card-pad: clamp(1.6rem, 3.5vw, 2.8rem);
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  border: 1px solid var(--page-fg); border-radius: 22px;
  padding: var(--card-pad);
  padding-top: calc(var(--card-pad) + clamp(4.5rem, 11vh, 8rem));
}
.infra__text .eyebrow { position: absolute; top: var(--card-pad); left: var(--card-pad); margin: 0; }
.infra__slide.is-active { opacity: 1; visibility: visible; }
.infra__kicker { font-size: .8rem; font-weight: 500; letter-spacing: .04em; opacity: .55; }
.infra__h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 200; letter-spacing: -.02em; line-height: 1.04; margin: .85rem 0 1.1rem; }
.infra__p { font-weight: 300; opacity: .78; max-width: 42ch; line-height: 1.6; font-size: 1.05rem; }
/* graphic card: solid black. Flip the theme vars locally so the mocks
   (which paint with --page-fg) read light-on-dark instead of dark-on-light. */
.infra__graphic {
  display: flex; align-items: center; justify-content: center; min-height: 250px;
  --page-fg: var(--paper); --page-bg: var(--ink); color: var(--paper);
  background: var(--ink); border-radius: 22px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.mock { width: 100%; max-width: 430px; }
.mock img { display: block; }

/* shared chips / avatars */
.m-chip, .pipe-clip, .msg-av--brand {
  display: grid; place-items: center; background: #fff;
  border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); border-radius: 16px;
}
.m-chip img, .pipe-clip img { width: 54%; height: 54%; object-fit: contain; }
.m-av { border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); }
.m-av img { width: 100%; height: 100%; object-fit: cover; }

/* slide 1 — outreach cluster */
.mock-reach { position: relative; }
.mock-tag { display: inline-block; font-size: .78rem; font-weight: 500; color: var(--purple);
  padding: .45em 1em; margin-bottom: 1.1rem; border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); }
.reach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reach-grid > * { aspect-ratio: 1; width: 100%; }

/* slide 2 — "leverage your value": the designed funnel graphic (SVG) */
.mock-funnel { position: relative; width: 100%; max-width: 470px; margin: 0 auto; container-type: inline-size; }
.fn-svg { display: block; width: 100%; height: auto; }

/* slide 3 — unified inbox */
.mock-inbox { display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent);
  background: color-mix(in srgb, var(--page-fg) 3%, transparent); }
.msg-active { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.msg-fade { opacity: .4; }
.msg-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.msg-av--brand { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.msg-av--brand img { width: 58%; height: 58%; object-fit: contain; }
.msg-body { min-width: 0; flex: 1; }
.msg-top { display: flex; align-items: center; gap: .5rem; }
.msg-from { font-size: .8rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-tag { flex: none; font-size: .6rem; font-weight: 500; padding: .15em .5em; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--page-fg) 22%, transparent); opacity: .65; }
.msg-tag--brand { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); opacity: 1; }
.msg-subj { font-size: .92rem; font-weight: 600; margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-pre { font-size: .78rem; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* slide 4 — content pipeline */
.mock-pipe { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3.5vw, 2.4rem); }
.pipe-src { position: relative; width: 118px; aspect-ratio: 3 / 4; flex: none; border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); }
.pipe-src img { width: 100%; height: 100%; object-fit: cover; }
.pipe-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.pipe-play::before { content: ''; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(16,16,18,.42); }
.pipe-play svg { position: relative; width: 22px; height: 22px; margin-left: 3px; }
.pipe-flow { display: flex; align-items: center; gap: 7px; }
.pipe-flow span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--page-fg) 34%, transparent); }
.pipe-flow span:nth-child(2) { background: var(--purple); }
.pipe-out { display: flex; flex-direction: column; gap: 12px; }
.pipe-clip { width: 54px; height: 54px; }

/* progress indicator: active = filling pill, rest = dots */
.infra__progress { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(1.1rem, 2.5vh, 1.8rem); }
.infra__dots { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.dot {
  position: relative; width: 9px; height: 9px; padding: 0; border: none; cursor: pointer; overflow: hidden;
  border-radius: 9999px; background: color-mix(in srgb, var(--page-fg) 22%, transparent);
  transition: width .5s var(--ease), background-color .4s;
}
/* active pill gets a detached purple outline ring (gap in the page colour, then the ring) */
.dot.is-active { width: 48px; margin: 0 7px; background: color-mix(in srgb, var(--page-fg) 16%, transparent);
  box-shadow: 0 0 0 2.5px var(--page-bg), 0 0 0 5px var(--purple); }
.dot:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.dot__fill { position: absolute; inset: 0; width: 0; border-radius: 9999px; background: var(--purple); }
.dot.is-active .dot__fill { animation: dotFill var(--slide-dur, 4.5s) linear forwards; }
.infra__show.is-paused .dot.is-active .dot__fill { animation-play-state: paused; }
@keyframes dotFill { from { width: 0; } to { width: 100%; } }

@media (max-width: 820px) {
  .infra__slide { grid-template-columns: 1fr; gap: 1.4rem; }
  /* text first, graphic second; all four graphic cards share one height
     so the slides stay visually consistent as the dots advance */
  .infra__graphic { min-height: 430px; }
  .mock { max-width: 360px; }
  .infra__progress { grid-template-columns: 1fr; }
  .infra__progress-spacer { display: none; }
  .infra__dots { justify-content: flex-start; }
  .infra__text { padding-top: var(--card-pad); }
  .infra__text .eyebrow { position: static; margin-bottom: 1.2rem; }
}

/* ============================================================
   CREATOR EXPERIENCE — single auto-advancing slideshow (one event at a
   time), echoing the Creatolink slideshow but with an overlapping photo
   cluster as the graphic and a big watermark index as its own signature
   ============================================================ */
.cx { position: relative; padding: clamp(5rem, 12vh, 9rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
/* eyebrow overlaid so it sits level with the top of the slide content, not floating high above it */
.cx__head { position: absolute; top: clamp(5rem, 12vh, 9rem); left: var(--pad); margin: 0; z-index: 2; }
.cx .eyebrow { margin-bottom: 1.5rem; }
.cx__title { font-size: var(--fs-h2); font-weight: 200; max-width: 24ch; margin-bottom: 1.2rem; }
.cx__lede { max-width: 52ch; font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; opacity: .75; }

.cx__show { --slide-dur: 5s; }
.cx__slides { position: relative; display: grid; }
.cx-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
}
.cx-slide.is-active { opacity: 1; visibility: visible; }
/* info side — big faded index number as the signature accent */
.cx-slide__idx { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1; letter-spacing: -.03em; opacity: .2; margin-bottom: .5rem; }
.cx-slide__brand { height: clamp(30px, 4.4vw, 46px); width: auto; display: block; margin: .2rem 0 .9rem; }
/* white-on-transparent logos rendered black for the light section */
.cx-slide__brand--invert { filter: invert(1); }
.cx-slide__name { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 200; letter-spacing: -.02em; line-height: 1.05; margin-bottom: .75rem; }
.cx-slide__meta { display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; font-weight: 500; opacity: .55; margin-bottom: 1.1rem; }
.cx-slide__meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.cx-slide__desc { font-weight: 300; opacity: .72; max-width: 40ch; line-height: 1.6; font-size: 1.05rem; }

/* closing CTA slide — single centred column */
.cx-slide--cta { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cx-cta { display: flex; flex-direction: column; align-items: center; max-width: 30ch; }
.cx-cta .cx-slide__idx { margin-bottom: .6rem; }
.cx-cta__title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 200; letter-spacing: -.02em; line-height: 1.04; margin-bottom: 1rem; }
.cx-cta__desc { font-weight: 300; opacity: .72; line-height: 1.6; font-size: 1.05rem; margin-bottom: 1.8rem; max-width: 36ch; }

/* graphic side — overlapping photo cluster */
.cx-slide__gallery { position: relative; aspect-ratio: 4 / 3; }
.cx-photo { position: absolute; object-fit: cover; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.65);
  transition: transform .5s var(--ease); }
.cx-photo--1 { width: 50%; aspect-ratio: 4 / 5; left: 0;    top: 6%;  transform: rotate(-6deg); z-index: 1; }
.cx-photo--2 { width: 50%; aspect-ratio: 4 / 5; right: 0;   top: 0;   transform: rotate(5deg);  z-index: 2; }
.cx-photo--3 { width: 46%; aspect-ratio: 1 / 1; left: 27%;  bottom: 0; transform: rotate(-1deg); z-index: 3; }
/* fan the cluster out slightly on hover */
.cx-slide__gallery:hover .cx-photo--1 { transform: rotate(-9deg) translate(-6%, -2%); }
.cx-slide__gallery:hover .cx-photo--2 { transform: rotate(8deg) translate(6%, -2%); }
.cx-slide__gallery:hover .cx-photo--3 { transform: rotate(-1deg) translateY(5%); }

/* pair variant — two overlapping photos, balanced in the centre */
.cx-gallery--pair .cx-photo--1 { width: 56%; aspect-ratio: 4 / 5; left: 2%;  top: 9%; transform: rotate(-5deg); z-index: 1; }
.cx-gallery--pair .cx-photo--2 { width: 56%; aspect-ratio: 4 / 5; right: 2%; top: 0;  transform: rotate(5deg);  z-index: 2; }
.cx-gallery--pair:hover .cx-photo--1 { transform: rotate(-8deg) translate(-5%, -2%); }
.cx-gallery--pair:hover .cx-photo--2 { transform: rotate(8deg) translate(5%, -2%); }

/* feed variant — two columns of event photos drifting in opposite directions,
   soft-faded at the top and bottom edges */
.cx-gallery--feed { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.cx-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 100%; align-items: start; }
.cx-feed__col { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
/* height:auto keeps the HTML width/height attributes from overriding the 3:4 crop */
.cx-feed__col img, .cx-feed__col video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block;
  border: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.cx-feed__col--up   { animation: cxFeedUp 26s linear infinite; }
.cx-feed__col--down { animation: cxFeedDown 26s linear infinite; }
.cx-gallery--feed:hover .cx-feed__col { animation-play-state: paused; }
@keyframes cxFeedUp   { from { transform: translateY(0); }     to { transform: translateY(calc(-50% - 7px)); } }
@keyframes cxFeedDown { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cx-feed__col { animation: none; } }

/* progress dots — reuse the shared .dot pill, aligned under the gallery */
.cx__progress { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(1.6rem, 3.5vh, 2.6rem); }
.cx__dots { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.cx__show.is-paused .dot.is-active .dot__fill { animation-play-state: paused; }

@media (max-width: 820px) {
  /* back to normal flow on mobile so the eyebrow stacks above the slide */
  .cx__head { position: static; margin-bottom: clamp(2rem, 5vh, 3rem); }
  .cx-slide { grid-template-columns: 1fr; gap: 1.6rem; }
  /* text first, photo gallery second (gallery keeps DOM order — no reorder) */
  .cx__progress { grid-template-columns: 1fr; }
  .cx__progress-spacer { display: none; }
  .cx__dots { justify-content: flex-start; }
}

/* ============================================================
   CLIENTS (light)
   ============================================================ */
.clients { padding: 0 0 clamp(5rem, 12vh, 9rem); }
.clients__head { max-width: var(--maxw); margin: 0 auto clamp(1.8rem, 4vh, 2.8rem); padding: 0 var(--pad); }
.clients__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
/* margin-right (not flex gap) so the -50% loop point lands exactly on the duplicate */
.clients__track { display: flex; align-items: center; width: max-content; will-change: transform; animation: clientsScroll 32s linear infinite; }
.clients__track img { height: clamp(22px, 2.6vw, 30px); width: auto; object-fit: contain; margin-right: clamp(3rem, 7vw, 6rem); opacity: .55; transition: opacity .3s; }
.clients__track img:hover { opacity: 1; }
.clients__logo--invert { filter: invert(1); }
.clients__marquee:hover .clients__track { animation-play-state: paused; }
@keyframes clientsScroll { to { transform: translateX(-50%); } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { min-height: 80svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem var(--pad); }
.contact .eyebrow { margin-bottom: 1.6rem; }
.contact__title { font-family: var(--display); font-weight: 200; font-size: var(--fs-hero); line-height: .95; letter-spacing: -.03em; margin-bottom: 2.6rem; }
/* "real." emphasises when the contact heading scrolls into view */
.accent-real {
  display: inline-block; transform-origin: 0% 78%;
  font-weight: 200; transform: skewX(0deg);
  will-change: transform, font-weight; backface-visibility: hidden;
}
.reveal.is-in .accent-real { animation: accentEmphasize 1.8s cubic-bezier(.4, 0, .2, 1) both; }

/* contact form */
.cform { width: 100%; max-width: 540px; margin: 0 auto 2.2rem; display: flex; flex-direction: column; gap: .9rem; text-align: left; }
.cform__row { display: flex; gap: .9rem; }
.cform__row .cform__input { flex: 1; min-width: 0; }
.cform__input {
  font-family: var(--body); font-size: .98rem; color: var(--page-fg);
  background: color-mix(in srgb, var(--page-fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--page-fg) 18%, transparent);
  border-radius: 14px; padding: .95em 1.1em; width: 100%;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.cform__input::placeholder { color: var(--page-fg); opacity: .42; }
.cform__input:focus { outline: none; border-color: var(--purple); background: color-mix(in srgb, var(--page-fg) 7%, transparent); }
.cform__area { resize: vertical; min-height: 120px; line-height: 1.5; }
.cform__submit { align-self: flex-start; margin-top: .3rem; }
.cform__note { font-size: .9rem; opacity: .75; min-height: 1.2em; margin: 0; }
.cform__note.is-error { color: #ff6b6b; opacity: 1; }
.cform.is-sent .cform__input, .cform.is-sent .cform__submit { display: none; }

.contact__actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   SIGNATURE — wide wordmark masking the showreel video
   ============================================================ */
.signature { padding: clamp(2rem, 6vh, 5rem) var(--pad) clamp(4rem, 10vh, 8rem); }
.logo-video {
  width: min(64vw, 630px); aspect-ratio: 421 / 230; margin: 0 auto; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22421%22%20height%3D%22230%22%20viewBox%3D%220%200%20421%20230%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M224.06%2015.3151V214.035C224.06%20225.735%20236.81%20232.975%20246.86%20226.985L413.42%20127.625C423.22%20121.775%20423.22%20107.575%20413.42%20101.735L246.86%202.37505C236.81%20-3.63495%20224.06%203.61506%20224.06%2015.3151Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M0%2015.095V213.815C0%20225.515%2012.7499%20232.755%2022.7999%20226.765L189.36%20127.405C199.16%20121.555%20199.16%20107.355%20189.36%20101.515L22.7999%202.15503C12.7499%20-3.84497%200%203.39503%200%2015.095Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22421%22%20height%3D%22230%22%20viewBox%3D%220%200%20421%20230%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M224.06%2015.3151V214.035C224.06%20225.735%20236.81%20232.975%20246.86%20226.985L413.42%20127.625C423.22%20121.775%20423.22%20107.575%20413.42%20101.735L246.86%202.37505C236.81%20-3.63495%20224.06%203.61506%20224.06%2015.3151Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M0%2015.095V213.815C0%20225.515%2012.7499%20232.755%2022.7999%20226.765L189.36%20127.405C199.16%20121.555%20199.16%20107.355%20189.36%20101.515L22.7999%202.15503C12.7499%20-3.84497%200%203.39503%200%2015.095Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* The showreel is a vertical clip with black side-bars; --zoom scales it up so
   its content fills the play-button shape. Tune --zoom if it crops too tight. */
.logo-video video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: translateY(var(--drop, 42%)) scale(var(--zoom, 3.7)); transform-origin: center; }

/* ============================================================
   WORLD CLOCKS — live times for the cities we operate from
   ============================================================ */
.clocks { padding: clamp(3rem, 8vh, 6rem) var(--pad) clamp(2rem, 4vh, 3rem); }
.clocks__row {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.clock { display: flex; align-items: center; gap: .9rem; }
.clock__meta { display: flex; flex-direction: column; gap: .15rem; }
.clock__face { width: 46px; height: 46px; flex: none; display: block; }
.clock__ring { fill: none; stroke: currentColor; stroke-width: 2; opacity: .85; }
.clock__tick { stroke: currentColor; stroke-width: 2; opacity: .85; }
.clock__hour, .clock__min {
  stroke: currentColor; stroke-linecap: round;
  transform-box: view-box; transform-origin: 50px 50px;
}
.clock__hour { stroke-width: 3.5; }
.clock__min  { stroke-width: 2.5; }
.clock__pin  { fill: currentColor; }
.clock__label { font-family: var(--body); font-weight: 500; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.clock__time { font-family: var(--body); font-weight: 400; font-size: .82rem; letter-spacing: .02em; opacity: .55; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 2.2rem var(--pad); border-top: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.footer__copy { font-family: var(--body); font-size: .82rem; letter-spacing: .01em; opacity: .55; display: inline-flex; align-items: center; gap: .5em; }
.footer__logo { height: 13px; width: auto; display: block; }
.footer__links { display: flex; align-items: center; gap: 1.8rem; }
.footer__links a { font-family: var(--body); font-weight: 500; font-size: .82rem; letter-spacing: .01em; opacity: .65; transition: opacity .3s; }
.footer__links a:hover { opacity: 1; }
.footer__ig { display: inline-flex; }
.footer__ig svg { width: 17px; height: 17px; display: block; }

/* footer wordmark — fast-forward reveal:
   the two play marks sweep in from the left, then the letters march
   in left→right, each leaning forward before snapping upright. */
.footer__logo path { transform-box: fill-box; }
.footer__logo .fl-letter {
  opacity: 0;
  transform: translateX(-14px) skewX(-16deg);
  transform-origin: bottom center;
}
.footer__logo .fl-play { transform: translateX(-800px); }
.footer__logo.is-in .fl-play {
  animation: fl-play .85s cubic-bezier(.22,1,.36,1) forwards;
}
.footer__logo.is-in .fl-letter {
  animation: fl-letter .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.2s + var(--i) * .045s);
}
@keyframes fl-play {
  to { transform: translateX(0); }
}
@keyframes fl-letter {
  0%   { opacity: 0; transform: translateX(-14px) skewX(-16deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.tphero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 11rem; overflow: hidden; }
.tphero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); }
.tphero .eyebrow { margin-bottom: 1.6rem; }
.tphero__title { font-family: var(--display); font-weight: 200; font-size: clamp(2.8rem, 8vw, 8.5rem); line-height: .98; letter-spacing: -.03em; margin-bottom: 1.6rem; }
.tphero__lede { max-width: 52ch; font-size: var(--fs-lede); font-weight: 300; line-height: 1.45; opacity: .82; }

.team { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--pad) clamp(5rem, 12vh, 9rem); }
.team__grid { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
/* rectangle team card — same family as the roster cards */
.tmcard { width: clamp(220px, 24vw, 290px); }
.tmcard__photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 70% 0%, color-mix(in srgb, var(--purple) 30%, transparent), transparent 60%),
    color-mix(in srgb, var(--page-fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.tmcard:hover .tmcard__photo { border-color: var(--page-fg); }
/* photos are black & white, easing to full colour on hover */
.tmcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.02); transition: filter .5s var(--ease); }
.tmcard:hover .tmcard__photo img { filter: grayscale(0); }
/* glass social tab — rises in from the bottom-left on hover (like the creator carousel) */
.tmcard__tab {
  position: absolute; left: 12px; bottom: 0;
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: .4rem 1.05rem calc(.4rem + 14px) 1.05rem;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, #fff 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.5); border-bottom: none;
  box-shadow: 0 -2px 14px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.tmcard:hover .tmcard__tab { opacity: 1; transform: translateY(0); }
.tmcard__tab a { display: inline-flex; color: #101012; opacity: .78; transition: opacity .3s; }
.tmcard__tab a:hover { opacity: 1; }
.tmcard__tab svg { width: 20px; height: 20px; display: block; }
.tmcard__cap { padding: .9rem .15rem 0; }
.tmcard__name { font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.95rem); font-weight: 200; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.tmcard__role { font-size: .85rem; opacity: .56; }

/* ============================================================
   GLOBE (team page)
   ============================================================ */
.globe-sec { position: relative; text-align: center; padding: clamp(1rem, 3vh, 3rem) var(--pad) clamp(3rem, 8vh, 6rem); overflow: hidden; }
.globe-sec__head { max-width: var(--maxw); margin: 0 auto 1rem; }
.globe-sec .eyebrow { margin-bottom: 1.1rem; }
.globe-sec__title { font-family: var(--display); font-weight: 200; font-size: var(--fs-h2); line-height: 1.0; letter-spacing: -.02em; }
.globe-canvas { width: 100%; height: clamp(420px, 62vh, 680px); margin: 0 auto; cursor: grab; }
.globe-canvas:active { cursor: grabbing; }
/* render the globe in black & white */
.globe-canvas canvas { display: block; filter: grayscale(1) contrast(1.08) brightness(1.06); }
/* city marker: purple pin at the coordinate, RQM logo + label floating above it */
.globe-marker { position: relative; pointer-events: none; }
.globe-marker__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: var(--purple); }
.globe-marker__inner { position: absolute; left: 0; bottom: 9px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
.globe-marker__inner img { width: 24px; height: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.globe-marker__city { font-family: var(--body); font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: #fff; }

/* ============================================================
   LEGAL (privacy policy etc.)
   ============================================================ */
.legal-hero { max-width: var(--maxw); margin: 0 auto; padding: 10rem var(--pad) 0; }
.legal-hero .eyebrow { margin-bottom: 1.4rem; }
.legal-hero__title { font-family: var(--display); font-weight: 200; font-size: var(--fs-h2); letter-spacing: -.02em; margin-bottom: .9rem; }
.legal-hero__date { font-size: .9rem; opacity: .55; }
.legal { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vh, 5rem) var(--pad) clamp(6rem, 12vh, 9rem); }
.legal__body { max-width: 68ch; font-size: 1rem; font-weight: 300; line-height: 1.7; }
.legal__body h2 { font-family: var(--body); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin: 2.6rem 0 .9rem; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-bottom: 1rem; }
.legal__body ul { margin: 0 0 1rem 1.2rem; }
.legal__body li { margin-bottom: .45rem; }
.legal__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--purple); }

/* ============================================================
   AUDIENCE PAGES (for-brands / for-creators)
   ============================================================ */
.svc-col__cta { margin-top: 1.8rem; }
.steps { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(5rem, 12vh, 9rem); }
.steps .eyebrow { margin-bottom: clamp(2rem, 5vh, 3rem); }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.8rem, 3.5vw, 3rem); }
.step__num { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; color: var(--purple); margin-bottom: .9rem; }
.step__title { font-family: var(--body); font-weight: 500; font-size: 1.02rem; letter-spacing: 0; line-height: 1.35; margin-bottom: .5rem; }
.step__p { font-weight: 300; font-size: .95rem; line-height: 1.6; opacity: .75; max-width: 30ch; }
@media (max-width: 820px) { .steps__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps__grid { grid-template-columns: 1fr; } }

/* highlighted result line inside a pillar slide's text card */
.pillar__note { display: block; margin-top: 1rem; font-weight: 500; font-size: .92rem; color: var(--purple); }

/* stacked variant of the infra layout — every slide visible on scroll, no crossfade.
   Even slides flip text/graphic for rhythm; mobile keeps text first. */
.infra--stacked .infra__slides { gap: clamp(2.5rem, 6vh, 4.5rem); }
.infra--stacked .infra__slide { grid-area: auto; position: static; opacity: 1; visibility: visible; }
.infra--stacked .infra__slide:nth-child(even) .infra__text { order: 1; }
@media (max-width: 820px) {
  .infra--stacked .infra__slide:nth-child(even) .infra__text { order: 0; }
}

/* ============================================================
   LIQUID GLASS — the material from the brand-film creator cards,
   saved as a reusable utility. Recipe: gradient fill brighter
   toward the light, backdrop blur + saturation so colour refracts
   through, beveled edge insets (bright top, faint sides), deep
   soft shadow. Use .liquid-glass on dark/colourful backdrops and
   .liquid-glass--light on pale ones.
   ============================================================ */
.liquid-glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .10) 48%, rgba(255, 255, 255, .17) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 1px 0 0 rgba(255, 255, 255, .22),
    inset -1px 0 0 rgba(255, 255, 255, .12), 0 34px 60px -24px rgba(24, 12, 60, .55);
}
.liquid-glass--light {
  background: linear-gradient(155deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .44) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(30, 24, 60, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 1px 0 0 rgba(255, 255, 255, .5),
    0 34px 60px -26px rgba(30, 20, 70, .35);
}

/* ============================================================
   MONTAGE HERO — 13s looping brand film on one master timeline.
   Beat 1: app icon pops in (spring + squash).
   Beat 2: pills + 2D confetti burst out of the icon and orbit.
   Beat 3: scene breathes outward, everything drifting.
   Beat 4: soft purple wash; the icon flips into a 3D coin,
           frosted glass cards slide in beside it.
   Beat 5: wordmark letters rise (footer logo choreography),
           chevrons slide in, fade to dark, loop.
   ============================================================ */
.mtg { padding: clamp(10px, 1.6vw, 22px); --spring: cubic-bezier(.34, 1.56, .64, 1); }
.mtg__panel {
  position: relative; overflow: hidden; border-radius: 28px;
  min-height: calc(100svh - clamp(20px, 3.2vw, 44px));
  background: #1d1c20;
  --page-fg: var(--paper); --page-bg: #1d1c20; color: var(--paper);
}
/* purple wash for the coin beat (crossfaded, gradients can't transition) */
.mv__bg2 { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 20%, #ffffff 0%, #f4f3f6 55%, #e7e5ec 100%);
  animation: mvBg2 13s var(--ease) infinite; }
@keyframes mvBg2 { 0%, 36.2% { opacity: 0; } 38.5%, 79.6% { opacity: 1; } 82.3%, 100% { opacity: 0; } }

/* the whole stage inhales during the hold, then contracts as the icon
   swallows the returning content — origin pinned to the icon's centre */
.mv__stage { position: absolute; inset: 0; transform-origin: 50% 46%; animation: mvBreath 13s var(--ease) infinite; }
@keyframes mvBreath {
  0%, 12.3% { scale: 1; }
  26.2% { scale: 1.055; } /* slow breath in */
  28.5% { scale: 1.065; } /* peak */
  31.5% { scale: 1; }     /* deflates back to normal as the items return */
  33.1% { scale: .985; }  /* tiny dip under the gulp */
  35.4%, 100% { scale: 1; }
}

/* ---- beat 1: the app icon ---- */
.mv__icon {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 2;
  width: clamp(120px, 15vw, 180px); aspect-ratio: 1; border-radius: 26%;
  background: #b4a6f2; display: grid; place-items: center;
  box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .55), inset 0 -6px 14px rgba(0, 0, 0, .14), inset 0 4px 10px rgba(255, 255, 255, .38);
  animation: mvIcon 13s var(--spring) infinite;
}
.mv__icon svg { width: 56%; height: auto; fill: #fff; }
@keyframes mvIcon {
  0% { transform: scale(0) rotate(-10deg); opacity: 1; }
  2.7% { transform: scale(1.1) rotate(2deg); }
  4.2% { transform: scale(.97) rotate(0deg); }
  5.4%, 6.5% { transform: scale(1); }
  7.7% { transform: scale(1.14, .86); }       /* squash as the burst fires */
  9.2% { transform: scale(.95, 1.05); }
  10.8%, 28.5% { transform: scale(1); opacity: 1; }
  30.4% { transform: scale(1.025, .975); }    /* anticipation as the pieces stream in */
  31.5% { transform: scale(1.09, .91); }      /* the gulp — gentle squash */
  32.7% { transform: scale(.965, 1.035); }    /* soft recoil */
  33.5% { transform: scale(1.015, .995); }
  34.2% { transform: scale(1); opacity: 1; }
  35.8% { transform: scale(.55); opacity: 0; } /* recedes; the pack beat takes over */
  36.2%, 100% { transform: scale(.55); opacity: 0; }
}

/* ---- beat 2/3: pop-out pills + confetti (3 stagger groups, shared exit).
   The whole constellation sits in a zero-size orbit pivot at the icon's centre
   and slowly revolves around it; items live BEHIND the icon (z-order), so the
   return reads as slipping back inside the square. ---- */
.mv__orbit { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 1; animation: mvOrbit 13s linear infinite; }
@keyframes mvOrbit { 0%, 10.8% { rotate: 0deg; } 30% { rotate: 20deg; } 100% { rotate: 20deg; } }
/* fast inner layer: dots revolve ahead of the pills… */
.mv__orbit--fast { animation-name: mvOrbitFast; }
@keyframes mvOrbitFast { 0%, 10.8% { rotate: 0deg; } 30% { rotate: 130deg; } 100% { rotate: 130deg; } }
/* …and swirl rings — arc trails CONCENTRIC with the icon. Each ring is a circle
   centred on the orbit pivot; only a dashed segment of it is stroked, the whole
   ring spins continuously, and the dash length breathes so the path draws and
   retracts as it sweeps. Reads as motion trails orbiting the square. */
.mv-ring {
  position: absolute; left: 0; top: 0; translate: -50% -50%; aspect-ratio: 1; height: auto; fill: none; opacity: 0;
  rotate: var(--r0, 0deg);
  animation: mvRingWin 13s var(--ease) infinite, mvRingSpin var(--rs, 3.4s) linear infinite;
}
.mv__rings { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 0; }
/* small accent swirls: three smooth comet-tapered arcs (long / medium / short) on
   ONE orbit line, slightly separated, spinning clockwise together. Each arc is a
   filled path generated point-by-point — width eases from a round head down to a
   fine tail. They pop out with the burst and get pulled back in with everything. */
.mv-ring {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  width: clamp(250px, 31vw, 410px); aspect-ratio: 1; height: auto; fill: none; opacity: 0;
  animation: mvRingWin 13s var(--ease) infinite, mvRingSpin 3.6s linear infinite;
}
.mv-ring path { fill: #8b6ff0; }
@keyframes mvRingWin { 0%, 8.1% { opacity: 0; scale: .25; } 10.8% { opacity: .95; scale: 1; } 25.4% { opacity: .95; scale: 1.08; } 30% { opacity: 0; scale: .2; } 100% { opacity: 0; } }
@keyframes mvRingSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
.mv-pop { position: absolute; left: 0; top: 0; translate: -50% -50%; transform: scale(0); pointer-events: none; z-index: 1; }
.mv-pop--front { z-index: 2; } /* pills ride above the confetti shapes */
.mv-pop--a { animation: mvPopA 13s var(--spring) infinite; }
.mv-pop--b { animation: mvPopB 13s var(--spring) infinite; }
.mv-pop--c { animation: mvPopC 13s var(--spring) infinite; }
/* out with a spin + bounce, orbit close to the icon, then spin back inside it */
@keyframes mvPopA {
  0%, 6.2% { transform: translate(0, 0) scale(0) rotate(0deg); }
  8.8% { transform: translate(calc(var(--px) * 1.05), calc(var(--py) * 1.05)) scale(1.05) rotate(calc(var(--pr) + 40deg)); }
  10.8% { transform: translate(var(--px), var(--py)) scale(.975) rotate(var(--pr)); }
  12.3% { transform: translate(var(--px), var(--py)) scale(1.015) rotate(var(--pr)); }
  13.8% { transform: translate(var(--px), var(--py)) scale(1) rotate(var(--pr)); }
  25.4% { transform: translate(calc(var(--px) * 1.06), calc(var(--py) * 1.06)) scale(1) rotate(var(--pr)); }
  29.2% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
  100% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
}
@keyframes mvPopB {
  0%, 7.3% { transform: translate(0, 0) scale(0) rotate(0deg); }
  10% { transform: translate(calc(var(--px) * 1.05), calc(var(--py) * 1.05)) scale(1.05) rotate(calc(var(--pr) + 40deg)); }
  11.9% { transform: translate(var(--px), var(--py)) scale(.975) rotate(var(--pr)); }
  13.5% { transform: translate(var(--px), var(--py)) scale(1.015) rotate(var(--pr)); }
  15% { transform: translate(var(--px), var(--py)) scale(1) rotate(var(--pr)); }
  25.8% { transform: translate(calc(var(--px) * 1.06), calc(var(--py) * 1.06)) scale(1) rotate(var(--pr)); }
  30% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
  100% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
}
@keyframes mvPopC {
  0%, 8.5% { transform: translate(0, 0) scale(0) rotate(0deg); }
  11.2% { transform: translate(calc(var(--px) * 1.05), calc(var(--py) * 1.05)) scale(1.05) rotate(calc(var(--pr) + 40deg)); }
  13.1% { transform: translate(var(--px), var(--py)) scale(.975) rotate(var(--pr)); }
  14.6% { transform: translate(var(--px), var(--py)) scale(1.015) rotate(var(--pr)); }
  16.2% { transform: translate(var(--px), var(--py)) scale(1) rotate(var(--pr)); }
  26.2% { transform: translate(calc(var(--px) * 1.06), calc(var(--py) * 1.06)) scale(1) rotate(var(--pr)); }
  30.8% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
  100% { transform: translate(0, 0) scale(0) rotate(calc(var(--pr) - 220deg)); }
}
/* idle drift for pills; livelier wiggle for the confetti shapes */
.mv-pop > * { animation: mvIdle 3.6s ease-in-out infinite alternate; }
@keyframes mvIdle { from { transform: translateY(-5px) rotate(-1.5deg); } to { transform: translateY(5px) rotate(1.5deg); } }
.mv-pop > .mv-star, .mv-pop > .mv-bolt, .mv-pop > .mv-blob, .mv-pop > .mv-dot, .mv-pop > .mv-heart { animation: mvWiggle 2.3s ease-in-out infinite alternate; }
.mv-pop:nth-child(odd) > * { animation-delay: -1.2s; }
.mv-pop:nth-child(3n) > * { animation-duration: 2.8s; }
@keyframes mvWiggle { from { transform: translateY(-4px) rotate(-6deg) scale(1); } to { transform: translateY(4px) rotate(6deg) scale(1.06); } }

.mv-pill {
  display: inline-flex; align-items: center; gap: .5em;
  background: #fff; color: var(--ink); font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.35rem); padding: .55em 1.15em; border-radius: 999px;
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55);
}
.mv-pill svg { width: 1.15em; height: 1.15em; }
.mv-star { display: block; color: #a78bfa; font-size: clamp(22px, 3vw, 42px); line-height: 1; }
.mv-bolt { display: block; width: clamp(30px, 3.6vw, 52px); aspect-ratio: .78; background: #ffd84d;
  clip-path: polygon(58% 0%, 12% 56%, 42% 56%, 34% 100%, 88% 40%, 55% 40%); }
.mv-blob { display: block; width: clamp(24px, 3vw, 42px); aspect-ratio: 1; border-radius: 50%; background: #ff8a5c; }
.mv-blob--pink { width: clamp(38px, 4.6vw, 66px); aspect-ratio: 1.5; border-radius: 50%; background: #f6c9de; }
.mv-dot { display: block; width: clamp(9px, 1vw, 14px); aspect-ratio: 1; border-radius: 50%; background: #9b87f5; }
.mv-heart { display: block; width: clamp(26px, 3.2vw, 46px); height: auto; fill: #ff8a5c; }

/* ---- beat 4: 3D coin + frosted glass cards on the purple wash ---- */
.mv__coin { position: absolute; left: 79%; top: 50%; translate: -50% -50%; perspective: 900px; opacity: 0; animation: mvCoinWin 13s var(--ease) infinite; pointer-events: none; }
@keyframes mvCoinWin { 0%, 36.9% { opacity: 0; transform: translateY(34px); } 41.2% { opacity: 1; transform: none; } 62.1% { opacity: 1; } 69.4%, 100% { opacity: 0; transform: scale(.8) translateY(-12px); } }
.mv__coin-spin { position: relative; width: clamp(150px, 18vw, 230px); aspect-ratio: 1; transform-style: preserve-3d; animation: mvCoinSpin 5.5s ease-in-out infinite alternate; }
@keyframes mvCoinSpin { from { transform: rotateY(-40deg) rotateZ(-4deg); } to { transform: rotateY(40deg) rotateZ(4deg); } }
.mv__coin-layer { position: absolute; inset: 0; border-radius: 50%; background: #b9b6a9; }
.mv__coin-layer:nth-child(1) { transform: translateZ(-4px); }
.mv__coin-layer:nth-child(2) { transform: translateZ(-8px); background: #a3a094; }
.mv__coin-layer:nth-child(3) { transform: translateZ(-12px); background: #8f8c80; }
.mv__coin-face {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fffef8 0%, #efede4 55%, #d6d3c6 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .9), inset 0 -4px 10px rgba(0, 0, 0, .18);
}
.mv__coin-face::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 3px dashed rgba(94, 23, 204, .3); }
.mv__coin-face svg { width: 52%; height: auto; fill: var(--purple);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 -1px 1px rgba(0, 0, 0, .3)); }
/* liquid-glass creator trading cards — glass frame around a portrait, with stats,
   social icons and niches. Lighting is natural and static: a translucent fill
   brighter toward the light, beveled edge insets, and one soft key-light spot per
   card (each card's light comes from a different angle via --la / --hx). */
.mv-card {
  position: absolute; translate: -50% -50%;
  width: clamp(150px, 15vw, 205px); padding: 8px 8px 0; border-radius: 20px; color: #fff;
  background: linear-gradient(var(--la, 155deg), rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .44) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(30, 24, 60, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 1px 0 0 rgba(255, 255, 255, .5),
    0 34px 60px -26px rgba(30, 20, 70, .35);
  opacity: 0; pointer-events: none;
  animation: mvCardIn 13s var(--ease) infinite, mvGlassFloat 4.8s ease-in-out infinite alternate;
}
.mv-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at var(--hx, 30%) -8%, rgba(255, 255, 255, .22), transparent 55%);
}
.mv-card__photo { display: block; width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; border-radius: 13px; }
.mv-card__body { padding: .55rem .35rem .65rem; text-align: left; }
.mv-card__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mv-card__name { font-weight: 700; font-size: clamp(.95rem, 1.4vw, 1.15rem); color: #17141f; }
.mv-card__soc { display: flex; gap: .45em; }
.mv-card__soc img { width: 13px; height: 13px; opacity: .9; }
.mv-card__stats { font-size: clamp(.66rem, .95vw, .8rem); font-weight: 600; margin-top: .3rem; color: #26222f; white-space: nowrap; }
.mv-card__niche { font-size: clamp(.6rem, .85vw, .74rem); color: rgba(25, 20, 40, .62); margin-top: .18rem; white-space: nowrap; }
/* WebGL layer for the pack beat — replaces the CSS pack/cards when three.js boots */
.mv__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; animation: mvGlWin 13s var(--ease) infinite; }
@keyframes mvGlWin { 0%, 36.5% { opacity: 0; } 38.5% { opacity: 1; } 99.5% { opacity: 1; } 100% { opacity: 0; } }
.mtg--gl .mv__pack, .mtg--gl .mv-card { display: none; }

/* burst out of the pack mouth (--bx/--by point back at the pack), arc up, settle.
   No exit keys: the camera rise carries the settled cards out of frame. */
@keyframes mvCardIn {
  0%, 49.6% { opacity: 0; filter: blur(3px); transform: perspective(1000px) translate3d(var(--bx, 0px), calc(var(--by, 0px) + 6vh), -40px) rotate(calc(var(--gr, 0deg) * 2.4)) scale(.1); }
  52% { opacity: 1; filter: blur(1px); transform: perspective(1000px) translate3d(calc(var(--bx, 0px) * .7), calc(var(--by, 0px) * .55 - 14vh), 40px) rotate(calc(var(--gr, 0deg) * 1.5)) scale(.8); }
  54.4% { opacity: 1; filter: blur(0); transform: perspective(1000px) translate3d(0, 0, 0) rotateX(6deg) rotateY(calc(var(--gr, 0deg) * -.8)) rotate(var(--gr, 0deg)); }
  55.2% { transform: perspective(1000px) translate3d(0, 0, 16px) rotateX(5deg) rotateY(calc(var(--gr, 0deg) * -.7)) rotate(var(--gr, 0deg)); }
  56%, 100% { opacity: 1; filter: blur(0); transform: perspective(1000px) translate3d(0, 0, 0) rotateX(6deg) rotateY(calc(var(--gr, 0deg) * -.8)) rotate(var(--gr, 0deg)); }
}

/* ---- the foil card pack ---- */
.mv__cam { position: absolute; inset: 0; animation: mvCam 13s var(--ease) infinite; }
@keyframes mvCam { 0%, 78.5% { transform: translateY(0); } 82.3%, 100% { transform: translateY(90vh); } }
.mv__pack { position: absolute; left: 50%; top: 100%; translate: -50% -50%; perspective: 1100px; opacity: 0; z-index: 1; animation: mvPackWin 13s var(--ease) infinite; pointer-events: none; }
@keyframes mvPackWin {
  0%, 36.5% { opacity: 0; transform: translateY(58vh); }
  40.8% { opacity: 1; transform: translateY(0) rotate(0deg); }
  42.3% { transform: rotate(0deg); }
  42.9% { transform: rotate(-2.2deg); }     /* the shake before the rip */
  43.5% { transform: rotate(2.2deg); }
  44.1% { transform: rotate(-1.4deg); }
  44.7%, 100% { opacity: 1; transform: rotate(0deg); }
}
/* pillow-form foil pouch, swaying in real 3D */
.pack { position: relative; width: clamp(250px, 27vw, 390px); aspect-ratio: 3 / 4.4; transform-style: preserve-3d; animation: packSway 6.5s ease-in-out infinite alternate; filter: drop-shadow(0 30px 44px rgba(30, 22, 60, .35)); }
@keyframes packSway { from { transform: rotateY(-8deg) rotateX(3deg); } to { transform: rotateY(8deg) rotateX(1deg); } }
.pack__foil, .pack__top {
  background:
    /* soft vertical wrinkle shadows */
    radial-gradient(26% 58% at 33% 52%, rgba(0, 0, 0, .10), transparent 70%),
    radial-gradient(24% 52% at 67% 50%, rgba(0, 0, 0, .08), transparent 70%),
    /* curved specular bands */
    linear-gradient(90deg,
      #6e6f78 0%, #b7b8c1 5%, #8d8e98 11%,
      #dcdde3 21%, #f4f5f9 30%, #c3c4cc 39%,
      #9d9ea8 47%, #eaebf0 55%, #f8f9fc 61%,
      #b2b3bc 71%, #83848e 81%, #ced0d7 91%, #6f7079 100%);
}
.pack__top {
  position: absolute; inset: 0 0 auto 0; height: 20%; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 95% 85%, 90% 72%, 85% 85%, 80% 72%, 75% 82%, 70% 74%, 65% 84%, 60% 72%, 55% 82%, 50% 76%, 45% 84%, 40% 76%, 35% 82%, 30% 73%, 25% 85%, 20% 76%, 15% 84%, 10% 75%, 5% 85%, 0% 75%);
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 6px 10px -6px rgba(255, 255, 255, .9), inset 0 -8px 14px -8px rgba(0, 0, 0, .35);
  animation: mvPackTop 13s var(--ease) infinite;
}
.pack__top::before { /* serrated crimp seal */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 2px, rgba(255, 255, 255, .42) 2px 4px),
    linear-gradient(#c9cad2, #9b9ca6);
}
@keyframes mvPackTop {
  0%, 45% { transform: none; opacity: 1; }
  47% { transform: translateY(-7%) rotate(4deg); opacity: 1; }  /* peel */
  50.4% { transform: translate(18vw, -40vh) rotate(38deg); opacity: 1; }
  52%, 100% { transform: translate(24vw, -50vh) rotate(52deg); opacity: 0; }
}
.pack__foil {
  position: absolute; inset: 0;
  clip-path: polygon(0% 5%, 5% 15%, 10% 5%, 15% 14%, 20% 6%, 25% 15%, 30% 3%, 35% 12%, 40% 6%, 45% 14%, 50% 6%, 55% 12%, 60% 2%, 65% 14%, 70% 4%, 75% 12%, 80% 2%, 85% 15%, 90% 2%, 95% 15%, 100% 5%, 100% 100%, 0 100%);
  border-radius: 22px / 30px;
  display: grid; place-items: center;
  box-shadow:
    inset 14px 0 26px -12px rgba(0, 0, 0, .5),
    inset -14px 0 26px -12px rgba(0, 0, 0, .5),
    inset 0 -20px 30px -18px rgba(0, 0, 0, .35),
    inset 0 14px 26px -14px rgba(255, 255, 255, .85);
}
.pack__foil::after { /* specular bloom */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(80% 46% at 30% 10%, rgba(255, 255, 255, .75), transparent 55%);
}
.pack__print { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; opacity: .9; translate: 0 -14%; }
.pack__print svg { width: 40%; height: auto; fill: var(--purple); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
.pack__print span { font-size: clamp(.5rem, .75vw, .68rem); font-weight: 700; letter-spacing: .28em; color: #4a4a60; }
@keyframes mvGlassFloat { from { translate: -50% calc(-50% - 4px); } to { translate: -50% calc(-50% + 6px); } }

/* ---- beat 5: wordmark lockup — the REAL footer reveal (fl-letter / fl-play),
   scaled up and re-triggered by script.js on every loop of the film ---- */
.mv__finale { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; opacity: 0; animation: mvFinaleWin 13s var(--ease) infinite; }
@keyframes mvFinaleWin { 0%, 89.2% { opacity: 0; } 90.4% { opacity: 1; } 98.9% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
.mv__finale-inner { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; padding: 0 var(--pad); }
.mv__wordmark { width: clamp(250px, 44vw, 600px); height: auto; color: #fff; overflow: visible; }
/* title screen — lands after the cards fly off, on the purple wash */
.mv__screen { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--pad); opacity: 0; animation: mvScreen 13s var(--ease) infinite; pointer-events: none; z-index: 2; }
.mv__screen h1 { font-family: var(--display); font-weight: 200; font-size: clamp(2.2rem, 5vw, 4.8rem); letter-spacing: -.03em; line-height: 1.08; color: #fff; }
.mv__screen .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.mv__screen .w i { display: inline-block; font-style: normal; transform: translateY(112%); animation: mvTitleWord 13s var(--ease) infinite; }
.mv__screen .w:nth-child(2) i { animation-delay: .07s; } .mv__screen .w:nth-child(3) i { animation-delay: .14s; }
.mv__screen .w:nth-child(5) i { animation-delay: .24s; } .mv__screen .w:nth-child(6) i { animation-delay: .31s; }
@keyframes mvTitleWord { 0%, 82.7% { transform: translateY(112%); } 84.6% { transform: translateY(0); } 88.1% { transform: translateY(0); } 89.5%, 100% { transform: translateY(-115%); } }
@keyframes mvScreen { 0%, 82.3% { opacity: 0; } 83.1% { opacity: 1; } 88.5% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* persistent UI + ambience */
.mtg__cta { position: absolute; bottom: clamp(1.8rem, 5vh, 3.4rem); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; z-index: 3; }
.mtg-sparkle { position: absolute; font-size: clamp(13px, 1.4vw, 20px); color: #cbb2ff; pointer-events: none; animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .12; scale: .8; } 50% { opacity: .9; scale: 1.15; } }

@media (max-width: 820px) {
  .mtg__panel { border-radius: 20px; }
  .mv-pill { font-size: .85rem; }
  .mv__coin { left: 50%; top: 24%; }
  .mv-card { width: clamp(120px, 34vw, 150px); }
  .mv-card--lg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* static poster: the icon, calm and centred */
  .mv__icon { opacity: 1; transform: none; }
  .mv-pop, .mv__coin, .mv-card, .mv__bg2, .mv__wordmark path, .mv__screen { opacity: 0 !important; transform: scale(0); }
}

/* journey — sticky scroll story: the panel pins while scroll advances the chapters */
.journey { position: relative; height: 380svh; }
.journey__sticky {
  position: sticky; top: 0; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--maxw); margin: 0 auto; padding: 6rem var(--pad) 4rem;
}
.journey__bar { position: relative; height: 1px; background: color-mix(in srgb, var(--page-fg) 16%, transparent); margin: 1.7rem 0 clamp(2.5rem, 7vh, 4.5rem); }
.journey__fill { position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; }
.journey__stage { position: relative; display: grid; }
.journey__ghosts { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: grid; pointer-events: none; user-select: none; }
.journey__ghosts span {
  grid-area: 1 / 1; font-family: var(--display); font-weight: 200; line-height: 1;
  font-size: clamp(9rem, 26vw, 24rem); letter-spacing: -.04em;
  opacity: 0; transition: opacity .6s var(--ease);
}
.journey__ghosts span.is-active { opacity: .07; }
.journey__step {
  grid-area: 1 / 1; max-width: 54ch;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.journey__step.is-active { opacity: 1; visibility: visible; transform: none; }
.journey__kicker { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; opacity: .55; margin-bottom: 1rem; }
.journey__step h3 { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.02em; line-height: 1.02; margin-bottom: 1.2rem; }
.journey__step p { font-weight: 300; font-size: 1.1rem; line-height: 1.65; opacity: .8; max-width: 46ch; }
.journey__idxs { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.journey__idx { font-size: .85rem; font-weight: 500; opacity: .35; transition: opacity .3s, color .3s; }
.journey__idx.is-active { opacity: 1; color: var(--purple); }
@media (prefers-reduced-motion: reduce) { .journey { height: auto; } .journey__step { position: static; grid-area: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 2.5rem; } .journey__ghosts { display: none; } }

/* reporting mock — rising bars against a dashed benchmark line */
.mock-chart { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 18px); height: 200px; margin-top: 1.2rem; }
.mock-chart::before { content: ''; position: absolute; left: 0; right: 0; bottom: 55%; border-top: 2px dashed color-mix(in srgb, var(--page-fg) 30%, transparent); }
.mock-chart span { width: clamp(26px, 4vw, 40px); border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--page-fg) 18%, transparent); }
.mock-chart .is-hot { background: var(--purple); }

/* in the press — dark section via the body theme morph, rotating quotes over a logo rail.
   NOTE: named .pressband because .press is already taken by the featured-in logo imgs */
.pressband { padding: clamp(6rem, 14vh, 10rem) var(--pad); text-align: center; }
.press__title { font-family: var(--display); font-weight: 200; font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1; margin-bottom: clamp(2.2rem, 5vh, 3.2rem); }
.press__quotes { display: grid; max-width: 60ch; margin: 0 auto clamp(3rem, 8vh, 5rem); }
.press__quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; }
.press__quote.is-active { opacity: 1; visibility: visible; }
.press__quote cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .85rem; font-weight: 500; opacity: .55; }
.press__logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 1.5rem; }
.press__logos img { height: clamp(22px, 2.6vw, 30px); width: auto; object-fit: contain; opacity: .35; filter: grayscale(1); padding: 0 clamp(1.5rem, 4vw, 3.5rem); transition: opacity .5s var(--ease); }
/* the outlet whose quote is on screen reads full-strength */
.press__logos img.is-active { opacity: 1; }
.press__logos img + img { border-left: 1px solid color-mix(in srgb, var(--page-fg) 18%, transparent); }

/* promo screen — polaroid collage + apply card; lavender comes from the t-purple body morph */
.promo { padding: clamp(6rem, 14vh, 10rem) var(--pad); overflow: hidden; }
.promo__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.polaroid { background: #fff; border-radius: 18px; padding: clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px) 0; transform: rotate(-2.5deg); box-shadow: 0 30px 70px -35px rgba(16, 16, 18, .4); }
.polaroid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: hidden; border-radius: 10px; }
.polaroid__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.polaroid__caption { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; text-align: center; color: var(--ink); padding: 1.1rem 0 1.3rem; }
.promo__side { position: relative; }
.promo__panel { background: #fff; border-radius: 26px; padding: clamp(2rem, 4vw, 3.4rem); transform: rotate(1.5deg); box-shadow: 0 30px 70px -35px rgba(16, 16, 18, .4); }
.promo__title { font-family: var(--display); font-weight: 200; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: .98; letter-spacing: -.03em; color: var(--ink); margin-bottom: 1.1rem; }
.promo__sub { font-weight: 300; color: var(--ink); opacity: .7; line-height: 1.55; margin-bottom: 2rem; max-width: 34ch; }
.promo__panel .btn { width: 100%; }
.promo__badge { position: absolute; top: clamp(-70px, -6vw, -50px); left: clamp(-56px, -5vw, -30px); width: clamp(110px, 12vw, 155px); color: var(--ink); z-index: 1; }
.promo__badge svg { display: block; width: 100%; height: auto; }
.badge-spin { transform-box: view-box; transform-origin: center; animation: badgeSpin 18s linear infinite; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .promo__inner { grid-template-columns: 1fr; }
  .promo__side { margin-top: 2.5rem; }
  .promo__badge { top: -64px; left: auto; right: 4px; }
}

/* stat carousel — tilted stat + photo cards drifting sideways */
.statroll { padding: clamp(3rem, 7vh, 5rem) 0 clamp(4rem, 9vh, 7rem); overflow: hidden; }
.statroll__head { max-width: var(--maxw); margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); padding: 0 var(--pad); }
/* margin-right (not gap) keeps the -50% loop point exact; padding gives tilted corners room */
/* CSS animation is the no-JS fallback; script.js takes over for soft hover slowdown */
.statroll__track { display: flex; align-items: center; width: max-content; will-change: transform; padding: 30px 0; animation: statrollScroll 45s linear infinite; }
@keyframes statrollScroll { to { transform: translateX(-50%); } }
.scard {
  flex: none; position: relative; width: clamp(185px, 21vw, 250px); aspect-ratio: 3 / 4.1;
  margin-right: -32px; /* cards tuck under their neighbour */
  border-radius: 24px; overflow: hidden;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--dy, 0px));
  transition: transform .35s var(--ease);
  /* the subtle wave: `translate` composes with `transform`, so it never fights the tilt */
  animation: scardBob 5.5s ease-in-out infinite alternate;
}
/* hover: straighten upright and lift above the neighbours */
.scard:hover { z-index: 6; transform: rotate(0deg) translateY(var(--dy, 0px)) scale(1.05); }
@keyframes scardBob { from { translate: 0 -5px; } to { translate: 0 5px; } }
/* tilt cycle length must match the card-set length (10) so the loop seam is invisible;
   staggered negative delays turn the bob into a travelling wave */
.scard:nth-child(10n+1)  { --tilt: -5deg;   --dy: 8px;  animation-delay: -0.0s; }
.scard:nth-child(10n+2)  { --tilt: 4deg;    --dy: -6px; animation-delay: -0.55s; }
.scard:nth-child(10n+3)  { --tilt: -2.5deg; --dy: 10px; animation-delay: -1.1s; }
.scard:nth-child(10n+4)  { --tilt: 5deg;    --dy: -9px; animation-delay: -1.65s; }
.scard:nth-child(10n+5)  { --tilt: -4deg;   --dy: 4px;  animation-delay: -2.2s; }
.scard:nth-child(10n+6)  { --tilt: 2.5deg;  --dy: -5px; animation-delay: -2.75s; }
.scard:nth-child(10n+7)  { --tilt: -3.5deg; --dy: 9px;  animation-delay: -3.3s; }
.scard:nth-child(10n+8)  { --tilt: 4.5deg;  --dy: -4px; animation-delay: -3.85s; }
.scard:nth-child(10n+9)  { --tilt: -2deg;   --dy: 6px;  animation-delay: -4.4s; }
.scard:nth-child(10n+10) { --tilt: 3deg;    --dy: -7px; animation-delay: -4.95s; }
.scard--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard--stat { display: flex; flex-direction: column; justify-content: space-between; padding: 1.3rem 1.4rem 1.2rem; opacity: .93; transition: transform .35s var(--ease), opacity .3s; }
.scard--stat:hover { opacity: 1; }
.scard--purple { background: var(--purple); color: #fff; }
.scard--lav { background: color-mix(in srgb, var(--purple) 16%, #fff); color: var(--ink); }
.scard--ink { background: var(--ink); color: var(--paper); }
.scard--paper { background: var(--paper); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.scard__value { font-family: var(--display); font-weight: 200; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.scard__label { font-size: .85rem; font-weight: 500; line-height: 1.35; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

/* numbers band — hairline-ruled stat columns */
.stats { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 9vh, 7rem); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
.stat { padding: clamp(2.2rem, 5vh, 3.4rem) clamp(1.5rem, 3vw, 3rem) 0; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
.stat__value { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.03em; margin-bottom: .7rem; }
.stat__label { font-size: .9rem; font-weight: 400; opacity: .55; letter-spacing: .01em; }
@media (max-width: 820px) {
  .stats__grid { grid-template-columns: 1fr; border-top: 0; }
  .stat, .stat:first-child { padding: 1.5rem 0; border-top: 1px solid color-mix(in srgb, var(--page-fg) 16%, transparent); }
  .stat + .stat { border-left: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  /* on scroll, condense only a little: stay a wide bar with a small inset on
     phones, easing to a softly-centred pill on tablets — never hug the logo */
  .nav.is-scrolled .nav__pill { max-width: min(620px, calc(100% - 28px)); padding: 0 12px 0 20px; }
  .about__grid, .services__cols { grid-template-columns: 1fr; }
  .about__body { max-width: none; }
}
@media (max-width: 520px) {
  .tmcard { width: clamp(150px, 44vw, 220px); }
  /* hero: bump the title up a touch, shrink the CTA controls down */
  .hero__title, .tphero__title, .newshero__title { font-size: clamp(3.1rem, 11vw, 3.8rem); }
  .hero__cta { gap: 1.3rem; margin-top: 2.2rem; }
  .hero__cta .btn { padding: .8em 1.45em; font-size: .85rem; }
  .hero__cta .link-underline { font-size: .85rem; }
}

/* touch devices have no hover — surface the states that hover reveals,
   and enlarge the small social tap targets to ~44px */
@media (hover: none) {
  .tcard__play { opacity: 1; transform: none; }
  .tcard__tabsoc a { padding: 8px; margin: -8px; }
  .tmcard__tab a { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .footer__logo .fl-letter, .footer__logo .fl-play { opacity: 1; transform: none; }
}

/* ============================================================
   NEWS INDEX — editorial wire list, headlines are the design
   ============================================================ */
/* hero mirrors the team hero rules: same clamp scale at weight 200,
   tight leading, dark theme — the feed below morphs to light */
.newshero { position: relative; min-height: 72svh; display: flex; align-items: center; padding: 8rem 0 6rem; overflow: hidden; }
.newshero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); }
.newshero .eyebrow { margin-bottom: 1.6rem; }
.newshero__title { font-family: var(--display); font-weight: 200; font-size: clamp(2.8rem, 8vw, 8.5rem); line-height: .98; letter-spacing: -.03em; margin-bottom: 1.6rem; }
.newshero__lede { max-width: 52ch; font-size: var(--fs-lede); font-weight: 300; line-height: 1.45; opacity: .82; }

.newsfeed { max-width: var(--maxw); margin: 0 auto; padding: 5.5rem var(--pad) 7rem; }
.newsrow { display: grid; grid-template-columns: 132px 1fr; gap: 1rem 2.5rem; align-items: start; padding: 2.4rem 0; border-top: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.newsrow:last-child { border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.newsrow__meta { display: flex; flex-direction: column; gap: .45rem; font-size: .8rem; padding-top: .55rem; }
.newsrow__date { opacity: .5; }
.newsrow__tag { color: var(--purple); font-weight: 600; letter-spacing: .02em; }
body.t-dark .newsrow__tag { color: #a97ef2; }
.newsrow__body { position: relative; }
.newsrow__title { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(1.55rem, 3.1vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; max-width: 26ch; transition: transform .5s var(--ease); }
.newsrow__mark { position: absolute; left: -8px; top: .5rem; height: .55em; width: auto; color: var(--purple); opacity: 0; transform: translateX(-12px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.newsrow__body:hover .newsrow__title,
.newsrow__body:focus-within .newsrow__title { transform: translateX(clamp(28px, 3vw, 44px)); }
.newsrow__body:hover .newsrow__mark,
.newsrow__body:focus-within .newsrow__mark { opacity: 1; transform: translateX(0); }
.newsrow__desc { margin-top: .8rem; max-width: 62ch; opacity: .6; font-size: .98rem; }
.newsrow__by { margin-top: .7rem; font-size: .8rem; opacity: .45; }
@media (max-width: 700px) {
  .newsrow { grid-template-columns: 1fr; gap: .6rem; padding: 1.9rem 0; }
  .newsrow__meta { flex-direction: row; gap: 1rem; padding-top: 0; }
}

/* ============================================================
   ARTICLE — long-read on paper, "Real quick:" answer box
   ============================================================ */
.article { max-width: 760px; margin: 0 auto; padding: clamp(8rem, 16vh, 11rem) var(--pad) 4rem; }
.article__head .eyebrow { margin-bottom: 1.5rem; }
.article__title { font-family: var(--display); font-weight: 200; font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; }
.article__byline { display: flex; flex-wrap: wrap; gap: .35em .6em; align-items: baseline; margin: 1.7rem 0 0; padding-bottom: 1.7rem; border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); font-size: .88rem; }
.article__author { font-weight: 600; }
.article__byline .sep { opacity: .35; }
.article__byline span:not(.article__author):not(.sep) { opacity: .6; }

.rq-answer { margin: 2.2rem 0; padding: 1.4rem 1.7rem; border-left: 2px solid var(--purple); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--page-fg) 4%, transparent); }
.rq-answer__label { display: block; color: var(--purple); font-weight: 700; font-size: .8rem; letter-spacing: .03em; margin-bottom: .5rem; }
.rq-answer p { margin: 0; font-size: 1.02rem; line-height: 1.65; }

.article__body { font-size: 1.04rem; line-height: 1.75; }
.article__body > p, .article__body > ul, .article__body > ol { margin: 1.15rem 0; }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body li { margin: .5rem 0; }
.article__body li::marker { color: var(--purple); }
.article__body h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); margin: 3rem 0 1rem; }
.article__body h3 { font-family: var(--body); font-size: 1.22rem; font-weight: 600; letter-spacing: 0; margin: 2.2rem 0 .8rem; }
.article__body a { text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article__body a:hover { color: var(--purple); }
.article__body strong { font-weight: 650; }
.article__body figure { margin: 2.4rem 0; }
.article__body figure img { width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: 16px; display: block; }
.article__body figcaption { margin-top: .7rem; font-size: .82rem; opacity: .55; }
.article__body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem; }
.article__body th { text-align: left; font-weight: 600; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 30%, transparent); }
.article__body td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); vertical-align: top; }

.article__faq h2 { margin-bottom: .4rem; }
.article__faq dl { margin: 0; }
.article__faq dt { font-weight: 600; padding-top: 1.4rem; margin-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); }
.article__faq dd { margin: .55rem 0 0; opacity: .78; }

.article__cta { margin: 3.5rem 0 0; padding: 2rem; border-radius: 18px; background: var(--ink); color: var(--paper); display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }
.article__cta p { margin: 0; font-size: 1.05rem; max-width: 34ch; }
.article__cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); flex: none; }
.article__cta .btn:hover { color: #fff; background: transparent; border-color: var(--purple); }

.article__related { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.article__related h2 { font-size: 1rem; font-family: var(--body); font-weight: 600; letter-spacing: .01em; margin-bottom: .9rem; }
.article__related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.article__related a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple) 45%, transparent); text-underline-offset: 3px; }
.article__related a:hover { color: var(--purple); }

/* ============================================================
   ARTICLE GRAPHICS — same visual language as the Creatolink
   mocks: ink card, flipped theme vars, chips/avatars/threads
   ============================================================ */
.article-graphic { margin: 2.6rem 0; }
.article-graphic__card {
  display: flex; align-items: center; justify-content: center; min-height: 240px;
  --page-fg: var(--paper); --page-bg: var(--ink); color: var(--paper);
  background: var(--ink); border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.article-graphic figcaption { margin-top: .7rem; font-size: .82rem; opacity: .55; }

/* deal-negotiation thread (reuses .msg rows) */
.ag-thread { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; }
.ag-brandmark { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem; }

/* income-stack bars */
.ag-bars { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 440px; }
.ag-bar { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px; font-size: .76rem; }
.ag-bar > span { opacity: .65; text-align: right; }
.ag-bar i { display: block; height: 24px; border-radius: 7px; width: var(--w, 40%);
  background: color-mix(in srgb, var(--page-fg) 22%, transparent); }
.ag-bar--hi i { background: var(--purple); }
.ag-bar--own i { background: color-mix(in srgb, var(--purple) 18%, transparent);
  border: 1px dashed color-mix(in srgb, var(--purple) 75%, transparent); }

/* UGC vs influencer split */
.ag-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2.5vw, 1.6rem); width: 100%; max-width: 500px; }
.ag-cell { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 1.2rem .9rem; border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); border-radius: 16px; }
.ag-cell__label { font-size: .76rem; font-weight: 600; }
.ag-cell__sub { font-size: .68rem; opacity: .5; max-width: 16ch; }
.ag-cell .m-av, .ag-cell .m-chip { width: 46px; height: 46px; }
.ag-thumb { width: 46px; height: 62px; border-radius: 10px; overflow: hidden; }
.ag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-flow { display: flex; align-items: center; gap: 7px; }
.ag-flow span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--page-fg) 34%, transparent); }
.ag-flow span:nth-child(2) { background: var(--purple); }
.ag-dots { display: grid; grid-template-columns: repeat(6, 9px); gap: 5px; }
.ag-dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--page-fg) 30%, transparent); }

/* influencer-tier pyramid */
.ag-pyramid { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 440px; }
.ag-tier { display: flex; align-items: center; gap: 10px; }
.ag-tier .m-av { flex: none; }
.ag-tier--macro .m-av { width: 62px; height: 62px; }
.ag-tier--mid .m-av { width: 42px; height: 42px; }
.ag-tier--micro .m-av { width: 28px; height: 28px; }
.ag-tier__label { margin-left: auto; text-align: right; font-size: .72rem; opacity: .55; max-width: 15ch; }

/* five-part pitch email */
.ag-email { width: 100%; max-width: 440px; font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); border-radius: 16px; overflow: hidden; }
.ag-email__subj { padding: .85rem 1rem; font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); }
.ag-email__subj span { opacity: .45; font-weight: 500; }
.ag-email__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .68rem 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--page-fg) 9%, transparent); }
.ag-email__row:last-of-type { border-bottom: 0; }
.ag-email__line { opacity: .75; min-width: 0; }
.ag-email__part { flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: var(--purple);
  border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); border-radius: 6px; padding: .2em .55em; }

/* media-kit card */
.ag-kit { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.ag-kit__head { display: flex; align-items: center; gap: 12px; }
.ag-kit__head .m-av { width: 52px; height: 52px; flex: none; }
.ag-kit__name { font-weight: 600; font-size: .95rem; }
.ag-kit__niche { font-size: .74rem; opacity: .55; }
.ag-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ag-stat { border: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent); border-radius: 12px; padding: .65rem .4rem; text-align: center; }
.ag-stat b { display: block; font-size: 1.02rem; font-weight: 600; }
.ag-stat span { font-size: .64rem; opacity: .5; }
.ag-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ag-thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; display: block; }

@media (max-width: 560px) {
  .ag-bar { grid-template-columns: 92px 1fr; }
  .ag-split { grid-template-columns: 1fr; max-width: 300px; }
  .ag-tier__label { max-width: 11ch; }
}

/* ============================================================
   CREATOLINK MOCK CHOREOGRAPHY — each graphic replays its
   entrance every time its slide activates, then idles gently
   ============================================================ */

/* slide 1 — outreach cluster: chips pop in with a spring, then breathe */
.infra__slide.is-active .mock-reach .mock-tag { animation: mockTagIn .5s var(--ease) both; }
.infra__slide.is-active .reach-grid > * {
  animation: reachPop .6s cubic-bezier(.34, 1.56, .64, 1) both,
             reachFloat 3.6s ease-in-out infinite;
}
.infra__slide.is-active .reach-grid > *:nth-child(1) { animation-delay: .10s, 1.2s; }
.infra__slide.is-active .reach-grid > *:nth-child(2) { animation-delay: .16s, 1.8s; }
.infra__slide.is-active .reach-grid > *:nth-child(3) { animation-delay: .22s, 2.5s; }
.infra__slide.is-active .reach-grid > *:nth-child(4) { animation-delay: .28s, 2.1s; }
.infra__slide.is-active .reach-grid > *:nth-child(5) { animation-delay: .34s, 1.4s; }
.infra__slide.is-active .reach-grid > *:nth-child(6) { animation-delay: .40s, 2.8s; }
.infra__slide.is-active .reach-grid > *:nth-child(7) { animation-delay: .46s, 1.6s; }
.infra__slide.is-active .reach-grid > *:nth-child(8) { animation-delay: .52s, 2.3s; }
.infra__slide.is-active .reach-grid > *:nth-child(9) { animation-delay: .58s, 1.9s; }
@keyframes mockTagIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes reachPop {
  from { opacity: 0; transform: scale(.35) translateY(10px); }
  70%  { opacity: 1; transform: scale(1.07); }
  to   { opacity: 1; transform: none; }
}
@keyframes reachFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* slide 2 — funnel: rises in, then drifts */
.infra__slide.is-active .fn-svg {
  animation: fnRise .8s var(--ease) both,
             fnDrift 5.5s ease-in-out 1.4s infinite;
}
@keyframes fnRise  { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fnDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* slide 3 — inbox: messages arrive like notifications; the AI-handled
   one flashes a purple ring once it lands */
.infra__slide.is-active .mock-inbox .msg { animation: msgArrive .55s var(--ease) both; }
.infra__slide.is-active .mock-inbox .msg:nth-child(1) { animation-delay: .12s; }
.infra__slide.is-active .mock-inbox .msg:nth-child(2) { animation-delay: .28s; }
.infra__slide.is-active .mock-inbox .msg:nth-child(3) { animation-delay: .44s; }
.infra__slide.is-active .mock-inbox .msg:nth-child(4) { animation-delay: .60s; }
.infra__slide.is-active .mock-inbox .msg-active {
  animation: msgArrive .55s var(--ease) both, msgRing 2s ease-out .8s 1;
  animation-delay: .12s, .9s;
}
@keyframes msgArrive { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes msgRing {
  0%   { box-shadow: inset 0 0 0 1px var(--purple), 0 0 0 0 color-mix(in srgb, var(--purple) 55%, transparent); }
  60%  { box-shadow: inset 0 0 0 1px var(--purple), 0 0 0 14px transparent; }
  100% { box-shadow: inset 0 0 0 1px var(--purple), 0 0 0 0 transparent; }
}

/* slide 4 — pipeline: source pops from the left, clips land on the right,
   and the flow dots march continuously while the slide is live */
.infra__slide.is-active .pipe-src { animation: pipeSrcIn .65s cubic-bezier(.34, 1.56, .64, 1) both .1s; }
.infra__slide.is-active .pipe-out .pipe-clip { animation: pipeClipIn .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.infra__slide.is-active .pipe-out .pipe-clip:nth-child(1) { animation-delay: .45s; }
.infra__slide.is-active .pipe-out .pipe-clip:nth-child(2) { animation-delay: .58s; }
.infra__slide.is-active .pipe-out .pipe-clip:nth-child(3) { animation-delay: .71s; }
.infra__slide.is-active .pipe-out .pipe-clip:nth-child(4) { animation-delay: .84s; }
.infra__slide.is-active .pipe-flow span { animation: pipeMarch 1.1s ease-in-out infinite; }
.infra__slide.is-active .pipe-flow span:nth-child(1) { animation-delay: 0s; }
.infra__slide.is-active .pipe-flow span:nth-child(2) { animation-delay: .18s; }
.infra__slide.is-active .pipe-flow span:nth-child(3) { animation-delay: .36s; }
@keyframes pipeSrcIn  { from { opacity: 0; transform: translateX(-26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pipeClipIn { from { opacity: 0; transform: translateX(22px) scale(.5); } 70% { opacity: 1; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes pipeMarch {
  0%, 100% { opacity: .45; transform: scale(1); }
  35%      { opacity: 1; transform: scale(1.45); background: var(--purple); }
}