/* ============================================================
   Shared additions layered on top of the existing site styles.
   Paste this block into the <style> of every page (already done
   in the files in this package) — kept here as a single source
   of truth for future edits.
   ============================================================ */

/* ---------- mobile nav ---------- */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:var(--surface);
  cursor:pointer;
  flex:none;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  position:relative;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

@media (max-width:880px){
  .nav-toggle{ display:inline-flex; }
  nav.links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:8px 20px 16px;
  }
  nav.links.open{ display:flex; }
  nav.links a{ padding-block:12px; border-bottom:1px solid var(--line); border-radius:0; }
  nav.links a.btn{ margin-top:10px; text-align:center; border-bottom:none; }
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- breadcrumb / page intro (subpages) ---------- */
.page-hero{ padding-block:48px 8px; }
.page-hero .eyebrow{ color:var(--warm); }
.page-hero h1{ font-size:clamp(2rem, 4.6vw, 2.9rem); margin-top:10px; line-height:1.08; }
.page-hero .lede{ margin-top:16px; max-width:62ch; color:var(--ink-soft); font-size:1.05rem; line-height:1.65; }
.crumb{ font-size:0.86rem; color:var(--ink-faint); }
.crumb a{ text-decoration:none; color:var(--ink-faint); }
.crumb a:hover{ color:var(--accent); }

/* ---------- accordion (conditions / FAQ) ---------- */
.accordion{ display:flex; flex-direction:column; }
.acc-item{ border-top:1px solid var(--line); }
.accordion .acc-item:last-child{ border-bottom:1px solid var(--line); }
.acc-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer;
  padding-block:20px;
  text-align:left;
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:500;
  font-size:1.08rem;
  color:var(--accent-strong);
}
.acc-trigger .tag-mini{
  font-family:'Public Sans', sans-serif; font-style:normal; font-weight:700;
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:4px;
}
.acc-plus{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-strong);
  position:relative;
  transition:transform 0.25s ease, background 0.2s ease;
}
.acc-plus::before, .acc-plus::after{
  content:''; position:absolute; background:var(--accent-strong);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.acc-plus::before{ width:10px; height:1.6px; }
.acc-plus::after{ width:1.6px; height:10px; transition:opacity 0.2s ease; }
.acc-item.open .acc-plus{ background:var(--accent-tint); transform:rotate(180deg); }
.acc-item.open .acc-plus::after{ opacity:0; }
.acc-panel{
  max-height:0; overflow:hidden;
  transition:max-height 0.35s ease;
}
.acc-panel-inner{ padding-bottom:22px; max-width:70ch; color:var(--ink-soft); font-size:0.98rem; line-height:1.7; }
.acc-panel-inner p{ margin:0 0 14px; }
.acc-panel-inner p:last-child{ margin-bottom:0; }
.acc-panel-inner ul{ margin:0 0 14px; padding-left:20px; }
.acc-panel-inner li{ margin-bottom:6px; }

/* ---------- before / after slider ---------- */
.ba-case{ margin-bottom:56px; }
.ba-case:last-child{ margin-bottom:0; }
.ba-case h3{
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--accent-strong); margin-bottom:6px;
}
.ba-case .ba-note{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:16px; max-width:60ch; }
.ba-slider{
  position:relative;
  max-width:480px;
  aspect-ratio:4/3.2;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  user-select:none;
  touch-action:pan-y;
}
.ba-slider img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none;
}
.ba-slider .ba-after-wrap{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 0 0 50%);
}
.ba-slider .ba-label{
  position:absolute; top:10px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(16,27,48,0.72); color:#F2F6FC;
  padding:4px 10px; border-radius:999px;
  pointer-events:none;
}
.ba-slider .ba-label.before{ left:10px; }
.ba-slider .ba-label.after{ right:10px; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:0;
  transform:translateX(-50%);
  cursor:ew-resize;
}
.ba-handle::before{
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:2px; background:#F2F6FC; box-shadow:0 0 0 1px rgba(16,27,48,0.25);
}
.ba-handle .ba-grip{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background:#F2F6FC; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:var(--accent-strong);
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.ba-hint{ margin-top:10px; font-size:0.8rem; color:var(--ink-faint); }

/* ---------- appointment steps / FAQ page bits ---------- */
.steps{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.step{ background:var(--surface); padding:22px 24px; display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start; }
.step .num{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent-strong);
  font-family:'Fraunces', Georgia, serif; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ font-family:'Public Sans', sans-serif; font-weight:700; font-size:1rem; margin-bottom:6px; }
.step p{ margin:0; color:var(--ink-soft); font-size:0.95rem; line-height:1.55; }

/* ---------- pull quote ---------- */
.pull{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.4;
  color:var(--accent-strong);
  border-left:3px solid var(--accent);
  padding-left:24px;
  margin:36px 0;
  max-width:56ch;
}

/* link from a Before & After case back to its condition */
.ba-related{ margin-top:6px; font-size:0.86rem; color:var(--ink-soft); }
.ba-related a{ color:var(--accent-strong); font-weight:600; }