/* ==========================================================================
   MTS — design tokens
   ========================================================================== */
/* Self-hosted variable webfonts. Archivo stands in for the broadcast display face,
   JetBrains Mono for timecode / ticker / metadata type. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url("assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url("assets/fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Base ink */
  --mts-black:#000000;
  --mts-ink-950:#04060A;
  --mts-ink-900:#080B12;
  --mts-ink-800:#0E121B;
  --mts-ink-700:#151A25;
  --mts-ink-600:#1E2532;
  --mts-ink-500:#2A3242;

  /* Neutrals */
  --mts-white:#FFF8F6;
  --mts-white-pure:#FFFFFF;
  --mts-gray-050:#F2F4F8;
  --mts-gray-100:#DEE3EC;
  --mts-gray-300:#A5AEC0;
  --mts-gray-500:#6C7689;
  --mts-gray-700:#3D4553;

  /* Signal colors */
  --mts-yellow:#FFDB29;
  --mts-red:#E6332A;
  --mts-cyan:#2DE8EE;
  --mts-yellow-dim:#B39A1D;
  --mts-red-dim:#9E231D;
  --mts-cyan-dim:#1EA1A5;
  --mts-red-hot:#FF3B21;
  --mts-mark-black:#050709;
  --mts-bone:#FFF8F6;

  /* Broadcast blues */
  --mts-blue:#9FC5FE;
  --mts-blue-mid:#4E7ED8;
  --mts-blue-deep:#0A1B45;
  --mts-blue-abyss:#020616;

  /* Semantic surfaces */
  --bg-page:var(--mts-black);
  --bg-surface:var(--mts-ink-900);
  --bg-raised:var(--mts-ink-800);
  --bg-inset:var(--mts-ink-950);
  --bg-overlay:rgba(4,6,10,.82);
  --bg-blue-field:var(--mts-blue-abyss);

  /* Semantic text */
  --text-primary:var(--mts-white);
  --text-secondary:var(--mts-gray-300);
  --text-muted:var(--mts-gray-500);
  --text-inverse:var(--mts-black);
  --text-link:var(--mts-cyan);
  --text-link-hover:var(--mts-white);

  /* Semantic accents */
  --accent:var(--mts-cyan);
  --accent-alt:var(--mts-yellow);
  --accent-live:var(--mts-red-hot);
  --accent-archive:var(--mts-blue);

  /* Lines */
  --border-hairline:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.22);
  --border-accent:var(--mts-cyan);
  --focus-ring:var(--mts-cyan);

  /* Type */
  --font-display:"Archivo","Archivo Narrow",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --font-condensed:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --text-3xs:10px;
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:26px;
  --text-2xl:34px;
  --text-3xl:46px;
  --text-4xl:62px;
  --text-5xl:84px;

  --leading-tight:1.02;
  --leading-snug:1.15;
  --leading-normal:1.5;
  --leading-loose:1.65;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;

  --track-caps:.14em;
  --track-caps-tight:.08em;
  --track-display:-.025em;
  --track-normal:0em;

  /* Space */
  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:56px;
  --space-12:72px;
  --space-13:96px;
  --gutter:20px;
  --page-max:1180px;

  /* Radius */
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:4px;
  --radius-3:6px;
  --radius-4:8px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Effects */
  --blur-chrome:saturate(140%) blur(14px);

  /* Elevation */
  --shadow-none:none;
  --shadow-card:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 32px rgba(0,0,0,.6);
  --shadow-raised:0 1px 0 rgba(255,255,255,.08) inset, 0 20px 60px rgba(0,0,0,.75);
  --shadow-overlay:0 40px 120px rgba(0,0,0,.9);
  --glow-cyan:0 0 0 1px rgba(45,232,238,.55), 0 0 24px rgba(45,232,238,.30);
  --glow-yellow:0 0 0 1px rgba(255,219,41,.55), 0 0 24px rgba(255,219,41,.28);
  --glow-live:0 0 0 1px rgba(255,59,33,.6), 0 0 28px rgba(255,59,33,.38);
  --glow-soft:0 0 40px rgba(159,197,254,.18);

  /* Motion */
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:420ms;
  --dur-ticker:38s;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-linear:linear;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-page)}
