@charset "UTF-8";

:root {
  --ink: #20242a;
  --muted: #6f7882;
  --line: rgba(26, 34, 44, .14);
  --silver: #f5f8f9;
  --white: #ffffff;
  --blue: #83c8ec;
  --pink: #ffb6c6;
  --red: #cf2732;
  --shadow: 0 28px 90px rgba(31, 48, 64, .16);
  --font-ui: "Pretendard", "Inter", system-ui, sans-serif;
  --font-display-ko: "Noto Serif KR", "Pretendard", serif;
  --font-display-en: "Cormorant Garamond", "Marcellus", Georgia, serif;
  --font-brand: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --title-gradient: linear-gradient(100deg, #4586db 0%, #626fe0 40%, #b15edb 70%, #f26198 100%);
  --title-glow: 0 1px 0 rgba(255,255,255,.42), 0 8px 20px rgba(97, 111, 224, .08), 0 8px 22px rgba(242, 97, 152, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: #f7f9fa;
  color: var(--ink);
  font-family: var(--font-ui);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

.site-loader {
  --loader-progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(209, 239, 249, .72), transparent 30vw),
    radial-gradient(circle at 58% 68%, rgba(255, 202, 220, .36), transparent 26vw),
    linear-gradient(135deg, #fbfdfe 0%, #edf6f9 48%, #ffffff 100%);
  color: #142235;
}

.site-loader__curtain {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(241, 249, 252, .94)),
    radial-gradient(circle at 50% 50%, rgba(131, 200, 236, .2), transparent 40%);
  transition: transform 1.08s cubic-bezier(.76, 0, .24, 1);
}

.site-loader__curtain--top {
  top: 0;
  border-bottom: 1px solid rgba(20, 34, 53, .08);
}

.site-loader__curtain--bottom {
  bottom: 0;
  border-top: 1px solid rgba(20, 34, 53, .08);
}

.site-loader__inner {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  transition: opacity .46s ease, transform .46s ease, filter .46s ease;
}

.site-loader__logo {
  position: relative;
  width: min(360px, 76vw);
  overflow: hidden;
}

.site-loader__logo img {
  width: 100%;
  height: auto;
}

.site-loader__logo-base {
  opacity: .16;
  filter: grayscale(1) saturate(0) contrast(.86);
}

.site-loader__logo-fill {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--loader-progress)) 0 0);
  filter:
    drop-shadow(0 10px 34px rgba(64, 118, 220, .18))
    drop-shadow(0 8px 26px rgba(242, 97, 152, .14));
  transition: clip-path .24s cubic-bezier(.22, 1, .36, 1);
}

.site-loader__label {
  color: rgba(20, 34, 53, .58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.site-loader__track {
  width: min(360px, 72vw);
  height: 1px;
  overflow: hidden;
  background: rgba(20, 34, 53, .14);
}

.site-loader__bar {
  display: block;
  width: var(--loader-progress);
  height: 100%;
  background: linear-gradient(90deg, #2b8fd6, #805ce5 48%, #f26198);
  transition: width .24s cubic-bezier(.22, 1, .36, 1);
}

.site-loader__percent {
  color: rgba(20, 34, 53, .44);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

body.is-loaded .site-loader {
  pointer-events: none;
}

body.is-loaded .site-loader__curtain--top {
  transform: translateY(-101%);
}

body.is-loaded .site-loader__curtain--bottom {
  transform: translateY(101%);
}

body.is-loaded .site-loader__inner {
  opacity: 0;
  transform: translateY(-16px) scale(.98);
  filter: blur(8px);
}

body.loader-hidden .site-loader {
  display: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 20% 10%, rgba(181, 225, 245, .42), transparent 34vw),
    radial-gradient(circle at 82% 30%, rgba(255, 197, 214, .34), transparent 28vw),
    linear-gradient(135deg, #fff, #edf4f7 54%, #fff);
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, p, a, span, b, figcaption, button {
  word-break: keep-all;
}

.site-nav,
.header-actions,
.contact-chip,
.rail-nav,
.eyebrow,
.section-kicker,
.btn,
.science-hud span,
.product-panel__meta span,
.texture-copy span {
  overflow-wrap: normal;
}

.page-orbit {
  position: fixed;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
  opacity: .56;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(43, 54, 66, .12) 17.1%, transparent 17.25%),
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(43, 54, 66, .09) 36.1%, transparent 36.22%),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(43, 54, 66, .07) 58.1%, transparent 58.22%);
}

.cursor-light {
  position: fixed;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(153,220,255,.18) 35%, transparent 68%);
  pointer-events: none;
  transform: translate3d(50vw, 50vh, 0);
}

.site-header {
  position: fixed;
  top: 18px;
  left: 22px;
  right: 22px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(20, 27, 34, .11);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(31,48,64,.08);
}

.brand { justify-self: start; }
.brand img, .site-footer img { height: auto; }
.site-nav {
  display: inline-flex;
  gap: clamp(16px, 1.7vw, 30px);
  justify-self: center;
  color: rgba(32,36,42,.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.menu-toggle {
  display: none;
  justify-self: end;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(20, 27, 34, .12);
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
  color: var(--ink);
  padding: 0;
  place-items: center;
  gap: 4px;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform .24s ease, opacity .24s ease;
}
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(10, 18, 28, .24);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: min(88vw, 380px);
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 26px;
  padding: 22px;
  border-left: 1px solid rgba(255,255,255,.38);
  background:
    radial-gradient(circle at 10% 0%, rgba(147, 208, 245, .46), transparent 36%),
    radial-gradient(circle at 100% 16%, rgba(255, 171, 202, .42), transparent 32%),
    rgba(255,255,255,.84);
  backdrop-filter: blur(24px);
  box-shadow: -34px 0 120px rgba(31,48,64,.2);
  transform: translateX(104%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
body.nav-open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.nav-open .mobile-drawer {
  transform: translateX(0);
}
.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.drawer-close {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(20,27,34,.12);
  background: rgba(255,255,255,.58);
  color: rgba(32,36,42,.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mobile-drawer__nav,
.mobile-drawer__contact {
  display: grid;
  align-content: start;
}
.mobile-drawer__nav {
  gap: 6px;
  padding-top: 18px;
}
.mobile-drawer__nav a {
  padding: 16px 0;
  border-bottom: 1px solid rgba(32,36,42,.11);
  color: rgba(32,36,42,.88);
  font-family: var(--font-display-en);
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 600;
  letter-spacing: 0;
}
.mobile-drawer__contact {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mobile-drawer__contact a {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(20,27,34,.12);
  background: rgba(255,255,255,.56);
  color: rgba(32,36,42,.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mobile-drawer__contact a:last-child {
  grid-column: 1 / -1;
  background: linear-gradient(100deg, rgba(19,141,242,.94), rgba(200,85,244,.86) 48%, rgba(255,79,37,.9));
  color: #fff;
  border-color: rgba(255,255,255,.24);
}
.contact-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(20, 27, 34, .12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
    radial-gradient(circle at 20% 0%, rgba(132, 204, 238, .24), transparent 56%);
  color: rgba(32,36,42,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 28px rgba(31,48,64,.06);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.contact-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.78), transparent);
  transform: translateX(-120%) skewX(-16deg);
  transition: transform .58s ease;
}
.contact-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(77, 147, 210, .28);
  color: rgba(24, 34, 46, .96);
}
.contact-chip:hover::after {
  transform: translateX(130%) skewX(-16deg);
}
.contact-chip--contact {
  background:
    linear-gradient(100deg, rgba(19,141,242,.9), rgba(200,85,244,.82) 48%, rgba(255,79,37,.86)),
    #20242a;
  border-color: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: 0 14px 38px rgba(96, 122, 220, .18);
}

.rail-nav {
  position: fixed;
  left: 30px;
  top: 50%;
  z-index: 15;
  transform: translateY(-50%);
  display: grid;
  gap: 22px;
  transition: opacity .24s ease, transform .24s ease;
}
.rail-nav a {
  position: relative;
  padding-left: 20px;
  color: rgba(32,36,42,.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rail-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(32,36,42,.26);
  transform: translateY(-50%) rotate(45deg);
  background: rgba(255,255,255,.8);
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 130px 7vw 80px;
  overflow: hidden;
  isolation: isolate;
}
.hero__film {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.22) contrast(1.16) brightness(1.02);
}
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(246,250,253,.94) 0%, rgba(246,250,253,.72) 31%, rgba(246,250,253,.16) 58%, rgba(8,18,28,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%, rgba(8,18,28,.08));
}
.hero__rings {
  position: absolute;
  inset: 8%;
  z-index: -2;
  border: 1px solid rgba(35, 43, 52, .12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 80px rgba(255,255,255,.5);
}
.hero__copy {
  width: min(780px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
  padding: 7vh 0 0;
  margin: 0 auto;
}
.eyebrow, .section-kicker {
  color: rgba(32,36,42,.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero h1, section h2 {
  font-family: var(--font-display-ko);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

.intro__copy h2,
.season-cinema__copy h2,
.science-panel__copy h2,
.texture-ritual__intro h2,
.editorial-band__copy h2,
.contact h2 {
  background: none;
  color: #24282d;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 18px 46px rgba(32,36,42,.1);
}

.intro__copy h2 .draw-line__inner,
.season-cinema__copy h2 .draw-line__inner,
.science-panel__copy h2 .draw-line__inner,
.texture-ritual__intro h2 .draw-line__inner,
.editorial-band__copy h2 .draw-line__inner,
.contact h2 .draw-line__inner {
  background: none;
  color: inherit;
}
.hero__brand-draw {
  position: relative;
  width: min(960px, 78vw);
  margin-bottom: 6px;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  filter: drop-shadow(0 20px 54px rgba(255,255,255,.62)) drop-shadow(0 22px 58px rgba(66, 82, 100, .14));
}

.hero__brand-draw img {
  width: 100%;
  height: auto;
}

.hero__brand-draw span {
  position: absolute;
  inset: -20% auto -20% 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform: translateX(-160%) skewX(-14deg);
  mix-blend-mode: screen;
}

.hero__therapy {
  color: #2b8fd6;
  font-size: clamp(12px, .95vw, 16px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 780px;
  font-family: var(--font-display-ko);
  font-size: clamp(60px, 7vw, 118px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #102033;
  background: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.56), 0 20px 56px rgba(19,37,55,.12);
}
.hero__lead {
  position: relative;
  max-width: 590px;
  padding-top: 30px;
  color: rgba(16,32,51,.78);
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.72;
  font-weight: 500;
  text-align: center;
  text-wrap: pretty;
}
.hero__lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 54px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(16,32,51,.42);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 4px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 23px;
  border: 1px solid rgba(32,36,42,.24);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.btn--dark { background: #17202b; color: #fff; box-shadow: var(--shadow); }
.btn--ghost { background: rgba(255,255,255,.64); backdrop-filter: blur(14px); }
.hero__systems {
  width: min(680px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  opacity: .9;
}
.hero__systems span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 10px;
  text-align: center;
  border-right: 1px solid rgba(34, 84, 126, .18);
}
.hero__systems span:last-child {
  border-right: 0;
}
.hero__systems b {
  color: #102033;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero__systems small {
  color: rgba(16,32,51,.46);
  font-size: 11px;
  line-height: 1.25;
}
.hero__hud {
  position: absolute;
  bottom: 12vh;
  min-width: 230px;
  padding: 18px 20px;
  border: 1px solid rgba(32,36,42,.12);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(18px);
}
.hero__hud span {
  display: block;
  margin-bottom: 7px;
  color: rgba(32,36,42,.52);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__hud b { font-family: var(--font-display-en); font-weight: 600; font-size: 20px; }
.hero__hud--left { left: 9vw; }
.hero__hud--right { right: 9vw; }
.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(32,36,42,.56);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

section { position: relative; }
.intro, .science, .contact {
  padding: 120px max(7vw, 70px);
}
.section-kicker { margin-bottom: 30px; }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.35fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.intro__copy {
  display: grid;
  gap: 22px;
}
.intro__copy h2, .season-cinema h2, .science h2, .texture-ritual__intro h2, .product-stage h2, .editorial-band h2, .contact h2 {
  font-weight: 500;
  font-size: clamp(42px, 5.2vw, 88px);
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: rgba(26, 31, 37, .9);
}
.intro__copy p:not(.eyebrow), .season-cinema p:not(.eyebrow), .science p:not(.eyebrow), .texture-ritual__intro p:not(.eyebrow), .product-stage p:not(.eyebrow), .contact p:not(.eyebrow) {
  color: rgba(32,36,42,.68);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}
.campaign-wall {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 16px;
  align-items: end;
}
.campaign-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32,36,42,.11);
  background: #fff;
  box-shadow: var(--shadow);
}
.campaign-tile--tall { grid-row: span 2; }
.campaign-tile img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.campaign-tile--tall img { min-height: 720px; object-position: center top; }
.campaign-tile figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  color: #26303a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.season-cinema {
  min-height: 220vh;
  padding: 0 max(7vw, 70px);
}
.season-cinema__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(42px, 5.8vw, 92px);
  align-items: center;
  padding: 110px 0 70px;
}
.season-cinema__copy {
  display: grid;
  justify-items: end;
  gap: 22px;
  text-align: right;
  order: 2;
}
.season-cinema__copy p:not(.eyebrow) {
  max-width: 520px;
}
.season-cards {
  order: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}
.season-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(32,36,42,.12);
  background: #fff;
  box-shadow: 0 22px 70px rgba(31,48,64,.12);
  transform: translateY(var(--y, 0));
}
.season-card img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}
.season-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.34));
}
.season-card span, .season-card b {
  position: absolute;
  z-index: 2;
  left: 18px;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.season-card span {
  bottom: 58px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.season-card b {
  bottom: 24px;
  font-family: var(--font-display-ko);
  font-size: 24px;
}

.science-hero {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 46px;
  align-items: center;
}
.science-hero__media {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(32,36,42,.11);
  background: #fff;
  box-shadow: var(--shadow);
}
.science-hero__media video {
  width: 100%;
  height: 620px;
  object-fit: cover;
}
.science-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 48%, transparent 0 22%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.74)),
    linear-gradient(90deg, rgba(255,255,255,.72), transparent 38%, rgba(255,255,255,.42));
}
.science-pins span {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  padding: 11px 14px;
  border: 1px solid rgba(32,36,42,.2);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.science-hero__copy { display: grid; gap: 22px; }
.formula-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.formula-card {
  min-height: 540px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(32,36,42,.11);
  background: rgba(255,255,255,.68);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(31,48,64,.1);
}
.formula-card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 25px 45px rgba(34,54,72,.18));
}
.formula-card span { color: rgba(32,36,42,.46); font-weight: 900; letter-spacing: .18em; }
.formula-card h3, .product-panel h3 {
  font-family: var(--font-display-en);
  font-weight: 600;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.12;
}

.product-panel__meta h3 {
  background: none;
  color: #17202b;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 18px 46px rgba(31,48,64,.12);
}

.product-panel__meta h3 .draw-line__inner {
  background: none;
  color: inherit;
}
.formula-card--blue { background: linear-gradient(180deg, rgba(211,239,253,.62), rgba(255,255,255,.7)); }
.formula-card--silver { background: linear-gradient(180deg, rgba(242,246,247,.92), rgba(255,255,255,.72)); }
.formula-card--pink { background: linear-gradient(180deg, rgba(255,218,228,.56), rgba(255,255,255,.76)); }

.science {
  padding: 0;
  background: #f7f9fa;
}
.science-panel {
  position: relative;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-items: start;
  overflow: hidden;
  padding: 120px max(9vw, 96px);
  isolation: isolate;
}
.science-panel video,
.science-panel > img {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.science-panel video {
  filter: saturate(1.12) contrast(1.06) brightness(1.05);
}
.science-panel > img {
  filter: saturate(1.12) contrast(1.04) brightness(1.03);
}
.science-panel::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: -1;
  border: 1px solid rgba(32,36,42,.12);
  border-radius: 50%;
  pointer-events: none;
}
.science-panel__veil {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 32%, rgba(255,255,255,.08) 62%, rgba(255,255,255,.02) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 44%, rgba(247,249,250,.18));
}
.science-panel--aqua {
  justify-items: end;
}
.science-panel--aqua .science-panel__copy {
  justify-items: end;
  text-align: right;
}
.science-panel--aqua .science-panel__copy p:not(.eyebrow) {
  margin-left: auto;
}
.science-panel__copy {
  position: relative;
  z-index: 3;
  width: min(720px, 100%);
  display: grid;
  justify-items: start;
  gap: 24px;
  padding: 0;
  text-align: left;
  transform: translateY(var(--science-copy-y, 0));
}
.science-panel__copy h2 {
  position: relative;
  isolation: isolate;
  font-family: var(--font-display-ko);
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.03em;
  max-width: 720px;
  color: #24282d;
  background: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 18px 46px rgba(54,42,26,.12);
  filter: none;
}
.science-panel__copy h2::before {
  content: none;
}
.science-panel__copy p:not(.eyebrow) {
  max-width: 520px;
  color: rgba(32,36,42,.68);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.9;
  text-shadow: 0 1px 14px rgba(255,255,255,.76);
}
.science-hud span {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(32,36,42,.16);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(12px);
  color: rgba(32,36,42,.78);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: 0 16px 42px rgba(31,48,64,.1);
}
.science-panel--gf {
  background: linear-gradient(135deg, #fff9ec, #f5ead0);
}
.science-panel--aqua {
  background: linear-gradient(135deg, #effbff, #d7f0fb);
}
.science-panel--aqua .science-panel__veil {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.04), rgba(255,255,255,.06) 36%, rgba(232,248,255,.2) 78%),
    linear-gradient(180deg, rgba(247,249,250,.18), rgba(255,255,255,.02) 42%, rgba(247,249,250,.22)),
    linear-gradient(90deg, rgba(247,249,250,.22), rgba(255,255,255,.02) 48%, rgba(247,249,250,.22));
}

.product-stage {
  position: relative;
  padding: 0;
  background: #f7f9fa;
}
.product-panels {
  position: relative;
  background: #f7f9fa;
}
.product-panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 120px max(7vw, 70px) 70px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, #f9fbfc, #e6f4f8);
  isolation: isolate;
  clip-path: polygon(0 var(--rise-a, 0%), 24% var(--rise-a, 0%), 24% var(--rise-b, 0%), 50% var(--rise-b, 0%), 50% var(--rise-c, 0%), 76% var(--rise-c, 0%), 76% var(--rise-d, 0%), 100% var(--rise-d, 0%), 100% 100%, 0 100%);
  transform: translateY(var(--rise-y, 0));
  will-change: transform, clip-path;
}
.product-panel:nth-child(1) { --rise-a: 0%; --rise-b: 0%; --rise-c: 0%; --rise-d: 0%; }
.product-panel:nth-child(2) { --rise-a: 8%; --rise-b: 5%; --rise-c: 3%; --rise-d: 0%; }
.product-panel:nth-child(3) { --rise-a: 11%; --rise-b: 8%; --rise-c: 4%; --rise-d: 2%; }
.product-panel:nth-child(4) { --rise-a: 7%; --rise-b: 10%; --rise-c: 6%; --rise-d: 3%; }
.product-panel:nth-child(5) { --rise-a: 10%; --rise-b: 7%; --rise-c: 5%; --rise-d: 1%; }
.product-panel:nth-child(6) { --rise-a: 6%; --rise-b: 9%; --rise-c: 4%; --rise-d: 0%; }
.product-panel::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: -1;
  border: 1px solid rgba(32,36,42,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.product-panel img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 40px 60px rgba(30,45,58,.16));
}
.product-panel__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(247,249,250,.36), rgba(247,249,250,.02) 42%, rgba(247,249,250,.32)),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%, rgba(247,249,250,.42));
}
.product-panel__meta {
  position: relative;
  z-index: 2;
  width: min(500px, 100%);
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(32,36,42,.12);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(31,48,64,.1);
}
.product-panel:nth-child(even) {
  justify-items: end;
}
.product-panel:nth-child(even) .product-panel__meta {
  text-align: right;
  justify-items: end;
}
.product-panel:nth-child(even) .product-panel__meta p {
  margin-left: auto;
}
.product-panel__meta span {
  color: rgba(32,36,42,.52);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.product-panel__meta h3 {
  max-width: 440px;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
  white-space: normal;
  overflow-wrap: normal;
}
.product-panel__meta p {
  max-width: 420px;
  color: rgba(32,36,42,.68);
  font-size: 14px;
  line-height: 1.7;
}
.product-panel--silver { background: linear-gradient(135deg, #f8fbfb, #e7f0ed); }
.product-panel--pink { background: linear-gradient(135deg, #fff7fa, #f5dce5); }
.product-panel--blue { background: linear-gradient(135deg, #eef9ff, #c9ecfb); }
.product-panel--violet { background: linear-gradient(135deg, #f9f6ff, #e5dcf4); }
.product-panel--cream { background: linear-gradient(135deg, #fffdf8, #e8f0ed); }
.product-panel--recon { background: linear-gradient(135deg, #fff8fb, #e8eff7); }
.product-panel--blue .product-panel__shade,
.product-panel--pink .product-panel__shade {
  background:
    linear-gradient(90deg, rgba(247,249,250,.42), rgba(255,255,255,.04) 46%, rgba(247,249,250,.38)),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 44%, rgba(247,249,250,.34));
}

/* Double Hyper: video-led hydration scene. Product, petals, light and copy stay independent for scroll choreography. */
.product-panel--double-hyper {
  --rose-ink: #9a4563;
  --rose-deep: #6f2946;
  display: block;
  background: #fff8fa;
  color: var(--rose-deep);
  z-index: 4;
  /* This scene is a self-contained canvas: do not let the preceding panel cut into its frame. */
  clip-path: none;
}
.double-hyper__film,
.double-hyper__veil,
.double-hyper__particle-field,
.double-hyper__petals,
.double-hyper__product-wrap,
.double-hyper__hud,
.double-hyper__copy {
  position: absolute;
}
.double-hyper__film {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) brightness(1.06);
  z-index: -4;
}
.double-hyper__veil {
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.02) 0 21%, rgba(255,255,255,.24) 62%, rgba(255,246,250,.72) 100%),
    linear-gradient(90deg, rgba(255,249,251,.74), transparent 32%, transparent 68%, rgba(255,249,251,.6));
}
.double-hyper__product-wrap {
  z-index: 2;
  left: 50%;
  /* GSAP owns the Y transform during scroll, so the resting position uses top rather than translateY. */
  top: 14%;
  width: min(25vw, 368px);
  aspect-ratio: .56;
  transform: translate(-50%, -50%);
  transform-origin: 50% 68%;
  will-change: transform;
}
.double-hyper__product {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(157,54,91,.2));
  will-change: transform;
}
.double-hyper__halo {
  position: absolute;
  z-index: -1;
  inset: 9% -31% 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 4%, rgba(255,200,218,.34) 31%, transparent 69%);
  filter: blur(10px);
  opacity: .82;
  transform: scale(.86);
}
.double-hyper__shadow {
  position: absolute;
  z-index: -1;
  bottom: 2%;
  left: 50%;
  width: 70%;
  height: 5%;
  border-radius: 50%;
  background: rgba(127,48,75,.32);
  filter: blur(12px);
  transform: translateX(-50%);
}
.double-hyper__petals {
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.double-hyper__petal {
  position: absolute;
  display: block;
  width: clamp(64px, 9vw, 148px);
  aspect-ratio: 1;
  background-image: url("assets/products/double-hyper/rose-petals.png");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  opacity: .9;
  filter: drop-shadow(0 12px 14px rgba(164,71,105,.12));
  will-change: transform;
}
.double-hyper__petal--a { left: 14%; top: 25%; background-position: 0 0; transform: rotate(-24deg); }
.double-hyper__petal--b { right: 13%; top: 20%; background-position: 100% 0; transform: rotate(18deg); }
.double-hyper__petal--c { left: 27%; bottom: 17%; background-position: 0 100%; transform: rotate(34deg) scale(.76); }
.double-hyper__petal--d { right: 23%; bottom: 16%; background-position: 100% 100%; transform: rotate(-18deg) scale(.88); }
.double-hyper__particle-field {
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.double-hyper__particle-field span {
  position: absolute;
  width: clamp(5px, .55vw, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,202,219,.75) 45%, rgba(236,129,167,.1) 72%);
  box-shadow: 0 0 16px rgba(255,194,216,.75);
  animation: doubleParticle 5.2s var(--ease-in-out) infinite alternate;
}
.double-hyper__particle-field span:nth-child(1) { left: 18%; top: 51%; animation-delay: -.8s; }
.double-hyper__particle-field span:nth-child(2) { left: 31%; top: 34%; animation-delay: -2.4s; transform: scale(.7); }
.double-hyper__particle-field span:nth-child(3) { left: 41%; top: 69%; animation-delay: -1.2s; transform: scale(.55); }
.double-hyper__particle-field span:nth-child(4) { right: 29%; top: 39%; animation-delay: -3.5s; transform: scale(.8); }
.double-hyper__particle-field span:nth-child(5) { right: 15%; top: 55%; animation-delay: -.4s; transform: scale(.6); }
.double-hyper__particle-field span:nth-child(6) { right: 39%; bottom: 16%; animation-delay: -2.1s; transform: scale(.85); }
.double-hyper__particle-field span:nth-child(7) { left: 8%; bottom: 21%; animation-delay: -1.6s; transform: scale(.55); }
.double-hyper__particle-field span:nth-child(8) { right: 8%; bottom: 27%; animation-delay: -3.1s; transform: scale(.72); }
.double-hyper__hud { inset: 0; z-index: 4; pointer-events: none; }
.double-hyper__hud-line {
  position: absolute;
  color: rgba(137,50,82,.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}
.double-hyper__hud-line::after {
  content: "";
  display: inline-block;
  width: clamp(36px, 6vw, 92px);
  height: 1px;
  margin-left: 9px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(168,68,103,.58), transparent);
}
.double-hyper__hud-line--rose { left: 7.4%; top: 31%; }
.double-hyper__hud-line--water { right: 7.4%; bottom: 29%; }
.double-hyper__copy {
  z-index: 5;
  left: max(6vw, 56px);
  bottom: clamp(46px, 11vh, 140px);
  width: min(360px, 31vw);
  display: grid;
  gap: 13px;
}
@media (min-width: 761px) {
  .double-hyper__product-wrap {
    top: 22%;
    width: min(23vw, 368px);
  }
  .double-hyper__copy {
    top: 51%;
    bottom: auto;
    width: min(470px, 33vw);
  }
  .double-hyper__copy h3 { font-size: clamp(52px, 4.5vw, 76px); }
}
.double-hyper__eyebrow,
.double-hyper__ingredient,
.double-hyper__scroll-note {
  margin: 0;
  color: rgba(137,50,82,.74);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.double-hyper__copy h3 {
  margin: 0;
  color: var(--rose-deep);
  font-family: var(--font-display-en);
  font-size: clamp(42px, 5.1vw, 82px);
  font-weight: 600;
  line-height: .83;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.double-hyper__lead {
  max-width: 310px;
  margin: 0;
  color: rgba(104,39,65,.76);
  font-size: 14px;
  line-height: 1.65;
}
.double-hyper__ingredient { letter-spacing: .1em; line-height: 1.65; }
.double-hyper__ingredient b { display: block; margin-top: 2px; color: var(--rose-ink); font-size: 11px; }
.double-hyper__scroll-note { margin-top: 6px; opacity: .7; }
.is-double-hyper-active .rail-nav {
  opacity: 0;
  pointer-events: none;
  transform: translate(-18px, -50%);
}
.is-double-scroll-active .rail-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-18px, -50%);
}
.is-double-hyper-active .product-panel--double-hyper {
  /* Hold the complete composition above the next product until this scene has fully passed. */
  z-index: 20;
}
@keyframes doubleParticle {
  from { transform: translate3d(0, 16px, 0) scale(var(--scale, 1)); opacity: .25; }
  to { transform: translate3d(10px, -16px, 0) scale(var(--scale, 1)); opacity: .95; }
}

/* Double Hyper is an authored product film: scroll controls its frames rather than composing separate floating assets. */
.product-panel--double-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: visible;
  padding: 0;
  background: #f8eef1;
  clip-path: none;
}
.double-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #f8eef1;
}
.double-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f8eef1;
}
.double-scroll__copy {
  position: absolute;
  z-index: 3;
  left: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(480px, 35vw);
  margin: 0;
  color: #6d2846;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(255, 248, 250, .48);
}
.double-scroll__eyebrow,
.double-scroll__ingredient {
  margin: 0;
  font-size: clamp(9px, .7vw, 11px);
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.35;
}
.double-scroll__eyebrow::after {
  display: inline-block;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  margin: 0 0 .25em .8em;
  background: currentColor;
  content: "";
  opacity: .5;
  vertical-align: middle;
}
.double-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #67223e;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}
.double-scroll__lead {
  max-width: 31ch;
  margin: 0;
  color: rgba(86, 55, 67, .82);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
}
.double-scroll__ingredient {
  margin-top: clamp(20px, 2.1vw, 30px);
  color: rgba(109, 40, 70, .8);
}
.double-scroll__ingredient b {
  display: block;
  margin-top: 5px;
  color: #a93c67;
  font-size: .9em;
}

/* Azure Cyan uses the same one-shot film structure with a distinct water-blue text system. */
.product-panel--cyan-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #dff7fb;
  clip-path: none;
}
.cyan-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #dff7fb;
}
.cyan-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #dff7fb;
}
.cyan-scroll__copy {
  position: absolute;
  z-index: 3;
  left: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(480px, 35vw);
  margin: 0;
  color: #0c5771;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(242, 253, 255, .6);
}
.product-film__eyebrow,
.product-film__ingredient {
  margin: 0;
  font-size: clamp(9px, .7vw, 11px);
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.35;
}
.product-film__eyebrow::after {
  display: inline-block;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  margin: 0 0 .25em .8em;
  background: currentColor;
  content: "";
  opacity: .5;
  vertical-align: middle;
}
.cyan-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #075873;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}
.product-film__lead {
  max-width: 31ch;
  margin: 0;
  color: rgba(16, 71, 88, .84);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  text-wrap: pretty;
}
.product-film__ingredient {
  margin-top: clamp(20px, 2.1vw, 30px);
  color: rgba(7, 88, 115, .82);
}
.product-film__ingredient b {
  display: block;
  margin-top: 5px;
  color: #008eb5;
  font-size: .9em;
}

/* Shared translucent copy layer: each product retains its own color system and side. */
.product-film__copy {
  padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.5vw, 40px);
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1));
  box-shadow: 0 18px 55px rgba(32, 68, 84, .13), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

