/* ==========================================================================
   Ocean Harvest — palette from the logo: abyss black, polished gold,
   turquoise surf, with the active flavour driving the accent.
   ========================================================================== */

:root{
  --ink:#07090c;
  --ink-2:#0b1015;
  --ink-3:#0f161d;

  --text:#eae7e0;
  --muted:rgba(234,231,224,.62);
  --faint:rgba(234,231,224,.36);
  --hair:rgba(234,231,224,.12);
  --hair-2:rgba(234,231,224,.06);

  --gold:#c9a227;
  --gold-lt:#eccd76;
  --gold-foil:linear-gradient(135deg,#7d5f12,#eccd76 26%,#c9a227 48%,#f6e4a8 72%,#8a6a15);

  --turq:#00b4d8;
  --turq-lt:#5fd3ec;

  --accent:#e8a33a;
  --accent-lt:#ffc978;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.44,1);
  --maxw:1280px;
  --pad:clamp(1.15rem,5vw,4rem);
  --navh:104px;
}

body[data-flavor="golden-tide"]  { --accent:#f0a521; --accent-lt:#ffcd7a; }
body[data-flavor="deep-current"] { --accent:#c62a86; --accent-lt:#f76fb4; }
body[data-flavor="pure-atlantic"]{ --accent:#3ab6dd; --accent-lt:#8fe3f8; }

*,*::before,*::after{box-sizing:border-box}
/* The UA's [hidden] rule is display:none, but any author display rule beats
   it — .langgate and .paypick set display:grid, so toggling .hidden left them
   on screen. This makes the attribute authoritative. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--navh)}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}

.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:210;
  background:linear-gradient(90deg,var(--accent),var(--gold-lt));
  transition:width .12s linear;
}

/* ------------------------------ type ------------------------------------ */
.kicker{
  display:flex;align-items:center;gap:.85rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 1.3rem;
}
.kicker--c{justify-content:center}
.kicker__rule{flex:0 0 auto;width:56px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.h2{
  font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.04;font-weight:400;letter-spacing:-.022em;margin:0 0 1.2rem;
}
.h2--c{text-align:center}
.h2 em{font-style:italic;color:var(--gold-lt)}
.split__note{color:var(--muted);font-size:1rem;font-weight:300;max-width:54ch;margin:0}
.split__note--c{margin-inline:auto;text-align:center}
.split__note b{color:var(--text);font-weight:600}

section{padding:clamp(4.5rem,9vw,7.5rem) var(--pad)}

/* ---------------------------- buttons ----------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 2rem;font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:2px;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background .3s,color .3s,border-color .3s;
}
.btn__sep{width:12px;height:1px;background:currentColor;opacity:.45;flex:none}
#addPrice,#stickyPrice,#coTotal{text-transform:none;letter-spacing:.02em;font-weight:700}
.btn--gold{
  background:var(--gold-foil);color:#180f00;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 10px 30px rgba(201,162,39,.22);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 44px rgba(201,162,39,.36)}
.btn--quiet{border:1px solid var(--hair);color:var(--text)}
.btn--quiet:hover{border-color:var(--gold);color:var(--gold-lt)}
.btn--block{width:100%}
.btn--big{padding:1.18rem 2.1rem}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ============================== NAV ===================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.5rem;padding:.7rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s,padding .4s;
}
.nav.is-stuck{
  background:rgba(7,9,12,.9);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--hair-2);padding-top:.4rem;padding-bottom:.4rem;
}
/* Explicit columns: the side nav links are display:none on small screens, and
   without this the brand would auto-place into column 1 and stop being centred. */
.nav__links--l{grid-column:1;justify-self:start}
.nav__brand{grid-column:2;justify-self:center;display:block}
.nav__right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:1.9rem}
.nav__logo{
  height:96px;width:auto;
  filter:drop-shadow(0 4px 20px rgba(0,180,216,.32));
  transition:height .4s var(--ease);
}
.nav.is-stuck .nav__logo{height:66px}
.nav__links{display:flex;gap:1.9rem;align-items:center}
.nav__links a{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:.4rem 0;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:.1rem;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}
.nav__cart{
  display:flex;align-items:center;gap:.6rem;padding:.62rem 1.1rem;
  border:1px solid var(--hair);border-radius:2px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  transition:border-color .3s,color .3s;
}
.nav__cart:hover{border-color:var(--gold);color:var(--gold-lt)}
.nav__count{
  min-width:20px;height:20px;padding:0 5px;border-radius:2px;
  background:var(--gold-foil);color:#180f00;font-size:.66rem;font-weight:800;
  display:grid;place-items:center;transition:opacity .3s,transform .35s var(--spring);
}
.nav__count:not(.is-on){opacity:.28}
@media(max-width:1080px){
  .nav__links{display:none}
  /* With the side links gone, the cart's min-content width would push the
     centre column off-centre — so pin the brand to the true middle instead. */
  .nav{display:flex;justify-content:flex-end;align-items:center}
  .nav__brand{position:absolute;left:50%;transform:translateX(-50%)}
  .nav__logo{height:74px}
  .nav.is-stuck .nav__logo{height:56px}
  :root{--navh:92px}
}
/* Below this the centred logo would collide with the cart, so trim both. */
@media(max-width:620px){
  .nav__logo{height:58px}
  .nav.is-stuck .nav__logo{height:46px}
  .nav__cart{padding:.5rem .75rem;font-size:.6rem;gap:.45rem}
  .nav__count{min-width:17px;height:17px;font-size:.6rem}
  :root{--navh:76px}
}

/* ============================== HERO ==================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--navh) + 1rem) var(--pad) 5rem;overflow:hidden;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.7}
.hero__aura{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 70% 46%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%),
    radial-gradient(46% 38% at 18% 74%,rgba(0,180,216,.14),transparent 74%),
    linear-gradient(180deg,rgba(7,9,12,.62) 0%,transparent 22%,transparent 62%,var(--ink) 100%);
  transition:background .9s var(--ease);
}

/* ---------------------------- carousel ---------------------------------- */
.carousel{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto}
.carousel__viewport{position:relative;min-height:min(560px,66svh)}
.slide{
  position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility .7s;
}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto;position:relative}
.slide__eyebrow{
  display:flex;align-items:center;gap:.65rem;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 1.1rem;
}
.pip{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);
  animation:pulse 2.6s infinite;transition:background .7s var(--ease)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.slide__title{
  font-family:var(--display);font-size:clamp(3rem,7.4vw,6rem);line-height:.93;
  font-weight:400;letter-spacing:-.035em;margin:0 0 .7rem;
}
.slide__title em{font-style:italic;color:var(--accent-lt);transition:color .7s var(--ease)}
.slide__flav{
  font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text);font-weight:600;margin:0 0 1.3rem;
}
.slide__desc{color:var(--muted);max-width:44ch;font-size:1.02rem;font-weight:300;margin:0 0 2rem}
.slide__cta{display:flex;gap:.8rem;flex-wrap:wrap}

.slide__art{position:relative;display:grid;place-items:center;min-height:min(540px,60svh)}
.slide__halo{
  position:absolute;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 66%);
  filter:blur(70px);transition:background .9s var(--ease);
}
.slide__jar{
  position:relative;height:min(560px,62svh);width:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));
  animation:bob 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.slide__reflect{
  position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);
  width:52%;height:34px;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%);
  filter:blur(16px);
}

.carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border:1px solid var(--hair);border-radius:50%;
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.carousel__arrow::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:1.5px solid var(--gold-lt);border-right:1.5px solid var(--gold-lt);
}
.carousel__arrow--prev{left:-14px}
.carousel__arrow--prev::after{transform:translate(-35%,-50%) rotate(-135deg)}
.carousel__arrow--next{right:-14px}
.carousel__arrow--next::after{transform:translate(-65%,-50%) rotate(45deg)}
.carousel__arrow:hover{border-color:var(--gold);background:rgba(201,162,39,.1)}
.carousel__dots{
  position:absolute;bottom:-3.2rem;left:0;display:flex;gap:1.6rem;z-index:5;
}
.cdot{display:flex;align-items:center;gap:.55rem;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:600;transition:color .35s}
.cdot i{width:26px;height:2px;background:var(--hair);position:relative;overflow:hidden;
  transition:background .35s}
.cdot.is-active{color:var(--text)}
.cdot.is-active i{background:rgba(234,231,224,.2)}
.cdot.is-active i::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform-origin:left;animation:fill 7s linear forwards;
}
.carousel.is-paused .cdot.is-active i::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:940px){
  .slide{grid-template-columns:1fr;text-align:center;gap:.6rem}
  .slide__art{order:-1;min-height:auto}
  /* Sized so the jar, the headline and the buy button all clear the fold. */
  .slide__jar{height:min(300px,33svh)}
  .slide__title{font-size:clamp(2.6rem,11vw,3.4rem)}
  .slide__flav{margin-bottom:.9rem}
  .slide__desc{margin-inline:auto;margin-bottom:1.4rem;font-size:.95rem}
  .slide__eyebrow{margin-bottom:.8rem;justify-content:center}
  .slide__cta{justify-content:center}
  .carousel__arrow{display:none}
  .carousel__dots{position:static;justify-content:center;margin-top:1.6rem;
    flex-wrap:wrap;gap:1rem}
  .carousel__viewport{min-height:0}
  .hero{padding-bottom:3rem}
}

/* ============================== TICKER ================================== */
.ticker{border-block:1px solid var(--hair-2);background:var(--ink-2);overflow:hidden;padding:.95rem 0}
.ticker__track{display:flex;gap:2.4rem;align-items:center;white-space:nowrap;width:max-content;
  animation:slide 50s linear infinite}
.ticker__track span{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.ticker__track i{width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================== BENEFITS ================================ */
.benefits{background:var(--ink)}
.split{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem)}
.split__l{position:sticky;top:calc(var(--navh) + 1rem);align-self:start}
.split__cta{margin-top:1.8rem}
@media(max-width:940px){.split{grid-template-columns:1fr}.split__l{position:static}}

.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2);counter-reset:l}
.ledger__row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:start;
  padding:1.75rem .2rem;border-bottom:1px solid var(--hair-2);position:relative;
  transition:padding-left .45s var(--ease);
}
.ledger__row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--accent),transparent);
  transition:width .6s var(--ease);
}
.ledger__row:hover{padding-left:1rem}
.ledger__row:hover::before{width:100%}
.ledger__no{font-family:var(--display);font-size:.84rem;color:var(--gold);padding-top:.35rem}
.ledger__body h3{font-family:var(--display);font-size:1.42rem;font-weight:500;
  margin:0 0 .45rem;letter-spacing:-.012em}
.ledger__body p{margin:0;color:var(--muted);font-size:.94rem;font-weight:300}
.ledger__body b{color:var(--accent-lt);font-weight:600;transition:color .6s var(--ease)}

/* ============================== MINERALS ================================ */
.minerals{background:linear-gradient(180deg,var(--ink),var(--ink-2) 45%,var(--ink))}
.min__head{max-width:760px;margin:0 auto 3rem;text-align:center}
.bignum{
  font-family:var(--display);font-size:clamp(5rem,15vw,11rem);line-height:.9;
  font-weight:600;display:inline-block;
  background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Exact column counts — 12 tiles divide evenly by 6, 4 and 3, so the grid
   never ends on a ragged half-empty row. */
.minegrid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--hair-2);border:1px solid var(--hair-2);
}
@media(max-width:900px){.minegrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.minegrid{grid-template-columns:repeat(3,1fr)}}
.mineral{
  background:var(--ink);padding:1.5rem .8rem 1.3rem;display:flex;flex-direction:column;
  align-items:center;gap:.3rem;position:relative;overflow:hidden;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.mineral::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.mineral:hover,.mineral.is-on{background:var(--ink-3)}
.mineral:hover::before,.mineral.is-on::before{transform:scaleX(1)}
.mineral b{
  font-family:var(--display);font-size:2rem;font-weight:500;line-height:1;
  color:var(--gold-lt);transition:color .35s;
}
.mineral:hover b,.mineral.is-on b{color:var(--accent-lt)}
.mineral span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.min__note{
  text-align:center;margin:1.6rem auto 0;min-height:1.6em;
  font-size:.92rem;color:var(--muted);font-style:italic;
  transition:opacity .25s;
}
.min__strip{
  max-width:var(--maxw);margin:3.5rem auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--hair);
}
.mstat{padding:2rem 1rem;display:flex;flex-direction:column;gap:.35rem;
  border-right:1px solid var(--hair-2);text-align:center;align-items:center}
.mstat:last-child{border-right:0}
.mstat b{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-weight:400;line-height:1;color:var(--text)}
.mstat--hero b{color:var(--gold-lt)}
.mstat span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ============================== RANGE =================================== */
.range{background:var(--ink)}
.range__head{max-width:760px;margin:0 auto 3.4rem;text-align:center}
.shelf{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2.5vw,2rem);align-items:end;
}
.bottle{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1.5rem .8rem 1.6rem;border:1px solid transparent;
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.bottle__glow{
  position:absolute;top:12%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 66%);
  opacity:0;transition:opacity .5s;filter:blur(44px);
}
.bottle img{
  height:clamp(180px,26vw,340px);width:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.7)) grayscale(.35) brightness(.72);
  transition:filter .5s var(--ease),transform .5s var(--ease);
}
.bottle:hover{transform:translateY(-8px)}
.bottle:hover img{filter:drop-shadow(0 30px 46px rgba(0,0,0,.75)) grayscale(0) brightness(1)}
.bottle.is-active{border-color:var(--hair);background:rgba(234,231,224,.02)}
.bottle.is-active img{filter:drop-shadow(0 34px 50px rgba(0,0,0,.8)) grayscale(0) brightness(1);
  transform:scale(1.05)}
.bottle.is-active .bottle__glow{opacity:1}
.bottle__name{font-family:var(--display);font-size:1.3rem;font-weight:500;margin-top:1rem}
.bottle__note{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.bottle__price{font-size:.88rem;color:var(--gold-lt);font-weight:600;margin-top:.3rem}
@media(max-width:760px){
  .shelf{grid-template-columns:1fr;gap:1rem}
  .bottle img{height:220px}
}
.rangedetail{max-width:660px;margin:3rem auto 0;text-align:center}
.rangedetail__desc{color:var(--muted);font-size:1rem;font-weight:300;margin:0 0 1.3rem}
.rangedetail__facts{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.5rem;
  justify-items:center}
.rangedetail__facts li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--muted)}
.rangedetail__facts li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;
  background:var(--accent);transition:background .6s var(--ease)}

/* ============================== RITUAL ================================== */
.ritual{background:var(--ink-2)}
.ritual__head{max-width:var(--maxw);margin:0 auto 3rem}
.rail{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:0}
.rail__item{padding:2rem 1.6rem 2rem 0;border-top:1px solid var(--hair);
  transition:border-color .5s var(--ease)}
.rail__item:hover{border-top-color:var(--gold)}
.rail__no{font-family:var(--display);font-size:.8rem;color:var(--gold);
  display:block;margin-bottom:1.5rem}
.rail__item h3{font-family:var(--display);font-size:1.3rem;font-weight:500;margin:0 0 .5rem}
.rail__item p{margin:0;color:var(--muted);font-size:.9rem;font-weight:300}

/* ============================== COMPARE ================================= */
.compare{background:var(--ink)}
.compare__head{max-width:760px;margin:0 auto 3rem;text-align:center}
.table-scroll{max-width:var(--maxw);margin:0 auto;overflow-x:auto}
.ctable{width:100%;min-width:860px;font-size:.88rem}
.ctable th,.ctable td{padding:1.05rem 1.1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hair-2)}
.ctable thead th{font-family:var(--display);font-size:1.12rem;font-weight:500;
  border-bottom:1px solid var(--hair);color:var(--text)}
.ctable thead th i{display:block;font-style:normal;font-family:var(--sans);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:.25rem}
.ctable__corner{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.ctable .is-us{background:rgba(201,162,39,.06)}
.ctable thead .is-us{border-bottom:1px solid var(--gold);color:var(--gold-lt)}
.ctable tbody td:first-child{color:var(--faint);font-size:.8rem}
.ctable b{display:block;font-weight:600;font-size:.9rem}
.ctable .y{color:#6fd6a3}
.ctable .m{color:var(--gold-lt)}
.ctable .n{color:rgba(234,231,224,.3)}
.ctable tbody tr:hover td.is-us{background:rgba(201,162,39,.12)}

/* ============================== ORDER =================================== */
.order{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.order__head{max-width:760px;margin:0 auto 3rem;text-align:center}
.builder{max-width:var(--maxw);margin:0 auto}
.builder__top{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.builder__jar{position:relative;display:grid;place-items:center}
.builder__jar::before{
  content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 66%);
  filter:blur(56px);transition:background .8s var(--ease);
}
.builder__jar img{
  position:relative;height:clamp(240px,32vw,420px);width:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.75));
  transition:opacity .35s var(--ease);
}
.builder__jar img.is-swapping{opacity:0}
.builder__lab{display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.85rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{padding:.62rem 1.15rem;border:1px solid var(--hair);font-size:.78rem;
  color:var(--muted);border-radius:2px;transition:all .3s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--faint)}
.chip.is-active{border-color:var(--accent);color:var(--text);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* Four SKUs beside the jar: a 2×2 block stays balanced, where auto-fit would
   orphan the fourth card on its own row. */
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hair-2);border:1px solid var(--hair-2);margin-bottom:1.8rem}
@media(min-width:1400px){.sizes{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.sizes{grid-template-columns:1fr}}
.size{position:relative;display:flex;flex-direction:column;gap:.28rem;text-align:left;
  padding:1.9rem 1.2rem 1.5rem;background:var(--ink);transition:background .35s var(--ease)}
.size:hover{background:var(--ink-3)}
.size.is-active{background:linear-gradient(180deg,rgba(201,162,39,.14),rgba(201,162,39,.03))}
.size.is-active::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold-foil)}
.size__flag{position:absolute;top:.65rem;right:.9rem;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:800}
.size__flag--alt{color:var(--turq-lt)}
.size__oz{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.size__name{font-family:var(--display);font-size:1.26rem;font-weight:500}
.size__price{font-family:var(--display);font-size:1.85rem;font-weight:400;line-height:1.15;
  color:var(--gold-lt);margin:.15rem 0}
.size__meta{font-size:.76rem;color:var(--muted)}
.size__unit{font-size:.7rem;color:#6fd6a3}
.builder__foot{display:flex;gap:1rem;align-items:stretch;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--hair)}
.qty button{width:46px;min-height:48px;font-size:1.05rem;color:var(--muted)}
.qty button:hover{background:rgba(234,231,224,.05);color:var(--text)}
.qty span{min-width:42px;text-align:center;font-weight:600;font-size:.92rem}
.builder__foot .btn{flex:1;min-width:230px}
.assur{list-style:none;padding:1.5rem 0 0;margin:1.5rem 0 0;border-top:1px solid var(--hair-2);
  display:flex;flex-wrap:wrap;gap:1.6rem}
.assur li{position:relative;padding-left:1.1rem;font-size:.76rem;color:var(--faint)}
.assur li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg)}
@media(max-width:860px){.builder__top{grid-template-columns:1fr}.builder__jar{display:none}}

