/* MAKIINA concept 02: DARK SHOWROOM
   One black room. The renders (all shot on black) float on the page,
   cream text at controlled opacities, hairlines at low alpha.
   Red appears only on the wordmark and the BUY pills. */

:root {
  --black: #000000;
  --cream: #f4f1e9;
  --c90: rgba(244,241,233,0.9);
  --c75: rgba(244,241,233,0.75);
  --c60: rgba(244,241,233,0.6);
  --c45: rgba(244,241,233,0.45);
  --hair: rgba(244,241,233,0.14);
  --hair-soft: rgba(244,241,233,0.08);
  --hair-strong: rgba(244,241,233,0.34);
  --lift: rgba(244,241,233,0.035);
  --red: #E6332A;
  --red-press: #b32820;

  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Space Grotesk', Inter, sans-serif;

  /* The type scale. Every size on the site is one of these six. */
  --fs-label: 11px;
  --fs-chrome: 12px;
  --fs-body: 15px;
  --fs-lede: 17px;
  --fs-statement: clamp(20px, 0.9vw + 10px, 24px);
  --fs-display: clamp(30px, 1.5vw + 14px, 38px);

  --track: 0.2em;
  --nav-h: 70px;
  --wm-h: 50px;
  --pad: 48px;
  --sec: 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0; background: var(--black); color: var(--cream);
  font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; } /* width and height attributes reserve the aspect ratio before the file arrives, nothing more */
a { color: inherit; text-decoration: none; }
p, h1, h2, figure { margin: 0; }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- type ---------- */
.label, .eyebrow, .nav-a, .btn, .chip, .foot, .k, .cap, .sec-k, .legend {
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track); text-transform: uppercase; line-height: 1.4;
}
.eyebrow { color: var(--c45); margin-bottom: 18px; }
.statement { font-weight: 300; font-size: var(--fs-statement); line-height: 1.5; color: var(--c90); }
.lede { font-weight: 300; font-size: var(--fs-lede); line-height: 1.65; color: var(--c60); }
.body { font-weight: 400; font-size: var(--fs-body); line-height: 1.55; color: var(--c90); }
.note { font-weight: 300; font-size: var(--fs-chrome); line-height: 1.5; color: var(--c45); }
.display { font-family: var(--disp); font-weight: 600; font-size: var(--fs-display); letter-spacing: -0.03em; line-height: 1.05; color: var(--cream); }
.center { text-align: center; }
.mt { margin-top: 24px; }
.dim { color: var(--c45); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-chrome); letter-spacing: 0.18em; line-height: 1;
  padding: 15px 34px; border-radius: 980px; border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn-red { background: var(--red); color: #ffffff; border-color: var(--red); }
.btn-red:hover { background: var(--red-press); border-color: var(--red-press); }
.btn-ghost { border-color: var(--hair-strong); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); }
.btn-sm { padding: 11px 24px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btns-center { justify-content: center; }

/* ---------- header: solid black band, large wordmark ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; height: var(--nav-h);
  padding: 0 var(--pad); background: rgba(10,10,10,0.55); border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.brand { display: block; order: 0; }
/* The wordmark PNG carries ~10% transparent padding on every side.
   A 3.33:1 cover crop trims it so the letters themselves set the size. */
.wm { height: var(--wm-h); width: calc(var(--wm-h) * 3.333); object-fit: cover; margin-left: calc(var(--wm-h) * -0.067); }
.nav-links { display: flex; align-items: center; gap: 36px; margin-left: auto; order: 1; }
.nav-a { font-size: var(--fs-chrome); color: var(--c60); padding: 6px 0; border-bottom: 1px solid transparent; transition: color 150ms ease-out; }
.nav-a:hover { color: var(--cream); }
.nav-a.is-active { color: var(--cream); border-bottom-color: var(--c60); }
.nav-buy { order: 2; margin-left: 36px; }

/* ---------- full height folds ---------- */
.fold {
  position: relative; display: grid; grid-template-columns: minmax(400px, 34vw) 1fr;
  min-height: calc(100vh - var(--nav-h));
  min-height: min(calc(100svh - var(--nav-h)), 920px);
  border-bottom: 1px solid var(--hair-soft);
}
.fold--rev { grid-template-columns: 1fr minmax(400px, 34vw); }
.fold-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px var(--pad); }
.fold-media { position: relative; min-height: 320px; }
.fold-media img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.price-line { color: var(--c75); margin-top: 28px; }
.sub { color: var(--c60); margin-top: 14px; }

