:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --ink: #171719;
  --muted: #6d6a63;
  --line: rgba(23, 23, 25, .15);
  --red: #ed6049;
  --cyan: #13a6c2;
  --magenta: #d34c82;
  --yellow: #e8c746;
  --font-display: "Space Grotesk", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-accent: "DM Serif Display", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 76% 46%, rgba(232, 199, 70, .11), transparent 34%),
    radial-gradient(ellipse at 11% 88%, rgba(19, 166, 194, .065), transparent 28%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  content: "";
  opacity: .1;
  pointer-events: none;
}

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

.page-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1420px, calc(100% - 96px));
  min-height: 94px;
  margin: 0 auto;
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: clamp(138px, 15vw, 190px); height: auto; }

.main-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); margin-left: 34px; }
.main-nav a { color: #56544f; font-size: 12px; font-weight: 500; transition: color .2s ease; }
.main-nav a:hover { color: var(--red); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 12px 15px 12px 18px;
  border: 1px solid rgba(23, 23, 25, .22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.header-cta span { font-size: 15px; line-height: 10px; }
.header-cta:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--ink); color: var(--paper); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(36px, 6vw, 98px);
  width: min(1320px, calc(100% - 112px));
  min-height: min(770px, calc(100svh - 95px));
  margin: 0 auto;
  padding: 42px 0 80px;
}

.hero::before {
  position: absolute;
  z-index: 0;
  top: -29vw;
  right: -19vw;
  width: min(62vw, 850px);
  aspect-ratio: 1;
  border: 1px solid rgba(19,166,194,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(211,76,130,.025), 0 0 0 108px rgba(232,199,70,.02);
  content: "";
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; padding: 10px 0 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: #66635d; font-size: 9px; font-weight: 600; letter-spacing: .15em; }
.eyebrow-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(237, 96, 73, .12); }
.eyebrow-separator { color: #bbb5a9; }

h1 {
  display: grid;
  margin: 0;
  font: 600 clamp(60px, 7.2vw, 96px)/.9 var(--font-display);
  letter-spacing: -.092em;
}
h1 > .hero-line { display: block; overflow: hidden; white-space: nowrap; padding: .06em .08em .11em 0; margin-bottom: -.12em; }
h1 > .hero-keyword-line { font-size: clamp(40px, 5.4vw, 78px); letter-spacing: -.075em; }
.hero-line-text { display: block; }
.hero-period { color: var(--ink); }
.hero-script { margin: 0; color: var(--red); font: italic 500 clamp(27px, 3.2vw, 42px)/1.05 var(--font-accent); letter-spacing: -.045em; }
.hero-tagline { margin-top: 19px; }

.hero-description { max-width: 420px; margin: 28px 0 0; color: #56544f; font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 24px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; font-size: 11px; font-weight: 600; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button-primary { padding: 0 19px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 15px; }
.button-primary:hover { transform: translateY(-3px); background: var(--red); border-color: var(--red); }
.button-primary span { display: inline-block; font-size: 17px; transition: transform .26s cubic-bezier(.2,.75,.25,1); }
.button-primary:hover span { transform: rotate(45deg); }
.button-text { gap: 10px; color: #55524c; }
.button-text span { color: var(--red); font-size: 15px; transition: transform .2s ease; }
.button-text:hover span { transform: translateY(3px); }

.hero-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 45px; color: #77736c; font-size: 8px; font-weight: 600; letter-spacing: .13em; }
.hero-proof i { width: 3px; height: 3px; border-radius: 50%; background: var(--red); }

.hero-visual { position: relative; z-index: 1; width: 100%; max-width: 690px; justify-self: end; perspective: 1300px; }
.scene-wrap { position: relative; z-index: 1; transform-style: preserve-3d; }
.press-card-group { --press-settle-x: -130px; --press-settle-scale: .82; position: relative; z-index: 2; width: 100%; transform-style: preserve-3d; transform-origin: center center; transition: rotate .36s cubic-bezier(.2,.75,.25,1), scale .32s cubic-bezier(.2,.75,.25,1); }
.scene-card { position: relative; z-index: 1; top: 10px; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; margin: 0; border: 1px solid rgba(255,255,255,.64); border-radius: 9px; background: #35131a; box-shadow: 0 28px 80px rgba(40, 23, 22, .2), 0 3px 8px rgba(28, 24, 21, .08); }
.packaging-card { position: absolute; z-index: 0; top: -16%; right: 2%; width: 56%; aspect-ratio: 1.56 / 1; overflow: hidden; border: 1px solid rgba(23,23,25,.12); border-radius: 8px; background: #eee5d7; box-shadow: 0 22px 54px rgba(39,31,24,.2); color: #24211e; opacity: 0; pointer-events: none; transform: translate3d(-28px,24px,-55px) rotate(-2deg) scale(.78); transform-origin: 70% center; transition: rotate .36s cubic-bezier(.2,.75,.25,1), scale .32s cubic-bezier(.2,.75,.25,1); }
.packaging-card-topline, .packaging-card-footer { position: absolute; z-index: 1; right: 13px; left: 13px; display: flex; justify-content: space-between; font-size: 6px; font-weight: 700; letter-spacing: .14em; text-shadow: 0 1px 5px rgba(255,253,247,.76); }
.packaging-card-topline { top: 12px; }
.packaging-card-topline span:last-child { color: #8a8174; }
.packaging-card-footer { bottom: 12px; color: #7c7163; }
.packaging-visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-video { position: absolute; width: 100%; height: 100%; inset: 0; display: block; object-fit: cover; object-position: center; transform: scale(1.01); }
.scene-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 8, 12, .32), transparent 27%, transparent 54%, rgba(12, 10, 11, .45)); pointer-events: none; }
.scene-topline { position: absolute; top: 22px; right: 25px; left: 25px; display: flex; justify-content: space-between; color: rgba(255,255,255,.79); font-size: 8px; font-weight: 600; letter-spacing: .19em; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.scene-stamp { position: absolute; top: 55px; left: 27px; display: flex; gap: 3px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(19, 13, 14, .18); backdrop-filter: blur(8px); color: #fff; font: 600 7px/1 var(--font-display); }
.scene-stamp span { display: grid; width: 13px; height: 13px; place-items: center; border-radius: 50%; }
.scene-stamp span:nth-child(1) { background: var(--cyan); }
.scene-stamp span:nth-child(2) { background: var(--magenta); }
.scene-stamp span:nth-child(3) { background: var(--yellow); color: var(--ink); }
.scene-stamp span:nth-child(4) { background: var(--ink); border: 1px solid rgba(255,255,255,.65); }
.scene-caption { position: absolute; right: 27px; bottom: 25px; left: 27px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px 15px; color: white; text-shadow: 0 1px 7px rgba(0,0,0,.42); }
.caption-kicker { grid-column: 1 / -1; color: rgba(255,255,255,.75); font-size: 8px; font-weight: 600; letter-spacing: .17em; }
.caption-title { font: 400 clamp(23px, 2.4vw, 34px)/.98 var(--font-accent); letter-spacing: -.025em; }
.concept-note { align-self: end; padding: 6px 8px; border: 1px solid rgba(255,255,255,.43); border-radius: 999px; color: rgba(255,255,255,.9); font-size: 7px; font-weight: 600; letter-spacing: .13em; }

.floating-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(23,23,25,.1); background: rgba(248, 246, 239, .94); box-shadow: 0 12px 30px rgba(30,25,21,.1); color: var(--ink); font-size: 7px; font-weight: 700; line-height: 1.35; letter-spacing: .11em; backdrop-filter: blur(10px); }
.note-top { top: 19%; right: 14px; z-index: 3; transform: translateZ(54px) rotate(3deg); }
.note-index { color: var(--red); font: 400 22px/.9 var(--font-accent); }
.note-bottom { top: 42%; bottom: auto; left: -30px; transform: translateZ(40px) rotate(-4deg); }
.note-line { width: 18px; height: 1px; background: var(--cyan); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .press-card-group:hover { scale: 1.015; }
  .packaging-card:hover { scale: 1.035; }
}
.scene-spark { position: absolute; z-index: 2; color: var(--yellow); text-shadow: 0 1px 7px rgba(0,0,0,.35); }
.spark-one { top: 28%; left: -12px; font-size: 25px; }
.spark-two { right: 9%; bottom: 18%; color: var(--cyan); font-size: 15px; }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(23,23,25,.13); border-radius: 50%; pointer-events: none; }
.orbit-one { top: -9%; right: -7%; width: 38%; aspect-ratio: 1 / 1; }
.orbit-two { bottom: -12%; left: -8%; width: 29%; aspect-ratio: 1 / 1; border-color: rgba(19,166,194,.27); }
.visual-caption { display: flex; justify-content: space-between; margin: 15px 1px 0; color: #8a857b; font-size: 7px; font-weight: 600; letter-spacing: .17em; }

.scroll-cue { position: absolute; bottom: 30px; left: 0; display: inline-flex; align-items: center; gap: 10px; color: #89847b; font-size: 7px; font-weight: 600; letter-spacing: .19em; }
.scroll-line { position: relative; overflow: hidden; width: 33px; height: 1px; background: rgba(23,23,25,.2); }
.scroll-line::after { position: absolute; inset: 0; background: var(--red); content: ""; transform: translateX(-100%); }

@keyframes logo-lockup-in { from { opacity: 0; transform: translateY(7px) scale(.96); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-reveal { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reveal-rise { from { opacity: 0; transform: translateY(19px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes text-mask-reveal { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-header { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes press-card-enter { from { opacity: 0; transform: translate3d(58px,30px,0) rotateY(-8deg) rotateX(2deg) scale(.94); filter: blur(3px); } to { opacity: 1; transform: translate3d(0,10px,18px) rotateY(-3.5deg) rotateX(1.5deg) scale(1); filter: blur(0); } }
@keyframes press-card-settle { from { transform: translate3d(0,10px,18px) rotateY(-3.5deg) rotateX(1.5deg) rotateZ(0deg) scale(1); } to { transform: translate3d(var(--press-settle-x),78px,24px) rotateY(-2.4deg) rotateX(.8deg) rotateZ(4deg) scale(var(--press-settle-scale)); } }
@keyframes packaging-card-bloom { 0% { opacity: 0; transform: translate3d(-28px,24px,-55px) rotate(-2deg) scale(.78); } 68% { opacity: 1; transform: translate3d(26px,-22px,-22px) rotate(-9.5deg) scale(1.02); } 100% { opacity: 1; transform: translate3d(22px,-18px,-24px) rotate(-9deg) scale(1); } }
@keyframes press-card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes packaging-card-float { 0%, 100% { translate: 0 0; } 50% { translate: 3px -7px; } }
@keyframes note-enter { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes orbit-enter { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
@keyframes spark-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes dot-breathe { 50% { box-shadow: 0 0 0 7px rgba(237, 96, 73, .04); } }
@keyframes float-note { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes scroll-line { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

body.intro-complete .brand-logo { animation: reveal-header .76s .04s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .main-nav a { animation: reveal-header .72s .18s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .main-nav a:nth-child(2) { animation-delay: .29s; }
body.intro-complete .main-nav a:nth-child(3) { animation-delay: .4s; }
body.intro-complete .header-cta { animation: reveal-header .76s .46s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .eyebrow { animation: reveal-rise .78s .12s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete h1 > .hero-line:nth-child(1) .hero-line-text { animation: text-mask-reveal 1.05s .18s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete h1 > .hero-line:nth-child(2) .hero-line-text { animation: text-mask-reveal 1.05s .36s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .hero-tagline .hero-line-text { animation: text-mask-reveal 1.05s .55s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .hero-description { animation: reveal-rise .82s .9s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .hero-actions { animation: reveal-rise .82s 1.06s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .hero-proof { animation: reveal-rise .82s 1.2s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .press-card-group { animation: press-card-enter 1.25s .24s cubic-bezier(.18,.75,.22,1) both; }
.scene-wrap.is-video-ended .press-card-group { animation: press-card-settle 1.05s cubic-bezier(.2,.75,.25,1) both, press-card-float 6s 1.05s ease-in-out infinite; }
.scene-wrap.is-video-ended .packaging-card { pointer-events: auto; animation: packaging-card-bloom 1.2s .04s cubic-bezier(.18,.78,.2,1) both, packaging-card-float 5.4s 1.28s ease-in-out infinite; }
body.intro-complete .visual-caption { animation: reveal-rise .82s 1.1s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .note-top { animation: note-enter .82s .9s both, float-note 8.6s 1.72s ease-in-out infinite; }
body.intro-complete .note-bottom { animation: note-enter .82s 1.06s both, float-note 9.2s 1.88s ease-in-out infinite; }
body.intro-complete .scene-spark { animation: spark-appear .76s .98s both, slow-spin 20s .98s linear infinite; }
body.intro-complete .spark-two { animation-duration: .76s, 16s; animation-delay: 1.14s, 1.14s; animation-direction: normal, reverse; }
body.intro-complete .orbit-one { animation: orbit-enter 1s .3s ease-out both; }
body.intro-complete .orbit-two { animation: orbit-enter 1s .48s ease-out both; }
body.intro-complete .scroll-cue { animation: reveal-rise .82s 1.2s cubic-bezier(.2,.75,.25,1) both; }
body.intro-complete .scroll-line::after { animation: scroll-line 3s 1.2s ease-in-out infinite; }
body.intro-complete .eyebrow-dot { animation: dot-breathe 3s .7s ease-in-out infinite; }

@media (min-width: 1500px) {
  .hero { min-height: min(850px, calc(100svh - 95px)); }
}

@media (max-width: 1050px) {
  .press-card-group { --press-settle-x: -34px; --press-settle-scale: .88; }
  .site-header { width: calc(100% - 64px); min-height: 84px; }
  .hero { width: calc(100% - 80px); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; min-height: min(710px, calc(100svh - 85px)); }
  h1 { font-size: clamp(54px, 7.15vw, 80px); }
  h1 > .hero-keyword-line { font-size: clamp(40px, 5.4vw, 62px); }
  .hero-script { font-size: clamp(27px, 3.2vw, 36px); }
  .floating-note.note-top { right: 12px; }
  .floating-note.note-bottom { left: -12px; }
}

@media (max-width: 600px) {
  .press-card-group { --press-settle-x: -12px; --press-settle-scale: .92; }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 40px); min-height: 74px; }
  .main-nav { display: none; }
  .header-cta { gap: 11px; padding: 10px 12px 10px 14px; font-size: 10px; }
  .hero { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 33px; min-height: auto; padding: 51px 0 82px; }
  .hero-copy { padding-top: 0; }
  .eyebrow { margin-bottom: 23px; font-size: 8px; }
  h1 { font-size: clamp(58px, 13vw, 82px); }
  h1 > .hero-keyword-line { font-size: clamp(38px, 10vw, 72px); }
  .hero-script { font-size: clamp(23px, 7.1vw, 34px); }
  .hero-description { max-width: 370px; margin-top: 23px; font-size: 13px; }
  .hero-actions { margin-top: 22px; }
  .hero-proof { margin-top: 29px; gap: 8px; font-size: 7px; }
  .hero-visual { width: calc(100% - 7px); max-width: none; justify-self: center; }
  .scene-card { width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; }
  .packaging-card { top: -12%; right: 1%; width: 65%; }
  .scene-topline { top: 16px; right: 17px; left: 17px; font-size: 7px; }
  .scene-stamp { top: 42px; left: 17px; }
  .scene-caption { right: 17px; bottom: 17px; left: 17px; }
  .caption-title { font-size: 27px; }
  .concept-note { font-size: 6px; }
  .floating-note { padding: 8px 9px; font-size: 6px; }
  .note-top { right: 10px !important; top: 16%; }
  .note-bottom { left: -8px !important; top: 30%; bottom: auto; }
  .visual-caption { font-size: 6px; }
  .scroll-cue { bottom: 30px; }
}

@media (max-width: 390px) {
  .hero { width: calc(100% - 32px); }
  .site-header { width: calc(100% - 32px); }
  h1 { font-size: 54px; }
  h1 > .hero-keyword-line { font-size: 36px; }
  .hero-script { font-size: 22px; }
  .hero-proof { gap: 6px; letter-spacing: .09em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .brand-logo, .hero-copy, .scene-wrap { animation: none !important; }
  .scene-wrap { transform: none !important; }
}

/* Pre-home brand reveal inspired by the attached reference frame. */
.intro-screen {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #e6e1d7;
  opacity: 1;
  visibility: visible;
  transition: opacity .86s cubic-bezier(.2,.7,.2,1), visibility 0s linear .86s;
}
.intro-screen.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-screen.is-exiting .intro-card { animation: intro-card-exit .78s cubic-bezier(.2,.7,.2,1) both; }
.intro-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: min(86vw, 900px);
  max-height: 74svh;
  aspect-ratio: 1.6 / 1;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 23% 22%, rgba(237, 96, 73, .075), transparent 45%),
    radial-gradient(ellipse at 78% 76%, rgba(19, 166, 194, .075), transparent 48%),
    linear-gradient(128deg, #f7f4ec 0%, #fffdf8 54%, #f1eee6 100%);
  box-shadow: 0 28px 88px rgba(52, 44, 33, .11), inset 0 1px 0 rgba(255,255,255,.84);
  animation: intro-card-arrive .9s cubic-bezier(.18,.72,.2,1) both;
}
.intro-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.36) 48%, transparent 70%);
  content: "";
  transform: translateX(-100%);
  animation: intro-sheen 1.9s .28s ease-out both;
}
.intro-axis {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 5%;
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(89,79,63,.16) 12%, rgba(89,79,63,.16) 88%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  animation: intro-axis-draw 1.15s .28s ease-out forwards;
}
.intro-orbit {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(89, 79, 63, .12);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  animation: intro-orbit-in 1.5s .28s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-orbit-inner { width: 38%; }
.intro-orbit-outer { width: 51%; border-color: rgba(89,79,63,.055); animation-delay: .44s; }
.intro-brand { z-index: 2; display: flex; align-items: center; gap: 14px; }
.intro-brand-mark { display: grid; grid-template: repeat(2, 25px) / repeat(2, 25px); gap: 4px; transform: rotate(-7deg); }
.intro-brand-mark i { display: block; border-radius: 2px; opacity: 0; transform: scale(.42) rotate(-28deg); animation: logo-tile-assemble .78s cubic-bezier(.2,.75,.25,1) forwards; }
.intro-brand-mark i:nth-child(1) { background: #13a6c2; animation-delay: .31s; }
.intro-brand-mark i:nth-child(2) { background: #d34c82; animation-delay: .47s; }
.intro-brand-mark i:nth-child(3) { background: #e8c746; animation-delay: .63s; }
.intro-brand-mark i:nth-child(4) { background: #171719; animation-delay: .79s; }
.intro-brand-type { display: grid; gap: 4px; color: #171719; line-height: 1; }
.intro-brand-type strong { display: block; clip-path: inset(0 100% 0 0); font: 700 33px/.95 Arial, Helvetica, sans-serif; letter-spacing: -.025em; animation: logo-word-reveal .95s .92s cubic-bezier(.2,.75,.25,1) forwards; }
.intro-brand-type small { display: block; overflow: hidden; opacity: 0; font-size: 10px; font-weight: 700; letter-spacing: .38em; transform: translateY(5px); animation: logo-subtitle-reveal .7s 1.45s cubic-bezier(.2,.75,.25,1) forwards; }
@keyframes intro-card-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-card-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-7px) scale(.985); } }
@keyframes intro-sheen { 0% { transform: translateX(-100%); } 85%,100% { transform: translateX(100%); } }
@keyframes intro-axis-draw { to { transform: scaleX(1); } }
@keyframes intro-orbit-in { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.88); } 65% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes logo-tile-assemble { 0% { opacity: 0; transform: scale(.42) rotate(-28deg) translate(9px,8px); } 72% { opacity: 1; transform: scale(1.12) rotate(4deg) translate(0,0); } 100% { opacity: 1; transform: scale(1) rotate(0) translate(0,0); } }
@keyframes logo-word-reveal { 0% { clip-path: inset(0 100% 0 0); opacity: .25; transform: translateX(9px); } 100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); } }
@keyframes logo-subtitle-reveal { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .intro-screen { padding: 18px; }
  .intro-card { width: min(90vw, 540px); border-radius: 13px; }
  .intro-brand { gap: 10px; }
  .intro-brand-mark { grid-template: repeat(2, 20px) / repeat(2, 20px); gap: 3px; }
  .intro-brand-type strong { font-size: 25px; }
  .intro-brand-type small { font-size: 8px; letter-spacing: .34em; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-screen, .intro-screen * { animation: none !important; transition: none !important; }
  .intro-axis { transform: scaleX(1); }
  .intro-orbit { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .intro-brand-mark i { opacity: 1; transform: none; }
  .intro-brand-type strong { clip-path: none; opacity: 1; }
  .intro-brand-type small { opacity: 1; transform: none; }
  body.intro-complete .brand-logo,
  body.intro-complete .main-nav a,
  body.intro-complete .header-cta,
  body.intro-complete .eyebrow,
  body.intro-complete h1 > .hero-line .hero-line-text,
  body.intro-complete .hero-tagline .hero-line-text,
  body.intro-complete .hero-description,
  body.intro-complete .hero-actions,
  body.intro-complete .hero-proof,
  body.intro-complete .press-card-group,
  body.intro-complete .packaging-card,
  body.intro-complete .visual-caption,
  body.intro-complete .note-top,
  body.intro-complete .note-bottom,
  body.intro-complete .scene-spark,
  body.intro-complete .orbit-one,
  body.intro-complete .orbit-two,
  body.intro-complete .scroll-cue,
  body.intro-complete .eyebrow-dot,
  body.intro-complete .scroll-line::after { animation: none !important; }
  body.intro-complete .scene-wrap { transform: none !important; }
  body.intro-complete .press-card-group { transform: none !important; rotate: none !important; filter: none !important; }
  body.intro-complete .note-top,
  body.intro-complete .note-bottom { opacity: 1 !important; translate: none !important; }
  .scene-wrap.is-video-ended .press-card-group { transform: translate3d(var(--press-settle-x),78px,18px) rotateY(-2.4deg) rotateX(.8deg) rotateZ(4deg) scale(var(--press-settle-scale)) !important; }
  .scene-wrap.is-video-ended .packaging-card { opacity: 1 !important; transform: translate3d(22px,-18px,-24px) rotate(-9deg) scale(1); }
}

/* Scroll progress and page-level scroll depth, progressively enhanced with native timelines. */
.page-progress { position: fixed; z-index: 100; top: 0; right: 0; left: 0; display: none; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,var(--cyan),var(--magenta) 35%,var(--yellow) 68%,var(--red)); }
@keyframes page-scroll-progress { to { transform: scaleX(1); } }
@keyframes hero-copy-scroll-away { from { opacity: 1; translate: 0 0; } to { opacity: .42; translate: 0 -24px; } }
@keyframes hero-visual-scroll-away { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: .68; translate: 0 -28px; scale: .975; } }

@supports (animation-timeline: scroll()) {
  .page-progress { display: block; }
  .page-progress span { animation: page-scroll-progress 1ms linear both; animation-timeline: scroll(root block); }
}

@supports (animation-timeline: view()) and (animation-range: cover 0% cover 20%) {
  @media (min-width: 761px) {
    .hero { view-timeline-name: --hero-scroll; view-timeline-axis: block; }
    body.intro-complete .hero-copy { animation: hero-copy-scroll-away 1ms linear both; animation-timeline: --hero-scroll; animation-range: exit 0% exit 62%; }
    body.intro-complete .hero-visual { animation: hero-visual-scroll-away 1ms linear both; animation-timeline: --hero-scroll; animation-range: exit 0% exit 62%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-progress { display: none !important; }
  body.intro-complete .hero-copy,body.intro-complete .hero-visual { animation: none !important; translate: none !important; scale: none !important; opacity: 1 !important; }
}