/* ==========================================================================
   Herbalista Love - Prototype design system  (Direction A: Editorial Apothecary)
   Tokens derived from the real brand: deep olive, dusty rose, warm ochre, cream.
   This is a static prototype for sign-off. Production values move into the
   child theme (design tokens + Carbon Fields), never hardcoded in templates.
   ========================================================================== */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ----- Design tokens ----- */
:root {
  /* Brand palette */
  --olive-900: #34331a;
  --olive:     #4b4a26;   /* logo wordmark - primary ink/brand */
  --olive-600: #6b6a3c;
  --blush:     #e3a995;   /* logo petals - secondary */
  --blush-200: #f0d3c8;
  --blush-100: #f7e7e0;
  --ochre:     #c1873a;   /* logo center - highlight / badges */
  --terra:     #bd6a3c;   /* primary action (reads "orange", stays on-brand) */
  --terra-600: #a3572e;

  --cream:     #ffffff;   /* page ground (now white) */
  --cream-2:   #fbf4f1;   /* faint cream-pink, section separation */
  --paper:     #ffffff;   /* cards */
  --ink:       #2c2b1f;   /* body text */
  --muted:     #726d5b;   /* secondary text */
  --line:      #e7ddd2;   /* hairlines */

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Shape + depth */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(75,74,38,.06);
  --shadow: 0 14px 40px -18px rgba(52,51,26,.28);
  --shadow-lg: 0 30px 70px -28px rgba(52,51,26,.38);

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(56px, 8vw, 116px);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }

/* ----- Typography ----- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; color: var(--olive-900); }
.h-display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 1rem; display: inline-block;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); }
.serif-em { font-style: italic; font-family: var(--font-display); }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--cream-2); }
.section--olive { background: var(--olive); color: #f3efe4; }
.section--olive h2, .section--olive h3 { color: #fbf6ea; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.muted { color: var(--muted); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .95em 1.6em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--terra); color: #fff; box-shadow: 0 10px 24px -10px rgba(189,106,60,.7); }
.btn--primary:hover { background: var(--terra-600); transform: translateY(-2px); }
.btn--olive { background: var(--olive); color: #f6f2e6; }
.btn--olive:hover { background: var(--olive-900); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--olive); box-shadow: inset 0 0 0 1.5px var(--olive-600); }
.btn--ghost:hover { background: var(--olive); color: #f6f2e6; }
.btn--light { background: #fff; color: var(--olive); }
.btn--sm { padding: .6em 1.05em; font-size: .84rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ----- Announcement bar ----- */
.announce {
  background: var(--olive-900); color: #eae4d2;
  font-size: .8rem; letter-spacing: .04em; text-align: center;
  padding: .55rem 1rem;
}
.announce b { color: var(--blush); font-weight: 600; }

/* ----- Header / nav ----- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(248,240,234,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 78px; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav__link { font-size: .9rem; font-weight: 500; color: var(--olive-900); padding: .3rem 0; position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--terra); transition: width .2s ease; }
.nav__link:hover::after { width: 100%; }
.nav__protocol {
  background: var(--ochre); color: #fff; padding: .58em 1.1em; border-radius: var(--r-pill);
  font-size: .86rem; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(193,135,58,.9);
  transition: transform .18s ease, background .18s ease;
}
.nav__protocol:hover { background: #a9722c; transform: translateY(-2px); }
.nav__icon { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; }
.nav__cart-count { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; background: var(--olive-900); color: #fff; border-radius: 999px; font-size: .6rem; line-height: 1; font-weight: 700; }
.header2__utils a[aria-label="Cart"] { position: relative; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--olive-900); border-radius: 2px; }

/* ----- Hero ----- */
.hero { position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 84px); }
.hero__title { margin-bottom: 1.2rem; }
.hero__sub { max-width: 30ch; margin-bottom: 1.9rem; }
.hero__cue { font-family: var(--font-display); font-style: italic; color: var(--olive-600); margin-bottom: .7rem; }
.hero__ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero__link { font-weight: 600; font-size: .92rem; color: var(--olive); border-bottom: 2px solid var(--blush); padding-bottom: 2px; }
.hero__link:hover { color: var(--terra); border-color: var(--terra); }
.hero__strip { margin-top: 2.2rem; display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.hero__strip span { position: relative; padding-left: 1.4rem; }
.hero__strip span::before { content: "\2740"; position: absolute; left: 0; color: var(--blush); }

.hero__media { position: relative; }
.hero__frame {
  position: relative; aspect-ratio: 4/5; border-radius: 260px 260px var(--r-lg) var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--blush-100);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__blob { position: absolute; inset: auto -12% -10% -12%; height: 60%; background: radial-gradient(60% 60% at 50% 50%, var(--blush-200), transparent 70%); z-index: -1; }
.hero__badge {
  position: absolute; bottom: 18px; left: -14px; background: var(--paper); border-radius: var(--r);
  padding: .7rem .95rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; max-width: 220px;
}
.hero__badge b { font-family: var(--font-display); font-size: 1.05rem; color: var(--olive); }
.hero__badge .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--ochre); flex: none; display: grid; place-items: center; color: #fff; }