/* ---------- melts: fade render edges into the room ---------- */
.melt {
  --mx: linear-gradient(#000, #000);
  --my: linear-gradient(#000, #000);
  -webkit-mask-image: var(--mx), var(--my); -webkit-mask-composite: source-in;
  mask-image: var(--mx), var(--my); mask-composite: intersect;
}
.melt-hero  { --mx: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); --my: linear-gradient(to bottom, #000 80%, transparent); }
.melt-iso   { --mx: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); --my: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); }
.melt-reach { --mx: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); --my: linear-gradient(to bottom, #000 86%, transparent); }
.melt-grip  { --mx: linear-gradient(to right, #000 80%, transparent); --my: linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent); }
.melt-head  { --my: linear-gradient(to bottom, #000 84%, transparent); }
.melt-side  { --mx: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); --my: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); }
.melt-photo { --mx: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); --my: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }

/* ---------- sections and media ---------- */
.sec { padding: var(--sec) var(--pad); }
.sec-tight { padding: 72px var(--pad); }
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap-s { max-width: 760px; margin: 0 auto; }
.wrap-n { max-width: 720px; margin: 0 auto; }
.hair-top { border-top: 1px solid var(--hair); }
.bleed { width: 100%; }
.stage { max-width: 1200px; margin: 0 auto; }
.stage img { width: 100%; }
.block { margin-top: 64px; }

.plate { border: 1px solid var(--hair); background: var(--black); }
.plate img { width: 100%; }
.cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 0 0; color: var(--c45); border-top: 1px solid var(--hair); }
.plate .cap { padding: 14px 18px; }

.photo { max-width: 1100px; margin: 72px auto 0; }
.photo img, .photo-fig img { width: 100%; }
.photo figcaption, .photo-fig figcaption { margin-top: 20px; color: var(--c45); }

/* hero: full bleed 16:9 footage with the CTA lockup over a bottom scrim (the original page layout) */
.hero { position: relative; background: var(--black); }
.hero-box { aspect-ratio: 1920 / 1080; overflow: hidden; }
.hero-box video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.hero-scrim { position: absolute; left: 0; right: 0; top: min(100vh - 470px, 100% - 470px); bottom: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0.62) 240px, rgba(0,0,0,0.62) 100%); }
.hero-cta { position: absolute; left: 0; right: 0; top: min(100vh - 245px, 100% - 245px); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--pad); }
.hero-cta .label { color: var(--c90); font-size: 13px; }
.hero-cta .btns { margin-top: 26px; justify-content: center; }
.hero-cta .price-line { margin-top: 20px; font-size: 13px; color: var(--c75); }

/* cinematic strip */
.strip { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--black); }
.strip video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.strip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 18px var(--pad); border-bottom: 1px solid var(--hair); }
.strip-bar .label { color: var(--c90); }
.strip-bar .price-line { margin: 0; }
.strip-bar .btns { margin: 0 0 0 auto; }

/* two up media, framed video slot */
.media2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.frame { position: relative; aspect-ratio: 4000 / 2048; overflow: hidden; background: var(--black); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.slot { border: 1px solid var(--hair); }
.slot img { opacity: 0.32; }
.slot-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.slot-label .label { color: var(--c90); }
.slot-ring { width: 54px; height: 54px; border: 1px solid var(--hair-strong); border-radius: 50%; }

/* feature list */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; max-width: 760px; margin-top: 44px; }
.feat > div { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--hair); padding-bottom: 13px; font-weight: 400; color: var(--c90); }
.tick { display: inline-block; width: 8px; height: 2px; background: var(--cream); flex-shrink: 0; transform: translateY(-4px); }
.plus { font-family: var(--mono); font-weight: 500; font-size: var(--fs-chrome); width: 8px; flex-shrink: 0; line-height: 1; }

/* spec table */
.spec { border-top: 1px solid var(--hair); }
.row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
.row .k { color: var(--c45); padding-top: 3px; }
.row .v { font-weight: 400; color: var(--c90); }
.rail { border: 0; padding: 0; }
.rail .lede { max-width: 560px; }

