/* ═══════════════════════════════════════
   TREATMENT PAGES SHARED CSS
   Matches homepage design system exactly
═══════════════════════════════════════ */

:root {
  --forest: #1B4332;
  --forest-mid: #2D6A4F;
  --forest-lt: #40916C;
  --gold: #C9A84C;
  --gold-lt: #E8C97A;
  --obsidian: #0C1011;
  --ink: #1A1F1C;
  --ink-mid: #374140;
  --muted: #6B7280;
  --bone: #F8F6F1;
  --cream: #FDFAF4;
  --white: #FFFFFF;
  --border: #E8E4DC;
  --shadow-sm: 0 2px 12px rgba(27,67,50,.08);
  --shadow-md: 0 8px 40px rgba(27,67,50,.12);
  --shadow-lg: 0 20px 80px rgba(27,67,50,.16);
}


/* Golden Italics - Site-wide */
h1 em, h2 em, h3 em, h4 em,
.ph-h1 em, .sec-title em {
  color: var(--gold-lt);
  font-style: italic;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.85; font-weight: 400; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container-sm { max-width: 860px; margin: 0 auto; padding: 0 40px; }

/* Ensure all headings use Cormorant Garamond */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; border-radius: 50px; padding: 14px 28px; transition: all .3s; cursor: pointer; border: none; line-height: 1; white-space: nowrap; }
.btn-forest { background: var(--forest); color: #fff; }
.btn-forest:hover { background: var(--forest-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 1.5px solid var(--forest); color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: #fff; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1da851; transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* NAV */
.tp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: all .3s; }
.tp-nav.scrolled { box-shadow: var(--shadow-sm); }
.tp-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.tp-logo { display: flex; align-items: center; gap: 10px; }
.tp-logo img { height: 40px; width: auto; object-fit: contain; }
/* Legacy text logo classes kept for fallback */
.tp-logo-mark { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--forest); }
.tp-logo-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.tp-logo-sub { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.tp-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.tp-nav-links > li > a { display: block; padding: 8px 13px; font-size: 13.5px; color: var(--ink-mid); border-radius: 8px; transition: all .2s; white-space: nowrap; }
.tp-nav-links > li > a:hover, .tp-nav-links > li > a.active { color: var(--forest); background: rgba(27,67,50,.06); }
.tp-nav-cta > a { background: var(--forest) !important; color: #fff !important; border-radius: 50px !important; padding: 9px 20px !important; }
.tp-nav-cta > a:hover { background: var(--forest-mid) !important; }

/* Contact CTAs in Header */
.tp-nav-contact > a { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; color: var(--forest); border: 1.5px solid var(--border); border-radius: 50px; transition: all .25s; white-space: nowrap; }
.tp-nav-contact > a:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

.tp-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.tp-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .3s; display: block; }

/* WHATSAPP FLOAT */
.wa-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); z-index: 999; transition: all .3s; }
.wa-float:hover { transform: scale(1.1); }

/* MOBILE STICKY */
.sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--forest); padding: 12px 20px; z-index: 90; gap: 12px; }
@media(max-width:768px){ .sticky-bar { display: flex; } }
.sticky-bar a { flex: 1; text-align: center; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.sb-book { background: var(--gold); color: var(--ink); }
.sb-wa { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }

/* BREADCRUMB */
.breadcrumb { padding: 88px 0 0; background: var(--bone); }
.bc-inner { max-width: 1200px; margin: 0 auto; padding: 16px 40px 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bc-inner a { color: var(--muted); transition: color .2s; }
.bc-inner a:hover { color: var(--forest); }
.bc-sep { opacity: .5; }

/* PAGE HERO */
.page-hero { background: var(--bone); padding: 24px 0 64px; }
.ph-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.ph-condition-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(27,67,50,.1); color: var(--forest); border: 1px solid rgba(27,67,50,.2); border-radius: 50px; padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
.ph-h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 400; color: var(--ink); line-height: 1.12; margin-bottom: 16px; }
.ph-h1 em { font-style: italic; color: var(--forest); }
.ph-sub { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 600px; font-weight: 400; margin-bottom: 28px; }
.ph-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.ph-trust { display: flex; gap: 16px; flex-wrap: wrap; }
.ph-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ph-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); flex-shrink: 0; }
.ph-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 28px; min-width: 260px; box-shadow: var(--shadow-sm); }
.ph-card-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--forest); margin-bottom: 16px; }
.ph-card-stat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ph-card-stat:last-child { border-bottom: none; }
.pcs-icon { font-size: 20px; }
.pcs-val { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--forest); line-height: 1; }
.pcs-label { font-size: 11px; color: var(--muted); }

/* MAIN LAYOUT */
.tp-main { padding: 64px 0; }
.tp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }

/* CONTENT PROSE */
.tp-prose h2 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; color: var(--ink); margin: 36px 0 16px; line-height: 1.25; }
.tp-prose h2:first-child { margin-top: 0; }
.tp-prose h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--forest); margin: 28px 0 12px; }
.tp-prose p { font-size: 15px; color: var(--ink-mid); line-height: 1.8; margin-bottom: 16px; font-weight: 400; }
.tp-prose strong { font-weight: 600; color: var(--ink); }
.tp-prose ul, .tp-prose ol { margin: 12px 0 20px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tp-prose ul li, .tp-prose ol li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-mid); line-height: 1.65; }
.tp-prose ul li::before { content: '✦'; color: var(--forest); font-size: 9px; margin-top: 5px; flex-shrink: 0; }
.tp-prose ol { counter-reset: item; }
.tp-prose ol li { counter-increment: item; }
.tp-prose ol li::before { content: counter(item); background: var(--forest); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.tp-divider { height: 1px; background: var(--border); margin: 32px 0; }

/* SYMPTOM / CAUSE GRID */
.cause-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.cause-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--white); transition: all .3s; }
.cause-card:hover { border-color: var(--forest-lt); box-shadow: var(--shadow-sm); }
.cc-icon { font-size: 24px; margin-bottom: 8px; display: block; }
.cc-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.cc-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* TREATMENT STEPS */
.treatment-steps { display: flex; flex-direction: column; gap: 0; margin: 20px 0; }
.ts-item { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); }
.ts-item:last-child { border-bottom: none; }
.ts-num { width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.ts-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ts-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* RESULTS TIMELINE */
.timeline { display: flex; gap: 0; margin: 20px 0; overflow-x: auto; }
.tl-item { flex: 1; min-width: 120px; text-align: center; padding: 20px 12px; border: 1px solid var(--border); border-right: none; background: var(--white); transition: all .3s; }
.tl-item:first-child { border-radius: 12px 0 0 12px; }
.tl-item:last-child { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }
.tl-item:hover { background: var(--bone); }
.tl-month { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--forest); display: block; margin-bottom: 4px; }
.tl-label { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0; margin: 20px 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer; gap: 16px; }
.faq-q-text { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.faq-icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--forest); flex-shrink: 0; transition: all .3s; }
.faq-item.open .faq-icon { background: var(--forest); color: #fff; border-color: var(--forest); transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 18px; font-size: 14px; color: var(--muted); line-height: 1.75; }
.faq-item.open .faq-a { display: block; }

/* SIDEBAR */
.tp-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 88px; }
.sidebar-card { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--white); }
.sc-head { padding: 20px 22px 16px; background: var(--bone); border-bottom: 1px solid var(--border); }
.sc-head-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.sc-head-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sc-body { padding: 20px 22px; }
.sc-free-tag { display: inline-block; background: rgba(27,67,50,.1); color: var(--forest); border-radius: 50px; padding: 3px 12px; font-size: 11px; font-weight: 700; margin-bottom: 14px; }
.sc-form { display: flex; flex-direction: column; gap: 10px; }
.sc-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--ink); background: var(--white); transition: border-color .2s; outline: none; }
.sc-input:focus { border-color: var(--forest); }
.sc-input::placeholder { color: #aaa; }
.sc-submit { background: var(--forest); color: #fff; border: none; border-radius: 50px; padding: 13px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .3s; }
.sc-submit:hover { background: var(--forest-mid); }
.sc-wa { display: flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff; border-radius: 50px; padding: 12px; font-size: 14px; font-weight: 600; margin-top: 8px; transition: all .3s; }
.sc-wa:hover { background: #1da851; }
.sc-divider { text-align: center; font-size: 11px; color: var(--muted); margin: 2px 0; }

.sc-related { padding: 18px 22px; }
.sc-related-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--forest); margin-bottom: 12px; }
.sc-related-links { display: flex; flex-direction: column; gap: 6px; }
.sc-related-links a { font-size: 13px; color: var(--ink-mid); padding: 7px 10px; border-radius: 8px; transition: all .2s; display: flex; align-items: center; gap: 8px; }
.sc-related-links a:hover { background: var(--bone); color: var(--forest); padding-left: 14px; }
.sc-related-links a::before { content: '→'; color: var(--forest); font-size: 11px; }

.sc-guarantee { background: var(--forest); border-radius: 14px; padding: 18px; color: #fff; }
.sc-g-icon { font-size: 24px; margin-bottom: 8px; display: block; }
.sc-g-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.sc-g-text { font-size: 12px; opacity: .8; line-height: 1.6; }

/* BOTTOM CTA SECTION */
.tp-cta { padding: 64px 0; background: linear-gradient(135deg, var(--obsidian) 0%, #1A2820 100%); }
.tp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.tp-cta h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 40px); font-weight: 400; color: #fff; margin-bottom: 10px; }
.tp-cta h2 em { font-style: italic; color: var(--gold-lt); }
.tp-cta p { font-size: 14px; color: rgba(255,255,255,.6); max-width: 440px; line-height: 1.7; }
.tp-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* FOOTER MINI */
.tp-footer { background: var(--obsidian); padding: 32px 0; border-top: 1px solid rgba(255,255,255,.07); }
.tp-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.4); }
.tp-footer-inner a { color: rgba(255,255,255,.5); transition: color .2s; }
.tp-footer-inner a:hover { color: #fff; }

/* HIGHLIGHT BOX */
.highlight-box { background: rgba(27,67,50,.06); border: 1px solid rgba(27,67,50,.15); border-left: 4px solid var(--forest); border-radius: 12px; padding: 20px 22px; margin: 20px 0; }
.highlight-box p { margin: 0; font-size: 14px; color: var(--ink-mid); line-height: 1.7; }
.highlight-box strong { color: var(--forest); }

/* EYEBROW in prose */
.prose-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.prose-eyebrow::after { content: ''; width: 24px; height: 1.5px; background: var(--gold); }

/* RESPONSIVE */
@media(max-width: 1024px) {
  .tp-layout { grid-template-columns: 1fr; }
  .tp-sidebar { position: static; }
  .ph-inner { grid-template-columns: 1fr; }
  .ph-card { display: none; }
}
@media(max-width: 768px) {
  .container, .container-sm { padding: 0 20px; }
  .bc-inner { padding: 16px 20px 0; }
  .tp-nav-links { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: #fff; flex-direction: column; padding: 20px; overflow-y: auto; gap: 4px; }
  .tp-nav-links.open { display: flex; }
  .tp-toggle { display: flex; }
  
  /* Contact CTAs mobile */
  .tp-nav-contact { display: block; width: 100%; }
  .tp-nav-contact > a { justify-content: center; width: 100%; }
  
  .cause-grid { grid-template-columns: 1fr; }
  .timeline { flex-direction: column; }
  .tl-item { border: 1px solid var(--border); border-radius: 12px; text-align: left; display: flex; align-items: center; gap: 14px; }
  .tl-item:first-child, .tl-item:last-child { border-radius: 12px; }
  .tp-cta-inner { flex-direction: column; text-align: center; }
  .ph-actions { flex-direction: column; }
  .ph-actions .btn { justify-content: center; }
  .tp-footer-inner { flex-direction: column; text-align: center; }
}

/* FADE IN */
.fi { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fi.visible { opacity: 1; transform: none; }
.fi2 { transition-delay: .1s; }
.fi3 { transition-delay: .2s; }
</style>