/* ============================================================
   MIRRA 慕然 / 純有機天然護膚
   v2 - Forest + bone + amber
   ============================================================ */

:root{
  --bone:       #F4F3EF;
  --bone-deep:  #E7E8E2;
  --stone:      #D3D6CD;
  --stone-lt:   #E0E2DA;
  --forest:     #1F3A2E;
  --forest-deep:#132219;
  --forest-mid: #2E5242;
  --sage:       #7C8F82;
  --amber:      #C98A2E;
  --amber-ink:  #8C5A12;
  --amber-lt:   #E5B25F;
  --ink:        #161C18;
  --ink-soft:   #55605A;
  --line:       rgba(22,28,24,.13);
  --line-dk:    rgba(244,243,239,.16);

  --f-display: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --f-serif-cn:'Noto Serif TC', 'Cormorant Garamond', serif;
  --f-body:    'Jost', 'Noto Serif TC', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(1.25rem, 4vw, 4rem);
}

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

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

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(.95rem,.35vw + .88rem,1.05rem);
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grain: fixed + pointer-events-none only */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
ul{ list-style:none; margin:0; padding:0; }

.wrap{ width:min(1240px,100% - var(--pad)*2); margin-inline:auto; }

/* ---------- headings ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:400; line-height:1.12; letter-spacing:-.01em; margin:0;
}
.sec-title{ font-size:clamp(2rem,4.2vw,3.5rem); }
.sec-lede{
  font-family:var(--f-serif-cn);
  font-size:clamp(.95rem,.5vw + .85rem,1.08rem);
  color:var(--ink-soft); font-weight:300;
  max-width:54ch; margin:1.4rem 0 0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 2.2em; white-space:nowrap;
  font-family:var(--f-body); font-size:.8rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }

.btn--solid{ background:var(--forest); color:var(--bone); border-color:var(--forest); }
.btn--solid::before{ background:var(--forest-deep); }
.btn--solid:hover{ border-color:var(--forest-deep); }

.btn--ghost{ background:transparent; color:var(--bone); border-color:rgba(244,243,239,.55); }
.btn--ghost::before{ background:var(--bone); }
.btn--ghost:hover{ color:var(--forest-deep); border-color:var(--bone); }

.btn--ghost-dark{ background:transparent; color:var(--forest); border-color:var(--line); }
.btn--ghost-dark::before{ background:var(--forest); }
.btn--ghost-dark:hover{ color:var(--bone); border-color:var(--forest); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.6rem 0; color:var(--bone);
  transition:padding .45s var(--ease), background .45s var(--ease), color .4s var(--ease), box-shadow .45s var(--ease);
}
.nav__inner{
  width:min(1240px,100% - var(--pad)*2); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__logo{ display:flex; align-items:center; gap:.75rem; }
.nav__logo-mark{
  width:2.1rem; height:2.1rem; flex:none; display:grid; place-items:center;
  border:1px solid currentColor;
  font-family:var(--f-display); font-size:1.15rem; line-height:1;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__logo:hover .nav__logo-mark{ background:var(--amber-ink); color:var(--bone); border-color:var(--amber-ink); }
.nav__logo-text{
  font-family:var(--f-body); font-size:.86rem; font-weight:400;
  letter-spacing:.3em; line-height:1; display:flex; align-items:baseline; gap:.5rem;
}
.nav__logo-cn{ font-family:var(--f-serif-cn); font-size:.8rem; letter-spacing:.24em; opacity:.62; }

.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.35rem; position:relative; white-space:nowrap;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.75em 1.5em; border:1px solid currentColor; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__cta:hover{ background:var(--amber-ink); border-color:var(--amber-ink); color:var(--bone); }

.nav.is-stuck{
  color:var(--ink); padding:.95rem 0;
  background:rgba(244,243,239,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  background:var(--forest-deep); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:58% 42%;
  animation:heroZoom 24s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(15,26,19,.92) 0%, rgba(15,26,19,.68) 40%, rgba(15,26,19,.14) 76%),
    linear-gradient(to top, rgba(15,26,19,.72), transparent 52%);
}

.hero__content{
  position:relative; z-index:2;
  width:min(1240px,100% - var(--pad)*2); margin-inline:auto;
  padding:8rem 0 5rem; color:var(--bone);
  display:grid; grid-template-columns:1fr auto;
  align-items:end; gap:3rem;
}
.hero__lead{ max-width:44rem; }

.hero__eyebrow{
  font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--amber-lt); margin:0 0 2rem;
  animation:riseIn 1s var(--ease) .15s both;
}
.hero__title{
  font-family:var(--f-display);
  font-size:clamp(2.8rem,7.4vw,6.2rem);
  font-weight:300; line-height:1.04; letter-spacing:-.02em;
  margin:0 0 1.8rem; max-width:16ch;
  animation:riseIn 1.1s var(--ease) .3s both;
}
.hero__title em{
  color:var(--amber-lt); font-style:italic; position:relative;
}
.hero__title em::after{
  content:''; position:absolute; left:0; right:0; bottom:.1em; height:1px;
  background:currentColor; opacity:.45;
  transform:scaleX(0); transform-origin:left;
  animation:lineGrow 1.2s var(--ease) 1.2s forwards;
}
@keyframes lineGrow{ to{ transform:scaleX(1); } }

.hero__sub{
  font-family:var(--f-serif-cn);
  font-size:clamp(1rem,.55vw + .9rem,1.18rem);
  line-height:2; color:rgba(244,243,239,.84);
  margin:0 0 2.8rem; max-width:36ch;
  animation:riseIn 1.1s var(--ease) .45s both;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  animation:riseIn 1.1s var(--ease) .6s both;
}

/* side quote card */
.hero__card{
  align-self:end;
  width:20rem; padding:1.8rem 1.6rem;
  border-left:2px solid var(--amber-lt);
  background:rgba(19,34,25,.42);
  backdrop-filter:blur(8px);
  animation:riseIn 1.1s var(--ease) .8s both;
}
.hero__card-q{
  font-family:var(--f-serif-cn); font-size:.95rem; line-height:2;
  color:rgba(244,243,239,.9); margin:0 0 .9rem;
}
.hero__card-a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-lt); margin:0;
}

@keyframes riseIn{ from{ opacity:0; transform:translateY(2.2rem); } to{ opacity:1; transform:none; } }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{ background:var(--forest); color:var(--bone); padding:clamp(2.2rem,4vw,3.2rem) 0; }
.trustbar__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.6rem 3rem;
}
.trustbar__label{
  margin:0; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--amber-lt); flex:none;
}
.trustbar__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.8rem,4vw,4rem); }
.trustbar__facts li{ display:flex; flex-direction:column; gap:.28rem; }
.trustbar__facts strong{
  font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:400; line-height:1; color:var(--bone);
}
.trustbar__facts span{ font-size:.7rem; letter-spacing:.14em; color:rgba(244,243,239,.62); }

/* ============================================================
   2. PROMISE
   ============================================================ */
.promise{ padding:clamp(6rem,12vw,11rem) 0; background:var(--bone); }
.promise__head{ max-width:62ch; margin-bottom:clamp(3.5rem,7vw,5.5rem); }

.promise__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.promise__card{
  background:var(--bone); position:relative;
  padding:clamp(2.2rem,3.5vw,3.2rem) clamp(1.6rem,2.5vw,2.4rem);
  transition:background .5s var(--ease);
}
.promise__card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.promise__card:hover{ background:var(--bone-deep); }
.promise__card:hover::before{ transform:scaleX(1); }

.promise__icon{
  width:2.6rem; height:2.6rem; margin-bottom:1.8rem; color:var(--forest);
  transition:color .45s var(--ease), transform .55s var(--ease);
}
.promise__icon svg{ width:100%; height:100%; }
.promise__card:hover .promise__icon{ color:var(--amber-ink); transform:translateY(-3px); }

.promise__card h3{
  font-family:var(--f-serif-cn); font-weight:500;
  font-size:1.1rem; letter-spacing:.02em; margin-bottom:.9rem;
}
.promise__card p{ margin:0; font-size:.9rem; line-height:1.95; color:var(--ink-soft); }

/* ============================================================
   3. INGREDIENTS
   ============================================================ */
.ingredients{
  display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--bone-deep); align-items:stretch;
}
.ingredients__media{ position:relative; overflow:hidden; min-height:36rem; }
.ingredients__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.ingredients__media:hover img{ transform:scale(1.045); }
.ingredients__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.2rem clamp(1.5rem,3vw,2.5rem);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,243,239,.82);
  background:linear-gradient(to top, rgba(15,26,19,.72), transparent);
}

.ingredients__body{ padding:clamp(4rem,7vw,7rem) clamp(2rem,5vw,5.5rem); }
.ingredients__head{ margin-bottom:3rem; }

.ing-list{ border-top:1px solid var(--line); }
.ing-list li{
  position:relative; display:block;
  padding:1.6rem 0 1.6rem 1.5rem;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.ing-list li::before{
  content:''; position:absolute; left:0; top:2.1rem;
  width:.42rem; height:.42rem; border-radius:50%;
  background:var(--amber-ink);
  transition:transform .45s var(--ease);
}
.ing-list li:hover{ padding-left:2.2rem; }
.ing-list li:hover::before{ transform:scale(1.5); }
.ing-list h4{
  font-family:var(--f-serif-cn); font-weight:500;
  font-size:1.05rem; margin-bottom:.45rem;
}
.ing-list p{ margin:0; font-size:.87rem; line-height:1.9; color:var(--ink-soft); }

/* ============================================================
   4. PRODUCTS
   ============================================================ */
.products{ padding:clamp(6rem,12vw,11rem) 0; background:var(--bone); }
.products__head{ max-width:58ch; margin-bottom:clamp(3.5rem,7vw,5.5rem); }

.products__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.4rem,2.4vw,2.4rem);
}
.pcard{
  background:var(--bone-deep); display:flex; flex-direction:column;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pcard:hover{
  transform:translateY(-.6rem);
  box-shadow:0 2rem 4rem -1.5rem rgba(22,28,24,.18);
}
.pcard__img{ overflow:hidden; aspect-ratio:4/3; background:var(--stone); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pcard:hover .pcard__img img{ transform:scale(1.06); }

.pcard__body{ padding:clamp(1.6rem,2.2vw,2.1rem); display:flex; flex-direction:column; flex:1; }
.pcard__tag{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber-ink); margin-bottom:.85rem;
}
.pcard h3{ font-family:var(--f-serif-cn); font-weight:500; font-size:1.18rem; margin-bottom:.75rem; }
.pcard p{ margin:0 0 1.3rem; font-size:.86rem; line-height:1.9; color:var(--ink-soft); }

.pcard__facts{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; }
.pcard__facts li{
  font-size:.68rem; letter-spacing:.1em;
  padding:.35em .8em; border:1px solid var(--line); color:var(--ink-soft);
}

.pcard__foot{
  margin-top:auto; padding-top:1.3rem; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.pcard__price{ font-family:var(--f-display); font-size:1.35rem; color:var(--forest); }
.pcard__link{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding-bottom:.2rem; white-space:nowrap;
}
.pcard__link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.pcard__link:hover{ color:var(--amber-ink); }
.pcard__link:hover::after{ transform:scaleX(1); transform-origin:left; }

.products__note{
  margin:clamp(3rem,5vw,4.5rem) 0 0; max-width:56ch;
  font-family:var(--f-serif-cn); font-size:.92rem;
  color:var(--ink-soft); padding-top:2.5rem; border-top:1px solid var(--line);
}

/* ============================================================
   5. CRAFT
   ============================================================ */
.craft{ padding:clamp(6rem,12vw,11rem) 0; background:var(--forest-deep); color:var(--bone); }
.craft__wrap{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.craft__head{ margin-bottom:1.8rem; }
.craft .sec-title{ color:var(--bone); }

.craft__lead{
  font-family:var(--f-serif-cn);
  font-size:clamp(.95rem,.5vw + .86rem,1.08rem);
  line-height:2.05; color:rgba(244,243,239,.76);
  margin:0 0 3rem; max-width:44ch;
}

.craft__steps{ display:flex; flex-direction:column; }
.craft__step{
  position:relative; padding:1.5rem 0 1.5rem 1.5rem;
  border-top:1px solid var(--line-dk);
}
.craft__step:last-child{ border-bottom:1px solid var(--line-dk); }
.craft__step::before{
  content:''; position:absolute; left:0; top:1.95rem;
  width:.42rem; height:.42rem; border-radius:50%;
  background:var(--amber-lt);
  transition:transform .45s var(--ease);
}
.craft__step:hover::before{ transform:scale(1.5); }
.craft__step h4{
  font-family:var(--f-serif-cn); font-weight:500;
  font-size:1.02rem; color:var(--bone); margin-bottom:.4rem;
}
.craft__step p{ margin:0; font-size:.86rem; line-height:1.9; color:rgba(244,243,239,.62); }

.craft__media{ position:relative; }
.craft__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.craft__badge{
  position:absolute; right:-1.2rem; bottom:-1.2rem;
  width:7.5rem; height:7.5rem; display:grid; place-content:center; text-align:center;
  background:var(--amber); color:var(--forest-deep); border-radius:50%;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-.7rem); } }
.craft__badge-num{ font-family:var(--f-display); font-size:2.4rem; line-height:1; font-weight:500; }
.craft__badge-lbl{ font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; }

/* ============================================================
   6. VOICES
   ============================================================ */
.voices{ padding:clamp(6rem,12vw,11rem) 0; background:var(--bone-deep); }
.voices__head{ max-width:44ch; margin-bottom:clamp(3.5rem,7vw,5.5rem); }

.voices__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1.5rem,3vw,2.8rem);
}
.quote{
  margin:0; background:var(--bone);
  padding:clamp(2.2rem,3.2vw,3rem) clamp(1.6rem,2.4vw,2.4rem);
  display:flex; flex-direction:column;
  border-bottom:2px solid transparent;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.quote:hover{ border-color:var(--amber); transform:translateY(-.4rem); }
.quote blockquote{
  margin:0 0 2rem; flex:1;
  font-family:var(--f-serif-cn);
  font-size:clamp(.93rem,.4vw + .87rem,1.02rem);
  line-height:2.1; color:var(--ink);
}
.quote figcaption{
  display:flex; flex-direction:column; gap:.35rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.quote figcaption strong{ font-family:var(--f-display); font-size:1.05rem; font-weight:500; letter-spacing:.02em; }
.quote figcaption span{ font-size:.74rem; letter-spacing:.1em; color:var(--ink-soft); }

.voices__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:2rem; margin-top:clamp(3.5rem,6vw,5.5rem);
  padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--line); text-align:center;
}
.voices__stats div{ display:flex; flex-direction:column; gap:.5rem; }
.voices__stats strong{
  font-family:var(--f-display); font-size:clamp(2rem,3.6vw,3rem);
  font-weight:400; color:var(--forest); line-height:1;
}
.voices__stats span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   7. CONSULT  (文字在左，圖在右)
   ============================================================ */
