/* =====================================================
   SERVICE PAGE LAYOUT (wl-*) — shared by the redesigned service pages
   First built for /weight-loss-solutions/ (2026-10).
   Editorial layout in the homepage language: warm cream,
   warm-ink bands, light serif display, hairline rules.
   Every class is wl-* so refresh.css rules don't collide.
   ===================================================== */
.wl {
  --wl-ink: #13110e;
  --wl-cream: #f8f6f1;
  --wl-tint: #f1ede4;
  --wl-text: #2c2c2c;
  --wl-muted: #5a5a5a;
  --wl-line: rgba(20, 18, 14, 0.12);
  --wl-accent: #4069a1;
  --wl-accent-ink: #345d93;
  --wl-accent-2: #9cc1ec;
  --wl-gold: #c9a96e;
  --wl-on-dark: #f6f1e7;
  --wl-on-dark-soft: #cdc6ba;
  --wl-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
.wl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wl-section { padding: 112px 0; background: var(--wl-cream); }
.wl :is(h1, h2, h3) em { font-style: italic; color: var(--wl-accent-ink); }
.wl p { max-width: 62ch; }

.wl-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wl-accent-ink) !important; margin: 0 0 18px;
}
.wl-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.wl-eyebrow--light { color: var(--wl-accent-2) !important; }
.wl .wl-eyebrow { font-size: 0.74rem !important; line-height: 1.4; max-width: none; }
.wl .wl-crumbs { justify-content: flex-start; padding: 0; max-width: none; background: none; position: static; }

.wl-head { max-width: 760px; margin: 0 0 64px; }
.wl-head h2 { margin: 0 0 20px; }
.wl-head p { font-size: 1.08rem; line-height: 1.75; }
.wl-num { font-family: var(--wl-display); font-size: 1.6rem; color: var(--wl-accent) !important; margin: 0 0 10px; line-height: 1; }
.wl-note { font-size: 0.9rem; font-style: italic; }
.wl-fine { font-size: 0.88rem; margin-top: 28px; }
.wl-fine--center { text-align: center; margin-left: auto; margin-right: auto; }

.wl-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 0.95rem; color: var(--wl-accent-ink);
  text-decoration: none; border-bottom: 1px solid rgba(52, 93, 147, 0.3); padding-bottom: 2px;
}
.wl-link::after { content: '\2192'; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.wl-link:hover::after { transform: translateX(4px); }
.wl-inline-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }

.wl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.wl .btn { border-radius: 999px; padding: 15px 30px; }
.wl-btn-ghost { background: transparent; color: var(--wl-on-dark); border: 1px solid rgba(255, 255, 255, 0.35); }
.wl-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* ---------- Hero ---------- */
.wl-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, #2a241c 0%, var(--wl-ink) 55%);
  color: var(--wl-on-dark);
  padding: 150px 0 110px;
}
.wl-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.wl-crumbs { display: flex; gap: 10px; font-size: 0.82rem; margin: 0 0 30px; color: var(--wl-on-dark-soft); }
.wl-crumbs a { color: var(--wl-on-dark-soft); text-decoration: none; }
.wl-crumbs a:hover { color: #fff; }
.wl-hero h1 {
  font-family: var(--wl-display); font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--wl-on-dark) !important; margin: 0 0 26px;
}
.wl-hero h1 em { color: var(--wl-accent-2); }
.wl-hero__lead { font-size: 1.12rem; line-height: 1.75; color: var(--wl-on-dark-soft) !important; }
.wl-proof {
  list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin: 44px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wl-proof li { font-size: 0.9rem; color: var(--wl-on-dark-soft) !important; }
.wl-proof strong { display: block; font-family: var(--wl-display); font-weight: 400; font-size: 1.3rem; color: var(--wl-on-dark); }
.wl-hero__media { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); aspect-ratio: 4 / 5; }
.wl-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; display: block; }

/* ---------- Intro / DEXA ---------- */
.wl-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-bottom: 64px; }
.wl-intro h2 { margin: 0; }
.wl-intro__body p { font-size: 1.05rem; line-height: 1.8; margin: 0 0 18px; }
.wl-intro .hl-explainer { margin: 0 auto; max-width: 980px; }

/* ---------- Differentiators ---------- */
.wl-diff { background: var(--wl-tint); }
.wl-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; border-top: 1px solid var(--wl-line); }
.wl-feature--flip .wl-feature__media { order: 2; }
.wl-feature__media { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; box-shadow: 0 30px 70px -40px rgba(20, 18, 14, 0.45); }
.wl-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-feature__text h3 { margin: 0 0 16px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.wl-feature__text p { line-height: 1.8; margin: 0 0 16px; }
.wl-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 56px 0 0; margin: 0; border-top: 1px solid var(--wl-line); }
.wl-pillars h3 { margin: 0 0 12px; font-size: 1.45rem; }
.wl-pillars p { line-height: 1.75; margin: 0; }

/* ---------- Comparison ---------- */
.wl-compare { background: var(--wl-ink); color: var(--wl-on-dark); }
.wl-compare h2 { color: var(--wl-on-dark) !important; }
.wl-compare .wl-head p, .wl-compare .wl-fine { color: var(--wl-on-dark-soft) !important; }
.wl-compare .wl-fine a { color: var(--wl-accent-2) !important; }
.wl-table-wrap { overflow-x: auto; }
.wl-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.98rem; }
.wl-table th, .wl-table td { padding: 18px 16px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--wl-on-dark-soft); font-weight: 400; }
.wl-table thead th { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wl-on-dark-soft); font-weight: 600; }
.wl-table thead th:nth-child(2), .wl-table tbody td:nth-child(2) { color: var(--wl-on-dark); background: rgba(156, 193, 236, 0.08); }
.wl-table tbody th { color: var(--wl-on-dark); }
.wl-table td.yes::before { content: '\2713\00a0'; color: var(--wl-accent-2); }
.wl-table td.no { opacity: 0.55; }

/* ---------- Medication ---------- */
.wl-meds__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.wl-med { background: #fff; border: 1px solid var(--wl-line); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; }
.wl-med__tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--wl-accent-ink) !important; margin: 0 0 14px; }
.wl-med h3 { margin: 0 0 14px; font-size: 1.9rem; }
.wl-med p { line-height: 1.75; }
.wl-med__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--wl-line); border-bottom: 1px solid var(--wl-line); }
.wl-med__facts dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wl-muted); margin-bottom: 4px; }
.wl-med__facts dd { margin: 0; font-family: var(--wl-display); font-size: 1.2rem; color: var(--wl-text); }
.wl-med__disc { font-size: 0.88rem; margin: 0 0 24px; }
.wl-med .wl-link { margin-top: auto; align-self: flex-start; }
.wl-disclosure { margin: 32px 0 0; padding: 32px 36px; border-left: 3px solid var(--wl-gold); background: rgba(201, 169, 110, 0.08); border-radius: 0 14px 14px 0; }
.wl-disclosure h3 { font-size: 1.3rem; margin: 0 0 12px; }
.wl-disclosure p { font-size: 0.93rem; line-height: 1.75; margin: 0 0 10px; max-width: none; }

/* ---------- Journey ---------- */
.wl-journey { background: var(--wl-tint); }
.wl-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin: 0; padding: 0; }
.wl-steps li { border-top: 1px solid var(--wl-text); padding-top: 26px; }
.wl-steps__n { display: block; font-family: var(--wl-display); font-size: 2.2rem; color: var(--wl-accent); line-height: 1; margin-bottom: 18px; }
.wl-steps h3 { font-family: var(--font-body) !important; font-size: 1.08rem !important; font-weight: 600 !important; margin: 0 0 10px; }
.wl-steps p { font-size: 0.95rem; line-height: 1.7; margin: 0; }

/* ---------- Pricing ---------- */
.wl-pricing__grid { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 72px; align-items: start; }
.wl-pricing h2 { margin: 0 0 16px; }
.wl-prices { margin: 0; display: grid; gap: 0; }
.wl-prices > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 26px 0; border-top: 1px solid var(--wl-line); }
.wl-prices > div:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-prices dt { font-family: var(--wl-display); font-size: 1.5rem; color: var(--wl-text); }
.wl-prices__amt { margin: 0; font-family: var(--wl-display); font-size: 1.7rem; color: var(--wl-accent-ink); text-align: right; white-space: nowrap; }
.wl-prices__amt span { font-size: 0.95rem; color: var(--wl-muted); }
.wl-prices__note { grid-column: 1 / -1; margin: 0; color: var(--wl-muted); font-size: 0.95rem; }
.wl-pricing__fine { grid-column: 2; margin-top: 0; }

/* ---------- Conditions ---------- */
.wl-conditions { background: var(--wl-tint); }
.wl-cond { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; margin: 0; padding: 0; }
.wl-cond a { display: block; padding: 22px 0; border-top: 1px solid var(--wl-line); text-decoration: none; transition: border-color 0.3s; }
.wl-cond a:hover { border-color: var(--wl-accent); }
.wl-cond span { display: block; font-family: var(--wl-display); font-size: 1.35rem; color: var(--wl-text); margin-bottom: 4px; }
.wl-cond a:hover span { color: var(--wl-accent-ink); }
.wl-cond small { font-size: 0.88rem; color: var(--wl-muted); line-height: 1.5; }

/* ---------- FAQ ---------- */
.wl-faq { padding: 112px 0; background: var(--wl-cream) !important; }
.wl-faq__grid { display: grid; grid-template-columns: 0.8fr 1.5fr; gap: 72px; align-items: start; }
.wl-faq h2 { margin: 0 0 16px; }
.wl-faq .faq-item.active .faq-answer { max-height: 900px; }

/* ---------- Visit block spacing ---------- */
.wl .local-visit { padding: 0 24px 112px; }
.wl-areas { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Final CTA ---------- */
.wl-cta { background: var(--wl-ink); color: var(--wl-on-dark); padding: 112px 0; }
.wl-cta__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; }
.wl-cta h2 { color: var(--wl-on-dark) !important; font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin: 0 0 20px; }
.wl-cta p { color: var(--wl-on-dark-soft) !important; font-size: 1.08rem; }
.wl-cta__media { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 520px; }
.wl-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-disclaimer { background: var(--wl-cream); padding: 40px 0; border-top: 1px solid var(--wl-line); }
.wl-disclaimer p { font-size: 0.82rem; line-height: 1.7; max-width: none; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .wl-hero__grid, .wl-intro__grid, .wl-feature, .wl-pricing__grid, .wl-faq__grid, .wl-cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .wl-feature--flip .wl-feature__media { order: 0; }
  .wl-hero__media { aspect-ratio: 3 / 2; }
  .wl-pillars { grid-template-columns: 1fr; gap: 36px; }
  .wl-steps { grid-template-columns: repeat(2, 1fr); }
  .wl-cond { grid-template-columns: repeat(2, 1fr); }
  .wl-pricing__fine { grid-column: 1; }
  .wl-cta__media { display: none; }
}
@media (max-width: 768px) {
  .wl-wrap { padding: 0 16px; }
  .wl-section, .wl-faq, .wl-cta { padding: 76px 0; }
  .wl-hero { padding: 116px 0 72px; }
  .wl-head { margin-bottom: 40px; }
  .wl-meds__grid, .wl-steps, .wl-cond { grid-template-columns: 1fr; }
  .wl-med { padding: 28px 22px; }
  .wl-feature { padding: 40px 0; gap: 28px; }
  .wl-disclosure { padding: 24px 20px; }
  .wl-actions .btn { width: 100%; }
  .wl .local-visit { padding: 0 16px 76px; }
  .wl-prices dt { font-size: 1.25rem; }
  .wl-prices__amt { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-link::after { transition: none; }
}