.hero {
  --hero-ink: var(--ink, #102936);
  --hero-muted: var(--muted, #6e839a);
  --hero-pad: clamp(24px, 5.2vw, 88px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink);
  background: #eef8ff;
}
.hero *, .hero *::before, .hero *::after { box-sizing: border-box; }
.hero .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  min-height: 680px;
  min-height: clamp(620px, calc(100svh - 200px), 860px);
  margin: 0 auto;
  padding: 48px var(--hero-pad) 52px;
}
.hero .hero-copy { position: relative; z-index: 3; min-width: 0; }
.hero .hero-title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(50px, 5.7vw, 94px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: 1.035;
  text-wrap: balance;
}
.hero .hero-title > span { display: block; }
.hero .hero-subline {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--hero-muted);
  font-size: clamp(17px, 1.65vw, 25px);
  line-height: 1.42;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.hero .hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 53px;
  padding: 15px 27px;
  border: 1px solid var(--hero-ink);
  border-radius: 999px;
  color: var(--hero-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}
.hero .hero-button svg { width: 19px; height: 19px; flex: none; }
.hero .hero-button--primary { background: var(--hero-ink); color: #fff; box-shadow: 0 5px 20px #17274608; }
.hero .hero-button--secondary { background: #ffffff21; }
.hero .hero-button--secondary svg { display: none; }
.hero .hero-button:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #14274618; }
.hero .hero-button--primary:hover { background: #233c63; }
.hero .hero-button--secondary:hover { background: #ffffff80; }
.hero a:focus-visible { outline: 3px solid #268cb7; outline-offset: 5px; }
.hero .hero-scene { position: relative; min-width: 0; }
.hero .hero-vial-holder { position: absolute; z-index: 2; transform: rotate(var(--vial-tilt, 0deg)); }
.hero .hero-vial {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 22px 15px #42648421);
  animation: hero-vial-float var(--float-duration, 9s) ease-in-out var(--float-delay, -2s) infinite;
  will-change: transform;
}
.hero .hero-vial-holder:nth-of-type(2n) { --float-duration: 11s; --float-delay: -5s; }
.hero .hero-vial-holder:nth-of-type(3n) { --float-duration: 8s; --float-delay: -3.5s; }
@keyframes hero-vial-float {
  0%, 100% { transform: translate3d(0, 4px, 0) rotate(-.6deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(.6deg); }
}

/* A flowing glass tide with a descending diagonal product composition. */
.hero--tidal-form { background: radial-gradient(ellipse at 28% 30%, #fff 4%, #f1faff 45%, #c9e6f9); }
.hero .hero-inner--tidal { min-height: 720px; }
.hero--tidal-form .hero-copy { width: 57%; padding-top: 76px; }
.hero--tidal-form .hero-title { font-size: clamp(52px, 5.9vw, 92px); }
.hero .hero-tidal-waves { position: absolute; z-index: 0; left: -6%; bottom: -55px; width: 112%; height: 110%; filter: drop-shadow(0 16px 8px #5eaace16); animation: hero-tide 14s ease-in-out infinite alternate; }
@keyframes hero-tide { from { transform: translate3d(-7px, 4px, 0) scaleY(.99); } to { transform: translate3d(8px, -5px, 0) scaleY(1.01); } }
.hero .hero-scene--tidal { position: absolute; width: 54%; top: 0; bottom: 0; right: 0; }
.hero .hero-vial--tidal-first { width: 37%; left: 1%; top: 3%; --vial-tilt: 10deg; }
.hero .hero-vial--tidal-second { width: 34%; left: 34%; top: 25%; --vial-tilt: -10deg; }
.hero .hero-vial--tidal-third { width: 27%; right: 7%; bottom: 7%; --vial-tilt: 11deg; }

/* A composed entrance, followed by low-amplitude ambient movement. */
.hero .hero-copy > * { animation: hero-copy-arrive 780ms cubic-bezier(.22, 1, .36, 1) both; }
.hero .hero-copy .hero-title { animation-delay: 140ms; }
.hero .hero-copy .hero-subline { animation-delay: 230ms; }
.hero .hero-copy .hero-actions { animation-delay: 310ms; }
.hero .hero-vial-holder { animation: hero-product-arrive 1100ms ease-out 180ms both; }
.hero .hero-vial-holder:nth-of-type(2n) { animation-delay: 280ms; }
.hero .hero-vial-holder:nth-of-type(3n) { animation-delay: 390ms; }
.hero .hero-button--primary svg { transition: translate 240ms ease; }
.hero .hero-button--primary:hover svg { translate: 3px 0; }
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-product-arrive { from { opacity: .01; } to { opacity: 1; } }

@media (max-width: 1100px) and (min-width: 701px) {
  .hero { --hero-pad: 32px; }
  .hero .hero-inner { min-height: 610px; padding-top: 42px; }
  .hero .hero-title { font-size: clamp(43px, 5.5vw, 65px); }
  .hero .hero-subline { font-size: 19px; }
  .hero .hero-button { padding: 13px 19px; min-height: 48px; font-size: 12px; gap: 12px; }
  .hero .hero-actions { gap: 9px; }
  .hero .hero-inner--tidal { min-height: 650px; }
  .hero--tidal-form .hero-copy { width: 60%; padding-top: 70px; }
  .hero .hero-vial--tidal-first { top: 5%; left: 4%; width: 36%; }
  .hero .hero-vial--tidal-second { top: 28%; left: 38%; width: 33%; }
  .hero .hero-vial--tidal-third { bottom: 7%; right: 8%; width: 29%; }
}

@media (max-width: 700px) {
  .hero { --hero-pad: 23px; }
  .hero .hero-inner { min-height: auto; padding: 39px var(--hero-pad) 32px; }
  .hero .hero-title { font-size: clamp(42px, 10.7vw, 70px); letter-spacing: -.06em; line-height: 1.055; }
  .hero .hero-subline { font-size: 17px; margin-top: 21px; max-width: 440px; }
  .hero .hero-actions { margin-top: 25px; gap: 10px; }
  .hero .hero-button { min-height: 47px; padding: 13px 19px; font-size: 12px; gap: 12px; }
  .hero .hero-button svg { width: 16px; height: 16px; }
  .hero .hero-copy { width: 100%; }
  .hero .hero-vial { filter: drop-shadow(0 13px 10px #4169871a); }
  .hero .hero-inner--tidal { min-height: auto; padding-bottom: 0; }
  .hero--tidal-form .hero-copy { width: 100%; padding-top: 0; }
  .hero--tidal-form .hero-title { font-size: clamp(45px, 11.3vw, 68px); }
  .hero .hero-scene--tidal { position: relative; width: 100%; height: 360px; right: auto; margin-top: 4px; }
  .hero .hero-vial--tidal-first { width: 39%; left: 2%; top: 1%; --vial-tilt: 9deg; }
  .hero .hero-vial--tidal-second { width: 36%; left: 36%; top: 20%; --vial-tilt: -9deg; }
  .hero .hero-vial--tidal-third { width: 30%; bottom: 4%; right: 0; --vial-tilt: 9deg; }
  .hero .hero-tidal-waves { height: 58%; bottom: -15px; left: -50%; width: 165%; }
}

@media (max-width: 380px) {
  .hero .hero-button { padding-left: 16px; padding-right: 16px; font-size: 11px; gap: 7px; }
  .hero .hero-actions { gap: 8px; }
  .hero .hero-title { font-size: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-vial, .hero .hero-tidal-waves, .hero .hero-vial-holder, .hero .hero-copy > * { animation: none; will-change: auto; }
  .hero .hero-copy > *, .hero .hero-vial-holder { opacity: 1; }
  .hero .hero-button { transition: none; }
}

/* The product images stay upright, as rendered, with generous native margins. */
html[data-site="store"] .hero .hero-vial-holder{--vial-tilt:0deg}
html[data-site="store"] .hero .hero-vial--tidal-first{left:-10%;width:60%;top:4%}
html[data-site="store"] .hero .hero-vial--tidal-second{left:25%;width:59%;top:23%}
html[data-site="store"] .hero .hero-vial--tidal-third{right:-13%;width:53%;bottom:2%}
html[data-site="store"] .hero .hero-title{font-size:clamp(48px,5.1vw,78px)}
@keyframes hero-vial-float{0%,100%{transform:translate3d(0,4px,0)}50%{transform:translate3d(0,-10px,0)}}
/* Reserve a separate desktop text column; the first bottle extends left of its scene. */
@media(min-width:701px){
 html[data-site="store"] .hero .hero-copy{width:47%}
 html[data-site="store"] .hero .hero-title{font-size:clamp(40px,4vw,64px)}
}
@media(max-width:700px){
 html[data-site="store"] .hero .hero-title{font-size:clamp(37px,8.8vw,57px)}
 html[data-site="store"] .hero .hero-vial--tidal-first{top:0;left:-13%;width:62%}
 html[data-site="store"] .hero .hero-vial--tidal-second{top:18%;left:21%;width:62%}
 html[data-site="store"] .hero .hero-vial--tidal-third{right:-12%;bottom:0;width:55%}
}