/* ----- Trust row (icon on top, title + description) ----- */
.trust { border-bottom: 1px solid var(--line); background: var(--cream-2); }
.trust__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 44px); padding-block: clamp(34px, 4.5vw, 58px); }
.trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; position: relative; }
.trust__item + .trust__item::before { content: ""; position: absolute; left: calc(clamp(18px, 3vw, 44px) / -2); top: 6%; height: 88%; width: 1px; background: var(--line); }
.trust__item svg { width: 34px; height: 34px; color: var(--olive); margin-bottom: .7rem; }
.trust__item h4 { font-family: var(--font-body); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--olive-900); }
.trust__item p { font-size: .85rem; line-height: 1.45; color: var(--muted); max-width: 22ch; }

/* ----- Split (philosophy / founder / apothecary) ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3/4; }

/* ----- Product cards ----- */
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); }
.card { background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 1; background: var(--cream-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__tag { position: absolute; top: 12px; left: 12px; background: var(--olive); color: #f4efe1; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; border-radius: var(--r-pill); }
.card__quick { position: absolute; right: 12px; bottom: 12px; background: var(--paper); border-radius: var(--r-pill); padding: .55rem .95rem; font-size: .82rem; font-weight: 600; color: var(--olive); box-shadow: var(--shadow); transform: translateY(8px); opacity: 0; transition: .22s ease; }
.card:hover .card__quick { transform: none; opacity: 1; }
.card__quick:hover { background: var(--terra); color: #fff; }
.card__body { padding: 1.1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__cat { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card__name { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; color: var(--olive-900); }
.card__desc { font-size: .86rem; color: var(--muted); }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: .6rem; }
.card__price { font-weight: 700; color: var(--olive); font-size: 1.05rem; }
.card__price s { color: var(--muted); font-weight: 400; margin-right: .4rem; }

/* ----- Steps (how the protocol works) ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 2.4rem; }
.step { text-align: center; }
.step__num { width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%; background: var(--blush-100); color: var(--terra); font-family: var(--font-display); font-size: 1.4rem; display: grid; place-items: center; border: 1.5px solid var(--blush-200); }

/* ----- Testimonials ----- */
.testi { display: grid; gap: 1.4rem; }
.testi__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
.testi__card { scroll-snap-align: start; background: var(--paper); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.section--olive .testi__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f1ecde; }
.testi__stars { color: var(--ochre); letter-spacing: 2px; margin-bottom: .7rem; }
.testi__quote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; margin-bottom: 1rem; }
.testi__who { font-size: .82rem; color: var(--muted); }
.section--olive .testi__who { color: #cfc9b6; }
.pill-stat { display: inline-flex; align-items: center; gap: .5rem; background: var(--blush-100); color: var(--olive-900); padding: .5rem 1rem; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; }

/* ----- Press ----- */
.press { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 56px); align-items: center; justify-content: center; opacity: .8; }
.press span { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .02em; color: var(--olive-600); }

/* ----- Location ----- */
.map-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: linear-gradient(135deg, #dfe3c9, #cdd3ad); position: relative; }
.map-card .pin { position: absolute; top: 42%; left: 48%; width: 22px; height: 22px; background: var(--terra); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--shadow); }
.map-card .loc-chip { position: absolute; left: 16px; bottom: 16px; background: var(--paper); padding: .7rem 1rem; border-radius: var(--r); font-size: .85rem; box-shadow: var(--shadow); }

/* ----- Newsletter ----- */
.news { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.news__form { display: flex; flex-direction: column; gap: .8rem; max-width: 420px; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field input { padding: .9rem 1.1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--paper); font: inherit; }
.field input:focus { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(193,135,58,.16); }

/* ----- Subscribe field (floating label + arrow submit, rounded) ----- */
.subscribe { position: relative; display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); background: transparent; transition: border-color .18s ease, box-shadow .18s ease; --nbg: var(--cream); max-width: 420px; }
.subscribe:focus-within { border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(193,135,58,.14); }
.subscribe__label { position: absolute; top: 0; left: 1rem; transform: translateY(-50%); background: var(--nbg); padding: 0 .5rem; font-size: .72rem; letter-spacing: .03em; color: var(--muted); pointer-events: none; }
.subscribe input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .95rem; padding: 1.05rem 0 1.05rem 1.15rem; color: var(--ink); }
.subscribe input:last-child { padding-right: 1.15rem; }
.subscribe input::placeholder { color: #ada791; }
.subscribe input:focus { outline: none; }
.subscribe__btn { flex: none; width: 44px; height: 44px; margin: 0 .45rem 0 .3rem; border-radius: 50%; display: grid; place-items: center; color: var(--olive); transition: background .18s ease, color .18s ease, transform .18s ease; }
.subscribe__btn:hover { background: var(--terra); color: #fff; transform: translateX(2px); }
.subscribe--dark { --nbg: var(--olive-900); border-color: rgba(247,241,230,.3); }
.subscribe--dark .subscribe__label { color: #cfc7b2; }
.subscribe--dark input { color: #f3efe4; }
.subscribe--dark input::placeholder { color: #8f886f; }
.subscribe--dark .subscribe__btn { color: #ece4d2; }
.subscribe--dark:focus-within { border-color: var(--blush); box-shadow: 0 0 0 3px rgba(227,169,149,.18); }

/* quiz option icons (real SVG, not emoji) */
.quiz__opt svg { width: 22px; height: 22px; color: var(--terra); flex: none; }

/* ----- Contact form (floating-label, textarea variant) ----- */
.subscribe--area { align-items: stretch; }
.subscribe--area textarea { flex: 1; border: 0; background: none; font: inherit; font-size: .95rem; padding: 1.05rem 1.15rem; color: var(--ink); min-height: 132px; resize: vertical; }
.subscribe--area textarea:focus { outline: none; }
.contact-form { display: grid; gap: 1.1rem; max-width: 100%; }
.contact-form .subscribe { max-width: 100%; }

/* ----- Info list (NAP / hours / socials) ----- */
.info-list { display: grid; gap: 1.3rem; }
.info-list__item { display: flex; gap: .9rem; align-items: flex-start; }
.info-list__item svg { color: var(--terra); flex: none; margin-top: 3px; }
.info-list__item h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-900); margin-bottom: .25rem; }
.info-list__item p, .info-list__item a { font-size: .92rem; color: var(--muted); }
.info-list__item a:hover { color: var(--terra); }
.hours { display: grid; gap: .35rem; font-size: .9rem; color: var(--muted); }
.hours div { display: flex; justify-content: space-between; max-width: 260px; border-bottom: 1px dashed var(--line); padding-bottom: .3rem; }

/* ----- Simple page hero (About / Contact) ----- */
.page-hero { background: var(--cream-2); border-bottom: 1px solid var(--line); text-align: center; padding-block: clamp(48px, 7vw, 92px); }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.page-hero p { max-width: 52ch; margin: 1rem auto 0; color: var(--muted); }
.map-card--lg { aspect-ratio: 16/10; }

/* ----- Footer ----- */
.footer { background: var(--olive-900); color: #d9d2bf; padding-block: clamp(48px, 6vw, 80px) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(24px, 4vw, 56px); }
.footer h4 { color: #f3edda; font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.footer a { display: block; padding: .3rem 0; font-size: .9rem; color: #cfc7b2; }
.footer a:hover { color: var(--blush); }
.footer__brand img { height: 64px; margin-bottom: 1rem; filter: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(360%) hue-rotate(3deg) brightness(96%); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.6rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: #b3ab96; }

/* ----- Sticky mobile CTA ----- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px -16px rgba(52,51,26,.4); padding: .7rem var(--gutter); display: none; align-items: center; gap: .7rem; }
.sticky-cta .btn { flex: 1; justify-content: center; white-space: nowrap; padding: .95em 1rem; font-size: .92rem; }

/* ----- Quiz modal ----- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal__scrim { position: absolute; inset: 0; background: rgba(44,43,31,.55); backdrop-filter: blur(3px); }
.modal__panel { position: relative; width: min(560px, 100%); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 4vw, 2.6rem); max-height: 90vh; overflow: auto; }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.quiz__bar { height: 6px; border-radius: 999px; background: var(--blush-100); overflow: hidden; margin-bottom: 1.6rem; }
.quiz__bar i { display: block; height: 100%; background: var(--terra); width: 33%; transition: width .3s ease; }
.quiz__q { font-family: var(--font-display); font-size: 1.5rem; color: var(--olive-900); margin-bottom: 1.2rem; }
.quiz__opts { display: grid; gap: .7rem; }
.quiz__opt { text-align: left; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--paper); border: 1.5px solid var(--line); font-weight: 500; transition: .16s ease; display: flex; align-items: center; gap: .8rem; }
.quiz__opt:hover { border-color: var(--ochre); transform: translateX(3px); }
.quiz__opt .ico { font-size: 1.3rem; }
.quiz__result { text-align: center; }
.quiz__result .card { text-align: left; margin: 1.2rem auto 0; max-width: 280px; }

/* ----- Toast ----- */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--olive-900); color: #f3efe4; padding: .8rem 1.3rem; border-radius: var(--r-pill); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s ease; z-index: 90; font-size: .88rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   PDP-specific
   ========================================================================== */
.breadcrumb { font-size: .82rem; color: var(--muted); padding-block: 1.4rem; }
.breadcrumb a:hover { color: var(--terra); }
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.gallery { align-self: start; }
@media (min-width: 901px) { .gallery { position: sticky; top: 120px; } }
.gallery__main { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--cream-2); aspect-ratio: 1; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: .6rem; margin-top: .7rem; }
.gallery__thumbs button { width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; background: var(--cream-2); }
.gallery__thumbs button.active { border-color: var(--ochre); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__cat { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); font-weight: 600; }
.pdp__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: .5rem 0 .7rem; }
.pdp__price { font-size: 1.5rem; font-weight: 700; color: var(--olive); }
.pdp__benefits { display: grid; gap: .6rem; margin: 1.4rem 0; }
.pdp__benefits li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.pdp__benefits svg { color: var(--terra); flex: none; margin-top: 3px; }
.buybox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem; box-shadow: var(--shadow-sm); display: grid; gap: 1rem; margin-top: 1.4rem; }
.buybox__row { display: flex; gap: .8rem; align-items: center; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 42px; height: 44px; font-size: 1.1rem; color: var(--olive); }
.qty input { width: 40px; text-align: center; border: 0; background: none; font: inherit; }
.opt-sub { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r); font-size: .86rem; }
.opt-sub input { margin-top: 3px; }
.opt-sub .save { color: var(--terra); font-weight: 600; }
.accordion { border-top: 1px solid var(--line); margin-top: 1.6rem; }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; font-weight: 600; text-align: left; font-size: .95rem; }
.accordion__head .plus { color: var(--terra); font-size: 1.3rem; transition: transform .2s ease; }
.accordion__item.open .plus { transform: rotate(45deg); }
.accordion__body { display: none; padding-bottom: 1.1rem; color: var(--muted); font-size: .9rem; }
.accordion__item.open .accordion__body { display: block; }
.reviews-empty { text-align: center; background: var(--cream-2); border: 1px dashed var(--blush-200); border-radius: var(--r); padding: 2.4rem; }

/* ==========================================================================
   V2 - Editorial elevation (inspired by Baronesse layout, Herbalista palette)
   ========================================================================== */

/* ----- Top announcement with arrows ----- */
.topbar { background: var(--olive-900); color: #eae4d2; }
.topbar__inner { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; max-width: var(--maxw); margin-inline: auto; padding: .6rem var(--gutter); }
.topbar__msg { text-align: center; font-size: .8rem; letter-spacing: .06em; }
.topbar__msg b { color: var(--blush); }
.topbar__arrow { color: #cfc7b0; font-size: .9rem; justify-self: center; }
.topbar__arrow:hover { color: #fff; }

/* ----- Header v2: search | centered logo | utilities + subnav ----- */
.header2 { position: sticky; top: 0; z-index: 50; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.header2__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem var(--gutter) .4rem; max-width: var(--maxw); margin-inline: auto; }
.header2__search { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .88rem; max-width: 260px; }
.header2__search input { border: 0; background: none; font: inherit; color: var(--ink); width: 100%; }
.header2__search input:focus { outline: none; }
.header2__logo { justify-self: center; }
.header2__logo img { height: 52px; }
.header2__utils { justify-self: end; display: flex; align-items: center; gap: 1.15rem; font-size: .85rem; }
.header2__utils a { display: inline-flex; align-items: center; gap: .35rem; color: var(--olive-900); }
.header2__utils a:hover { color: var(--terra); }
.subnav { display: flex; justify-content: center; gap: 2rem; padding: .3rem var(--gutter) .9rem; border-top: 1px solid transparent; }
.subnav a { font-size: .9rem; font-weight: 500; color: var(--olive-900); padding-bottom: 3px; position: relative; }
.subnav a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--terra); transition: width .2s ease; }
.subnav a:hover::after, .subnav a[aria-current]::after, .subnav a[aria-expanded="true"]::after { width: 100%; }
.subnav a.is-accent { color: var(--terra); font-weight: 600; }

/* ----- Mega menu ----- */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 26px 44px -26px rgba(52,51,26,.45); z-index: 45; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.mega.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.mega__inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: clamp(20px, 3vw, 52px); padding-block: clamp(28px, 3vw, 46px); }
.mega__col h5 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; font-weight: 600; }
.mega__col a { display: block; padding: .4rem 0; font-size: .95rem; color: var(--olive-900); transition: color .15s ease, padding .15s ease; }
.mega__col a:hover { color: var(--terra); padding-left: 5px; }
.mega__col a.mega__all { color: var(--terra); font-weight: 600; margin-top: .4rem; }
.mega__promo { display: block; }
.mega__promo-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); background: var(--cream-2); }
.mega__promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mega__promo:hover .mega__promo-img img { transform: scale(1.05); }
.mega__promo .k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); font-weight: 600; margin-top: .9rem; display: block; }
.mega__promo h5 { font-family: var(--font-display); font-size: 1.2rem; color: var(--olive-900); margin: .2rem 0; }
.mega__promo p { font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .mega { display: none !important; } }