/* Film panels own the complete viewport; the stepped static-panel mask must never crop a video edge. */
.product-panel[data-film-section] {
  position: relative !important;
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  clip-path: inset(0) !important;
  transform: none !important;
  isolation: isolate;
}
.product-panel[data-film-section]::before { display: none; }
.product-panel[data-film-section] .product-film__frame,
.product-panel[data-film-section] .product-film__video {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

/* Keep the hero statement as its authored two-line composition on desktop. */
@media (min-width: 761px) {
  .hero__copy { width: min(980px, 100%); }
  .hero h1 { max-width: none; font-size: clamp(58px, 6.3vw, 106px); }
  .hero h1 .draw-line__inner { white-space: nowrap; }
}

/* About: an editorial image field with the section title crossing above the moving imagery. */
.intro {
  overflow: hidden;
  padding-top: clamp(96px, 11vw, 160px);
  padding-bottom: clamp(100px, 12vw, 180px);
}
.intro__grid {
  position: relative;
  display: block;
  min-height: min(126svh, 1160px);
  margin-top: 16px;
}
.intro__title {
  position: absolute;
  z-index: 5;
  top: 42%;
  right: max(4.5vw, 48px);
  left: max(4.5vw, 48px);
  pointer-events: none;
}
.intro__title .eyebrow { margin: 0 0 18px; }
.intro__title h2 {
  max-width: none;
  margin: 0;
  color: #20242a;
  font-family: var(--font-display-ko);
  font-size: clamp(54px, 5.8vw, 104px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 18px 42px rgba(24, 35, 48, .09);
}
@media (min-width: 981px) {
  .intro__title h2 { white-space: nowrap; }
}
.intro__copy {
  position: absolute;
  z-index: 4;
  bottom: 3%;
  left: 0;
  width: min(410px, 32%);
  gap: 14px;
  padding: 18px 20px;
  border-left: 1px solid rgba(33, 42, 50, .22);
  background: linear-gradient(90deg, rgba(250, 253, 254, .78), rgba(250, 253, 254, .04));
}
.intro__copy p { margin: 0; }
.campaign-wall {
  position: absolute;
  inset: 0;
  display: block;
}
.campaign-tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(26, 45, 60, .16);
}
.campaign-tile--tall {
  top: 5%;
  left: 3%;
  width: min(31%, 420px);
  height: 62%;
}
.campaign-tile--blue {
  top: 2%;
  right: 5%;
  width: min(28%, 390px);
  height: 40%;
}
.campaign-tile--dual {
  right: 21%;
  bottom: 2%;
  width: min(33%, 480px);
  height: 34%;
}
.campaign-tile--tall img,
.campaign-tile img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.campaign-tile figcaption { display: none; }
.intro-mobile-interlude { display: none; }

/* Preserve every campaign image at its supplied portrait ratio—never crop campaign photography for the layout. */
.intro__grid { min-height: min(148svh, 1380px); }
.campaign-tile--tall {
  top: 4%;
  left: 4%;
  width: min(25%, 410px);
  height: auto;
  aspect-ratio: 852 / 1846;
}
.campaign-tile--blue {
  top: 2%;
  right: 5%;
  width: min(21%, 350px);
  height: auto;
  aspect-ratio: 941 / 1672;
}
.campaign-tile--dual {
  right: 27%;
  bottom: 2%;
  width: min(23%, 390px);
  height: auto;
  aspect-ratio: 1024 / 1536;
}
.campaign-tile--tall img,
.campaign-tile img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 980px) {
  .intro__grid { display: grid; min-height: auto; gap: 30px; }
  .intro__title, .intro__copy, .campaign-wall, .campaign-tile {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
  }
  .intro__title { order: 1; pointer-events: auto; }
  .intro__copy { order: 2; padding: 0; border-left: 0; background: none; }
  .campaign-wall { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .campaign-tile--tall { grid-row: span 2; }
  .campaign-tile--tall img,
  .campaign-tile img { height: auto; min-height: 0; object-fit: contain; }
  .intro__title h2 { font-size: clamp(44px, 8vw, 78px); white-space: normal; }
}

@media (max-width: 760px) {
  .hero h1 .draw-line__inner { white-space: normal; }
  .intro {
    padding-top: 72px;
    padding-bottom: 88px;
  }
  .intro__grid { display: block; margin-top: 8px; }
  .intro__title,
  .intro__copy { display: none; }
  .campaign-wall {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .campaign-tile,
  .campaign-tile--tall,
  .campaign-tile--blue,
  .campaign-tile--dual {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    box-shadow: 0 18px 44px rgba(26, 45, 60, .13);
  }
  .campaign-tile--tall {
    width: 82%;
    margin-left: auto;
  }
  .campaign-tile--blue {
    width: 68%;
    margin-right: auto;
  }
  .campaign-tile--dual {
    width: 78%;
    margin-left: auto;
  }
  .campaign-tile--tall img,
  .campaign-tile img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
  .intro-mobile-interlude {
    display: block;
    width: min(90%, 440px);
    margin: 6px auto 2px 0;
    padding: 6px 0;
  }
  .intro-mobile-interlude .eyebrow { margin: 0 0 13px; }
  .intro-mobile-interlude h2 {
    margin: 0;
    color: #20242a;
    font-family: var(--font-display-ko);
    font-size: clamp(38px, 10.4vw, 52px);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: 1.08;
    text-wrap: balance;
  }
  .intro-mobile-interlude__body {
    margin: 22px 0 0;
    color: rgba(40, 48, 56, .76);
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
  }
  @supports (animation-timeline: view()) {
    .campaign-tile,
    .intro-mobile-interlude {
      animation: mobile-about-rise .8s both linear;
      animation-timeline: view();
      animation-range: entry 10% cover 42%;
    }
    .campaign-tile--blue { animation-range: entry 8% cover 38%; }
    .campaign-tile--dual { animation-range: entry 12% cover 44%; }
  }
}

@keyframes mobile-about-rise {
  from { opacity: 0; transform: translate3d(0, 52px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Texture Ritual repeated the product-film story, so it is removed from the live flow. */
.texture-ritual[hidden] { display: none !important; }
a[href="#texture"] { display: none !important; }

/* About gallery: independent editorial frames rise through the text layer. */
@media (min-width: 761px) {
  .intro__grid {
    min-height: min(164svh, 1540px);
  }
  .campaign-tile {
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 28px 80px rgba(27, 45, 59, .16);
  }
  .campaign-tile--tall {
    top: 7%;
    left: 6%;
    width: min(25%, 410px);
  }
  .campaign-tile--blue {
    top: 4%;
    right: 7%;
    width: min(21%, 350px);
  }
  .campaign-tile--dual {
    right: 25%;
    bottom: 5%;
    width: min(23%, 390px);
  }
  .intro__title {
    top: 45%;
    right: 12%;
    left: 12%;
    text-align: center;
  }
  .intro__title .eyebrow { margin-bottom: 16px; }
  .intro__title h2 {
    max-width: 100%;
    font-size: clamp(48px, 5.3vw, 92px);
    line-height: 1.05;
  }
  .intro__copy {
    right: 0;
    bottom: 8%;
    left: 0;
    width: min(620px, 46%);
    margin: 0 auto;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
  }
}

/* Seasons: walk through four square, gallery-mounted seasonal portraits. */
.season-cinema {
  position: relative;
  min-height: 510vh;
  padding: 0;
  isolation: isolate;
}
.season-cinema__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  overflow: hidden;
  padding: 0;
  perspective: 1400px;
}
.season-cinema__sticky::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(248, 252, 254, .08) 0 18%, rgba(248, 252, 254, .34) 49%, rgba(248, 252, 254, .82) 100%);
}
.season-cinema__copy {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(660px, 74vw);
  margin: 0;
  color: #20242a;
  text-align: center;
  pointer-events: none;
}
.season-cinema__copy .eyebrow { margin: 0; }
.season-cinema__copy h2 {
  margin: 0;
  font-size: clamp(52px, 6.2vw, 102px);
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .72);
}
.season-cinema__copy p:not(.eyebrow) {
  max-width: 50ch;
  margin: 0;
  color: rgba(41, 49, 57, .76);
  text-wrap: pretty;
}
.season-cards {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  order: initial;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.season-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 700px);
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, .88);
  background: #fff;
  box-shadow: 0 32px 88px rgba(22, 38, 51, .22);
  opacity: 0;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}
