/* ============================================================
   Mishree Lotion — one page
   Palette and structure taken from the bottle label itself:
   chrome-yellow field, vermilion keyline, indigo script,
   warm brown-black ink, and the vertical GUARANTEED tab.
   ============================================================ */

:root{
  --yellow:  #E4DF28;
  --yellow-d:#CEC822;
  --red:     #DD2217;
  --indigo:  #2E3192;
  --ink:     #1C1508;
  --ink-2:   #2E2512;
  --paper:   #FFFDF2;
  --paper-2: #F6F1DD;
  --amber:   #8E2A10;
  --rule:    rgba(28,21,8,.16);
  --rule-lt: rgba(255,253,242,.20);

  --display: "Khand","Oswald","Arial Narrow",Arial,sans-serif;
  --text: "Mukta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
          "Helvetica Neue",Arial,sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bandpad: clamp(4rem, 9vw, 8rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .22vw,1.1rem);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

/* <picture> wrappers must not disturb the layouts their <img> sits in */
.masthead__mark picture,
.use__fig picture{ display:block; }
.hero__shot picture{ display:contents; }

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}
.band--ink :focus-visible,
.masthead :focus-visible{ outline-color:var(--red); }
.band--yellow :focus-visible{ outline-color:var(--indigo); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-family:var(--display);
  letter-spacing:.02em; text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- shared layout ---------- */
.wrap{
  width:100%;
  max-width:76rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:54rem; }

.band{
  padding-block:var(--bandpad);
  scroll-margin-top:5.5rem;
}
.band--paper{ background:var(--paper); color:var(--ink); }
.band--yellow{ background:var(--yellow); color:var(--ink); }
.band--ink{ background:var(--ink); color:var(--paper); }
.band--ink p{ color:rgba(255,253,242,.80); }

/* ---------- display type ---------- */
.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,1.3rem + 2.8vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0 0 1.1rem;
  color:var(--ink);
}
.h2--light{ color:var(--yellow); }

.intro{
  max-width:var(--measure);
  margin:0 0 3rem;
  font-size:1.09em;
  color:rgba(28,21,8,.74);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s ease;
}
.masthead.is-stuck{ box-shadow:0 1px 0 var(--red), 0 10px 24px -18px rgba(28,21,8,.6); }

.masthead__in{
  max-width:76rem; margin-inline:auto;
  padding:.55rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
  flex-wrap:wrap;
}
.masthead__mark{ display:block; flex:none; }
.masthead__mark img{ width:auto; height:clamp(2.5rem,4.4vw,2.95rem); }

.masthead__nav{
  margin-left:auto;
  display:flex; gap:clamp(.9rem,2vw,1.9rem);
  flex-wrap:wrap;
}
.masthead__nav a{
  font-family:var(--display);
  font-weight:500;
  font-size:1.07rem;
  letter-spacing:.012em;
  color:var(--ink);
  text-decoration:none;
  padding-block:.3rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.masthead__nav a:hover{ border-bottom-color:var(--red); }
.masthead__nav a.is-here{ border-bottom-color:var(--red); color:var(--red); }

/* ============================================================
   HERO — the one loud moment
   ============================================================ */
.hero{
  background:var(--yellow);
  border-bottom:3px solid var(--red);
  overflow:hidden;
  position:relative;
}
.hero__in{
  max-width:76rem; margin-inline:auto;
  padding:clamp(2.75rem,6vw,5rem) var(--gutter) 0;
  display:grid;
  grid-template-columns:max-content minmax(0,1.06fr) minmax(0,.94fr);
  column-gap:clamp(1.15rem,2.4vw,1.9rem);
  row-gap:0;
  align-items:end;
  position:relative;
}

/* the vertical GUARANTEED tab, lifted straight off the label */
.tab{
  align-self:start;
  margin:.4rem 0 0;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  background:var(--red);
  color:var(--paper);
  font-family:var(--display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.26em;
  padding:1.15rem .42rem;
}

.hero__text{ padding-bottom:clamp(2.5rem,5vw,4.5rem); }

.hero__h1{ margin:0 0 1.5rem; }
.hero__hi{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.3rem,.9rem + 5.4vw,4.6rem);
  line-height:1.14;
  letter-spacing:-.004em;
  text-wrap:balance;
  color:var(--ink);
}
.hero__en{
  display:block;
  margin-top:.7rem;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.3rem,.95rem + 1.5vw,2.05rem);
  line-height:1.15;
  color:var(--indigo);
}

