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

html {
  height: 100%;
}

body {
  min-height: 100%;
  height: 100vh;
  overflow: hidden;
  background: #1D1D1F;
  cursor: default;
  display: flex;
  flex-direction: column;
}


.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;
}

/* Brand block — top left */
.brand {
  padding: 64px 0 0 64px;
  flex-shrink: 0;
}

.brand-logo {
  width: 160px;
  height: 160px;
  display: block;
}

.brand-name {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-weight: normal;
  font-size: 96px;
  color: #fff;
  padding: 24px 0 0 0;
  margin: 0;
  line-height: 1.1;
}

.brand-tagline {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 32px;
  color: #FF5833;
  padding: 4px 0 0 0;
  margin: 0;
}

/* Pushes the ticker toward the middle of the page, contact block to the bottom */
.spacer {
  flex: 1;
}

/* Ticker — horizontal band */
.ticker--horizontal {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: #FF5833;
  padding: 20px 0;
  white-space: nowrap;
}

.ticker--horizontal .ticker-content {
  display: inline-flex;
  width: max-content;
  /* JS (see bottom of the page) overrides this with a random duration per
     load; this is only the fallback if that script doesn't run.
     alternate: instead of snapping back to 0 at the end of the loop, the
     ticker reverses direction and re-traces its path. Position is
     continuous at the reversal (only velocity flips), so there's no jump —
     it reads as a bounce. This also means the -50% "duplicated set" trick
     is no longer needed for seamlessness, but it's left in place since it
     does no harm. */
  animation: marquee-x 26s linear infinite alternate;
  will-change: transform;
}

.ticker-item {
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  font-size: 32px;
  padding: 0 24px;
  white-space: nowrap;
}

/* Alternating white/black text — every other "coming soon." flips */
.ticker-item:nth-child(odd) {
  color: #1D1D1F;
}

.ticker-item:nth-child(even) {
  color: #fff;
}

@keyframes marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    /* Ticker items are duplicated (two identical sets), so -50% is exactly
       one set's width — the loop lines up seamlessly with no visible seam. */
    transform: translateX(-50%);
  }
}

/* Ticker — vertical strip along the right edge */
.ticker--vertical {
  position: fixed;
  top: 0;
  right: 0;
  padding: 0px 20px;
  margin-right: 48px;
  height: 100vh;
  overflow: hidden;
  background: #FF5833;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.ticker--vertical .ticker-content {
  display: inline-flex;
  flex-direction: column;
  height: max-content;
  /* alternate: see the horizontal ticker's comment above — reverses at
     each end instead of snapping back, so there's no jump. */
  animation: marquee-y 14s linear infinite alternate;
  will-change: transform;
}

.ticker--vertical .ticker-item {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  font-size: 32px;
  padding: 24px 0;
}

@keyframes marquee-y {
  from {
    transform: translateY(0);
  }
  to {
    /* Same duplicated-set trick as the horizontal ticker, on the Y axis. */
    transform: translateY(-50%);
  }
}

/* Hover: the scroll stops and the band keeps growing, anchored to wherever
   the pointer is, for as long as it stays over it — no pulsing back down.
   --ox/--oy are set by the mousemove listener at the bottom of the page;
   they default to center (50%/50%) until the first mousemove fires.
   transform-origin is what makes it grow from the pointer instead of the
   box's corner — font-size can't do that (it's layout-driven, always
   anchored to the box's own start edge), which is also what caused the
   vertical ticker's width to fall out of sync with its rotated text and
   clip. transform sidesteps that since it never touches layout.
   The scale is capped well below the earlier font-size version's ceiling:
   transform: scale() drives GPU texture-stretching, which softens text at
   high magnification — this is a real trade-off for being able to grow
   from an arbitrary point at all, so the ceiling here stays modest to keep
   it close to imperceptible. */
