/* ============================================================================
   NUTROSIL WELLNESS — style.css
   Premium botanical D2C wellness aesthetic.
   Stack: HTML5 + CSS3 + Vanilla JS (no frameworks).

   CONTENTS
   01. Design tokens (:root)
   02. Reset & base
   03. Layout primitives (container, section, eyebrow, heads)
   04. Buttons
   05. Utilities & scroll-reveal
   06. Announcement bar
   07. Header / navigation
   08. Hero (+ floating bottles signature)
   09. Trust indicators
   10. Why Nutrosil (feature cards)
   11. About
   12. Products (collection grid)
   13. Product modal
   14. Science & Quality (dark timeline signature)
   15. Certifications
   16. Testimonials (slider)
   17. FAQ (accordion)
   18. Instagram
   19. Contact + forms
   20. Newsletter
   21. Footer
   22. Back-to-top
   23. Keyframes
   24. Responsive (mobile-first → up)
   25. Reduced motion & print
   ============================================================================ */


/* ============================================================================
   01. DESIGN TOKENS
   ============================================================================ */
:root {
  /* --- Brand palette: deep botanical green + warm honey accent --- */
  --ink: #15241D;
  /* primary text — near-black green        */
  --ink-soft: #4C5B53;
  /* secondary text                          */
  --ink-mute: #7A8880;
  /* tertiary / captions                     */

  --green: #0E3B2E;
  /* brand primary                           */
  --green-deep: #0A2A20;
  /* darker green                            */
  --green-900: #07201A;
  /* deepest — footer                        */
  --green-mid: #1C5C44;
  /* interactive / hover                     */
  --green-bright: #2F8F66;
  /* fresh accent (leaves, highlights)       */

  --sage: #E8EFE8;
  /* soft panel tint                         */
  --sage-2: #DCE7DC;
  /* deeper sage                             */
  --sage-line: #D2DFD4;
  /* hairline borders                        */

  --gold: #BD9540;
  /* warm premium accent (used sparingly)    */
  --gold-2: #D7B264;
  /* lighter gold                            */
  --gold-soft: #F1E7CF;
  /* gold tint                               */

  --bone: #F6F3EB;
  /* warm off-white page background           */
  --cream: #FCFAF4;
  /* lighter surface                         */
  --white: #FFFFFF;

  --danger: #C0492F;
  /* form errors                             */
  --success: #2F8F66;

  /* --- Shadows (green-tinted for cohesion) --- */
  --sh-sm: 0 1px 2px rgba(10, 42, 32, .06), 0 1px 3px rgba(10, 42, 32, .05);
  --sh-md: 0 8px 24px rgba(10, 42, 32, .09);
  --sh-lg: 0 22px 60px rgba(10, 42, 32, .16);
  --sh-green: 0 16px 34px rgba(14, 59, 46, .28);
  --sh-gold: 0 12px 26px rgba(189, 149, 64, .28);

  /* --- Radii --- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: clamp(1.1rem, 4vw, 2.25rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* --- Type --- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;

  /* --- Focus --- */
  --ring: 0 0 0 3px rgba(189, 149, 64, .45);
}


/* ============================================================================
   02. RESET & BASE
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* keep anchored sections clear of sticky header */
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--green);
  color: var(--cream);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--green);
  color: var(--cream);
  padding: .7rem 1.2rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
  top: 1rem;
}


/* ============================================================================
   03. LAYOUT PRIMITIVES
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Standard section vertical rhythm (only on elements with .section) */
.section {
  padding-block: var(--section-y);
}

/* Section header block (centered intro) */
.section__head {
  max-width: 740px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section__title {
  font-size: clamp(1.85rem, 1rem + 3vw, 3rem);
  font-weight: 700;
}

.section__lead {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, .96rem + .3vw, 1.18rem);
  max-width: 60ch;
  margin-inline: auto;
}

/* Eyebrow label with leading gold rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}

.section__head .eyebrow {
  justify-content: center;
}


/* ============================================================================
   04. BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .92rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out),
    background var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(.99);
}

/* Primary — filled brand green */
.btn--primary {
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: var(--cream);
  box-shadow: var(--sh-green);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(14, 59, 46, .34);
}

/* Ghost — outlined on light backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(21, 36, 29, .22);
}

.btn--ghost:hover {
  border-color: var(--green);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Outline — subtle, for Learn More */
.btn--outline {
  background: var(--white);
  color: var(--green);
  border: 1.5px solid var(--sage-2);
}

.btn--outline:hover {
  border-color: var(--green);
  background: var(--sage);
  transform: translateY(-2px);
}

/* WhatsApp — recognizable WhatsApp green */
.btn--whatsapp {
  background: linear-gradient(135deg, #2BD06E, #1FA855);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 168, 85, .3);
}

.btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(31, 168, 85, .4);
}

.btn--whatsapp svg {
  flex-shrink: 0;
}

/* Sizes / widths */
.btn--small {
  padding: .62rem 1.05rem;
  font-size: .82rem;
}

.btn--block {
  width: 100%;
}


/* ============================================================================
   05. UTILITIES & SCROLL-REVEAL
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children inside grids when revealed */
.reveal:nth-child(2) {
  transition-delay: .05s;
}

.reveal:nth-child(3) {
  transition-delay: .1s;
}

.reveal:nth-child(4) {
  transition-delay: .15s;
}

.reveal:nth-child(5) {
  transition-delay: .2s;
}

.reveal:nth-child(6) {
  transition-delay: .25s;
}


/* ============================================================================
   06. ANNOUNCEMENT BAR
   ============================================================================ */
.announcement {
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  color: var(--cream);
  font-size: .82rem;
}

.announcement__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: .6rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.announcement__text {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  letter-spacing: .02em;
  text-align: center;
}

.announcement__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 0 rgba(215, 178, 100, .6);
  animation: pulse 2.4s infinite;
}

.announcement__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cream);
  font-size: 1.3rem;
  line-height: 1;
  opacity: .7;
  padding: .2rem .4rem;
  transition: opacity var(--t-fast);
}

.announcement__close:hover {
  opacity: 1;
}

.announcement.is-hidden {
  display: none;
}


/* ============================================================================
   07. HEADER / NAVIGATION
   ============================================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(246, 243, 235, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.header--scrolled {
  background: rgba(252, 250, 244, .92);
  border-bottom-color: var(--sage-line);
  box-shadow: 0 4px 24px rgba(10, 42, 32, .06);
}

.nav {
  max-width: var(--container);
  margin-inline: auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--green);
  flex-shrink: 0;
}

.nav__mark {
  transition: transform var(--t) var(--ease);
}

.nav__brand:hover .nav__mark {
  transform: rotate(-8deg) scale(1.05);
}

.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.nav__list {
  display: none;
}

/* shown as inline row on desktop */

.nav__link {
  position: relative;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-soft);
  padding: .4rem 0;
  transition: color var(--t-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--r-sm);
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================================
   08. HERO  (+ floating bottles signature)
   ============================================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(47, 143, 102, .10), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(189, 149, 64, .10), transparent 55%),
    linear-gradient(180deg, var(--cream), var(--bone));
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 59, 46, .05) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero__content {
  max-width: 620px;
}

.hero__title {
  font-size: clamp(2.3rem, 1rem + 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.hero__subtitle {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 50ch;
}

.hero__actions {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.hero__badges {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  color: var(--green);
}

.hero__badge::before {
  content: "✓";
  font-size: .72rem;
  color: var(--gold);
  font-weight: 700;
}

/* Bottle composition */
.hero__visual {
  position: relative;
  height: clamp(400px, 52vw, 580px);
  cursor: pointer;
  transition: transform var(--t-slow) var(--ease-out);
}

.hero__visual:hover {
  transform: scale(1.03) translateY(-6px);
}

.hero__visual:hover .bottle-render--front {
  filter: drop-shadow(0 28px 50px rgba(14, 59, 46, .45)) brightness(1.05);
}

.hero__visual:hover .bottle-render--left {
  transform: rotate(-9deg) translateX(-8px) translateY(-6px);
  filter: drop-shadow(var(--sh-green)) saturate(1) brightness(0.95);
}

.hero__visual:hover .bottle-render--right {
  transform: rotate(9deg) translateX(8px) translateY(-6px);
  filter: drop-shadow(var(--sh-green)) saturate(1) brightness(0.95);
}

.hero__glow {
  position: absolute;
  inset: 6% 8%;
  background: radial-gradient(circle at 50% 45%, rgba(47, 143, 102, .35), rgba(189, 149, 64, .18) 45%, transparent 70%);
  filter: blur(28px);
  border-radius: 50%;
  animation: glowPulse 7s ease-in-out infinite;
  transition: opacity var(--t-slow);
}

.hero__visual:hover .hero__glow {
  opacity: 1.4;
  filter: blur(36px);
}

/* Bottle composition - Image Renders */
.bottle-render {
  position: absolute;
  animation: float 6s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(var(--sh-green));
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}

/* Image 1 — top, slightly right of center */
.bottle-render--front {
  top: 2%;
  left: 32%;
  width: clamp(200px, 28vw, 290px);
  z-index: 3;
  animation-name: float;
}

/* Image 2 — bottom-left corner of image 1, overlapping */
.bottle-render--left {
  top: 48%;
  left: 4%;
  width: clamp(185px, 25vw, 260px);
  z-index: 2;
  filter: drop-shadow(var(--sh-green)) brightness(0.95);
  animation-delay: 0.8s;
}

/* Image 3 — bottom-right corner of image 2, overlapping */
.bottle-render--right {
  top: 75%;
  right: 4%;
  width: clamp(185px, 25vw, 260px);
  z-index: 1;
  filter: drop-shadow(var(--sh-green)) brightness(0.88);
  animation-delay: 1.4s;
}

.hero__visual:hover .bottle-render--front {
  filter: drop-shadow(0 28px 50px rgba(14, 59, 46, .45)) brightness(1.05);
}

.hero__visual:hover .bottle-render--left {
  transform: translateX(-6px) translateY(-5px);
  filter: drop-shadow(var(--sh-green)) brightness(1);
}

.hero__visual:hover .bottle-render--right {
  transform: translateX(6px) translateY(-5px);
  filter: drop-shadow(var(--sh-green)) brightness(0.95);
}

.hero__leaf {
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--green-bright);
  border-radius: 0 100% 0 100%;
  opacity: .55;
  animation: float 5s ease-in-out infinite;
}

.hero__leaf--1 {
  top: 12%;
  right: 18%;
  background: var(--gold-2);
  animation-delay: .4s;
}

.hero__leaf--2 {
  bottom: 16%;
  left: 4%;
  width: 18px;
  height: 18px;
  animation-delay: 1.1s;
}


/* ============================================================================
   09. TRUST INDICATORS
   ============================================================================ */
.trust {
  background: var(--white);
  border-block: 1px solid var(--sage-line);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  align-items: start;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
}

.trust__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sage);
  font-size: 1.4rem;
}

.trust__label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}


/* ============================================================================
   10. WHY NUTROSIL — feature cards
   ============================================================================ */
.why {
  background: var(--bone);
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.feature-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
    border-color var(--t) var(--ease);
}

.feature-card::before {
  /* top accent bar revealed on hover */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--sage-2);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--sage), var(--sage-2));
  font-size: 1.5rem;
  margin-bottom: 1.3rem;
}

.feature-card__title {
  font-size: 1.2rem;
  margin-bottom: .55rem;
}

.feature-card__text {
  color: var(--ink-soft);
  font-size: .96rem;
}


/* ============================================================================
   11. ABOUT
   ============================================================================ */
.about {
  background: var(--white);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__media-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(47, 143, 102, .5), transparent 60%),
    linear-gradient(160deg, var(--green-mid), var(--green) 60%, var(--green-deep));
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
}

