/* ============================================================
   MEDIATRIX — CORE
   Tokens, reset, typography, layout, HUD primitives, controls
   ============================================================ */

/* ---------- 0. Display face ---------- */
/* Sixsound (Typia Nesia Std), self-hosted under its web font licence. Aliased so a copy
   installed on someone’s computer can’t stand in for the licensed files. One static weight,
   declared across the full range so 700/800 headings get real glyphs, not faux bold. */
@font-face{
  font-family:"Mediatrix Display";
  src:url("../fonts/Sixsound-Regular.otf") format("opentype"),
      url("../fonts/Sixsound-Regular.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* ---------- 1. Design tokens ---------- */
:root{
  /* Surface — true black, matching the mark */
  --ink:        #0A0A0B;
  --ink-2:      #131314;
  --ink-3:      #1B1B1D;
  --panel:      #16161A;

  /* Accent — Mediatrix yellow */
  --yellow:      #FFC300;   /* brand mark yellow */
  --yellow-deep: #C99A00;
  --yellow-soft: #FFD54D;
  --spark:       #FFFFFF;

  /* Ink on dark */
  --text:       #E4E4E4;
  --text-hi:    #FFFFFF;
  --text-mid:   rgba(228,228,228,.62);
  --text-low:   rgba(228,228,228,.36);
  --hairline:   rgba(228,228,228,.14);

  /* Type */
  --font-display: "Mediatrix Display", "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Display tuning: Sixsound is primary (assets/fonts). Weight/stretch/axes only shape the
     Archivo fallback — Sixsound is a single static face, so they don't alter it. */
  --display-weight:  800;
  --display-stretch: 122%;
  --display-axes:    "wdth" 122, "wght" 800;
  --display-ls:      0;

  /* Metrics */
  --shell:      15px;
  --gutter:     30px;
  --maxw:       1395px;

  /* Motion */
  --ease-hud:   cubic-bezier(.87,0,.13,1);
  --ease-out:   cubic-bezier(.15,.75,.5,1);
  --ease-back:  cubic-bezier(.68,-.55,.27,1.55);
  --dur:        .8s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.25;
  letter-spacing:0;
  text-transform:uppercase;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
:focus-visible{outline:2px solid var(--yellow-soft);outline-offset:3px}
::selection{background:var(--yellow);color:var(--ink)}

/* ---------- 3. Typography ---------- */
.d1,.d2,.d3,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);
  text-transform:uppercase;
  letter-spacing:var(--display-ls);
  line-height:.95;
  color:var(--text-hi);
}
h1,.d1{font-size:clamp(1.7rem,3.9vw,3.15rem)}
h2,.d2{font-size:clamp(1.7rem,4.3vw,3rem)}
h3,.d3{font-size:clamp(1.2rem,2.4vw,1.75rem)}
.d-xl{font-size:clamp(2.6rem,9vw,8.5rem);line-height:.88}

p{font-size:1rem;line-height:1.25;letter-spacing:0}
.lede{max-width:60ch}
.muted{color:var(--text-mid)}
.small{font-size:.8125rem;line-height:1.35}

/* Eyebrow — vertical bar + label */
.eyebrow{
  font-size:.9375rem;font-weight:600;line-height:1;
  color:rgba(255,213,77,.78);
  display:flex;align-items:center;gap:.55em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:2px;height:1.05em;background:var(--yellow);display:block;flex:none}

.hl{color:var(--yellow)}
.hl-amber{color:var(--spark)}

/* ---------- 4. Layout ---------- */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{position:relative;padding-block:clamp(72px,9vw,128px)}
.section--tight{padding-block:clamp(44px,6vw,80px)}
.stack{display:flex;flex-direction:column}
.stack-8{gap:8px}.stack-12{gap:12px}.stack-16{gap:16px}
.stack-24{gap:24px}.stack-32{gap:32px}.stack-40{gap:40px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* ---------- 5. Backgrounds ---------- */
/* 42px dim dot lattice with a brighter square every fifth step */
.bg-dotmatrix{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("../img/dotmatrix.svg");
  background-repeat:repeat;background-size:210px 210px;
}
.page{position:relative;z-index:1}

.band{position:relative;isolation:isolate}
.band__bg{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,transparent,#000 100px,#000 calc(100% - 100px),transparent);
  mask-image:linear-gradient(to top,transparent,#000 100px,#000 calc(100% - 100px),transparent);
}
.band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,.25),rgba(10,10,11,.62))}
.band__bg--photo::after{background:linear-gradient(to bottom,rgba(10,10,11,var(--shade-top,.52)),rgba(10,10,11,var(--shade-bottom,.8)))}
#why .band__bg--photo{--shade-top:.8;--shade-bottom:.92}
.band__bg > *{width:100%;height:100%;object-fit:cover}

