*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0a0a0a;
  --white:#fafaf8;
  --off-white:#f4f2ee;
  --mid:#e8e5df;
  --pink:#f99ab2;
  --pink-dark:#d4607e;
}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--black);
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 4rem;
  background:rgba(250,250,248,0.94);
  backdrop-filter:blur(14px);
  border-bottom:0.5px solid rgba(10,10,10,0.1);
  z-index:100;
}
.nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.45rem;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--black);
}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{
  font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--black);text-decoration:none;opacity:0.55;transition:opacity 0.2s,color 0.2s;
}
.nav-links a:hover{opacity:1;color:var(--pink-dark)}

/* ── HERO ── */
.hero{
  height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-top:82px;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:4rem 4rem 3rem;
  position:relative;
}
.hero-left-content{
  display:flex;flex-direction:column;justify-content:center;
  flex:1;
}
.scroll-indicator{
  display:flex;align-items:center;gap:0.75rem;
  font-size:0.62rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  opacity:0.35;
  padding-top:2rem;
  margin-top:auto;
}
.scroll-line{width:40px;height:1px;background:var(--pink)}

.hero-eyebrow{
  font-size:0.68rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--pink-dark);margin-bottom:1.5rem;
}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.5rem,6vw,7rem);font-weight:700;line-height:0.95;
  letter-spacing:-0.02em;margin-bottom:1.75rem;
}
.hero-title em{font-style:italic;color:var(--pink-dark)}
.hero-tagline{
  font-size:0.95rem;line-height:1.75;opacity:0.55;
  max-width:380px;margin-bottom:2.5rem;font-weight:400;
}
.btn-primary{
  display:inline-block;padding:1rem 2.5rem;
  background:var(--black);color:var(--white);
  font-size:0.7rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;
  transition:background 0.25s,color 0.25s;width:fit-content;
}
.btn-primary:hover{background:var(--pink);color:var(--black)}
.btn-outline{
  display:inline-block;padding:1rem 2.5rem;
  background:transparent;color:var(--black);
  font-size:0.7rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid var(--black);
  cursor:pointer;transition:all 0.25s;width:fit-content;
}
.btn-outline:hover{background:var(--black);color:var(--white)}

/* ── HERO RIGHT — dual product showcase ── */
.hero-right{
  background:color-mix(in srgb,var(--pink) 10%,var(--off-white));
  display:flex;align-items:center;justify-content:center;
  gap:2.5rem;padding:3rem 2rem;position:relative;overflow:hidden;
}
.hero-right::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 40%,rgba(249,154,178,0.18) 0%,transparent 70%);
}
.product-card-hero{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:inherit;cursor:pointer;
  width:185px;
  transition:transform 0.35s ease;
}
.product-card-hero:hover{transform:translateY(-8px)}
.product-card-hero:hover .prod-card-inner{
  box-shadow:0 48px 80px rgba(10,10,10,0.14),0 0 0 2px var(--pink);
}
.prod-card-inner{
  width:100%;background:var(--white);
  border-radius:3px;padding:2.5rem 1.5rem 2rem;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 24px 56px rgba(10,10,10,0.08);
  transition:box-shadow 0.35s ease;
  position:relative;
}
.prod-badge{
  position:absolute;top:-0.65rem;right:-0.65rem;
  background:var(--pink);color:var(--black);
  font-size:0.52rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  padding:0.3rem 0.65rem;
}
.prod-name{
  font-size:0.62rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  margin-top:1.5rem;margin-bottom:0.3rem;text-align:center;
}
.prod-sub{font-size:0.68rem;opacity:0.4;text-align:center;font-weight:400}
.prod-arrow{
  display:inline-flex;align-items:center;gap:0.4rem;
  margin-top:1.25rem;
  font-size:0.58rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--pink-dark);opacity:0;transition:opacity 0.25s;
}
.product-card-hero:hover .prod-arrow{opacity:1}

/* ── MARQUEE ── */
.marquee-strip{
  background:var(--black);color:var(--white);
  padding:0.85rem 0;overflow:hidden;white-space:nowrap;
}
.marquee-inner{display:inline-block;animation:marquee 22s linear infinite}
.marquee-inner span{
  font-size:0.65rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  margin:0 3rem;opacity:0.65;
}
.marquee-inner span.dot{opacity:0.25;margin:0 1rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SHARED SECTION TEXT ── */
.section-eyebrow{
  font-size:0.65rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--pink-dark);margin-bottom:1.25rem;
}
.section-headline{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,5.5vw,6.5rem);font-weight:700;line-height:0.95;
  letter-spacing:-0.02em;margin-bottom:1.75rem;
}
.section-headline em{font-style:italic;color:var(--pink-dark)}
.section-body-text{
  font-size:0.92rem;line-height:1.85;opacity:0.55;margin-bottom:2.5rem;
  font-weight:400;max-width:580px;
}
.product-num{
  font-size:0.65rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  opacity:0.28;margin-bottom:1rem;
}

