@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,700;0,900;1,700;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Syne:wght@800&display=swap');

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --accent: #1A65FC;  /* Clear Blue — brand primary accent */
  --lime:   #1A65FC;  /* alias so existing refs update */
  --cobalt: #1F2833;  /* Cobalt Blue */
  --black:  #0B0C10;  /* Deep Obsidian */
  --white:  #FFFFFF;  /* Crisp White */
  --slate:  #C5C6C7;  /* Slate Grey */
  --off:    #F2F3F5;
  --gray:   #D8D9DC;
  --pink:   #E8265A;  /* kept for Marketing division only */
  --blue:   #1F2833;  /* Cobalt — Talent division */

  --display: 'Clash Display', sans-serif;
  --serif:   'Cormorant', serif;
  --body:    'DM Sans', sans-serif;

  --fast: 0.22s ease;
  --med:  0.48s cubic-bezier(0.25,0.46,0.45,0.94);
  --slow: 0.78s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x: clip; }
body {
  font-family: var(--body);
  color: var(--black);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
a   { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* hide cursor on touch */
@media (hover:none) { body { cursor:auto; } .c-dot,.c-ring { display:none !important; } }

/* ── CUSTOM CURSOR ───────────────────────────────────── */
.c-dot, .c-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.c-dot  { width:8px; height:8px; background:var(--accent); transition: width var(--fast), height var(--fast), opacity var(--fast); }
.c-ring { width:38px; height:38px; border:2px solid var(--accent); transition: width var(--med), height var(--med), opacity var(--med); opacity: 0.75; }
.c-dot.big  { width:14px; height:14px; }
.c-ring.big { width:64px; height:64px; }

/* ── SCROLL PROGRESS ─────────────────────────────────── */
.scroll-prog {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── NAV ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo {
  display: flex;
  align-items: center;
  color: var(--white);
}
.nav-logo img {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  transition: color var(--fast);
  cursor: none;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  cursor: none;
  transition: color var(--fast);
  border: 1px solid rgba(255,255,255,.16);
  padding: 8px 18px;
  border-radius: 100px;
}
.nav-cta:hover { color:var(--white); border-color:rgba(255,255,255,.4); }
.nav-burger {
  display: none;
  flex-direction: column;
  gap:5px;
  background:none; border:none;
  cursor:none; padding:4px;
}
.nav-burger span { display:block; width:22px; height:1.5px; background:#fff; transition:var(--med); }
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.mob-nav {
  display:none;
  position:fixed; inset:0;
  z-index:998;
  background:var(--black);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
}
.mob-nav.open { display:flex; }
.mob-nav ul { list-style:none; text-align:center; }
.mob-nav li { padding:10px 0; }
.mob-nav a {
  font-family:var(--display);
  font-weight:800;
  font-size: clamp(44px,10vw,80px);
  letter-spacing: -0.015em;
  color:rgba(255,255,255,.45);
  transition:color var(--fast);
}
.mob-nav a:hover { color:var(--lime); }

/* ── HOME HERO ───────────────────────────────────────── */
.hero {
  min-height: 100svh;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px 52px 52px;
  position: relative;
  overflow: hidden;
}

/* ghost watermark */
.hero::before {
  content: 'REACH';
  position: absolute;
  bottom: -0.08em;
  left: -0.04em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(220px, 38vw, 580px);
  letter-spacing: -0.021em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.045);
  pointer-events: none;
  user-select: none;
  transform: translateY(calc(var(--pY, 0) * 1px));
  will-change: transform;
}

/* accent glow — ambient drift */
@keyframes glowDrift {
  0%   { transform: translate(0, 0)     scale(1); }
  30%  { transform: translate(9%, -12%) scale(1.1); }
  65%  { transform: translate(-5%, 9%)  scale(0.94); }
  100% { transform: translate(0, 0)     scale(1); }
}
.hero::after {
  content: '';
  position: absolute;
  left: -12%;
  top: 28%;
  width: 68%;
  height: 60%;
  background: radial-gradient(ellipse at 35% 55%, rgba(26,101,252,0.18) 0%, transparent 62%);
  pointer-events: none;
  animation: glowDrift 14s ease-in-out infinite;
  will-change: transform;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.hero-year {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,.2);
}

.hero-content {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: 48px;
}

.hero-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 6.9vw, 100px);
  line-height: .92;
  letter-spacing: 0.02em;
  color: #fff;
  position: relative;
}
.hero-headline::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 80%;
  height: 140%;
  background: radial-gradient(ellipse at 30% 50%, rgba(26,101,252,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.hero-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.hli {
  display: block;
}
.hl2 { color: var(--accent); text-shadow: 0 0 120px rgba(26,101,252,0.45), 0 0 40px rgba(26,101,252,0.3); }

@keyframes accentGlow {
  0%, 100% { text-shadow: 0 0 60px rgba(26,101,252,0.15); }
  50%       { text-shadow: 0 0 160px rgba(26,101,252,0.38); }
}
.is-loaded .hl2 { animation: heroLineIn 1s cubic-bezier(0.16,1,0.3,1) both, accentGlow 4s ease-in-out 1.4s infinite; }

@keyframes heroLineIn {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}
/* typing JS drives the reveal — no slide-in animation */
.hli { opacity: 0; }
.hli.typed { opacity: 1; }

/* blinking cursor */
.hero-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: var(--white);
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 1px;
  animation: cursorBlink 0.9s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.hero-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  white-space: nowrap;
}
.hero-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.hero-foot-right {
  display: flex;
  align-items: center;
  gap: 36px;
}
.hero-cta-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
  transition: opacity var(--fast);
}
.hero-cta-link:hover { opacity: 0.65; }
.hero-scroll { display: none; }
.hero-scroll-line { display: none; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* ── MARQUEE ─────────────────────────────────────────── */
.mq-wrap {
  overflow:hidden;
  background:var(--black);
  border-top: 1px solid rgba(255,255,255,.07);
}
.mq-row { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.mq-row:last-child { border-bottom: none; }
.mq-track {
  display:flex;
  align-items:center;
  gap:40px;
  width:max-content;
  animation: mq 26s linear infinite;
}
.mq-track.rev { animation-direction:reverse; }
.mq-word {
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,1);
  flex-shrink:0;
}
.mq-sep { color:var(--lime); font-size:9px; opacity:.7; flex-shrink:0; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── STATEMENT TICKER ────────────────────────────────── */
.stmt-band {
  overflow: hidden;
  background: var(--black);
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stmt-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: mq 120s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 6.5vw, 100px);
  letter-spacing: -0.015em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.22);
  white-space: nowrap;
}
.stmt-sep { -webkit-text-stroke: 0; color: var(--lime); opacity: 0.6; font-size: 0.55em; vertical-align: middle; }

/* ── DIVISIONS (ACCORDION) ───────────────────────────── */
.divs {
  display: flex;
  min-height: 74vh;
  background: var(--black);
}
.div-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 44px 48px;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  position: relative;
  transition: flex var(--slow);
  border-right: 1px solid rgba(255,255,255,.08);
}
.div-col:last-child { border-right: none; }
.div-col.mk { background: rgba(232,38,90,0.52); }
.div-col.tl { background: rgba(31,40,51,0.60); }
.div-col.vt { background: rgba(11,12,16,0.75); }

/* accordion hover */
.divs:hover .div-col        { flex: .72; }
.divs:hover .div-col:hover  { flex: 1.56; }

.div-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.div-n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .45;
}
.div-arrow {
  font-size: 20px;
  opacity: 0;
  transform: translate(-6px,6px);
  transition: opacity var(--med), transform var(--med);
  font-variant-emoji: text;  /* prevent color-emoji rendering on iOS/Android */
}
.div-col:hover .div-arrow { opacity:1; transform:translate(0,0); }

.div-body { display:flex; flex-direction:column; gap:14px; }
.div-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px,3.4vw,56px);
  letter-spacing: -0.015em;
  line-height: 0.95;
}
.div-sub {
  font-size: 14px;
  font-weight: 500;
  opacity: .6;
  line-height: 1.45;
  max-width: 280px;
}
.div-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--slow);
}
.div-col:hover .div-list { max-height: 220px; }
.div-list li {
  font-size: 12px;
  font-weight: 500;
  opacity: .55;
  padding-left: 16px;
  position: relative;
}
/* \FE0E = text variation selector — forces arrow to render as text, not color emoji */
.div-list li::before { content:'\2192\FE0E'; position:absolute; left:0; opacity:.8; }

/* ── STATS ───────────────────────────────────────────── */
.stats {
  background: var(--black);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stat {
  padding: 52px 40px;
  border-right: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
  cursor: default;
}
.stat:last-child { border-right: none; }
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.stat:hover::before { transform: scaleX(1); }
.stat-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px,4.2vw,68px);
  line-height: 0.9;
  letter-spacing: -0.009em;
  color: var(--lime);
  margin-bottom: 16px;
  text-shadow: 0 0 60px rgba(26,101,252,0.25);
}
.stat-l {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.32);
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ── CLIENT SCROLL ───────────────────────────────────── */
.clients-header {
  background: var(--white);
  padding: 52px 52px 20px;
  border-top: 1px solid var(--gray);
}
.clients-wrap {
  overflow:hidden;
  background:var(--white);
  border-top:1px solid var(--gray);
  border-bottom:1px solid var(--gray);
  position: relative;
  z-index: 10;
  isolation: isolate;
}
.clients-track {
  display:flex;
  gap:60px;
  padding:18px 0;
  width:max-content;
  animation: mq 34s linear infinite;
}
.client-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  white-space:nowrap;
  flex-shrink:0;
  transition: color var(--fast);
}
.client-name:hover { color: var(--black); }

/* ── HOME CTA ────────────────────────────────────────── */
.home-cta-shell {
  background: var(--black);
  margin-top: -160px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}
.home-cta-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.home-cta-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 28%, rgba(0,0,0,0.18) 55%, transparent 75%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 28%, rgba(0,0,0,0.18) 55%, transparent 75%);
}
.home-cta {
  background: var(--accent);
  padding: 140px 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  margin: 0 20px;
}
.home-cta::before {
  content: 'REACH';
  position: absolute;
  right: -0.05em;
  bottom: -0.16em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(220px, 38vw, 560px);
  letter-spacing: -0.021em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  pointer-events: none;
  user-select: none;
}
.home-cta-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(72px,11vw,172px);
  line-height: .85;
  letter-spacing: -0.017em;
  color: var(--white);
  position: relative;
}
.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 100px;
  flex-shrink: 0;
  cursor: none;
  transition: opacity var(--fast), transform var(--fast);
}
.btn-pill-dark:hover { opacity:.8; transform:translateY(-3px); }

