.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main#root {
  display: block;
  position: relative;
  z-index: 2;
}

body {
  color: #171717;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.home-page main#root > div.min-h-screen.bg-background {
  background-color: transparent;
}

/* Keep condensed type for display headings and use Barlow for small UI copy. */
nav .font-heading,
a.font-heading,
button.font-heading,
label.font-heading,
p.font-heading,
span.font-heading {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 600;
}

[class*="tracking-"] {
  letter-spacing: 0;
}

.bg-background,
.bg-white,
.bg-\[\#f5f0e8\],
.bg-\[\#f6f1e9\] {
  color: #171717;
}

.bg-background .text-muted-foreground,
.bg-white .text-muted-foreground,
.bg-\[\#f5f0e8\] .text-muted-foreground,
.bg-\[\#f6f1e9\] .text-muted-foreground {
  color: #555;
}

.text-white\/50 {
  color: rgb(255 255 255 / 72%) !important;
}

.text-white\/25,
.text-white\/35,
.text-white\/40 {
  color: rgb(255 255 255 / 76%) !important;
}

.text-white\/45 {
  color: rgb(255 255 255 / 78%) !important;
}

.text-white\/55 {
  color: rgb(255 255 255 / 78%) !important;
}

.text-white\/60 {
  color: rgb(255 255 255 / 80%) !important;
}

.text-white\/70 {
  color: rgb(255 255 255 / 88%) !important;
}

.text-white\/75 {
  color: rgb(255 255 255 / 88%) !important;
}

.text-white\/80 {
  color: rgb(255 255 255 / 94%) !important;
}

.bg-\[\#181818\] .text-white {
  color: rgb(255 255 255 / 94%) !important;
}

.bg-\[\#181818\] .text-white\/40,
.bg-\[\#181818\] .text-white\/60,
.bg-\[\#181818\] .text-white\/75,
.bg-\[\#181818\] .text-white\/75 span,
.bg-\[\#181818\] a .text-white {
  color: rgb(255 255 255 / 88%) !important;
}

.text-primary\/70 {
  color: #f0c24a !important;
}

.text-\[9px\],
.text-\[10px\],
.text-\[11px\] {
  font-size: 12px;
}

.text-xs {
  font-size: 13px;
}

.animate-marquee {
  color: rgb(255 255 255 / 76%);
  font-size: 12px;
}

header nav a,
header [data-testid^="nav-link"],
header [data-testid="nav-cta"] {
  color: rgb(255 255 255 / 90%);
  font-size: 13px;
}

header [data-testid^="nav-link"].text-primary,
header [data-testid="nav-cta"].text-primary {
  color: #e0b43d;
}

main#root > div > section:first-of-type p {
  color: rgb(255 255 255 / 90%);
  font-size: 16px;
  line-height: 1.65;
}

main#root > div > section.h-\[72svh\],
main#root > div > section.h-\[72svh\] > .absolute.inset-0.z-0 {
  background-color: transparent !important;
  background: transparent;
}

.bg-background .text-primary,
.bg-white .text-primary,
.bg-\[\#f5f0e8\] .text-primary,
.bg-\[\#f6f1e9\] .text-primary {
  color: #806018;
}

.bg-secondary .text-primary,
.bg-secondary .text-primary\/70,
.bg-\[\#1c1c1c\] .text-primary,
.bg-\[\#1c1c1c\] .text-primary\/70,
.bg-\[\#161616\] .text-primary,
.bg-\[\#161616\] .text-primary\/70,
.bg-\[\#0d0b09\] .text-primary,
.bg-\[\#0d0b09\] .text-primary\/70,
footer .text-primary {
  color: #e0b43d;
}

button.bg-primary,
a.bg-primary,
span.bg-primary {
  color: #171717;
}

a.inline-block:has(> .hidden.lg\:inline-flex) {
  display: none;
}

.overflow-x-auto:focus-visible {
  outline: 2px solid #e0b43d;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  header {
    background-color: rgb(18 18 18 / 82%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  header img {
    width: 96px;
    height: auto;
  }

  main#root > div > section:first-of-type p {
    font-size: 14px;
  }

  main#root > div > section.h-\[72svh\] a.inline-block span {
    padding-right: 16px;
    padding-left: 16px;
  }

  .text-\[9px\],
  .text-\[10px\],
  .text-\[11px\],
  .text-xs {
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  a.inline-block:has(> .hidden.lg\:inline-flex) {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Equal groups and matching end spacing make the existing -50% loop seamless.
   The track is at least twice its viewport, so neither copy can run out. */
.animate-marquee {
  display: flex;
  width: max-content;
  min-width: 200%;
  gap: 0;
}

.marquee-group {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  padding-inline: 1rem;
}

.marquee-group > span {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none !important;
    transform: none;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .marquee-group {
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 0.5rem 1rem;
    padding: 0;
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }
}


/* Stable hero geometry and a single uninterrupted ticker row. */
.homepage-hero {
  padding-bottom: 48px !important;
}

.homepage-hero > .container {
  padding-top: 72px;
  padding-bottom: 48px;
}

.homepage-hero-logo {
  display: block;
  width: min(74vw, 520px);
  height: auto;
  margin: 0 auto;
}

.homepage-hero-copy {
  margin-top: clamp(32px, 5vh, 56px);
}

.homepage-hero-copy > p {
  max-width: 720px;
  text-wrap: balance;
}

.homepage-hero-actions a {
  min-width: 0;
}

.homepage-hero .animate-marquee {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 0;
  white-space: nowrap;
  animation-duration: 28s;
  will-change: transform;
}

.homepage-hero .marquee-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: max-content;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(28px, 4vw, 64px);
  padding: 0 clamp(14px, 2vw, 32px);
}

.homepage-hero .marquee-group > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Size the visible footer wordmark, not the transparent square it replaced. */
.footer-brand-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}

.footer-brand-logo-desktop {
  width: 210px;
}

@media (max-width: 767px) {
  .homepage-hero {
    min-height: 560px;
    max-height: 680px;
    padding-bottom: 42px !important;
  }

  .homepage-hero > .container {
    padding: 88px 20px 54px;
  }

  .homepage-hero-logo {
    width: min(76vw, 300px);
  }

  .homepage-hero-copy {
    width: 100%;
    margin-top: 34px;
    gap: 14px;
  }

  .homepage-hero-copy > p {
    max-width: 350px;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .homepage-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 350px);
    gap: 10px !important;
  }

  .homepage-hero-actions > a,
  .homepage-hero-actions > a > span {
    width: 100%;
  }

  .homepage-hero-actions > a > span {
    min-height: 44px;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .homepage-hero .animate-marquee {
    font-size: 11px;
    animation-duration: 24s;
  }

  .homepage-hero .marquee-group {
    gap: 26px;
    padding-inline: 13px;
  }

  .site-footer {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .mobile-footer {
    margin-bottom: 24px !important;
  }

  .mobile-footer-top {
    margin-bottom: 30px !important;
  }

  .footer-brand-logo-mobile {
    width: 154px;
  }
}