/* ============================== PROMISE ================================= */
.promise{background:var(--ink-2);text-align:center}
.promise__in{max-width:660px;margin:0 auto}
.promise .btn{margin-top:1.8rem}

/* ============================== FAQ ===================================== */
.faq{background:var(--ink)}
.faq__head{max-width:var(--maxw);margin:0 auto 2.6rem}
.faq__list{max-width:860px;margin:0 auto;border-top:1px solid var(--hair-2)}
.fq{border-bottom:1px solid var(--hair-2)}
.fq summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-size:1rem;transition:color .3s}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:11px;height:11px;
  margin-top:-6px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);transition:transform .35s var(--ease)}
.fq[open] summary::after{transform:rotate(-135deg)}
.fq summary:hover{color:var(--gold-lt)}
.fq p{margin:0;padding:0 2rem 1.5rem 0;color:var(--muted);font-size:.93rem;font-weight:300;max-width:74ch}

/* ============================== FOOTER ================================== */
.foot{background:#040608;border-top:1px solid var(--hair-2);padding:4rem var(--pad) 2rem}
.foot__top{max-width:var(--maxw);margin:0 auto 2.6rem;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.5rem}
.foot__brand img{width:230px;margin-bottom:1rem}
.foot__brand p{color:var(--faint);font-size:.86rem;max-width:34ch;margin:0}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.foot__cols h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1rem;font-weight:700}
.foot__cols a{display:flex;align-items:center;min-height:38px;font-size:.85rem;color:var(--faint)}
.foot__cols a:hover{color:var(--text)}
.disclaimer{max-width:var(--maxw);margin:0 auto 1.6rem;padding:1.3rem 0;
  border-top:1px solid var(--hair-2)}
.disclaimer p{margin:0 0 .55rem;font-size:.74rem;color:var(--faint);line-height:1.6;max-width:92ch}
.disclaimer p:last-child{margin:0}
.disclaimer b{color:var(--muted)}
.foot__bar{max-width:var(--maxw);margin:0 auto;padding-top:1.3rem;
  border-top:1px solid var(--hair-2);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--faint)}
@media(max-width:820px){.foot__top{grid-template-columns:1fr}.foot__cols{grid-template-columns:repeat(2,1fr)}}

/* ============================== CART ==================================== */
.scrim{position:fixed;inset:0;background:rgba(3,4,6,.72);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:80}
.scrim.is-on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);z-index:90;
  background:var(--ink-2);border-left:1px solid var(--hair-2);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease)}
.cart.is-on{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 1.5rem;border-bottom:1px solid var(--hair-2)}
.cart__head h3{font-family:var(--display);font-size:1.4rem;margin:0;font-weight:500}
.cart__head button{font-size:1rem;color:var(--faint);width:32px;height:32px}
.cart__head button:hover{color:var(--text)}
.cart__body{flex:1;overflow-y:auto;padding:.5rem 1.5rem}
.cart__empty{text-align:center;color:var(--faint);padding:3rem 1rem;font-size:.88rem}
.ci{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--hair-2)}
.ci__img{width:40px;height:52px;object-fit:contain}
.ci__t{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ci__t b{font-size:.88rem;font-weight:500}
.ci__t i{font-size:.74rem;color:var(--faint);font-style:normal}
.ci__r{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.ci__r b{font-size:.88rem;color:var(--gold-lt)}
.ci__x{font-size:.68rem;color:var(--faint);text-decoration:underline}
.ci__x:hover{color:#f76fb4}
.cart__foot{padding:1.3rem 1.5rem;border-top:1px solid var(--hair-2);display:grid;gap:.5rem}
.cart__row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted)}
.cart__row--dim{color:var(--faint)}
.cart__row--total{padding-top:.7rem;border-top:1px solid var(--hair-2);color:var(--text);font-size:1rem}
.cart__row--total b{font-family:var(--display);font-size:1.4rem;color:var(--gold-lt)}
.cart__foot .btn{margin-top:.6rem}

/* ============================== MODAL =================================== */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.2rem;
  background:rgba(3,4,6,.84);backdrop-filter:blur(6px);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease)}
.modal.is-on{opacity:1;pointer-events:auto}
.modal__card{position:relative;width:min(540px,100%);max-height:92svh;overflow-y:auto;
  padding:2.2rem;background:var(--ink-2);border:1px solid var(--hair-2);
  transform:translateY(16px);transition:transform .4s var(--ease)}
.modal.is-on .modal__card{transform:none}
.modal__x{position:absolute;top:1rem;right:1rem;width:32px;height:32px;color:var(--faint)}
.modal__x:hover{color:var(--text)}
.modal__title{font-family:var(--display);font-size:1.85rem;margin:0 0 .4rem;font-weight:400}
.modal__sub{color:var(--faint);font-size:.88rem;margin:0 0 1.4rem}
.field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.4rem}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.field input,.field textarea{width:100%;padding:.82rem .9rem;border-radius:2px;resize:vertical;
  border:1px solid var(--hair);background:rgba(234,231,224,.035);color:var(--text);
  font-family:inherit;font-size:.92rem;transition:border-color .25s,background .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  background:rgba(234,231,224,.06)}
