/* ═══════════════════════════════════════════════════════════
   JUVYDERM DESIGN SYSTEM — 2026 redesign
   Editorial · ivory · Fraunces + Figtree · gold accent
   Used by: all treatment pages, hub, blog, FAQ
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  /* new tokens */
  --ivory:#faf7f2; --cream:#f3ece1; --paper:#ffffff;
  --ink:#2b2624; --ink-soft:#6d645d;
  --gold:#c29131; --gold-light:#dcbf82; --gold-dark:#8f6b20;
  --line:rgba(43,38,36,.09);
  /* legacy names kept so generated markup + inline styles keep working */
  --blue:#8f6b20; --blue-light:#c8a75c; --blue-dark:#6f5316;
  --dark:#2b2624; --dark-mid:#463f3a; --mid:#6d645d;
  --light:#f3ece1; --white:#ffffff; --blush:#f3ece1;
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Figtree',system-ui,sans-serif;
  --radius:3px; --radius-lg:4px;
  --shadow:0 10px 34px rgba(43,38,36,.07);
  --shadow-lg:0 22px 60px rgba(43,38,36,.12);
}
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-sans); font-weight:300; color:var(--ink); background:var(--ivory); line-height:1.75; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{ width:min(1100px,92vw); margin-inline:auto; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition:none!important;animation:none!important;} }

/* ── buttons ── */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.9rem; border-radius:2px; font-family:var(--font-sans);
  font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; transition:all .3s ease; cursor:pointer; border:none; }
.btn--primary{ background:var(--ink); color:var(--ivory); }
.btn--primary:hover{ background:var(--gold-dark); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid rgba(43,38,36,.35); }
.btn--ghost:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }

/* ── skip link: off-screen until keyboard-focused ── */
.skip-link{ position:absolute; top:-100px; left:1rem; z-index:999; background:var(--ink); color:var(--ivory);
  padding:.6rem 1.1rem; border-radius:2px; font-size:.8rem; letter-spacing:.06em; transition:top .2s; }
.skip-link:focus{ top:1rem; }