.about__media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0);
  background-size: 22px 22px;
}

.about__media-badge {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.2rem);
  left: clamp(1.6rem, 3vw, 2.6rem);
  padding: .4rem .85rem;
  background: rgba(189, 149, 64, .18);
  border: 1px solid rgba(215, 178, 100, .5);
  border-radius: var(--r-pill);
  color: var(--gold-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.about__media-word {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--cream);
  letter-spacing: -0.03em;
  line-height: 1;
}

.about__media-sub {
  position: relative;
  margin-top: .5rem;
  color: rgba(232, 239, 232, .8);
  font-size: .95rem;
}

.about__content .section__title {
  margin-top: .2rem;
}

.about__text {
  color: var(--ink-soft);
  margin-top: 1.1rem;
  font-size: 1.02rem;
}

.about__pillars {
  margin-top: 2rem;
  display: grid;
  gap: 1.1rem;
}

.about__pillar {
  position: relative;
  padding-left: 1.3rem;
  border-left: 3px solid var(--gold);
}

.about__pillar-title {
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

.about__pillar-text {
  color: var(--ink-soft);
  font-size: .96rem;
}


/* ============================================================================
   12. PRODUCTS — collection grid
   ============================================================================ */
.products {
  background: var(--bone);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
    border-color var(--t) var(--ease);
}

.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--sage-2);
}

.product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sage);
}

.product__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  color: rgba(14, 59, 46, .22);
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(160deg, var(--sage), var(--sage-2) 70%, #cdd9cf);
  transition: transform var(--t-slow) var(--ease-out);
}

.product:hover .product__placeholder {
  transform: scale(1.07);
}

.product__placeholder-cap {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 58px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(165deg, var(--green-mid), var(--green-deep));
  box-shadow: var(--sh-md);
  opacity: .9;
}

.product__placeholder-cap::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 9px;
  border-radius: 4px;
  background: var(--gold);
}

.product__tag {
  position: absolute;
  top: .8rem;
  left: .8rem;
  padding: .32rem .7rem;
  background: rgba(252, 250, 244, .92);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--green);
  z-index: 1;
}

.product__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.3rem;
  flex: 1;
}

.product__title {
  font-size: 1.15rem;
}

.product__benefits {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold);
}

.product__desc {
  font-size: .92rem;
  color: var(--ink-soft);
  flex: 1;
}

.product__actions {
  display: flex;
  gap: .6rem;
  margin-top: .6rem;
}

.product__actions .btn {
  flex: 1;
}


/* ============================================================================
   13. PRODUCT MODAL
   ============================================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.modal[hidden] {
  display: none;
}

/* re-assert over .modal{display:flex} */
.modal.is-open {
  opacity: 1;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 32, 26, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  display: grid;
  grid-template-columns: 1fr;
  transform: translateY(20px) scale(.97);
  transition: transform var(--t) var(--ease-out);
}

.modal.is-open .modal__dialog {
  transform: none;
}

.modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(252, 250, 244, .9);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}

.modal__close:hover {
  transform: rotate(90deg);
  background: var(--white);
}

.modal__media {
  position: relative;
  min-height: 360px;
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(47, 143, 102, .4), transparent 60%),
    linear-gradient(160deg, var(--green-mid), var(--green-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

/* The actual product image in the modal */
#modal-image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: contain;
  object-position: center center;
  padding: 2rem;
  transition: transform var(--t-slow) var(--ease-out);
}

.modal__media:hover #modal-image {
  transform: scale(1.04);
}

