/* =============================================================
 * Adental Services — Single Service stylesheet (v1.2.0)
 * --------------------------------------------------------------
 * Realigned on the existing site DA (Home + About + Services):
 *   - Page background: lavender pale (#F8F4FF) NOT pure white
 *   - Sections use the "big card image + text" pattern with a
 *     small "01" number top-right in pale violet (not a giant
 *     watermark)
 *   - Testimonials = soft lavender quote boxes with « ornament
 *     (matches About + Services chapters)
 *   - Final CTA = sober deep-violet card, no animated mesh
 *   - Related services = lavender-gradient cards (Home services
 *     grid style)
 *   - No giant watermarks, no font-script counter, no fade-up
 *     on every element — restrained, premium, on-brand.
 * ============================================================= */

:root {
    /* Brand */
    --ado-primary:        #8956FF;
    --ado-primary-light:  #A87FFF;
    --ado-primary-soft:   #C9B3FF;
    --ado-primary-dark:   #5A2BC9;

    --ado-dark:           #1B1238;
    --ado-dark-2:         #230D38;
    --ado-dark-3:         #14082B;

    /* Backgrounds — lavender base, like the live site */
    --ado-bg-page:        #F8F4FF;   /* page background — pale lavender */
    --ado-bg-card:        #FFFFFF;   /* white cards */
    --ado-bg-quote:       #F0E9FF;   /* lavender quote boxes inside cards */
    --ado-bg-related:     linear-gradient(135deg, #F1E8FF 0%, #E5D4FF 100%);

    /* Text */
    --ado-text:           #1B1238;
    --ado-text-soft:      #5A4D7A;
    --ado-text-muted:     #8B7FB2;
    --ado-text-on-dark:   #FFFFFF;
    --ado-text-card-num:  rgba(168, 127, 255, 0.18);

    /* Borders */
    --ado-border:         rgba(91, 43, 201, 0.10);
    --ado-border-quote:   #8956FF;

    /* Shadows */
    --ado-shadow-sm:      0 2px 12px rgba(91, 43, 201, 0.06);
    --ado-shadow-md:      0 12px 40px rgba(91, 43, 201, 0.10);
    --ado-shadow-lg:      0 24px 64px rgba(91, 43, 201, 0.16);

    /* Radii */
    --ado-radius-sm:      12px;
    --ado-radius:         16px;
    --ado-radius-lg:      24px;
    --ado-radius-xl:      32px;
    --ado-radius-pill:    100px;

    /* Type */
    --ado-font:           'Avantique', 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Motion */
    --ado-ease:           cubic-bezier(0.22, 1, 0.36, 1);
    --ado-transition:     0.28s var(--ado-ease);

    /* Layout */
    --ado-container:      1240px;
    --ado-container-narrow: 820px;
    --ado-block-y:        clamp(60px, 7vw, 80px);
}

/* =============================================================
 * Base
 * ============================================================= */
.ado-service {
    font-family: var(--ado-font);
    color: var(--ado-text);
    line-height: 1.6;
    background: var(--ado-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.ado-service * { box-sizing: border-box; }
.ado-service img { max-width: 100%; height: auto; display: block; }

.ado-container {
    max-width: var(--ado-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    position: relative;
}
.ado-container--narrow { max-width: var(--ado-container-narrow); }

.ado-block { padding: var(--ado-block-y) 0; }
.ado-block__head { margin: 0 0 56px; max-width: 720px; }
.ado-block__head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Skip link */
.ado-skip-link.screen-reader-text { position: absolute; left: -9999px; }
.ado-skip-link.screen-reader-text:focus {
    position: fixed; top: 16px; left: 16px; z-index: 9999;
    padding: 12px 20px; background: var(--ado-primary); color: #fff;
    border-radius: var(--ado-radius); text-decoration: none; font-weight: 600;
}

/* =============================================================
 * Typography
 * ============================================================= */
.ado-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ado-primary);
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ado-eyebrow--white { color: var(--ado-primary-light); }

.ado-h2 {
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 24px;
    color: var(--ado-text);
}

.ado-h2__main { display: inline; }
.ado-h2__emph {
    font-style: italic;
    font-weight: 400;
    /* Solid colour instead of gradient + background-clip: text.  The clip
       technique was causing italic glyph lean to render unevenly (parts of
       the last letter falling outside the painted box) and gradients that
       fade into the surrounding bg made trailing letters look "cut".  A
       solid saturated purple is bullet-proof: every glyph is fully painted
       in its true shape, regardless of viewport, position, or wrap. */
    color: var(--ado-primary);
    display: inline;
}

.ado-h2--white { color: #fff; }
.ado-h2--white .ado-h2__emph {
    /* Solid lavender on the dark CTA card — same anti-clip rationale. */
    color: var(--ado-primary-light);
}

/* =============================================================
 * Buttons
 * ============================================================= */
.ado-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: var(--ado-radius-pill);
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--ado-transition), box-shadow var(--ado-transition), background var(--ado-transition);
    line-height: 1;
    white-space: nowrap;
}

.ado-btn--lg { padding: 18px 32px; font-size: 16px; }

.ado-btn__arrow {
    display: inline-block;
    transition: transform var(--ado-transition);
    font-size: 18px; line-height: 1;
}
.ado-btn:hover .ado-btn__arrow { transform: translateX(4px); }

.ado-btn--primary {
    background: var(--ado-primary);
    color: #fff;
    box-shadow: 0 8px 24px rgba(137, 86, 255, 0.32);
}
.ado-btn--primary:hover {
    background: var(--ado-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(137, 86, 255, 0.42);
}

.ado-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ado-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.60);
}

.ado-btn--white {
    background: #fff;
    color: var(--ado-primary-dark);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.ado-btn--white:hover {
    background: var(--ado-bg-page);
    transform: translateY(-1px);
}

/* =============================================================
 * Pills
 * ============================================================= */
.ado-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--ado-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    background: rgba(168, 127, 255, 0.16);
    color: var(--ado-primary-light);
    border: 1px solid rgba(168, 127, 255, 0.28);
    transition: all var(--ado-transition);
    margin-bottom: 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ado-pill:hover { background: rgba(168, 127, 255, 0.30); }
.ado-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ado-primary-light);
    box-shadow: 0 0 0 4px rgba(168, 127, 255, 0.20);
}

