/* ============================================================
   Aeropulse Labs. Landing page and contact page.
   Layout mirrors warhound.com: a 1512px artboard scaled by --u
   on desktop (1100px and up), fluid reflow below that.
   Text colours are white (#fff) and black (#000) only.
   ============================================================ */

:root {
  --u: calc(100vw / 1512);
  --white: #fff;
  --black: #000;
  --font-mark: "Michroma", "Arial Black", sans-serif;
  --font-display: "Inter Tight", "Inter", Helvetica, Arial, sans-serif;
  --font-body: "Inter", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "Courier New", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { margin: 0; padding: 0; background: var(--black); }
body {
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.ap-root {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  overflow-x: clip;
}
.ap-root > main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.ap-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(var(--u) * 86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 16);
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--white);
}
.ap-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  color: var(--white);
}
.ap-wordmark {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ap-mark { width: calc(var(--u) * 40); height: calc(var(--u) * 40); flex: none; }
.ap-header__right {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 40);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 10), 9px);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ap-header__link { position: relative; display: inline-block; }
.ap-header__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.ap-header__link:hover::after,
.ap-header__link:focus-visible::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.ap-hero { position: relative; height: calc(var(--u) * 1209); }

/* Giant wordmark with the video knocked out through the letters */
.ap-ghost {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 76);
  width: 100%;
  height: calc(var(--u) * 190);
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}
.ap-ghost__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.15) saturate(0.6);
}
.ap-ghost__mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  mix-blend-mode: multiply;
}
.ap-ghost__text {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: calc(var(--u) * 170);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.ap-headline {
  position: absolute;
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 281);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--u) * 96);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.ap-line { display: block; overflow: hidden; }
.ap-line > span { display: block; }

.ap-meta {
  position: absolute;
  top: calc(var(--u) * 458);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--white);
  text-box: trim-both cap alphabetic;
}
.ap-meta--1 { left: calc(var(--u) * 16); width: calc(var(--u) * 210); }
.ap-meta--2 { left: calc(var(--u) * 386); width: calc(var(--u) * 240); }
.ap-meta--3 { right: calc(var(--u) * 18); text-align: right; white-space: nowrap; }

@supports not (text-box: trim-both cap alphabetic) {
  .ap-meta { transform: translateY(-0.26em); }
}

.ap-stage {
  position: absolute;
  left: calc(var(--u) * 16);
  top: calc(var(--u) * 553);
  width: calc(var(--u) * 1480);
  height: calc(var(--u) * 635);
}
.ap-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.9;
  /* bottom-right notch, measured off the reference */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--u) * 39),
    calc(100% - var(--u) * 103) calc(100% - var(--u) * 39),
    calc(100% - var(--u) * 142) 100%,
    0 100%
  );
}
.ap-media__video {
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: contrast(1.08) saturate(0.85);
  will-change: transform;
}
.ap-ticks {
  position: absolute;
  left: calc(var(--u) * 21);
  bottom: calc(var(--u) * 40);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 14);
  line-height: 1.2;
  color: var(--white);
}
.ap-ticks i {
  display: block;
  width: calc(var(--u) * 14);
  height: 1px;
  margin: 0 0 calc(var(--u) * 11);
  background: var(--white);
}
.ap-slashes {
  position: absolute;
  right: calc(var(--u) * -15);
  top: calc(var(--u) * 273);
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 90);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 14);
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}

/* ---------- White band ---------- */
.ap-body {
  position: relative;
  background: var(--white);
  color: var(--black);
  min-height: calc(var(--u) * 433);
  padding: calc(var(--u) * 150) calc(var(--u) * 16) calc(var(--u) * 83);
}
.ap-body__rule {
  position: absolute;
  left: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 40);
  border-top: 1px solid var(--black);
}
.ap-body__icon {
  position: absolute;
  left: calc(var(--u) * 16);
  top: calc(var(--u) * 48);
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  color: var(--black);
}
.ap-body__label,
.ap-body__code {
  position: absolute;
  top: calc(var(--u) * 58);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 16);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.ap-body__label { left: 50%; transform: translateX(-50%); }
.ap-body__code { right: calc(var(--u) * 16); text-align: right; }
.ap-body__text {
  max-width: calc(var(--u) * 1295);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 28.8);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--black);
  text-wrap: pretty;
}

/* ---------- Footer ---------- */
.ap-footer {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: calc(var(--u) * 40);
  padding: calc(var(--u) * 40) calc(var(--u) * 16) calc(var(--u) * 36);
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--white);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 11), 10px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ap-footer__brand {
  font-family: var(--font-mark);
  font-size: calc(var(--u) * 14);
  letter-spacing: 0.06em;
  margin-bottom: calc(var(--u) * 10);
}
.ap-footer__fine {
  max-width: calc(var(--u) * 640);
  text-transform: none;
  letter-spacing: 0;
}
.ap-footer__right { text-align: right; }
.ap-footer__right a { position: relative; }
.ap-footer__right a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.ap-footer__right a:hover::after,
.ap-footer__right a:focus-visible::after { transform: scaleX(1); }

