﻿[data-theme="dark"]{--bg:#120804;--surface:#1B0E07;--surface-soft:#26140B;--hero-bg:#120804;--border:#3D281B;--accent:#E6CFA6;--accent-hover:#F3E2C2;--on-accent:#120804;--heading:#F8EEDF;--text:#E8D9C4;--muted:#C9B598;color-scheme:dark}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .site-footer{background:#0D0602}
[data-theme="dark"] .dd{box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
[data-theme="dark"] .field input{background:var(--bg)}
[data-theme="dark"] .cs{background:var(--bg)}
[data-theme="dark"] .h1scan{background:var(--bg)}
[data-theme="dark"] .private-dashboard{background:var(--bg)}
[data-theme="dark"] .svc{--svc-stage:#26140B;--svc-card:#F8EEDF;--svc-ink:#120804;--svc-on:#F8EEDF;--svc-on-soft:#E8D9C4}
[data-theme="dark"] .private-tile.is-visible:hover{box-shadow:0 20px 40px -16px rgba(230,207,166,.1)}
/* =========================================================
   SKIN THEORY
   ABOUT BANNER â€” DARK MODE
========================================================= */


/* =========================================================
   DARK MODE VARIABLES
========================================================= */

html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"] {

  --about-cream: #fffaf3;

  --about-soft-cream: #f1e7da;

  --about-gold: #ead3ad;

  --about-dark: #21170f;

  --about-white-line:
    rgba(255, 250, 243, 0.42);

}


/* =========================================================
   DARK MODE BANNER
========================================================= */

html.dark .about-banner,
body.dark .about-banner,
html[data-theme="dark"] .about-banner,
body[data-theme="dark"] .about-banner {

  color:
    var(--about-cream);

}


/* =========================================================
   DARK MODE OVERLAY
========================================================= */

html.dark .about-banner__overlay,
body.dark .about-banner__overlay,
html[data-theme="dark"] .about-banner__overlay,
body[data-theme="dark"] .about-banner__overlay {

  background:
    rgba(0, 0, 0, 0.72);

}


/* =========================================================
   DARK MODE CENTER GRADIENT
========================================================= */

html.dark
.about-banner__overlay::after,
body.dark
.about-banner__overlay::after,
html[data-theme="dark"]
.about-banner__overlay::after,
body[data-theme="dark"]
.about-banner__overlay::after {

  background:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.40) 100%
    );

}


/* =========================================================
   DARK MODE TEXT
========================================================= */

html.dark .about-banner__title,
body.dark .about-banner__title,
html[data-theme="dark"] .about-banner__title,
body[data-theme="dark"] .about-banner__title {

  color:
    #fffaf3;

}


html.dark .about-banner__description,
body.dark .about-banner__description,
html[data-theme="dark"] .about-banner__description,
body[data-theme="dark"] .about-banner__description {

  color:
    #f1e7da;

}


html.dark .about-banner__feature-title,
body.dark .about-banner__feature-title,
html[data-theme="dark"] .about-banner__feature-title,
body[data-theme="dark"] .about-banner__feature-title {

  color:
    #fffaf3;

}


/* =========================================================
   DARK MODE GOLD
========================================================= */

html.dark .about-banner__eyebrow,
body.dark .about-banner__eyebrow,
html[data-theme="dark"] .about-banner__eyebrow,
body[data-theme="dark"] .about-banner__eyebrow,

html.dark .about-banner__icon,
body.dark .about-banner__icon,
html[data-theme="dark"] .about-banner__icon,
body[data-theme="dark"] .about-banner__icon {

  color:
    #ead3ad;

}


/* =========================================================
   DARK MODE BUTTON
========================================================= */

html.dark .about-banner__button,
body.dark .about-banner__button,
html[data-theme="dark"] .about-banner__button,
body[data-theme="dark"] .about-banner__button {

  background:
    #ead3ad;

  border-color:
    #ead3ad;

  color:
    #21170f;

}


/* =========================================================
   DARK MODE MOBILE
========================================================= */

@media (max-width: 650px) {

  html.dark .about-banner__overlay,
  body.dark .about-banner__overlay,
  html[data-theme="dark"] .about-banner__overlay,
  body[data-theme="dark"] .about-banner__overlay {

    background:
      rgba(0, 0, 0, 0.76);

  }

}
/* =========================================================
   SKIN THEORY
   DARK MODE
========================================================= */


/* =========================================================
   DARK THEME VARIABLES
========================================================= */