/* =============================================================
 * Breadcrumb
 * ============================================================= */
.ado-breadcrumb { margin-bottom: 28px; position: relative; z-index: 1; }
.ado-breadcrumb__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; font-size: 13px;
    color: rgba(255, 255, 255, 0.60);
}
.ado-breadcrumb__item a {
    color: rgba(255, 255, 255, 0.72); text-decoration: none;
    transition: color var(--ado-transition);
}
.ado-breadcrumb__item a:hover { color: #fff; }
.ado-breadcrumb__item.is-current { color: var(--ado-primary-light); font-weight: 500; }
.ado-breadcrumb__sep { color: rgba(255, 255, 255, 0.30); list-style: none; }

/* =============================================================
 * HERO — deep violet, image card right (Dental Implants reference)
 * ============================================================= */
.ado-hero {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(137, 86, 255, 0.26) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(168, 127, 255, 0.16) 0%, transparent 50%),
        linear-gradient(180deg, var(--ado-dark-3) 0%, var(--ado-dark) 70%, var(--ado-dark-2) 100%);
    color: #fff;
    padding: clamp(48px, 7vw, 96px) 0 clamp(160px, 18vw, 220px);
    position: relative;
    overflow: hidden;
}

.ado-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(168, 127, 255, 0.18) 0%, transparent 55%);
    filter: blur(30px);
    pointer-events: none;
}

.ado-hero__grid {
    display: grid;
    /* Image column slightly wider than text so the hero photo gets more
       presence (was 1.05 / 1 — image was the smaller side). */
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.ado-hero__h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.024em;
    margin: 0 0 20px;
}
.ado-h1__main { color: #fff; display: inline; }
.ado-h1__emph {
    font-style: italic;
    font-weight: 400;
    /* Solid lavender on the violet hero (high contrast, AA at 64px).
       No gradient + background-clip: text — that combo was making the
       last italic glyph look truncated because the painted box ended
       before the glyph's italic lean. */
    color: var(--ado-primary-light);
    display: inline;
}

.ado-hero__desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 32px;
    max-width: 480px;
}

