/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --accent: #f28a20;
  --accent-light: #ffa94d;
  /* Same orange as --accent, as channels, so translucent accent washes
     (tracker glow, pulse ring) stay in sync with a single colour change. */
  --accent-rgb: 242, 138, 32;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 28px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.2));
  transition: filter 0.25s ease;
}

.logo:hover img {
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
}

.site-nav {
  display: flex;
  gap: 40px;
}

.site-nav a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}

.site-nav a:hover {
  color: #fff;
}

/* ---------- Hero ad ---------- */
/* Print-style launch poster: copy sits in the left column, the product
   photo is lifted out of flow on the right so the strap can cross over
   the headline the way it does on the poster. */
.hero-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 150px 0 calc(44px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background-color: #000;
}

.hero-poster-inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Full-width, like the poster — the product shot sits on top of it rather
   than beside it, so only the text inside needs to stay clear of the strap. */
.hero-poster-copy {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Text stays in the left two-thirds so nothing runs under the strap. */
.hero-poster-eyebrow,
.hero-poster-headline h1,
.hero-poster-subhead {
  max-width: 64%;
}

.hero-poster-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(14px, 2vh, 22px);
}

.hero-poster-headline {
  margin-bottom: clamp(14px, 2vh, 22px);
}

.hero-poster-headline h1 {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 86px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

/* Spells out what the product actually is, right under the tagline, so
   the offer reads immediately instead of only after scrolling. */
.hero-poster-subhead {
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Sits above the copy so the strap crosses the headline, as on the poster.
   The source shot is cropped tight to the strap, so its leftover black
   field blends into the page. */
.hero-poster-media {
  position: absolute;
  z-index: 3;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-poster-media img {
  height: min(74vh, 660px);
  width: auto;
  max-width: none;
}

.hero-scroll-indicator {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  background-color: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.hero-scroll-indicator svg {
  width: 14px;
  height: 8px;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

.hero-scroll-indicator:hover {
  background-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

/* ---------- Hero intro ---------- */
.hero-intro {
  position: relative;
  z-index: 1;
  padding: 120px 0 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background-image: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    rgba(255, 255, 255, 0.07),
    rgba(0, 0, 0, 0) 60%
  );
  background-repeat: no-repeat;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: #fff;
}

.hero-sub {
  font-size: 24px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}

.hero-tagline {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 64px;
}

/* ---------- Waitlist form ---------- */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.name-input,
.email-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 16px 18px;
  transition: border-color 0.25s ease;
}

.name-input:focus,
.email-input:focus {
  border-color: rgba(255, 255, 255, 0.7);
}

.name-input::placeholder,
.email-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.submit-btn {
  background-color: #fff;
  color: #000;
  border: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 24px;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.submit-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
}

.submit-btn-success {
  animation: submit-success-pulse 0.6s ease;
}

@keyframes submit-success-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-btn-success {
    animation: none;
  }
}

.form-note {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.form-note.is-success {
  color: #fff;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease;
}

.scroll-cue svg {
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

.scroll-cue:hover {
  color: #fff;
}

@keyframes scroll-cue-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ---------- Incentives ---------- */
.incentives {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.incentives-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.incentive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  margin-bottom: 64px;
}

.incentive-card {
  background-color: #000;
  padding: 48px 40px;
  text-align: center;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.incentive-card:hover {
  background-color: rgba(255, 255, 255, 0.03);
  transform: translateY(-4px);
}

.incentive-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
  margin-bottom: 20px;
}

.incentive-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 12px;
}

.incentive-card p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  max-width: 360px;
  margin: 0 auto;
}

.scarcity-note {
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 56px;
}

.scarcity-note strong {
  color: var(--accent-light);
  font-weight: 500;
}

.section-cta {
  display: flex;
  justify-content: center;
}

.section-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background-color: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.section-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

/* ---------- Waitlist tracker ---------- */
.waitlist-tracker {
  max-width: 560px;
  margin: 0 auto 64px;
  padding: 40px 44px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px;
  background-color: rgba(var(--accent-rgb), 0.05);
  box-shadow: 0 0 80px rgba(var(--accent-rgb), 0.12);
}

.tracker-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tracker-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.tracker-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  margin-right: 10px;
  animation: tracker-pulse 1.8s ease-out infinite;
}

.tracker-count {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-light);
}

.tracker-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.tracker-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  width: 57%;
  transition: width 0.6s ease;
}

.tracker-note {
  margin-top: 16px;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes tracker-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

/* ---------- Product ---------- */
.product {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.product-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  text-align: left;
}

.product-text {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  max-width: 440px;
  margin: 24px 0 32px;
}

.product-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-features li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.product-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.6);
}

.product-media {
  display: flex;
  justify-content: center;
}