html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"] {

    --skin-bg:
        #120905;

    --skin-surface:
        #180d08;

    --skin-dark:
        #fffaf3;

    --skin-muted:
        #ddcdbb;

    --skin-gold:
        #ead3ad;

    --skin-gold-dark:
        #ead3ad;

    --skin-line:
        rgba(
            234,
            211,
            173,
            0.34
        );

    --skin-soft-line:
        rgba(
            234,
            211,
            173,
            0.18
        );

}


/* =========================================================
   DARK BODY
========================================================= */

html.dark body,
body.dark,
html[data-theme="dark"] body,
body[data-theme="dark"] {

    background:
        var(--skin-bg);

    color:
        var(--skin-dark);

}


/* =========================================================
   DARK SECTION
========================================================= */

html.dark .about-story,
body.dark .about-story,
html[data-theme="dark"] .about-story,
body[data-theme="dark"] .about-story {

    background:
        var(--skin-bg);

}


/* =========================================================
   DARK TEXT
========================================================= */

html.dark .about-story__title,
body.dark .about-story__title,
html[data-theme="dark"] .about-story__title,
body[data-theme="dark"] .about-story__title,

html.dark .story-stat strong,
body.dark .story-stat strong,
html[data-theme="dark"] .story-stat strong,
body[data-theme="dark"] .story-stat strong,

html.dark .story-visual__copy strong,
body.dark .story-visual__copy strong,
html[data-theme="dark"] .story-visual__copy strong,
body[data-theme="dark"] .story-visual__copy strong,

html.dark .story-visual__bottom-content strong,
body.dark .story-visual__bottom-content strong,
html[data-theme="dark"] .story-visual__bottom-content strong,
body[data-theme="dark"] .story-visual__bottom-content strong {

    color:
        #fffaf3;

}


/* =========================================================
   DARK MUTED TEXT
========================================================= */

html.dark .about-story__intro,
body.dark .about-story__intro,
html[data-theme="dark"] .about-story__intro,
body[data-theme="dark"] .about-story__intro,

html.dark .about-story__details-text,
body.dark .about-story__details-text,
html[data-theme="dark"] .about-story__details-text,
body[data-theme="dark"] .about-story__details-text,

html.dark .story-visual__copy small,
body.dark .story-visual__copy small,
html[data-theme="dark"] .story-visual__copy small,
body[data-theme="dark"] .story-visual__copy small,

html.dark .story-stat span,
body.dark .story-stat span,
html[data-theme="dark"] .story-stat span,
body[data-theme="dark"] .story-stat span {

    color:
        #ddcdbb;

}


/* =========================================================
   DARK GOLD
========================================================= */

html.dark .about-story__eyebrow,
body.dark .about-story__eyebrow,
html[data-theme="dark"] .about-story__eyebrow,
body[data-theme="dark"] .about-story__eyebrow,

html.dark .visual-label,
body.dark .visual-label,
html[data-theme="dark"] .visual-label,
body[data-theme="dark"] .visual-label {

    color:
        #ead3ad;

}


/* =========================================================
   DARK VISUAL
========================================================= */

html.dark .story-visual,
body.dark .story-visual,
html[data-theme="dark"] .story-visual,
body[data-theme="dark"] .story-visual {

    background:
        #180d08;

    border-color:
        var(--skin-line);

}


/* =========================================================
   DARK PORTRAIT
========================================================= */

html.dark .story-visual__portrait,
body.dark .story-visual__portrait,
html[data-theme="dark"] .story-visual__portrait,
body[data-theme="dark"] .story-visual__portrait {

    background:
        #0d0603;

}


/* =========================================================
   DARK GOLD LINES
========================================================= */

html.dark .portrait-line,
body.dark .portrait-line,
html[data-theme="dark"] .portrait-line,
body[data-theme="dark"] .portrait-line {

    border-color:
        #ead3ad;

}


/* =========================================================
   DARK PROGRESS
========================================================= */

html.dark .story-progress__fill,
body.dark .story-progress__fill,
html[data-theme="dark"] .story-progress__fill,
body[data-theme="dark"] .story-progress__fill {

    background:
        #ead3ad;

}


/* =========================================================
   DARK LINK
========================================================= */

html.dark .about-story__link,
body.dark .about-story__link,
html[data-theme="dark"] .about-story__link,
body[data-theme="dark"] .about-story__link {

    color:
        #fffaf3;

    border-bottom-color:
        #ead3ad;

}

/* ===== home-2 / section 5: trust bento dark mode ===== */
html[data-theme="dark"] .trust-bento,
html.dark .trust-bento,
body.dark .trust-bento,
body[data-theme="dark"] .trust-bento{
  background:var(--bg);
}


/* =========================================================
   TREATMENTS â€” SECTION 4 / DARK MODE
========================================================= */
html[data-theme="dark"] .treatment-stories,
body[data-theme="dark"] .treatment-stories,
html.dark .treatment-stories,
body.dark .treatment-stories{
  background:var(--bg);
  color:var(--heading);
}
html[data-theme="dark"] .treatment-stories__header h2,
body[data-theme="dark"] .treatment-stories__header h2,
html.dark .treatment-stories__header h2,
body.dark .treatment-stories__header h2,
html[data-theme="dark"] .treatment-story__quote-content h3,
body[data-theme="dark"] .treatment-story__quote-content h3,
html.dark .treatment-story__quote-content h3,
body.dark .treatment-story__quote-content h3{
  color:#fffaf3;
}
html[data-theme="dark"] .treatment-stories__intro,
body[data-theme="dark"] .treatment-stories__intro,
html.dark .treatment-stories__intro,
body.dark .treatment-stories__intro,
html[data-theme="dark"] .treatment-story__quote,
body[data-theme="dark"] .treatment-story__quote,
html.dark .treatment-story__quote,
body.dark .treatment-story__quote{
  color:#eadfD1;
}
html[data-theme="dark"] .treatment-story--quote,
body[data-theme="dark"] .treatment-story--quote,
html.dark .treatment-story--quote,
body.dark .treatment-story--quote{
  background:#1b0e07;
  border-color:#3d281b;
}
html[data-theme="dark"] .treatment-story__footer,
body[data-theme="dark"] .treatment-story__footer,
html.dark .treatment-story__footer,
body.dark .treatment-story__footer{
  border-top-color:#3d281b;
}
html[data-theme="dark"] .treatment-story__footer strong,
body[data-theme="dark"] .treatment-story__footer strong,
html.dark .treatment-story__footer strong,
body.dark .treatment-story__footer strong{
  color:#fffaf3;
}
html[data-theme="dark"] .treatment-story__footer div span,
body[data-theme="dark"] .treatment-story__footer div span,
html.dark .treatment-story__footer div span,
body.dark .treatment-story__footer div span{
  color:#c9b598;
}