/* ---------- 6. HUD viewport chrome ---------- */
.hud{
  --hud-line:rgba(255,195,0,.62);
  --hud-cap:70px;       /* corner cap length */
  --hud-tab:390px;      /* raised centre tab on the top/bottom edges */
  position:fixed;inset:0;z-index:60;pointer-events:none;
}
.hud i,.hud span{position:absolute;display:block}

/* side rails, broken at the corners for the crosshairs */
.hud__rail{top:52px;bottom:52px;width:1px;background:var(--hud-line)}
.hud__rail--l{left:var(--shell)}
.hud__rail--r{right:var(--shell)}
.hud__notch{top:50%;width:6px;height:36px;margin-top:-18px;border-radius:3px;background:var(--yellow)}
.hud__notch--l{left:calc(var(--shell) - 2.5px)}
.hud__notch--r{right:calc(var(--shell) - 2.5px)}

/* top/bottom edge: line, 45deg step, raised centre tab, step, line */
.hud__edge{top:2px;height:9px;left:calc(var(--shell) + var(--hud-cap) + 10px);right:calc(var(--shell) + var(--hud-cap) + 10px)}
.hud__edge--b{top:auto;bottom:2px;transform:scaleY(-1)}
.hud__edge > i{top:8px;height:1px;background:var(--hud-line)}
.hud__edge > i:nth-child(1){left:0;right:calc(50% + var(--hud-tab) / 2 + 8px)}
.hud__edge > i:nth-child(2){top:0;left:calc(50% - var(--hud-tab) / 2);width:var(--hud-tab)}
.hud__edge > i:nth-child(3){right:0;left:calc(50% + var(--hud-tab) / 2 + 8px)}
.hud__edge > i:nth-child(2)::before,
.hud__edge > i:nth-child(2)::after{content:"";position:absolute;top:0;width:11.3px;height:1px;background:var(--hud-line)}
.hud__edge > i:nth-child(2)::before{right:100%;transform-origin:right center;transform:rotate(-45deg)}
.hud__edge > i:nth-child(2)::after{left:100%;transform-origin:left center;transform:rotate(45deg)}
.hud__marker{top:4px;left:50%;width:64px;height:4px;margin-left:-32px;border-radius:2px;background:var(--yellow)}
.hud__marker--b{top:auto;bottom:4px}

/* corner caps and crosshairs */
.hud__cap{top:8px;width:var(--hud-cap);height:5px;border:1px solid var(--hud-line)}
.hud__cap--tl,.hud__cap--bl{left:var(--shell)}
.hud__cap--tr,.hud__cap--br{right:var(--shell)}
.hud__cap--bl,.hud__cap--br{top:auto;bottom:8px}
.hud__cross{top:35px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid var(--hud-line);border-radius:50%}
.hud__cross::before{
  content:"";position:absolute;top:50%;left:-7px;right:-7px;height:1px;margin-top:-.5px;
  background:linear-gradient(to right,var(--hud-line) 5px,transparent 5px calc(100% - 5px),var(--hud-line) calc(100% - 5px));
}
.hud__cross::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--hud-line)}
.hud__cross--tl,.hud__cross--bl{left:var(--shell)}
.hud__cross--tr,.hud__cross--br{left:calc(100% - var(--shell))}
.hud__cross--bl,.hud__cross--br{top:calc(100% - 30px)}

/* ---------- 7. Animated corner-bracket frame ---------- */
.frame{position:absolute;inset:0;pointer-events:none}
.frame > span{position:absolute;background:var(--yellow);transition:clip-path var(--dur) var(--ease-hud)}
.frame .f-left{left:0;top:35px;width:2px;height:calc(100% - 75px);clip-path:inset(100% 0 0 0)}
.frame .f-corner{left:0;top:0;width:50px;height:2px;transform:translate(-7px,17px) rotate(-45deg);clip-path:inset(0 100% 0 0);transition-delay:.6s}
.frame .f-top{left:35px;top:0;width:40%;height:2px;clip-path:inset(0 100% 0 0);transition-delay:1.2s}
.frame--flip{transform:rotate(180deg)}
.is-in .frame > span{clip-path:inset(0)}
/* let the star escape the bar's own clip */
.is-in .frame > span:has(.f-star){clip-path:inset(-30px)}
.frame .f-star{
  position:absolute;right:-15px;top:50%;width:30px;height:30px;background:var(--yellow);
  transform:translateY(-50%) scale(0);
  transition:transform .8s var(--ease-back) 1.6s;
  clip-path:polygon(50% 0%,55% 32%,68% 47%,100% 50%,68% 53%,55% 68%,50% 100%,45% 68%,32% 53%,0% 50%,32% 47%,45% 32%);
}
.is-in .frame .f-star{transform:translateY(-50%) scale(1)}

