/* ============================================================
   LILVAA — hair & skin care · homepage styles (vanilla CSS)
   Type:  Playfair Display (display)  +  Buenard (body)
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  /* brand palette */
  --olive:        #8a8635;   /* announcement / newsletter / footer */
  --olive-d:      #6f6c29;
  --olive-text:   #4e4c1f;   /* body text + headings on light */
  --cream:        #eeece7;   /* collage / alternating bands */
  --cream-2:      #f4f1ea;
  --paper:        #ffffff;
  --tan:          #e7c99a;   /* newsletter inner card */
  --terracotta:   #c15b2a;   /* primary buttons / CTA */
  --terracotta-d: #a8481e;
  --shop-purple:  #5a31ff;   /* "Claim with shop" button in popup */
  --gold:         #c9a24b;   /* review stars */
  --ink:          #2b2a16;
  --muted:        #807c5a;
  --line:         rgba(78,76,31,.18);
  --line-light:   rgba(255,255,255,.4);

  /* type */
  --display: 'Playfair Display', 'Times New Roman', serif;
  --body:    'Buenard', Georgia, 'Times New Roman', serif;

  /* metrics */
  --wrap: 1280px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;

  --c: var(--terracotta); /* per-section accent, overridable */

  /* torn-paper ripple — one tileable period of the wave divider (symmetric
     down-arch + up-arch). Drawn as a mask so per-wave --from/--to still work. */
  --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 340 40'%3E%3Cpath d='M0 20 C57 34 113 34 170 20 C227 6 283 6 340 20 L340 40 L0 40 Z' fill='%23fff'/%3E%3C/svg%3E");
  --wave-period: min(340px, 33vw);
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--olive-text);
  font-family:var(--body);
  font-size:clamp(16px,1.04vw,18px);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.06; margin:0; color:var(--olive-text); }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(54px,7vw,104px); position:relative; }
.bg-cream{ background:var(--cream); }
.bg-paper{ background:var(--paper); }

/* ---------- torn-paper wave dividers (signature, responsive ripple) ----------
   The wavy edge is a horizontally-tiled CSS mask: each hump is a fixed width
   (--wave-period) that repeats, so the ripple stays equally wavy at any screen
   width instead of stretching flat. --from = colour above the crest,
   --to = colour of the filled wave below it. */
.wave{
  --from:var(--paper); --to:var(--cream);
  position:relative; display:block; line-height:0; z-index:5;
  height:clamp(30px,3.6vw,58px);
  margin-top:-1px; pointer-events:none; background:var(--from);
}
.wave::after{
  content:""; position:absolute; inset:0; background:var(--to);
  -webkit-mask:var(--wave-shape) repeat-x bottom / var(--wave-period) 101%;
          mask:var(--wave-shape) repeat-x bottom / var(--wave-period) 101%;
}
.wave svg{ display:none; } /* legacy inline paths — shape now drawn via CSS mask */