.field input.is-bad,.field textarea.is-bad{border-color:#f76fb4}
.modal__summary{margin:1.3rem 0;padding:1rem 0;border-top:1px solid var(--hair-2);
  border-bottom:1px solid var(--hair-2);display:grid;gap:.45rem;font-size:.84rem;color:var(--muted)}
.ms-row{display:flex;justify-content:space-between;gap:1rem}
.ms-total{padding-top:.55rem;border-top:1px solid var(--hair-2);color:var(--text);font-weight:600}
.modal__err{color:#f76fb4;font-size:.82rem;margin:0 0 .7rem;min-height:1.05em}
.modal__fine{font-size:.72rem;color:var(--faint);text-align:center;margin:.8rem 0 0}
.done{text-align:center;padding:1rem 0}
.done__tick{width:66px;height:66px;margin:0 auto 1.2rem;color:#6fd6a3}
.done__ref{display:flex;flex-direction:column;gap:.3rem;padding:1rem;margin:1.4rem 0;
  border:1px dashed var(--hair);background:rgba(201,162,39,.05)}
.done__ref span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.done__ref b{font-family:var(--display);font-size:1.5rem;color:var(--gold-lt);letter-spacing:.04em}
.done__pay{font-size:.9rem;color:var(--muted);margin:0 0 1.4rem}
.done__pay b{color:var(--text)}
@media(max-width:520px){.field2{grid-template-columns:1fr}.modal__card{padding:1.5rem}}

/* ============================== STICKY ================================== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.75rem 1.1rem;
  border-top:1px solid var(--hair);background:rgba(11,16,21,.95);backdrop-filter:blur(14px);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.sticky.is-on{transform:none}
.sticky__info{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sticky__info b{font-size:.86rem;font-weight:500}
.sticky__info i{font-size:.74rem;color:var(--faint);font-style:normal}
.sticky .btn{padding:.82rem 1.3rem;font-size:.74rem}
@media(min-width:1081px){.sticky{display:none}}

/* ============================== REVEAL ================================== */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1;transform:none}
}

::selection{background:rgba(201,162,39,.3);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(201,162,39,.28)}
::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.45)}

/* ==========================================================================
   BANNER SURFACES
   The supplied banners carry their own typography and their own rectangular
   edges. Everything below exists to dissolve those edges into the page and
   keep the images moving, so they read as part of the site rather than as
   artwork pasted on top of it.
   ========================================================================== */

/* ------------------------ hero banner carousel -------------------------- */
.showcase{
  position:relative;padding:0;background:var(--ink);
  padding-top:var(--navh);
}
/* Full-bleed with no cropping: the banners have different aspect ratios, so
   JS sizes this box to the active banner's own ratio and the height animates
   between slides. A fixed ratio here would either letterbox or crop. */
.showcase__frame{position:relative;width:100%;overflow:hidden}
/* The active slide sits in normal flow so the frame takes its natural height;
   the others are taken out of flow underneath it. Each banner therefore runs
   edge to edge at its own aspect ratio — no letterbox, no crop, no JS. */
.bslide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.bslide.is-active{position:relative;opacity:1;visibility:visible;z-index:1}
.bslide.is-active img{height:auto}
.bslide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1);display:block;
}
/* Ken Burns. Deliberately shallow: these banners have their headline set
   right to the edge, so anything more than a few percent crops the type. */
.bslide.is-active img{animation:kenburns 14s ease-out forwards}
@keyframes kenburns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.025) translate3d(-.3%,-.25%,0)}
}

/* The three layers that kill the "pasted rectangle" look. */
.showcase__fade{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.showcase__fade--top{top:0;height:26%;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(7,9,12,.55) 42%,transparent 100%)}
.showcase__fade--bottom{bottom:0;height:16%;
  background:linear-gradient(0deg,var(--ink) 0%,transparent 100%)}
.showcase__tint{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(7,9,12,.5) 100%)}

.showcase__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:50px;height:50px;border:1px solid rgba(234,231,224,.22);border-radius:50%;
  background:rgba(7,9,12,.4);backdrop-filter:blur(6px);
  transition:border-color .3s,background .3s;
}
.showcase__arrow::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:1.5px solid var(--gold-lt);border-right:1.5px solid var(--gold-lt)}
.showcase__arrow--prev{left:clamp(.6rem,2vw,1.6rem)}
.showcase__arrow--prev::after{transform:translate(-35%,-50%) rotate(-135deg)}
.showcase__arrow--next{right:clamp(.6rem,2vw,1.6rem)}
.showcase__arrow--next::after{transform:translate(-65%,-50%) rotate(45deg)}
.showcase__arrow:hover{border-color:var(--gold);background:rgba(201,162,39,.18)}

.showcase__mob{display:none}

.showcase__bar{
  /* Sits below the banner rather than over it — the artwork carries its own
     bottom row (badges, web address) and must not be covered. */
  position:relative;z-index:6;max-width:var(--maxw);margin:1.4rem auto 0;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.showcase__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.showcase__dots{display:flex;gap:.6rem;align-items:center}
.bdot{width:34px;height:3px;padding:10px 0;position:relative}
.bdot i{display:block;height:3px;background:rgba(234,231,224,.22);position:relative;overflow:hidden}
.bdot.is-active i::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform-origin:left;animation:bfill 6.5s linear forwards;
}
.showcase.is-paused .bdot.is-active i::after{animation-play-state:paused}
@keyframes bfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:900px){
  /* The baked-in banner type is unreadable at phone widths, so the frame
     shrinks to a band and real HTML copy carries the message instead. */
  /* height still comes from the active banner's ratio via JS */
  .showcase__fade--bottom{height:20%}
  .showcase__mob{
    display:block;position:relative;z-index:6;
    padding:1.6rem var(--pad) 0;text-align:center;
  }
  .showcase__mobtitle{
    font-family:var(--display);font-size:clamp(2rem,8.5vw,2.9rem);line-height:1.06;
    font-weight:400;letter-spacing:-.025em;margin:0 0 .7rem;
  }
  .showcase__mobtitle em{font-style:italic;color:var(--gold-lt)}
  .showcase__mobsub{color:var(--muted);font-size:.95rem;font-weight:300;margin:0 auto;max-width:34ch}
  .showcase__bar{margin-top:1.6rem;flex-direction:column;justify-content:center}
  .showcase__cta{width:100%;flex-direction:column}
  .showcase__cta .btn{width:100%}
  /* Swipe and the dots cover navigation on touch; the arrows only sat on top
     of the artwork. */
  .showcase__arrow{display:none}
}