.ticker {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(1);
  transition: transform 0.4s ease;
  /* Touch/pen presses drive this via the .is-active class (set in the
     script below) instead of :hover, which touch browsers either never
     trigger or leave "stuck" on after a tap. touch-action: manipulation
     drops the double-tap-to-zoom delay without blocking scrolling, and
     the callout/selection suppression stops a hold from popping up the
     iOS/Android text-selection menu instead of growing the band. */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ticker:hover,
.ticker.is-active {
  transform: scale(3);
  /* Long + linear so the growth reads as continuous, not an eased jump. */
  transition: transform 30s linear;
}

.ticker:hover .ticker-content,
.ticker.is-active .ticker-content {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ticker--horizontal .ticker-content,
  .ticker--vertical .ticker-content {
    animation: none;
  }

  .ticker,
  .ticker:hover,
  .ticker.is-active {
    transition: none;
    transform: scale(1);
  }
}

/* Contact block — bottom right. Right padding clears the fixed vertical
   ticker strip (auto-sized to ~77px at this font-size, plus its own
   48px margin-right — ~125px total) so its text never sits underneath it. */
.contact {
  align-self: flex-end;
  padding: 0 150px 48px 0;
  text-align: right;
  max-width: 480px;
  flex-shrink: 0;
}

.contact-divider {
  border-bottom: 2px solid #fff;
  margin-bottom: 16px;
}

.contact-label {
  font-family: 'Arial', sans-serif;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 0 8px 0;
}

.contact ul {
  list-style: none;
}

.contact li {
  padding: 8px 0 0 0;
  margin: 0;
}

.contact a {
  font-family: 'Times New Roman', serif;
  font-size: 40px;
  color: #fff;
  text-decoration: none;
}

.contact a:hover {
  color: #FF5833;
  text-decoration: underline;
}

.contact a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Mobile */
@media (max-width: 767px) {
  html,
  body {
    height: auto;
    /* min-height: 100% resolves to nothing here — html's height is auto,
       so there's no percentage base for body to inherit, and the
       bottom spacer (flex: 1) has no leftover space to fill without a
       real viewport-tied minimum. 100vh with a dvh upgrade (accounts
       for mobile browser chrome showing/hiding) gives it one, while
       still letting body grow taller than the viewport when content
       needs it. */
    min-height: 100vh;
    min-height: 100dvh;
    /* Desktop relies on body's overflow: hidden to clip the hover-grow
       ticker (see .ticker:hover below) so it never shows as a scrollbar.
       Mobile needs vertical scroll instead (content can exceed the
       viewport height), but touch drives that same grow effect via
       .is-active — without a horizontal clip, a press-and-hold scales
       the ticker past the viewport edge and the page gains real
       horizontal scroll. Clip X, allow Y. */
    overflow-x: hidden;
    overflow-y: visible;
  }

  .brand {
    padding: 32px 0 0 24px;
  }

  .brand-logo {
    width: 96px;
    height: 96px;
  }

  .brand-name {
    font-size: 40px;
  }

  .brand-tagline {
    font-size: 18px;
  }

  /* Only the top spacer gets a fixed mobile size — the one before the
     footer keeps the base rule's flex: 1 (unchanged above) so it keeps
     filling leftover vertical space and pushing the footer to the actual
     bottom of the viewport, same as desktop, instead of just trailing
     the ticker with a fixed gap. */
  .spacer--top {
    flex: 0 0 64px;
  }

  .ticker--horizontal .ticker-item {
    font-size: 20px;
    padding: 0 16px;
  }

  /* No explicit width here, same as desktop — the band auto-sizes from
     its own padding + the vertical text's line height, which is what
     keeps its thickness matching the horizontal band's (also padding +
     line height driven). A fixed width doesn't shrink in step with that
     and throws the two out of sync. */
  .ticker--vertical .ticker-item {
    font-size: 20px;
    padding: 16px 0;
  }

  .contact {
    /* 20% alone isn't enough clearance on narrow phones (e.g. 20% of
       390px = 78px) against the fixed vertical ticker, which reserves
       111px (band width + its margin-right) regardless of viewport —
       the links would render underneath it. max() keeps the 20% feel
       on wider mobile widths but guarantees the ticker is always cleared. */
    padding: 0 max(20%, 128px) 32px 0;
    max-width: 100%;
  }

  .contact a {
    font-size: 28px;
  }
}