.btn-pill-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 100px;
  flex-shrink: 0;
  cursor: none;
  transition: opacity var(--fast), transform var(--fast);
}
.btn-pill-light:hover { opacity:.85; transform:translateY(-3px); }

.btn-pill-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--black);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 16.5px 34.5px;
  border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,.18);
  flex-shrink: 0;
  cursor: none;
  text-decoration: none;
  transition: border-color var(--fast), color var(--fast), transform var(--fast);
}
.btn-pill-ghost:hover { border-color: var(--black); color: var(--black); transform: translateY(-3px); }

/* Ghost white variant (for dark backgrounds) */
.btn-pill-ghost-w {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  cursor: none;
  text-decoration: none;
  transition: border-color var(--fast), transform var(--fast);
}
.btn-pill-ghost-w:hover { border-color: rgba(255,255,255,.6); transform: translateY(-3px); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 80px 48px 36px;
  position: relative;
  z-index: 1;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.f-brand {
  display: block;
  margin-bottom: 10px;
}
.f-brand img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
}
.f-tagline { font-size:14px; color:rgba(255,255,255,.35); margin-bottom:18px; }
.f-email   { display:block; font-size:13px; color:rgba(255,255,255,.4); text-decoration:underline; text-underline-offset:3px; margin-top:4px; }
.f-h {
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.22);
  margin-bottom:18px;
}
.f-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.f-links a {
  font-size:14px;
  color:rgba(255,255,255,.52);
  transition:color var(--fast);
  cursor:none;
}
.f-links a:hover { color:var(--lime); }
.footer-bot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:24px;
  font-size:11px;
  color:rgba(255,255,255,.22);
}
.footer-legal { display:flex; gap:16px; flex-wrap: wrap; }
.footer-legal a { color:rgba(255,255,255,.22); transition:color var(--fast); cursor:none; }
.footer-legal a:hover { color:rgba(255,255,255,.55); }

/* ── INNER PAGE HERO ─────────────────────────────────── */
.ph {
  min-height: 76vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 52px 60px;
  position: relative;
  overflow: hidden;
}
.ph.pink   { background:var(--pink);   color:var(--white); }
.ph.blue   { background:var(--cobalt); color:var(--white); }
.ph.blk    { background:var(--black);  color:var(--white); }
.ph.accent { background:var(--accent); color:var(--white); }

.ph-label {
  position:absolute;
  top:84px; left:52px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.42;
}
.ph-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: .92;
  letter-spacing: -0.013em;
  max-width: 1100px;
  margin-bottom: 48px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ph-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.ph-desc { font-size:15px; line-height:1.65; opacity:.55; max-width:380px; }
.ph-stats { display:flex; gap:0; }
.ph-stats > div {
  padding: 0 36px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.ph-stats > div:first-child { padding-left: 0; }
.ph-stats > div:last-child { border-right: none; }
.ph-num {
  font-family:var(--display);
  font-weight:800;
  font-size:30px;
  letter-spacing: -0.012em;
  margin-bottom:4px;
}
.ph-lbl { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.4; }

/* ── SECTION LABELS ──────────────────────────────────── */
.label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.35);
  margin-bottom:24px;
}
.label::before { content:''; display:block; width:18px; height:1px; background:currentColor; }
.label.inv { color:rgba(255,255,255,.35); }

.sec-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px,5.2vw,76px);
  line-height: 0.96;
  letter-spacing: -0.013em;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.sec-title.inv { color:var(--white); }

/* shared section padding */
.sec { padding:100px 52px; }
.sec.off { background:var(--off); }
.sec.blk { background:var(--black); }
.sec.wht { background:var(--white); }

/* ── SERVICES LIST (Marketing) ───────────────────────── */
.svc-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  border-top: 1px solid rgba(0,0,0,.09);
  margin-top: 52px;
}
.svc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-right: 32px;
  transition: padding-left var(--fast);
  cursor: none;
}
.svc-row:hover { padding-left:14px; }
.svc-row-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.006em;
}
.svc-row-n { font-size:11px; font-weight:500; opacity:.28; letter-spacing:.08em; }

/* ── CASE STUDIES (Marketing) ────────────────────────── */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
  margin-top: 56px;
}
.case-card {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--gray);
  transition: transform var(--med), box-shadow var(--med);
  cursor: none;
}
.case-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.1); }
.case-card.wide { grid-column:1/-1; }