/* headset chips */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 32px; margin-top: 40px; }
.chip { display: flex; align-items: center; gap: 12px; color: var(--c75); }
.chip img { height: 20px; opacity: 0.8; }
.chip-varjo img { height: 14px; }
.chip-bigscreen { gap: 10px; }
.chip-bigscreen img { height: 15px; }
.chip-pico { font-family: var(--disp); font-weight: 600; font-size: var(--fs-lede); letter-spacing: 0.08em; text-transform: none; color: var(--c75); }

/* reach figure */
.reach { position: relative; }
.reach-label { position: absolute; left: 50%; top: 7.5%; transform: translateX(-50%); letter-spacing: 0.22em; color: var(--c90); white-space: nowrap; }

/* actuator: stat row, spec sections, chart */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--hair); }
.stat .label { color: var(--c45); margin-top: 6px; }
.specsec { display: grid; grid-template-columns: 220px 1fr; gap: 20px 48px; padding: 44px 0; border-top: 1px solid var(--hair); }
.specsec:last-child { border-bottom: 1px solid var(--hair); }
.specsec .sec-k { color: var(--c60); padding-top: 3px; }
.specsec .spec { border-top: 0; }
.specsec .row { grid-template-columns: 240px 1fr; padding: 13px 0; }
.specsec .row:first-child { padding-top: 0; }
.chart { max-width: 720px; margin-top: 28px; }
.chart svg { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; color: var(--c60); }
.legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--c90); vertical-align: middle; margin-right: 10px; }
.legend i.dash { border-top-style: dashed; border-top-color: var(--c60); }

/* buy cards: dark, hairline, one red pill */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 840px; margin: 0 auto; text-align: left; }
.cards-1 { grid-template-columns: 1fr; max-width: 440px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 16px; padding: 36px 32px; background: var(--lift); }
.card .eyebrow { margin-bottom: 0; }
.card .display { margin: 14px 0 24px; }
.card .body { margin: 12px 0 24px; }
.bul { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.bul > div { display: flex; align-items: baseline; gap: 12px; font-weight: 400; color: var(--c90); }
.card .btn { margin-top: 32px; width: 100%; }
.wm-buy { height: 96px; width: 320px; object-fit: cover; margin: 0 auto 16px; }

/* about splits */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-head { padding-top: 140px; }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 28px var(--pad); border-top: 1px solid var(--hair); color: var(--c45); }
.foot a { transition: color 150ms ease-out; }
.foot a:hover { color: var(--cream); }

/* quiet reveal, scroll driven, no script; browsers without it just show the page */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rv { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --pad: 32px; --sec: 96px; }
  .fold { grid-template-columns: minmax(320px, 42vw) 1fr; }
  .fold--rev { grid-template-columns: 1fr minmax(320px, 42vw); }
  .nav-links { gap: 24px; }
  .nav-buy { margin-left: 24px; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; --sec: 72px; --nav-h: 100px; --wm-h: 40px; }
  .nav { flex-wrap: wrap; height: auto; }
  .brand { padding: 7px 0; }
  .nav-buy { order: 1; margin-left: auto; }
  .nav-links { order: 2; flex-basis: 100%; width: 100%; height: 42px; justify-content: space-between; gap: 8px; margin-left: 0; border-top: 1px solid var(--hair-soft); }
  .fold, .fold--rev { grid-template-columns: 1fr; min-height: 0; }
  .fold-media { order: -1; min-height: 0; }
  .fold-media img { position: static; width: 100%; max-height: none; margin: 0; }
  .fold-copy { padding: 28px var(--pad) 56px; }
  .strip { aspect-ratio: 16 / 10; }
  .strip-bar .btns { margin-left: 0; width: 100%; }
  .hero-box { aspect-ratio: auto; height: min(72svh, 620px); }
  .hero-scrim { top: 30%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.7) 100%); }
  .hero-cta { top: auto; bottom: 40px; }
  .hero-cta .btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .media2, .feat, .cards, .split { grid-template-columns: 1fr; }
  .media2 { gap: 32px; }
  .split { gap: 40px; }
  .row, .specsec .row { grid-template-columns: 1fr; gap: 6px; }
  .specsec { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .reach-label { position: static; transform: none; text-align: center; padding: 16px 0 0; }
  .foot { flex-wrap: wrap; gap: 12px 24px; }
  .card { padding: 28px 22px; }
  .btn { padding: 14px 26px; }
  .btn-sm { padding: 11px 22px; }
  .block { margin-top: 48px; }
  .about-head { padding-top: 88px; }
  .photo { margin-top: 48px; }
  .wm-buy { height: 72px; width: 240px; }
  /* the chart scales with its width, so its labels get larger user units here */
  .chart svg text { font-size: 18px; letter-spacing: 2.4px; }
}

/* ---------- under the bar ----------
   The nav is sticky and translucent; a page's first section can run up
   under it so the bar blurs the picture instead of sitting on a black band. */
.under-nav { margin-top: calc(-1 * var(--nav-h)); }

/* ---------- about: the factory from the air ---------- */
/* ---------- the place ---------- */
.place {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(100vh, 930px);
  min-height: min(100svh, 930px);
  padding: 200px var(--pad) 96px;
}
/* dimmed so the statement reads over the parking lot */
.place-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 45%;
  opacity: 0.7;
}
/* left and right edges dissolve into the room, the foot of the photo fades out under the statement */
.melt-place {
  --mx: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  --my: linear-gradient(to bottom, #000 50%, transparent);
}
.place-copy { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; }
.place-copy .statement, .place-copy .lede { max-width: 640px; }
.place-title {
  font-weight: 300; font-size: var(--fs-display); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--c90); max-width: 640px;
}

/* ---------- the two paragraphs, side by side ---------- */
.band { display: grid; grid-template-columns: 1fr 1fr; }
.band > div:first-child { padding-right: 72px; }
.band > div + div { padding-left: 72px; border-left: 1px solid var(--hair); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .band > div:first-child { padding-right: 40px; }
  .band > div + div { padding-left: 40px; }
}

@media (max-width: 760px) {
  /* on a phone the photo keeps its full width instead of being cropped to a tall cover:
     it sits at the top at its natural height, fades out at the foot, and the copy starts over that fade */
  .place { display: block; min-height: 0; padding: 0 0 56px; }
  .place.under-nav { margin-top: 0; }
  .place-img { position: static; width: 100%; height: auto; opacity: 0.85; }
  .melt-place {
    --mx: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    --my: linear-gradient(to bottom, #000 55%, transparent);
  }
  .place-copy { padding: 0 var(--pad); margin-top: -56px; }
  .band { grid-template-columns: 1fr; }
  .band > div:first-child { padding-right: 0; }
  .band > div + div { padding: 36px 0 0; margin-top: 36px; border-left: 0; border-top: 1px solid var(--hair); }
}

/* ---------- careers ---------- */
.job-head { padding-top: 96px; }
.job-head .display, .job h2 { line-height: 1.15; }
.job-meta { color: var(--c45); margin-top: 16px; }
.job-body { padding: 0 var(--pad) 40px; }
.job-list { border-top: 1px solid var(--hair); }
.job { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--hair); }
.job h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(22px, 1vw + 14px, 28px); letter-spacing: -0.02em; color: var(--cream); }
.job .job-meta { margin-top: 10px; }
.job .lede { margin-top: 14px; max-width: 600px; }
.job:hover h2 { color: var(--red); }
/* one voice for the whole listing: same face, size, weight and color for paragraphs and bullets */
.job-sec { padding: 36px 0; border-top: 1px solid var(--hair); }
.job-sec:first-child { border-top: 0; padding-top: 24px; }
.job-h { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--cream); margin: 0 0 14px; }
.job-sec p, .job-ul li { font-family: var(--sans); font-weight: 300; font-size: var(--fs-lede); line-height: 1.6; color: var(--c75); }
.job-sec p + p { margin-top: 14px; }
.job-ul { margin: 0; padding-left: 22px; }
.job-ul li { margin: 0 0 8px; padding-left: 4px; }
.job-ul li::marker { color: var(--c45); }
.job-sec p + .job-ul { margin-top: 14px; }
.job-sec .btns { margin-top: 28px; }
@media (max-width: 760px) {
  .job-head { padding-top: 56px; }
  .job { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .job .btn { justify-self: start; }
}