.season-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.season-card::after {
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .42));
}
.season-card span,
.season-card b { left: clamp(16px, 2vw, 28px); }
.season-card span { bottom: clamp(54px, 6vw, 70px); }
.season-card b { bottom: clamp(20px, 2.4vw, 30px); font-size: clamp(24px, 2.4vw, 36px); }

@media (max-width: 760px) {
  .season-cinema { min-height: 460vh; }
  .season-cinema__copy { width: min(88vw, 430px); gap: 14px; }
  .season-cinema__copy h2 { font-size: clamp(42px, 12vw, 58px); }
  .season-cinema__copy p:not(.eyebrow) { font-size: 14px; line-height: 1.65; }
  .season-card { width: min(82vw, 440px); border-width: 5px; }
  .season-card span { bottom: 50px; font-size: 9px; }
  .season-card b { bottom: 18px; font-size: 24px; }
}

/* Scroll-controlled editorial carousel: sharp photography, restrained copy, no soft-focus treatment. */
.season-cinema__sticky::before {
  background: linear-gradient(180deg, rgba(248, 252, 254, .9) 0%, rgba(248, 252, 254, .36) 32%, rgba(248, 252, 254, .1) 58%, rgba(248, 252, 254, .68) 100%);
}
.season-cinema__copy {
  position: absolute;
  top: clamp(76px, 11svh, 150px);
  left: 50%;
  width: min(600px, 76vw);
  transform: translateX(-50%);
  gap: 14px;
}
.season-cinema__copy h2 {
  font-size: clamp(42px, 4.6vw, 76px);
  line-height: 1.08;
}
.season-cinema__copy p:not(.eyebrow) {
  max-width: 44ch;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
}
.season-card {
  top: 57%;
  width: min(49vw, 640px);
  border: 6px solid rgba(255, 255, 255, .94);
  box-shadow: 0 24px 72px rgba(22, 38, 51, .2);
}
.season-card img { filter: none !important; }