.case-vis {
  height: 240px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.case-card.wide .case-vis { height:300px; }
.cv-prime   { background: linear-gradient(160deg,rgba(0,80,180,.82) 0%,rgba(4,18,58,.93) 100%), url('https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?w=1200&q=80&fit=crop') center/cover no-repeat; }
.cv-coke    { background: linear-gradient(160deg,rgba(185,0,20,.82) 0%,rgba(40,4,4,.93) 100%), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1200&q=80&fit=crop') center/cover no-repeat; }
.cv-wb      { background: linear-gradient(160deg,rgba(16,28,56,.82) 0%,rgba(100,76,14,.9) 100%), url('https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?w=1200&q=80&fit=crop') center/cover no-repeat; }
.cv-boohoo  { background: linear-gradient(160deg,rgba(180,28,110,.82) 0%,rgba(42,6,70,.93) 100%), url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&q=80&fit=crop') center/cover no-repeat; }
.cv-triller { background: linear-gradient(160deg,rgba(0,160,80,.82) 0%,rgba(4,4,4,.93) 100%), url('https://images.unsplash.com/photo-1501386760578-eef4f3ac4fb5?w=1200&q=80&fit=crop') center/cover no-repeat; }
.case-brand {
  font-family:var(--display);
  font-weight:800;
  font-size:26px;
  letter-spacing: -0.01em;
  color:rgba(255,255,255,.9);
}
.case-body { padding:28px 28px 24px; background:var(--white); }
.case-co   { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.3; margin-bottom:8px; }
.case-title {
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  letter-spacing: -0.006em;
  margin-bottom:10px;
  line-height:1.2;
}
.case-result { font-size:13px; line-height:1.6; opacity:.48; }
.case-tags   { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.case-tag    { font-size:10px; font-weight:600; padding:5px 12px; background:var(--off); border-radius:100px; opacity:.8; letter-spacing:.04em; }

/* ── PROCESS (Marketing) ─────────────────────────────── */
.process-list { margin-top:52px; }
.process-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  gap: 36px;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.process-row:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
.p-n { font-size:11px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.22); padding-top:3px; }
.p-title { font-family:var(--display); font-weight:700; font-size:20px; letter-spacing: -0.007em; color:var(--white); }
.p-desc  { font-size:13px; line-height:1.6; color:rgba(255,255,255,.42); }

/* ── CREATOR TILES (Talent) ──────────────────────────── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-top: 56px;
}
.c-tile {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  cursor: none;
  border-radius: 6px;
  background: var(--gray);
}
.c-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow);
}
.c-tile:hover .c-tile-img { transform: scale(1.06); }

.c-tile-over {
  position:absolute; bottom:0; left:0; right:0;
  padding:18px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--fast), transform var(--fast);
}
.c-tile:hover .c-tile-over { opacity:1; transform:translateY(0); }
.c-tile-name { font-family:var(--display); font-weight:800; font-size:16px; letter-spacing: -0.006em; }
.c-tile-handle { font-size:11px; opacity:.65; margin-bottom:8px; }
.c-tile-row { display:flex; justify-content:space-between; align-items:center; }
.c-tile-fol { font-size:13px; font-weight:700; color:var(--lime); }
.c-tile-plat { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.55; }

/* always-visible strip */
.c-tile-strip {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 16px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing: -0.003em;
}

/* ── OFFERINGS LIST (Talent) ─────────────────────────── */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  border-top: 1px solid var(--gray);
  margin-top: 52px;
}
.offer-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 28px 40px 28px 0;
  border-bottom: 1px solid var(--gray);
  transition: padding-left var(--fast);
  cursor:none;
}
.offer-row:hover { padding-left:10px; }
.offer-n { font-size:11px; font-weight:700; letter-spacing:.1em; opacity:.28; padding-top:3px; }
.offer-title { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing: -0.006em; margin-bottom:6px; }
.offer-desc  { font-size:13px; line-height:1.6; opacity:.48; }

/* ── PORTFOLIO (Ventures) ────────────────────────────── */
.port-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: rgba(255,255,255,.07);
  margin-top: 56px;
  border-radius: 4px;
  overflow: hidden;
}
.port-card {
  background: #161616;
  padding: 44px 40px;
  transition: background var(--fast);
  cursor:none;
  border-top: 2px solid transparent;
}
.port-card:hover { background:#1e1e1e; border-top-color: var(--lime); }
.port-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.port-name { font-family:var(--display); font-weight:800; font-size:21px; letter-spacing: -0.009em; color:var(--white); }
.port-badge {
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px;
}
.port-badge.tech  { background:rgba(194,255,0,.12); color:var(--lime); }
.port-badge.media { background:rgba(255,45,120,.12); color:var(--pink); }
.port-badge.saas  { background:rgba(0,68,255,.12);  color:#6699FF; }
.port-badge.adv   { background:rgba(34,211,160,.1);  color:#22D3A0; }
.port-desc  { font-size:14px; line-height:1.6; color:rgba(255,255,255,.5); margin-bottom:22px; }
.port-tags  { display:flex; flex-wrap:wrap; gap:6px; }
.port-tag   { font-size:11px; padding:4px 10px; border:1px solid rgba(255,255,255,.12); border-radius:100px; color:rgba(255,255,255,.38); }

/* ── BUILD LIST (Ventures) ───────────────────────────── */
.build-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--gray);
  margin-top:56px;
}
.build-cell {
  padding:36px 36px 36px 0;
  border-bottom:1px solid var(--gray);
  transition:padding-left var(--fast);
  cursor:none;
}
.build-cell:hover { padding-left:12px; }
.build-num   { font-size:11px; font-weight:700; letter-spacing:.1em; opacity:.28; margin-bottom:16px; }
.build-title { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing: -0.006em; margin-bottom:8px; }
.build-desc  { font-size:12px; line-height:1.65; opacity:.46; }

/* ── INNER PAGE CTA ──────────────────────────────────── */
.inner-cta {
  padding:110px 52px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
}
.inner-cta.pink { background:var(--pink); }
.inner-cta.blue { background:var(--blue); }
.inner-cta.lime { background:var(--lime); }

.inner-cta-title {
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(44px,6.5vw,92px);
  line-height:.92;
  letter-spacing: -0.014em;
}
.inner-cta.pink .inner-cta-title,
.inner-cta.blue .inner-cta-title,
.inner-cta.lime .inner-cta-title { color:var(--white); }

/* ── WORK PHOTO STRIP (Home) ─────────────────────────── */
.work-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
  height: 320px;
  overflow: hidden;
}
.ws-item {
  overflow: hidden;
  position: relative;
}
.ws-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow);
  filter: grayscale(20%);
}
.ws-item:hover img { transform: scale(1.07); filter: grayscale(0%); }
.ws-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  transition: opacity var(--fast);
}
.ws-item:hover::after { opacity: 0; }