.ado-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.ado-hero__media { position: relative; }

.ado-hero__image {
    margin: 0;
    border-radius: var(--ado-radius-xl);
    overflow: hidden;
    /* Square aspect ratio gives the hero photo significantly more vertical
       presence vs the 4:3 it used to have — at the same column width the
       picture is now noticeably taller. */
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: var(--ado-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    position: relative;
}

.ado-hero__image img { width: 100%; height: 100%; object-fit: cover; }

.ado-hero__image--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.16);
}
.ado-hero__image--placeholder svg { width: 30%; height: 30%; }

.ado-hero__badge {
    position: absolute;
    bottom: 20px; right: 20px;
    margin: 0;
    padding: 12px 18px;
    background: rgba(20, 8, 43, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ado-radius);
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.ado-hero__badge-value { font-size: 20px; font-weight: 700; line-height: 1.05; }
.ado-hero__badge-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Image-tag pill (Anxiety → Calm style) */
.ado-image-tag {
    position: absolute;
    top: 20px; left: 20px;
    padding: 8px 16px;
    background: #fff;
    color: var(--ado-text-muted);
    border-radius: var(--ado-radius-pill);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--ado-shadow-sm);
}
.ado-image-tag strong {
    color: var(--ado-primary);
    font-weight: 600;
}
.ado-image-tag__arrow { color: var(--ado-primary); }

.ado-image-tag--success {
    top: auto; bottom: 20px; left: 20px;
    padding: 12px 16px;
    align-items: flex-start;
    gap: 10px;
}
.ado-image-tag--success strong {
    font-size: 17px; color: var(--ado-text); font-weight: 700;
}
.ado-image-tag--success span {
    font-size: 11px; color: var(--ado-text-muted);
    letter-spacing: 0.04em;
}

/* =============================================================
 * STATS — 4 white cards floating up over hero
 * ============================================================= */
/*
 * The stats section is pulled UP into the violet hero (negative margin) so
 * that its top half overlaps the hero and its bottom half sits on the page
 * background.  We make the section itself transparent so the violet hero
 * BG shows through behind the top half of the cards, and the page's
 * lavender background (set on .ado-service) shows through behind the
 * bottom half — giving the "à cheval" 50 / 50 effect.
 */
.ado-stats-section {
    background: transparent;
    margin-top: clamp(-90px, -8vw, -70px);
    position: relative;
    z-index: 2;
}

.ado-stats {
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ado-stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    background: var(--ado-bg-card);
    padding: 26px;
    border-radius: var(--ado-radius-lg);
    box-shadow: var(--ado-shadow-md);
    border: 1px solid var(--ado-border);
    transition: transform var(--ado-transition), box-shadow var(--ado-transition);
}
.ado-stat:hover { transform: translateY(-2px); box-shadow: var(--ado-shadow-lg); }

.ado-stat__icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--ado-bg-page);
    color: var(--ado-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ado-stat__icon svg { width: 18px; height: 18px; }

.ado-stat__label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ado-text-muted);
    margin: 0;
    order: 1;
}
.ado-stat__value {
    font-size: 22px; font-weight: 700;
    color: var(--ado-text);
    line-height: 1.1;
    margin: 0;
    order: 2;
    letter-spacing: -0.01em;
}

/* =============================================================
 * CARD — big white card with image + text (services pattern)
 * ============================================================= */
.ado-card {
    background: var(--ado-bg-card);
    border-radius: var(--ado-radius-xl);
    box-shadow: var(--ado-shadow-md);
    border: 1px solid var(--ado-border);
    overflow: hidden;
    position: relative;
}

.ado-card__number {
    position: absolute;
    top: 28px; right: 32px;
    font-family: var(--ado-font);
    font-size: clamp(72px, 8vw, 112px);
    line-height: 1;
    font-weight: 700;
    color: var(--ado-text-card-num);
    letter-spacing: -0.02em;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.ado-card--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.ado-card__media {
    position: relative;
    background: var(--ado-bg-page);
    min-height: 480px;
    overflow: hidden;
}
.ado-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ado-card__media-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--ado-primary);
}
.ado-card__media-placeholder svg { width: 25%; height: 25%; }

