:root {
  --ink: #11100e;
  --paper: #eeeae1;
  --muted: rgba(17, 16, 14, 0.52);
  --rule: rgba(17, 16, 14, 0.2);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

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

h1, h2, p, figure { margin: 0; }

img, video, canvas { display: block; }

.site-shell { min-height: 100svh; }

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

.hero {
  position: relative;
  height: 350svh;
  background: var(--paper);
}

.sticky-hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 255, 0.9), transparent 48%),
    var(--paper);
}

.nav-shell {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 2.4rem;
  left: 2.4rem;
  height: 5.7rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wordmark {
  width: 8rem;
  display: flex;
  align-items: center;
}

.wordmark img {
  width: 100%;
  height: auto;
}

.desktop-nav { display: flex; gap: 2.6rem; }
.bag-link { justify-self: end; }
.bag-link span { opacity: 0.42; }

.desktop-nav a,
.bag-link { position: relative; }

.desktop-nav a::after,
.bag-link::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -0.45rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: right 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.bag-link:hover::after,
.bag-link:focus-visible::after { right: 0; }

.brand-backdrop {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(87vw, 96rem);
  pointer-events: none;
  opacity: 0.16;
  transform: translate(-50%, -50%);
}

.brand-backdrop img {
  width: 100%;
  height: auto;
}

.campaign-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1200px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.campaign-orbit__item {
  --orbit-size: clamp(110px, 11vw, 200px);

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.campaign-orbit__item img {
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.13));
}

@media (max-width: 820px) {
  .campaign-orbit__item { --orbit-size: clamp(84px, 20vw, 130px); }
}

.product-title {
  position: absolute;
  z-index: 8;
  top: 8.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.product-title h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-title span {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-story {
  position: absolute;
  z-index: 8;
  bottom: 4.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 52rem);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  line-height: 1.9;
  text-transform: uppercase;
  text-align: center;
  color: rgba(17, 16, 14, 0.82);
  pointer-events: none;
}

.video-stage {
  position: absolute;
  z-index: 3;
  inset: 6.2rem 4vw 5.4rem;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video-wrap {
  position: relative;
  width: min(58vw, 51rem);
  height: min(75svh, 50rem);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 350ms ease;
  transform: translateZ(0);
  contain: layout paint style;
}

.video-wrap.is-ready { opacity: 1; }

.garment-fallback,
.garment-canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.garment-fallback {
  opacity: 1;
  transition: opacity 160ms ease;
}

.garment-canvas {
  opacity: 0;
  transition: opacity 160ms ease;
  will-change: contents;
}

.video-wrap.is-scrub-ready .garment-fallback { opacity: 0; }
.video-wrap.is-scrub-ready .garment-canvas { opacity: 1; }

.video-loader {
  position: absolute;
  z-index: -1;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.is-ready .video-loader { display: none; }

/* Recreation of the Alaris end card. All dimensions are in --u units
   (1/1080 of the reference canvas), matching the original 1080p video's
   proportions exactly. */
.alaris {
  /* Same scaling as object-fit: contain on a 1920x1080 video. */
  --u: min(calc(100svh / 1080), calc(100vw / 1920));
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-family: "Libre Baskerville", Georgia, serif;
  text-align: center;
}

.alaris-canvas {
  position: relative;
  width: calc(var(--u) * 1920);
  height: calc(var(--u) * 1080);
}

/* Original mark: 144x101 at (893, 217). The looping animation's mark lives
   at (643, 327) 567x406 inside its own 1920x1080 frame, so the video is
   scaled and offset to land the mark in the same box. */
.alaris-logo {
  position: absolute;
  top: calc(var(--u) * 217);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 103);
  overflow: hidden;
}

.alaris-logo video {
  position: absolute;
  top: calc(var(--u) * -83);
  left: calc(var(--u) * -163.3);
  width: calc(var(--u) * 487.6);
  max-width: none;
  height: calc(var(--u) * 274.3);
}

.alaris p,
.alaris a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

.alaris-demo {
  top: calc(var(--u) * 352);
  font-size: calc(var(--u) * 58);
  line-height: 1.25;
}

.alaris-pitch {
  top: calc(var(--u) * 452);
  font-size: calc(var(--u) * 58);
  font-weight: 700;
  line-height: calc(var(--u) * 80.5);
}

.alaris-site {
  top: calc(var(--u) * 763);
  font-size: calc(var(--u) * 38);
  line-height: 1.25;
}

.alaris-site:hover,
.alaris-site:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
}

/* ---- Site intro loader ---- */

body.loader-locked { overflow: hidden; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f08a3c 0%, #e2701f 55%, #cd5e12 100%);
  color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", "Helvetica Neue", sans-serif;
  transition: opacity 700ms ease, transform 700ms ease;
}

/* Film-grain wash over the gradient. */
.site-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

.site-loader.is-done {
  opacity: 0;
  transform: translateY(-2vh);
  pointer-events: none;
}

.site-loader__stack {
  position: relative;
  display: grid;
  justify-items: center;
}

/* Collapsed row that grows to make space: line 1 starts dead-centre, then
   the whole stack re-centres as this opens, bumping line 1 upward. */
.site-loader__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-loader__reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.site-loader.is-pop .site-loader__reveal {
  grid-template-rows: 1fr;
}

.site-loader__genesis {
  padding-top: 1.15rem;
  /* Visible from the start — the collapsed row's clip is what hides it, so
     the pop reads as sliding out from behind the sentence, not fading in. */
  opacity: 1;
  transform: translateY(-130%);
  transform-origin: 50% 0;
  transition: none;
}

.site-loader__line {
  display: flex;
  align-items: center;
  gap: 0.42em;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The first line must never carry opacity or transform of its own — either
   creates a stacking context that isolates the logo video's screen-blend,
   flashing a black box. Its text and the video fade in individually instead. */
.site-loader__line:first-child {
  opacity: 1;
  transform: none;
}

.site-loader__line:first-child > span:first-child,
.site-loader__alaris video {
  opacity: 0;
  transition: opacity 600ms ease;
}

.site-loader.is-in .site-loader__line:first-child > span:first-child,
.site-loader.is-in .site-loader__alaris video {
  opacity: 1;
}

/* Alaris mark: same clip-and-scale trick as the end card, in em units. */
.site-loader__alaris {
  --s: 1.5em;
  position: relative;
  display: inline-block;
  width: var(--s);
  height: calc(var(--s) * 0.7153);
  overflow: hidden;
}

.site-loader__alaris video {
  position: absolute;
  top: calc(var(--s) * -0.5764);
  left: calc(var(--s) * -1.134);
  width: calc(var(--s) * 3.3861);
  max-width: none;
  height: calc(var(--s) * 1.9049);
  /* The clip's frame is black; screen-blend drops it out on the gradient. */
  mix-blend-mode: screen;
}

.site-loader__genesis img {
  height: 1.05em;
  width: auto;
  filter: invert(1);
}

/* "For GENESIS" slides straight down out of the first sentence — clipped
   by the expanding row, no bounce, no scale. */
.site-loader.is-pop .site-loader__genesis {
  animation: loader-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loader-pop {
  0% {
    transform: translateY(-130%);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .nav-shell {
    right: 1.2rem;
    left: 1.2rem;
    height: 4.8rem;
    grid-template-columns: 1fr 1fr;
  }

  .wordmark { width: 6.8rem; }
  .desktop-nav { display: none; }

  .brand-backdrop { width: 118vw; opacity: 0.13; }
  .product-title { top: 7.2rem; }
  .product-story { bottom: 3.2rem; font-size: 0.66rem; }
  .video-stage { inset: 5rem -2.5rem 6.4rem; }
  .video-wrap { width: min(105vw, 43rem); height: min(72svh, 44rem); }
}

@media (max-width: 520px) {
  .brand-backdrop { width: 135vw; }
  .video-stage { right: -4rem; left: -4rem; }
  .video-wrap { width: 120vw; height: 68svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-loader__line { transition: opacity 400ms ease; transform: none; }
  .site-loader__reveal { transition: none; }
  .site-loader.is-pop .site-loader__genesis {
    animation: none;
    transform: none;
  }
}