.modal__placeholder {
  position: relative;
  width: clamp(110px, 28vw, 150px);
  height: clamp(180px, 40vw, 240px);
  border-radius: 26px 26px 12px 12px;
  background: linear-gradient(165deg, rgba(252, 250, 244, .95), #e9efe7);
  box-shadow: var(--sh-lg);
}

.modal__placeholder .product__placeholder-cap {
  width: 54px;
  height: 64px;
  top: 14%;
  opacity: 1;
}

.modal__content {
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

.modal__tag {
  display: inline-block;
  padding: .35rem .8rem;
  background: var(--gold-soft);
  border-radius: var(--r-pill);
  color: var(--gold);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .9rem;
}

.modal__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.modal__desc {
  color: var(--ink-soft);
  margin-top: .8rem;
}

.modal__block {
  margin-top: 1.5rem;
}

.modal__subtitle {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.modal__subtitle::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--gold);
}

.modal__block p {
  color: var(--ink-soft);
  font-size: .96rem;
}

.modal__list {
  display: grid;
  gap: .5rem;
}

.modal__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: .96rem;
}

.modal__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}

#modal-inquiry {
  margin-top: 1.8rem;
}


/* ============================================================================
   14. SCIENCE & QUALITY — dark timeline (signature)
   ============================================================================ */
.science {
  position: relative;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(47, 143, 102, .22), transparent 55%),
    linear-gradient(165deg, var(--green), var(--green-deep) 60%, var(--green-900));
  color: var(--cream);
  overflow: hidden;
}

.science::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
}

.science .container {
  position: relative;
  z-index: 1;
}

.science .section__title {
  color: var(--cream);
}

.science .section__lead {
  color: rgba(232, 239, 232, .78);
}

.timeline {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-left: 2.6rem;
}

.timeline::before {
  /* vertical rail */
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(189, 149, 64, .2));
}

.timeline__item {
  position: relative;
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: calc(-2.6rem + 1px);
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-2), var(--gold));
  color: var(--green-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 5px rgba(189, 149, 64, .18);
}

.timeline__title {
  color: var(--cream);
  font-size: 1.2rem;
  margin-bottom: .35rem;
}

.timeline__text {
  color: rgba(232, 239, 232, .74);
  font-size: .96rem;
}


/* ============================================================================
   15. CERTIFICATIONS
   ============================================================================ */
.certs {
  background: var(--bone);
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  padding: 2rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}

.cert:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
}

.cert__badge {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin-bottom: .6rem;
  background: linear-gradient(150deg, var(--green-mid), var(--green-deep));
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 0 0 4px var(--sage), 0 0 0 5px var(--gold);
}

.cert__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.cert__note {
  font-size: .82rem;
  color: var(--ink-mute);
}


/* ============================================================================
   16. TESTIMONIALS — slider
   ============================================================================ */
.testimonials {
  background: var(--sage);
}

.testimonials__slider {
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  transition: transform var(--t-slow) var(--ease-out);
}

.testimonial {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--sh-sm);
}

.testimonial__stars {
  color: var(--gold);
  letter-spacing: .15em;
  font-size: 1rem;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.testimonial__author {
  font-weight: 600;
  color: var(--green);
  margin-top: auto;
}

.testimonial__author span {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--ink-mute);
}

.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--sage-line);
  color: var(--green);
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), color var(--t-fast);
}

.slider-btn:hover {
  background: var(--green);
  color: var(--cream);
  transform: translateY(-2px);
}

.testimonials__dots {
  display: flex;
  gap: .5rem;
}

.testimonials__dots button {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--sage-2);
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}

.testimonials__dots button.is-active {
  width: 26px;
  background: var(--gold);
}


/* ============================================================================
   17. FAQ — accordion
   ============================================================================ */
.faq {
  background: var(--white);
}

.accordion {
  display: grid;
  gap: .9rem;
}

.accordion__item {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--sage-2);
  box-shadow: var(--sh-sm);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.accordion__trigger:hover {
  color: var(--green);
}

.accordion__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--t) var(--ease-out), background var(--t-fast), color var(--t-fast);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--cream);
}

/* Smooth open/close via grid-rows (no JS height math) */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease-out);
}

.accordion__panel>* {
  overflow: hidden;
  min-height: 0;
}

.accordion__trigger[aria-expanded="true"]+.accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel p {
  padding: 0 1.4rem 1.35rem;
  color: var(--ink-soft);
  font-size: .96rem;
}


/* ============================================================================
   18. INSTAGRAM / WELLNESS TIPS
   ============================================================================ */