.ado-card__body {
    padding: clamp(40px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.ado-card__desc {
    font-size: 17px;
    color: var(--ado-text-soft);
    margin: 0 0 28px;
    line-height: 1.7;
}
.ado-card__desc p { margin: 0 0 14px; }
.ado-card__desc p:last-child { margin: 0; }

.ado-card--full {
    padding: clamp(40px, 5vw, 64px);
}

.ado-card__head { margin: 0 0 32px; }
.ado-card__head--center { text-align: center; }
.ado-card__sub {
    font-size: 16px;
    color: var(--ado-text-soft);
    margin: 8px 0 0;
}

/* Bullets inside cards */
.ado-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ado-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ado-text);
}

.ado-bullet__check {
    flex: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ado-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-shadow: 0 4px 10px rgba(137, 86, 255, 0.30);
}
.ado-bullet__check svg { width: 12px; height: 12px; stroke-width: 3; }

.ado-bullet > span:last-child {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* =============================================================
 * REAL RESULTS — carousel inside a card
 * ============================================================= */
.ado-carousel { position: relative; }

.ado-carousel__track {
    list-style: none;
    margin: 0;
    padding: 0 0 24px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ado-carousel__track::-webkit-scrollbar { display: none; }

.ado-carousel__slide {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 240px;
    scroll-snap-align: start;
}
.ado-carousel__slide figure {
    margin: 0;
    background: var(--ado-dark-2);
    border-radius: var(--ado-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    transition: transform 0.4s var(--ado-ease), box-shadow 0.4s var(--ado-ease);
    box-shadow: var(--ado-shadow-sm);
}
.ado-carousel__slide figure:hover {
    transform: translateY(-3px);
    box-shadow: var(--ado-shadow-md);
}
.ado-carousel__slide img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ado-ease);
}
.ado-carousel__slide figure:hover img { transform: scale(1.03); }

.ado-carousel__slide figure::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(20, 8, 43, 0.55) 100%);
    pointer-events: none;
}

.ado-carousel__caption { position: absolute; bottom: 14px; left: 14px; z-index: 2; }
.ado-carousel__caption span {
    display: inline-block;
    background: rgba(20, 8, 43, 0.65);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--ado-radius-pill);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ado-carousel__progress {
    height: 4px;
    background: rgba(137, 86, 255, 0.14);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.ado-carousel__progress-bar {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, var(--ado-primary), var(--ado-primary-light));
    border-radius: 999px;
    transition: width 0.2s linear;
}

/* =============================================================
 * TESTIMONIALS — soft lavender quote boxes (About style)
 * ============================================================= */
.ado-testimonials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ado-quote-card {
    background: var(--ado-bg-quote);
    border-left: 3px solid var(--ado-border-quote);
    border-radius: var(--ado-radius);
    padding: 28px 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: transform var(--ado-transition), box-shadow var(--ado-transition);
}
.ado-quote-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ado-shadow-sm);
}

.ado-quote-card__mark {
    font-family: var(--ado-font);
    font-size: 38px;
    line-height: 0.6;
    color: var(--ado-primary);
    font-weight: 700;
    margin-bottom: -4px;
}

.ado-quote-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ado-text);
    font-style: italic;
    flex: 1;
}

.ado-quote-card__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    line-height: 1.3;
}
.ado-quote-card__author strong {
    color: var(--ado-primary-dark);
    font-size: 13px;
    font-weight: 600;
}
.ado-quote-card__author small {
    color: var(--ado-text-muted);
    font-size: 12px;
}

/* =============================================================
 * FAQ — sober white cards
 * ============================================================= */
.ado-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ado-faq__item {
    background: var(--ado-bg-card);
    border-radius: var(--ado-radius);
    border: 1px solid var(--ado-border);
    transition: border-color var(--ado-transition), box-shadow var(--ado-transition);
    overflow: hidden;
}
.ado-faq__item:hover {
    border-color: rgba(137, 86, 255, 0.30);
    box-shadow: var(--ado-shadow-sm);
}
.ado-faq__item.is-open {
    border-color: var(--ado-primary-light);
    box-shadow: var(--ado-shadow-sm);
}