body{color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
img{display:block;max-width:100%}
::selection{background:var(--mts-cyan);color:var(--mts-black)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.wrap{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);min-height:100vh}
.max{max-width:var(--page-max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mts-yellow)}
.eyebrow--muted{color:var(--text-secondary)}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:rgba(4,6,10,.86);backdrop-filter:var(--blur-chrome);-webkit-backdrop-filter:var(--blur-chrome);border-bottom:1px solid var(--border-hairline)}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__brand img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:22px;font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase}
.nav__links a{color:var(--text-secondary)}
.nav__links a:hover{color:var(--text-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:700;letter-spacing:var(--track-caps-tight);text-transform:uppercase;border-radius:var(--radius-1);cursor:pointer}
.btn--primary{background:var(--mts-white);color:var(--mts-black);border:none}
.btn--primary:hover{background:var(--mts-white);color:var(--mts-black);opacity:.9}
.btn--ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}
.btn--ghost:hover{color:var(--mts-white);border-color:var(--mts-white)}
.btn--sm{min-height:32px;padding:0 16px;font-family:var(--font-body);font-size:var(--text-2xs)}
.btn--lg{min-height:46px;padding:0 26px;font-size:var(--text-sm)}

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker{overflow:hidden;border-bottom:1px solid var(--border-hairline);background:var(--bg-inset)}
.ticker__track{display:flex;width:max-content;white-space:nowrap;animation:mts-marquee var(--dur-ticker) linear infinite;padding:9px 0}
.ticker__set{display:flex;gap:34px;padding-right:34px;font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-secondary)}
.ticker__set .is-yellow{color:var(--mts-yellow)}
.ticker__set .is-cyan{color:var(--mts-cyan)}
@keyframes mts-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Field sections (hero + contact) — the horizon backdrop
   ========================================================================== */
.field{position:relative;background:var(--bg-blue-field);border-bottom:1px solid var(--border-hairline)}
.field__scrim{position:absolute;inset:0;pointer-events:none}
.field__scrim--hero{background:radial-gradient(60% 120% at 50% 45%, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 65%)}
.field__scrim--contact{background:radial-gradient(60% 120% at 50% 50%, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 65%)}
.field__inner{position:relative;z-index:1}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:88px 24px 76px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero__meta .eyebrow{white-space:nowrap}
.hero h1{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(44px,7vw,84px);line-height:1.02;letter-spacing:var(--track-display);color:var(--mts-white);max-width:16ch;text-wrap:balance}
.hero p{margin:0;max-width:60ch;font-size:var(--text-md);line-height:1.5;color:var(--text-secondary)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;padding-top:4px}

/* ==========================================================================
   Live indicator / badges
   ========================================================================== */
.live{display:inline-flex;align-items:center;gap:var(--space-4);height:26px;padding:0 var(--space-5);border-radius:var(--radius-1);white-space:nowrap;flex:none}
.live--on{background:var(--accent-live);border:1px solid var(--accent-live);box-shadow:var(--glow-live)}
.live__dot{width:6px;height:6px;border-radius:var(--radius-circle);background:var(--mts-white);animation:mts-pulse 1.4s var(--ease-in-out) infinite}
.live__label{font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--weight-bold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mts-white)}
@keyframes mts-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.badge{display:inline-flex;align-items:center;gap:var(--space-3);height:20px;padding:0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--weight-medium);letter-spacing:var(--track-caps);text-transform:uppercase;border-radius:var(--radius-1);white-space:nowrap}
.badge--neutral{color:var(--text-secondary);border:1px solid var(--border-hairline);background:transparent}
.badge--cyan{color:var(--mts-cyan);border:1px solid rgba(45,232,238,.45);background:rgba(45,232,238,.10)}
.badge--yellow{color:var(--mts-yellow);border:1px solid rgba(255,219,41,.45);background:rgba(255,219,41,.10)}
.badge--live{color:var(--mts-white);border:1px solid var(--accent-live);background:var(--accent-live)}
.badge--solid{color:var(--mts-black);border:1px solid var(--mts-white);background:var(--mts-white)}

/* ==========================================================================
   Card
   ========================================================================== */
.card{background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--radius-2);box-shadow:var(--shadow-card);transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}

/* ==========================================================================
   About
   ========================================================================== */