/* ── PAGE ENTRANCE ───────────────────────────────────── */
.is-loading body { opacity: 0; }
html { transition: none; }
.is-loaded body { animation: pageIn 0.55s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }

/* ── NAV COMPACT ─────────────────────────────────────── */
.nav { transition: height var(--med), border-color var(--med); }
.nav.compact { height: 52px; }

/* ── HERO CHAR STAGGER ───────────────────────────────── */

/* ── INNER PAGE HERO WORD REVEAL ─────────────────────── */
.ph-title .pw-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; }
.ph-title .pw {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.ph-title.words-in .pw { transform: translateY(0); }

/* ── SPLIT WORD REVEAL (sections) ───────────────────── */
.sw-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; }
.sw {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.split-words.on .sw { transform: translateY(0); }


/* ── HORIZONTAL SCROLL ───────────────────────────────── */
.hscroll-outer {
  position: relative;
  background: var(--black);
}
.hscroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hscroll-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 24px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 2;
}
.hscroll-header .label { margin-bottom: 0; }
.hscroll-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.28);
  font-family: var(--display);
}
.hscroll-track {
  display: flex;
  gap: 16px;
  padding: 0 52px;
  will-change: transform;
}
.hscroll-progress {
  position: absolute;
  bottom: 36px; left: 52px; right: 52px;
  height: 1px;
  background: rgba(255,255,255,.1);
  z-index: 2;
}
.hscroll-progress-fill {
  height: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
}
.hs-card {
  flex-shrink: 0;
  height: 68vh;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: none;
}
.hs-card.wide   { width: 56vw; }
.hs-card.narrow { width: 32vw; }
.hs-card img, .hs-video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow);
}
.hs-card:hover img { transform: scale(1.04); }
.hs-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 36px;
  background: linear-gradient(transparent, rgba(0,0,0,.80));
  z-index: 1;
}
.hs-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.hs-card-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px,2.4vw,36px);
  letter-spacing: -0.009em;
  color: #fff;
  line-height: 1.05;
}
.hs-text-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 40px;
}
.hs-text-card.lime  { background: var(--lime); }
.hs-text-card.blk   { background: #161616; }
.hs-text-card.pink  { background: var(--pink); }
.hs-text-card.blue  { background: var(--blue); }
.hs-big-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 68px);
  letter-spacing: -0.009em;
  line-height: 0.9;
  overflow: hidden;
  max-width: 100%;
}
.hs-big-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 16px;
  opacity: 0.5;
}

/* ── SCROLL REVEAL ───────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(0.4,0,0.2,1), transform .75s cubic-bezier(0.4,0,0.2,1); }
.reveal.on { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-52px) translateY(8px); transition:opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
.reveal-right { opacity:0; transform:translateX(52px)  translateY(8px); transition:opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.on, .reveal-right.on { opacity:1; transform:translateX(0) translateY(0); }
.d1{transition-delay:.06s} .d2{transition-delay:.14s} .d3{transition-delay:.22s} .d4{transition-delay:.30s}

@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ── MANIFESTO ───────────────────────────────────────── */
.manifesto {
  background: var(--white);
  padding: 120px 52px;
}
.manifesto-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray);
  padding-bottom: 24px;
  margin-bottom: 72px;
}
.manifesto-idx {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.2);
}
.manifesto-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.manifesto-hed {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 7.8vw, 116px);
  letter-spacing: -0.02em;
  line-height: 0.86;
  color: var(--black);
  word-break: keep-all;
  overflow-wrap: normal;
}
.mo-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  -webkit-text-stroke: 2px var(--accent);
  color: transparent;
  letter-spacing: -0.009em;
}
.manifesto-side { padding-top: 0; }
.manifesto-copy {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(0,0,0,.55);
}
.ms-report-box {
  margin-top: 40px;
  background: var(--accent);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.ms-report-box::before {
  content: '2025';
  position: absolute;
  right: -0.04em;
  bottom: -0.2em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(80px, 14vw, 200px);
  letter-spacing: -0.021em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  pointer-events: none;
  line-height: 1;
}
.ms-report-head {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.ms-report-badge {
  font-family: var(--display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--white);
  border-radius: 100px;
  padding: 6px 14px;
  flex-shrink: 0;
}
.ms-report-method {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.ms-report-box .manifesto-stats {
  padding: 0 28px;
  margin-top: 0;
  border-top: none;
  position: relative;
  z-index: 1;
}
.ms-report-box .ms-item {
  border-bottom-color: rgba(255,255,255,.12);
  padding: 16px 0;
}
.ms-report-box .ms-item:first-child { border-top: 1px solid rgba(255,255,255,.12); margin-top: 20px; }
.ms-report-box .ms-num { color: var(--white); }
.ms-report-box .ms-lbl { color: rgba(255,255,255,.55); }
.ms-report-box .ms-cta {
  display: block;
  padding: 18px 28px;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,.15);
  transition: background var(--fast);
}
.ms-report-box .ms-cta:hover { background: rgba(0,0,0,.28); opacity: 1; }
.manifesto-stats {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: 52px;
}
.ms-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.ms-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.012em;
  color: var(--black);
  min-width: 100px;
  flex-shrink: 0;
}
.ms-lbl {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,.45);
  line-height: 1.4;
}
.ms-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--fast);
}
.ms-cta:hover { opacity: 0.6; }