/* ---------- Contact page ---------- */
.ap-contact {
  position: relative;
  padding: calc(var(--u) * 120) calc(var(--u) * 16) calc(var(--u) * 140);
  min-height: calc(100svh - var(--u) * 86);
}
.ap-contact__label {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: calc(var(--u) * 48);
}
.ap-headline--static { position: static; }
.ap-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: calc(var(--u) * 96);
  margin-top: calc(var(--u) * 96);
}
.ap-contact__notes {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: calc(var(--u) * 440);
}
.ap-contact__notes p + p { margin-top: calc(var(--u) * 22); }
.ap-contact__notes a { text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--white); }

.ap-form { display: grid; gap: calc(var(--u) * 36); max-width: calc(var(--u) * 760); }
.ap-field { display: grid; gap: 10px; }
.ap-field label {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ap-field input,
.ap-field select,
.ap-field textarea {
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: max(calc(var(--u) * 20), 16px);
  line-height: 1.3;
  padding: 10px 0 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.ap-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 18px;
  padding-right: 28px;
}
.ap-field select option { background: var(--black); color: var(--white); }
.ap-field textarea { min-height: 150px; resize: vertical; }
.ap-field input:focus,
.ap-field select:focus,
.ap-field textarea:focus { border-bottom-width: 2px; outline: none; }
.ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ap-form__row { display: flex; align-items: center; gap: calc(var(--u) * 28); flex-wrap: wrap; }
.ap-submit {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  padding: 16px 28px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.ap-submit:hover,
.ap-submit:focus-visible { background: var(--white); color: var(--black); }
.ap-submit[disabled] { cursor: wait; }
.ap-status {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============================================================
   Reflow below 1100px
   ============================================================ */
@media (max-width: 1099px) {
  .ap-header { height: 64px; padding: 0 16px; }
  .ap-wordmark { font-size: 15px; }
  .ap-mark { width: 30px; height: 30px; }
  .ap-brand { gap: 10px; }
  .ap-header__right { gap: 24px; font-size: 9px; }

  .ap-hero { height: auto; padding: clamp(72px, 16vw, 160px) 16px 20px; }
  .ap-ghost { top: 0; height: 12vw; }
  .ap-ghost__text { font-size: 11.6vw; }
  .ap-headline {
    position: static;
    font-size: clamp(40px, 8.6vw, 88px);
    letter-spacing: -0.05em;
    white-space: normal;
  }
  .ap-meta { position: static; width: auto; font-size: 11px; }
  .ap-hero__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: clamp(28px, 6vw, 64px);
  }
  .ap-meta--1, .ap-meta--2 { flex: 0 1 190px; }
  .ap-meta--3 { margin-left: auto; text-align: right; }

  .ap-stage {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    margin-top: clamp(28px, 6vw, 72px);
  }
  .ap-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1480 / 760;
    max-height: 72vh;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 24px),
      calc(100% - 64px) calc(100% - 24px),
      calc(100% - 88px) 100%,
      0 100%
    );
  }
  .ap-ticks { left: 13px; bottom: 12px; font-size: 11px; }
  .ap-ticks i { width: 10px; margin-bottom: 8px; }
  .ap-slashes { display: none; }

  .ap-body { min-height: 0; padding: clamp(84px, 18vw, 150px) 16px clamp(40px, 9vw, 80px); }
  .ap-body__rule { left: 16px; right: 16px; top: 24px; }
  .ap-body__icon { left: 16px; top: 34px; width: 26px; height: 26px; }
  .ap-body__label, .ap-body__code { font-size: 10px; top: 41px; }
  .ap-body__code { right: 16px; }
  .ap-body__text {
    max-width: min(100%, 820px);
    font-size: clamp(17px, 2.8vw, 24px);
    letter-spacing: -0.03em;
  }

  .ap-footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 16px 28px;
    font-size: 10px;
  }
  .ap-footer__brand { font-size: 12px; }
  .ap-footer__fine { max-width: 560px; }
  .ap-footer__right { text-align: left; }

  .ap-contact { padding: clamp(72px, 14vw, 120px) 16px clamp(72px, 14vw, 120px); min-height: 0; }
  .ap-contact__label { font-size: 11px; margin-bottom: 28px; }
  .ap-contact__grid { grid-template-columns: 1fr; gap: 56px; margin-top: 56px; }
  .ap-contact__notes { font-size: 11px; max-width: 560px; }
  .ap-contact__notes p + p { margin-top: 16px; }
  .ap-form { gap: 28px; max-width: 100%; }
  .ap-field label { font-size: 10px; }
  .ap-field input, .ap-field select, .ap-field textarea { font-size: 16px; }
  .ap-submit { font-size: 11px; padding: 14px 22px; }
  .ap-status { font-size: 10px; }
}

@media (max-width: 719px) {
  .ap-header__tag { display: none; }
  .ap-body__label { left: 50px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-root * { animation: none !important; transition: none !important; }
}