/* ---------- 8. Corner-cut panels ---------- */
.cut{
  --cut:30px;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
}
.cut-sm{--cut:12px}
.brackets{position:absolute;inset:-10px;pointer-events:none}
.brackets i{position:absolute;width:26px;height:26px;border:2px solid var(--yellow);opacity:.9}
.brackets i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.brackets i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.brackets i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.brackets i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ---------- 9. Buttons ---------- */
.btn{
  --btn-bg:var(--yellow);
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:12px 17px;font-size:1.1875rem;font-weight:500;line-height:20px;
  color:var(--ink);background:var(--btn-bg);letter-spacing:0;cursor:pointer;border:0;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:color var(--dur) var(--ease-hud),box-shadow var(--dur) var(--ease-hud);
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease-hud);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:hover,.btn:focus-visible{color:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}

.btn--ghost{--btn-bg:transparent;color:var(--text-hi);box-shadow:inset 0 0 0 1px var(--hairline)}
.btn--ghost::before{background:var(--text-hi)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink);box-shadow:none}

.chev{display:flex;flex-wrap:nowrap}
.chev i{
  width:10px;height:13px;display:block;background:var(--ink);
  transition:background var(--dur) var(--ease-hud);
  clip-path:polygon(0 0,33.33% 50%,0 100%,66.67% 100%,100% 50%,66.67% 0);
}
.chev i + i{margin-left:-2px}
.chev i:nth-child(1){transition-delay:.1s}
.chev i:nth-child(2){transition-delay:.2s}
.chev i:nth-child(3){transition-delay:.3s}
.btn:hover .chev i:nth-child(1),.btn:focus-visible .chev i:nth-child(1){background:var(--yellow)}
.btn:hover .chev i:nth-child(2),.btn:focus-visible .chev i:nth-child(2){background:var(--yellow-soft)}
.btn:hover .chev i:nth-child(3),.btn:focus-visible .chev i:nth-child(3){background:var(--spark)}
.btn--ghost .chev i{background:var(--yellow)}
.btn--ghost:hover .chev i:nth-child(1){background:var(--ink)}
.btn--ghost:hover .chev i:nth-child(2){background:var(--yellow-deep)}
.btn--ghost:hover .chev i:nth-child(3){background:var(--yellow)}

.link-u{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.9375rem;font-weight:500;color:var(--text-hi);padding-bottom:4px;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--ease-hud);
}
.link-u:hover,.link-u:focus-visible{background-size:100% 2px}

/* ---------- 10. Marquee ---------- */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee--edge-none{-webkit-mask-image:none;mask-image:none}
.marquee__track{display:flex;flex-direction:row;align-items:center;white-space:nowrap;width:max-content}
.marquee__track > *{display:flex;flex:none;animation:marquee 45s linear infinite;will-change:transform}
.marquee[data-speed="med"] .marquee__track > *{animation-duration:26s}
.marquee[data-speed="fast"] .marquee__track > *{animation-duration:16s}
.marquee[data-dir="rtl"] .marquee__track > *{animation-name:marquee-rev}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes marquee-rev{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
.marquee:hover .marquee__track > *{animation-play-state:paused}

.marquee--boxed{
  display:flex;align-items:center;
  background:rgba(255,195,0,.13);
  border:2px solid var(--yellow);
  border-radius:10px;padding:10px 0;
}
.marquee--boxed .marquee__track > * > span{padding-inline:1.4em;font-size:.8125rem;font-weight:500;line-height:1;color:var(--text-hi)}

.marquee--giant .marquee__track > * > span{
  font-family:var(--font-display);letter-spacing:var(--display-ls);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);
  font-size:12vw;line-height:1;padding-right:.32em;color:var(--text-hi);
}
.marquee--outline .marquee__track > * > span{color:transparent;-webkit-text-stroke:1.5px var(--text-hi)}

/* ---------- 11. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.1s}
[data-d="2"]{transition-delay:.2s}
[data-d="3"]{transition-delay:.3s}
[data-d="4"]{transition-delay:.4s}
[data-d="5"]{transition-delay:.5s}

.mask-lines .ml{display:block;overflow:hidden}
.mask-lines .ml > span{display:block;transform:translateY(108%);transition:transform 1s var(--ease-hud)}
.mask-lines.is-in .ml > span{transform:none}
.mask-lines.is-in .ml:nth-child(2) > span{transition-delay:.09s}
.mask-lines.is-in .ml:nth-child(3) > span{transition-delay:.18s}

/* ---------- 12. Utility ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.hairline{height:1px;background:var(--hairline);border:0;margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .mask-lines .ml > span{transform:none}
}