/* ----- Collection / category archive ----- */
.coll-title { text-align: center; padding: clamp(16px, 3vw, 32px) 0 clamp(22px, 4vw, 40px); }
.coll-title .eyebrow { display: block; }
.coll-title h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.coll-layout { display: grid; grid-template-columns: 236px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: clamp(48px, 7vw, 90px); }
.coll-side__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.coll-side__title { font-family: var(--font-display); font-size: 1.7rem; color: var(--olive-900); }
.coll-side__close { display: none; font-size: 1.8rem; line-height: 1; color: var(--olive-900); }
.filter-group { border-top: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: 1px solid var(--line); }
.filter-group__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; font-weight: 600; font-size: .92rem; color: var(--olive-900); background: none; border: 0; cursor: pointer; text-align: left; }
.filter-group__car { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .55; flex: none; }
.filter-group.open .filter-group__car { transform: rotate(-135deg); }
.filter-group__body { display: none; padding: 0 0 1rem; }
.filter-group.open .filter-group__body { display: block; }
.filter-opt { display: flex; align-items: center; gap: .6rem; padding: .38rem 0; font-size: .9rem; color: var(--olive-900); cursor: pointer; }
.filter-opt input { width: 16px; height: 16px; accent-color: var(--olive); flex: none; cursor: pointer; }
.filter-opt .c { color: var(--muted); font-size: .82rem; margin-left: auto; }
.coll-clear { margin-top: 1.1rem; font-size: .82rem; color: var(--terra); font-weight: 600; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.coll-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.coll-toolbar__left { display: flex; align-items: center; gap: 1rem; }
.coll-count { font-size: .88rem; color: var(--muted); }
.coll-count b { color: var(--olive-900); }
.coll-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.coll-sort select { font: inherit; font-size: .85rem; padding: .5em .9em; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--olive-900); cursor: pointer; }
.coll-sort select:focus { outline: none; border-color: var(--ochre); }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(16px, 2vw, 30px); }
.pcard__badge { position: absolute; top: 12px; left: 12px; background: var(--terra); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 4px; z-index: 1; }
.pcard__price s { color: var(--muted); font-weight: 400; margin-right: .4rem; }
.coll-empty { text-align: center; color: var(--muted); padding: 3rem 0; grid-column: 1 / -1; }
.coll-cta { text-align: center; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.4rem, 4vw, 3.4rem); }