@media (max-width: 760px) {
  .season-cinema__copy {
    top: max(72px, 9svh);
    width: min(88vw, 430px);
  }
  .season-cinema__copy h2 { font-size: clamp(36px, 10.3vw, 52px); }
  .season-card {
    top: 58%;
    width: min(80vw, 430px);
    border-width: 4px;
  }
}

/* Actual Swiper editorial launch: one sharp campaign spread per season. */
.season-launch {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #eaf1f4;
  color: #fff;
}
.season-swiper,
.season-swiper .swiper-wrapper,
.season-launch__slide {
  width: 100%;
  height: 100%;
}
.season-launch__slide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #dce8eb;
}
.season-launch__slide > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 1.35s cubic-bezier(.2,.75,.2,1);
}
.season-launch__slide.swiper-slide-active > img { transform: scale(1); }
.season-launch__veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 27, 34, .56), rgba(15, 27, 34, .14) 52%, transparent 78%),
    linear-gradient(0deg, rgba(15, 27, 34, .42), transparent 48%);
}
.season-launch__copy {
  position: absolute;
  z-index: 2;
  bottom: clamp(92px, 12vh, 154px);
  left: clamp(30px, 8vw, 142px);
  width: min(550px, 42vw);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .24);
}
.season-launch__eyebrow {
  margin: 0 0 18px;
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.35;
}
.season-launch__copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(76px, 8vw, 142px);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .74;
}
.season-launch__copy h2 em {
  display: block;
  font-style: italic;
  font-weight: 500;
}
.season-launch__copy > p:last-child {
  max-width: 34ch;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  word-break: keep-all;
}
.season-launch__copy > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.2,1);
}
.season-launch__slide.swiper-slide-active .season-launch__copy > * {
  opacity: 1;
  transform: translateY(0);
}
.season-launch__slide.swiper-slide-active .season-launch__eyebrow { transition-delay: .25s; }
.season-launch__slide.swiper-slide-active .season-launch__copy h2 { transition-delay: .36s; }
.season-launch__slide.swiper-slide-active .season-launch__copy > p:last-child { transition-delay: .5s; }
.season-launch__index {
  position: absolute;
  z-index: 2;
  top: clamp(28px, 5vw, 72px);
  right: clamp(28px, 5vw, 72px);
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}
.season-launch__controls {
  position: absolute;
  z-index: 5;
  right: clamp(28px, 5vw, 72px);
  bottom: clamp(28px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.season-launch__controls button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 50%;
  background: rgba(17, 27, 31, .12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.season-launch__controls button:hover { background: rgba(17, 27, 31, .34); transform: translateY(-2px); }
.season-launch__pagination {
  min-width: 54px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
}
.season-launch__pagination .swiper-pagination-current { font-size: 14px; }

@media (max-width: 760px) {
  .season-launch { min-height: 100svh; }
  .season-launch__slide > img { object-position: 57% center; }
  .season-launch__veil {
    background:
      linear-gradient(90deg, rgba(13, 24, 31, .54), rgba(13, 24, 31, .05) 96%),
      linear-gradient(0deg, rgba(13, 24, 31, .58), transparent 60%);
  }
  .season-launch__copy {
    right: 24px;
    bottom: 104px;
    left: 24px;
    width: auto;
  }
  .season-launch__eyebrow { margin-bottom: 13px; font-size: 9px; letter-spacing: .16em; }
  .season-launch__copy h2 { font-size: clamp(62px, 18vw, 88px); }
  .season-launch__copy > p:last-child { margin-top: 20px; font-size: 13px; }
  .season-launch__index { top: 26px; right: 24px; font-size: 9px; }
  .season-launch__controls { right: 24px; bottom: 28px; gap: 10px; }
  .season-launch__controls button { width: 38px; height: 38px; }
}

/* Seasonal gallery layout: editorial context on the left, looping Swiper campaign on the right. */
.season-launch {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(42px, 6vw, 110px);
  height: auto;
  min-height: min(78svh, 940px);
  padding: clamp(84px, 9vw, 148px) max(6vw, 56px);
  background: #fafcfd;
  color: #20242a;
}
.season-launch__intro {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 22px;
}
.season-launch__intro .eyebrow { margin: 0; }
.season-launch__intro h2 {
  margin: 0;
  color: #20242a;
  font-family: var(--font-display-ko);
  font-size: clamp(44px, 4.3vw, 76px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.08;
  text-wrap: balance;
}
.season-launch__intro > p:last-child {
  max-width: 34ch;
  margin: 0;
  color: rgba(38, 46, 55, .72);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.75;
  word-break: keep-all;
}
.season-swiper {
  width: min(60vw, 960px);
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
  box-shadow: 0 30px 80px rgba(28, 47, 61, .18);
}
.season-swiper .swiper-wrapper,
.season-swiper .season-launch__slide { height: 100%; }
.season-launch__slide > img { object-position: center; }
.season-launch__veil {
  background:
    linear-gradient(90deg, rgba(13, 25, 31, .62), rgba(13, 25, 31, .12) 60%, transparent 84%),
    linear-gradient(0deg, rgba(13, 25, 31, .32), transparent 55%);
}
.season-launch__copy {
  bottom: clamp(54px, 5vw, 82px);
  left: clamp(28px, 4vw, 70px);
  width: min(380px, 48%);
}
.season-launch__eyebrow {
  margin-bottom: 13px;
  font-size: clamp(9px, .65vw, 11px);
}
.season-launch__copy h2 {
  font-family: var(--font-display-ko);
  font-size: clamp(48px, 5.5vw, 88px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .85;
}
.season-launch__copy h2 em { font-family: var(--font-display-ko); }
.season-launch__copy > p:last-child {
  margin-top: 18px;
  font-size: clamp(12px, .85vw, 14px);
  line-height: 1.6;
}
.season-launch__index {
  top: 22px;
  right: 24px;
  font-size: 9px;
}
.season-launch__controls {
  right: 24px;
  bottom: 22px;
  gap: 10px;
}
.season-launch__controls button { width: 36px; height: 36px; font-size: 17px; }
.season-launch__pagination { min-width: 44px; font-size: 9px; }

@media (max-width: 900px) {
  .season-launch {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: 0;
    padding: 84px 24px 52px;
  }
  .season-launch__intro { max-width: 560px; }
  .season-launch__intro h2 { font-size: clamp(38px, 9vw, 64px); }
  .season-swiper { width: 100%; max-width: 760px; justify-self: center; }
}

@media (max-width: 560px) {
  .season-launch { padding: 74px 18px 36px; }
  .season-launch__intro { gap: 15px; }
  .season-launch__intro > p:last-child { font-size: 14px; }
  .season-swiper { aspect-ratio: 4 / 5; }
  .season-launch__slide > img { object-position: 57% center; }
  .season-launch__copy { right: 22px; bottom: 76px; left: 22px; width: auto; }
  .season-launch__copy h2 { font-size: clamp(48px, 15vw, 72px); }
  .season-launch__copy > p:last-child { max-width: 27ch; font-size: 12px; }
  .season-launch__controls { right: 18px; bottom: 18px; }
}

/* Keep slide typography legible over every campaign image. */
.season-launch__copy,
.season-launch__copy h2,
.season-launch__copy h2 em,
.season-launch__copy > p:last-child,
.season-launch__eyebrow { color: #fff; }
.season-launch__copy h2 {
  text-shadow: 0 3px 22px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .38);
}
.season-launch__eyebrow,
.season-launch__copy > p:last-child {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .54);
}

/* Campaign imagery lives in the primary About gallery; the duplicate strip is removed. */
.editorial-band[hidden] { display: none !important; }
@media (min-width: 761px) {
  .campaign-tile--fitness {
    top: 57%;
    left: 5%;
    width: min(19%, 310px);
    height: auto;
  }
  .campaign-tile--fitness img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}
@media (max-width: 760px) {
  .campaign-tile--fitness {
    width: 62%;
    margin-right: auto;
  }
  .campaign-tile--fitness img { height: auto; }
}
.cyan-scroll__copy {
  right: clamp(34px, 7vw, 128px);
  left: auto;
  text-align: right;
}
.cyan-scroll__copy .product-film__eyebrow::after { display: none; }
.cyan-scroll__copy .product-film__eyebrow::before,
.molecular-scroll__copy .product-film__eyebrow::before {
  display: inline-block;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  margin: 0 .8em .25em 0;
  background: currentColor;
  content: "";
  opacity: .5;
  vertical-align: middle;
}
.product-panel--molecular-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #f1edff;
  clip-path: none;
}
.molecular-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #f1edff;
}
.molecular-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f1edff;
}
.molecular-scroll__copy {
  position: absolute;
  z-index: 3;
  right: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(480px, 35vw);
  margin: 0;
  color: #4d3a79;
  text-align: right;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(253, 252, 255, .7);
}
.molecular-scroll__copy .product-film__eyebrow::after { display: none; }
.molecular-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #46306f;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}
.molecular-scroll__copy .product-film__lead { color: rgba(55, 45, 85, .84); }
.molecular-scroll__copy .product-film__ingredient { color: rgba(70, 48, 111, .82); }
.molecular-scroll__copy .product-film__ingredient b { color: #7755b6; }
.molecular-scroll__copy {
  right: auto;
  left: clamp(34px, 7vw, 128px);
  text-align: left;
}
.molecular-scroll__copy .product-film__eyebrow::before { display: none; }
.molecular-scroll__copy .product-film__eyebrow::after { display: inline-block; }

.product-panel--micro-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #f4f0ff;
  clip-path: none;
}
.micro-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #f4f0ff;
}
.micro-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f4f0ff;
}
.micro-scroll__copy {
  position: absolute;
  z-index: 3;
  right: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(480px, 35vw);
  margin: 0;
  color: #574779;
  text-align: right;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(255, 255, 255, .75);
}
.micro-scroll__copy .product-film__eyebrow::after { display: none; }
.micro-scroll__copy .product-film__eyebrow::before {
  display: inline-block;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  margin: 0 .8em .25em 0;
  background: currentColor;
  content: "";
  opacity: .5;
  vertical-align: middle;
}
.micro-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #4e3d72;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}
.micro-scroll__copy .product-film__lead { color: rgba(59, 46, 86, .84); }
.micro-scroll__copy .product-film__ingredient { color: rgba(78, 61, 114, .82); }
.micro-scroll__copy .product-film__ingredient b { color: #8f6bcb; }

/* Silver Clay opens the routine as a bright mineral-cleansing film. */
.product-panel--silver-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #e9e7e2;
  clip-path: none;
}
.product-panel--silver-scroll > .product-film__frame > .product-panel__shade,
.product-panel--silver-scroll > .product-film__frame > .product-panel__meta { display: none; }
.silver-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #e9e7e2;
}
.silver-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #e9e7e2;
}
.silver-scroll__copy {
  position: absolute;
  z-index: 3;
  left: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(500px, 37vw);
  margin: 0;
  color: #575753;
  text-align: left;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(255, 255, 255, .8);
}
.silver-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #3f413e;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(44px, 4.1vw, 70px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .86;
  white-space: nowrap;
}
.silver-scroll__copy .product-film__lead { color: rgba(55, 57, 53, .82); }
.silver-scroll__copy .product-film__ingredient { color: rgba(63, 65, 62, .8); }
.silver-scroll__copy .product-film__ingredient b { color: #77766e; }

/* Chroma Recon closes the product sequence with a soft, restorative cream film. */
.product-panel--recon-scroll {
  position: relative;
  z-index: 8;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #f4eee9;
  clip-path: none;
}
.product-panel--recon-scroll > .product-film__frame > .product-panel__shade,
.product-panel--recon-scroll > .product-film__frame > .product-panel__meta { display: none; }
.recon-scroll__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #f4eee9;
}
.recon-scroll__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f4eee9;
}
.recon-scroll__copy {
  position: absolute;
  z-index: 3;
  right: clamp(34px, 7vw, 128px);
  bottom: clamp(44px, 10vh, 132px);
  width: min(500px, 37vw);
  margin: 0;
  color: #69574d;
  text-align: right;
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(255, 252, 249, .85);
}
.recon-scroll__copy .product-film__eyebrow::after { display: none; }
.recon-scroll__copy .product-film__eyebrow::before {
  display: inline-block;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  margin: 0 .8em .25em 0;
  background: currentColor;
  content: "";
  opacity: .5;
  vertical-align: middle;
}
.recon-scroll__copy h3 {
  margin: clamp(12px, 1.5vw, 22px) 0 12px;
  color: #5b473e;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .84;
  white-space: nowrap;
}
.recon-scroll__copy .product-film__lead { color: rgba(82, 64, 55, .82); }
.recon-scroll__copy .product-film__ingredient { color: rgba(91, 71, 62, .8); }
.recon-scroll__copy .product-film__ingredient b { color: #a07664; }

.texture-ritual {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(147, 123, 255, .22), transparent 28vw),
    radial-gradient(circle at 84% 22%, rgba(255, 156, 190, .18), transparent 24vw),
    linear-gradient(180deg, #f5f8fb 0%, #eef5f8 44%, #f8f5fb 100%);
  color: #f8fcff;
  isolation: isolate;
}
.texture-ritual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 12vw 12vw;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.texture-ritual__intro {
  min-height: 86svh;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 130px max(7vw, 70px) 80px;
}
.texture-ritual__intro .eyebrow {
  color: rgba(32,36,42,.58);
}
.texture-ritual__intro h2 {
  max-width: 1080px;
  font-family: var(--font-display-ko);
  font-size: clamp(54px, 8.5vw, 148px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: 0;
  text-wrap: balance;
}
.texture-ritual__intro p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(32,36,42,.68);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.8;
}
.texture-scene {
  position: relative;
  min-height: 112svh;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(320px, .84fr);
  align-items: center;
  column-gap: clamp(38px, 7vw, 118px);
  padding: 10vh max(7vw, 70px);
  overflow: hidden;
  background: var(--scene-bg);
  color: var(--scene-ink);
}
.texture-scene + .texture-scene {
  border-top: 1px solid var(--scene-line);
}
.texture-scene__word {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(1320px, 88vw);
  max-width: 88vw;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-display-en);
  font-size: clamp(72px, 10.2vw, 172px);
  font-weight: 600;
  line-height: .88;
  letter-spacing: 0;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  mix-blend-mode: normal;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 24px 80px rgba(34, 20, 62, .28),
    0 0 42px rgba(255,255,255,.22);
  transform: translate(-50%, -52%);
}
.texture-scene:nth-of-type(odd) .texture-scene__word {
  left: 50%;
  right: auto;
}
.texture-strip {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: min(46vw, 660px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 120px rgba(0,0,0,.28);
  transform: translateX(var(--texture-x, 0));
}
.texture-strip--right {
  grid-column: 2;
  justify-self: end;
}
.texture-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
}
.texture-swatch {
  position: absolute;
  z-index: 3;
  left: clamp(42px, 9vw, 132px);
  bottom: clamp(74px, 12vh, 132px);
  width: clamp(120px, 14vw, 250px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  box-shadow:
    inset 0 0 36px rgba(255,255,255,.34),
    0 24px 90px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.texture-strip--right + .texture-swatch {
  right: clamp(42px, 9vw, 132px);
  left: auto;
}
.texture-swatch::before,
.texture-swatch::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 42% 58% 48% 52%;
  background: rgba(255,255,255,.36);
  mix-blend-mode: screen;
  animation: textureDrift 8s ease-in-out infinite alternate;
}
.texture-swatch::after {
  inset: 22%;
  animation-duration: 6.4s;
  animation-direction: alternate-reverse;
}
.texture-swatch--clay {
  background:
    repeating-linear-gradient(38deg, rgba(255,255,255,.28) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 36% 28%, #fff, #cfd8dc 35%, #aeb8bf 74%);
}
.texture-swatch--infusion {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.96), transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(255,154,192,.82), transparent 35%),
    linear-gradient(135deg, #fde4ef, #d9eef7);
}
.texture-swatch--cyan {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), transparent 17%),
    radial-gradient(circle at 70% 58%, rgba(90,215,255,.72), transparent 38%),
    linear-gradient(135deg, #88d8f4, #186f9c);
}
.texture-swatch--booster {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), transparent 18%),
    linear-gradient(135deg, #e7d8ff, #f3c7de 56%, #bfe8fa);
}
.texture-swatch--objet {
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), transparent 16%),
    radial-gradient(circle at 62% 62%, rgba(141,226,240,.62), transparent 24%),
    radial-gradient(circle at 44% 70%, rgba(255,182,198,.72), transparent 20%),
    linear-gradient(135deg, #fff, #d8edf1);
}
.texture-swatch--recon {
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,.96), transparent 18%),
    linear-gradient(135deg, #fff6fb, #dfeeff 46%, #f6bfd2);
}
.texture-copy {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: min(440px, 100%);
  margin: 0 0 clamp(12px, 5vh, 58px);
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--scene-copy-line);
  background: var(--scene-copy-bg);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 86px rgba(0,0,0,.22);
}
.texture-strip--right ~ .texture-copy {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  margin: 0 0 clamp(12px, 5vh, 58px);
}
.texture-copy span {
  color: var(--scene-label);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.texture-copy h3 {
  color: var(--scene-heading);
  font-family: var(--font-display-en);
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}
.texture-copy p {
  color: var(--scene-copy-text);
  font-size: 14px;
  line-height: 1.75;
}

.texture-scene--silver {
  --scene-bg:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.82), transparent 28vw),
    radial-gradient(circle at 78% 18%, rgba(177,190,199,.5), transparent 26vw),
    linear-gradient(135deg, #f4f6f7 0%, #d9dee2 48%, #aeb7bd 100%);
  --scene-ink: #1f252b;
  --scene-word: rgba(67, 75, 82, .34);
  --scene-word-shadow: 0 24px 72px rgba(255,255,255,.18);
  --scene-line: rgba(54,64,72,.16);
  --scene-copy-bg: rgba(255,255,255,.58);
  --scene-copy-line: rgba(54,64,72,.16);
  --scene-label: rgba(32,36,42,.52);
  --scene-heading: #20242a;
  --scene-copy-text: rgba(32,36,42,.7);
}
.texture-scene--pink {
  --scene-bg:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.78), transparent 28vw),
    radial-gradient(circle at 78% 28%, rgba(255,121,170,.5), transparent 28vw),
    linear-gradient(135deg, #fff3f8 0%, #ffc3d6 48%, #e88aae 100%);
  --scene-ink: #3c2430;
  --scene-word: rgba(129, 38, 78, .3);
  --scene-word-shadow: 0 24px 72px rgba(255,255,255,.18);
  --scene-line: rgba(136,45,82,.14);
  --scene-copy-bg: rgba(255,255,255,.56);
  --scene-copy-line: rgba(136,45,82,.16);
  --scene-label: rgba(90,31,58,.58);
  --scene-heading: #34222d;
  --scene-copy-text: rgba(52,34,45,.72);
}
.texture-scene--blue {
  --scene-bg:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,.68), transparent 25vw),
    radial-gradient(circle at 76% 26%, rgba(85,206,246,.54), transparent 30vw),
    linear-gradient(135deg, #e7f9ff 0%, #7cd9f5 46%, #157ba9 100%);
  --scene-ink: #062f43;
  --scene-word: rgba(8, 69, 102, .34);
  --scene-word-shadow: 0 24px 72px rgba(255,255,255,.14);
  --scene-line: rgba(9,74,108,.16);
  --scene-copy-bg: rgba(244,253,255,.58);
  --scene-copy-line: rgba(9,74,108,.16);
  --scene-label: rgba(7,52,76,.58);
  --scene-heading: #07344c;
  --scene-copy-text: rgba(7,52,76,.72);
}
.texture-scene--violet {
  --scene-bg:
    radial-gradient(circle at 18% 22%, rgba(206,181,255,.34), transparent 28vw),
    radial-gradient(circle at 84% 24%, rgba(119,72,206,.54), transparent 30vw),
    linear-gradient(135deg, #201242 0%, #4b2587 50%, #7d4bd1 100%);
  --scene-ink: #f8f5ff;
  --scene-word: rgba(255,255,255,.34);
  --scene-word-shadow: 0 24px 82px rgba(16,8,38,.28);
  --scene-line: rgba(255,255,255,.13);
  --scene-copy-bg: rgba(30, 16, 64, .54);
  --scene-copy-line: rgba(255,255,255,.18);
  --scene-label: rgba(248,245,255,.64);
  --scene-heading: #fff;
  --scene-copy-text: rgba(248,245,255,.76);
}
.texture-scene--cream {
  --scene-bg:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.76), transparent 28vw),
    radial-gradient(circle at 78% 28%, rgba(196,145,255,.42), transparent 30vw),
    linear-gradient(135deg, #fbf7ff 0%, #decaff 50%, #b992f2 100%);
  --scene-ink: #33244a;
  --scene-word: rgba(101, 58, 157, .32);
  --scene-word-shadow: 0 24px 72px rgba(255,255,255,.16);
  --scene-line: rgba(86,55,136,.15);
  --scene-copy-bg: rgba(255,255,255,.58);
  --scene-copy-line: rgba(86,55,136,.16);
  --scene-label: rgba(64,42,98,.58);
  --scene-heading: #2f2544;
  --scene-copy-text: rgba(47,37,68,.72);
}
.texture-scene--recon {
  --scene-bg:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.78), transparent 28vw),
    radial-gradient(circle at 78% 28%, rgba(239,170,138,.42), transparent 28vw),
    linear-gradient(135deg, #fff7f1 0%, #f2c2a8 48%, #d99a82 100%);
  --scene-ink: #3f2a22;
  --scene-word: rgba(135, 76, 56, .3);
  --scene-word-shadow: 0 24px 72px rgba(255,255,255,.18);
  --scene-line: rgba(132,76,57,.15);
  --scene-copy-bg: rgba(255,255,255,.58);
  --scene-copy-line: rgba(132,76,57,.16);
  --scene-label: rgba(88,55,43,.58);
  --scene-heading: #34251f;
  --scene-copy-text: rgba(52,37,31,.72);
}