.hero__lede{
  max-width:34ch;
  margin:0 0 2.2rem;
  font-size:1.07em;
  color:rgba(28,21,8,.8);
}

.facts{
  margin:0;
  display:grid;
  gap:1.1rem 1.75rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(28,21,8,.3);
  padding-top:1.15rem;
}
.facts div{ min-width:0; }
.facts dt{
  font-family:var(--display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.07em;
  color:var(--indigo);
  margin-bottom:.1rem;
}
.facts dd{
  margin:0;
  font-size:.93rem;
  line-height:1.45;
  color:rgba(28,21,8,.78);
}

/* bottle on its ink crest, echoing the badge printed on the label */
.hero__shot{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height:clamp(19rem,38vw,30rem);
}
.crest{
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:clamp(12rem,23vw,17.5rem);
  height:clamp(12rem,24vw,22rem);
  background:var(--ink);
  border-radius:.3rem .3rem 50% 50% / .3rem .3rem 24% 24%;
}
.crest::after{
  content:"";
  position:absolute; inset:.5rem;
  border:1px solid rgba(228,223,40,.42);
  border-radius:.18rem .18rem 50% 50% / .18rem .18rem 23% 23%;
}
.hero__bottle{
  position:relative;
  width:auto;
  height:clamp(18rem,36vw,29rem);
  filter:drop-shadow(0 26px 34px rgba(28,21,8,.42));
}

/* ============================================================
   WHAT IT TREATS
   ============================================================ */
.treats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(2rem,4vw,3.25rem);
}
.treat{ min-width:0; }
.treat h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.6rem;
  line-height:1.1;
  margin:0 0 .6rem;
  padding-top:.85rem;
  border-top:3px solid var(--red);
}
.treat h3 span{
  display:block;
  font-weight:500;
  font-size:1.18rem;
  color:var(--indigo);
  line-height:1.3;
}
.treat p{ margin:0; color:rgba(28,21,8,.76); }

/* ============================================================
   WHY IT WORKS
   ============================================================ */
.reasons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.25rem) clamp(2.5rem,6vw,5.5rem);
  margin-top:2.5rem;
}
.reason{ min-width:0; }
.reason h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.45rem;
  line-height:1.14;
  margin:0 0 .5rem;
  color:var(--yellow);
}
.reason p{ margin:0; max-width:46ch; }

/* ============================================================
   HOW TO USE
   ============================================================ */
.use{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.use__copy{ min-width:0; }

.steps{
  list-style:none;
  counter-reset:step;
  margin:0; padding:0;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 1.8rem 3.6rem;
  margin-bottom:1.8rem;
  border-bottom:1px solid var(--rule);
}
.steps li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-.22rem;
  font-family:var(--display);
  font-weight:700;
  font-size:2.3rem;
  line-height:1;
  color:var(--red);
}
.steps h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.4rem;
  line-height:1.15;
  margin:0 0 .35rem;
}
.steps p{ margin:0; max-width:52ch; color:rgba(28,21,8,.76); }

.use__fig{
  margin:0;
  position:sticky; top:6.5rem;
}
.use__fig img{
  width:100%;
  border:3px solid var(--red);
}
.use__fig figcaption{
  margin-top:.75rem;
  font-size:.9rem;
  line-height:1.5;
  color:rgba(28,21,8,.66);
}

/* ============================================================
   SAFETY — set as a label: red keyline on the yellow field
   ============================================================ */
.notice{
  border:3px solid var(--red);
  background:var(--yellow);
  padding:clamp(1.6rem,4vw,3rem);
}
.notice .h2{ margin-bottom:1.6rem; }
.notice__list{
  list-style:none;
  margin:0; padding:0;
  columns:2;
  column-gap:clamp(2rem,5vw,4rem);
}
.notice__list li{
  break-inside:avoid;
  padding:0 0 .8rem 1.5rem;
  margin-bottom:.8rem;
  position:relative;
  border-bottom:1px solid rgba(28,21,8,.22);
  max-width:46ch;
  line-height:1.52;
}
.notice__list li::before{
  content:"";
  position:absolute; left:0; top:.68em;
  width:.6rem; height:3px;
  background:var(--red);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--rule); }

.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.15rem 0;
  font-family:var(--display);
  font-weight:600;
  font-size:1.33rem;
  line-height:1.22;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary span{ flex:1; min-width:0; }
