@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Treatment guide system — warm editorial medicine, clear wayfinding, calm authority */
.treatment-page-shell {
    --tp-ink: #18343d;
    --tp-ink-deep: #102f37;
    --tp-body: #4e626b;
    --tp-muted: #687d84;
    --tp-paper: #ffffff;
    --tp-card: #ffffff;
    --tp-line: #dce9eb;
    --tp-sage: #eaf5f5;
    --tp-coral: #ad4b37;
    --tp-accent: #148b94;
    color: var(--tp-body);
    background: var(--tp-paper);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.72;
}
.treatment-page-shell * { box-sizing: border-box; }
.treatment-page-shell .container { width: min(1240px, calc(100% - 56px)); max-width: none; padding: 0; }
.treatment-page-shell a { color: var(--tp-ink); }
.treatment-page-shell a:focus-visible,
.treatment-page-shell summary:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 4px; }
.treatment-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 96px) 0 64px;
    background:
        radial-gradient(ellipse at 12% 92%, rgba(20,139,148,.10), transparent 38%),
        linear-gradient(120deg, #ffffff 0%, #f5fbfc 55%, #eaf5f5 100%);
    color: var(--tp-body);
}
body:not(.admin-body) .treatment-page-shell .service-hero.treatment-hero {
    background-image:
        radial-gradient(ellipse at 12% 92%, rgba(20,139,148,.10), transparent 38%),
        linear-gradient(120deg, #ffffff 0%, #f5fbfc 55%, #eaf5f5 100%);
}
.treatment-hero::before {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    right: -210px;
    top: -230px;
    border: 1px solid rgba(20,139,148,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(20,139,148,.025), 0 0 0 84px rgba(20,139,148,.02);
    pointer-events: none;
}
.treatment-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
    gap: clamp(42px, 7vw, 96px);
    align-items: center;
}
.treatment-hero-copy { max-width: 650px; text-align: left; }
.treatment-hero .treatment-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 34px;
    font-size: 12px;
    color: var(--tp-muted);
}
.treatment-hero .treatment-breadcrumb a { color: var(--tp-ink); text-decoration: none; }
.treatment-hero .treatment-breadcrumb a:hover { text-decoration: underline; }
.treatment-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #39777d;
    font: 700 11px/1.3 'DM Sans', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.treatment-hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--tp-accent); }