@keyframes textureDrift {
  from { transform: translate3d(-5%, -2%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(5%, 3%, 0) rotate(24deg) scale(1.08); }
}

.editorial-band {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 90px 0;
}
.editorial-band__track {
  width: max-content;
  display: flex;
  gap: 18px;
  transform: translateX(var(--band-x, 0));
}
.editorial-band__track img {
  width: min(44vw, 520px);
  aspect-ratio: 9 / 14;
  object-fit: cover;
  border: 1px solid rgba(32,36,42,.12);
  box-shadow: var(--shadow);
}
.editorial-band__copy {
  position: absolute;
  inset: auto max(7vw, 70px) 12vh auto;
  max-width: 720px;
  padding: 28px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(32,36,42,.12);
}

.contact {
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
}
.contact__inner {
  max-width: 960px;
  display: grid;
  justify-items: center;
  gap: 22px;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 34px max(7vw, 70px);
  border-top: 1px solid rgba(32,36,42,.12);
  color: rgba(32,36,42,.58);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
}

.draw-line {
  display: block;
  overflow: hidden;
}

.draw-line__inner {
  display: inline-block;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  filter: blur(0);
  transform-origin: left center;
  will-change: transform, opacity, clip-path, filter;
}

.draw-line__inner::after {
  content: "";
  display: inline-block;
  width: .16em;
}

.hero h1,
.hero h1 .draw-line__inner,
.intro__copy h2,
.intro__copy h2 .draw-line__inner,
.season-cinema__copy h2,
.season-cinema__copy h2 .draw-line__inner,
.science-panel__copy h2,
.science-panel__copy h2 .draw-line__inner,
.texture-ritual__intro h2,
.texture-ritual__intro h2 .draw-line__inner,
.editorial-band__copy h2,
.editorial-band__copy h2 .draw-line__inner,
.contact h2,
.contact h2 .draw-line__inner {
  background-image: none !important;
  color: #24282d !important;
  -webkit-text-fill-color: #24282d;
}

.hero h1,
.intro__copy h2,
.season-cinema__copy h2,
.science-panel__copy h2,
.texture-ritual__intro h2,
.editorial-band__copy h2,
.contact h2 {
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
  paint-order: stroke fill;
  filter: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 18px 46px rgba(32,36,42,.1);
}

.hero h1 .draw-line__inner,
.intro__copy h2 .draw-line__inner,
.season-cinema__copy h2 .draw-line__inner,
.science-panel__copy h2 .draw-line__inner,
.texture-ritual__intro h2 .draw-line__inner,
.editorial-band__copy h2 .draw-line__inner,
.contact h2 .draw-line__inner {
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
  paint-order: stroke fill;
}

.science-panel__copy h2,
.science-panel__copy h2 .draw-line__inner {
  background-image: none !important;
  color: #24282d !important;
  -webkit-text-fill-color: #24282d;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.56), 0 18px 46px rgba(54,42,26,.12);
  filter: none;
}

.science-panel__copy .eyebrow {
  color: #b48328;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.science-panel--aqua .science-panel__copy .eyebrow {
  color: #207bd1;
}

.hero h1,
.hero h1 .draw-line__inner {
  color: #102033 !important;
  -webkit-text-fill-color: #102033;
}

.product-panel__meta h3,
.product-panel__meta h3 .draw-line__inner {
  background-image: none;
  color: #17202b !important;
  -webkit-text-fill-color: #17202b;
}

.image-reveal {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, transform;
}

.image-reveal img,
.image-reveal video {
  will-change: transform, filter;
}

.section-wipe {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(226,243,248,.9), rgba(255,255,255,.86));
  transform-origin: left center;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 14px;
  }
  .brand { justify-self: start; }
  .header-actions { display: none; }
  .menu-toggle { display: grid; }
  .site-nav { display: none; }
  .rail-nav { display: none; }
  .hero__hud { display: none; }
  .hero__copy {
    width: min(560px, 100%);
    gap: 18px;
    padding-top: 6vh;
  }
  .hero__systems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    margin-top: 28px;
  }
  .hero__systems span:nth-child(2) {
    border-right: 0;
  }
  .intro, .science, .contact { padding: 90px 22px; }
  .science { padding: 0; }
  .intro__grid, .season-cinema__sticky, .science-hero {
    grid-template-columns: 1fr;
  }
  .campaign-wall, .formula-grid { grid-template-columns: 1fr; }
  .season-cinema { min-height: auto; padding: 0 22px 70px; }
  .season-cinema__sticky { position: relative; min-height: auto; padding-top: 86px; }
  .season-cinema__copy {
    order: 1;
    justify-items: start;
    text-align: left;
  }
  .season-cards {
    order: 2;
  }
  .season-cards { grid-template-columns: 1fr 1fr; }
  .season-card, .season-card img { min-height: 420px; }
  .science-panel {
    position: relative;
    min-height: 108svh;
    align-items: center;
    padding: 110px 22px 64px;
  }
  .science-panel__copy {
    width: min(640px, 100%);
    gap: 14px;
  }
  .science-panel--aqua,
  .science-panel--aqua .science-panel__copy {
    justify-items: start;
    text-align: left;
  }
  .science-panel--aqua .science-panel__copy p:not(.eyebrow) {
    margin-left: 0;
  }
  .science-panel__copy p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.65;
  }
  .product-panel { position: relative; min-height: 86svh; padding: 96px 22px 34px; }
  .product-panel__meta { width: 100%; }
  .product-panel:nth-child(even),
  .product-panel:nth-child(even) .product-panel__meta {
    justify-items: start;
    text-align: left;
  }
  .product-panel:nth-child(even) .product-panel__meta p {
    margin-left: 0;
  }
  .texture-ritual__intro {
    min-height: 72svh;
    padding: 104px 22px 50px;
  }
  .texture-scene {
    min-height: 96svh;
    grid-template-columns: 1fr;
    padding: 84px 22px 52px;
  }
  .texture-scene__word,
  .texture-scene:nth-of-type(odd) .texture-scene__word {
    top: 56px;
    left: 22px;
    right: auto;
    width: calc(100% - 44px);
    max-width: calc(100% - 44px);
    font-size: clamp(38px, 10vw, 58px);
    line-height: 1.02;
    text-align: left;
    transform: none;
  }
  .texture-strip,
  .texture-strip--right {
    grid-column: 1;
    width: min(100%, 560px);
    aspect-ratio: 1 / 1;
    justify-self: stretch;
  }
  .texture-swatch,
  .texture-strip--right + .texture-swatch {
    right: 22px;
    left: auto;
    bottom: 280px;
    width: clamp(120px, 34vw, 190px);
  }
  .texture-copy,
  .texture-strip--right ~ .texture-copy {
    grid-column: 1;
    justify-self: stretch;
    text-align: left;
    width: 100%;
    margin: 18px 0 0;
  }
  .editorial-band__copy { position: relative; inset: auto; margin: 24px 22px 0; }
  .editorial-band__track img { width: 72vw; }
}