.qa summary::after{
  content:"";
  flex:none;
  width:1rem; height:1rem;
  margin-top:.42rem;
  background:
    linear-gradient(var(--red),var(--red)) center/100% 3px no-repeat,
    linear-gradient(var(--red),var(--red)) center/3px 100% no-repeat;
  transition:transform .22s ease;
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--red); }

.qa__body{ padding:0 0 1.4rem; }
@media (prefers-reduced-motion:no-preference){
  .qa[open] .qa__body{ animation:qaopen .24s cubic-bezier(.2,.7,.25,1); }
  @keyframes qaopen{ from{ opacity:0; transform:translateY(-.35rem); } }
}
.qa__body p{
  margin:0;
  max-width:var(--measure);
  color:rgba(28,21,8,.78);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.contact__note{
  max-width:34ch;
  margin:0 0 1.4rem;
}
.phone{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem,1.4rem + 4.6vw,4.6rem);
  line-height:1;
  letter-spacing:.012em;
  color:var(--yellow);
  text-decoration:none;
  border-bottom:4px solid var(--red);
  padding-bottom:.1em;
}
.phone:hover{ color:var(--paper); border-bottom-color:var(--yellow); }

.contact__where{
  border-left:3px solid var(--red);
  padding-left:clamp(1.1rem,2.5vw,1.9rem);
}
.contact__label{
  font-family:var(--display);
  font-weight:600;
  font-size:1.5rem;
  margin:0 0 .4rem;
  color:var(--yellow);
}
.contact address{
  font-style:normal;
  line-height:1.75;
  color:rgba(255,253,242,.82);
}

/* ============================================================
   FOOT
   ============================================================ */
.foot{
  background:var(--ink-2);
  color:rgba(255,253,242,.62);
  padding-block:2.6rem;
  border-top:1px solid var(--rule-lt);
}
.foot__dis{
  margin:0 0 1.8rem;
  max-width:68ch;
  font-size:.9rem;
  line-height:1.6;
}
.foot__rule{
  margin:0;
  padding-top:1.3rem;
  border-top:1px solid var(--rule-lt);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2rem;
  justify-content:space-between;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.02em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:62rem){
  .use{ grid-template-columns:1fr; }
  .use__fig{ position:static; max-width:30rem; margin-top:.5rem; }
  .reasons{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .notice__list{ columns:1; }
  .notice__list li{ max-width:none; }
}

@media (max-width:60rem){
  .hero__in{
    grid-template-columns:1fr;
    padding-top:clamp(2rem,7vw,3rem);
  }
  .hero__text{ padding-bottom:1rem; order:2; }
  .hero__shot{
    order:1; min-height:0; margin:0 auto .75rem 0;
    width:clamp(9rem,27vw,15rem);
  }
  .crest{ width:100%; height:clamp(11.5rem,30vw,17rem); }
  .hero__bottle{ height:clamp(16.5rem,42vw,23rem); }
  .band{ scroll-margin-top:7rem; }
  .tab{
    writing-mode:horizontal-tb;
    transform:none;
    align-self:start;
    justify-self:start;
    padding:.34rem .85rem;
    margin:0 0 1.2rem;
    order:0;
    letter-spacing:.2em;
  }
  .facts{ grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); }
  .masthead__in{ padding-block:.5rem; }
  .masthead__nav{
    margin-left:0;
    width:100%;
    gap:1.3rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:.35rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .masthead__nav::-webkit-scrollbar{ display:none; }
  .steps li{ padding-left:2.9rem; }
  .steps li::before{ font-size:1.9rem; }
}

/* ============================================================
   MOTION — one orchestrated load sequence, nothing else
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .hero__hi,
  .hero__en,
  .hero__lede,
  .facts,
  .hero__shot,
  .tab{
    animation:rise .72s cubic-bezier(.2,.7,.25,1) backwards;
  }
  .tab        { animation-delay:.02s; }
  .hero__hi   { animation-delay:.08s; }
  .hero__en   { animation-delay:.17s; }
  .hero__lede { animation-delay:.26s; }
  .facts      { animation-delay:.34s; }
  .hero__shot { animation-delay:.14s; animation-duration:.9s; }

  @keyframes rise{
    from{ opacity:0; transform:translateY(1.1rem); }
    to  { opacity:1; transform:translateY(0); }
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .masthead,.tab,.crest,.use__fig{ display:none; }
  .band,.hero{ background:#fff !important; color:#000 !important; padding-block:1.2rem; }
  .band--ink p,.contact address,.foot{ color:#000 !important; }
  .h2--light,.reason h3,.phone,.contact__label{ color:#000 !important; }
  .foot{ background:#fff; }
}