/* HYA / 14 Premium: an editorial hydration campaign on a quiet, cool canvas.
   All campaign styles are scoped to this page. Shared chrome stays in site.css. */
.hp-page{
  --hp-mist:#e9eef0;
  --hp-white:#fbfbfa;
  --hp-ink:#121314;
  --hp-muted:rgba(18,19,20,.62);
  --hp-red:#a70e27;
  --hp-gold:#bd9457;
  --hp-rule:rgba(18,19,20,.1);
  --hp-pad:clamp(24px,5vw,88px);
  --hp-space:clamp(76px,8vw,128px);
  --hp-display:'Michroma',var(--sans);
  color:var(--hp-ink);
  background:var(--hp-white);
}
.hp-page .frame{background:var(--hp-white)}
.hp-page .nav{background:var(--hp-white)}
.hp-page :is(a,button,summary):focus-visible{
  outline:3px solid var(--hp-red);
  outline-offset:5px;
}
.hp-main{overflow:clip}
.hp-main :is(h1,h2,h3,p,figure,dl,dd){margin:0}
.hp-main h2{
  font:600 clamp(34px,4.375vw,60px)/1.05 var(--sans);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hp-main p,.hp-main dd{font:400 15px/1.6 var(--sans)}
.hp-main a{color:var(--hp-ink)}
.hp-main img{display:block;width:100%;height:100%;object-fit:cover}
.hp-main figcaption{
  padding-top:15px;
  color:var(--hp-muted);
  font:400 12px/1.6 var(--sans);
}
.hp-main .hp-section-label{
  margin-bottom:18px;
  color:var(--hp-red);
  font:500 10px/1.2 var(--mono);
  letter-spacing:.3em;
  text-transform:uppercase;
}
.hp-mark{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 20px;
  font:400 clamp(19px,1.9vw,27px)/1.35 var(--hp-display) !important;
  letter-spacing:-.025em;
}
.hp-mark span{
  padding:6px 10px 7px;
  border:1px solid var(--hp-gold);
  color:var(--hp-red);
  font:500 10px/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hp-text-link{
  display:inline-flex;
  align-items:center;
  gap:23px;
  width:fit-content;
  min-height:44px;
  padding:9px 0;
  border-bottom:1px solid currentColor;
  font:500 13px/1.5 var(--sans);
  transition:color .18s ease;
}
.hp-text-link:hover{color:var(--hp-red)}
.hp-text-link span{font-size:19px;font-weight:300}
.hp-main .hp-price{
  color:var(--hp-red);
  font:500 16px/1.6 var(--sans);
}

.hp-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(650px,55vw,880px);
  background:var(--hp-mist);
}
.hp-hero__image{
  position:absolute;
  inset:0;
  object-position:70% 45%;
}
.hp-hero__copy{
  position:relative;
  width:min(51%,760px);
  padding:74px 0 90px var(--hp-pad);
}
.hp-hero .hp-mark{margin-bottom:42px}
.hp-hero h1{
  max-width:10ch;
  font:600 clamp(44px,5vw,72px)/1.02 var(--sans);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hp-hero .hp-hero__intro{
  max-width:31ch;
  margin-top:29px;
  font:300 clamp(17px,1.48vw,20px)/1.5 var(--sans);
  color:var(--hp-muted);
}
.hp-hero .hp-price{margin-top:20px}
.hp-hero .hp-text-link{margin-top:20px}
.hp-hero .hp-hero__caption{
  position:absolute;
  right:var(--hp-pad);
  bottom:25px;
  color:var(--hp-muted);
  font:400 10px/1.5 var(--sans);
  letter-spacing:.025em;
}

.hp-intro{
  padding:var(--hp-space) var(--hp-pad);
  text-align:center;
  scroll-margin-top:24px;
}
.hp-intro .hp-intro__lead{
  max-width:57ch;
  margin:26px auto 0;
  color:var(--hp-muted);
  font-size:16px;
}
.hp-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1120px;
  margin:54px auto 0 !important;
}
.hp-benefits > div{padding:0 24px}
.hp-benefits > div+div{border-left:1px solid var(--hp-rule)}
.hp-benefits dt{font:500 17px/1.5 var(--sans)}
.hp-benefits dd{margin-top:10px;color:var(--hp-muted);font-size:13px}

.hp-product{
  padding:0 var(--hp-pad) var(--hp-space);
}
.hp-product__heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(32px,7vw,112px);
  max-width:1280px;
  margin:0 auto 49px;
  padding-top:48px;
  border-top:1px solid var(--hp-rule);
}
.hp-product__copy{max-width:49ch;padding-bottom:3px}
.hp-product__copy > p{color:var(--hp-muted)}
.hp-product .hp-product__spec{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-top:25px;
  color:var(--hp-ink);
  font-size:13px;
}
.hp-product__spec span+span{padding-left:26px;border-left:1px solid var(--hp-rule)}
.hp-product__images{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:end;
  gap:clamp(24px,3vw,48px);
  max-width:1440px;
  margin:0 auto;
}
.hp-product__images figure{min-width:0}
.hp-product__render-surface{
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  background:var(--hp-mist);
}
.hp-product__render-surface img{
  object-fit:contain;
  padding:clamp(20px,3vw,48px) 0;
}
.hp-product__detail img{aspect-ratio:3/2;height:auto;object-position:50% 45%}

