:root {
  --ink: #0b0b0c;
  --paper: #e8e7e4;
  --lime: #cf1f25;
  --red: #cf1f25;
  --red-dark: #951519;
  --gray: #9a9a9a;
  --muted: #666;
  --line: #c8c6c2;
}

body {
  background: var(--paper);
}

.skip,
.button.lime,
.ticker,
.contact {
  background: var(--red);
  color: #fff;
}

.button.lime:hover {
  background: #ef3037;
}

.utility b,
.slash-mark,
.text-link span,
.tiny-cross,
.hero-corner,
.method-left em,
.is-open h3 > button,
.is-open .method-number,
.is-open .expand,
.motion-label b,
.gallery-arrow:hover,
.footer-links a:hover {
  color: var(--red);
}

.status-dot,
.small-square,
.method .small-square,
.hours .status-dot {
  background: var(--red);
}

.header,
.utility,
.method,
footer,
nav {
  background-color: var(--ink);
}

.header {
  background: rgba(11, 11, 12, .94);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
}

.brand img {
  filter: invert(1);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.brand > span {
  margin-top: -14px;
  color: #fff;
  font: 700 .56rem/1 var(--body);
  letter-spacing: .34em;
}

.footer-brand > span {
  margin-top: -16px;
}

.hero {
  min-height: 610px;
  height: min(67vw, 690px);
  background: var(--ink);
}

.hero-photo {
  object-position: center 40%;
  transform: scale(1.035);
  animation: hero-drift 13s cubic-bezier(.2,.65,.3,1) infinite alternate;
  will-change: transform;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(7,7,8,.97) 0%, rgba(7,7,8,.82) 28%, rgba(7,7,8,.22) 60%, rgba(7,7,8,.08) 100%),
    linear-gradient(0deg, rgba(7,7,8,.72), transparent 40%);
}

.hero-grid {
  background-image: linear-gradient(90deg, #fff08 1px, transparent 1px), linear-gradient(0deg, #fff05 1px, transparent 1px);
  background-size: 25% 100%, 100% 25%;
}

.hero-content {
  padding-top: 54px;
}

.hero h1 {
  max-width: 680px;
}

.hero h1 > span,
.hero h1 em {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px);
  animation: headline-rise .78s cubic-bezier(.16,.9,.25,1) forwards;
}

.hero h1 > span:nth-child(1) { animation-delay: .12s; }
.hero h1 > span:nth-child(3) { animation-delay: .23s; }
.hero h1 em { animation-delay: .34s; }

.hero h1 em,
.muted-heading,
.facility-copy .muted-heading {
  color: var(--red);
}

.hero-corner svg {
  stroke: var(--red);
  animation: arrow-float 1.7s ease-in-out infinite alternate;
}

.ticker {
  border: 0;
  white-space: nowrap;
  overflow: hidden;
}

.ticker > div {
  width: max-content;
  min-width: 150%;
  justify-content: space-around;
  animation: ticker-slide 18s linear infinite;
  color: #fff;
}

.programs {
  background: var(--ink);
  color: #fff;
  max-width: none;
  width: 100%;
  padding-inline: max(56px, calc((100vw - 1280px)/2));
}

.programs .section-index,
.programs .section-intro p,
.program-info p,
.program-note {
  color: #aaa;
}

.programs .small-square {
  background: var(--red);
}

.program-image {
  background: #171719;
  border: 1px solid #323236;
}

.program-image > img {
  filter: grayscale(.35) contrast(1.08);
}

.program-card:hover .program-image > img {
  filter: grayscale(0) contrast(1.08);
  transform: scale(1.055);
}

.circle-button {
  border-color: #777;
  color: #fff;
}

.circle-button:hover {
  background: var(--red);
  border-color: var(--red);
}

.program-note {
  border-color: #343438;
}

.program-note b,
.program-note .underlined {
  color: #fff;
}

.method {
  background-image: linear-gradient(135deg, #0a0a0b 0%, #171719 100%);
}

.method-list,
.method-item {
  border-color: #444;
}

.motion-orbits {
  stroke: #7a1a1d;
  transform-origin: 246px 149px;
  animation: orbit-spin 16s linear infinite;
}

.motion-line {
  stroke: var(--red);
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: line-draw 3.5s ease-in-out infinite alternate;
}

.facility {
  background: #e5e4e1;
}

.facility-visual > img {
  filter: grayscale(.15) saturate(.8);
  transition: opacity .22s, transform .65s ease;
}

.facility-visual:hover > img {
  transform: scale(1.04);
}

.contact {
  background: linear-gradient(115deg, var(--red-dark), var(--red) 58%, #e62b31);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, .75fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}

.contact-copy > p {
  max-width: 470px;
  margin-top: 26px;
  color: #ffe8e9;
  font-size: 13px;
}

.contact h2 span {
  -webkit-text-stroke-color: #fff;
}

.contact-tracks {
  border-color: #ffffff55;
  box-shadow: 0 0 0 25px #cf1f25, 0 0 0 26px #ffffff3d, 0 0 0 65px #cf1f25, 0 0 0 66px #ffffff2e;
  animation: contact-pulse 5s ease-in-out infinite;
}

.contact-action p {
  color: #f5ced0;
}

.contact-form {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 32px;
  background: rgba(8, 8, 9, .93);
  border: 1px solid #ffffff31;
  box-shadow: 0 24px 70px #5c05083d;
  color: #fff;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  color: #e4e4e4;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #ffffff2e;
  background: #171719;
  color: #fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #8e8e93;
}

.contact-form textarea {
  min-height: 108px;
}

.contact-submit {
  width: 100%;
  background: #fff;
  color: var(--ink);
}

.contact-submit:hover {
  background: #ececec;
}

.contact-note {
  margin-top: -4px;
  color: #a8a8ad;
  font-size: 9px;
  line-height: 1.5;
}

.big-arrow {
  color: #fff;
  animation: arrow-float 1.6s ease-in-out infinite alternate;
}

dialog {
  background: #eceae7;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: var(--red);
}

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.16,.85,.3,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,.85,.3,1);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .36s; }

@keyframes headline-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-drift {
  from { transform: scale(1.035) translate3d(0,0,0); }
  to { transform: scale(1.075) translate3d(-.7%, -.5%, 0); }
}

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes arrow-float {
  to { transform: translate(8px, -8px); }
}

@keyframes contact-pulse {
  50% { transform: scale(1.055); opacity: .65; }
}

@media (max-width: 760px) {
  .programs {
    padding-inline: 20px;
  }

  .hero {
    min-height: 690px;
    height: 690px;
  }

  .hero-photo {
    object-position: 58% center;
  }

  .ticker > div {
    min-width: 210%;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contact-form {
    padding: 24px 20px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .hero h1 > span,
  .hero h1 em,
  .ticker > div,
  .motion-orbits,
  .motion-line,
  .contact-tracks,
  .big-arrow,
  .hero-corner svg {
    animation: none !important;
  }

  .hero h1 > span,
  .hero h1 em,
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}