.treatment-hero h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--tp-ink-deep);
    font: 600 clamp(42px, 5.4vw, 68px)/1.06 'Playfair Display', Georgia, serif;
    letter-spacing: -.035em;
}
.treatment-hero-copy > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0;
    color: #4b625e;
    font: 400 clamp(16px, 1.35vw, 18px)/1.75 'DM Sans', sans-serif;
}
.treatment-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.treatment-page-shell .treatment-hero .btn {
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 3px;
    font: 700 13px/1.2 'DM Sans', sans-serif;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.treatment-page-shell .treatment-hero .btn-primary { background: #148b94; color: #ffffff; }
.treatment-page-shell .treatment-hero .btn-primary:hover { background: #08717a; transform: translateY(-2px); }
.treatment-page-shell .treatment-hero .btn-outline {
    border: 1px solid rgba(23,59,58,.25);
    color: var(--tp-ink);
    background: rgba(255,254,250,.55);
    backdrop-filter: none;
}
.treatment-page-shell .treatment-hero .btn-outline:hover { border-color: var(--tp-accent); background: #ffffff; }
.treatment-page-shell .treatment-lead-image {
    position: relative;
    align-self: stretch;
    min-height: 360px;
    max-height: 480px;
    aspect-ratio: 4 / 3;
    margin: 24px 0 0;
    overflow: hidden;
    background: #e5f1f1;
    box-shadow: 18px 18px 0 rgba(20,139,148,.10);
}
.treatment-lead-image img { width: 100%; height: 100%; min-height: 360px; max-height: 480px; object-fit: cover; object-position: center 28%; display: block; }
.treatment-lead-image.treatment-doctor-photo img { object-position: center 10%; }
.treatment-lead-image figcaption,
.treatment-aside-visual figcaption {
    padding: 10px 13px;
    background: rgba(255,254,250,.92);
    color: #62726f;
    font-size: 11px;
    line-height: 1.5;
}
.treatment-lead-image figcaption { position: absolute; bottom: 0; left: 0; right: 0; }
.treatment-hero-urgent {
    background:
        radial-gradient(ellipse at 12% 92%, rgba(173,75,55,.12), transparent 38%),
        linear-gradient(120deg, #f5eee8 0%, #ece8df 55%, #e9e8df 100%);
}
body:not(.admin-body) .treatment-page-shell .service-hero.treatment-hero-urgent {
    background-image:
        radial-gradient(ellipse at 12% 92%, rgba(173,75,55,.10), transparent 38%),
        linear-gradient(120deg, #fffaf7 0%, #f8f1ee 55%, #f4eeee 100%);
}
.treatment-urgent-callout {
    display: grid;
    gap: 5px;
    margin-top: 24px;
    padding: 17px 19px;
    border-left: 4px solid var(--tp-coral);
    background: #fff9f4;
    color: #744035;
    font-size: 14px;
    line-height: 1.55;
}
.treatment-urgent-callout strong { font-size: 15px; color: #813c30; }
.treatment-guide {
    padding: 70px 0 100px;
    background:
        linear-gradient(90deg, rgba(20,139,148,.035) 1px, transparent 1px),
        var(--tp-paper);
    background-size: 84px 84px;
}
.treatment-guide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(36px, 6vw, 84px);
    align-items: start;
}
.treatment-copy { min-width: 0; max-width: 790px; }
.treatment-intro {
    margin: 0 0 34px;
    padding: 0 0 30px;
    border-bottom: 1px solid var(--tp-line);
    color: var(--tp-ink);
    font: 500 clamp(18px, 2vw, 22px)/1.62 'DM Sans', sans-serif;
}
.treatment-toc {
    margin: 0 0 54px;
    padding: 23px 26px 24px;
    background: var(--tp-sage);
    border: 1px solid #d4e7e8;
    border-top: 3px solid var(--tp-accent);
}
.treatment-toc > strong {
    display: block;
    margin-bottom: 13px;
    color: var(--tp-ink);
    font: 700 12px/1.3 'DM Sans', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.treatment-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; margin: 0; padding: 0; list-style: none; }
.treatment-toc li { position: relative; padding-left: 14px; }
.treatment-toc li::before { content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--tp-accent); }
.treatment-toc a { color: #38656b; font-size: 13px; line-height: 1.5; text-decoration: none; }
.treatment-toc a:hover { color: var(--tp-ink); text-decoration: underline; }
.treatment-section {
    position: relative;
    margin: 0 0 44px;
    padding: 0 0 38px;
    border-bottom: 1px solid var(--tp-line);
    scroll-margin-top: 110px;
}
.treatment-section h2 {
    margin: 0 0 15px;
    color: var(--tp-ink);
    font: 600 clamp(25px, 3vw, 34px)/1.2 'Playfair Display', Georgia, serif;
    letter-spacing: -.025em;
}
.treatment-section p {
    max-width: 740px;
    margin: 0 0 14px;
    color: var(--tp-body);
    font: 400 16px/1.82 'DM Sans', sans-serif;
}
.treatment-section p:last-child { margin-bottom: 0; }
.treatment-section a { color: #087a83; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.treatment-section a:hover { color: #096f78; }
.treatment-faq {
    margin: 0;
    border-top: 1px solid var(--tp-line);
    color: var(--tp-body);
}
.treatment-faq:last-child { border-bottom: 1px solid var(--tp-line); }
.treatment-faq summary {
    position: relative;
    padding: 17px 34px 17px 0;
    color: var(--tp-ink);
    cursor: pointer;
    list-style: none;
    font: 600 15px/1.5 'DM Sans', sans-serif;
}
.treatment-faq summary::-webkit-details-marker { display: none; }
.treatment-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--tp-accent); font-size: 23px; font-weight: 400; }
.treatment-faq[open] summary::after { content: "−"; }
.treatment-faq p { padding: 0 22px 17px 0; margin: 0; color: var(--tp-body); font-size: 15px; }
.treatment-page-shell .clinic-visit {
    margin-top: 60px;
    padding: 30px;
    background: #eaf5f5;
    border: 0;
}
.clinic-visit .medical-note { margin: 18px 0; padding: 14px 16px; background: #ffffff; border-left: 3px solid var(--tp-accent); font-size: 14px; }
.clinic-map-frame { overflow: hidden; margin-top: 20px; border: 1px solid #d3e3e5; background: #eaf5f5; }
.clinic-map-frame iframe { display: block; min-height: 280px; }
.treatment-aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.treatment-aside-visual {
    margin: 0;
    overflow: hidden;
    background: #eaf5f5;
    border: 1px solid #d7e7e8;
}
.treatment-aside-visual img { display: block; width: 100%; aspect-ratio: 1 / .84; object-fit: cover; }
.treatment-aside-card {
    padding: 23px;
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    box-shadow: 0 12px 32px rgba(23,59,58,.055);
}
.treatment-aside-card .treatment-aside-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 0 22px; border: 1px solid rgba(20, 139, 148, .2); border-radius: 20px; background: linear-gradient(145deg, #e7f5f2, #f7fbf8); color: #148b94; }
.treatment-aside-card .treatment-aside-mark svg { display: block; width: 36px; height: 36px; }
.treatment-aside-card h2 { margin: 0 0 10px; color: var(--tp-ink); font: 600 25px/1.15 'Playfair Display', Georgia, serif; }
.treatment-aside-card p { margin: 0 0 16px; color: var(--tp-body); font-size: 14px; line-height: 1.65; }
.treatment-aside-card .btn { display: flex; justify-content: center; margin: 16px 0 13px; padding: 12px; border-radius: 2px; background: #148b94; color: #ffffff; text-decoration: none; font-size: 13px; }
.treatment-aside-card .treatment-phone { display: block; padding: 9px 0; color: #087a83; font-weight: 600; font-size: 13px; text-decoration: none; border-top: 1px solid var(--tp-line); }
.treatment-aside-card ul { margin: 0; padding: 0; list-style: none; }
.treatment-aside-card li { border-top: 1px solid var(--tp-line); }
.treatment-aside-card li a { display: block; padding: 11px 0; color: #087a83; font-size: 13px; text-decoration: none; }
.treatment-aside-card li a::after { content: "↗"; float: right; color: var(--tp-accent); }
.treatment-aside-card li a:hover { color: #075f67; }

@media (max-width: 900px) {
    .treatment-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 34px; }
    .treatment-guide-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 30px; }
    .treatment-aside { top: 20px; }
}
@media (max-width: 700px) {
    .treatment-page-shell .container { width: min(100% - 36px, 560px); }
    .treatment-hero { padding: 34px 0 42px; }
    .treatment-hero-grid { grid-template-columns: 1fr; gap: 26px; }
    .treatment-hero .treatment-breadcrumb { margin-bottom: 26px; }
    .treatment-hero h1 { font-size: clamp(38px, 11vw, 52px); }
    .treatment-hero .treatment-lead-image { min-height: 240px; margin-right: 8px; }
    .treatment-lead-image img { min-height: 240px; max-height: 320px; }
    .treatment-hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .treatment-page-shell .treatment-hero .btn { width: 100%; }
    .treatment-guide { padding: 40px 0 64px; }
    .treatment-guide-grid { grid-template-columns: 1fr; gap: 30px; }
    .treatment-toc { margin-bottom: 40px; padding: 20px; }
    .treatment-toc ul { grid-template-columns: 1fr; gap: 9px; }
    .treatment-section { margin-bottom: 34px; padding-bottom: 30px; scroll-margin-top: 82px; }
    .treatment-section p { font-size: 15.5px; }
    .treatment-aside { position: static; grid-template-columns: 1fr; }
    .treatment-aside-visual img { aspect-ratio: 1.55; }
    .treatment-page-shell .clinic-visit { padding: 22px; }
    .clinic-map-frame iframe { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
    .treatment-page-shell *, .treatment-page-shell *::before, .treatment-page-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}