/* --------------------- flavour-reactive banner band --------------------- */
.flavband{position:relative;padding:0 0 clamp(2rem,4vw,3rem);overflow:hidden;background:var(--ink)}
/* Same rule as the hero: the banner's own ratio, contained, never cropped. */
.flavband__stack{position:relative;width:100%;aspect-ratio:1800 / 961}
.flavband__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity .9s var(--ease),transform 1.6s var(--ease);
}
.flavband__img.is-active{opacity:1;transform:scale(1)}
.flavband__fade{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.flavband__fade--top{top:0;height:22%;
  background:linear-gradient(180deg,var(--ink),transparent)}
.flavband__fade--bottom{bottom:0;height:30%;
  background:linear-gradient(0deg,var(--ink),transparent)}
/* Below the artwork rather than over it — these banners use their lower edge. */
.flavband__switch{
  position:relative;z-index:4;margin-top:clamp(1rem,2.5vw,1.8rem);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.flavband__lab{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.flavband__pills{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:0 1rem}
.fpill{
  padding:.6rem 1.2rem;border:1px solid rgba(234,231,224,.2);border-radius:2px;
  background:rgba(7,9,12,.55);backdrop-filter:blur(8px);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--muted);transition:all .35s var(--ease);
}
.fpill:hover{color:var(--text);border-color:var(--faint)}
.fpill.is-active{
  color:#180f00;background:var(--gold-foil);border-color:transparent;
  box-shadow:0 6px 22px rgba(201,162,39,.3);
}


/* ------------------------------ parallax -------------------------------- */
/* Section-wide atmosphere: the banner sits far behind the content under a
   heavy scrim and drifts at a different rate to the scroll. */
.parallax{
  position:absolute;inset:-12% 0;z-index:0;pointer-events:none;overflow:hidden;
}
.parallax img{
  width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:saturate(.8);
  will-change:transform;
}
.parallax--deep img{opacity:.12}
.parallax::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(7,9,12,.86) 28%,
             rgba(7,9,12,.86) 72%,var(--ink) 100%);
}
.benefits,.minerals,.promise{position:relative;overflow:hidden}
.benefits > *:not(.parallax),
.minerals > *:not(.parallax),
.promise  > *:not(.parallax){position:relative;z-index:1}

/* ------------------------------ lifestyle ------------------------------- */
.life{background:var(--ink)}
.life__head{max-width:760px;margin:0 auto 3.4rem;text-align:center}
.lifegrid{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(1.5rem,4vw,3rem)}
.lifecard{
  margin:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.lifecard--rev{direction:rtl}
.lifecard--rev > *{direction:ltr}
/* These two banners carry their own headline, so they are contained at their
   own ratio rather than cropped to fill a cell. */
/* Each card carries its own image ratio, so the photo fills the frame edge
   to edge without letterboxing or cropping. */
.lifecard__media{
  position:relative;overflow:hidden;border:1px solid var(--hair-2);
  background:var(--ink-2);
}
.lifecard__media--women{aspect-ratio:1800 / 873}
.lifecard__media--family{aspect-ratio:1800 / 810}
.lifecard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform 1.4s var(--ease);
}
.lifecard:hover .lifecard__media img{transform:scale(1.03)}
.lifecard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(7,9,12,.42) 100%);
}
.lifecard figcaption h3{
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;
  margin:0 0 .7rem;letter-spacing:-.015em;
}
.lifecard figcaption p{margin:0;color:var(--muted);font-size:.96rem;font-weight:300}
@media(max-width:820px){
  .lifecard,.lifecard--rev{grid-template-columns:1fr;direction:ltr}
  .lifecard figcaption{text-align:center}
}

/* ---------------------------- bone health ------------------------------- */
.bones{background:var(--ink-2)}
.bones__head{max-width:760px;margin:0 auto 2.4rem;text-align:center}
.langtog{display:inline-flex;gap:0;margin-top:1.8rem;border:1px solid var(--hair)}
.langbtn{
  padding:.62rem 1.4rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted);transition:all .3s var(--ease);
}
.langbtn[lang="ur"]{font-size:.92rem;letter-spacing:0;text-transform:none}
.langbtn:hover{color:var(--text)}
.langbtn.is-active{background:var(--gold-foil);color:#180f00}
/* Full-bleed: pulled out past the section's own padding so the banner runs
   edge to edge like the hero slider. */
.bones__frame{
  position:relative;overflow:hidden;background:var(--ink);
  margin-inline:calc(-1 * var(--pad));
  border-block:1px solid var(--hair-2);
}
.bones__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.02);
  transition:opacity .8s var(--ease),transform 1.4s var(--ease);
}
.bones__img.is-active{position:relative;opacity:1;transform:scale(1);height:auto}
.bones__fade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 50%,transparent 55%,rgba(7,9,12,.4) 100%);
}


/* The jar carousel is no longer the first screen — it sits under the banner
   hero, so it drops the nav offset and the full-viewport height. */
.hero{
  min-height:0;
  padding:clamp(4rem,8vw,6.5rem) var(--pad);
}
.carousel__viewport{min-height:min(520px,58svh)}
@media(max-width:940px){.carousel__viewport{min-height:0}}

.field label .opt{text-transform:none;letter-spacing:.01em;color:rgba(234,231,224,.3);font-size:.68rem}

/* ==========================================================================
   PAYMENT — the online option is the one we want chosen, so it carries the
   colour, the badge and the perks; cash on delivery stays deliberately plain.
   ========================================================================== */
