/* =============================================================
 * 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); }

/* Defensive: UICore Pro forces `a { color: inherit !important; opacity }` on
   anchor links via .uicore-content / .uic-* selectors. We bump specificity
   with `a.ado-btn` and `!important` to win over the theme reset. */
a.ado-btn--primary,
.ado-btn--primary {
    background: var(--ado-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(137, 86, 255, 0.32);
    opacity: 1 !important;
}
a.ado-btn--primary:hover,
.ado-btn--primary:hover {
    background: var(--ado-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(137, 86, 255, 0.42);
    opacity: 1 !important;
}

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

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

/* =============================================================
 * 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: underline;
    text-decoration-color: rgba(255, 255, 255, 0.20);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color var(--ado-transition), text-decoration-color var(--ado-transition);
}
.ado-breadcrumb__item a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.65);
}
.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(120px, 12vw, 180px) 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 20px;
    max-width: 480px;
}

.ado-hero__geo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 30px;
}
.ado-hero__geo-pin {
    color: var(--ado-primary, #8956ff);
    font-size: 10px;
    line-height: 1;
    filter: brightness(1.6);
}

.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;
}

/* =============================================================
 * REAL RESULTS — Before/After slider (replaces carousel)
 *
 * Source images are stacked portrait collages (800x1000):
 *   top half  = BEFORE
 *   bottom half = AFTER
 * The two <img> tags use the same source URL; CSS positions them
 * so the BEFORE shows the top half and the AFTER shows the bottom
 * half. A clip-path on the BEFORE image reveals more or less of
 * it based on the --x CSS variable, which JS updates as the user
 * drags the handle.
 * ============================================================= */
.ado-ba {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 24px;
    align-items: stretch;   /* thumb column stretches to slider height */
    max-width: 1040px;
    margin: 0 auto;
}

.ado-ba-stage {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ado-ba-case {
    display: none;
}
.ado-ba-case.is-active {
    display: block;
}

.ado-ba-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--ado-radius-lg);
    background: var(--ado-dark-2);
    box-shadow: var(--ado-shadow-md);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* Source images are stacked portrait collages (800x1000): top half = BEFORE, bottom half = AFTER.
   We use object-fit: cover + object-position to crop each half, instead of negative top positioning.
   This is more reliable cross-browser (especially mobile Safari/Chrome) and works whether or not
   the <img> is wrapped by an optimization plugin like Imagify/LSCache. */
picture.ado-ba-img { display: contents; }
.ado-ba-img > img,
.ado-ba-frame > img.ado-ba-img,
.ado-ba-img:not(picture) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}
/* AFTER = bottom half. object-position bottom aligns the bottom of the collage to the frame, cropping the TOP. */
.ado-ba-img--after > img,
.ado-ba-frame > img.ado-ba-img--after {
    object-position: 50% 100%;
}
/* BEFORE = top half. object-position top aligns the top of the collage to the frame, cropping the BOTTOM.
   clip-path reveals only the left --x portion, so the slider handle controls how much is shown. */
.ado-ba-img--before > img,
.ado-ba-frame > img.ado-ba-img--before {
    object-position: 50% 0;
    clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0);
    -webkit-clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0);
}

.ado-ba-badge {
    position: absolute;
    top: 16px;
    z-index: 3;
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--ado-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
}
.ado-ba-badge--before {
    left: 16px;
    background: rgba(20, 8, 43, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.ado-ba-badge--after {
    right: 16px;
    background: var(--ado-primary);
    box-shadow: 0 4px 14px rgba(137, 86, 255, 0.35);
}

.ado-ba-caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    background: rgba(20, 8, 43, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--ado-radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.ado-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x, 50%);
    width: 4px;
    margin-left: -2px;
    background: #fff;
    border: 0;
    padding: 0;
    z-index: 4;
    cursor: ew-resize;
    box-shadow: 0 0 0 1px rgba(20, 8, 43, 0.18);
}
.ado-ba-handle:focus-visible {
    outline: 2px solid var(--ado-primary);
    outline-offset: 2px;
}
.ado-ba-handle__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: #fff;
    color: var(--ado-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(20, 8, 43, 0.28);
    transition: transform 0.18s var(--ado-ease);
}
.ado-ba-handle:hover .ado-ba-handle__dot,
.ado-ba-handle.is-dragging .ado-ba-handle__dot {
    transform: scale(1.08);
}
.ado-ba-handle.is-dragging { cursor: ew-resize; }

/* Thumbnails column — to the right of the slider on desktop.
   Uses flex column + equal-flex children so the four thumbs share the
   slider's height instead of overflowing past it. */
.ado-ba-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    height: 100%;
    min-height: 0;
}
.ado-ba-thumb {
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    color: inherit;
    font: inherit;
    text-align: center;
    border-radius: var(--ado-radius-md);
    flex: 1 1 0;
    min-height: 0;
}
.ado-ba-thumb__media {
    display: block;
    position: relative;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--ado-radius-lg);
    border: 2px solid transparent;
    background: var(--ado-dark-2);
    transition: border-color 0.18s var(--ado-ease), transform 0.18s var(--ado-ease);
    box-shadow: var(--ado-shadow-sm);
}
/* Show only the AFTER half (bottom 50%) of the portrait collage.
   Container is now non-square (taller than wide, fills the flex row).
   The image is sized 100% wide × 200% tall, then shifted up 100% so the
   visible window aligns with the bottom half = After. object-fit:cover
   scales the source to fill the doubled box, centered horizontally. */
.ado-ba-thumb__media picture { display: contents; }
.ado-ba-thumb__media img,
.ado-ba-thumb__media picture > img {
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 200%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}
.ado-ba-thumb__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ado-text-soft, rgba(20, 8, 43, 0.55));
    transition: color 0.18s var(--ado-ease);
    flex: 0 0 auto;
}
.ado-ba-thumb:hover .ado-ba-thumb__media {
    transform: translateY(-2px);
    border-color: rgba(137, 86, 255, 0.45);
}
.ado-ba-thumb.is-active .ado-ba-thumb__media {
    border-color: var(--ado-primary);
}
.ado-ba-thumb.is-active .ado-ba-thumb__label {
    color: var(--ado-primary);
}
.ado-ba-thumb:focus-visible {
    outline: 2px solid var(--ado-primary);
    outline-offset: 3px;
}

/* =============================================================
 * 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; }

    /* Stack slider over thumbs at <= 768px.
       Override desktop flex column on .ado-ba-thumbs and force a real
       4-column grid with square media cells. Without this, the desktop
       `flex: 1 1 0` on each thumb collapses to a horizontal line because
       the stacked thumbs container has no fixed height to share. */
    .ado-ba              { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ado-ba-thumbs       {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 100%;
        height: auto;
    }
    .ado-ba-thumb        { flex: 0 0 auto; }
    .ado-ba-thumb__media { aspect-ratio: 1 / 1; flex: 0 0 auto; min-height: 0; }
    .ado-ba-handle__dot  { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .ado-ba-badge        { font-size: 10px; padding: 5px 10px; }
    .ado-ba-caption      { font-size: 11px; padding: 6px 12px; }

    .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: nowrap; }

.ado-medical-review__source { margin: 8px 0 12px; }
.ado-medical-review__source a {
    color: var(--ado-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ado-medical-review__disclaimer {
    margin: 0 auto;
    max-width: 640px;
    font-size: 13px;
    color: var(--ado-text-muted);
    font-style: italic;
}

/* =============================================================
 * New SEO Sections (v1.6.0) — Who's For, Types, Benefits,
 * Pricing, What to Expect, Why Choose Us
 *
 * Visually aligned on the existing Procedure/Real Results pattern:
 *   - Each section content area is wrapped in a soft white card
 *     with shadow and rounded corners
 *   - Big watermark number top-right (01..08 in page order)
 *   - Cards in feature lists with hover lift
 *   - Gradient violet icon badges
 * ============================================================= */

/* — SECTION CARD WRAPPING + WATERMARK NUMBERS — */
#ado-who .ado-container,
#ado-types .ado-container,
#ado-benefits .ado-container,
#ado-pricing .ado-container,
#ado-expect .ado-container,
#ado-why .ado-container {
    position: relative;
    background: var(--ado-bg-card);
    border-radius: var(--ado-radius-xl);
    padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
    box-shadow: var(--ado-shadow-md);
    max-width: 1180px;
}
/* Tighter spacing between H2 and the intro paragraph in new sections.
   The default .ado-block__head margin (56px) is meant for header-then-card layouts;
   when the header is followed directly by a paragraph it feels disconnected. */
#ado-who .ado-block__head,
#ado-types .ado-block__head,
#ado-benefits .ado-block__head,
#ado-pricing .ado-block__head,
#ado-expect .ado-block__head,
#ado-why .ado-block__head {
    margin-bottom: 20px;
}
#ado-who .ado-block__head + p,
#ado-types .ado-block__head + p,
#ado-benefits .ado-block__head + p,
#ado-pricing .ado-block__head + p,
#ado-expect .ado-block__head + p,
#ado-why .ado-block__head + p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ado-text-soft);
    margin: 0 0 32px;
    max-width: 720px;
}
#ado-who .ado-container > *,
#ado-types .ado-container > *,
#ado-benefits .ado-container > *,
#ado-pricing .ado-container > *,
#ado-expect .ado-container > *,
#ado-why .ado-container > * {
    position: relative;
    z-index: 2;
}
#ado-who .ado-container::after,
#ado-types .ado-container::after,
#ado-benefits .ado-container::after,
#ado-pricing .ado-container::after,
#ado-expect .ado-container::after,
#ado-why .ado-container::after {
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: var(--ado-font);
    font-size: clamp(56px, 9vw, 120px);
    line-height: 0.8;
    font-weight: 700;
    color: var(--ado-text-card-num);
    letter-spacing: -0.04em;
    pointer-events: none;
    z-index: 1;
}
#ado-who .ado-container::after      { content: '01'; }
#ado-types .ado-container::after    { content: '03'; }
#ado-benefits .ado-container::after { content: '04'; }
#ado-pricing .ado-container::after  { content: '05'; }
#ado-expect .ado-container::after   { content: '06'; }
#ado-why .ado-container::after      { content: '07'; }

/* Renumber existing Procedure (was 01) → 02
   and Real Results (.ado-card--full, was 02) → 08 to keep page-order sequence */
#ado-procedure .ado-card__number,
.ado-card--full .ado-card__number {
    font-size: 0 !important;
}
#ado-procedure .ado-card__number::before {
    content: '02';
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 700;
    color: var(--ado-text-card-num);
    letter-spacing: -0.04em;
    line-height: 0.8;
}
.ado-card--full .ado-card__number::before {
    content: '08';
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 700;
    color: var(--ado-text-card-num);
    letter-spacing: -0.04em;
    line-height: 0.8;
}
/* Blog single uses .ado-card--full too, but its watermark is "01" not "08".
   Restore the original number text and disable the ::before override. */
.adental-blog-single .ado-card--full .ado-card__number {
    font-size: clamp(56px, 9vw, 120px);
}
.adental-blog-single .ado-card--full .ado-card__number::before {
    content: none;
}

/* — WHO IS FOR — bullets become 2-col mini-cards with gradient check icons — */
#ado-who .ado-bullets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}
#ado-who .ado-bullet {
    background: var(--ado-bg-card);
    border: 1px solid var(--ado-border);
    border-radius: var(--ado-radius);
    padding: 16px 20px;
    transition: border-color var(--ado-transition), box-shadow var(--ado-transition);
}
#ado-who .ado-bullet:hover {
    border-color: var(--ado-primary-soft);
    box-shadow: var(--ado-shadow-sm);
}
#ado-who .ado-bullet__check {
    background: linear-gradient(135deg, var(--ado-primary), var(--ado-primary-light));
    color: #fff;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(137, 86, 255, 0.25);
}

/* — TYPES & OPTIONS — bigger cards, hover lift, numbered indicator — */

/* — TYPES & OPTIONS — bigger cards, hover lift, numbered indicator — */
.ado-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    counter-reset: ado-type-counter;
}
.ado-types__item {
    background: var(--ado-bg-card);
    border: 1px solid var(--ado-border);
    border-radius: var(--ado-radius-lg);
    padding: 36px 32px;
    box-shadow: var(--ado-shadow-sm);
    position: relative;
    overflow: hidden;
    counter-increment: ado-type-counter;
    transition: transform var(--ado-transition), box-shadow var(--ado-transition), border-color var(--ado-transition);
}
.ado-types__item::before {
    content: counter(ado-type-counter, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 36px;
    font-weight: 700;
    color: var(--ado-primary);
    opacity: 0.12;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ado-types__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--ado-shadow-md);
    border-color: var(--ado-primary-soft);
}
.ado-types__item h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--ado-text);
    padding-right: 60px;
}
.ado-types__item p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--ado-text-soft);
}

