/* =========================================================
   SUPERHUMAN — SITE CSS (Optimized Fonts)
   - Keep only the weights/styles we actually use:
     Magistral: 300, 500, 700 (normal)
     Magistral Extra: 800 italic (hero/major headings)
   - Global utilities: .bleed + .inner
   - Header uses .inner so everything aligns
   - Home (hero) is full-height video only
   - Other sections are content-height with padding
   ========================================================= */


/* ===========================
   FONTS (OPTIMIZED)
   Put font files in: /fonts/
   =========================== */

/* Body / UI: Light */
@font-face {
  font-family: 'Magistral';
  src:
    url('../fonts/Magistral-Light.woff2') format('woff2'),
    url('../fonts/Magistral-Light.woff') format('woff'),
    url('../fonts/Magistral-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Body / UI: Medium */
@font-face {
  font-family: 'Magistral';
  src:
    url('../fonts/Magistral-Medium.woff2') format('woff2'),
    url('../fonts/Magistral-Medium.woff') format('woff'),
    url('../fonts/Magistral-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Body / UI: Bold */
@font-face {
  font-family: 'Magistral';
  src:
    url('../fonts/Magistral-Bold.woff2') format('woff2'),
    url('../fonts/Magistral-Bold.woff') format('woff'),
    url('../fonts/Magistral-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Display / Headings: Extra Bold Italic */
@font-face {
  font-family: 'Magistral Extra';
  src:
    url('../fonts/Magistral-ExtraBoldItalic.woff2') format('woff2'),
    url('../fonts/Magistral-ExtraBoldItalic.woff') format('woff'),
    url('../fonts/Magistral-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}


/* ===========================
   BASE / TOKENS
   =========================== */

:root {
  --neon: #00fe42;
  --ink: #07090d;
  --ink-2: #0b1020;
  --paper: #f7f7f7;

  --header-h: 84px;
  --header-h-small: 60px;

  --container: 1920px;

  /* global padding rhythm */
  --section-pad-y: 6rem;
  --section-pad-y-sm: 4rem;

  /* consistent gap rhythm */
  --gap-lg: 6rem;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Magistral', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Sticky header offset for anchor jumps */
.section { scroll-margin-top: var(--header-h); }



/* ===========================
   GLOBAL UTILITIES
   =========================== */

/* Full-bleed wrapper (backgrounds, 100% width visuals) */
.bleed {
  width: 100%;
  position: relative;
}

/* Inner content wrapper (global left/right padding that aligns header + sections) */
.inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 6vw, 6rem);
  padding-right: clamp(1.25rem, 6vw, 6rem);
}

@media (max-width: 1024px) {
  .inner { padding-left: 6%; padding-right: 6%; }
}
@media (max-width: 768px) {
  .inner { padding-left: 5%; padding-right: 5%; }
}

/* Content-height sections (default) */
.section {
  width: 100%;
  padding: var(--section-pad-y) 0;
}

@media (max-width: 768px) {
  .section { padding: var(--section-pad-y-sm) 0; }
}


/* ===========================
   HEADER (sticky + gradient)
   =========================== */

.site-header {
  position: fixed;         /* was sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #00fe42 0%, #8efe02 100%);
  transition: box-shadow 200ms ease;
}


.site-header.is-small {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Use .inner for padding alignment */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-h);
  transition: height 200ms ease;
}

.site-header.is-small .header-inner {
  height: var(--header-h-small);
}

/* LEFT */
.header-left {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

/* CENTER */
.nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}

.nav-link {
  text-decoration: none;
  color: #000;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.75rem; /* 12px */
  padding: 8px 2px;
  position: relative;
}

.nav-link.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.nav-link:not(.is-disabled)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 2px;
  width: 0%;
  background: rgba(0, 0, 0, 0.8);
  transition: width 180ms ease;
}

.nav-link:not(.is-disabled):hover::after {
  width: 100%;
}

/* RIGHT */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* CTA */
.cta-outline {
  color: #000;
  background: transparent;
  border: 2px solid #000;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 2px solid #000;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  background: #000;
  margin: 6px 0;
}

@media (max-width: 768px) {
  .nav { display: none; }
  .cta-outline { display: none; }
  .burger { display: inline-block; }
}

/* Mobile menu */
.mobile-menu {
  padding: 10px 0 18px;
  background: var(--neon);
  border-top: 2px solid rgba(0, 0, 0, 0.15);
}

.mobile-link,
.mobile-cta {
  display: block;
  color: #000;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.mobile-link.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.mobile-cta {
  margin-top: 10px;
  border: 2px solid #000;
  text-align: center;
  padding: 12px 14px;
}


/* ===========================
   HERO (desktop/tablet)
   =========================== */

.section-hero {
  padding: 0;
  min-height: 100vh;
  background: #000;
}

.hero-bg {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  min-height: 520px;
}

.site-header.is-small ~ main .hero-bg {
  height: calc(100vh - var(--header-h-small));
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* desktop = cinematic crop */
}

/* ===========================
   HERO (mobile: no crop)
   =========================== */
@media (max-width: 768px) {
  .section-hero {
    min-height: 0; /* no longer forces full screen */
  }

  .hero-bg {
    height: auto;                 /* governed by content */
    min-height: 0;
    aspect-ratio: 16 / 9;         /* keeps video proportions visible */
  }

  .hero-video {
    object-fit: contain;          /* show full video, no cropping */
    background: #000;             /* letterbox bars if needed */
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1200px 600px at 50% 40%,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.75)
  );
}

.hero-audio-toggle {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: var(--neon);
  color: #000;
  border: none;

  font-size: 1.25rem;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
	z-index:999;
}

.hero-audio-icon {
  width: 30px;
  height: auto;
  display: block;
}

.hero-audio-toggle:hover {
}

.hero-audio-toggle:focus-visible {
}


/* ===========================
   SECTION PLACEHOLDERS (Coming soon)
   =========================== */

.section-light {
  background: var(--paper);
  color: #121223;
}

.section-dark {
  background: #121223;
  color: #fff;
}

.section-title {
  margin: 0 0 1rem;
  font-family: 'Magistral Extra', 'Magistral', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing: -0.03em;
}

.coming-soon {
  margin: 0;
  font-weight: 300;
  font-size: 1.25rem;
  opacity: 0.75;
}


/* ===========================
   CONTACT (center stack + scrolling chevrons band + car)
   =========================== */

.section-contact {
  background: var(--paper);
  color: #121223;
}

/* Center the whole composition by content (NOT full height now) */
.contact-center {
  display: grid;
  justify-items: center;
  gap: 2.5rem;
}

/* Chevron band: full width, height is content + padding */
.contact-band {
  position: relative;
  width: 100%;
  padding: 4rem 0 3.5rem;
  overflow: hidden;
  background: #f7f7f7;
}

/* Full-bleed chevrons layer (SVG tile) */
.contact-band::before {
  content: "";
  position: absolute;
  inset: 0;

  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  background-image: url("../images/chevrons-tile.svg");
  background-repeat: repeat;
  background-position: var(--chev-x, 0px) 0px;

  pointer-events: none;
  z-index: 0;
}

/* Content sits above chevrons */
.contact-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.contact-title {
  margin: 0 0 1.5rem;
  font-family: 'Magistral Extra', 'Magistral', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 3.125rem; /* 50px */
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #121223;
}

.contact-subtitle {
  margin: 0 0 var(--gap-lg);
  font-weight: 300;
  font-size: 2.3125rem; /* 37px */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #121223;
  opacity: 0.9;
}

.cta-solid {
  background: #121223;
  color: var(--neon);
  border: none;

  font-family: 'Magistral Extra', 'Magistral', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.875rem; /* 30px */
  letter-spacing: 0.08em;
  text-transform: uppercase;

  padding: 1.25rem 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  text-decoration: none;
}

.cta-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(18, 18, 35, 0.35);
}

.cta-solid,
.cta-solid:hover,
.cta-solid:focus,
.cta-solid:active {
  text-decoration: none;
}

/* Car stage (full-bleed) */
.car-stage {
  position: relative;
  width: 100vw;
  height: 160px;
  overflow: visible;
  left: 50%;
  transform: translateX(-50%);
}

.car {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(640px, 92vw);
  transform: translate(-50%, -50%);
  will-change: transform, filter;
}

/* Car loop is only active when contact is visible (JS toggles .is-active) */
.section-contact.is-active .car {
  animation: carLoop 8s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes carLoop {
  0%, 18% {
    transform: translate(-50%, -50%);
    filter: blur(0);
  }


  20% {
    transform: translate(-54%, -50%);
    filter: blur(0px);
  }

  30% {
    transform: translate(-200vw, -47%);
    filter: blur(4px);
  }

  40% {
    transform: translate(-200vw, -47%);
    filter: blur(0);
  }

  40.01% {
    transform: translate(200vw, -50%);
    filter: blur(0);
  }

  52% {
    transform: translate(200vw, -50%);
    filter: blur(0);
  }

  55% {
    transform: translate(-50%, -50%);
    filter: blur(0);
  }

  65% {
    transform: translate(-50%, -50%);
    filter: blur(0);
  }
}


/* ===========================
   FOOTER (content height)
   =========================== */

.site-footer {
  background: #121223;
  color: var(--neon);
}

.footer-inner {
  padding: 6rem 0 5rem;
  text-align: center;
  display: grid;
  gap: var(--gap-lg);
}

.footer-logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-img {
  width: 160px;
  height: auto;
  display: block;
}


.footer-email {
  color: var(--neon);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.875rem; /* 30px */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 4rem;
}

.social-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.social-icon-img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-legal {
  margin-top: 3rem;
  font-size: 0.75rem; /* 12px */
  line-height: 1.6;
  color: #cccccc;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Anchor scroll offset updates when header shrinks */
.site-header.is-small ~ main .section {
  scroll-margin-top: var(--header-h-small);
}