/* ----- Schedule (Detox Cure day plan) ----- */
.schedule { max-width: 760px; margin: 2.4rem auto 0; }
.schedule__row { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.schedule__row:last-child { border-bottom: 1px solid var(--line); }
.schedule__time { font-family: var(--font-display); font-size: 1.35rem; color: var(--terra); }
.schedule__name { font-weight: 600; color: var(--olive-900); }
.schedule__desc { font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.coll-filterbtn { display: none; }
@media (max-width: 900px) {
  .coll-layout { grid-template-columns: 1fr; }
  .coll-side { display: none; position: fixed; inset: 0; z-index: 75; background: var(--cream); padding: 1.2rem var(--gutter) 2.4rem; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .coll-side.open { display: block; }
  .coll-side__close { display: block; }
  .coll-filterbtn { display: inline-flex; }
  .coll-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .coll-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ----- Mobile nav (burger + drawer + accordion) ----- */
.header2__mobleft { display: none; align-items: center; gap: .1rem; }
.header2__burger { flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; }
.header2__burger span { width: 22px; height: 2px; background: var(--olive-900); border-radius: 2px; }
.header2__msearch { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; color: var(--olive-900); cursor: pointer; }
.mobnav { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.mobnav.open { visibility: visible; }
.mobnav__scrim { position: absolute; inset: 0; background: rgba(44,43,31,.5); opacity: 0; transition: opacity .3s ease; }
.mobnav.open .mobnav__scrim { opacity: 1; }
.mobnav__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(88vw, 370px); background: var(--cream); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform .3s ease; display: flex; flex-direction: column; overflow-y: auto; }
.mobnav.open .mobnav__panel { transform: none; }
.mobnav__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--cream); z-index: 1; }
.mobnav__head img { height: 40px; }
.mobnav__close { font-size: 1.9rem; line-height: 1; color: var(--olive-900); width: 40px; height: 40px; }
.mobnav__body { padding: .4rem 1.2rem 2.4rem; display: flex; flex-direction: column; }
.mobnav__link { padding: .95rem 0; font-size: 1rem; font-weight: 500; color: var(--olive-900); border-bottom: 1px solid var(--line); }
.mobnav__link:hover { color: var(--terra); }
.mobnav__cta { margin-top: 1.4rem; }
.mobacc { border-bottom: 1px solid var(--line); }
.mobacc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .95rem 0; font-size: 1rem; font-weight: 600; color: var(--olive-900); text-align: left; background: none; border: 0; cursor: pointer; }
.mobacc__car { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .55; flex: none; }
.mobacc.open .mobacc__car { transform: rotate(-135deg); }
.mobacc__body { display: none; padding: 0 0 .7rem .3rem; }
.mobacc.open .mobacc__body { display: block; }
.mobacc__body a { display: block; padding: .5rem 0; font-size: .92rem; color: var(--muted); }
.mobacc__body a:hover { color: var(--terra); }

/* ----- Full-bleed cinematic hero carousel ----- */
.hero2 { position: relative; min-height: min(84vh, 780px); overflow: hidden; color: #f7f1e6; background: #26271a; }
.hero2__viewport { position: absolute; inset: 0; z-index: 0; }
.hero2__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.hero2__slide.is-active { opacity: 1; pointer-events: auto; }
.hero2__img { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; }
.hero2__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,24,16,.74) 0%, rgba(22,24,16,.5) 34%, rgba(22,24,16,.14) 60%, rgba(22,24,16,.04) 100%); }
.hero2__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.hero2__inwrap { max-width: var(--maxw); margin-inline: auto; width: 100%; padding-inline: var(--gutter); }
.hero2__eyebrow { font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--blush); font-weight: 600; margin-bottom: 1.1rem; }
.hero2__title { font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.01em; color: #fbf6ec; font-size: clamp(2.8rem, 7.5vw, 6rem); text-transform: uppercase; margin-bottom: 1.1rem; }
.hero2__title span { display: block; }
.hero2__sub { max-width: 34ch; color: #ece4d2; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 2rem; }
.hero2__cta { display: inline-flex; align-items: center; gap: .6rem; padding: 1.05em 2.2em; border-radius: var(--r-pill); border: 1.5px solid rgba(247,241,230,.8); color: #fbf6ec; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.hero2__cta:hover { background: var(--terra); border-color: var(--terra); transform: translateY(-2px); }
.hero2__dots { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 12px; z-index: 3; }
.hero2__dot { width: 56px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.34); overflow: hidden; padding: 0; cursor: pointer; border: 0; }
.hero2__dot i { display: block; height: 100%; width: 100%; background: #fbf6ec; transform: scaleX(0); transform-origin: left; }
.hero2__dot.is-active i { transform: scaleX(1); }

/* ----- Section headers (centered editorial) ----- */
.sec-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.sec-head .kicker { font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); font-weight: 600; display: block; margin-bottom: .8rem; }
.sec-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }

/* ----- Elevated product cards (Baronesse-style) ----- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.pcard { text-align: center; }
.pcard__media { position: relative; aspect-ratio: 3/4; background: var(--paper); border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__add { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--paper); color: var(--olive); border-radius: var(--r-pill); padding: .8em; font-weight: 600; font-size: .85rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: .22s ease; }
.pcard:hover .pcard__add { opacity: 1; transform: none; }
.pcard__add:hover { background: var(--terra); color: #fff; }
.pcard__brand { margin-top: 1rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pcard__name { font-family: var(--font-display); font-size: 1.08rem; color: var(--olive-900); margin: .3rem 0; }
.pcard__price { font-weight: 600; color: var(--olive); }

/* ----- Image tiles (Shop by Concern / Spotlight) ----- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3/4; display: block; box-shadow: var(--shadow-sm); }
.tile--wide { aspect-ratio: 16/10; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover .tile__img { transform: scale(1.06); }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(52,51,26,.12) 0%, rgba(52,51,26,.55) 100%); }
.tile__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #fbf6ec; text-align: center; padding: 1rem; }
.tile__label h3 { color: #fbf6ec; font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 400; }
.tile__shop { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1.5px solid rgba(255,255,255,.7); padding-bottom: 3px; }
.tile:hover .tile__shop { border-color: var(--blush); }

/* ----- Featured collection (image + overlapping card) ----- */
.featured { position: relative; }
.featured__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--shadow); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__card { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: clamp(1.6rem, 3vw, 2.6rem); max-width: 420px; margin: -80px 0 0 auto; position: relative; z-index: 2; }
.featured__card .kicker { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); font-weight: 600; }
.featured__card h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: .5rem 0 .9rem; }