/* ── ACCENT BAND ─────────────────────────────────────── */
.accent-band {
  background: var(--lime);
  overflow: hidden;
  padding: 16px 0;
}
.ab-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: mq 22s linear infinite;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}
.ab-sep { opacity: 0.35; flex-shrink: 0; }

/* ── SELECTED WORK ───────────────────────────────────── */
.sw-section {
  background: var(--black);
  padding: 100px 52px 120px;
}
.sw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.sw-all {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color var(--fast);
}
.sw-all:hover { color: var(--lime); }
.sw-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  height: 680px;
}
.sw-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sw-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  display: block;
  text-decoration: none;
  background: #1a1a1a;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color var(--fast), transform var(--slow);
}
.sw-card:hover { outline-color: var(--lime); transform: translateY(-4px); }
.sw-big { height: 100%; }
.sw-sm { flex: 1; }
.sw-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--slow);
}
.sw-card:hover .sw-img { transform: scale(1.05); }
.sw-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sw-over {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 32px 36px;
  background: linear-gradient(transparent, rgba(0,0,0,.96) 65%);
}
.sw-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.sw-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 48px);
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 8px;
  line-height: 0.95;
}
.sw-result {
  font-size: 12px;
  color: var(--lime);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── ETHOS ───────────────────────────────────────────── */
.ethos {
  position: relative;
  border-top: 1px solid var(--gray);
  border-bottom: none;
  z-index: 1;
}
.ethos-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: -260px;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.82;
  z-index: 0;
  transform: scale(1.08);
  transition: transform 0.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, black 25%, rgba(0,0,0,0.55) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 25%, rgba(0,0,0,0.55) 70%, transparent 100%);
}
.ethos-inner {
  position: relative;
  z-index: 3;
  padding: 120px 52px 220px;
  background: linear-gradient(to bottom, rgba(11,12,16,0.78) 0%, rgba(11,12,16,0.80) 45%, var(--black) 80%);
}
.ethos-pre { margin-bottom: 28px; }
.ethos-hed {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 84px);
  letter-spacing: -0.015em;
  line-height: 0.96;
  color: var(--white);
  max-width: 1100px;
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ethos-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ethos-copy {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  max-width: 500px;
}
.ethos-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background: linear-gradient(to bottom, transparent 0%, rgba(11,12,16,0.6) 50%, var(--black) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── RESPONSIVE ──────────────────────────────────────── */

/* ── 1280px: large tablet / small desktop ─────────────── */
@media (max-width: 1280px) {
  .hero { padding: 96px 40px 48px; }
  .sec { padding: 88px 40px; }
  .manifesto { padding: 100px 40px; }
  .footer { padding: 72px 40px 32px; }
}

/* ── 1100px: large tablet ───────────────────────────── */
@media (max-width:1100px) {
  .roster-grid { grid-template-columns:repeat(3,1fr); }
  .port-grid { grid-template-columns:repeat(2,1fr); }

  /* manifesto: drop per-word line breaks, let text wrap naturally */
  .manifesto-hed br { display: none; }
  .manifesto-hed {
    font-size: clamp(44px, 6.5vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    overflow: visible;
  }
}

/* ── 960px: tablet portrait ─────────────────────────── */
@media (max-width:960px) {
  .hscroll-outer { display:none; }
  .nav-links,.nav-cta { display:none; }
  .nav-burger { display:flex; }

  /* divisions: stack vertically, height driven by content */
  .divs { flex-direction:column; min-height:auto; }
  .div-col { min-height:auto; padding:28px 32px; }
  .divs:hover .div-col,
  .divs:hover .div-col:hover { flex:1; }
  /* always show arrow on touch — no hover state on mobile */
  .div-arrow { opacity:1; transform:translate(0,0); font-variant-emoji:text; }

  /* inner hero */
  .ph-foot { flex-direction:column; align-items:flex-start; gap:28px; }
  .ph-stats { flex-wrap:wrap; }
  .ph-stats > div { padding:0 24px; }

  /* new home sections */
  .manifesto-body { grid-template-columns:1fr; gap:48px; }
  .sw-grid { grid-template-columns:1fr; height:auto; }
  .sw-col { flex-direction:row; }
  .sw-big { height:56vw; }
  .sw-sm { height:40vw; flex:none; width:calc(50% - 6px); }
  .ethos-foot { flex-direction:column; align-items:flex-start; }
  .ethos-inner { padding: 80px 32px; }

  /* grids */
  .cases-grid { grid-template-columns:1fr; }
  .build-grid { grid-template-columns:repeat(2,1fr); }
  .svc-list { grid-template-columns:1fr; }
  .offer-grid { grid-template-columns:1fr; }

  /* process list */
  .process-row { grid-template-columns:44px 1fr; gap:0 20px; }
  .p-desc { grid-column:2; }

  /* stats + footer */
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat { border-right-color:rgba(255,255,255,.07); }
  .footer-top { grid-template-columns:1fr 1fr; gap:36px; }

  .sec { padding: 80px 32px; }
  .manifesto { padding: 88px 32px; }
}

/* ── 768px: phones ───────────────────────────────────── */
@media (max-width:768px) {
  /* nav */
  .nav { padding:0 20px; height:56px; }

  /* home hero */
  .hero { padding:68px 20px 32px; }
  .hero-top { margin-bottom:4px; }
  .hero::before { font-size:clamp(120px,58vw,260px); }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:18px; }
  .hero-foot-right { width:100%; justify-content:space-between; gap:16px; }
  .hero-cta-link { display:none; }

  /* sections */
  .sec { padding:72px 20px; }
  .ph { padding:100px 20px 48px; }
  .ph-label { left:20px; }
  .ph-title { margin-bottom:36px; }

  /* inner hero stats: 2-per-row grid */
  .ph-stats { display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%; }
  .ph-stats > div {
    padding:18px 0;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .ph-stats > div:nth-child(odd) { padding-right:12px; }
  .ph-stats > div:nth-child(even) { padding-left:12px; border-left:1px solid rgba(255,255,255,.1); }
  .ph-stats > div:nth-last-child(-n+2) { border-bottom:none; }

  /* stats row */
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat { padding:48px 24px; }

  /* home cta */
  .home-cta-shell { margin-top: -100px; padding-bottom: 0; }
  .home-cta { flex-direction:column; align-items:flex-start; padding:80px 28px; border-radius: 24px; margin: 0 12px; }
  .footer { padding: 64px 24px 36px; }
  .ethos { border-radius: 0; }
  .home-cta-title { font-size:clamp(64px,18vw,110px); }

  /* footer */
  .footer { padding:52px 20px 32px; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .footer-bot { flex-direction:column; gap:12px; }

  /* inner cta */
  .inner-cta { flex-direction:column; align-items:flex-start; padding:72px 20px; }

  /* new home sections */
  .manifesto { padding:72px 20px; }
  .manifesto-bar { margin-bottom:44px; }
  .manifesto-stats { grid-template-columns:1fr 1fr; }
  .manifesto-hed { font-size: clamp(36px, 8vw, 56px); line-height: 1.05; }
  .sw-section { padding:64px 20px 72px; }
  .sw-col { flex-direction:column; }
  .sw-big { height:64vw; }
  .sw-sm { height:48vw; width:100%; }
  .ethos-inner { padding:72px 20px; }
  .ethos-hed { font-size:clamp(24px,7vw,40px); margin-bottom:36px; padding-bottom:36px; }

  /* grids */
  .port-grid { grid-template-columns:1fr; }
  .roster-grid { grid-template-columns:repeat(2,1fr); }
  .build-grid { grid-template-columns:1fr; }
  .build-cell { padding:28px 0; }

  /* offer rows */
  .offer-row { grid-template-columns:36px 1fr; gap:0 16px; }
  .offer-n { font-size:11px; }

  /* process rows */
  .process-row { grid-template-columns:36px 1fr; gap:0 16px; }
  .p-n { font-size:11px; }

  .footer-legal { flex-wrap: wrap; gap: 8px 16px; }
  .ms-report-box .manifesto-stats { padding: 0 20px; }
  .ms-num { font-size: clamp(24px, 5vw, 36px); min-width: 80px; }
  .home-cta { padding: 60px 24px; }
  .home-cta-title { font-size: clamp(56px, 15vw, 96px); }
}

/* ── HERO VIDEO ─────────────────────────────────────── */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.28;
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  pointer-events: none;
}
.hero-video-over {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,12,16,0.72) 0%, rgba(11,12,16,0.3) 50%, rgba(11,12,16,0.92) 100%);
  z-index: 1;
}
.hero-top, .hero-content, .hero-foot { position: relative; z-index: 2; }
.hero::before { z-index: 3; }
.hero::after  { z-index: 2; }