/* — FEATURE LIST (Benefits + Why Choose) — 2-col cards with gradient icons — */
.ado-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.ado-feature-list__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--ado-bg-card);
    border: 1px solid var(--ado-border);
    border-radius: var(--ado-radius-lg);
    padding: 28px 24px;
    transition: transform var(--ado-transition), box-shadow var(--ado-transition), border-color var(--ado-transition);
}
.ado-feature-list__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--ado-shadow-md);
    border-color: var(--ado-primary-soft);
}
.ado-feature-list__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    color: var(--ado-text);
}
.ado-feature-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--ado-primary) 0%, var(--ado-primary-light) 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(137, 86, 255, 0.30);
}
.ado-feature-list__icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    color: #fff;
    stroke-width: 2.5;
}
.ado-feature-list__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ado-text-soft);
    margin: 0;
}

/* — PRICING — fancy insurance highlight — */
.ado-pricing__content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ado-text-soft);
    margin-bottom: 32px;
}
.ado-pricing__content p { margin: 0 0 16px; }
.ado-pricing__content p:last-child { margin-bottom: 0; }

.ado-pricing__insurance {
    background: linear-gradient(135deg, #F0E9FF 0%, #E5D8FF 100%);
    border: 1px solid var(--ado-primary-soft);
    padding: 32px;
    border-radius: var(--ado-radius-lg);
    box-shadow: var(--ado-shadow-sm);
    position: relative;
    margin-top: 16px;
    margin-bottom: 32px;
}
.ado-pricing__insurance h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 16px;
    color: var(--ado-text);
}
.ado-pricing__cta { margin-top: 32px; }

/* — STEPS (What to Expect) — card-style with shadow, big gradient numbers — */
.ado-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.ado-steps__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: flex-start;
    background: var(--ado-bg-card);
    border: 1px solid var(--ado-border);
    border-radius: var(--ado-radius-lg);
    padding: 24px;
    box-shadow: var(--ado-shadow-sm);
    transition: transform var(--ado-transition), box-shadow var(--ado-transition);
}
.ado-steps__item:hover {
    transform: translateX(4px);
    box-shadow: var(--ado-shadow-md);
}
.ado-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--ado-radius-lg);
    background: linear-gradient(135deg, var(--ado-primary) 0%, var(--ado-primary-light) 100%);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 20px rgba(137, 86, 255, 0.30);
}
.ado-steps__content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 12px;
    color: var(--ado-text);
}
.ado-steps__content p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--ado-text-soft);
}

/* — RESPONSIVE — */
@media (max-width: 1240px) {
    /* Pull section cards in from screen edges so they don't stick to borders */
    #ado-who .ado-container,
    #ado-types .ado-container,
    #ado-benefits .ado-container,
    #ado-pricing .ado-container,
    #ado-expect .ado-container,
    #ado-why .ado-container {
        max-width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 1024px) {
    .ado-types,
    .ado-feature-list,
    #ado-who .ado-bullets {
        grid-template-columns: 1fr;
    }
    #ado-who .ado-container::after,
    #ado-types .ado-container::after,
    #ado-benefits .ado-container::after,
    #ado-pricing .ado-container::after,
    #ado-expect .ado-container::after,
    #ado-why .ado-container::after {
        font-size: 72px;
        top: 20px;
        right: 24px;
    }
}
@media (max-width: 768px) {
    #ado-who .ado-container,
    #ado-types .ado-container,
    #ado-benefits .ado-container,
    #ado-pricing .ado-container,
    #ado-expect .ado-container,
    #ado-why .ado-container {
        max-width: calc(100% - 32px);
    }
    .ado-steps__item {
        grid-template-columns: 60px 1fr;
        gap: 16px;
        padding: 20px;
    }
    .ado-steps__num {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    .ado-types__item { padding: 28px 24px; }
    .ado-feature-list__item { padding: 24px 20px; }
    .ado-pricing__insurance { padding: 24px; }
    #ado-who .ado-container::after,
    #ado-types .ado-container::after,
    #ado-benefits .ado-container::after,
    #ado-pricing .ado-container::after,
    #ado-expect .ado-container::after,
    #ado-why .ado-container::after {
        font-size: 56px;
        top: 16px;
        right: 20px;
    }
}
@media (max-width: 480px) {
    #ado-who .ado-container,
    #ado-types .ado-container,
    #ado-benefits .ado-container,
    #ado-pricing .ado-container,
    #ado-expect .ado-container,
    #ado-why .ado-container {
        max-width: calc(100% - 24px);
        padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px);
        border-radius: var(--ado-radius-lg);
    }
    .ado-steps__item {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .ado-steps__num {
        width: 56px;
        height: 56px;
        font-size: 24px;
        border-radius: var(--ado-radius);
    }
}