.cartnudge{
  display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;padding:.8rem .9rem;
  border-left:2px solid #25d366;background:rgba(37,211,102,.08);
}
.cartnudge b{color:#5fe39a;font-size:.86rem}
.cartnudge span{font-size:.76rem;color:var(--muted);line-height:1.5}

.paypick{display:grid;gap:.7rem;margin:1.4rem 0}
.payopt{
  position:relative;display:grid;gap:.5rem;text-align:left;padding:1.1rem 1.2rem;
  border:1px solid var(--hair);border-radius:3px;background:rgba(234,231,224,.02);
  transition:border-color .3s var(--ease),background .3s;
}
.payopt:hover{border-color:var(--faint)}
.payopt.is-active{border-color:var(--gold);background:rgba(201,162,39,.08)}
.payopt--online.is-active{border-color:#25d366;background:rgba(37,211,102,.09)}
.payopt__save{
  position:absolute;top:-9px;right:1rem;padding:.2rem .6rem;border-radius:2px;
  background:#25d366;color:#04220f;font-size:.6rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.payopt__head{display:flex;align-items:center;gap:.7rem}
.payopt__radio{
  width:17px;height:17px;border-radius:50%;border:1px solid var(--faint);flex:none;
  position:relative;transition:border-color .3s;
}
.payopt.is-active .payopt__radio{border-color:var(--gold)}
.payopt--online.is-active .payopt__radio{border-color:#25d366}
.payopt.is-active .payopt__radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold);
}
.payopt--online.is-active .payopt__radio::after{background:#25d366}
.payopt__title{font-family:var(--display);font-size:1.2rem;font-weight:500}
.payopt__body{font-size:.83rem;color:var(--muted);font-weight:300;padding-left:1.55rem}
.payopt__perks{display:grid;gap:.3rem;padding-left:1.55rem}
.payopt__perks i{
  position:relative;padding-left:1.1rem;font-style:normal;font-size:.78rem;color:var(--muted);
}
.payopt__perks i::before{
  content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;
  border-radius:50%;background:#25d366;
}
.payopt__perks i[data-perk="none"]::before{background:var(--faint)}

.paypanel{
  margin:0 0 1.3rem;padding:1.1rem;border:1px solid var(--hair);border-radius:3px;
  background:rgba(234,231,224,.02);
}
.paypanel__amt{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--hair-2);
}
.paypanel__amt span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.paypanel__amt b{font-family:var(--display);font-size:1.7rem;color:#5fe39a}

.paytabs{display:flex;gap:.4rem;margin-bottom:.9rem;flex-wrap:wrap}
.paytab{
  padding:.5rem 1rem;border:1px solid var(--hair);border-radius:2px;
  font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  transition:all .25s var(--ease);
}
.paytab:hover{color:var(--text);border-color:var(--faint)}
.paytab.is-active{background:var(--gold-foil);color:#180f00;border-color:transparent}
.paydetails{display:grid;gap:.1rem}
.payrow{
  display:grid;grid-template-columns:minmax(96px,.6fr) 1fr auto;gap:.8rem;
  align-items:center;padding:.6rem 0;border-bottom:1px solid var(--hair-2);
}
.payrow:last-child{border-bottom:0}
.payrow dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.payrow dd{margin:0;font-size:.92rem;font-weight:600;word-break:break-word}
.copybtn{
  padding:.35rem .7rem;border:1px solid var(--hair);border-radius:2px;
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  transition:all .25s;white-space:nowrap;
}
.copybtn:hover{border-color:var(--gold);color:var(--gold-lt)}
.copybtn.is-done{border-color:#25d366;color:#5fe39a}

.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  padding:1.6rem 1rem;border:1px dashed var(--hair);border-radius:3px;cursor:pointer;
  background:rgba(234,231,224,.02);transition:border-color .3s,background .3s;text-align:center;
}
.drop:hover{border-color:var(--gold);background:rgba(201,162,39,.05)}
.drop.is-set{border-style:solid;border-color:#25d366;background:rgba(37,211,102,.06)}
.drop.is-bad{border-color:#f76fb4}
.drop__icon{
  width:30px;height:30px;border:1px solid var(--faint);border-radius:50%;position:relative;flex:none;
}
.drop__icon::before,.drop__icon::after{
  content:"";position:absolute;background:var(--faint);
}
.drop__icon::before{left:50%;top:8px;width:1px;height:14px;transform:translateX(-50%)}
.drop__icon::after{top:50%;left:8px;height:1px;width:14px;transform:translateY(-50%)}
.drop.is-set .drop__icon{display:none}
.drop__text{font-size:.82rem;color:var(--muted)}
.drop__preview{max-height:170px;border-radius:3px;border:1px solid var(--hair-2)}

.ms-row--save{color:#5fe39a}
.ms-row--save span:last-child{font-weight:600}
.paynote{margin:.9rem 0 0;font-size:.78rem;color:var(--muted);font-weight:300}

/* ==========================================================================
   LANGUAGE — chooser, switch, and the right-to-left mirror for Urdu.
   ========================================================================== */
.langgate{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.2rem;
  background:rgba(4,6,9,.93);backdrop-filter:blur(10px);
}
.langgate__card{
  width:min(440px,100%);padding:2.6rem 2rem;text-align:center;
  background:linear-gradient(165deg,var(--ink-2),var(--ink));
  border:1px solid var(--hair);border-radius:4px;
}
.langgate__logo{width:190px;margin:0 auto 1.6rem}
.langgate__eyebrow{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 1.6rem;
}
.langgate__opts{display:grid;gap:.7rem}
.langgate__btn{
  display:flex;flex-direction:column;gap:.25rem;padding:1.1rem;
  border:1px solid var(--hair);border-radius:3px;background:rgba(234,231,224,.02);
  transition:border-color .3s var(--ease),background .3s,transform .3s var(--ease);
}
.langgate__btn:hover{border-color:var(--gold);background:rgba(201,162,39,.08);transform:translateY(-2px)}
.langgate__btn b{font-family:var(--display);font-size:1.5rem;font-weight:500}
.langgate__btn i{font-style:normal;font-size:.82rem;color:var(--muted)}
.langgate__btn--ur b{font-family:'Noto Nastaliq Urdu',serif;font-size:1.9rem;line-height:2}
.langgate__btn--ur i{font-family:'Noto Nastaliq Urdu',serif;line-height:2.2}
.langgate__note{font-size:.7rem;color:var(--faint);margin:1.5rem 0 0;line-height:1.7}

.langswitch{display:flex;border:1px solid var(--hair);border-radius:2px;overflow:hidden}
.langswitch__b{
  padding:.5rem .75rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  color:var(--faint);transition:all .25s;
}
.langswitch__b[lang="ur"]{font-family:'Noto Nastaliq Urdu',serif;letter-spacing:0;font-size:.78rem}
.langswitch__b:hover{color:var(--text)}
.langswitch__b.is-active{background:var(--gold-foil);color:#180f00}

/* ------------------------------- Urdu type ------------------------------ */
html.is-urdu body{font-family:'Noto Nastaliq Urdu','Inter',sans-serif;line-height:2.1}
html.is-urdu .h2,
html.is-urdu .slide__title,
html.is-urdu .showcase__mobtitle,
html.is-urdu .modal__title,
html.is-urdu .bignum,
html.is-urdu .size__name,
html.is-urdu .bottle__name,
html.is-urdu .cart__head h3,
html.is-urdu .ledger__body h3,
html.is-urdu .rail__item h3,
html.is-urdu .lifecard figcaption h3{
  font-family:'Noto Nastaliq Urdu',serif;line-height:1.9;letter-spacing:0;
}
/* Nastaliq needs vertical room; tighten the huge display sizes so it fits. */
html.is-urdu .h2{font-size:clamp(1.5rem,3.2vw,2.4rem)}
html.is-urdu .slide__title{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.7}
html.is-urdu .showcase__mobtitle{font-size:clamp(1.4rem,6vw,2rem);line-height:1.9}
html.is-urdu .kicker,
html.is-urdu .slide__eyebrow,
html.is-urdu .builder__lab,
html.is-urdu .size__oz,
html.is-urdu .field label,
html.is-urdu .assur li{letter-spacing:.04em}
html.is-urdu .btn{letter-spacing:.02em;text-transform:none;font-size:.88rem;line-height:1.9}
html.is-urdu .ticker__track span{letter-spacing:.04em;text-transform:none}
html.is-urdu .fq summary{line-height:2}

/* ------------------------------- RTL mirror ----------------------------- */
[dir="rtl"] .kicker__rule{background:linear-gradient(270deg,var(--gold),transparent)}
[dir="rtl"] .ledger__body p,
[dir="rtl"] .split__note,
[dir="rtl"] .slide__desc{text-align:right}
[dir="rtl"] .pdetail__facts li,
[dir="rtl"] .rangedetail__facts li,
[dir="rtl"] .assur li,
[dir="rtl"] .payopt__perks i{padding-left:0;padding-right:1.4rem}
[dir="rtl"] .pdetail__facts li::before,
[dir="rtl"] .rangedetail__facts li::before,
[dir="rtl"] .assur li::before,
[dir="rtl"] .payopt__perks i::before{left:auto;right:0}
[dir="rtl"] .note,
[dir="rtl"] .cartnudge{border-left:0;border-right:2px solid var(--gold)}
[dir="rtl"] .cartnudge{border-right-color:#25d366}
[dir="rtl"] .ledger__row:hover{padding-left:.2rem;padding-right:1rem}
[dir="rtl"] .ledger__row::before{left:auto;right:0;
  background:linear-gradient(270deg,var(--accent),transparent)}
[dir="rtl"] .rail__item{padding-right:0;padding-left:1.6rem}
[dir="rtl"] .ctable th,[dir="rtl"] .ctable td{text-align:right}
[dir="rtl"] .ta-r{text-align:left}
[dir="rtl"] .fq summary{padding:1.35rem 0 1.35rem 3rem}
[dir="rtl"] .fq summary::after{right:auto;left:.5rem}
[dir="rtl"] .fq p{padding:0 0 1.5rem 2rem}
[dir="rtl"] .size__flag{right:auto;left:.9rem}
[dir="rtl"] .payopt__save{right:auto;left:1rem}
[dir="rtl"] .payopt__body,
[dir="rtl"] .payopt__perks{padding-left:0;padding-right:1.55rem}
[dir="rtl"] .foot__cols a{flex-direction:row-reverse;justify-content:flex-end}

/* The cart drawer slides in from the leading edge, which flips in RTL. */
[dir="rtl"] .cart{right:auto;left:0;border-left:0;border-right:1px solid var(--hair-2);
  transform:translateX(-100%)}
[dir="rtl"] .cart.is-on{transform:none}

/* Carousel arrows point the way the reader is going. */
[dir="rtl"] .carousel__arrow--prev,[dir="rtl"] .showcase__arrow--prev{left:auto;right:-14px}
[dir="rtl"] .carousel__arrow--next,[dir="rtl"] .showcase__arrow--next{right:auto;left:-14px}
[dir="rtl"] .showcase__arrow--prev{right:clamp(.6rem,2vw,1.6rem);left:auto}
[dir="rtl"] .showcase__arrow--next{left:clamp(.6rem,2vw,1.6rem);right:auto}
[dir="rtl"] .carousel__arrow--prev::after,[dir="rtl"] .showcase__arrow--prev::after{
  transform:translate(-65%,-50%) rotate(45deg)}
[dir="rtl"] .carousel__arrow--next::after,[dir="rtl"] .showcase__arrow--next::after{
  transform:translate(-35%,-50%) rotate(-135deg)}

/* The marquee should travel with the reading direction. */
[dir="rtl"] .ticker__track{animation-direction:reverse}

[dir="rtl"] .progress{left:auto;right:0}
[dir="rtl"] .toast{left:50%}
[dir="rtl"] .nav.is-stuck .nav__logo,[dir="rtl"] .nav__brand{transform:translateX(50%)}
@media(min-width:1081px){[dir="rtl"] .nav__brand{transform:none}}