/* ── DIVISION BG IMAGES ──────────────────────────────── */
.div-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  transition: opacity var(--slow), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index: 0;
  pointer-events: none;
}
.div-col:hover .div-bg-img { opacity: 0.60; transform: scale(1.07); }
.div-top, .div-body { position: relative; z-index: 1; }

/* ── HOME CTA BACKGROUND ─────────────────────────────── */
.home-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.38;
  z-index: 0;
}
.home-cta-title, .home-cta > .btn-pill-dark { position: relative; z-index: 2; }
.home-cta::before { z-index: 2; }

/* ── ABOUT HERO PHOTO ────────────────────────────────── */
.ph-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
  opacity: 0.2;
}
.ph > *:not(.ph-bg) { position: relative; z-index: 1; }

/* ── ABOUT IMAGE STRIP ───────────────────────────────── */
.about-img-strip {
  overflow: hidden;
  height: 340px;
  display: block;
}
.about-img-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ── MANIFESTO OVERFLOW FIX ──────────────────────────── */
.manifesto-hed {
  overflow: hidden;
  min-width: 0;
}
@media (max-width: 1100px) {
  .manifesto-hed {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ── 480px: small phones ─────────────────────────────── */
@media (max-width:480px) {
  /* hero: further shrink ghost watermark */
  .hero::before { display:none; }

  /* inner hero stats: stack to single column */
  .ph-stats { grid-template-columns:1fr; width:100%; }
  .ph-stats > div { padding:14px 0 !important; border-left:none !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
  .ph-stats > div:last-child { border-bottom:none !important; }

  /* roster stays 2-col, cases 1-col */
  .roster-grid { grid-template-columns:repeat(2,1fr); }
  .cases-grid { grid-template-columns:1fr; }

  /* section titles tighten up */
  .sec-title { font-size:clamp(28px,9vw,48px); }
  .ph-title { font-size:clamp(36px,11vw,64px); }

  .manifesto-stats { grid-template-columns: 1fr; }
  .ms-report-box .manifesto-stats { padding: 0 16px; }
  .manifesto-hed { font-size: clamp(30px, 8.5vw, 46px); line-height: 1.08; }
  .ms-item { gap: 16px; }
  .ms-num { min-width: 70px; font-size: clamp(22px, 6vw, 32px); }
  .ms-lbl { font-size: 12px; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .manifesto { padding: 64px 20px; }
  .stat { padding: 36px 20px; }
  .hero { padding: 80px 20px 40px; }
}

/* ── 360px: very small phones ────────────────────────── */
@media (max-width: 360px) {
  .hero-headline { font-size: clamp(40px, 12vw, 60px); }
  .ms-num { font-size: 20px; min-width: 60px; }
  .stat-n { font-size: clamp(28px, 8vw, 44px); }
  .manifesto-hed { font-size: clamp(26px, 8vw, 36px); line-height: 1.1; }
  .sec-title { font-size: clamp(26px, 8.5vw, 44px); }
}

/* ── CASE STUDY CARD BADGE ───────────────────────────── */
.cs-play-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  pointer-events: none;
  z-index: 2;
}

.sw-card-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

.cs-ext-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 101, 252, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
  z-index: 3;
}
.cs-ext-btn:hover { background: rgba(26, 101, 252, 1); }

.cs-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.cs-visit-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── CASE STUDY MODAL ────────────────────────────────── */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px 60px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cs-modal.cs-open {
  opacity: 1;
  pointer-events: all;
}
.cs-modal-inner {
  background: #0e0e10;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  width: 100%;
  max-width: 1080px;
  overflow: hidden;
  position: relative;
  transform: translateY(32px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.cs-modal.cs-open .cs-modal-inner { transform: translateY(0); }

.cs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fast), color var(--fast);
}
.cs-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Hero video */
.cs-hero-video {
  position: relative;
  width: 100%;
  height: 52vw;
  max-height: 520px;
  overflow: hidden;
  background: #000;
}
.cs-hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-hero-over {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 80px 48px 44px;
  background: linear-gradient(transparent, rgba(0,0,0,0.92));
  z-index: 2;
}
.cs-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.cs-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 52px);
  letter-spacing: -0.009em;
  line-height: 1.05;
  color: #fff;
}