.ado-faq__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.ado-faq__trigger {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 22px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: inherit;
    color: var(--ado-text);
    transition: background-color var(--ado-transition);
}
.ado-faq__trigger:focus-visible {
    outline: 3px solid rgba(137, 86, 255, 0.40);
    outline-offset: -3px;
}

.ado-faq__question { font-size: 16px; font-weight: 600; line-height: 1.4; flex: 1; }

.ado-faq__icon {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--ado-bg-page);
    color: var(--ado-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ado-transition);
    position: relative;
}
.ado-faq__icon::before,
.ado-faq__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--ado-transition);
}
.ado-faq__icon::before { width: 12px; height: 2px; }
.ado-faq__icon::after  { width: 2px; height: 12px; }

.ado-faq__item.is-open .ado-faq__icon {
    background: var(--ado-primary);
    color: #fff;
}
.ado-faq__item.is-open .ado-faq__icon::after { transform: scaleY(0); }

.ado-faq__panel {
    padding: 0 24px 24px;
    color: var(--ado-text-soft);
    font-size: 15px;
    line-height: 1.7;
}
.ado-faq__panel p { margin: 0; }

/* =============================================================
 * FINAL CTA — sober deep-violet card
 * ============================================================= */
.ado-cta-card {
    border-radius: var(--ado-radius-xl);
    padding: clamp(56px, 8vw, 96px) clamp(32px, 5vw, 64px);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 0%, rgba(168, 127, 255, 0.32) 0%, transparent 55%),
        radial-gradient(circle at 75% 100%, rgba(137, 86, 255, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, var(--ado-dark-3) 0%, var(--ado-dark) 60%, var(--ado-dark-2) 100%);
}

.ado-cta-card .ado-eyebrow { justify-content: center; margin-bottom: 14px; }
.ado-cta-card .ado-h2 { margin: 0 0 16px; }

.ado-cta-card__desc {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* =============================================================
 * RELATED — Home services grid style (lavender gradient cards)
 * ============================================================= */
.ado-related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ado-related__item { display: flex; }

.ado-related__card {
    text-decoration: none;
    color: inherit;
    background: var(--ado-bg-related);
    border-radius: var(--ado-radius-xl);
    padding: 36px;
    width: 100%;
    transition: transform var(--ado-transition), box-shadow var(--ado-transition);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.ado-related__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ado-shadow-md);
}

.ado-related__num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ado-primary);
    text-transform: uppercase;
}