.instagram {
  background: #0d0d0d;
}

.instagram .section__head .eyebrow {
  color: rgba(255, 255, 255, .45);
}

.instagram .section__head .eyebrow::before {
  background: rgba(255, 255, 255, .35);
}

.instagram .section__title {
  color: #fff;
}

.instagram .section__lead {
  color: rgba(255, 255, 255, .5);
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.2rem);
}

/* Wellness tip card */
.wellness-tip {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}

.wellness-tip::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, .0);
  transition: background var(--t) var(--ease);
}

.wellness-tip:hover {
  background: #222;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  transform: translateY(-4px);
}

.wellness-tip:hover::after {
  background: rgba(255, 255, 255, .0);
}

.wellness-tip__title {
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: .75rem;
}

.wellness-tip__text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .58);
  line-height: 1.7;
}

.instagram__cta {
  text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.instagram__cta .btn--primary {
  background: #fff;
  color: #0d0d0d;
  box-shadow: none;
  border: 1.5px solid rgba(255, 255, 255, .15);
}

.instagram__cta .btn--primary:hover {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}


/* ============================================================================
   19. CONTACT + FORMS
   ============================================================================ */
.contact {
  background: var(--white);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact__lead {
  color: var(--ink-soft);
  margin-top: 1rem;
  max-width: 46ch;
}

.contact__list {
  margin-top: 2rem;
  display: grid;
  gap: .2rem;
}

.contact__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--sage-line);
}

.contact__label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact__value {
  color: var(--ink);
  font-weight: 500;
}

a.contact__value {
  transition: color var(--t-fast);
  cursor: pointer;
}

a.contact__value:hover {
  color: var(--green);
}

/* Form shell */
.form {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--sh-sm);
}

.form__title {
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
}

.form__row {
  margin-bottom: 1.1rem;
}

.form__label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .45rem;
}

.form__input {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--cream);
  border: 1.5px solid var(--sage-line);
  border-radius: var(--r-sm);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast);
}

.form__input::placeholder {
  color: var(--ink-mute);
}

.form__input:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(14, 59, 46, .12);
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 73, 47, .12);
}

.form__error {
  display: block;
  min-height: 1rem;
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--danger);
}

.form__status {
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 500;
}

.form__status.is-success {
  color: var(--success);
}

.form__status.is-error {
  color: var(--danger);
}


/* ============================================================================
   20. NEWSLETTER
   ============================================================================ */
.newsletter {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(80% 100% at 90% 0%, rgba(47, 143, 102, .3), transparent 55%),
    linear-gradient(150deg, var(--green-mid), var(--green) 55%, var(--green-deep));
  color: var(--cream);
}

.newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
  background-size: 24px 24px;
}

.newsletter__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.newsletter__title {
  color: var(--cream);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.4rem);
}

.newsletter__lead {
  color: rgba(232, 239, 232, .82);
  margin-top: .7rem;
  max-width: 44ch;
}