/* ── LACE GLUE — original full-width two-col ── */
.product-section{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.product-visual{
  background:color-mix(in srgb,var(--pink) 9%,var(--off-white));
  display:flex;align-items:center;justify-content:center;
  padding:6rem;position:relative;
}
.gel-demo{
  width:300px;height:380px;background:var(--white);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.5rem;position:relative;
  box-shadow:0 32px 64px rgba(10,10,10,0.06);
}
.gel-clear{
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,0.7);border:1px solid rgba(10,10,10,0.06);
  display:flex;align-items:center;justify-content:center;
}
.gel-inner{
  width:90px;height:90px;border-radius:50%;
  background:rgba(235,240,235,0.5);border:0.5px solid rgba(10,10,10,0.08);
}
.tag-pill{
  position:absolute;background:var(--pink);color:var(--black);
  font-size:0.55rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  padding:0.35rem 0.8rem;
}
.tag-pill.left{left:-2.5rem;top:28%}
.tag-pill.right{right:-2.5rem;top:55%}
.product-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 5rem;
}
.feature-list{list-style:none;margin-bottom:2.5rem}
.feature-list li{
  display:flex;align-items:center;gap:0.75rem;
  font-size:0.82rem;font-weight:500;padding:0.65rem 0;
  border-bottom:0.5px solid var(--mid);
}
.feature-list li::before{
  content:'';width:5px;height:5px;background:var(--pink);
  border-radius:50%;flex-shrink:0;
}

/* ── WATERPROOF — original full-width two-col dark ── */
.waterproof-section{
  min-height:100vh;background:var(--black);color:var(--white);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.waterproof-copy{
  display:flex;flex-direction:column;justify-content:center;padding:6rem;
}
.waterproof-section .section-headline{color:var(--white)}
.waterproof-section .section-headline em{color:var(--pink)}
.waterproof-section .section-eyebrow{color:var(--pink)}
.waterproof-section .section-body-text{color:rgba(255,255,255,0.45);max-width:320px}
.stat-row{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem;align-items:center}
.stat-val{
  font-family:'Cormorant Garamond',serif;
  font-size:3rem;font-weight:700;color:var(--white);line-height:1;
}
.stat-lbl{font-size:0.58rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;opacity:0.35;margin-top:0.2rem}
.stat-div{width:0.5px;background:rgba(255,255,255,0.1);align-self:stretch;min-height:40px}
.waterproof-visual{
  height:100%;min-height:500px;background:#0f0f0f;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.water-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.water-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(249,154,178,0.18);
  animation:ripple 4s ease-out infinite;
}
.water-ring:nth-child(1){width:80px;height:80px;animation-delay:0s}
.water-ring:nth-child(2){width:160px;height:160px;animation-delay:0.8s}
.water-ring:nth-child(3){width:260px;height:260px;animation-delay:1.6s}
.water-ring:nth-child(4){width:370px;height:370px;animation-delay:2.4s}
@keyframes ripple{
  0%{opacity:0;transform:scale(0.8)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.1)}
}
.wf-bottle{position:relative;z-index:2;text-align:center}

/* ── WHY CHOOSE US — original centered layout ── */
.why-section{
  min-height:100vh;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6rem 4rem;text-align:center;
}
.why-section .section-headline{text-align:center}
.benefits-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:0 3rem;align-items:center;max-width:920px;margin:0 auto;width:100%;
}
.benefit-col{display:flex;flex-direction:column;gap:2.5rem}
.benefit-item{
  text-align:center;padding:1.75rem;border:1px solid var(--mid);
  transition:border-color 0.25s,transform 0.25s;
}
.benefit-item:hover{border-color:var(--pink);transform:translateY(-3px)}
.benefit-icon{font-size:1.1rem;margin-bottom:0.75rem}
.benefit-name{font-size:0.72rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.4rem}
.benefit-desc{font-size:0.76rem;opacity:0.45;line-height:1.5;font-weight:400}
.center-bottle-wrap{width:150px;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.center-lbl{font-size:0.55rem;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;opacity:0.35}

/* ── RELEASE — original full-width two-col dark ── */
.release-section{
  min-height:100vh;background:var(--black);color:var(--white);
  display:grid;grid-template-columns:1fr 1fr;
}
.release-copy{
  display:flex;flex-direction:column;justify-content:center;padding:6rem;
}
.release-section .section-headline{color:var(--white)}
.release-section .section-headline em{color:var(--pink)}
.release-section .section-eyebrow{color:var(--pink)}
.release-section .section-body-text{color:rgba(255,255,255,0.45)}
.release-tag{
  display:inline-block;border:1px solid rgba(255,255,255,0.15);
  padding:0.4rem 1rem;font-size:0.62rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-right:0.5rem;margin-bottom:0.5rem;
}
.release-tags{margin-bottom:2.5rem;flex-wrap:wrap;display:flex;gap:0.25rem}
.release-visual{
  display:flex;align-items:center;justify-content:center;background:#0f0f0f;
}
.citrus-circle{
  width:260px;height:260px;border-radius:50%;
  background:rgba(249,154,178,0.04);border:1px solid rgba(249,154,178,0.12);
  display:flex;align-items:center;justify-content:center;
}
.citrus-inner{
  width:155px;height:155px;border-radius:50%;
  background:rgba(249,154,178,0.06);border:1px solid rgba(249,154,178,0.15);
  display:flex;align-items:center;justify-content:center;
}
.citrus-text{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-style:italic;font-weight:700;
  color:var(--pink);text-align:center;line-height:1.4;
}

/* ── UPCOMING ── */
.upcoming-section{
  min-height:100vh;background:var(--off-white);
  display:flex;flex-direction:column;justify-content:center;padding:6rem 4rem;
}
.upcoming-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}
.upcoming-note{font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;opacity:0.4}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.product-card{
  background:var(--white);padding:3.5rem 2.5rem;
  position:relative;overflow:hidden;transition:background 0.3s;cursor:default;
}
.product-card:hover{background:var(--black)}
.product-card:hover .pc-name,.product-card:hover .pc-desc{color:var(--white)}
.product-card:hover .pc-soon{opacity:1}
.product-card:hover .pc-icon-area{border-color:rgba(255,255,255,0.12)}
.product-card:hover .pc-icon-area svg rect,
.product-card:hover .pc-icon-area svg line,
.product-card:hover .pc-icon-area svg circle{stroke:rgba(255,255,255,0.5)}
.pc-icon-area{
  width:80px;height:80px;border:1px solid var(--mid);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2rem;transition:border-color 0.3s;
}
.pc-name{font-size:1rem;font-weight:600;margin-bottom:0.6rem;transition:color 0.3s}
.pc-desc{font-size:0.8rem;font-weight:400;opacity:0.45;line-height:1.6;transition:color 0.3s}
.pc-soon{
  position:absolute;bottom:2rem;right:2rem;font-size:0.58rem;
  font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--black);
  opacity:0;transition:opacity 0.3s;background:var(--pink);padding:0.3rem 0.65rem;
}

/* ── CONTACT ── */
.contact-section{
  min-height:100vh;background:var(--white);
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding:6rem 4rem;gap:6rem;
}
.contact-eyebrow{font-size:0.65rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:var(--pink-dark);margin-bottom:1.25rem}
.contact-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,5vw,5.5rem);font-weight:700;line-height:0.95;margin-bottom:1.5rem;
}
.contact-body{font-size:0.92rem;line-height:1.85;opacity:0.5;margin-bottom:3rem;font-weight:400}
.contact-option{
  display:flex;align-items:center;gap:1.5rem;padding:1.5rem 0;
  border-bottom:0.5px solid var(--mid);cursor:pointer;
  transition:padding-left 0.25s;text-decoration:none;color:inherit;
}
.contact-option:hover{padding-left:0.75rem}
.contact-option:first-of-type{border-top:0.5px solid var(--mid)}
.co-icon{
  width:44px;height:44px;border:1px solid var(--mid);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;
  transition:border-color 0.25s,background 0.25s;
}
.contact-option:hover .co-icon{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 10%,white)}
.co-label{font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.2rem}
.co-value{font-size:0.8rem;opacity:0.45;font-weight:400}
.co-arrow{margin-left:auto;font-size:1.1rem;opacity:0.2;transition:opacity 0.25s,color 0.25s}
.contact-option:hover .co-arrow{opacity:1;color:var(--pink)}

/* ── FOOTER ── */
footer{
  background:var(--black);color:var(--white);
  padding:2.75rem 4rem;display:flex;justify-content:space-between;align-items:center;
}
.footer-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;
  opacity:0.8;transition:color 0.25s,opacity 0.25s;color:var(--white);
}
.footer-logo:hover{color:var(--pink);opacity:1}
.footer-links{display:flex;gap:2rem;list-style:none}
.footer-links a{
  font-size:0.62rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--white);opacity:0.3;text-decoration:none;transition:opacity 0.2s,color 0.2s;
}
.footer-links a:hover{opacity:1;color:var(--pink)}
.footer-copy{font-size:0.6rem;letter-spacing:0.08em;opacity:0.22}

/* ── REAL PRODUCT IMAGE WRAPPER ── */
.product-img-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.product-img-wrap--dark{
  background:#0f0f0f;
}
.product-real-img{
  width:260px;max-width:20%;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,0.18));
  transition:transform 0.4s ease, filter 0.4s ease;
}
.product-real-img:hover{
  transform:scale(1.03) translateY(-4px);
  filter:drop-shadow(0 32px 60px rgba(0,0,0,0.22));
}
.product-img-wrap .tag-pill.left{left:1rem}
.product-img-wrap .tag-pill.right{right:1rem}

/* ── LOCATION CARDS ── */
.locations-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  max-width:960px;
  width:100%;
  margin:0 auto;
}
.location-card{
  background:var(--off-white);
  padding:2.5rem 2rem;
  border:1px solid var(--mid);
  position:relative;
  transition:border-color 0.25s,transform 0.25s,background 0.25s;
}
.location-card:hover{
  border-color:var(--pink);
  transform:translateY(-3px);
  background:var(--white);
}
.location-card--online{
  background:var(--black);
  border-color:rgba(249,154,178,0.2);
}
.location-card--online .location-name,
.location-card--online .location-addr,
.location-card--online .location-hours{color:var(--white)}
.location-card--online:hover{background:#111;border-color:var(--pink)}
.location-pin{
  font-size:1.1rem;margin-bottom:1rem;
  color:var(--black);opacity:0.3;
}
.location-card--online .location-pin{opacity:1}
.location-name{
  font-size:0.82rem;font-weight:700;
  letter-spacing:0.06em;margin-bottom:0.5rem;
}
.location-addr{
  font-size:0.76rem;opacity:0.45;
  line-height:1.5;margin-bottom:0.4rem;font-weight:400;
}
.location-hours{
  font-size:0.68rem;font-weight:600;
  letter-spacing:0.08em;opacity:0.35;margin-bottom:1.25rem;
}
.location-tag{
  display:inline-block;
  padding:0.3rem 0.75rem;
  font-size:0.55rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  border:1px solid var(--mid);color:var(--black);opacity:0.4;
}
.location-tag--active{
  background:var(--pink);border-color:var(--pink);
  color:var(--black);opacity:1;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.85s ease both}
.delay-1{animation-delay:0.12s}.delay-2{animation-delay:0.24s}
.delay-3{animation-delay:0.36s}.delay-4{animation-delay:0.48s}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:1.2rem 2rem}
  .nav-links{gap:1rem}
  .hero{grid-template-columns:1fr;height:auto;min-height:100vh}
  .hero-left{padding:7rem 2rem 3rem;align-items:center;text-align:center}
  .hero-left-content{align-items:center;display:flex;flex-direction:column}
  .hero-tagline{max-width:100%}
  .scroll-indicator{justify-content:center}
  .hero-right{min-height:55vw;gap:1.25rem;padding:3rem 1.5rem}
  .product-card-hero{width:145px}
  .product-section,.waterproof-section,.release-section,.contact-section{
    grid-template-columns:1fr;min-height:auto;
  }
  .product-visual{padding:4rem 2rem;min-height:320px}
  .product-copy{padding:4rem 2rem;align-items:center;text-align:center}
  .product-copy .feature-list li{text-align:left}
  .waterproof-copy{padding:4rem 2rem;align-items:center;text-align:center}
  .waterproof-visual{min-height:320px}
  .release-copy{padding:4rem 2rem;align-items:center;text-align:center}
  .why-section{padding:5rem 2rem;min-height:auto}
  .benefits-grid{grid-template-columns:1fr;gap:2rem}
  .center-bottle-wrap{width:100%;flex-direction:row;justify-content:center}
  .locations-grid{grid-template-columns:1fr}
  .upcoming-section{padding:5rem 2rem;min-height:auto}
  .upcoming-header{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .products-grid{grid-template-columns:1fr}
  .contact-section{padding:4rem 2rem;gap:3rem;min-height:auto}
  footer{flex-direction:column;gap:1.5rem;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
  .tag-pill.left{left:-0.5rem;font-size:0.48rem}
  .tag-pill.right{right:-0.5rem;font-size:0.48rem}
  .section-body-text{max-width:100%}
}
@media(max-width:500px){
  .nav-links{display:none}
  .hero-title{font-size:3rem}
  .section-headline{font-size:2.8rem}
  .contact-title{font-size:2.8rem}
  .btn-primary,.btn-outline{width:100%;text-align:center;display:block}
  .hero-right{flex-direction:column;align-items:center}
  .product-card-hero{width:160px}
}