/*
 * LA Dental 1.9.7 authoritative visual layer.
 * Loaded after style.css so legacy dark-section declarations cannot restore
 * pale text on pearl surfaces.
 */
:root {
    --ld-focus-light: #0a2b3d;
    --ld-focus-dark: #f1e2c8;
}

[class*="ld-service-accent--"] {
    --service-accent-text: #126f77;
}

.ld-service-accent--rehabilitation {
    --service-accent-text: #1f7180;
}

.ld-service-accent--temporary {
    --service-accent-text: #875616;
}

.ld-service-accent--implants {
    --service-accent-text: #315f9a;
}

.ld-service-accent--aesthetics {
    --service-accent-text: #865b73;
}

.ld-service-accent--whitening {
    --service-accent-text: #0e6f80;
}

.ld-service-accent--endodontics {
    --service-accent-text: #3b765f;
}

.ld-service-accent--emergency {
    --service-accent-text: #b5433f;
}

.site-main .page-hero {
    --ld-art-color: rgba(22, 143, 149, 0.14);
    --ld-art-end: 0;
    --ld-art-top: 0;
    --ld-art-width: clamp(300px, 38vw, 550px);
}

.site-main .page-hero::after {
    -webkit-mask-image: url("../img/patterns/dental-rays.svg");
    mask-image: url("../img/patterns/dental-rays.svg");
}