/* Stats bar */
.cs-stats-bar {
  display: flex;
  align-items: stretch;
  background: var(--accent);
  padding: 0 48px;
}
.cs-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 24px 28px 24px 0;
  border-right: 1px solid rgba(255,255,255,0.18);
  margin-right: 28px;
}
.cs-stat:first-child { padding-left: 0; }
.cs-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.cs-stat-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: -0.012em;
  color: #fff;
  line-height: 1;
}
.cs-stat-l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  line-height: 1;
}

/* Body */
.cs-body {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-section {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-section:first-child { padding-top: 0; }
.cs-section:last-child { border-bottom: none; padding-bottom: 0; }
.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.cs-block { display: flex; flex-direction: column; gap: 14px; }
.cs-block-full { width: 100%; }
.cs-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
  max-width: 60px;
}
.cs-text {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
}
.cs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-list li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  padding: 10px 0 10px 22px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
}
.cs-list li:last-child { border-bottom: none; }
.cs-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

/* Creator mix / performance grids */
.cs-mix-grid, .cs-perf-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cs-mix-group, .cs-perf-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-mix-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,0.9);
  padding: 0 0 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2px;
}
.cs-mix-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cs-mix-row:last-child { border-bottom: none; }
.cs-mix-row span:last-child {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Impact bar */
.cs-impact-bar {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.cs-impact-item {
  background: rgba(255,255,255,0.04);
  padding: 22px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
}
.cs-impact-item strong { color: #fff; }

/* Video gallery */
.cs-video-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.cs-video-grid video {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Notable creators */
.cs-creators {
  font-size: 13px;
  line-height: 2.1;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.03em;
}

/* Selected Work video cards */
.sw-card { position: relative; overflow: hidden; }
.sw-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── MOBILE FEATURED WORK SLIDER ───────────────────────────── */
.mob-slider-section {
  display: none; /* hidden on desktop — shown only inside @media ≤960px */
  background: var(--black);
  padding: 0 0 32px;
}
.mob-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mob-slider-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.28);
  font-family: var(--display);
}
.mob-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.mob-slider-track::-webkit-scrollbar { display: none; }
.mob-slide {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 75svh;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: #000;
}
.mob-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mob-slide-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
}
.mob-slide-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.mob-slide-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.05;
}
.mob-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 18px;
}
.mob-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .25s, transform .25s;
}
.mob-dot.active {
  background: var(--lime);
  transform: scale(1.4);
}

@media (max-width: 960px) {
  .mob-slider-section { display: block; }
}