.hp-story{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hp-mist);
}
.hp-story__media{min-width:0;min-height:clamp(470px,38vw,650px)}
.hp-story__media img{object-position:50% 45%}
.hp-story__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(55px,6vw,96px) var(--hp-pad);
}
.hp-story__copy h2{font-size:clamp(32px,3.44vw,48px);letter-spacing:-.04em}
.hp-story__copy > p:last-child{max-width:42ch;margin-top:18px;color:var(--hp-muted)}
.hp-story--reverse .hp-story__media{grid-column:2;grid-row:1}
.hp-story--reverse .hp-story__copy{grid-column:1;grid-row:1}
.hp-story--glow .hp-story__media img{object-position:35% 45%}
.hp-story--plump{background:var(--hp-white)}
.hp-story--plump .hp-story__media img{object-position:58% 40%}
.hp-story--refine .hp-story__media img{object-position:60% 45%}

.hp-texture{padding-top:var(--hp-space)}
.hp-texture__copy{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(32px,7vw,112px);
  max-width:1456px;
  margin:0 auto;
  padding:0 var(--hp-pad) 52px;
}
.hp-texture__copy > p{max-width:46ch;color:var(--hp-muted)}
.hp-texture__media img{aspect-ratio:16/9;height:auto;object-position:50% 45%}
.hp-texture__media figcaption{padding:17px var(--hp-pad) 0}

.hp-rhythm{padding:var(--hp-space) var(--hp-pad)}
.hp-rhythm__heading{text-align:center}
.hp-rhythm__heading > p{margin-top:24px;color:var(--hp-muted)}
.hp-rhythm__images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
  max-width:1440px;
  margin:48px auto 0;
}
.hp-rhythm__images figure{min-width:0}
.hp-rhythm__images img{height:auto;aspect-ratio:3/2;object-position:50% 45%}
.hp-rhythm__images figcaption{display:flex;flex-direction:column;gap:5px}
.hp-rhythm__images figcaption span{color:var(--hp-ink);font-size:16px;font-weight:500}

.hp-ritual{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hp-mist);
  scroll-margin-top:24px;
}
.hp-ritual__media{min-width:0;min-height:660px}
.hp-ritual__media img{object-position:50% 45%}
.hp-ritual__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(64px,7vw,112px) var(--hp-pad);
}
.hp-steps{
  display:grid;
  gap:26px;
  counter-reset:hp-step;
  padding:0;
  margin:42px 0 0;
  list-style:none;
}
.hp-steps li{
  position:relative;
  counter-increment:hp-step;
  padding-left:34px;
}
.hp-steps li::before{
  content:counter(hp-step,decimal-leading-zero);
  position:absolute;
  top:3px;
  left:0;
  color:var(--hp-red);
  font:500 10px/1.6 var(--sans);
}
.hp-steps h3{font:500 15px/1.6 var(--sans)}
.hp-steps p{max-width:32ch;margin-top:5px;color:var(--hp-muted);font-size:13px;line-height:1.7}
.hp-ritual .hp-ritual__note{
  max-width:40ch;
  margin-top:36px;
  color:var(--hp-muted);
  font-size:11px;
  line-height:1.7;
}

.hp-pause{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:center;
  padding-top:var(--hp-space);
}
.hp-pause__media{min-width:0}
.hp-pause__media img{height:auto;aspect-ratio:3/2;object-position:30% 40%}
.hp-pause__copy{padding:40px clamp(30px,4vw,64px)}
.hp-pause__copy h2{font-size:clamp(36px,3.4vw,54px)}
.hp-pause__copy > p{max-width:31ch;margin-top:25px;color:var(--hp-muted);font-size:14px}

.hp-enquire{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(88px,10vw,160px) var(--hp-pad);
  text-align:center;
}
.hp-enquire .hp-mark{justify-content:center;margin-bottom:34px}
.hp-enquire h2{font-size:clamp(43px,5vw,76px)}
.hp-enquire > p:not(.hp-mark){margin-top:26px;color:var(--hp-muted)}
.hp-enquire > .hp-price{margin-top:19px !important;color:var(--hp-red) !important;font-size:21px}
.hp-enquire__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:22px 35px;
  margin-top:33px;
}
.hp-main .hp-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:14px 28px;
  border-radius:999px;
  background:var(--hp-ink);
  color:#fff;
  font:500 14px/1 var(--sans);
  transition:opacity .18s ease;
}
.hp-main .hp-button:hover{background:var(--hp-ink);opacity:.88}