.about{padding:76px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:start}
.about__copy{display:flex;flex-direction:column;gap:20px}
.about__copy h2{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:var(--track-display);color:var(--mts-white)}
.about__copy p{margin:0;font-size:var(--text-base);line-height:1.65;color:var(--text-secondary)}
.about__badges{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.about__copy p:last-of-type{padding-bottom:72px}
.about__frame{position:relative;aspect-ratio:4/3;background:var(--mts-black);border:1px solid var(--border-hairline);border-radius:var(--radius-2);overflow:hidden}
.about__frame img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Audience
   ========================================================================== */
.audience{border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);background:var(--bg-inset)}
.audience__inner{padding:70px 24px;display:flex;flex-direction:column;gap:44px}
.audience__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);border-radius:var(--radius-2);overflow:hidden}
.audience__cell{background:var(--bg-surface);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.audience__source{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mts-cyan)}
.audience__stat{display:flex;flex-direction:column;gap:4px}
.audience__num{font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:var(--track-display);color:var(--mts-white)}
.audience__num--lg{font-size:clamp(32px,3.6vw,48px)}
.audience__num--md{font-size:var(--text-xl)}
.audience__label{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-secondary)}
.audience__label--yellow{color:var(--mts-yellow)}
@media (max-width:640px){.audience__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Quick stats
   ========================================================================== */
.stats{padding:70px 24px;display:flex;flex-direction:column;gap:28px}
.stats__bars{display:flex;flex-direction:column;gap:26px}
.stat{display:flex;flex-direction:column;gap:10px}
.stat__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.stat__row span:first-child{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-secondary)}
.stat__value{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl);line-height:1;letter-spacing:var(--track-display);color:var(--mts-white)}
.stat__track{height:4px;background:var(--mts-ink-700);border-radius:var(--radius-1);overflow:hidden}
.stat__fill{display:block;height:100%}

/* ==========================================================================
   Sponsorship
   ========================================================================== */
.sponsorship{padding:76px 24px;display:flex;flex-direction:column;gap:32px}
.sponsorship__head{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.sponsorship__head h2{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:var(--track-display);color:var(--mts-white)}
.sponsorship__head p{margin:0;font-size:var(--text-base);line-height:1.65;color:var(--text-secondary)}
.sponsorship__list{display:flex;flex-direction:column;gap:16px}

.offer{padding:0;overflow:hidden}
.offer__copy{display:flex;flex-direction:column}
.offer__head{padding:24px;border-bottom:1px solid var(--border-hairline);display:flex;flex-direction:column;gap:12px}
.offer__head h3{margin:0;font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);line-height:1.05;letter-spacing:var(--track-display);color:var(--mts-white)}
.offer__head p{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}
.offer__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.offer__price strong{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl);letter-spacing:var(--track-display);color:var(--mts-cyan)}
.offer__body{padding:22px 24px 26px 24px;display:flex;flex-direction:column;gap:14px}
.offer__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:var(--text-sm);line-height:1.55;color:var(--text-secondary)}
.offer__list li{display:grid;grid-template-columns:14px 1fr;gap:10px}
.offer__list li span:first-child{color:var(--mts-cyan)}
.offer__list strong{color:var(--mts-white);font-weight:700}
.offer--yellow .offer__list li span:first-child{color:var(--mts-yellow)}

.offer-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:stretch}
.offer-tile{padding:0;overflow:hidden;display:flex;flex-direction:column}
.offer-tile__media{position:relative;aspect-ratio:16/9;background:var(--mts-black);overflow:hidden}
/* Absolute fill keeps the 16/9 box from being stretched by the image's intrinsic height. */
.offer-tile__media>img,.offer-tile__split{position:absolute;inset:0}
.offer-tile__media>img{width:100%;height:100%;object-fit:cover}
.offer-tile__split{display:grid;grid-template-columns:1.55fr 1fr}
.offer-tile__split img{width:100%;height:100%;object-fit:cover;opacity:.92}
.offer-tile__split img+img{border-left:1px solid var(--border-hairline);object-position:center 30%}
.offer-tile__split img:first-child{object-position:left top}
.offer-tile__body{padding:24px;display:flex;flex-direction:column;gap:14px}
.offer-tile__body h3{margin:0;font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);line-height:1.05;letter-spacing:var(--track-display);color:var(--mts-white)}
.offer-tile__body p{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}

/* ==========================================================================
   Brands
   ========================================================================== */
.brands{border-top:1px solid var(--border-hairline);background:var(--mts-black)}
.brands__inner{padding:64px 24px;display:flex;flex-direction:column;gap:32px}
.brands__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);border-radius:var(--radius-2);overflow:hidden}
.brands__cell{background:var(--bg-surface);min-height:104px;display:flex;align-items:center;justify-content:center;padding:22px 26px}
.brands__cell img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain}
.brands__cell--more{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{padding:84px 24px;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.contact h2{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4.6vw,62px);line-height:1.02;letter-spacing:var(--track-display);color:var(--mts-white)}
.contact img{height:28px;width:auto;margin-top:16px;opacity:.8}

/* Once the About grid collapses to one column the spacer is just dead air. */
@media (max-width:700px){
  .about__copy p:last-of-type{padding-bottom:0}
}
@media (max-width:520px){
  .nav__links{display:none}
}