:root {
  --ink: #070708;
  --surface: #0e0d10;
  --surface-2: #151116;
  --paper: #f5f1f3;
  --muted: #aaa4ac;
  --line: rgba(255, 255, 255, 0.12);
  --pink: #f20b7a;
  --pink-soft: #ff3f9c;
  --max: 1380px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ink); }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}

body::selection { background: var(--pink); color: white; }

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 96px));
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand img { width: 128px; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(242, 11, 122, .18)); }

.nav { display: flex; align-items: center; gap: 42px; }
.nav a { position: relative; color: #f8f5f6; font-size: 15px; font-weight: 650; letter-spacing: -.01em; padding: 12px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .28s ease; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.menu-button { display: none; }

.hero {
  position: relative;
  min-height: min(960px, 100svh);
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 140px max(48px, calc((100vw - var(--max)) / 2)) 74px;
  background: radial-gradient(circle at 83% 28%, rgba(208, 0, 85, .24), transparent 30%), linear-gradient(105deg, #050506 0%, #070708 52%, #16030c 100%);
}

.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, black, transparent 68%); }
.hero::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -120px 130px #070708; pointer-events: none; }

.hero-glow { position: absolute; z-index: 1; width: 700px; height: 700px; right: -160px; top: 10%; background: radial-gradient(circle, rgba(255,0,117,.32), rgba(255,0,117,0) 66%); filter: blur(18px); animation: breathe 6s ease-in-out infinite; }

.hero-art { position: absolute; z-index: 2; top: 8%; right: -2%; width: min(67vw, 1050px); height: 90%; background: url('assets/media2m-hero-production.png') right center / contain no-repeat; filter: saturate(1.08) contrast(1.05); transform-origin: 70% 55%; animation: drift 10s ease-in-out infinite alternate; }

