:root {
  color-scheme: dark;
  --black: #070707;
  --white: #fbfbf7;
  --red: #be1111;
  --red-dark: #8f0a0a;
  --ink: #101010;
  --muted: rgba(16, 16, 16, 0.66);
  --line: rgba(16, 16, 16, 0.16);
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
}

body {
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

.campaign-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.video-panel {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  z-index: 0;
}

/* The photography carries the page. No blur duplicate, no poster smear, no
   desaturation, no scanlines -- the grade is already in the images. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
}

.video-stamp {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(255, 255, 255, 0.86);
  padding: 7px 9px 6px;
  font: 900 13px/1 var(--font-display);
  letter-spacing: 0.12em;
}

.copy-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 5vw, 70px);
  background: transparent;
  color: var(--white);
  position: relative;
  z-index: 2;
}

/* Mobile only: the copy does sit over the image there, so it gets a scrim --
   but a single bottom-up gradient, not a wash across the whole frame. */
.copy-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.72) 30%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 78%
  );
  pointer-events: none;
  z-index: -1;
}

.copy-panel::before {
  content: "";
  position: absolute;
  inset: clamp(28px, 5vw, 70px) auto clamp(28px, 5vw, 70px) clamp(14px, 2vw, 28px);
  width: 8px;
  background: var(--red);
}

.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.album-line,
.campaign-line,
.contrast-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.album-line {
  margin-bottom: clamp(18px, 3vh, 30px);
}

.campaign-line {
  width: min(100%, 500px);
  margin-top: clamp(16px, 2.5vh, 26px);
  color: rgba(255, 255, 255, 0.86);
}

.contrast-line {
  width: min(100%, 520px);
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.brand-mark {
  width: 11px;
  height: 11px;
  background: var(--red);
  display: inline-block;
}

/* The poster shouts this line at 15 feet. By the time someone is here they
   have already read it, so the page says it once, quietly, and gets out of
   the way of the picture. */
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 16ch;
  color: var(--white);
}

.lead-form {
  width: min(100%, 500px);
  margin-top: clamp(24px, 3.4vh, 42px);
}

.cta-label {
  display: block;
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lead-form > label:first-child {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 2px solid rgba(255, 255, 255, 0.86);
  background: rgba(251, 251, 247, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

input[type="tel"] {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  padding: 0 18px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  outline: none;
}

input[type="tel"]::placeholder {
  color: rgba(16, 16, 16, 0.42);
}

button {
  min-height: 58px;
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  padding: 0 24px;
  background: var(--red);
  color: var(--white);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.laylo-frame-wrap {
  width: min(100%, 440px);
  min-height: 220px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.laylo-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 0;
}

.legal-note {
  width: min(100%, 440px);
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

button:hover {
  background: var(--ink);
}

button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sound-toggle {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 8;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  padding: 0 13px;
  background: rgba(7, 7, 7, 0.52);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  font: 900 12px/1 var(--font-display);
  letter-spacing: 0.1em;
}

.sound-toggle:hover {
  border-color: var(--white);
  background: var(--red);
  color: var(--white);
}

.sound-toggle[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.consent-row input {
  margin-top: 2px;
  accent-color: var(--red);
}

.form-status {
  min-height: 21px;
  margin: 13px 0 0;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}

.action-panel {
  width: min(100%, 540px);
  margin-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.76);
  padding-top: 18px;
}

.action-panel p {
  margin: 0 0 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.action-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.action-links a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.82);
  color: var(--white);
  background: rgba(7, 7, 7, 0.22);
  text-decoration: none;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-links a:hover {
  background: var(--white);
  color: var(--ink);
}

@media (min-width: 821px) {
  /* Two real columns instead of type stacked on top of the picture. The video
     column is sized to 9:16 of the viewport height, so the reel fills it
     exactly -- nothing cropped, no letterbox bars, full opacity. */
  .campaign-shell {
    grid-template-columns: minmax(0, 1fr) min(56.25vh, 48vw);
    grid-template-rows: 100vh;
    height: 100vh;
    align-items: stretch;
  }

  /* grid-row: 1 on both is load-bearing. The video panel is first in the DOM
     and sits in column 2, so sparse auto-placement pushes the copy panel into
     an implicit second row -- off screen. Pinning the row keeps them side by
     side. */
  .video-panel {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    height: 100vh;
  }

  .copy-panel {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    height: 100vh;
    justify-content: center;
    background: var(--black);
  }

  /* Nothing sits over the image on desktop, so the scrim comes off entirely. */
  .copy-panel::after {
    display: none;
  }

  .brand-row,
  h1,
  .campaign-line,
  .contrast-line,
  .lead-form {
    margin-left: clamp(22px, 4vw, 70px);
  }

  .action-links {
    grid-template-columns: minmax(0, 220px);
  }
}

@media (max-height: 760px) and (min-width: 821px) {
  .lead-form {
    margin-top: 24px;
  }
}

@media (max-width: 820px) {
  .campaign-shell {
    display: grid;
    min-height: 100vh;
  }

  .video-panel {
    min-height: 100vh;
    height: 100vh;
  }

  .hero-video {
    min-height: 100vh;
  }

  .sound-toggle {
    right: 18px;
    top: 18px;
    bottom: auto;
  }

  .copy-panel {
    min-height: 100vh;
    padding: 26px 20px 24px 28px;
  }

  /* The scrim starts lower and clears faster so more of the frame stays
     untouched above the copy. */
  .copy-panel::after {
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.78) 26%,
      rgba(0, 0, 0, 0.34) 44%,
      transparent 60%
    );
  }

  h1 {
    font-size: clamp(1.75rem, 7.4vw, 2.35rem);
  }

  /* Every rule below buys back vertical space for the picture. */
  .campaign-line {
    margin-top: 10px;
  }

  .contrast-line {
    margin-top: 7px;
  }

  .lead-form {
    margin-top: 16px;
  }

  .cta-label {
    margin-bottom: 9px;
  }

  /* Keeping the button beside the field instead of under it saves a whole
     58px row on a phone. */
  .input-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  input[type="tel"] {
    min-height: 52px;
    font-size: 16px;
  }

  button {
    min-height: 52px;
    padding: 0 18px;
    font-size: 14px;
  }

  .consent-row {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.3;
  }

  .form-status {
    min-height: 0;
    margin-top: 9px;
  }

  .legal-note {
    margin-top: 8px;
  }

  .video-stamp {
    display: none;
  }

  .action-panel {
    margin-top: 14px;
    padding-top: 14px;
  }

  .action-panel p {
    display: none;
  }

  .action-links {
    grid-template-columns: minmax(0, 190px);
  }

  .action-links a {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}