.consult{ display:grid; grid-template-columns:1fr 1fr; background:var(--bone); }
.consult__panel{
  padding:clamp(4rem,7vw,7rem) clamp(2rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.consult__head{ margin-bottom:2.6rem; }
.consult__head .sec-lede{ max-width:46ch; }

.consult__list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2.8rem; }
.consult__list li{
  display:flex; align-items:flex-start; gap:.9rem;
  font-size:.9rem; color:var(--ink-soft); line-height:1.8;
}
.consult__list svg{ width:1.1rem; height:1.1rem; color:var(--amber-ink); flex:none; margin-top:.45rem; }

.consult__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.8rem; }
.consult__fine{ font-size:.75rem; letter-spacing:.06em; color:var(--ink-soft); margin:0; }

.consult__bg{ position:relative; min-height:36rem; overflow:hidden; }
.consult__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.consult:hover .consult__bg img{ transform:scale(1.04); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--forest-deep); color:var(--bone); padding-top:clamp(4rem,7vw,6rem); }
.foot__inner{
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:clamp(2.5rem,5vw,5rem); padding-bottom:clamp(3rem,5vw,4.5rem);
}
.foot__brand{ display:flex; gap:1.2rem; align-items:flex-start; }
.foot__mark{
  width:3rem; height:3rem; flex:none; display:grid; place-items:center;
  border:1px solid rgba(244,243,239,.35);
  font-family:var(--f-display); font-size:1.5rem; color:var(--amber-lt);
}
.foot__brand strong{
  display:block; font-family:var(--f-body); font-size:.88rem;
  letter-spacing:.3em; margin-bottom:.75rem;
}
.foot__brand p{ margin:0; font-size:.8rem; line-height:1.9; color:rgba(244,243,239,.55); }

.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot__cols h5{
  font-family:var(--f-body); font-size:.72rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--amber-lt); margin:0 0 1.3rem;
}
.foot__cols a, .foot__cols span{
  display:block; font-size:.82rem; line-height:2.1;
  color:rgba(244,243,239,.62); transition:color .35s var(--ease);
}
.foot__cols a:hover{ color:var(--amber-lt); }

.foot__bar{
  border-top:1px solid var(--line-dk); padding:1.6rem var(--pad);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.72rem; letter-spacing:.06em; color:rgba(244,243,239,.62);
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero__content{ grid-template-columns:1fr; align-items:start; gap:2.5rem; }
  .hero__card{ width:100%; max-width:26rem; align-self:auto; }
  .ingredients{ grid-template-columns:1fr; }
  .ingredients__media{ min-height:26rem; }
  .craft__wrap{ grid-template-columns:1fr; }
  .craft__media img{ aspect-ratio:4/3; }
  .craft__badge{ right:1rem; bottom:-1.2rem; width:6.5rem; height:6.5rem; }
  .craft__badge-num{ font-size:2rem; }
  .consult{ grid-template-columns:1fr; }
  .consult__bg{ min-height:24rem; order:2; }
  .consult__panel{ order:1; }
  .foot__inner{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__cta{ padding:.65em 1.1em; font-size:.72rem; }
  .hero__content{ padding:7rem 0 4.5rem; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .foot__bar{ flex-direction:column; }
  .trustbar__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:560px){
  .products__grid, .voices__grid{ grid-template-columns:1fr; }
  .ingredients__body{ padding:3rem 1.4rem; }
  .consult__panel{ padding:3rem 1.4rem; }
  .foot__cols{ grid-template-columns:1fr; }
  .hero__card{ padding:1.4rem 1.2rem; }
  .craft__badge{ width:5.5rem; height:5.5rem; right:.6rem; }
  .craft__badge-num{ font-size:1.7rem; }
  .craft__badge-lbl{ font-size:.55rem; }
}

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