@media (min-width:1800px){
  .hp-story__copy,.hp-ritual__copy{padding-left:100px;padding-right:100px}
  .hp-story__copy > p:last-child{max-width:46ch}
}
@media (max-width:1100px) and (min-width:821px){
  .hp-hero__copy{width:53%}
  .hp-hero .hp-mark{gap:15px;font-size:19px !important}
  .hp-story__copy,.hp-ritual__copy{padding:56px 36px}
  .hp-story__media{min-height:470px}
  .hp-story__copy h2,.hp-ritual h2{font-size:41px}
  .hp-ritual__media{min-height:660px}
  .hp-pause__copy{padding-left:30px;padding-right:30px}
  .hp-pause__copy h2{font-size:36px}
}
@media (max-width:820px){
  .hp-page{--hp-space:72px}
  .hp-hero{display:flex;flex-direction:column;min-height:0;align-items:stretch}
  .hp-hero .hp-hero__image{position:static;height:auto;aspect-ratio:3/2;object-position:75% 42%}
  .hp-hero__copy{width:100%;max-width:none;padding:46px var(--hp-pad) 53px}
  .hp-hero .hp-mark{margin-bottom:29px}
  .hp-hero h1{max-width:12ch}
  .hp-hero .hp-hero__intro{max-width:40ch;margin-top:24px;font-size:17px}
  .hp-hero .hp-price{margin-top:17px}
  .hp-hero .hp-text-link{margin-top:15px}
  .hp-hero .hp-hero__caption{display:none}
  .hp-intro .hp-intro__lead{font-size:15px}
  .hp-benefits{margin-top:40px !important}
  .hp-benefits > div{padding:0 16px}
  .hp-benefits dt{font-size:14px}
  .hp-benefits dd{font-size:12px;line-height:1.65}
  .hp-product__heading{gap:34px;align-items:start;padding-top:40px;margin-bottom:36px}
  .hp-product__copy > p{font-size:14px}
  .hp-product__images{gap:24px}
  .hp-product__render-surface img{padding:20px 0}
  .hp-story,.hp-ritual{grid-template-columns:minmax(0,1fr)}
  .hp-story__media,.hp-ritual__media{min-height:0;aspect-ratio:3/2}
  .hp-story--reverse .hp-story__media,.hp-story--reverse .hp-story__copy{grid-column:auto;grid-row:auto}
  .hp-story__copy{padding:48px var(--hp-pad) 56px}
  .hp-story__copy > p:last-child{max-width:54ch;margin-top:18px}
  .hp-texture__copy{gap:34px;padding-bottom:36px}
  .hp-texture__copy > p{font-size:14px}
  .hp-texture__media img{aspect-ratio:3/2}
  .hp-rhythm__images{gap:24px;margin-top:36px}
  .hp-rhythm__heading > p{margin-top:22px}
  .hp-ritual__copy{padding:52px var(--hp-pad) 64px;max-width:660px}
  .hp-steps{margin-top:34px;gap:26px}
  .hp-steps p{max-width:40ch}
  .hp-pause{grid-template-columns:minmax(0,1fr)}
  .hp-pause__copy{padding:42px var(--hp-pad) 0;max-width:660px}
  .hp-pause__copy > p{max-width:48ch}
  .hp-enquire{padding:76px var(--hp-pad) 84px}
}
@media (max-width:520px){
  .hp-page{--hp-space:64px}
  .hp-hero .hp-hero__image{aspect-ratio:1/1;object-position:83% 38%}
  .hp-mark{font-size:20px !important;gap:13px 16px}
  .hp-hero h1{font-size:44px;letter-spacing:-.045em}
  .hp-benefits{grid-template-columns:minmax(0,1fr);margin-top:33px !important;text-align:left}
  .hp-benefits > div{padding:19px 0;border-top:1px solid var(--hp-rule)}
  .hp-benefits > div+div{border-left:0}
  .hp-benefits > div:last-child{padding-bottom:0}
  .hp-benefits dt{font-size:16px}
  .hp-benefits dd{margin-top:5px;font-size:13px}
  .hp-product__heading{grid-template-columns:minmax(0,1fr);gap:25px}
  .hp-product__copy{max-width:none}
  .hp-product .hp-product__spec{margin-top:20px}
  .hp-product__images{grid-template-columns:minmax(0,1fr);gap:32px}
  .hp-product__render-surface img{padding:18px 0}
  .hp-story__copy{padding-top:39px;padding-bottom:48px}
  .hp-story .hp-section-label{margin-bottom:18px}
  .hp-story__copy > p:last-child{font-size:14px}
  .hp-texture__copy{grid-template-columns:minmax(0,1fr);gap:25px}
  .hp-rhythm__heading{text-align:left}
  .hp-rhythm__heading > p{max-width:30ch;font-size:14px}
  .hp-rhythm__images{grid-template-columns:minmax(0,1fr);gap:32px}
  .hp-rhythm__images figcaption{padding-top:13px}
  .hp-ritual__copy{padding-top:42px;padding-bottom:52px}
  .hp-pause__copy{padding-top:35px}
  .hp-enquire h2{font-size:43px}
  .hp-enquire > p:not(.hp-mark){max-width:31ch;font-size:14px}
  .hp-enquire > .hp-price{font-size:20px !important}
  .hp-enquire__actions{flex-direction:column;gap:17px}
  .hp-enquire .hp-mark{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .hp-page .hp-text-link,.hp-page .hp-button{transition:none}
}