/* doctors / section 2 â€” specialist spotlight */
[data-theme="dark"] .dsp__panel{box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
[data-theme="light"] .dsp__panel{box-shadow:0 24px 48px -32px rgba(26,12,6,.25)}

/* doctors / section 3 â€” availability planner */
[data-theme="dark"] .dap__board{box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
[data-theme="light"] .dap__board{box-shadow:0 24px 48px -32px rgba(26,12,6,.25)}

/* doctors / section 4 â€” care at every depth */
[data-theme="dark"] .dpt__bands{box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
[data-theme="light"] .dpt__bands{box-shadow:0 24px 48px -32px rgba(26,12,6,.25)}

/* ==========================================================
   ABOUT US â€” SECTION 3: WHY CHOOSE US â€” DARK MODE
========================================================== */

[data-theme="dark"] .about-why {
  background: var(--bg);
}

[data-theme="dark"] .about-why__eyebrow {
  color: var(--accent);           /* #E6CFA6 warm gold in dark */
}

[data-theme="dark"] .about-why__title {
  color: var(--heading);          /* #F8EEDF in dark */
}

[data-theme="dark"] .about-why__lead {
  color: var(--text);             /* #E8D9C4 in dark */
}

[data-theme="dark"] .about-why__checks li {
  color: var(--text);
}

[data-theme="dark"] .about-why__check-icon {
  color: var(--accent);
}

[data-theme="dark"] .about-why__img-secondary {
  border-color: var(--surface);   /* #1B0E07 dark surface */
}

[data-theme="dark"] .about-why__card {
  background: var(--surface);     /* #1B0E07 */
  border-color: var(--border);    /* #3D281B */
  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.45);
}

[data-theme="dark"] .about-why__avatar {
  border-color: var(--border);
  background: var(--surface-soft);
}

[data-theme="dark"] .about-why__card-info strong {
  color: var(--heading);          /* #F8EEDF */
}

[data-theme="dark"] .about-why__card-info > span {
  color: var(--muted);            /* #C9B598 */
}

[data-theme="dark"] .about-why__tag {
  color: var(--accent);           /* #E6CFA6 */
  background: var(--surface-soft);/* #26140B */
}

[data-theme="dark"] .about-why__card--stat {
  border-left-color: var(--accent);
}

[data-theme="dark"] .about-why__stat-num {
  color: var(--accent);
}

[data-theme="dark"] .about-why__stat-label {
  color: var(--muted);
}

[data-theme="dark"] .about-why__img-main {
  box-shadow: 0 20px 60px -16px rgba(0,0,0,0.5);
}

/* =========================================================
   DOCTORS / SECTION 5 â€” INSIDE SKIN THEORY / DARK MODE
========================================================= */
[data-theme="dark"] .ist__photo-frame{box-shadow:0 26px 64px -36px rgba(0,0,0,.75)}
[data-theme="dark"] .ist__inset{border-color:var(--bg);box-shadow:0 20px 44px -22px rgba(0,0,0,.8)}
[data-theme="dark"] .ist__scroll span{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .ist__progress{background:var(--surface-soft);border-color:var(--border)}
[data-theme="dark"] .ist__photo-frame{background:var(--surface-soft)}


/* Home 2 section 2: match the section 1 dark background */
[data-theme='dark'] .tj { background:var(--bg); }



/* Home 2 section 4: match section 1 dark background */
[data-theme='dark'] .di { background:var(--bg); }


/* home-2 / section 1 — split banner */
[data-theme="dark"] .hbn__right,[data-theme="dark"] .hbn__card{box-shadow:0 24px 48px -28px rgba(0,0,0,.75)}
[data-theme="light"] .hbn__right,[data-theme="light"] .hbn__card{box-shadow:0 24px 48px -32px rgba(26,12,6,.28)}

/* home-1 / section 7 — join the journey */
[data-theme="dark"] .cmu__join,[data-theme="dark"] .cmu__stat{box-shadow:0 24px 48px -28px rgba(0,0,0,.75)}
[data-theme="light"] .cmu__join,[data-theme="light"] .cmu__stat{box-shadow:0 24px 48px -32px rgba(26,12,6,.25)}

/* Home-1 / section 8: consultation pass dark theme */
[data-theme="dark"] .consult-pass__ticket{box-shadow:0 22px 60px rgba(0,0,0,.22)}
[data-theme="dark"] .consult-pass__facts li{background:var(--surface-soft);color:var(--text)}
[data-theme="dark"] .consult-pass__photo{background:var(--bg)}

/* 685 stat card glass surface in dark mode */
[data-theme="dark"] .cmu__stat{background:color-mix(in srgb,var(--surface) 82%,transparent);border-color:color-mix(in srgb,var(--border) 82%,transparent)}


/* Treatments closing CTA — preserve contrast in dark mode */
[data-theme="dark"] .treat-cta{background:var(--bg);color:var(--text)}
[data-theme="dark"] .treat-cta:before{background:radial-gradient(ellipse at 18% 48%,rgba(190,151,121,.11),transparent 56%)}
[data-theme="dark"] .treat-cta__eyebrow{color:var(--accent)}
[data-theme="dark"] .treat-cta__title,[data-theme="dark"] .treat-cta__trust-item h3{color:var(--heading)}
[data-theme="dark"] .treat-cta__text,[data-theme="dark"] .treat-cta__trust-item p{color:var(--text)}
[data-theme="dark"] .treat-cta__photo{border-color:var(--border);background:var(--surface)}
[data-theme="dark"] .treat-cta__button--primary{background:var(--accent);border-color:var(--accent);color:#171411}
[data-theme="dark"] .treat-cta__button--outline{border-color:var(--border);color:var(--text)}
[data-theme="light"] .treat-cta:before{background:radial-gradient(ellipse at 18% 48%,rgba(225,169,111,.22),transparent 55%)}
[data-theme="light"] .treat-cta__button--primary{box-shadow:0 5px 20px rgba(179,130,83,.13)}
[data-theme="light"] .treat-cta__button--primary:hover,[data-theme="light"] .treat-cta__button--primary:focus-visible{box-shadow:0 0 0 5px rgba(179,130,83,.15),0 10px 30px rgba(179,130,83,.32)}


/* Contact CTA theme contrast and visible light-touch glow */
[data-theme="dark"] .contact-cta__inner{border-color:var(--border)}
[data-theme="dark"] .contact-cta__intro,[data-theme="dark"] .contact-cta__hours p,[data-theme="dark"] .contact-cta__link small,[data-theme="dark"] .contact-cta__notes p{color:var(--text)}
[data-theme="dark"] .contact-cta__link strong,[data-theme="dark"] .contact-cta__hours>span{color:var(--heading)}
[data-theme="light"] .contact-cta__link:hover{ text-shadow:0 0 12px color-mix(in srgb,var(--accent) 22%,transparent)}
[data-theme="light"] .contact-cta__inner:before{background:radial-gradient(ellipse at 12% 15%,rgba(122,95,64,.10),transparent 48%)}