/* Newsletter form sits directly on the green band — strip the .form card styling */
.newsletter__form {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

.newsletter__fields {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.newsletter__fields .form__input {
  background: rgba(252, 250, 244, .96);
  border-color: transparent;
}

.newsletter__fields .form__input:focus {
  box-shadow: 0 0 0 3px rgba(215, 178, 100, .5);
}

.newsletter__fields .btn {
  white-space: normal;
}

.newsletter .form__status {
  color: var(--gold-2);
}


/* ============================================================================
   21. FOOTER
   ============================================================================ */
.footer {
  background: var(--green-900);
  color: rgba(232, 239, 232, .72);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding-bottom: 2.5rem;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}

.footer__tagline {
  margin-top: 1rem;
  max-width: 36ch;
  font-size: .92rem;
}

.footer__social {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.footer__social a {
  font-size: .88rem;
  font-weight: 500;
  color: rgba(232, 239, 232, .8);
  cursor: pointer;
  transition: color var(--t-fast);
}

.footer__social a:hover {
  color: var(--gold-2);
}

.footer__heading {
  color: var(--cream);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer__col ul {
  display: grid;
  gap: .7rem;
}

.footer__col a {
  font-size: .92rem;
  color: rgba(232, 239, 232, .72);
  cursor: pointer;
  transition: color var(--t-fast), padding-left var(--t-fast);
}

.footer__col a:hover {
  color: var(--gold-2);
  padding-left: 4px;
}

.footer__disclaimer {
  border-top: 1px solid rgba(232, 239, 232, .12);
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.footer__disclaimer p {
  font-size: .8rem;
  color: rgba(232, 239, 232, .55);
  max-width: 90ch;
}

.footer__bottom {
  border-top: 1px solid rgba(232, 239, 232, .12);
}

.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
  text-align: center;
  padding-block: 1.6rem;
  font-size: .85rem;
}

.footer__legal {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__legal a {
  transition: color var(--t-fast);
}

.footer__legal a:hover {
  color: var(--gold-2);
}


/* ============================================================================
   22. BACK-TO-TOP
   ============================================================================ */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: var(--cream);
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-green);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out),
    visibility var(--t);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(14, 59, 46, .4);
}


/* ============================================================================
   23. KEYFRAMES
   ============================================================================ */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* Front bottle keeps its centering transform while floating */
.bottle--front {
  animation-name: floatFront;
}

@keyframes floatFront {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-14px);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: .8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(215, 178, 100, .55);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(215, 178, 100, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(215, 178, 100, 0);
  }
}


/* ============================================================================
   24. RESPONSIVE  (mobile-first → larger)
   ============================================================================ */

/* ---- Small phones and up (≈480px) ---- */
@media (min-width: 480px) {
  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__actions .btn {
    min-width: 180px;
  }
}

/* ---- Tablet (≥768px) ---- */
@media (min-width: 768px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .about__pillars {
    grid-template-columns: 1fr;
  }

  .testimonial {
    flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2);
  }

  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .newsletter__inner {
    grid-template-columns: 1.1fr 1fr;
  }

  .newsletter__fields {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .newsletter__fields .form__input {
    flex: 1 1 160px;
  }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .modal__dialog {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .modal__media {
    min-height: 100%;
  }
}

/* ---- Laptop (≥1024px): full desktop nav + richer grids ---- */
@media (min-width: 1024px) {
  .nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .nav__toggle {
    display: none;
  }

  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .trust__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .why__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonial {
    flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3);
  }

  .footer__grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  }
}

/* ---- Large desktop (≥1440px) ---- */
@media (min-width: 1440px) {
  :root {
    --section-y: 8rem;
  }

  .hero__title {
    font-size: 4.6rem;
  }
}

/* ---- Mobile nav drawer (active only below laptop) ---- */
@media (max-width: 1023.98px) {
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.2rem var(--gutter) 2rem;
    background: var(--cream);
    border-bottom: 1px solid var(--sage-line);
    box-shadow: var(--sh-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out),
      visibility var(--t);
  }

  .nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    display: block;
    padding: .9rem .2rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--sage-line);
  }

  .nav__link::after {
    display: none;
  }
}

/* On the smallest screens, free up the top bar */
@media (max-width: 420px) {

  /* Collapse the nav WhatsApp button to its icon to free up the top bar.
     The SVG has fixed width/height, so font-size:0 hides only the text node. */
  .nav__actions .btn--whatsapp {
    padding: .7rem .85rem;
    font-size: 0;
    gap: 0;
  }
}

/* Simplify the hero composition on small screens so it doesn't crowd */
@media (max-width: 600px) {

  .bottle-render--left,
  .bottle-render--right,
  .hero__leaf {
    display: none;
  }

  .hero__visual {
    height: clamp(280px, 62vw, 360px);
  }
}


/* ============================================================================
   25. REDUced MOTION & PRINT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {

  .announcement,
  .header,
  .nav__toggle,
  .back-to-top,
  .hero__visual,
  .newsletter,
  .testimonials__controls {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
  }
}