/* =============================================================
 * Blog Single Post template (v1.7.0)
 *
 * Applies service-page design language to blog posts:
 *   - Deep-violet hero with title left, featured image card right
 *   - Full-width white content card with styled typography
 *   - Author box, CTA, related posts added via the_content filter
 * ============================================================= */

.ado-blog-single {
    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-blog-single * { box-sizing: border-box; }
.ado-blog-single img { max-width: 100%; height: auto; display: block; }

/* Hero section — EXACT same gradient as .ado-hero (service hero).
   Bottom padding is intentionally larger so the white content card
   below can overlap UP into the hero, like the service stats float
   up. The overlap is set on .ado-blog-content via negative margin.
   Top padding is generous so the breadcrumb has clear breathing room
   from the sticky header above. */
.ado-blog-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(120px, 12vw, 180px) 0 clamp(160px, 17vw, 220px);
    color: #fff;
    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%);
}

.ado-blog-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-blog-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 60px);
    /* Default cells align to start so the text column sits at the top
       of the hero. The image stays vertically centered via its own
       align-self below — gives a magazine-style asymmetry rather than
       a stiff dead-centered alignment. */
    align-items: start;
    position: relative;
    z-index: 2;
}
.ado-blog-hero__media {
    align-self: center;
}

.ado-blog-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: #fff;
}
/* Meta line gets a slightly larger gap so it doesn't feel glued to the H1 */
.ado-blog-hero__meta {
    margin-top: 8px;
}

.ado-blog-hero__h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
    color: #fff !important;
}
/* Italic violet emphasis on the last part of the H1, matching the
   service hero pattern (e.g. "Modern dentures, made to feel like your own.") */
.ado-blog-hero__h1 em,
.ado-blog-hero__h1 .ado-h1__emph {
    font-style: italic;
    font-weight: 700;
    color: var(--ado-primary-light) !important;
    display: inline;
}

/* Force pill to its content width on the dark hero (fix UICore stretching) */
.ado-blog-hero__text .ado-pill {
    align-self: flex-start;
}

/* Breadcrumb on dark hero — force white text (overrides theme) */
.ado-blog-hero .ado-breadcrumb,
.ado-blog-hero .ado-breadcrumb a,
.ado-blog-hero .ado-breadcrumb span {
    color: rgba(255, 255, 255, 0.78) !important;
}
.ado-blog-hero .ado-breadcrumb a:hover {
    color: #fff !important;
}

/* — BLOG CONTENT: overlap into hero (like service stats), tighter card padding — */
.ado-blog-content {
    /* Negative top margin so the white content card overlaps UP into
       the bottom of the dark hero, mirroring how service stat cards
       float up over the service hero. */
    margin-top: clamp(-130px, -11vw, -90px);
    position: relative;
    z-index: 3;
    padding-top: 0;
}
/* The .ado-card--full already has 64px padding; .ado-card__body's own
   padding was stacking on top of it, pushing the H2 way too low. Zero
   out the body padding for blog only — keep the outer card padding. */
.ado-blog-content .ado-card__body {
    padding: 0;
}

/* Whiten the LOGO ONLY while the sticky header is currently
   overlapping a dark hero section (`.ado-hero` or `.ado-blog-hero`).
   The `.is-on-dark` body class is toggled by `assets/js/header-logo.js`
   based on geometric overlap of the nav midpoint with each dark
   section.  Once the user scrolls past, the class is removed and the
   logo falls back to its normal color so it stays readable on the
   light lavender page background.

   We DO NOT whiten the nav links or the Contact button — they live
   inside a white pill container that already provides high contrast
   on the dark hero.  Whitening their text would make them invisible
   inside the white