@media (max-width: 640px) {
  .site-header { left: 12px; right: 12px; top: 12px; padding: 0 12px; }
  .brand img { width: 148px; }
  .site-header {
    padding: 10px;
    gap: 10px;
  }
  .hero { padding: 116px 20px 70px; }
  .hero__brand-draw { width: min(92vw, 620px); }
  .hero h1 {
    font-size: clamp(46px, 13vw, 64px);
    line-height: 1.22;
  }
  .hero__therapy {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .14em;
  }
  .hero__lead {
    max-width: 330px;
    font-size: 16px;
    line-height: 1.72;
  }
  .hero__systems {
    width: 100%;
  }
  .hero__systems b {
    font-size: 11px;
  }
  .hero__systems small {
    font-size: 10px;
  }
  .intro__copy h2,
  .season-cinema__copy h2,
  .editorial-band__copy h2,
  .contact h2 {
    font-size: clamp(36px, 10.5vw, 54px);
    line-height: 1.16;
  }
  .btn { width: 100%; }
  .campaign-tile--tall img, .campaign-tile img { min-height: 420px; }
  .season-cards { grid-template-columns: 1fr; }
  .science-hero__media, .science-hero__media video { min-height: 460px; height: 460px; }
  .science-panel__copy h2 {
    font-size: clamp(42px, 12vw, 62px);
    line-height: 1.18;
  }
  .texture-ritual__intro h2 {
    font-size: clamp(40px, 12vw, 64px);
    line-height: 1.08;
  }
  .texture-ritual__intro p:not(.eyebrow),
  .texture-copy p {
    font-size: 13px;
  }
  .texture-copy h3 {
    font-size: clamp(23px, 7vw, 32px);
  }
  .texture-strip img {
    object-position: center;
  }
  .science-hud span {
    min-height: 28px;
    padding: 0 9px;
    font-size: 8px;
    letter-spacing: .1em;
    background: rgba(255,255,255,.5);
  }
  .science-hud span:nth-child(n+4) { display: none; }
  .science-hud span:nth-child(1) { --x: 8% !important; --y: 25% !important; }
  .science-hud span:nth-child(2) { --x: 48% !important; --y: 20% !important; }
  .science-hud span:nth-child(3) { --x: 58% !important; --y: 44% !important; }
  .science-panel__veil {
    background:
      linear-gradient(180deg, rgba(247,249,250,.08), transparent 28%, rgba(247,249,250,.78)),
      linear-gradient(90deg, rgba(247,249,250,.24), rgba(255,255,255,.02) 52%, rgba(247,249,250,.24));
  }
  .product-panel img { object-position: center; transform: scale(1.03); }
  .product-panel__shade {
    background:
      linear-gradient(180deg, rgba(247,249,250,.2), transparent 28%, rgba(247,249,250,.86)),
      linear-gradient(90deg, rgba(247,249,250,.44), transparent 44%, rgba(247,249,250,.4));
  }
  .product-panel__meta {
    width: 100%;
    gap: 8px;
    padding: 14px;
  }
  .product-panel__meta h3 {
    font-size: clamp(21px, 6.6vw, 28px);
    line-height: 1.18;
    max-width: 100%;
  }
  .product-panel__meta p {
    font-size: 12.5px;
    line-height: 1.5;
  }
  .draw-line {
    padding-bottom: .08em;
  }
  .site-footer { flex-direction: column; padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: smooth; }
  [data-reveal] { opacity: 1; transform: none; }
  .double-hyper__particle-field span { animation: none; }
  .double-scroll__copy { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .product-panel--double-scroll,
  .product-panel--cyan-scroll,
  .product-panel--molecular-scroll,
  .product-panel--micro-scroll,
  .product-panel--silver-scroll,
  .product-panel--recon-scroll {
    position: relative;
    min-height: 100svh;
    padding: 0;
  }
  .double-scroll__sticky,
  .cyan-scroll__sticky,
  .molecular-scroll__sticky,
  .micro-scroll__sticky,
  .silver-scroll__sticky,
  .recon-scroll__sticky { height: 100svh; }
  .double-scroll__copy,
  .cyan-scroll__copy,
  .molecular-scroll__copy,
  .micro-scroll__copy,
  .silver-scroll__copy,
  .recon-scroll__copy {
    right: 18px;
    bottom: clamp(24px, 5svh, 40px);
    left: 18px;
    width: auto;
  }
  .double-scroll__copy h3,
  .cyan-scroll__copy h3,
  .molecular-scroll__copy h3,
  .micro-scroll__copy h3,
  .silver-scroll__copy h3,
  .recon-scroll__copy h3 { font-size: clamp(35px, 10.2vw, 44px); white-space: normal; }
  .product-film__copy {
    padding: 16px 18px 17px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
    box-shadow: 0 12px 34px rgba(32, 68, 84, .1), inset 0 1px 0 rgba(255, 255, 255, .32);
    -webkit-backdrop-filter: blur(12px) saturate(1.04);
    backdrop-filter: blur(12px) saturate(1.04);
  }
  .product-film__eyebrow,
  .product-film__ingredient { font-size: 8.5px; letter-spacing: .13em; }
  .product-film__copy h3 { margin: 9px 0 10px; line-height: .9; }
  .double-scroll__lead,
  .product-film__lead { max-width: 31ch; font-size: 13px; line-height: 1.56; }
  .product-film__ingredient { margin-top: 13px; }
  .product-film__ingredient b { display: inline; margin: 0 0 0 .45em; }
  .cyan-scroll__copy,
  .molecular-scroll__copy,
  .micro-scroll__copy,
  .recon-scroll__copy { text-align: left; }
  .cyan-scroll__copy .product-film__eyebrow::before,
  .molecular-scroll__copy .product-film__eyebrow::before,
  .micro-scroll__copy .product-film__eyebrow::before,
  .recon-scroll__copy .product-film__eyebrow::before { display: none; }
  .cyan-scroll__copy .product-film__eyebrow::after,
  .molecular-scroll__copy .product-film__eyebrow::after,
  .micro-scroll__copy .product-film__eyebrow::after,
  .recon-scroll__copy .product-film__eyebrow::after { display: inline-block; }
  .product-panel--double-hyper {
    min-height: 100svh;
    padding: 0;
  }
  .double-hyper__film {
    object-position: 50% 50%;
    filter: saturate(.88) brightness(1.05);
  }
  .double-hyper__veil {
    background:
      linear-gradient(180deg, rgba(255,250,252,.12), transparent 29%, rgba(255,248,251,.48) 78%, rgba(255,249,251,.92)),
      linear-gradient(90deg, rgba(255,249,251,.28), transparent 24%, transparent 76%, rgba(255,249,251,.28));
  }
  .double-hyper__product-wrap {
    top: 10%;
    width: min(63vw, 286px);
  }
  .product-panel--double-hyper .double-hyper__product {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }
  .double-hyper__copy {
    right: 22px;
    left: 22px;
    bottom: 40px;
    width: auto;
    gap: 9px;
  }
  .double-hyper__copy h3 { font-size: clamp(40px, 13.2vw, 58px); line-height: .86; }
  .double-hyper__lead { max-width: 290px; font-size: 12.5px; }
  .double-hyper__hud-line { font-size: 8px; letter-spacing: .13em; }
  .double-hyper__hud-line::after { width: 28px; margin-left: 5px; }
  .double-hyper__hud-line--rose { left: 18px; top: 18%; }
  .double-hyper__hud-line--water { right: 18px; bottom: 38%; }
  .double-hyper__petal { width: clamp(50px, 20vw, 92px); }
  .double-hyper__petal--a { left: 4%; top: 24%; }
  .double-hyper__petal--b { right: 3%; top: 22%; }
  .double-hyper__petal--c { left: 7%; bottom: 32%; }
  .double-hyper__petal--d { right: 7%; bottom: 30%; }
  .double-hyper__particle-field span:nth-child(n + 6) { display: none; }
}