/* ── header ── */
.lp-nav{ position:sticky; top:0; z-index:100; background:rgba(250,247,242,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.lp-nav__inner{ width:min(1240px,94vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.lp-nav__logo{ flex-shrink:0; }
.lp-nav__logo img{ height:48px; width:auto; }
.lp-nav__links{ display:flex; align-items:center; gap:2rem; }
.lp-nav__links a{ font-size:.78rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); transition:color .25s; }
.lp-nav__links a:hover{ color:var(--gold-dark); }
.lp-nav__links a.btn{ color:var(--ivory); }
.lp-nav__links a.btn:hover{ color:#fff; }
/* mobile menu toggle — hidden on desktop, becomes the hamburger below 680px */
.lp-nav__toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; margin-left:.75rem;
  background:none; border:none; cursor:pointer; z-index:120; }
.lp-nav__toggle span{ display:block; width:24px; height:1.5px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.lp-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.lp-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.lp-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* compact Book button that stays in the bar on mobile so the CTA is never buried */
.lp-nav__book-m{ display:none; }

/* Collapse to the hamburger at 940px — comfortably before the desktop link row
   can overflow (nav now carries Find Your Glow too). Logo never shrinks. */
@media (max-width:940px){
  .lp-nav__toggle{ display:flex; }
  .lp-nav__inner{ position:relative; }
  .lp-nav__book-m{ display:inline-flex; align-items:center; margin-left:auto; background:var(--ink); color:var(--ivory);
    font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:.72rem 1.05rem; border-radius:2px; }
  .lp-nav__book-m:hover{ background:var(--gold-dark); color:#fff; }
  /* links collapse into a dropdown panel revealed by the hamburger */
  .lp-nav__links{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch;
    gap:0; background:var(--ivory); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(43,38,36,.10); padding:.25rem 0 .5rem; }
  .lp-nav__links.is-open{ display:flex; }
  .lp-nav__links a{ padding:.95rem 1.2rem; font-size:.82rem; border-bottom:1px solid var(--line); }
  .lp-nav__links a:last-child{ border-bottom:none; }
  .lp-nav__links a.btn{ display:none; } /* Book already lives in the bar on mobile */
}

/* ── hero: light editorial ── */
.lp-hero{ position:relative; background:
  radial-gradient(90% 120% at 85% 10%, rgba(194,145,49,.13) 0%, transparent 55%),
  linear-gradient(160deg,#fbf8f3 0%,#f5eee1 70%,#f1e6d2 100%);
  color:var(--ink); overflow:hidden; border-bottom:1px solid var(--line); }
.lp-hero::after{ content:''; position:absolute; right:-140px; top:-140px; width:480px; height:480px; border-radius:50%;
  border:1px solid rgba(194,145,49,.18); pointer-events:none; }
.lp-hero__inner{ position:relative; z-index:1; width:min(1240px,94vw); margin-inline:auto; padding:4.6rem 0 4.2rem; max-width:820px; margin-left:calc((100vw - min(1240px,94vw))/2 + 0px); }
@media (min-width:1320px){ .lp-hero__inner{ margin-left:auto; margin-right:auto; } }
.lp-crumbs{ font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:1.4rem; }
.lp-crumbs a{ color:var(--ink-soft); } .lp-crumbs a:hover{ color:var(--gold-dark); }
.lp-eyebrow{ font-family:var(--font-sans); font-size:.74rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:1.2rem; }
.lp-hero h1{ font-family:var(--font-serif); font-weight:300; font-size:clamp(2.5rem,5.4vw,4.1rem); line-height:1.07; letter-spacing:.002em; color:var(--ink); margin-bottom:1.2rem; }
.lp-hero__sub{ font-size:1.04rem; color:var(--ink-soft); max-width:56ch; margin-bottom:2.1rem; }
.lp-hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.lp-hero__rating{ display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; letter-spacing:.06em; color:var(--ink-soft); }
.lp-hero__rating .stars{ color:var(--gold); letter-spacing:.14em; }
.lp-hero__rating a{ color:inherit !important; }

/* ── trust strip ── */
.lp-trust{ background:var(--paper); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 2.4rem; padding:1.05rem 1rem; }
.lp-trust span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.45rem; }
.lp-trust span::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); }

/* ── sections ── */
.lp-section{ padding:5.4rem 0; }
.lp-section--alt{ background:var(--cream); }
.lp-section h2{ font-family:var(--font-serif); font-weight:300; font-size:clamp(1.9rem,3.8vw,2.7rem); color:var(--ink); line-height:1.12; margin-bottom:1.6rem; }
.lp-intro p{ color:var(--ink-soft); margin-bottom:1.15rem; font-size:1.03rem; max-width:72ch; }

/* ── benefit cards ── */
.lp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.lp-card{ background:var(--paper); padding:2.1rem 2rem; transition:background .3s; }
.lp-section--alt .lp-card{ background:var(--ivory); }
.lp-card:hover{ background:#fdfbf7; }
.lp-card h3{ font-family:var(--font-serif); font-size:1.3rem; font-weight:400; margin-bottom:.55rem; color:var(--ink); line-height:1.25; }
.lp-card p{ color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
@media (max-width:640px){ .lp-grid{ grid-template-columns:1fr; } }

/* ── steps ── */
.lp-steps{ counter-reset:step; display:flex; flex-direction:column; gap:1.35rem; max-width:760px; }
.lp-step{ display:flex; gap:1.3rem; align-items:flex-start; }
.lp-step__num{ counter-increment:step; flex-shrink:0; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold-light); color:var(--gold-dark); background:transparent;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:1.15rem; }
.lp-step__num::before{ content:counter(step,decimal-leading-zero); }
.lp-step p{ color:var(--dark-mid); font-size:.98rem; padding-top:.45rem; }

/* ── chips ── */
.lp-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.lp-chips span{ font-size:.82rem; letter-spacing:.03em; padding:.55rem 1.15rem; border-radius:40px; background:transparent; border:1px solid rgba(43,38,36,.18); color:var(--dark-mid); }

/* ── faq ── */
.lp-faq{ max-width:780px; border-top:1px solid var(--line); }
.lp-faq details{ background:transparent; border-bottom:1px solid var(--line); }
.lp-faq summary{ padding:1.25rem .2rem; font-family:var(--font-serif); font-size:1.14rem; font-weight:400; color:var(--ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; transition:color .25s; }
.lp-faq summary:hover{ color:var(--gold-dark); }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{ content:'+'; color:var(--gold-dark); font-size:1.35rem; font-weight:300; flex-shrink:0; }
.lp-faq details[open] summary::after{ content:'\2212'; }
.lp-faq p{ padding:0 .2rem 1.35rem; color:var(--ink-soft); font-size:.95rem; max-width:68ch; }

/* ── sticky book bar on treatment pages ── */
.lp-bookbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--ink); color:var(--ivory);
  border-top:1px solid rgba(250,247,242,.12); transform:translateY(105%); visibility:hidden;
  transition:transform .35s ease, visibility 0s linear .35s; box-shadow:0 -8px 26px rgba(43,38,36,.16); }
.lp-bookbar.on{ transform:translateY(0); visibility:visible; transition:transform .35s ease, visibility 0s; }
.lp-bookbar__in{ width:min(1120px,94vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 0; }
.lp-bookbar__txt strong{ font-family:var(--font-serif); font-weight:400; font-size:1.06rem; color:var(--ivory); display:block; line-height:1.2; }
.lp-bookbar__txt span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(250,247,242,.62); display:block; margin-top:.18rem; }
.lp-bookbar .btn{ flex-shrink:0; }
.lp-bookbar .btn--primary{ background:var(--gold-dark); color:#fff; }
.lp-bookbar .btn--primary:hover{ background:var(--gold-light); color:var(--ink); }
@media (max-width:600px){ .lp-bookbar__txt span{ display:none; } .lp-bookbar__txt strong{ font-size:.98rem; } .lp-bookbar .btn{ padding:.72rem 1.1rem; } }
/* narrow phones: the treatment name + long Book button don't fit — drop the (redundant) name and let the button fill the bar on one line */
@media (max-width:480px){ .lp-bookbar__txt{ display:none; } .lp-bookbar__in{ justify-content:center; } .lp-bookbar .btn--primary{ width:100%; display:flex; align-items:center; justify-content:center; white-space:nowrap; } }

/* ── product cross-sell strip on treatment pages ── */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1.6rem; }
.cs-card{ background:var(--paper); padding:1.5rem 1.5rem; text-decoration:none; display:block; transition:background .25s; }
.lp-section--alt .cs-card{ background:var(--ivory); }
.cs-card:hover{ background:#fdfbf7; }
.cs-card__brand{ font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); display:block; margin-bottom:.4rem; }
.cs-card h3{ font-family:var(--font-serif); font-size:1.12rem; font-weight:400; color:var(--ink); margin-bottom:.4rem; line-height:1.25; }
.cs-card p{ color:var(--ink-soft); font-size:.88rem; line-height:1.6; }
.cs-intro{ color:var(--ink-soft); font-size:1.02rem; margin-bottom:1.5rem; max-width:70ch; }

/* ── client testimonials on treatment pages ── */
.lp-revs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.lp-rev{ background:var(--ivory); padding:2rem 1.9rem; margin:0; }
.lp-section .lp-rev{ background:var(--paper); }
.lp-rev .st{ color:var(--gold); letter-spacing:.16em; font-size:.82rem; margin-bottom:.85rem; }
.lp-rev p{ color:var(--dark-mid); font-size:.95rem; line-height:1.75; margin-bottom:1rem; }
.lp-rev cite{ font-style:normal; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.lp-rev cite b{ color:var(--ink); font-weight:500; }
.lp-revs__note{ text-align:center; margin-top:1.1rem; font-size:.8rem; color:var(--ink-soft); font-style:italic; }
@media (max-width:640px){ .lp-revs{ grid-template-columns:1fr; } }

/* ── cta band (stays dark for contrast) ── */
.lp-cta{ background:linear-gradient(150deg,#2b2624 0%,#37302c 100%); color:var(--ivory); text-align:center; padding:4.6rem 1rem; }
.lp-cta h2{ font-family:var(--font-serif); font-weight:300; font-size:clamp(1.9rem,3.8vw,2.7rem); margin-bottom:.8rem; }
.lp-cta p{ color:rgba(250,247,242,.68); margin-bottom:1.9rem; max-width:60ch; margin-inline:auto; }
.lp-cta__row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.lp-cta .btn--primary{ background:var(--gold-dark); color:#fff; }
.lp-cta .btn--primary:hover{ background:var(--gold-light); color:var(--ink); }
.lp-cta .btn--ghost{ color:var(--ivory); border-color:rgba(250,247,242,.4); }
.lp-cta .btn--ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.lp-cta__fin{ margin-top:1.5rem; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,247,242,.45); }
.lp-cta__fin a{ color:var(--gold-light) !important; }

/* ── related links ── */
.lp-related{ display:flex; flex-wrap:wrap; gap:1rem; }
.lp-related a{ flex:1 1 220px; background:var(--paper); border:1px solid var(--line); padding:1.15rem 1.3rem;
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  font-family:var(--font-serif); font-size:1.05rem; font-weight:400; color:var(--ink); transition:.25s; }
.lp-section--alt .lp-related a{ background:var(--ivory); }
.lp-related a:hover{ border-color:var(--gold-light); color:var(--gold-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
.lp-related a span{ color:var(--gold); }
.lp-related__h{ font-family:var(--font-serif); font-size:1.2rem; font-weight:400; color:var(--ink); margin:2.2rem 0 1rem; }

/* ── E-E-A-T trust chips row (on treatment pages) ── */
/* uses .lp-trust above */

/* ── footer ── */
.lp-footer{ background:var(--ink); color:rgba(250,247,242,.55); text-align:center; padding:3rem 1rem 2.6rem; font-size:.82rem; }
.lp-footer p{ margin:.18rem 0; }
.lp-footer a{ color:var(--gold-light); }
.lp-footer strong{ font-family:var(--font-serif); font-weight:400; font-size:1.05rem; letter-spacing:.04em; }

/* ── treatments hub catalog ── */
.cat-intro{ color:var(--ink-soft); max-width:640px; margin-bottom:1.9rem; }
.cat-grid{ display:flex; flex-wrap:wrap; gap:1rem; }
.cat-card{ flex:1 1 250px; background:var(--paper); border:1px solid var(--line); padding:1.6rem 1.5rem; display:flex; flex-direction:column; transition:background .3s, border-color .3s, box-shadow .3s; }
.lp-section--alt .cat-card{ background:var(--ivory); }
.cat-card h3{ font-family:var(--font-serif); font-size:1.16rem; font-weight:400; margin-bottom:.4rem; color:var(--ink); line-height:1.25; }
.cat-card p{ color:var(--ink-soft); font-size:.87rem; line-height:1.6; flex:1; }
.cat-card--link:hover{ background:#fdfbf6; border-color:var(--gold-light); box-shadow:0 6px 18px rgba(43,38,36,.06); }
.cat-card--link .cat-more{ margin-top:.85rem; color:var(--gold-dark); font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.cat-card--link:hover .cat-more{ color:var(--gold-dark); }
/* non-linked info cards (treatments offered in-clinic without a dedicated page) */
.cat-card--info{ border:1px dashed var(--line); background:transparent; }
.cat-ask{ margin-top:.85rem; color:var(--ink-soft); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }

/* ── blog ── */
.article-meta{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:.9rem; }
.article-body{ max-width:740px; }
.article-body > p{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.25rem; }
.article-body h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.45rem,3.2vw,1.95rem); margin:2.6rem 0 1rem; color:var(--ink); }
.article-body ul{ margin:0 0 1.4rem 0; display:flex; flex-direction:column; gap:.55rem; }
.article-body li{ color:var(--dark-mid); font-size:.99rem; position:relative; padding-left:1.4rem; list-style:none; }
.article-body li::before{ content:'—'; position:absolute; left:0; color:var(--gold); }
.article-cta{ margin-top:2.6rem; padding:2rem 2.1rem; background:var(--cream); border-left:2px solid var(--gold); }
.article-cta p{ color:var(--dark-mid); margin-bottom:1.15rem; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.blog-card{ background:var(--paper); padding:2rem 1.9rem; display:flex; flex-direction:column; transition:background .3s; }
.blog-card:hover{ background:#fdfbf6; }
.blog-card h2{ font-family:var(--font-serif); font-weight:400; font-size:1.35rem; margin-bottom:.6rem; line-height:1.28; color:var(--ink); }
.blog-card p{ color:var(--ink-soft); font-size:.92rem; flex:1; }
.blog-card .read{ margin-top:1.15rem; font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dark); }

:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:3px; border-radius:2px; }
::selection{ background:rgba(194,145,49,.22); color:var(--ink); }