/* Clear sparkling water, balanced by deep navy type and directional product light. */
:root{--paper:#d5f2f5;--ink:#103749;--accent:#e9d30c}
html,body{background:#d5f2f5;color:#103749}
.stage{background:#a7dce8 url('./assets/sparkling-water-bubbles.webp') center/cover no-repeat;color:#103749}
.stage-wash{background:linear-gradient(180deg,#f3fcfac4,transparent 36%,#b4e2e780);pointer-events:none}
.stage-wash:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,#e9f9f9ba 66%,#effbfaed);opacity:var(--detail-wash,0)}
.site-header{color:#103749;background:linear-gradient(180deg,#effbfac4,transparent)}
.site-header .brand img{filter:none}
.site-header .nav-cta{border-color:#10374966}
.site-header a:focus-visible,.stage a:focus-visible,.stage button:focus-visible{outline-color:#076078}
.stage .story-copy h1 em,.stage .story-copy h2 em,.stage .duo-copy h2 em,.stage .lineup-copy h2 em{color:#176478}
.stage .body-copy,.stage .detail-note,.stage .range-labels p,.lineup-copy .lineup-instruction{color:#234d60}
.stage .eyebrow i,.stage .progress-track i{background:#14647a}
.stage .text-link{border-color:#10374970}
.hero-box-link,.lineup-box-link{background:#103e51;border-color:#103e51;color:#f5ffff;box-shadow:0 7px 20px #0e58791c}
.hero-box-link:hover,.lineup-box-link:hover{background:#1e596b}
.stage .stage-bottom{color:#103749}
.stage .stage-bottom button{background:#edfafaad;border-color:#1037494d}
.stage .chapter-count,.lineup-product-range{color:#355b68}
.stage .chapter-count span{color:#103749}
.stage .chapter-nav button:before{background:#10374965}
.stage .chapter-nav button.active:before{background:#103749}
.stage .progress-track{background:#10374926}
.stage .swatches button[aria-pressed=true]{border-color:#103749}
.stage .loading{background:#d5f2f5;color:#103749}
.ingredient-facts>div{border-color:#28607375}
.ingredient-facts dt{color:#103749}
.ingredient-facts dd{color:#254d5d}
.lineup-product{color:#103749}
.lineup-actions .selected-product-link{color:#103749}
.lineup-product-image .packshot-crop{filter:drop-shadow(7px 12px 7px #10374965)}
.concept-footer{background:#103749;color:#d6edef}
::selection{background:#fded72;color:#103749}
/* The opening keeps the same aqua background and navy type as the hero. */
@media(min-width:621px) and (max-width:1100px){
  .detail-copy{left:60%;right:5%;max-width:none}
  .detail-copy h2{font-size:clamp(32px,4.3vw,47px)}
  .range-labels{top:17svh;left:18%;right:18%;align-items:center}
  .range-labels>div,.range-labels>div:last-child{width:44%;text-align:center}
  .range-labels b{font-size:16px;letter-spacing:-.4px;white-space:nowrap}
  .range-labels p{display:none}
}
@media(max-width:620px){
  .detail-copy{top:7svh}
  .detail-copy h2{font-size:32px;line-height:1.02;margin-bottom:12px}
  .detail-copy .eyebrow{margin-bottom:8px}
  .detail-copy .ingredient-facts{gap:7px}
  .stage{background-position:45% center}
  .stage-wash{background:linear-gradient(180deg,#effbfae6, #e4f6f69e 35%,transparent 57%,#bde8efba)}
  .stage-wash:after{background:linear-gradient(180deg,#eefbfadd,#e5f8f7cf 43%,transparent 65%)}
}