:root {
  --ink: #211f1f;
  --yellow: #ffe17c;
  --max: 1440px;
  --phone-nudge: clamp(24px, 4vw, 68px);
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--yellow); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }

.section { min-height: 84svh; width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(34px, 4.2vw, 67px) clamp(28px, 6vw, 104px); }
.hero, .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 290px); align-items: start; gap: clamp(60px, 10vw, 170px); }
.hero-copy { width: min(100%, 540px); justify-self: end; text-align: right; padding-top: 48px; }
h1, h2, .tagline { font-family: "Work Sans", Arial, sans-serif; font-weight: 800; }
h1 { margin: 0; font-size: clamp(4rem, 8vw, 7.6rem); line-height: .79; letter-spacing: -.075em; }
.tagline { margin: 18px 0 clamp(42px, 8vh, 94px); font-size: clamp(1rem, 1.5vw, 1.42rem); line-height: 1.02; }
h2 { margin: 0 0 25px; font-size: clamp(1.6rem, 2.5vw, 2.55rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.hero + .split h2 { margin-bottom: 12.5px; }
p { margin: 0 0 1.3em; font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.48; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .16em; }
.copy { width: min(100%, 560px); max-width: 560px; padding-top: 48px; align-self: start; }
.hero-copy > p:not(.tagline), .copy > p { text-align: justify; text-justify: inter-word; }
.split-copy-left { grid-template-columns: minmax(0, 1fr) minmax(190px, 290px); }
.split-media-left { grid-template-columns: minmax(190px, 290px) minmax(0, 1fr); }
.split-media-left .copy { justify-self: start; }
.split-copy-left .copy { justify-self: end; }
.right-phone-section .copy, .right-phone-section .phone { align-self: start; }
.right-phone-section .copy { padding-top: 48px; text-align: right; }
.right-phone-section:not(.why-phone-section) .copy > p:first-of-type { text-align: right; }
.why-phone-section .copy { text-align: right; }
.why-phone-section .phone video { object-fit: cover; background: #080808; }
.hero .phone, .split-copy-left .phone { left: calc(-1 * var(--phone-nudge)); }
.split-media-left .phone { left: var(--phone-nudge); }
.phone { position: relative; width: min(100%, 258px); aspect-ratio: 415 / 852; justify-self: center; overflow: hidden; border: 8px solid #090909; border-radius: 48px; background: #080808; box-shadow: 0 0 0 2px #4d4b4b, 0 28px 60px rgba(0,0,0,.28); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 32%; height: 24px; transform: translateX(-50%); border-radius: 18px; background: #070707; }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; }
.final-section { padding-bottom: clamp(72px, 10vw, 140px); }

@media (max-width: 800px) {
  .section { min-height: auto; padding: 43px 24px 52px; }
  .hero, .split, .split-copy-left, .split-media-left { grid-template-columns: 1fr; gap: 49px; }
  .hero-copy, .split .copy { width: 100%; max-width: 600px; justify-self: center; text-align: left; padding-top: 22px; }
  .hero-copy > p:not(.tagline), .copy > p { text-align: left; }
  .right-phone-section .copy { padding-top: 22px; text-align: left; }
  .right-phone-section:not(.why-phone-section) .copy > p:first-of-type { text-align: left; }
  .why-phone-section .copy, .hero-copy { text-align: left; }
  h1 { font-size: 4.2rem; }
  h2 { font-size: 1.4rem; margin-bottom: 0; }
  .tagline { margin-bottom: 21px; }
  .hero .phone, .split-copy-left .phone { order: 2; }
  .split-media-left .copy { order: 1; }
  .split-media-left .phone { order: 2; }
  .phone { width: min(48vw, 194px); border-width: 7px; border-radius: 42px; justify-self: center; }
  .hero .phone, .split-copy-left .phone, .split-media-left .phone { left: 0; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }