:root {
  color-scheme: dark;
  --ink: #070605;
  --gold: #c89953;
  --gold-bright: #edc57c;
  --ivory: #f3eee5;
  --muted: #b7aa98;
  --safe-top: max(1rem, env(safe-area-inset-top));
  --safe-bottom: max(1rem, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--ivory);
  overflow-x: hidden;
}

.experience {
  position: relative;
  height: 760svh;
  background: #070605;
}

.experience__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 46%, rgba(151, 96, 35, 0.13), transparent 44%),
    linear-gradient(180deg, #0b0907 0%, #050403 100%);
}

.brand {
  position: absolute;
  z-index: 5;
  top: var(--safe-top);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transform: translateX(-50%);
  color: rgba(237, 197, 124, 0.76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.brand__crown {
  color: var(--gold-bright);
  font-size: 0.9rem;
  line-height: 1;
}

.brand__rule {
  width: 1.4rem;
  height: 1px;
  background: rgba(237, 197, 124, 0.42);
}

.visual-shell {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
}

.experience__canvas,
.experience__fallback {
  width: 100%;
  height: 100%;
}

.experience__canvas {
  display: block;
}

.experience__fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.visual-shell__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 4, 3, 0.74) 0%, transparent 16%, transparent 72%, rgba(5, 4, 3, 0.88) 100%),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.38) 100%);
}

.copy-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.service-copy {
  position: absolute;
  left: clamp(1.35rem, 7vw, 5rem);
  bottom: calc(var(--safe-bottom) + 4.25rem);
  width: min(74vw, 27rem);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 100ms linear, transform 140ms ease-out;
}

.service-copy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-copy__index {
  margin: 0 0 0.42rem;
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.26em;
}

.service-copy h1,
.service-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 10vw, 4.8rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.92;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.72);
}

.service-copy > p:not(.service-copy__index) {
  margin: 0.65rem 0 0;
  color: rgba(243, 238, 229, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 3.8vw, 1.25rem);
  letter-spacing: 0.035em;
  line-height: 1.42;
  text-shadow: 0 2px 14px #000;
}

.service-copy strong {
  display: block;
  margin-top: 0.7rem;
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 3.8vw, 1.3rem);
  font-weight: 400;
}

.service-copy--final {
  bottom: calc(var(--safe-bottom) + 3.35rem);
}

.service-copy--final h2 {
  font-size: clamp(1.9rem, 8.7vw, 4.5rem);
}

.progress {
  position: absolute;
  z-index: 5;
  right: max(1.15rem, env(safe-area-inset-right));
  bottom: calc(var(--safe-bottom) + 0.8rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(243, 238, 229, 0.58);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.progress__track {
  width: min(32vw, 8rem);
  height: 1px;
  overflow: hidden;
  background: rgba(243, 238, 229, 0.2);
}

.progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  right: max(1.15rem, env(safe-area-inset-right));
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(-50%) rotate(90deg) translateX(50%);
  transform-origin: right center;
  color: rgba(243, 238, 229, 0.48);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  transition: opacity 180ms linear;
}

.scroll-cue__line {
  width: 2.5rem;
  height: 1px;
  background: rgba(237, 197, 124, 0.6);
}

.reduced-motion {
  display: none;
}

@media (min-width: 760px) {
  .visual-shell {
    padding-block: 4.2rem 2rem;
  }

  .experience__canvas,
  .experience__fallback {
    width: min(52vw, 540px);
    height: calc(100svh - 6.2rem);
  }

  .visual-shell::before {
    content: "";
    position: absolute;
    width: min(52vw, 540px);
    height: calc(100svh - 6.2rem);
    border-inline: 1px solid rgba(237, 197, 124, 0.08);
    pointer-events: none;
  }

  .service-copy {
    left: clamp(2.5rem, 7vw, 7rem);
    bottom: 12vh;
    width: min(29vw, 25rem);
  }

  .service-copy h1,
  .service-copy h2 {
    font-size: clamp(2.7rem, 5.3vw, 5rem);
  }

  .service-copy > p:not(.service-copy__index) {
    font-size: 1.08rem;
  }

  .progress {
    right: clamp(2.5rem, 6vw, 6rem);
    bottom: 2.25rem;
  }

  .scroll-cue {
    right: clamp(2.5rem, 6vw, 6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience {
    display: none;
  }

  .reduced-motion {
    display: grid;
    gap: 1px;
    background: #19140e;
  }

  .reduced-motion article {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #050403;
  }

  .reduced-motion img {
    display: block;
    width: 100%;
    height: 100svh;
    object-fit: contain;
  }

  .reduced-motion article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.9) 100%);
  }

  .reduced-motion article > div {
    position: absolute;
    z-index: 1;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 2.5rem;
  }

  .reduced-motion span {
    color: var(--gold-bright);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
  }

  .reduced-motion h2 {
    margin: 0.4rem 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 10vw, 5rem);
    font-weight: 400;
  }

  .reduced-motion p {
    margin: 0;
    color: rgba(243, 238, 229, 0.8);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.55;
  }
}