/* ----- Focus on bestseller (split feature) ----- */
.focus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.focus__media { background: var(--paper); border-radius: var(--r-lg); aspect-ratio: 1; display: grid; place-items: center; box-shadow: var(--shadow-sm); overflow: hidden; }
.focus__media img { width: 100%; height: 100%; object-fit: contain; }
.size-opts { display: flex; gap: .6rem; margin: 1rem 0 1.4rem; }
.size-opts button { padding: .6em 1.2em; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--paper); font-weight: 600; font-size: .85rem; }
.size-opts button.on { border-color: var(--olive); background: var(--olive); color: #f6f2e6; }
.installments { font-size: .82rem; color: var(--muted); margin: .6rem 0 1rem; }
.installments b { color: var(--olive); }

/* ----- Service strip ----- */
.services { background: var(--cream-2); border-top: 2px solid var(--olive); border-bottom: 1px solid var(--line); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: clamp(40px, 5vw, 68px); text-align: center; }
.services__item { padding-inline: clamp(14px, 2vw, 32px); position: relative; }
.services__item + .services__item::before { content: ""; position: absolute; left: 0; top: 8%; height: 84%; width: 1px; background: var(--line); }
.services__item svg { width: 42px; height: 42px; color: var(--terra); margin: 0 auto 1.1rem; stroke-width: 1.6; }
.services__item h4 { font-family: var(--font-body); font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: var(--olive-900); font-weight: 700; margin-bottom: .55rem; }
.services__item p { font-size: .95rem; line-height: 1.55; color: var(--ink); max-width: 26ch; margin: 0 auto; }

/* ----- Payment icons ----- */
.pay { position: relative; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 1.5rem; }
.pay::before { content: "We accept"; position: absolute; top: 0; left: 3px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #b3ab96; opacity: .75; }
.pay svg { height: 24px; width: 38px; border-radius: 4px; display: block; }

/* ----- Welcome popup (Custom Protocol invite) ----- */
.welcome__panel { width: min(720px, 100%); display: grid; grid-template-columns: 1fr 1fr; background: var(--cream-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.welcome__media { background: linear-gradient(160deg, var(--blush-100), var(--blush-200)); min-height: 340px; display: grid; place-items: center; color: var(--olive-600); font-family: var(--font-display); font-style: italic; }
.welcome__body { padding: clamp(1.6rem, 3vw, 2.6rem); text-align: center; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.welcome__body h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.welcome__skip { font-size: .82rem; color: var(--muted); text-decoration: underline; margin-top: 1rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero__grid, .split, .news, .pdp { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .trust__row { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.4rem; }
  .trust__item::before { display: none; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__links.open { display: flex; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: .4rem; background: var(--cream); padding: 1.2rem var(--gutter) 1.6rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav__links.open .nav__protocol { margin-top: .6rem; }
  .hero__media { max-width: 420px; margin-inline: auto; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }

  /* v2 */
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .tiles, .tiles--3 { grid-template-columns: repeat(2, 1fr); }
  .focus { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1rem; }
  .services__item::before { display: none; }
  .featured__card { margin: -60px auto 0; }
  .header2__row { grid-template-columns: auto 1fr auto; }
  .header2__search { display: none; }
  .subnav { display: none; }
  .header2__row { grid-template-columns: 1fr auto 1fr; }
  .header2__mobleft { display: flex; }
  .header2__burger { display: flex; }
  .header2__utils a.hide-sm { display: none; }
  .header2__utils a[aria-label="Account"] { display: none; }
  .header2__utils { gap: .6rem; }
  .hero2 { min-height: 74vh; }
  .hero2__scrim { background: linear-gradient(180deg, rgba(22,24,16,.42) 0%, rgba(22,24,16,.68) 78%); }
  .hero2__dot { width: 44px; }
  .welcome__panel { grid-template-columns: 1fr; }
  .welcome__media { min-height: 150px; }
}
@media (max-width: 540px) {
  .grid-cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__strip { gap: .4rem 1.2rem; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tiles, .tiles--3, .tiles--2 { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .header2__utils span.hide-sm { display: none; }
}

/* ----- Motion / accessibility ----- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }