/* Advertorial design system.
   THE ONLY BLOCK YOU CHANGE PER CLIENT IS :root BELOW.
   Extract the real values from the client's live site (see RECON.md) and paste them in.
   Everything after :root is client-agnostic and should not need editing. */

/* Real values pulled from pepprzz.com assets/site.css (v=74), 2026-10-12.
   Variable names stay generic so the rest of the sheet is untouched; only the values are
   the client's. navy => their ink #1A1814, gold => their forest green #3D5A3B.
   Their display face is Mont, self-hosted under their own licence, so it is not copied
   here; Montserrat is the closest open match. Instrument Serif italic is their own
   accent face, loaded from Google Fonts exactly as they load it. */
:root {
  --navy: #1A1814;
  --navy-deep: #1A1814;
  --navy-2: #514C42;         /* --ink2 */
  --navy-3: #8B867B;         /* --ash */
  --ink: #1A1814;            /* --ink */
  --ink-2: #514C42;          /* --ink2 */
  --gold: #3D5A3B;           /* their green accent */
  --gold-2: #3D5A3B;
  --gold-3: #5F6650;         /* --olive */
  --gold-deep: #2C432B;
  --gold-pale: #E9ECE1;      /* --sage-lt */
  --bg: #FBF9F4;             /* --paper */
  --bg-soft: #F3EDE3;        /* --wall */
  --line: rgba(26,24,20,.13); /* --line */
  --line-strong: rgba(26,24,20,.26);
  --disp: 'Montserrat', system-ui, sans-serif;
  --body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --mono: 'Montserrat', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --radius-card: 18px;       /* --rm */
  --track-label: .14em;
  --track-display: -.035em;

  --bar-top: 44px;
  --bar-bottom: 82px;
}

body.adv {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  padding-top: var(--bar-top);
  padding-bottom: var(--bar-bottom);
}

.adv h1, .adv h2, .adv h3 { font-family: var(--disp); letter-spacing: -0.02em; }

.adv-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }

/* Two column on desktop, the rail is CTA #3 that stays on screen.
   padding-top clears the fixed bar for BOTH columns. It lives here rather than on
   .adv-kicker because `.adv p` (0,1,1) outranks `.adv-kicker` (0,1,0) and silently
   zeroes that margin, which left the first line flush against the bar. */
.adv-grid { display: block; padding-top: 34px; }
@media (min-width: 1000px) {
  .adv-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 44px; align-items: start; }
}

/* ---------- sticky bar 1 (top) ---------- */
.adv-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--bar-top);
  background: var(--navy-deep); color: var(--bg-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  border-bottom: 1px solid rgba(61,90,59,.35);
}
.adv-topbar .brand {
  font-family: var(--disp); font-weight: 800; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; white-space: nowrap;
}
.adv-topbar .brand span { color: #fff; }
.adv-topbar .top-cta {
  font: 600 .74rem/1 var(--body); letter-spacing: .04em;
  color: #fff; background: var(--gold);
  padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.adv-topbar .top-cta:hover { background: var(--gold-deep); }

/* ---------- sticky bar 2 (bottom) holds CTA #2 and #3 ---------- */
.adv-bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--navy-deep);
  border-top: 2px solid var(--gold-3);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 -8px 28px rgba(26,24,20,.28);
}
.adv-bottombar .bb-copy { display: none; color: var(--bg-soft); font-size: .78rem; line-height: 1.35; }
.adv-bottombar .bb-copy strong { color: #fff; display: block; font-family: var(--disp); font-size: .92rem; }
@media (min-width: 720px) { .adv-bottombar .bb-copy { display: block; } }
.bb-primary {
  background: var(--gold); color: #fff;
  font: 700 .86rem/1 var(--body); letter-spacing: .02em;
  padding: 14px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.bb-primary:hover { background: var(--gold-deep); }
.bb-secondary {
  color: #fff; font: 600 .78rem/1 var(--body);
  padding: 13px 16px; border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.bb-secondary:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- article ---------- */
.adv-kicker {
  font: 700 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 30px 0 14px;
}
.adv h1 {
  font-size: clamp(1.72rem, 5vw, 2.62rem); line-height: 1.12;
  color: var(--navy-deep); margin: 0 0 18px; font-weight: 600;
}
.adv h1 b { font-weight: 800; }
.adv-standfirst {
  font-size: 1.04rem; color: var(--ink-2); margin: 0 0 22px;
}
.adv-standfirst mark {
  background: #E9ECE1; color: var(--ink); padding: 2px 5px; box-decoration-break: clone;
}
/* Source shots are square 1254x1254 with the client's own studio background baked in. */
.adv-hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); }
.adv-hero .vial { border-radius: 0; }
.adv-figcap {
  font: 500 .8rem/1.5 var(--body); color: var(--ink-2);
  padding: 10px 14px; border-top: 1px solid var(--line); background: #fff;
}

.adv p { margin: 0 0 1.15em; }
.adv h2 {
  font-size: clamp(1.24rem, 3.4vw, 1.58rem); color: var(--navy-deep);
  margin: 40px 0 12px; font-weight: 700; line-height: 1.22;
}
.adv h2 .num {
  font-family: var(--mono); color: var(--gold-2); font-size: .82em;
  margin-right: 10px; font-weight: 500;
}
.adv .takeaway {
  font-weight: 650; color: var(--navy-deep);
  border-left: 3px solid var(--gold-3); padding-left: 14px; margin: 0 0 1.2em;
}

/* checklist */
.adv-checks { list-style: none; margin: 0 0 26px; padding: 0; }
.adv-checks li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.adv-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  color: var(--gold-2); font-weight: 800;
}
.adv-checks b { color: var(--navy-deep); }

/* ---------- inline CTA blocks ---------- */
.adv-cta {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 20px; margin: 34px 0; text-align: center;
}
.adv-cta h3 {
  font-size: 1.18rem; color: var(--navy-deep); margin: 0 0 8px; font-weight: 700; line-height: 1.25;
}
.adv-cta p { font-size: .92rem; color: var(--ink-2); margin: 0 0 16px; }
.btn-gold {
  display: inline-block; background: var(--gold); color: #fff;
  font: 700 .95rem/1 var(--body); padding: 16px 30px;
  border-radius: 999px; text-decoration: none;
}
.btn-gold:hover { background: var(--gold-deep); }
.adv-usp {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 14px; font: 400 .92rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-2);
}
.adv-usp span::before { content: "● "; color: var(--gold-2); }

/* ---------- COA card, the lab-document motif ---------- */
.coa {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin: 30px 0;
}
.coa-head {
  background: var(--navy-deep); color: var(--gold);
  padding: 13px 16px; font: 400 .98rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 10px;
}
.coa-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--bg-soft);
  font: 400 1.02rem/1.4 var(--mono); letter-spacing: .06em;
}
.coa-row:last-child { border-bottom: 0; }
.coa-row .k { color: var(--ink-2); }
.coa-row .v { color: var(--navy-deep); font-weight: 600; text-align: right; }
.coa-row .pass { color: #3D5A3B; }
.coa-row .fail { color: #9B3B2E; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .88rem; }
.cmp th, .cmp td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font: 700 .74rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cmp thead th:nth-child(2) { color: var(--gold-deep); }
.cmp td:nth-child(2) { color: #3D5A3B; font-weight: 650; }
.cmp td:nth-child(3) { color: #a2503f; }

/* ---------- desktop rail: always-visible CTA ---------- */
.adv-rail { display: none; }
@media (min-width: 1000px) {
  .adv-rail { display: block; position: sticky; top: calc(var(--bar-top) + 22px); }
}
.rail-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: 16px;
}

.rail-body { padding: 18px 16px; text-align: center; }
.rail-body h4 {
  font-family: var(--disp); font-size: 1.02rem; line-height: 1.25;
  color: var(--navy-deep); margin: 0 0 10px; font-weight: 700;
}
.rail-body p { font-size: .82rem; color: var(--ink-2); margin: 0 0 14px; }
.rail-body .btn-gold { display: block; padding: 14px 12px; font-size: .88rem; }
.rail-facts { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.rail-facts li {
  font: 500 .82rem/1.5 var(--body); color: var(--ink-2);
  padding: 7px 0; border-top: 1px solid var(--bg-soft);
}
.rail-facts li::before { content: "✓ "; color: var(--gold-2); font-weight: 700; }

/* ---------- comment thread ---------- */
.adv-comments { margin: 44px 0 0; border-top: 1px solid var(--line); padding-top: 26px; }
.adv-comments h3 {
  font-family: var(--disp); font-size: 1.05rem; color: var(--navy-deep);
  margin: 0 0 20px; font-weight: 700;
}
.cmt { display: flex; gap: 12px; margin-bottom: 20px; }
.cmt.reply { margin-left: 42px; }
.avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 .8rem/1 var(--body); color: #fff; background: var(--navy-3);
}
.avatar.g { background: var(--gold); }
.avatar.n { background: var(--navy-2); }
.cmt-body { flex: 1; min-width: 0; }
.cmt-name { font: 700 .84rem/1.3 var(--body); color: var(--navy-deep); margin-bottom: 2px; }
.cmt-text { font-size: .88rem; color: var(--ink-2); margin: 0 0 4px; }
.cmt-meta { font: 500 .72rem/1 var(--body); color: #9aa0a6; }

.adv-note { font: 500 .82rem/1.55 var(--body); color: var(--ink-2); margin: -18px 0 26px; }

/* ---------- scorecard hero (advertorial 2) ---------- */
.scorecard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; margin: 0 0 26px; }
.sc-head {
  background: var(--navy-deep); color: var(--gold); padding: 13px 16px;
  font: 400 .98rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.sc-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--bg-soft); font-size: .86rem; }
.sc-row:last-of-type { border-bottom: 0; }
.sc-n { font: 400 .95rem/1 var(--mono); color: var(--gold-2); flex: 0 0 24px; }
.sc-k { flex: 1; color: var(--navy-deep); font-weight: 600; }
.sc-v { font: 400 .95rem/1 var(--mono); white-space: nowrap; }
.sc-v.pass { color: #3D5A3B; }
.sc-v.miss { color: #9B3B2E; }
.sc-foot { background: var(--bg-soft); padding: 13px 16px; font-size: .82rem; color: var(--ink-2); border-top: 1px solid var(--line); }

/* ---------- trio hero (advertorial 3) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.trio figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-soft); }

.trio figcaption {
  font: 500 .76rem/1.35 var(--body); color: var(--ink-2);
  padding: 8px 6px; text-align: center; background: #fff; border-top: 1px solid var(--line);
}

/* ---------- homepage ---------- */
.home-hero { background: var(--navy-deep); color: var(--bg-soft); padding: 46px 0 52px; margin-bottom: 0; }
.home-hero .adv-kicker { color: var(--gold); margin-top: 0; }
.home-hero h1 { color: #fff; font-size: clamp(1.9rem, 5.4vw, 3rem); margin-bottom: 16px; font-weight: 600; }
.home-hero h1 b { color: var(--gold); font-weight: 900; }
.home-dek { color: #CBC4B6; font-size: 1.02rem; max-width: 640px; margin: 0 0 26px; }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost {
  display: inline-block; color: #fff; border: 1px solid rgba(255,255,255,.4);
  font: 600 .95rem/1 var(--body); padding: 16px 28px; border-radius: 999px; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.trust-strip { background: var(--navy-deep); color: #fff; }
.trust-inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  padding: 14px 18px; font: 400 .98rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

.sec-title { font-family: var(--disp); font-size: clamp(1.35rem, 3.6vw, 1.8rem); color: var(--navy-deep); margin: 48px 0 6px; font-weight: 700; }
.sec-dek { color: var(--ink-2); margin: 0 0 26px; }

.card-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,24,20,.14); }
.card-img { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.card-img { border-bottom: 1px solid var(--line); }
.card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card-kicker { font: 700 .66rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 9px; }
.card h3 { font-family: var(--disp); font-size: 1.08rem; line-height: 1.28; color: var(--navy-deep); margin: 0 0 9px; font-weight: 700; }
.card-dek { font-size: .87rem; color: var(--ink-2); margin: 0 0 14px; flex: 1; }
.card-more { font: 700 .82rem/1 var(--body); color: var(--gold-deep); }

.band {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 24px; margin: 44px 0; text-align: center;
}
.band h3 { font-family: var(--disp); font-size: clamp(1.2rem, 3.2vw, 1.55rem); color: var(--navy-deep); margin: 0 0 10px; font-weight: 700; }
.band p { color: var(--ink-2); max-width: 620px; margin: 0 auto 20px; font-size: .95rem; }
.band.dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.band.dark h3 { color: #fff; }
.band.dark p { color: #CBC4B6; }

.eight-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .eight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .eight-grid { grid-template-columns: repeat(4, 1fr); } }
.eight { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: .82rem; color: var(--ink-2); }
.eight .n { display: block; font: 400 .95rem/1 var(--mono); letter-spacing: .12em; color: var(--gold-2); margin-bottom: 8px; }
.eight b { display: block; font-family: var(--disp); font-size: .98rem; color: var(--navy-deep); margin-bottom: 5px; }

.trio a { text-decoration: none; color: inherit; display: block; }
.adv-hero a { display: block; }

/* ---------- legal / plain pages ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 34px 0 10px; }
.legal h1 { font-size: clamp(1.6rem, 4.4vw, 2.1rem); color: var(--navy-deep); margin-bottom: 18px; }
.legal h2 { font-size: 1.15rem; color: var(--navy-deep); margin: 30px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }

/* ---------- footer ---------- */
.adv-foot {
  margin-top: 46px; background: var(--navy-deep); color: #9aa0a6;
  padding: 30px 18px; font-size: .72rem; line-height: 1.6; text-align: center;
}
.adv-foot a { color: var(--gold); }
.adv-foot p { max-width: 760px; margin: 0 auto 12px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 18px; }
.foot-links a { font: 600 .76rem/1 var(--body); text-decoration: none; }
.foot-links a:hover { color: #fff; }
.adv-disclosure {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: 500 .72rem/1.5 var(--body); color: var(--ink-2); margin: 26px 0 0;
}


/* ---------- vial: the full bottle, never cropped, and interactive ----------
   The client's shots are square 1254x1254 with their own light studio background
   already baked in, so this is a soft light panel rather than a dark plinth. A dark
   plinth behind a light product card reads as a mistake. Contained, never cover. */
.vial {
  position: relative; display: block;
  overflow: hidden; aspect-ratio: 1 / 1; isolation: isolate;
  padding: 3%;
  background: #F3EDE3;
}
/* soft pool of light the vial appears to stand in */
.vial::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 9%; width: 58%; height: 11%;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(50% 50% at 50% 50%, rgba(61,90,59,.28), transparent 72%);
  filter: blur(9px); opacity: 0;
  transition: opacity .42s ease, transform .42s ease;
}
.vial img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  transition: transform .42s cubic-bezier(.2,.7,.3,1), filter .42s ease;
}
.vial-cta {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 11px 8px; text-align: center;
  background: linear-gradient(to top, rgba(26,24,20,.95) 28%, rgba(26,24,20,0));
  color: #fff; font: 700 .72rem/1.2 var(--body);
  transform: translateY(101%); transition: transform .34s ease;
}

/* Two cases: the vial is inside a link, or the link is the vial. */
a:hover .vial img, a:focus-visible .vial img,
a.vial:hover img, a.vial:focus-visible img {
  transform: translateY(-7px) scale(1.05);
  filter: drop-shadow(0 16px 22px rgba(26,24,20,.22));
}
a:hover .vial::before, a:focus-visible .vial::before,
a.vial:hover::before, a.vial:focus-visible::before {
  opacity: .85; transform: translateX(-50%) scale(1.2);
}
a:hover .vial-cta, a:focus-visible .vial-cta,
a.vial:hover .vial-cta, a.vial:focus-visible .vial-cta { transform: translateY(0); }

/* Per-placement proportions. The hero is wider than the source square, so the product
   is centred in it with room around; it is contained either way and never cropped. */
.vial-hero { aspect-ratio: 16 / 10; border-radius: 0; padding: 2% 2% 3%; }

@media (max-width: 560px) { .vial-hero { aspect-ratio: 4 / 3; } }

.vial-rail { display: block; aspect-ratio: 1 / 1; }

.trio .vial { aspect-ratio: 1 / 1; }
.trio figcaption { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .vial img, .vial::before, .vial-cta { transition: none; }
  a:hover .vial img, a.vial:hover img { transform: none; }
  .vial-cta { transform: translateY(0); }
}

/* ---------- client-supplied brand imagery ----------
   Representation shots, not catalogue product shots. Shown whole, never cropped. */
.home-hero-grid { display: block; }
@media (min-width: 900px) {
  .home-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: 44px; align-items: center; }
}
.home-hero-img {
  display: block; margin-top: 30px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(220,202,158,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.home-hero-img img { width: 100%; height: auto; display: block; }
.home-hero-img:hover, .home-hero-img:focus-visible {
  transform: translateY(-5px); box-shadow: 0 32px 72px rgba(0,0,0,.55);
}
@media (min-width: 900px) { .home-hero-img { margin-top: 0; } }

.brand-band {
  margin: 34px 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.brand-band > a { position: relative; display: block; overflow: hidden; }
.brand-band img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.brand-band > a:hover img, .brand-band > a:focus-visible img { transform: scale(1.035); }
.band-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 12px; text-align: center;
  background: linear-gradient(to top, rgba(26,24,20,.94) 26%, rgba(26,24,20,0));
  color: #fff; font: 700 .82rem/1.2 var(--body);
  transform: translateY(101%); transition: transform .34s ease;
}
.brand-band > a:hover .band-cta, .brand-band > a:focus-visible .band-cta { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .home-hero-img, .brand-band img, .band-cta { transition: none; }
  .home-hero-img:hover { transform: none; }
  .brand-band > a:hover img { transform: none; }
  .band-cta { transform: translateY(0); }
}

/* ---------- client catalogue screenshots, used exactly as supplied ---------- */
.catalog-shot { background: #fff; }
.catalog-shot img { width: 100%; height: auto; }

.rail-second {
  display: block; margin-top: 14px; text-align: center; text-decoration: none;
  font: 700 .8rem/1 var(--body); color: var(--gold);
}
.rail-second:hover { color: var(--gold-deep); text-decoration: underline; }
.foot-legal { color: #fff; font-size: .8rem; }

/* inline contextual links into the advertiser's own pages, styled as citations
   rather than buttons so the body copy still reads as an article */
.adv-inline {
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; font-weight: 600;
}
.adv-inline:hover { color: var(--gold-deep); text-decoration-thickness: 2px; }


/* ---------- no white strip between footer and the sticky bar ----------
   body carries padding-bottom: var(--bar-bottom) to reserve room for the fixed bottom
   bar, and that padding is body background, i.e. white. It rendered as a pale band
   between the dark footer and the dark bar. The footer now grows down through that
   reserved strip so the two dark blocks meet with nothing between them. */
.adv-foot {
  margin-bottom: calc(-1 * var(--bar-bottom));
  padding-bottom: calc(30px + var(--bar-bottom));
}

/* ---------- topbar fits a 375px phone ----------
   The wordmark and the CTA both carry white-space: nowrap, so at 375px the wordmark
   pushed the CTA past the right edge and it rendered clipped. Neither may wrap, so both
   shrink instead, and the wordmark is the one allowed to ellipsis if it still runs long. */
@media (max-width: 560px) {
  .adv-topbar { padding: 0 12px; gap: 8px; }
  .adv-topbar .brand {
    font-size: .66rem; letter-spacing: .08em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .adv-topbar .top-cta {
    flex: 0 0 auto;
    font-size: .66rem; padding: 7px 11px;
  }
}


/* Centred headings and short centred paragraphs: balance the rag so no block ends in a
   stray word. Left-aligned body copy is excluded on purpose. */
.sec-title, .sec-dek, .band h3, .band p, .adv-cta h3, .adv-cta p,
.home-hero h1, .rail-body h4, .rail-body p, .eight b, .adv-note { text-wrap: balance; }

/* ============================================================================
   PEPPRZZ SKIN (2026-10-12). Their site is light: cream wall, heavy ink display type,
   an italic serif for the second half of a headline, black pill buttons. Matched here.
   ========================================================================== */
.adv h1, .adv h2, .adv h3, .sec-title, .card h3, .band h3 { letter-spacing: var(--track-display); }
.adv h1 { font-weight: 800; }
.adv h1 b, .home-hero h1 b, .band h3 em, .sec-title em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
}
.adv h1 b { display: block; font-size: 1.08em; line-height: 1.05; margin-top: 4px; }

/* Homepage hero: their cream wall, not a dark slab. */
.home-hero { background: var(--bg-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.home-hero h1 { color: var(--ink); font-weight: 800; font-size: clamp(2.1rem, 5.6vw, 3.4rem); line-height: 1.02; }
.home-hero h1 b { color: var(--ink); font-weight: 400; }
.home-hero .adv-kicker { color: var(--gold); }
.home-dek { color: var(--ink-2); }
.home-hero .btn-gold { background: var(--ink); }
.home-hero .btn-gold:hover { background: #000; }
.home-hero .btn-ghost { color: var(--ink); border-color: var(--line-strong); background: #fff; }
.home-hero .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.home-hero-img { border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(26,24,20,.16); }
.home-hero-img:hover, .home-hero-img:focus-visible { box-shadow: 0 32px 72px rgba(26,24,20,.24); }

/* Trust strip and rails in their olive, so the page is not ink on ink everywhere. */
.trust-strip { background: var(--gold); }
.trust-inner { font-weight: 600; font-size: .72rem; letter-spacing: .12em; }
.adv-usp { font-weight: 600; font-size: .72rem; }
.eight .n, .adv h2 .num, .coa-head, .sc-head, .coa-row, .sc-n, .sc-v { font-weight: 700; }
.coa-row { font-size: .86rem; letter-spacing: .02em; }
.coa-head { font-size: .74rem; color: #E9ECE1; }
.adv-topbar .brand { color: #AEB8A0; }
.adv-topbar .brand span { color: #fff; }

/* Landscape scene photography, not square vial cards. Every box matches its source
   ratio so nothing is cropped and nothing letterboxes. */
.card-img.vial { aspect-ratio: 16 / 9; padding: 0; }
.vial-rail { aspect-ratio: 4 / 5; padding: 0; }
.card-img.vial img, .vial-rail img { object-fit: contain; }
.adv-hero { max-width: none; }
.vial-hero { aspect-ratio: 16 / 9; padding: 0; }
@media (max-width: 560px) { .vial-hero { aspect-ratio: 16 / 9; } }

/* Price book: their own published figure, styled like their shelf tag. */
.tag {
  display: inline-block; background: #FFFEFB; border: 1px solid rgba(26,24,20,.16);
  border-radius: 12px; padding: 14px 18px; box-shadow: 0 10px 24px rgba(26,24,20,.10);
  margin: 0 0 22px; text-align: left; min-width: 230px;
}
.tag .t-name { font-weight: 800; font-size: .9rem; display: flex; justify-content: space-between; gap: 18px; }
.tag .t-name span { font-weight: 500; color: var(--ink-2); font-size: .78rem; }
.tag .t-price { font-weight: 900; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1.1; margin: 6px 0 2px; }
.tag .t-foot { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-2); }
.tag .t-foot s { color: var(--navy-3); }

/* Headlines never end on a stray word. */
.adv h1, .adv h1 b, .adv h2, .card h3 { text-wrap: balance; }

/* Their green is too dark to read on the ink footer; sage is their own light tint. */
.adv-foot a { color: #AEB8A0; }
.adv-foot { color: #A8A196; }