.site-main .clinic-intro {
    background-image:
        radial-gradient(ellipse at 8% 18%, rgba(22, 143, 149, 0.11), transparent 34%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .clinic-dossier {
    background-image:
        linear-gradient(126deg, rgba(49, 95, 154, 0.1), transparent 38%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .treatments-preview {
    background-image:
        radial-gradient(ellipse at 92% 14%, rgba(134, 91, 115, 0.1), transparent 36%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .decision-method {
    overflow: visible;
    background-image:
        radial-gradient(circle at 8% 84%, rgba(181, 67, 63, 0.09), transparent 31%),
        linear-gradient(145deg, var(--color-pearl-light), #ffffff 58%, #f8f2e9);
}

.site-main .doctors-preview {
    color: var(--color-ink);
    background-image:
        radial-gradient(ellipse at 88% 10%, rgba(63, 125, 101, 0.11), transparent 34%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .clinic-experience {
    background-image:
        radial-gradient(circle at 4% 94%, rgba(49, 95, 154, 0.1), transparent 32%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .contact-band,
.site-main .contact-conversion {
    background-image:
        radial-gradient(circle at 8% 82%, rgba(169, 111, 36, 0.09), transparent 31%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .google-reviews-cta {
    background-image:
        radial-gradient(ellipse at 92% 12%, rgba(66, 133, 244, 0.08), transparent 34%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
}

.site-main .about-story {
    background-image:
        radial-gradient(ellipse at 90% 14%, rgba(49, 95, 154, 0.09), transparent 33%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .about-doctors {
    background-image:
        radial-gradient(ellipse at 8% 86%, rgba(134, 91, 115, 0.09), transparent 34%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main :where(.page-hero, .contact-hero, .legal-page .page-hero) {
    background-image:
        radial-gradient(circle at 92% 8%, rgba(22, 143, 149, 0.09), transparent 32%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .treatment-hierarchy {
    background-image:
        radial-gradient(ellipse at 8% 8%, rgba(23, 99, 123, 0.08), transparent 30%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main :where(
    .treatments-quick-map a span,
    .treatment-row > a > span,
    .treatment-link-card__number,
    .treatment-category__number,
    .treatment-category__item > span,
    .treatment-category__head .eyebrow,
    .treatment-category__item em,
    .treatment-row strong,
    .treatment-link-card .text-link
) {
    color: var(--service-accent-text, #126f77);
}

.site-main .treatment-category {
    overflow: visible;
}

.site-main .single-treatment .treatment-hero {
    background-image:
        radial-gradient(circle at 92% 8%, var(--service-graphic, rgba(22, 143, 149, 0.11)), transparent 32%),
        linear-gradient(180deg, var(--color-pearl-light), var(--service-soft, var(--color-pearl)));
}

.site-main .single-treatment__content {
    background-image:
        linear-gradient(132deg, var(--service-graphic, rgba(23, 99, 123, 0.08)), transparent 35%),
        linear-gradient(180deg, var(--color-pearl), var(--color-pearl-light));
}

.site-main .related-treatments {
    background-image:
        radial-gradient(ellipse at 92% 86%, var(--service-graphic, rgba(49, 95, 154, 0.08)), transparent 34%),
        linear-gradient(180deg, var(--color-pearl-light), var(--color-pearl));
}

.site-main .doctors-preview__intro h2 {
    color: var(--color-teal-deep);
}

.site-main .doctors-preview__intro p.eyebrow {
    color: var(--color-teal);
}

.site-main .doctors-preview__intro p:not(.eyebrow) {
    color: var(--color-ink-soft);
}

.site-main .google-reviews-cta__stars,
.site-main .google-review-card__stars {
    color: var(--color-gold);
}

.single-treatment--emax .treatment-hero__overlay {
    color: #ffffff;
    background: linear-gradient(135deg, #0d4b5c, #052b3a);
    border-block-start: 4px solid var(--color-gold-soft);
}

.single-treatment--emax .treatment-hero__overlay p,
.single-treatment--emax .treatment-hero__overlay strong {
    color: #ffffff;
}

.single-treatment--emax .treatment-hero__overlay small {
    color: #d8ecef;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--ld-focus-light);
}

:where(
    .hero--immersive,
    .services-emax,
    .about-strip,
    .treatment-contact-strip,
    .archive-review-source,
    .final-cta,
    .site-footer,
    .legal-contact-card,
    .google-map-card__head,
    .contact-band__grid > div:first-child
) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--ld-focus-dark);
}

/*
 * LD_V1_9_7_DENTAL_WAVE_SYSTEM
 * An original smile/occlusion ribbon system tailored to LA Dental. Strong
 * color stays in section edge zones; copy, forms and sticky content remain on
 * stable reading planes above the non-interactive decorative layer.
 */
.site-main :where(
    .clinic-intro,
    .clinic-dossier,
    .treatments-preview,
    .services-emax,
    .decision-method,
    .doctors-preview,
    .clinic-experience,
    .about-strip,
    .contact-band,
    .google-reviews-cta,
    .about-hero,
    .about-story,
    .about-doctors,
    .contact-hero,
    .contact-conversion,
    .page-hero,
    .treatment-hierarchy,
    .treatment-contact-strip,
    .archive-review-source,
    .treatment-hero,
    .single-treatment__content,
    .related-treatments
),
.final-cta {
    --ld-wave-mask: url("../img/patterns/dental-smile-ribbon.svg");
    --ld-wave-height: clamp(54px, 6.4vw, 94px);
    --ld-wave-start: #bfe6e7;
    --ld-wave-middle: #55b7b8;
    --ld-wave-end: #168f95;
    --ld-wave-opacity: 0.8;
    --ld-wave-transform: none;
}

.site-main :where(
    .clinic-intro,
    .clinic-dossier,
    .treatments-preview,
    .services-emax,
    .decision-method,
    .doctors-preview,
    .clinic-experience,
    .about-strip,
    .contact-band,
    .google-reviews-cta,
    .about-hero,
    .about-story,
    .about-doctors,
    .contact-hero,
    .contact-conversion,
    .page-hero,
    .treatment-hierarchy,
    .treatment-contact-strip,
    .archive-review-source,
    .treatment-hero,
    .single-treatment__content,
    .related-treatments
)::before,
.final-cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto 0 -1px;
    width: 100%;
    height: var(--ld-wave-height);
    background: linear-gradient(
        100deg,
        var(--ld-wave-start) 0%,
        var(--ld-wave-middle) 52%,
        var(--ld-wave-end) 100%
    );
    opacity: var(--ld-wave-opacity);
    transform: var(--ld-wave-transform);
    transform-origin: center;
    pointer-events: none;
    -webkit-mask-image: var(--ld-wave-mask);
    -webkit-mask-position: center bottom;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--ld-wave-mask);
    mask-position: center bottom;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* Keep every reading and interaction plane above the ribbon. */
.site-main :where(
    .clinic-intro,
    .clinic-dossier,
    .treatments-preview,
    .services-emax,
    .decision-method,
    .doctors-preview,
    .clinic-experience,
    .about-strip,
    .contact-band,
    .google-reviews-cta,
    .about-hero,
    .about-story,
    .about-doctors,
    .contact-hero,
    .contact-conversion,
    .page-hero,
    .treatment-hierarchy,
    .treatment-contact-strip,
    .archive-review-source,
    .treatment-hero,
    .single-treatment__content,
    .related-treatments
) > .container,
.final-cta > .container {
    position: relative;
    z-index: 2;
}

/* The immersive Hero already owns ::before for its contrast scrim. */
.hero--immersive::after {
    inset: auto 0 -1px;
    z-index: 1;
    width: 100%;
    height: clamp(58px, 7vw, 104px);
    background: linear-gradient(100deg, #dff3f4 0%, #77c7c8 48%, #168f95 100%);
    opacity: 0.88;
    pointer-events: none;
    -webkit-mask: url("../img/patterns/dental-smile-ribbon.svg") center bottom / 100% 100% no-repeat;
    mask: url("../img/patterns/dental-smile-ribbon.svg") center bottom / 100% 100% no-repeat;
}

/* Section-specific clinical palette and alternating wave rhythm. */
.site-main .clinic-intro {
    --ld-wave-start: #d9f1f2;
    --ld-wave-middle: #63bec0;
    --ld-wave-end: #168f95;
}

.site-main .clinic-dossier {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #dce8f4;
    --ld-wave-middle: #789bc7;
    --ld-wave-end: #315f9a;
    --ld-wave-transform: scaleX(-1);
}

.site-main .treatments-preview {
    --ld-wave-start: #f0e5eb;
    --ld-wave-middle: #bd91a8;
    --ld-wave-end: #865b73;
    --ld-wave-height: clamp(62px, 7vw, 106px);
}

.site-main .services-emax {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #f1e2c8;
    --ld-wave-middle: #c7a66a;
    --ld-wave-end: #168f95;
    --ld-wave-opacity: 0.94;
}

.site-main .decision-method {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #f7e2dd;
    --ld-wave-middle: #d9877f;
    --ld-wave-end: #a96f24;
    --ld-wave-opacity: 0.68;
    --ld-wave-transform: scaleX(-1);
}

.site-main :where(.doctors-preview, .about-doctors) {
    --ld-wave-start: #e1efe8;
    --ld-wave-middle: #7daf95;
    --ld-wave-end: #3f7d65;
    --ld-wave-height: clamp(64px, 7.4vw, 110px);
}

.site-main :where(.clinic-experience, .about-story) {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #e2ecf6;
    --ld-wave-middle: #7299c6;
    --ld-wave-end: #315f9a;
    --ld-wave-transform: scaleX(-1);
}

.site-main :where(.about-strip, .treatment-contact-strip, .archive-review-source),
.final-cta {
    --ld-wave-start: #f1e2c8;
    --ld-wave-middle: #c7a66a;
    --ld-wave-end: #168f95;
    --ld-wave-opacity: 0.86;
}

.final-cta {
    /* Keep the light ribbon entirely inside the existing 58px bottom pad. */
    --ld-wave-height: clamp(38px, 3.8vw, 52px);
}

.site-main :where(.contact-band, .contact-conversion) {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #f4ead8;
    --ld-wave-middle: #d3b16f;
    --ld-wave-end: #a96f24;
    --ld-wave-transform: scaleX(-1);
}

.site-main .google-reviews-cta {
    --ld-wave-start: #dff1f1;
    --ld-wave-middle: #168f95;
    --ld-wave-end: #c7a66a;
    --ld-wave-opacity: 0.76;
}

.site-main :where(.about-hero, .contact-hero, .page-hero) {
    --ld-wave-height: clamp(42px, 4.8vw, 72px);
    --ld-wave-start: #dff3f4;
    --ld-wave-middle: #70c1c2;
    --ld-wave-end: #168f95;
    --ld-wave-opacity: 0.66;
}

.site-main .treatment-hierarchy {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-start: #dce8f4;
    --ld-wave-middle: #5d8abd;
    --ld-wave-end: #17637b;
    --ld-wave-transform: scaleX(-1);
}

.site-main :where(.single-treatment .treatment-hero, .single-treatment__content, .related-treatments) {
    --ld-wave-start: var(--service-soft, #d9f1f2);
    --ld-wave-middle: var(--service-accent, #168f95);
    --ld-wave-end: var(--service-accent-text, #126f77);
    --ld-wave-opacity: 0.64;
}

.site-main .single-treatment__content {
    --ld-wave-mask: url("../img/patterns/dental-occlusion-current.svg");
    --ld-wave-transform: scaleX(-1);
}

.single-treatment--emax :where(.treatment-hero, .single-treatment__content, .related-treatments) {
    --ld-wave-start: #f1e2c8;
    --ld-wave-middle: #c7a66a;
    --ld-wave-end: #168f95;
    --ld-wave-opacity: 0.76;
}

@media (max-width: 720px) {
    .site-main :where(
        .clinic-intro,
        .clinic-dossier,
        .treatments-preview,
        .services-emax,
        .decision-method,
        .doctors-preview,
        .clinic-experience,
        .about-strip,
        .contact-band,
        .google-reviews-cta,
        .about-hero,
        .about-story,
        .about-doctors,
        .contact-hero,
        .contact-conversion,
        .page-hero,
        .treatment-hierarchy,
        .treatment-contact-strip,
        .archive-review-source,
        .treatment-hero,
        .single-treatment__content,
        .related-treatments
    )::before,
    .final-cta::before {
        height: clamp(36px, 12vw, 58px);
        opacity: 0.7;
    }

    .hero--immersive::after {
        height: clamp(42px, 13vw, 60px);
        opacity: 0.78;
    }
}