.ado-related__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ado-related__icon {
    width: 36px; height: 36px;
    color: var(--ado-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.ado-related__icon svg { width: 28px; height: 28px; stroke-width: 2; }

.ado-related__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ado-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ado-related__desc {
    font-size: 14px;
    color: var(--ado-text-soft);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

.ado-related__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 10px 20px;
    background: var(--ado-primary);
    color: #fff;
    border-radius: var(--ado-radius-pill);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--ado-transition), transform var(--ado-transition);
}

.ado-related__card:hover .ado-related__cta {
    background: var(--ado-primary-dark);
    transform: translateX(2px);
}

.ado-related__cta span {
    transition: transform var(--ado-transition);
}
.ado-related__card:hover .ado-related__cta span { transform: translateX(3px); }

/* =============================================================
 * STICKY MOBILE CTA
 * ============================================================= */
.ado-sticky-cta {
    display: none;
    position: fixed;
    bottom: 16px; left: 16px; right: 16px;
    z-index: 100;
}
.ado-sticky-cta .ado-btn { width: 100%; justify-content: center; }

/* =============================================================
 * RESPONSIVE
 * ============================================================= */
@media (max-width: 1024px) {
    .ado-hero__grid     { grid-template-columns: 1fr; }
    .ado-hero__media    { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
    .ado-stats          { grid-template-columns: repeat(2, 1fr); }
    .ado-card--split    { grid-template-columns: 1fr; }
    .ado-card__media    { min-height: 320px; }
    .ado-testimonials   { grid-template-columns: 1fr; }
    .ado-related        { grid-template-columns: 1fr; }
    .ado-card__number   { top: 20px; right: 20px; font-size: 64px; }
    .ado-carousel__slide{ flex-basis: calc((100% - 40px) / 3); }
}

@media (max-width: 768px) {
    .ado-stats-section  { margin-top: -64px; }
    .ado-stat           { padding: 20px; gap: 10px; }
    .ado-stat__value    { font-size: 18px; }

    .ado-hero           { padding: 40px 0 100px; }
    .ado-hero__badge    { bottom: 14px; right: 14px; padding: 10px 14px; }
    .ado-hero__badge-value { font-size: 18px; }

    .ado-image-tag      { top: 14px; left: 14px; padding: 6px 12px; font-size: 11px; }
    /* IMPORTANT: reset top:auto here, otherwise the success variant
       inherits top:14px from .ado-image-tag above and combining it
       with bottom:14px stretches the absolute element top-to-bottom,
       producing a tall vertical white pill on mobile (visual bug
       reported in screenshot of /services/all-on-x-...). */
    .ado-image-tag--success { top: auto; bottom: 14px; left: 14px; }

    .ado-carousel__slide{ flex-basis: calc((100% - 20px) / 2); min-width: 200px; }

    .ado-hero__ctas .ado-btn { flex: 1; justify-content: center; }
    .ado-related__card  { padding: 28px; }
    .ado-related__title { font-size: 19px; }

    .ado-sticky-cta     { display: block; }
    .ado-service        { padding-bottom: 80px; }
}

@media (max-width: 480px) {
    .ado-stats          { grid-template-columns: 1fr; }
    .ado-carousel__slide{ flex-basis: 80%; min-width: 0; }
    .ado-faq__trigger   { padding: 18px; gap: 12px; }
    .ado-faq__panel     { padding: 0 18px 18px; }
    .ado-card__number   { font-size: 48px; }
}

/* =============================================================
 * Reduced motion
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .ado-service * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
 * Print
 * ============================================================= */
@media print {
    .ado-hero, .ado-cta-card { background: none !important; color: #000 !important; }
    .ado-hero__ctas, .ado-sticky-cta { display: none !important; }
}

/* =============================================================
 * Header logo swap when sitting over the violet hero.
 *
 * The accompanying JS toggles `.logo-white` on the UICore header
 * wrapper whenever the header's vertical midpoint is inside an
 * .ado-hero section (same pattern used on the Blog page with
 * `.blog-hero-dk`).  We support both UICore's two-logo system
 * (main + second) and a defensive CSS-filter fallback so the
 * swap works even when no white SVG variant has been uploaded.
 * ============================================================= */
/* Generic descendant selector: catches any element with `.logo-white`
   on this site (UICore Pro uses `.uicore-navbar`, blog uses other
   wrappers).  All `.uicore-logo` images inside become visually white
   via filter — the chain (brightness 0 -> invert 1) reliably recolours
   any solid-tone logo (SVG / PNG) to pure white regardless of its
   source colour. */
.logo-white img.uicore-logo,
.logo-white .uicore-logo,
.logo-white .uicore-branding img {
    filter: brightness(0) invert(1);
    transition: filter 0.25s var(--ado-ease, ease);
}

/* Smooth out the toggle so the colour change isn't a harsh flicker
   when the user scrolls between the dark hero and lavender body. */
img.uicore-logo,
.uicore-branding img {
    transition: filter 0.25s var(--ado-ease, ease);
}

/* =============================================================
 * Medical review footer (E-E-A-T for YMYL)
 *
 * Surfaces "Medically reviewed by Dr X - Last updated …", an
 * authoritative external citation, and a generic medical-info
 * disclaimer.  Sober styling so it reads like a real editorial
 * notice, not a marketing block.
 * ============================================================= */
.ado-medical-review {
    padding: 32px 0 16px;
    border-top: 1px solid var(--ado-border);
    text-align: center;
    color: var(--ado-text-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ado-medical-review__line { margin: 0 0 6px; }
.ado-medical-review__line strong { color: var(--ado-text); }
.ado-medical-review__line a { color: var(--ado-primary); text-decoration: none; }
.ado-medical-review__line a:hover { text-decoration: underline; }
.ado-medical-review__rcdso { opacity: 0.8; font-feature-settings: "tnum" 1; }
.ado-medical-review__date { white-space: nowra