:root {
  --bg-main: #eae7e2;
  --bg-light: #eeebe7;
  --text-primary: #252525;
  --text-secondary: #555451;
  --text-muted: #716f6b;
  --line: rgba(35, 35, 35, .42);
  --line-soft: rgba(35, 35, 35, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--bg-main);
  color: var(--text-primary);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  content: "";
  opacity: .015;
  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='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

.reference-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg-main);
  isolation: isolate;
}

.site-header { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }

.logo {
  position: absolute;
  left: 3.6%;
  top: 1.8%;
  font-size: clamp(17px, 1.92cqi, 28px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
  animation: fade-in .7s both;
}

.desktop-nav {
  position: absolute;
  top: 2.05%;
  right: 3.8%;
  display: flex;
  gap: clamp(28px, 3.6cqi, 54px);
  align-items: center;
  font-size: clamp(9px, .96cqi, 13px);
  font-weight: 400;
  letter-spacing: .035em;
  animation: fade-in .7s .1s both;
}

.desktop-nav a { position: relative; opacity: .9; transition: opacity .3s ease; }
.desktop-nav a::after {
  position: absolute;
  left: 0;
  bottom: -.45em;
  width: 100%;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { opacity: .58; }
.desktop-nav a:hover::after { transform: scaleX(1); }

@media (min-width: 701px) {
  .about-scene .logo { left: 3.825%; top: 1.854%; }
  .about-scene .desktop-nav { left: 66.419%; top: 2.153%; width: 29.33%; right: auto; }

  .shop-scene .logo { left: 3.613%; top: 1.794%; }
  .shop-scene .desktop-nav { left: 65.462%; top: 1.794%; width: 30.287%; right: auto; }

  .serum-scene .logo { left: 3.082%; top: 1.256%; }
  .serum-scene .desktop-nav { left: 68.013%; top: 1.495%; width: 28.693%; right: auto; }

  .textures-scene .logo { left: 2.976%; top: 1.256%; }
  .textures-scene .desktop-nav { left: 67.163%; top: 1.435%; width: 29.756%; right: auto; }

  .reference-scene .desktop-nav {
    justify-content: space-between;
    gap: 0;
  }
}

.menu-trigger { display: none; }

.display {
  margin: 0;
  font-weight: 200;
  line-height: .98;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0;
  font-size: clamp(10px, 1.06cqi, 15px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .12em;
}

.micro,
.micro-title {
  margin: 0;
  font-size: clamp(9px, 1.02cqi, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .035em;
}

.micro-title { font-weight: 400; }
.short-line, .long-line {
  display: block;
  width: 1.65em;
  height: 1px;
  margin-top: 1.25em;
  background: var(--line);
}
.long-line { width: 4em; }

.scene-asset {
  position: absolute;
  z-index: 10;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  animation: texture-enter 1.3s both;
  filter: drop-shadow(0 22px 35px rgba(49, 43, 37, .045));
}

.parallax { translate: none; }

.product {
  position: absolute;
  z-index: 25;
  display: block;
  container-type: inline-size;
  transition: scale .65s var(--ease), rotate .65s var(--ease);
  animation: product-enter 1.2s both;
  filter: drop-shadow(0 22px 35px rgba(49, 43, 37, .065));
}

a.product:hover { scale: 1.008; rotate: .35deg; }
.product > img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; }
.product--serum > img { transform: scaleX(.84); }

.product-label {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 76%;
  color: #363432;
  text-align: center;
  transform: translateX(-50%);
  text-shadow: 0 1px rgba(255,255,255,.2);
  pointer-events: none;
}
.product-label b,
.product-label em,
.product-label small { display: block; font-style: normal; font-weight: 400; }
.product-label b { margin-bottom: 2.15em; font-size: 6.2cqi; letter-spacing: .11em; white-space: nowrap; }
.product-label em { margin-bottom: 1.55em; font-size: 4.8cqi; letter-spacing: .025em; }
.product-label small { margin-top: 1.5em; font-size: 3.05cqi; line-height: 1.4; letter-spacing: .02em; }
.serum-label { top: 44%; }
.cream-label { top: 48%; }
.cream-label b { margin-bottom: 1.8em; }
.cream-label small { margin-top: 1.3em; }
.mist-label { top: 46%; }

.number-copy { position: absolute; z-index: 40; color: var(--text-secondary); }
.number-copy span { display: block; font-size: clamp(11px, 1.27cqi, 17px); line-height: 1.4; }
.number-copy p { margin: .2em 0 0; font-size: clamp(15px, 1.9cqi, 27px); line-height: 1.2; }
.number-copy i { display: block; margin-top: .55em; font-size: .9em; font-style: normal; color: var(--text-primary); }

.diagonal-line {
  position: absolute;
  z-index: 30;
  width: 7%;
  height: 1px;
  background: var(--line);
  rotate: -41deg;
}

/* ABOUT */
.about-eyebrow { position: absolute; left: 5.53%; top: 7.65%; z-index: 40; }
.about-title { position: absolute; left: 7.65%; top: 14.83%; z-index: 30; width: 49%; font-size: 8.18cqi; }
.about-scene > .diagonal-line { left: 46.55%; top: 27.6%; width: 7.2%; }
.about-top-gel { left: 65.5%; top: 4%; width: 42%; height: auto; }
.about-cream { left: 51%; top: 33.8%; width: 65%; height: auto; }
.about-bottom-gel { left: -1.5%; top: 77.4%; width: 52%; height: auto; }
.about-belief { position: absolute; left: 76.1%; top: 26.38%; z-index: 40; width: 16%; }
.about-01 { left: 7.65%; top: 33.67%; width: 23%; }
.about-serum { left: -5.8%; top: 43.65%; width: 39%; height: 34.2%; rotate: -14deg; }
.about-serum .serum-label { top: 49%; }
.about-philosophy { position: absolute; left: 35.28%; top: 48.33%; z-index: 40; width: 27%; color: var(--text-secondary); }
.about-philosophy p { margin: 2.6em 0 0; font-size: clamp(10px, 1.15cqi, 16px); line-height: 1.62; letter-spacing: .035em; }
.about-02 { left: 74.81%; top: 54.73%; width: 19%; }
.about-03 { left: 37.41%; top: 67.76%; width: 21%; }
.about-intention { position: absolute; left: 74.81%; top: 66.87%; z-index: 40; width: 20%; color: var(--text-secondary); }
.about-intention p { margin: 3em 0 0; font-size: clamp(9px, 1.02cqi, 14px); line-height: 1.7; letter-spacing: .035em; }
.about-04 { left: 53.67%; top: 80.38%; width: 31%; }
.about-manifesto { position: absolute; left: 6.48%; top: 93.12%; z-index: 40; width: 20%; }
.circular-type { position: absolute; left: 81.72%; top: 90.49%; z-index: 40; width: 12.86%; rotate: -25deg; overflow: visible; }
.circular-type text { fill: var(--text-muted); font: 400 8px "Inter Tight", sans-serif; letter-spacing: 1.6px; }

/* SHOP */
.shop-eyebrow { position: absolute; left: 4.78%; top: 12.86%; z-index: 40; font-size: 2.05cqi; letter-spacing: .1em; }
.shop-title { position: absolute; left: 4.78%; top: 15.02%; z-index: 30; width: 38%; font-size: 6.62cqi; }
.shop-intro { position: absolute; left: 4.78%; top: 24.82%; z-index: 40; }
.shop-drops { left: 34.963%; top: 8.433%; width: 10.946%; height: 5.443%; }
.shop-serum { left: 40.808%; top: 4.904%; width: 34.431%; height: 41.507%; rotate: 7deg; }
.product-info { position: absolute; z-index: 40; display: flex; flex-direction: column; align-items: flex-start; color: var(--text-secondary); }
.product-info span { font-size: 2cqi; }
.product-info strong { margin-top: .2em; font-size: 3.6cqi; font-weight: 200; line-height: 1; }
.product-info i { width: 1.2em; height: 1px; margin: .8em 0; background: var(--line); }
.product-info b { font-size: 2cqi; font-weight: 200; }
.product-info small { margin-top: 2.2em; font-size: 1.03cqi; line-height: 1.65; letter-spacing: .04em; }
.shop-serum-info { left: 78.32%; top: 16.45%; }
.shop-left-gel { left: -26%; top: 31.5%; width: 75%; height: auto; transform: rotate(2deg); }
.shop-niacinamide { left: 24.973%; top: 38.756%; }
.ingredient-tag { position: absolute; z-index: 40; }
.shop-cream-texture { left: 43%; top: 41.7%; width: 75%; height: auto; transform: rotate(-3deg); }
.shop-cream { left: 29.437%; top: 50.897%; width: 33.262%; height: 18.122%; rotate: -1deg; }
.shop-cream-info { left: 7.86%; top: 53.23%; }
.shop-ceramide { left: 76.94%; top: 57.72%; }
.shop-barrier { left: 24.44%; top: 71.17%; }
.shop-bottom-gel { left: -21%; top: 70%; width: 67%; height: auto; transform: rotate(4deg); }
.shop-calm { left: 42.72%; top: 77.33%; }
.shop-mist-info { left: 59.09%; top: 75.24%; }
.shop-mist { left: 72.901%; top: 56.28%; width: 27.63%; height: 43.959%; rotate: 12deg; }
.shop-mist .mist-label { top: 47%; }
.shop-end-link { position: absolute; left: 6.48%; top: 93.18%; z-index: 60; width: 28%; padding-bottom: 1.25em; border-bottom: 1px solid var(--line-soft); font-size: 1.32cqi; letter-spacing: .11em; }
.shop-end-link span { float: right; font-size: 1.8em; line-height: .5; }

/* SERUM DETAIL */
.serum-title { position: absolute; left: 4.46%; top: 10.29%; z-index: 30; width: 48%; font-size: 6.45cqi; line-height: 1.03; }
.serum-index { position: absolute; left: 78.96%; top: 14.17%; z-index: 40; }
.serum-hero-gel { left: -2%; top: 30%; width: 100%; height: auto; transform: rotate(2deg); }
.serum-hero-product { left: 43.8%; top: -1.15%; width: 44.6%; height: 58.1%; rotate: 7deg; }
.serum-product-copy { position: absolute; left: 4.68%; top: 33.85%; z-index: 40; width: 19%; color: var(--text-secondary); }
.serum-product-copy p { margin: 0 0 .9em; font-size: 1.35cqi; letter-spacing: .03em; }
.serum-product-copy h2 { margin: .15em 0 .8em; font-size: 3cqi; font-weight: 300; line-height: 1; }
.serum-product-copy i { display: block; margin-top: -.5em; font-style: normal; }
.serum-product-copy .serum-volume { margin-top: 3.8em; }
.serum-purchase { position: absolute; left: 82.78%; top: 45.93%; z-index: 60; width: 12.54%; }
.serum-purchase > p { margin: 0 0 .75em; font-size: 2cqi; }
.add-to-bag { width: 100%; padding: 1.1em 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; display: flex; justify-content: space-between; cursor: pointer; font-size: 1.05cqi; letter-spacing: .03em; }
.add-to-bag span { transition: opacity .3s ease, rotate .35s var(--ease); }
.add-to-bag:hover span { opacity: .55; }
.add-to-bag:hover span:last-child { rotate: 45deg; }
.serum-story { position: absolute; left: 4.78%; top: 61.3%; z-index: 40; width: 29%; color: var(--text-secondary); }
.serum-story h2 { margin: 0; font-size: 2.2cqi; font-weight: 300; line-height: 1.12; }
.serum-story > span { display: block; margin: 1.1em 0; font-size: 1.6cqi; }
.serum-story p { margin: 0; font-size: 1cqi; line-height: 1.65; letter-spacing: .04em; }
.serum-central-gel { left: 21%; top: 64%; width: 51%; height: auto; transform: rotate(-3deg); }
.serum-drops { left: 62.487%; top: 59.569%; width: 18.916%; height: 17.105%; }
.serum-pipette { left: 86.291%; top: 69.438%; width: 13.709%; height: 15.371%; rotate: 0deg; }
.serum-fact { position: absolute; z-index: 40; color: var(--text-secondary); font-size: 1.55cqi; line-height: 1.2; }
.serum-fact span, .serum-fact p { margin: 0; font-weight: 300; }
.serum-fact i { display: block; margin-top: .6em; font-size: .7em; font-style: normal; color: var(--text-primary); }
.serum-fact b.short-line { margin: .8em 0 1.2em; }
.serum-fact p { margin-top: .2em; }
.fact-texture { left: 5.42%; top: 80.92%; }
.fact-ph { left: 32.2%; top: 81.64%; }
.fact-drops { left: 69.71%; top: 81.64%; }
.fact-good { left: 5.53%; top: 90.25%; font-size: 1.08cqi; line-height: 1.25; }
.fact-time { left: 32.3%; top: 87.92%; }
.fact-press { left: 61.85%; top: 87.92%; }
.serum-neck { left: 79.384%; top: 84.749%; width: 20.616%; height: 15.73%; overflow: hidden; }
.serum-neck img { width: 100%; height: auto; object-fit: initial; object-position: top; }

/* TEXTURES */
.textures-eyebrow { position: absolute; left: 4.25%; top: 6.52%; z-index: 40; }
.ingredient { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.ingredient-name { position: absolute; margin: 0; font-size: 8.2cqi; font-weight: 200; line-height: .9; letter-spacing: 0; white-space: nowrap; }
.ingredient-facts { position: absolute; z-index: 40; color: var(--text-secondary); }
.ingredient-facts strong { display: block; font-size: 2cqi; font-weight: 300; }
.ingredient-facts i { display: block; width: 2em; height: 1px; margin: .9em 0 2em; background: var(--line); }
.ingredient-facts p { margin: 0; font-size: 1.55cqi; line-height: 1.7; }
.ingredient-side-copy { position: absolute; z-index: 40; margin: 0; font-size: 1.05cqi; font-weight: 400; line-height: 1.55; letter-spacing: .035em; }
.ingredient-niacinamide .ingredient-name { left: 5%; top: 11.84%; font-size: 9.25cqi; }
.ingredient-niacinamide .ingredient-facts { left: 5.31%; top: 17.99%; }
.ingredient-niacinamide .ingredient-side-copy { left: 82.78%; top: 22.73%; }
.ingredient-gel-niacinamide { left: 22%; top: 5.5%; width: 78%; height: 23.5%; transform: rotate(-10deg); }
.ingredient-ceramide .ingredient-name { left: 43.36%; top: 32.83%; font-size: 9.45cqi; }
.ingredient-ceramide .ingredient-facts { left: 79.17%; top: 39.59%; }
.ingredient-ceramide .ingredient-side-copy { left: 5.42%; top: 43.18%; }
.ingredient-cream { left: -.531%; top: 27.7%; width: 74.92%; height: 19.737%; transform: rotate(3deg); }
.ingredient-right-gel { left: 86.716%; top: 41.089%; width: 13.284%; height: 12.859%; }
.ingredient-panthenol .ingredient-name { left: 5.21%; top: 52.39%; font-size: 9.45cqi; }
.ingredient-panthenol .ingredient-facts { left: 5.31%; top: 58.73%; }
.ingredient-panthenol .ingredient-side-copy { left: 82.78%; top: 61.3%; }
.ingredient-gel-panthenol { left: 17%; top: 47.6%; width: 76%; height: 21.6%; transform: rotate(-3deg); }
.ingredient-beta .ingredient-name { left: 25.19%; top: 72.85%; font-size: 9.05cqi; }
.ingredient-beta .ingredient-facts { left: 35.49%; top: 78.89%; }
.ingredient-beta .ingredient-side-copy { left: 27.63%; top: 88.34%; }
.ingredient-dish { left: -10%; top: 72.15%; width: 32%; height: auto; }
.ingredient-bottom-gel { left: 51%; top: 75.8%; width: 52%; height: 17.5%; transform: rotate(7deg); }
.ingredient-bottom-cream { left: -.85%; top: 89.414%; width: 48.034%; height: 10.586%; }
.ingredient-bottom-drops { left: 47.29%; top: 93.002%; width: 17.535%; height: 6.1%; }
.ingredient-serum { left: 61.6%; top: 66.2%; width: 19.7%; height: 24.8%; rotate: 8deg; }
.textures-slogan { position: absolute; left: 82.46%; top: 92.28%; z-index: 40; margin: 0; font-size: 2cqi; line-height: 1.03; }
.textures-slogan .diagonal-line { position: relative; display: block; left: .2em; top: 1.7em; width: 3.2em; }

/* SHARED OVERLAYS */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  align-content: center;
  gap: 1.2rem;
  padding: 24px 20px;
  background: var(--bg-main);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility .3s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu__brand { position: absolute; left: 20px; top: 24px; font-size: 18px; letter-spacing: .16em; }
.mobile-menu__close { position: absolute; right: 20px; top: 22px; border: 0; padding: 0; background: none; font-size: 12px; letter-spacing: .08em; cursor: pointer; }
.mobile-menu nav { display: grid; gap: .28em; }
.mobile-menu nav a { width: max-content; font-size: clamp(40px, 13vw, 64px); font-weight: 300; line-height: 1.05; }
.mobile-menu p { position: absolute; left: 20px; bottom: 24px; margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: .06em; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2100;
  width: min(410px, 100vw);
  height: 100dvh;
  padding: 30px;
  border-left: 1px solid var(--line);
  background: var(--bg-light);
  transform: translateX(100%);
  transition: transform .55s var(--ease);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.cart-drawer__head span { font-size: 12px; letter-spacing: .12em; }
.cart-drawer__head button { border: 0; padding: 0; background: none; cursor: pointer; font-size: 12px; }
.cart-item { display: grid; grid-template-columns: 68px 1fr auto; gap: 18px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
.cart-item img { width: 68px; height: 120px; object-fit: contain; }
.cart-item strong, .cart-item small { display: block; font-weight: 300; }
.cart-item strong { font-size: 18px; }
.cart-item small { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.cart-drawer__empty { margin-top: 28px; font-size: 13px; color: var(--text-muted); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes type-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes product-enter { from { opacity: .92; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes texture-enter { from { opacity: .75; scale: .995; } to { opacity: 1; scale: 1; } }
.entrance-type { animation: type-enter .95s var(--ease) both; }

@media (max-width: 767px) {
  .reference-scene { width: min(100%, 390px); aspect-ratio: auto; overflow: hidden; }
  .desktop-nav { display: none; }
  .logo { left: 20px; top: 24px; font-size: 18px; }
  .menu-trigger { position: absolute; right: 20px; top: 21px; display: block; border: 0; padding: 4px 0; background: none; font-size: 11px; letter-spacing: .08em; cursor: pointer; }
  .eyebrow, .micro, .micro-title { font-size: 11px; }
  .number-copy span { font-size: 13px; }
  .number-copy p { font-size: 18px; }
  .product-label b { font-size: 6.2cqi; }
  .product-label em { font-size: 4.8cqi; }
  .product-label small { font-size: 3.05cqi; }

  .about-scene { height: 1900px; }
  .about-eyebrow { left: 20px; top: 118px; }
  .about-title { left: 20px; top: 185px; width: 360px; font-size: 52px; line-height: .97; }
  .about-scene > .diagonal-line { left: 294px; top: 357px; width: 54px; }
  .about-top-gel { left: 225px; top: 340px; width: 430px; height: auto; }
  .about-belief { left: 232px; top: 467px; width: 145px; font-size: 10px; }
  .about-01 { left: 20px; top: 570px; width: 250px; }
  .about-cream { left: 70px; top: 650px; width: 620px; height: auto; }
  .about-serum { left: -104px; top: 742px; width: 260px; height: 610px; rotate: -12deg; }
  .about-philosophy { left: 176px; top: 804px; width: 200px; }
  .about-philosophy p { margin-top: 24px; font-size: 10px; line-height: 1.6; }
  .about-02 { left: 202px; top: 1125px; width: 180px; }
  .about-03 { left: 20px; top: 1285px; width: 190px; }
  .about-intention { left: 202px; top: 1275px; width: 170px; }
  .about-intention p { margin-top: 26px; font-size: 9px; line-height: 1.65; }
  .about-bottom-gel { left: -95px; top: 1450px; width: 430px; height: auto; }
  .about-04 { left: 192px; top: 1505px; width: 190px; }
  .about-manifesto { left: 20px; top: 1770px; width: 200px; font-size: 9px; }
  .circular-type { left: 270px; top: 1740px; width: 102px; }

  .shop-scene { height: 2400px; }
  .shop-eyebrow { left: 20px; top: 134px; font-size: 16px; }
  .shop-title { left: 20px; top: 176px; width: 350px; font-size: 54px; }
  .shop-intro { left: 20px; top: 310px; font-size: 10px; }
  .shop-drops { left: 142px; top: 96px; width: 100px; }
  .shop-serum { left: 176px; top: 132px; width: 214px; height: 570px; }
  .shop-serum-info { left: 24px; top: 470px; }
  .product-info span { font-size: 15px; }
  .product-info strong { font-size: 30px; }
  .product-info b { font-size: 16px; }
  .product-info small { font-size: 10px; }
  .shop-left-gel { left: -265px; top: 630px; width: 700px; height: auto; }
  .shop-niacinamide { left: 230px; top: 735px; }
  .shop-cream-texture { left: 45px; top: 850px; width: 660px; height: auto; }
  .shop-cream { left: 56px; top: 952px; width: 300px; height: 235px; rotate: -1deg; }
  .shop-cream-info { left: 238px; top: 1210px; }
  .shop-ceramide { left: 24px; top: 1250px; }
  .shop-barrier { left: 250px; top: 1360px; }
  .shop-bottom-gel { left: -195px; top: 1410px; width: 620px; height: auto; }
  .shop-calm { left: 24px; top: 1650px; }
  .shop-mist { left: 198px; top: 1510px; width: 270px; height: 665px; rotate: 10deg; }
  .shop-mist-info { left: 24px; top: 1775px; }
  .shop-end-link { left: 20px; top: 2300px; width: 260px; font-size: 12px; }

  .serum-scene { height: 1940px; }
  .serum-title { left: 20px; top: 142px; width: 300px; font-size: 48px; line-height: 1; }
  .serum-index { left: 322px; top: 174px; }
  .serum-hero-gel { left: -160px; top: 520px; width: 650px; height: auto; }
  .serum-hero-product { left: 232px; top: 170px; width: 174px; height: 560px; rotate: 4deg; }
  .serum-product-copy { left: 20px; top: 555px; width: 150px; }
  .serum-product-copy p { font-size: 11px; }
  .serum-product-copy h2 { font-size: 26px; }
  .serum-purchase { left: 205px; top: 670px; width: 165px; }
  .serum-purchase > p { font-size: 18px; }
  .add-to-bag { font-size: 11px; }
  .serum-story { left: 20px; top: 935px; width: 240px; }
  .serum-story h2 { font-size: 24px; }
  .serum-story p { font-size: 10px; }
  .serum-central-gel { left: 55px; top: 1100px; width: 430px; height: auto; }
  .serum-drops { left: 246px; top: 1020px; width: 150px; }
  .serum-pipette { left: 210px; top: 1132px; width: 190px; rotate: 0deg; }
  .serum-fact { font-size: 14px; }
  .fact-texture { left: 20px; top: 1365px; }
  .fact-ph { left: 180px; top: 1374px; }
  .fact-drops { left: 268px; top: 1450px; }
  .fact-good { left: 20px; top: 1580px; font-size: 10px; }
  .fact-time { left: 154px; top: 1630px; }
  .fact-press { left: 244px; top: 1710px; }
  .serum-neck { left: 270px; top: 1690px; width: 142px; height: 400px; }

  .textures-scene { height: 2500px; }
  .textures-eyebrow { left: 20px; top: 112px; }
  .ingredient-name { font-size: clamp(48px, 13vw, 60px); }
  .ingredient-facts strong { font-size: 18px; }
  .ingredient-facts p { font-size: 13px; }
  .ingredient-side-copy { font-size: 10px; }
  .ingredient-niacinamide .ingredient-name { left: 20px; top: 185px; font-size: 51px; }
  .ingredient-niacinamide .ingredient-facts { left: 20px; top: 255px; }
  .ingredient-niacinamide .ingredient-side-copy { left: 270px; top: 430px; }
  .ingredient-gel-niacinamide { left: 54px; top: 230px; width: 510px; height: 320px; }
  .ingredient-ceramide .ingredient-name { left: 68px; top: 675px; font-size: 56px; }
  .ingredient-ceramide .ingredient-facts { left: 238px; top: 750px; }
  .ingredient-ceramide .ingredient-side-copy { left: 20px; top: 855px; }
  .ingredient-cream { left: -150px; top: 570px; width: 540px; height: 300px; }
  .ingredient-right-gel { left: 320px; top: 790px; width: 150px; }
  .ingredient-panthenol .ingredient-name { left: 18px; top: 1050px; font-size: 52px; }
  .ingredient-panthenol .ingredient-facts { left: 20px; top: 1118px; }
  .ingredient-panthenol .ingredient-side-copy { left: 280px; top: 1300px; }
  .ingredient-gel-panthenol { left: 38px; top: 1110px; width: 510px; height: 320px; }
  .ingredient-beta .ingredient-name { left: 30px; top: 1615px; font-size: 50px; }
  .ingredient-beta .ingredient-facts { left: 170px; top: 1688px; }
  .ingredient-beta .ingredient-side-copy { left: 20px; top: 2050px; }
  .ingredient-dish { left: -100px; top: 1540px; width: 300px; height: auto; }
  .ingredient-bottom-gel { left: 122px; top: 1740px; width: 470px; height: 270px; }
  .ingredient-bottom-cream { left: -120px; top: 2260px; width: 430px; height: 170px; }
  .ingredient-bottom-drops { left: 200px; top: 2220px; width: 150px; }
  .ingredient-serum { left: 220px; top: 1890px; width: 160px; height: 500px; rotate: 7deg; }
  .textures-slogan { left: 265px; top: 2355px; font-size: 19px; }
}

@media (max-width: 389px) {
  .reference-scene {
    width: 390px;
    zoom: calc(100vw / 390px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .parallax { translate: none !important; }
}