/* ---------- subtle paper grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.28em;
  font-size:.74rem; color:var(--terracotta-d); margin:0 0 1rem; font-weight:700;
}
.eyebrow--light{ color:rgba(255,255,255,.82); }

.btn{
  --bg:var(--terracotta); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-weight:700; letter-spacing:.01em;
  padding:.9em 2em; border-radius:100px; font-size:.98rem;
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  box-shadow:0 10px 22px -14px rgba(168,72,30,.8);
}
.btn::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.16);
  transform:translateX(-101%) skewX(-14deg); transition:transform .6s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -16px rgba(168,72,30,.85); }
.btn:hover::after{ transform:translateX(101%) skewX(-14deg); }
.btn--ghost{ --bg:transparent; --fg:var(--olive-text); border:1.5px solid var(--olive-text); box-shadow:none; }
.btn--ghost:hover{ background:var(--olive-text); color:var(--paper); }
.btn--light{ --bg:#fff; --fg:var(--olive-text); }
.btn--olive{ --bg:var(--olive); --fg:#fff; box-shadow:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; letter-spacing:.02em; }
.link-arrow svg{ transition:transform .3s var(--ease); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* section heading block */
.shead{ text-align:center; margin-bottom:clamp(28px,3.6vw,52px); }
.shead__title{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-style:italic; }
.shead__sub{ color:var(--muted); margin:.7rem auto 0; max-width:48ch; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{ background:var(--olive); color:#fff; text-align:center; font-size:.82rem; letter-spacing:.04em; padding:.5rem 1rem; position:relative; z-index:60; }
.announce p{ margin:0; }

/* ============================================================
   HEADER  (transparent over hero → solid on scroll)
   ============================================================ */
.header{ position:sticky; top:0; z-index:50; color:#fff; transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s; }
.header__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.header.is-stuck{ background:var(--paper); color:var(--olive-text); box-shadow:0 1px 0 var(--line), 0 14px 30px -26px rgba(0,0,0,.5); }

.header__nav{ display:flex; align-items:center; gap:1.8rem; font-size:.96rem; letter-spacing:.01em; }
.header__nav--right{ justify-content:flex-end; }
.navlink{ position:relative; padding:.4em 0; display:inline-flex; align-items:center; gap:.35em; }
.navlink::after{ content:""; position:absolute; left:0; bottom:.1em; width:100%; height:1.3px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.navlink:hover::after,.has-mega:hover .navlink::after{ transform:scaleX(1); }
.navlink svg{ transition:transform .3s; }
.has-mega:hover .navlink svg{ transform:rotate(180deg); }

.header__logo{ justify-self:center; text-align:center; }
.logo-text{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:.02em; white-space:nowrap; }

.header__icons{ display:flex; align-items:center; gap:.2rem; }
.iconbtn{ position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; transition:background .25s; }
.iconbtn:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.iconbtn__count{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--terracotta); color:#fff; border-radius:100px; font-size:.6rem; font-weight:700;
  display:grid; place-items:center; font-family:var(--body);
}
.header__burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; }
.header__burger span{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }

/* mega menu */
.has-mega{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%; background:var(--paper); color:var(--olive-text);
  border-top:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-mega:hover .mega, .mega:hover{ opacity:1; visibility:visible; transform:none; }
.mega__inner{ max-width:var(--wrap); margin-inline:auto; padding:clamp(1.6rem,3vw,2.4rem) var(--gutter); display:grid; grid-template-columns:repeat(3,1fr) 1.2fr; gap:clamp(1rem,2.4vw,2.4rem); }
.mega__list a{ display:block; padding:.5rem 0; font-size:1.02rem; border-bottom:1px solid var(--line); transition:color .25s, padding-left .25s; }
.mega__list a:hover{ color:var(--terracotta); padding-left:.3rem; }
.mega__feature{ border-radius:var(--radius); overflow:hidden; position:relative; min-height:170px; }
.mega__feature img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.mega__feature span{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-family:var(--display); font-style:italic; font-size:1.2rem; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.mega__col h4{ font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--muted); margin-bottom:.6rem; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer{ position:fixed; inset:0; z-index:80; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(30,28,12,.5); opacity:0; transition:opacity .4s; }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(88vw,360px);
  background:var(--paper); color:var(--olive-text); padding:1.6rem 1.5rem; transform:translateX(102%);
  transition:transform .45s var(--ease); display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__close{ align-self:flex-end; font-size:1.4rem; width:42px; height:42px; }
.drawer__nav{ display:flex; flex-direction:column; margin-top:.6rem; }
.drawer__nav a{ font-family:var(--display); font-size:1.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.drawer__foot{ margin-top:auto; padding-top:1.4rem; }
.drawer__foot .btn{ width:100%; }

/* ============================================================
   HERO  (video + text overlay)
   ============================================================ */
.hero{ position:relative; min-height:clamp(560px,86vh,820px); display:flex; align-items:center; justify-content:center; text-align:center; margin-top:calc(-1*var(--header-h)); color:#fff; overflow:hidden; background:var(--olive); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(40,38,18,.35), rgba(40,38,18,.15) 40%, rgba(40,38,18,.45)); }
.hero__content{ position:relative; z-index:2; padding:var(--header-h) var(--gutter) 4rem; max-width:900px; }
.hero__title{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(2.8rem,8vw,6rem); line-height:1; color:#fff; text-shadow:0 3px 24px rgba(0,0,0,.3); text-wrap:balance; max-width:16ch; margin-inline:auto; }
.hero__sub{ margin:1.1rem auto 1.9rem; max-width:none; font-size:clamp(.85rem,1vw,1rem); letter-spacing:.01em; color:rgba(255,255,255,.9); }
.hero .wave{ position:absolute; bottom:0; left:0; width:100%; z-index:3; background:transparent; margin:0; height:clamp(40px,5vw,78px); }

/* ============================================================
   RICH TEXT  (At LILVAA / Radically Transparent)
   ============================================================ */
.richtext{ text-align:center; }
.richtext__inner{ max-width:820px; margin-inline:auto; }
.richtext__title{ font-size:clamp(2rem,4.4vw,3.2rem); font-style:italic; margin-bottom:1.2rem; }
.richtext__body{ color:var(--muted); font-size:1.12rem; }
.richtext .btn{ margin-top:1.8rem; }

/* ============================================================
   CAROUSEL  (shared: best sellers / gift boxes / testimonials)
   ============================================================ */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{ display:flex; gap:clamp(14px,1.6vw,26px); transition:transform .6s var(--ease); will-change:transform; }
.carousel__track.is-dragging{ transition:none; cursor:grabbing; }
.carousel__nav{ display:flex; gap:.7rem; justify-content:flex-end; margin-top:1.6rem; }
.round-btn{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); color:var(--olive-text); display:grid; place-items:center; font-size:1.2rem; transition:background .3s, color .3s, transform .3s, border-color .3s; }
.round-btn:hover{ background:var(--olive); border-color:var(--olive); color:#fff; transform:scale(1.05); }
.round-btn[disabled]{ opacity:.35; pointer-events:none; }
.dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.dots button{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:transform .3s, background .3s; }
.dots button.is-active{ background:var(--terracotta); transform:scale(1.4); }

/* product / gift card */
.pcard{ flex:0 0 calc((100% - 3*clamp(14px,1.6vw,26px))/4); min-width:0; }
.pcard__media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:var(--cream-2); display:block;
}
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__badge{ position:absolute; top:12px; left:12px; z-index:3; background:var(--terracotta); color:#fff; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:.34em .7em; border-radius:100px; }
.pcard__add{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3; transform:translateY(140%);
  background:var(--paper); color:var(--olive-text); font-weight:700; font-size:.86rem; padding:.7em 1em;
  border-radius:100px; box-shadow:0 12px 26px -12px rgba(0,0,0,.4); transition:transform .45s var(--ease), background .3s, color .3s; white-space:nowrap; text-align:center;
}
.pcard:hover .pcard__add{ transform:none; }
.pcard__add:hover{ background:var(--olive); color:#fff; }
.pcard__info{ padding:1rem .2rem 0; text-align:center; }
.pcard__name{ font-family:var(--display); font-size:1.16rem; }
.pcard__price{ margin-top:.35rem; font-size:.96rem; color:var(--olive-text); }
.pcard__price del{ color:var(--muted); margin-right:.45em; }
.pcard__price ins{ text-decoration:none; }

/* ============================================================
   COLLAGE  (next level / natural & honest)
   ============================================================ */
.collage{ padding:0; background:var(--cream); }
.collage__grid{ display:grid; grid-template-columns:1.25fr 1fr; grid-auto-rows:1fr; gap:6px; min-height:clamp(420px,52vw,640px); }
.collage__tile{ position:relative; overflow:hidden; }
.collage__tile img,.collage__tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.collage__tile:hover img{ transform:scale(1.05); }
.collage__tile--main{ grid-row:1 / span 2; }
.collage__tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(40,38,18,.05), rgba(40,38,18,.4)); }
.collage__cap{ position:absolute; z-index:2; color:#fff; font-family:var(--display); font-style:italic; line-height:1; text-shadow:0 3px 18px rgba(0,0,0,.4); }
.collage__cap--main{ left:8%; top:50%; transform:translateY(-50%); font-size:clamp(2.4rem,6vw,5rem); }
.collage__cap--sm{ left:8%; bottom:8%; font-size:clamp(1.3rem,2.4vw,2rem); max-width:8em; }

/* ============================================================
   PROVEN RESULTS  (image + text slideshow)
   ============================================================ */
.proven__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.proven__title{ font-size:clamp(2.2rem,4.6vw,3.4rem); font-style:italic; }
.proven__body{ color:var(--muted); margin:1.2rem 0 1.8rem; }
.proven__show{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -40px rgba(60,50,20,.6); }
.proven__tag{ position:absolute; top:12px; left:12px; z-index:4; background:#fff; color:var(--olive-text); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.35em .8em; border-radius:100px; }
.proven__caption{ margin:.9rem 2px 0; font-size:.9rem; color:var(--muted); }

/* before / after drag-to-compare slider */
.ba{ position:relative; aspect-ratio:16/12; --ba-pos:50%; cursor:ew-resize; touch-action:none; overflow:hidden; }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.ba__img--before{ filter:saturate(.7) brightness(.94) contrast(.96) sepia(.12); }
.ba__img--after{ filter:saturate(1.08) brightness(1.05) contrast(1.03); clip-path:inset(0 0 0 var(--ba-pos)); }
.ba__label{ position:absolute; bottom:14px; z-index:3; background:rgba(43,42,22,.5); color:#fff; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:.34em .9em; border-radius:100px; pointer-events:none; }
.ba__label--before{ left:14px; } .ba__label--after{ right:14px; }
.ba__divider{ position:absolute; top:0; bottom:0; left:var(--ba-pos); width:2px; margin-left:-1px; z-index:3; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
.ba__handle{ position:absolute; top:50%; left:var(--ba-pos); transform:translate(-50%,-50%); z-index:4; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--olive-text); display:grid; place-items:center; box-shadow:0 6px 18px -4px rgba(0,0,0,.45); cursor:ew-resize; }
.ba__handle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--terracotta), 0 6px 18px -4px rgba(0,0,0,.45); }

/* ============================================================
   SHOPPABLE VIDEO REEL  (Real People. Real Stories.)
   ============================================================ */
.reel{ display:flex; gap:clamp(12px,1.4vw,18px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; cursor:grab; scrollbar-width:none; user-select:none; }
.reel::-webkit-scrollbar{ display:none; }
.reel.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.vcard{ position:relative; flex:0 0 clamp(210px,21vw,250px); aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; background:#cfcdc4; box-shadow:0 22px 44px -30px rgba(60,50,20,.6); }
.vcard video{ width:100%; height:100%; object-fit:cover; }
.vcard__grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(40,38,18,.7)); }
.vcard__foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.7rem; }
.vcard__prod{ display:flex; align-items:center; gap:.55rem; color:#fff; margin-bottom:.55rem; }
.vcard__thumb{ width:34px; height:34px; border-radius:7px; object-fit:cover; flex:0 0 auto; background:#fff; }
.vcard__prod b{ font-family:var(--display); font-size:.86rem; font-weight:500; display:block; line-height:1.15; }
.vcard__prod span{ font-size:.8rem; opacity:.92; }
.vcard__cart{ display:grid; grid-template-columns:1fr auto; gap:2px; }
.vcard__cart button{ background:var(--olive); color:#fff; font-weight:700; font-size:.84rem; padding:.6em; display:grid; place-items:center; transition:background .25s; }
.vcard__cart button:first-child{ border-radius:8px 0 0 8px; }
.vcard__cart button:last-child{ border-radius:0 8px 8px 0; padding-inline:.7em; }
.vcard__cart button:hover{ background:var(--olive-d); }
.vcard__cart button[disabled]{ background:#9a9874; cursor:default; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tcard{ flex:0 0 calc((100% - 3*clamp(14px,1.6vw,26px))/4); min-width:0; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.tcard__avatar{ width:clamp(150px,17vw,185px); aspect-ratio:1/1; border-radius:14px; object-fit:cover; }
.tcard__stars{ color:var(--gold); letter-spacing:.14em; font-size:.95rem; }
.tcard__quote{ font-size:.98rem; color:var(--olive-text); line-height:1.6; }
.tcard__name{ font-family:var(--display); font-style:italic; margin-top:auto; }

/* auto-scrolling testimonial marquee (continuous loop, pause on hover) */
.tmarquee{ overflow:hidden; }
.tmarquee__track{ display:flex; gap:clamp(14px,1.6vw,26px); width:max-content; animation:marquee 44s linear infinite; will-change:transform; }
.tmarquee:hover .tmarquee__track{ animation-play-state:paused; }
.tmarquee .tcard{ flex:0 0 clamp(270px,24vw,330px); }
@media (prefers-reduced-motion:reduce){ .tmarquee__track{ animation:none; } .tmarquee{ overflow-x:auto; } }

/* ============================================================
   WAVY TEXT MARQUEE  (phrase flowing along a sine wave)
   ============================================================ */
.wavemq{ overflow:hidden; background:var(--paper); padding-block:clamp(48px,7vw,100px); display:grid; place-items:center; }
.wavemq__svg{ display:block; width:4800px; height:200px; }
.wavemq__text{ font-family:var(--display); font-style:italic; font-size:42px; fill:var(--olive-text); }
@media (max-width:700px){ .wavemq__text{ font-size:30px; } }

/* ============================================================
   BLOG
   ============================================================ */
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.acard{ display:flex; flex-direction:column; }
.acard__media{ aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; display:block; position:relative; }
.acard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.acard:hover .acard__media img{ transform:scale(1.05); }
.acard__body{ padding:1.2rem .2rem 0; text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; }
.acard__title{ font-family:var(--display); font-size:1.32rem; line-height:1.25; margin-bottom:.6rem; }
.acard__excerpt{ color:var(--muted); font-size:.96rem; margin-bottom:1.2rem; }
.acard .btn{ margin-top:auto; }

/* ============================================================
   NEWSLETTER  (olive band, tan card, torn-paper top & bottom)
   ============================================================ */
.news{ background:var(--olive); position:relative; }
.news__card{ max-width:680px; margin-inline:auto; background:var(--tan); color:var(--olive-text); border-radius:calc(var(--radius)*1.6); padding:clamp(2rem,5vw,3.6rem); text-align:center; }
.news__title{ font-size:clamp(2rem,4.6vw,3.2rem); font-style:italic; }
.news__sub{ margin:.8rem auto 1.6rem; max-width:46ch; }
.news__form{ display:flex; gap:.7rem; max-width:520px; margin-inline:auto; }
.news__form input{ flex:1; min-width:0; padding:.95em 1.3em; border-radius:100px; border:1.5px solid rgba(78,76,31,.45); background:transparent; color:var(--olive-text); font-family:var(--body); font-size:1rem; }
.news__form input::placeholder{ color:rgba(78,76,31,.6); }
.news__form input:focus{ outline:none; border-color:var(--olive-text); }
.news__ok{ margin:.9rem 0 0; font-weight:700; }

/* ============================================================
   JOIN OUR CIRCLE — community gallery tiles
   ============================================================ */
.gcard{ flex:0 0 calc((100% - 4*clamp(14px,1.6vw,26px))/5); min-width:0; position:relative; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; display:block; background:var(--cream-2); }
.gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gcard:hover img{ transform:scale(1.06); }
.gcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(40,38,18,.4)); opacity:0; transition:opacity .3s; }
.gcard:hover::after{ opacity:1; }
.gcard__ig{ position:absolute; top:10px; right:10px; z-index:2; color:#fff; opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s; filter:drop-shadow(0 1px 5px rgba(0,0,0,.6)); }
.gcard:hover .gcard__ig{ opacity:1; transform:none; }
@media (max-width:1080px){ .gcard{ flex-basis:calc((100% - 3*clamp(14px,1.6vw,26px))/4); } }
@media (max-width:780px){ .gcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); } }
@media (max-width:520px){ .gcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); } }

/* ============================================================
   SCROLLING ICON MARQUEE  (trust badges)
   ============================================================ */
.ribbon{ background:var(--cream); color:var(--olive-text); overflow:hidden; padding:.85rem 0; border-block:1px solid var(--line); }
.ribbon__track{ display:flex; gap:clamp(2rem,4vw,3.4rem); width:max-content; white-space:nowrap; animation:marquee 34s linear infinite; }
.ribbon__item{ font-family:var(--display); font-style:italic; font-size:1.15rem; display:flex; align-items:center; gap:.55rem; color:var(--olive-text); }
.ribbon__item svg{ width:22px; height:22px; flex:none; color:var(--terracotta); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--olive); color:rgba(255,255,255,.85); padding-top:clamp(48px,6vw,80px); position:relative; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1.1fr; gap:clamp(2rem,4vw,4rem); padding-bottom:2.6rem; }
.footer__ack{ font-size:.92rem; line-height:1.6; }
.footer__social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; transition:background .3s, color .3s; }
.footer__social a:hover{ background:#fff; color:var(--olive); }
.footer__col a{ display:block; padding:.36rem 0; transition:color .25s, padding-left .25s; }
.footer__col a:hover{ color:#fff; padding-left:.3rem; }
.footer__news h4{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.5rem; color:#fff; margin-bottom:1rem; }
.footer__news .news__form{ flex-direction:column; max-width:none; }
.footer__news input{ color:#fff; border-color:rgba(255,255,255,.5); }
.footer__news input::placeholder{ color:rgba(255,255,255,.7); }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.18); font-size:.85rem; }
.footer__pay{ display:flex; gap:.45rem; flex-wrap:wrap; }
.footer__pay span{ background:#fff; color:#444; border-radius:5px; padding:.25em .5em; font-size:.62rem; font-weight:800; letter-spacing:.03em; }
.footer__region{ display:inline-flex; align-items:center; gap:.4rem; }

/* ============================================================
   "JOIN OUR CIRCLE" POPUP  +  floating tab
   ============================================================ */
.popup{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; visibility:hidden; }
.popup.is-open{ visibility:visible; }
.popup__scrim{ position:absolute; inset:0; background:rgba(30,28,12,.55); opacity:0; transition:opacity .4s; }
.popup.is-open .popup__scrim{ opacity:1; }
.popup__box{ position:relative; width:min(440px,100%); background:var(--paper); border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.6rem); text-align:center; transform:translateY(20px) scale(.98); opacity:0; transition:transform .45s var(--ease), opacity .45s; }
.popup.is-open .popup__box{ transform:none; opacity:1; }
.popup__close{ position:absolute; top:.7rem; right:.9rem; font-size:1.3rem; width:36px; height:36px; color:var(--muted); }
.popup__title{ font-size:1.9rem; font-style:italic; margin-bottom:.6rem; }
.popup__sub{ color:var(--muted); font-size:.96rem; margin-bottom:1.4rem; }
.popup__shop{ width:100%; background:var(--shop-purple); color:#fff; font-weight:700; padding:.95em; border-radius:8px; transition:filter .25s; }
.popup__shop:hover{ filter:brightness(1.08); }
.popup__or{ display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.85rem; margin:1rem 0; }
.popup__or::before,.popup__or::after{ content:""; flex:1; height:1px; background:var(--line); }
.popup__box input{ width:100%; padding:.9em 1.2em; border:1.5px solid var(--line); border-radius:8px; font-family:var(--body); font-size:1rem; margin-bottom:.7rem; }
.popup__box input:focus{ outline:none; border-color:var(--olive); }
.popup__box .btn{ width:100%; border-radius:8px; }
.popup__fine{ font-size:.72rem; color:var(--muted); margin-top:1rem; }

.fab{ position:fixed; left:18px; bottom:18px; z-index:90; background:var(--cream-2); color:var(--olive-text); border:1px solid var(--line); border-radius:10px; padding:.7em 1em; font-weight:700; font-size:.9rem; box-shadow:0 12px 30px -16px rgba(0,0,0,.4); display:flex; align-items:center; gap:.6rem; transition:transform .3s; }
.fab:hover{ transform:translateY(-2px); }
.fab span{ color:var(--muted); }

/* ============================================================
   TOAST
   ============================================================ */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%, calc(100% + 40px)); z-index:130; background:var(--olive-text); color:#fff; padding:.85rem 1.4rem; border-radius:100px; font-weight:700; font-size:.9rem; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.toast.is-show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); }
  .tcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); }
  .mega__inner{ grid-template-columns:repeat(2,1fr); }
  .mega__feature{ display:none; }
}
@media (max-width:860px){
  :root{ --header-h:68px; }
  .header__nav{ display:none; }
  .header__burger{ display:flex; }
  .header__inner{ grid-template-columns:auto 1fr auto; }
  .header__icons .iconbtn--account,.header__icons .iconbtn--search{ display:none; }
  .proven__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .pcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .tcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .bgrid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .collage__grid{ grid-template-columns:1fr 1fr; }
  .collage__tile--main{ grid-row:auto; grid-column:1 / -1; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .pcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .tcard{ flex-basis:100%; }
  .news__form{ flex-direction:column; }
  .footer__bar{ justify-content:center; text-align:center; }
  .collage__grid{ grid-template-columns:1fr; }
  .collage__tile--main{ aspect-ratio:4/3; }
}