.hero-copy { position: relative; z-index: 4; width: min(720px, 53vw); padding-top: 40px; }
.eyebrow { margin: 0 0 28px; color: var(--pink-soft); font-size: 12px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(54px, 5.1vw, 82px); line-height: .99; letter-spacing: -.055em; font-weight: 840; }
.hero h1 em { display: block; font-style: normal; background: linear-gradient(90deg, #fff 2%, #fb8abe 70%, #ff187d); background-clip: text; color: transparent; }
.hero-intro { width: min(580px, 92%); margin: 32px 0; color: #b8b2ba; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; }

.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 60px; padding: 0 26px; border: 0; border-radius: 14px; cursor: pointer; font-weight: 760; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button span { display: inline-block; font-size: 22px; transition: transform .25s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button:hover span, .button:focus-visible span { transform: translate(4px, -4px); }
.primary { color: #fff; background: linear-gradient(135deg, #ee0876, #ff258d); box-shadow: 0 16px 60px rgba(242, 11, 122, .24); }
.primary:hover { box-shadow: 0 20px 70px rgba(242, 11, 122, .38); }

.signal { position: absolute; z-index: 4; left: max(48px, calc((100vw - var(--max)) / 2)); bottom: 70px; display: flex; align-items: flex-end; gap: 12px; height: 34px; }
.signal i { width: 2px; min-height: 3px; background: var(--pink); border-radius: 10px; animation: signal 1.7s ease-in-out infinite alternate; }
.signal i:nth-child(2) { height: 7px; animation-delay: .2s; }
.signal i:nth-child(3) { height: 12px; animation-delay: .35s; }
.signal i:nth-child(4) { height: 19px; animation-delay: .1s; }
.signal i:nth-child(5) { height: 28px; animation-delay: .55s; }
.signal i:nth-child(6) { height: 16px; animation-delay: .25s; }
.signal i:nth-child(7) { height: 34px; animation-delay: .6s; }
.scroll-cue { position: absolute; z-index: 4; right: max(48px, calc((100vw - var(--max)) / 2)); bottom: 72px; margin: 0; color: #837d85; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }

.section { width: min(var(--max), calc(100% - 96px)); margin: 0 auto; padding: 150px 0; }
.section-kicker { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 24px 0 80px; color: #8d878f; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.section-kicker span { color: var(--pink-soft); font-weight: 800; }
.section-kicker p { margin: 0; }
.about-grid { display: grid; grid-template-columns: 1.05fr .8fr; gap: 13vw; align-items: start; }
.about h2, .section-heading h2, .partner-copy h2, .contact-intro h2 { margin: 0; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -.05em; }
.about-copy { color: #aaa4ac; font-size: 18px; line-height: 1.75; }
.about-copy p { margin: 0 0 24px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 100px; border: 1px solid var(--line); background: var(--line); }
.metrics article { display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 34px; background: #0b0b0d; }
.metrics strong { margin-bottom: 18px; color: #fff; font-size: clamp(42px, 4vw, 64px); letter-spacing: -.06em; }
.metrics span { color: #8f8991; line-height: 1.4; }

.expertise { display: grid; grid-template-columns: .78fr 1.45fr; gap: 8vw; align-items: start; }
.section-heading { position: sticky; top: 70px; }
.section-heading > p:last-child { max-width: 430px; margin-top: 30px; color: #9c969f; font-size: 18px; line-height: 1.65; }
.expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.expertise-card { position: relative; overflow: hidden; min-height: 330px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.expertise-card:hover { transform: translateY(-6px); border-color: rgba(242,11,122,.6); background: linear-gradient(145deg, rgba(242,11,122,.09), rgba(255,255,255,.018)); }
.expertise-card > span { color: #6f6971; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.expertise-card h3 { position: absolute; left: 30px; bottom: 92px; margin: 0; font-size: 30px; letter-spacing: -.04em; }
.expertise-card p { position: absolute; left: 30px; right: 30px; bottom: 24px; margin: 0; color: #9f99a1; line-height: 1.5; }
.card-mark { position: absolute; top: 28px; right: 26px; width: 90px; height: 90px; }
.card-mark i { position: absolute; inset: 12px; border: 1px solid rgba(255,70,155,.45); border-radius: 18px; transform: rotate(24deg); }
.card-mark i:nth-child(2) { inset: 24px; background: rgba(242,11,122,.14); transform: rotate(8deg); }
.card-mark i:nth-child(3) { inset: 36px; background: var(--pink); border: 0; box-shadow: 0 0 28px rgba(242,11,122,.7); }

.partners { position: relative; width: 100%; min-height: 730px; padding-left: max(48px, calc((100vw - var(--max)) / 2)); padding-right: max(48px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; overflow: hidden; background: linear-gradient(115deg, #16030c, #09080b 50%, #050506); }
.partners::before { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 16% 45%, #ff177c 0 1px, transparent 2px) 0 0/34px 34px; mask-image: radial-gradient(circle at 18% 50%, black, transparent 52%); }
.partner-visual { position: relative; height: 520px; perspective: 1000px; }
.core { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(-7deg); width: 175px; height: 220px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 32px; background: linear-gradient(145deg, rgba(255,90,160,.6), rgba(35,0,17,.75)); box-shadow: 0 0 80px rgba(242,11,122,.52), inset 0 0 35px rgba(255,255,255,.16); color: #fff; font-size: 54px; font-weight: 900; letter-spacing: -.09em; backdrop-filter: blur(16px); }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,47,143,.6); border-radius: 50%; transform: translate(-50%, -50%) rotateX(65deg) rotateZ(-16deg); }
.orbit::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: 50%; left: -7px; background: #ff4aa1; box-shadow: 0 0 30px #ff1685; }
.orbit-one { width: 500px; height: 260px; }
.orbit-two { width: 380px; height: 570px; transform: translate(-50%, -50%) rotateY(68deg) rotateZ(12deg); }
.partner-copy { position: relative; z-index: 2; }
.partner-copy > p:not(.eyebrow) { max-width: 590px; margin: 30px 0; color: #aea8b0; font-size: 19px; line-height: 1.65; }
.text-link { display: inline-flex; gap: 16px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--pink); font-weight: 750; }
.text-link span { color: var(--pink-soft); transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }

.contact { display: grid; grid-template-columns: 1fr .9fr; gap: 10vw; }
.contact-intro > p:last-child { max-width: 560px; margin: 32px 0 0; color: #9f99a1; font-size: 18px; line-height: 1.65; }
.contact-form { display: flex; flex-direction: column; gap: 25px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 10px; color: #827c84; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid #39353a; border-radius: 0; outline: none; padding: 10px 0 16px; background: transparent; color: #fff; font-size: 17px; font-weight: 450; text-transform: none; transition: border-color .2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--pink); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .button { align-self: flex-start; margin-top: 8px; }
.form-note { margin: 0; padding: 14px 18px; border: 1px solid rgba(242,11,122,.35); border-radius: 10px; color: #c7c1c8; background: rgba(242,11,122,.08); line-height: 1.5; }

footer { width: min(var(--max), calc(100% - 96px)); margin: 0 auto; min-height: 210px; display: grid; grid-template-columns: 160px 1fr 1fr auto; gap: 40px; align-items: center; border-top: 1px solid var(--line); color: #777178; font-size: 13px; }
footer img { width: 120px; }
footer a { color: #e7e1e4; }

@keyframes drift { from { transform: translate3d(0, -4px, 0) scale(1.005); } to { transform: translate3d(-10px, 8px, 0) scale(1.025); } }
@keyframes breathe { 50% { opacity: .67; transform: scale(1.08); } }
@keyframes signal { from { transform: scaleY(.3); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
.reveal { animation: enter .8s cubic-bezier(.2,.75,.2,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .site-header { width: calc(100% - 56px); }
  .nav { gap: 24px; }
  .hero { padding-left: 28px; padding-right: 28px; }
  .hero-art { right: -20%; width: 82vw; opacity: .72; }
  .hero-copy { width: 62vw; }
  .section { width: calc(100% - 56px); }
  .expertise { grid-template-columns: 1fr; }
  .section-heading { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-bottom: 40px; }
  .section-heading .eyebrow { grid-column: 1 / -1; }
  .partners { padding-left: 28px; padding-right: 28px; }
  .contact { gap: 6vw; }
  footer { width: calc(100% - 56px); grid-template-columns: 120px 1fr 1fr; }
  footer a { grid-column: 3; }
}

@media (max-width: 820px) {
  .site-header { left: 18px; right: 18px; transform: none; height: 82px; width: auto; }
  .brand { position: relative; z-index: 24; }
  .brand img { width: 86px; }
  .menu-button { position: relative; z-index: 24; display: grid; grid-template-columns: 22px auto; grid-template-rows: repeat(3, 5px); column-gap: 10px; align-items: center; min-width: 76px; min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: #fff; cursor: pointer; }
  .menu-button .menu-line { grid-column: 1; width: 22px; height: 1px; margin: 0; background: white; transform-origin: center; transition: transform .25s ease, opacity .2s ease; }
  .menu-button[aria-expanded="true"] .menu-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] .menu-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .menu-button b { grid-column: 2; grid-row: 1 / 4; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .nav { position: fixed; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 100px 28px 50px; background: rgba(6,6,7,.985); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
  .nav.open { opacity: 1; visibility: visible; }
  .nav.open { pointer-events: auto; }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: clamp(26px, 8vw, 34px); font-weight: 720; }
  .nav a::after { display: none; }

  .hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 92px 18px 58px; }
  .hero::before { mask-image: none; opacity: .1; }
  .hero::after { box-shadow: inset 0 -72px 90px #070708; }
  .hero-art { position: relative; order: 1; top: auto; right: auto; width: 100%; height: clamp(250px, 69vw, 320px); margin: 8px 0 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; opacity: 1; background-image: linear-gradient(to bottom, transparent 72%, rgba(7,7,8,.22)), url('assets/media2m-hero-mobile-v2.webp'); background-position: center, center 55%; background-size: cover, cover; box-shadow: 0 22px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(242,11,122,.035); filter: saturate(.92) contrast(1.04); animation: none; }
  .hero-glow { top: -160px; right: -390px; width: 620px; height: 620px; opacity: .38; }
  .hero-copy { order: 2; width: 100%; padding: 0; }
  .hero h1 { max-width: 650px; font-size: clamp(38px, 10.8vw, 52px); line-height: 1.02; letter-spacing: -.047em; }
  .hero h1 em { display: inline; }
  .hero-intro { width: 100%; max-width: 560px; margin: 22px 0 26px; font-size: 16px; line-height: 1.55; }
  .hero .button { width: 100%; min-height: 56px; }
  .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .signal, .scroll-cue { display: none; }

  .section { width: calc(100% - 36px); padding: 82px 0; }
  .section-kicker { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0 48px; line-height: 1.5; }
  .section-kicker p { max-width: 310px; margin: 0; text-align: left; }
  .about-grid, .contact { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .about h2, .section-heading h2, .partner-copy h2, .contact-intro h2 { font-size: clamp(36px, 10.2vw, 46px); line-height: 1.04; }
  .about-copy { font-size: 16px; line-height: 1.65; }
  .about-copy p { margin-bottom: 20px; }
  .metrics { grid-template-columns: 1fr; margin-top: 52px; }
  .metrics article { min-height: 132px; padding: 26px; }
  .metrics strong { margin-bottom: 10px; font-size: 44px; }
  .section-heading { display: block; margin-bottom: 34px; }
  .section-heading > p:last-child { margin-top: 22px; font-size: 16px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { min-height: 0; padding: 24px; }
  .expertise-card h3 { position: static; margin: 92px 0 12px; font-size: 28px; }
  .expertise-card p { position: static; font-size: 15px; line-height: 1.55; }
  .card-mark { top: 20px; right: 18px; width: 76px; height: 76px; }
  .partners { min-height: 0; padding: 82px 18px 42px; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .partner-copy { order: 1; }
  .partner-copy > p:not(.eyebrow) { margin: 24px 0; font-size: 16px; }
  .partner-visual { order: 2; height: 330px; width: 100%; }
  .core { width: 130px; height: 164px; border-radius: 25px; font-size: 40px; }
  .orbit-one { width: min(340px, 94vw); height: 190px; }
  .orbit-two { width: 290px; height: 390px; }
  .contact-intro > p:last-child { margin-top: 24px; font-size: 16px; }
  .contact-form { gap: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-form input, .contact-form textarea { font-size: 16px; }
  .contact-form .button { width: 100%; }
  footer { width: calc(100% - 36px); min-height: 0; padding: 52px 0; grid-template-columns: 1fr; gap: 16px; line-height: 1.5; }
  footer img { width: 96px; margin-bottom: 10px; }
  footer p { margin: 0; }
  footer a { grid-column: auto; }
}

@media (max-width: 420px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero-art { width: 100%; height: 248px; margin: 6px 0 22px; border-radius: 20px; }
  .hero h1 { font-size: clamp(36px, 10.9vw, 44px); }
  .button { gap: 16px; padding: 0 20px; }
  .section { width: calc(100% - 32px); padding: 72px 0; }
  .about h2, .section-heading h2, .partner-copy h2, .contact-intro h2 { font-size: 36px; }
  .expertise-card { border-radius: 16px; }
  .partners { padding-left: 16px; padding-right: 16px; }
  .partner-visual { height: 300px; }
  .orbit-two { width: 240px; height: 360px; }
  footer { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}