.product-photo-frame {
  width: 100%;
  max-width: 420px;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(255, 255, 255, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.product-photo-frame:hover {
  transform: translateY(-6px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(255, 255, 255, 0.1);
}

.product-photo-inner {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
}

.product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.95) contrast(1.02);
}

/* ---------- About ---------- */
.about {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.about-inner {
  max-width: 720px;
  margin: 0 auto;
}

.about-text {
  font-size: 17px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin: 24px 0 40px;
}

.about-text strong {
  color: #fff;
  font-weight: 500;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.about-tag {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 10px 18px;
  border-radius: 999px;
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.final-cta-inner {
  max-width: 560px;
  margin: 0 auto;
}

.final-cta-text {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  margin: 20px 0 36px;
}

.final-cta-btn {
  display: inline-block;
  background-color: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.08);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.final-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

/* ---------- Sticky waitlist reminder ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  background-color: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.sticky-cta-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.sticky-cta-btn {
  display: inline-block;
  background-color: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.sticky-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
}

.sticky-cta-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  transition: color 0.25s ease;
}

.sticky-cta-close:hover {
  color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.social-links {
  display: flex;
  gap: 28px;
}

.social-links a {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.25s ease;
}

.social-links a:hover {
  color: #fff;
}

/* ---------- Motion ---------- */
.reveal {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

body.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
}

body.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Same specificity as the rule above, placed after it to win the tie —
   .incentive-card carries .reveal directly, so its own :hover lift would
   otherwise be silently overridden by the reveal system once revealed. */
body.js-reveal .incentive-card:hover {
  transform: translateY(-4px);
}

.reveal-delay-1 {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  body.js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-scroll-indicator svg,
  .scroll-cue svg {
    animation: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-poster {
    padding: 128px 0 calc(36px + env(safe-area-inset-bottom, 0px));
  }

  .hero-poster-media img {
    height: min(56vh, 480px);
  }

  .hero-intro {
    padding: 100px 0 80px;
  }

  .hero-content {
    max-width: 560px;
  }

  .wordmark {
    font-size: clamp(36px, 8vw, 56px);
  }

  .hero-sub {
    font-size: 18px;
    margin-bottom: 32px;
  }

  .hero-tagline {
    margin-bottom: 40px;
  }

  .waitlist-form {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  .product-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .product-media {
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }

  .site-header {
    padding: 20px 0;
  }

  .logo img {
    height: 38px;
  }

  .site-nav {
    gap: 18px;
  }

  .site-nav a {
    font-size: 11px;
  }

  .hero-poster {
    padding: 104px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .hero-poster-eyebrow,
  .hero-poster-headline h1,
  .hero-poster-subhead {
    max-width: 68%;
  }

  .hero-poster-media img {
    height: min(42vh, 340px);
  }

  .hero-intro {
    padding: 80px 0 64px;
  }

  .hero-scroll-indicator {
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 12px;
  }

  .wordmark {
    font-size: clamp(32px, 10vw, 48px);
    margin-bottom: 16px;
  }

  .hero-sub {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .hero-tagline {
    margin-bottom: 32px;
  }

  .form-row {
    flex-direction: column;
  }

  .name-input,
  .email-input,
  .submit-btn {
    font-size: 16px;
    padding: 14px 16px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .incentives {
    padding: 64px 0;
  }

  .incentives-header {
    margin-bottom: 40px;
  }

  .incentive-grid {
    grid-template-columns: 1fr;
  }

  .incentive-card {
    padding: 32px 20px;
  }

  .product {
    padding: 64px 0;
  }

  .about {
    padding: 64px 0;
  }

  .about-tags {
    gap: 10px;
  }

  .waitlist-tracker {
    padding: 24px 18px;
    margin-bottom: 40px;
  }

  .tracker-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .tracker-count {
    font-size: 20px;
  }

  .section-cta-btn {
    white-space: normal;
    text-align: center;
    padding: 16px 22px;
  }

  .final-cta {
    padding: 80px 0;
  }

  .final-cta-btn {
    padding: 16px 28px;
  }

  .sticky-cta {
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(16px);
    padding: 10px 10px 10px 16px;
  }

  .sticky-cta.is-visible {
    transform: translateY(0);
  }

  .sticky-cta-text {
    display: none;
  }
}

@media (max-height: 480px) {
  .hero-poster {
    padding: 88px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .hero-scroll-indicator {
    margin-top: 16px;
  }
}

@media (max-width: 400px) {
  .site-nav {
    gap: 11px;
  }

  .hero-poster-headline h1 {
    font-size: clamp(28px, 8.5vw, 36px);
  }

  .hero-poster-media img {
    height: min(38vh, 290px);
  }

  .site-nav a {
    font-size: 10px;
  }

  .wordmark {
    font-size: clamp(28px, 11vw, 40px);
  }

  .eyebrow {
    font-size: 11px;
    padding: 7px 14px;
  }

  .section-title {
    font-size: clamp(24px, 7vw, 32px);
  }
}