/* ==========================================================================
   Avira 2026 — Site-wide refinement layer (site-refinements.css)
   --------------------------------------------------------------------------
   Rolls the refinements developed for the 4 new service pages (see
   service-pages.css / .cv-svc) out to EVERY OTHER page-template family:
   consistent responsive gutters (no edge-touch), fluid headings that beat the
   Elementor global kit, brand-dark hero H1, 1.6 prose leading + bounded
   measure, overflow safety, and prefers-reduced-motion.

   Each block below is scoped to its family wrapper (.cv-page:not(.cv-svc),
   .sd-page, .pv-page, .iro-page, .dl-page/.sa-page) so nothing leaks across
   families or onto theme / Elementor / plugin markup. Authored + adversarially
   verified per family. Loads AFTER every family stylesheet.

   The 4 new service pages keep using service-pages.css (.cv-svc) exclusively —
   the cv-others block excludes them via :not(.cv-svc).
   ========================================================================== */


/* ==========================================================================
   GLOBAL — carousel adapts slides-per-view to the screen, 1-up on phones
   --------------------------------------------------------------------------
   The shared gallery carousel (.avira-gallery .avira-carousel__slide) was
   locked to 3-up at every width, overriding the theme's responsive rules, so
   on phones it showed 3 cramped images. Unlock it (3 → 2 → 1) and make both
   the gallery and services carousels drop to 1-up on phones, consistently.
   This targets the shared avira- component so it applies to ALL pages.
   ========================================================================== */
@media (max-width: 768px) {
    .avira-gallery .avira-carousel__slide {
        flex: 0 0 calc((100% - 20px) / 2);   /* gallery: 2 per view */
    }
}
@media (max-width: 560px) {
    .avira-gallery .avira-carousel__slide,
    .avira-services .avira-carousel__slide {
        flex: 0 0 100%;                        /* gallery + services: 1 per view */
    }
}

/* ==========================================================================
   GLOBAL — risks list: gap between the lead-in line and the first item
   --------------------------------------------------------------------------
   The lead-in ("See ... risks ...:") now sits atop each risk <ul>. It's a <p>,
   whose bottom margin the Elementor kit zeroes (.elementor-kit-35 p {
   margin-block-end:0 }), so the gap is placed on the <ul>'s margin-top instead
   — untouched by that `p` rule. One rule per family, each namespaced to its
   wrapper so nothing leaks; mirrors `.cv-svc .cv-risk-list` in service-pages.css.
   ========================================================================== */
.cv-page:not(.cv-svc) .cv-risk-list {
    margin-top: 1.5rem;
}
.pv-page .pv-risk-list {
    margin-top: 1.5rem;
}
.iro-page .iro-risk-list {
    margin-top: 1.5rem;
}
.sd-page .sd-risk-list {
    margin-top: 1.5rem;
}


/* ==========================================================================
   Avira 2026 — "cv-others" family refinement layer
   --------------------------------------------------------------------------
   Targets the OTHER cv- service templates (composite-veneers, invisalign,
   all-on-x, single-implant, childrens-dentistry). Every rule is scoped to
   `.cv-page:not(.cv-svc)` so it can NEVER leak onto the 4 new cv-svc pages
   (already refined by service-pages.css) or onto theme/Elementor markup.
   Mirrors service-pages.css: load-bearing props (gutters, heading size/
   colour) use `!important` to beat the uncontrolled Elementor global kit
   (.elementor-kit-35 h1/h2/h3) and the base body-scoped rules, while staying
   namespaced so the !important cannot escape this family.
   NOTE: the comparison in every template that has one is rendered with
   <table> markup, so NO `.cv-comparison__tables { gap }` is added here — that
   would double the spacing the tables already ship with.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive gutters — content must never touch the viewport edge
   --------------------------------------------------------------------------
   composite-veneers.css sets --section-padding-x: 0vw at desktop, so sections
   ran edge-to-edge between ~1025–1440px. Redefine the token AND set the
   container padding directly with a fluid, bounded gutter (20px → 64px).      */
.cv-page:not(.cv-svc) {
    --section-padding-x: clamp(1.25rem, 4vw, 4rem);
}
.cv-page:not(.cv-svc) .cv-container {
    padding-inline: clamp(1.25rem, 4vw, 4rem) !important;
}

/* --------------------------------------------------------------------------
   2. Fluid headings the Elementor kit cannot override
   --------------------------------------------------------------------------
   clamp() sizes copied from service-pages.css so type scales smoothly. The
   `.cv-page:not(.cv-svc)` scope + `!important` guarantees the intended scale
   wins over the global kit. Item 2 (hero H1 colour) folded in here.           */
.cv-page:not(.cv-svc) .cv-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem) !important;    /* 40 → 64px */
    line-height: 1.12 !important;
    color: var(--brand-dark) !important;
}
.cv-page:not(.cv-svc) .cv-split__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) !important; /* 28 → 40px */
    line-height: 1.2 !important;
    color: var(--brand-dark);
}
.cv-page:not(.cv-svc) .cv-split__subtitle {
    font-family: var(--ff-heading);
    font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem) !important; /* 22 → 30px */
    line-height: 1.25 !important;
    color: var(--brand-dark);
}
.cv-page:not(.cv-svc) .cv-faq__heading,
.cv-page:not(.cv-svc) .cv-gallery__title,
.cv-page:not(.cv-svc) .cv-services__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;   /* 28 → 48px */
    line-height: 1.15 !important;
}
.cv-page:not(.cv-svc) .cv-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem) !important; /* 28 → 42px */
    line-height: 1.18 !important;
    color: var(--brand-white);
}
.cv-page:not(.cv-svc) .cv-timeline__title,
.cv-page:not(.cv-svc) .cv-benefit-card__title,
.cv-page:not(.cv-svc) .cv-why-card__title {
    font-family: var(--ff-heading);
}

/* --------------------------------------------------------------------------
   3. Rich-text prose — comfortable leading + bounded measure
   --------------------------------------------------------------------------
   Body copy shipped at line-height 1.2–1.4 (tight). Bump long-form prose to
   1.6 and cap the measure at ~68ch (45–75ch readable sweet spot). Headings
   keep their tight leading from section 2.                                    */
.cv-page:not(.cv-svc) .cv-hero__desc,
.cv-page:not(.cv-svc) .cv-hero__subdesc,
.cv-page:not(.cv-svc) .cv-split__text,
.cv-page:not(.cv-svc) .cv-benefit-card__text,
.cv-page:not(.cv-svc) .cv-why-card__text,
.cv-page:not(.cv-svc) .cv-timeline__text p,
.cv-page:not(.cv-svc) .cv-faq__answer p,
.cv-page:not(.cv-svc) .cv-checklist__text,
.cv-page:not(.cv-svc) .cv-cta__text,
.cv-page:not(.cv-svc) .cv-candidate__note {
    line-height: 1.6;
}
.cv-page:not(.cv-svc) .cv-split__text {
    max-width: min(100%, 68ch);
}
.cv-page:not(.cv-svc) .cv-hero__subdesc {
    max-width: min(100%, 62ch);
}
.cv-page:not(.cv-svc) .cv-cta__text {
    max-width: min(100%, 66ch);
}

/* --------------------------------------------------------------------------
   4. Overflow-proof layout — let grid children shrink, never blow out
   --------------------------------------------------------------------------
   min-width:0 on every existing 2-col grid child + the sticky process cols +
   the oral-care columns. The comparison here uses real <table> markup, so also
   fix the table layout so long cell content can't force horizontal overflow.  */
.cv-page:not(.cv-svc) .cv-hero__text,
.cv-page:not(.cv-svc) .cv-split__content,
.cv-page:not(.cv-svc) .cv-comparison__intro,
.cv-page:not(.cv-svc) .cv-comparison__tables,
.cv-page:not(.cv-svc) .cv-process__left,
.cv-page:not(.cv-svc) .cv-process__right,
.cv-page:not(.cv-svc) .cv-oralcare__inner > * {
    min-width: 0;
}
.cv-page:not(.cv-svc) .cv-comparison table {
    table-layout: fixed;
    width: 100%;
}
.cv-page:not(.cv-svc) .cv-comparison td {
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   5. Small-screen gutters (match service-pages.css)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .cv-page:not(.cv-svc) {
        --section-padding-x: clamp(1.25rem, 5vw, 3rem);
    }
    .cv-page:not(.cv-svc) .cv-container {
        padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
    }
}

/* --------------------------------------------------------------------------
   6. Respect prefers-reduced-motion (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Stop the infinite marquee and reveal fade-in content immediately for users
   who ask for reduced motion (also keeps content visible if the reveal JS
   never runs).                                                                */
@media (prefers-reduced-motion: reduce) {
    .cv-page:not(.cv-svc) .cv-marquee-track {
        animation: none !important;
    }
    .cv-page:not(.cv-svc) .cv-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   Sleep Dentistry (sd-) — refinement layer
   --------------------------------------------------------------------------
   Mirrors service-pages.css (the .cv-svc canonical) for the Sleep Dentistry
   template. Every rule is scoped to `.sd-page` so it never leaks to the
   theme/Elementor/plugins and always beats the Elementor global kit
   (.elementor-kit-35 h1/h2/h3) and the family's own `body .sd-*` rules.
   Load-bearing props (headings, gutters) use `!important` — the sanctioned way
   to override an uncontrolled third-party global kit we don't own.
   Comparison note: this family's comparison markup is <table>-based (and no
   comparison section is even rendered in this template), so NO flex `gap` is
   added — that rule is prose-only and would double table spacing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive gutters — content must never touch the viewport edge
   --------------------------------------------------------------------------
   sleep-dentistry.css sets --section-padding-x: 0 at desktop, so sections ran
   edge-to-edge between ~1025px and 1440px. Redefine the token AND set the
   container padding directly with a fluid, bounded gutter (min 20px). */
.sd-page {
    --section-padding-x: clamp(1.25rem, 4vw, 4rem);
}
.sd-page .sd-container {
    padding-inline: clamp(1.25rem, 4vw, 4rem) !important;
}

/* --------------------------------------------------------------------------
   2. Fluid headings the Elementor kit cannot override
   --------------------------------------------------------------------------
   Same clamp() scale as service-pages.css. `!important` + `.sd-page` scope
   guarantees the intended sizing wins without touching any other page. The H1
   hero colour is pinned to --brand-dark (#1A1A1A) here (requirement 2). */
.sd-page .sd-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem) !important;    /* 40 → 64px */
    line-height: 1.12 !important;
    color: var(--brand-dark) !important;
}
.sd-page .sd-split__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) !important; /* 28 → 40px */
    line-height: 1.2 !important;
    color: var(--brand-dark);
}
.sd-page .sd-split__subtitle {
    font-family: var(--ff-heading);
    font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem) !important; /* 22 → 30px */
    line-height: 1.25 !important;
    color: var(--brand-dark);
}
.sd-page .sd-faq__heading,
.sd-page .sd-gallery__title,
.sd-page .sd-services__title,
.sd-page .sd-services-grid__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;   /* 28 → 48px */
    line-height: 1.15 !important;
}
.sd-page .sd-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem) !important; /* 28 → 42px */
    line-height: 1.18 !important;
    color: var(--brand-white);
}
.sd-page .sd-timeline__title,
.sd-page .sd-benefit-card__title,
.sd-page .sd-why-card__title {
    font-family: var(--ff-heading);
}

/* --------------------------------------------------------------------------
   3. Rich-text prose — comfortable leading + bounded measure
   --------------------------------------------------------------------------
   Body copy shipped at 1.3–1.5 (tight). Bump long-form prose to 1.6 and cap
   the main split measure at ~68ch (45–75ch readable sweet spot). */
.sd-page .sd-hero__desc,
.sd-page .sd-hero__subdesc,
.sd-page .sd-split__text,
.sd-page .sd-services-grid__text,
.sd-page .sd-benefit-card__text,
.sd-page .sd-why-card__text,
.sd-page .sd-timeline__text p,
.sd-page .sd-faq__answer p,
.sd-page .sd-checklist__text,
.sd-page .sd-cta__text,
.sd-page .sd-candidate__note {
    line-height: 1.6;
}
.sd-page .sd-split__text {
    max-width: min(100%, 68ch);
}
.sd-page .sd-hero__subdesc {
    max-width: min(100%, 62ch);
}

/* --------------------------------------------------------------------------
   4. Overflow-proof layout — let grid children shrink, never blow out
   -------------------------------------------------------------------------- */
.sd-page .sd-hero__text,
.sd-page .sd-split__column,
.sd-page .sd-split__content,
.sd-page .sd-oralcare__inner > *,
.sd-page .sd-process__left {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   5. Small-screen gutters (≤ 1024px) — match service-pages.css
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sd-page {
        --section-padding-x: clamp(1.25rem, 5vw, 3rem);
    }
    .sd-page .sd-container {
        padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
    }
}

/* --------------------------------------------------------------------------
   6. Respect prefers-reduced-motion (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Stop the infinite marquee and reveal fade-in content immediately for users
   who ask for reduced motion (also keeps content visible if the reveal JS
   never runs). */
@media (prefers-reduced-motion: reduce) {
    .sd-page .sd-marquee-track {
        animation: none !important;
    }
    .sd-page .sd-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}



/* ==========================================================================
   Avira 2026 Porcelain Veneers (pv-) — refinement layer
   --------------------------------------------------------------------------
   Loaded AFTER porcelain-veneers.css. Every rule is scoped to `.pv-page`
   (the page wrapper) so it never leaks onto the parent theme / Elementor /
   plugin markup, and always wins over the Elementor global kit
   (.elementor-kit-35 h1/h2/h3) and the family's own `body`-scoped rules.
   Load-bearing props (heading sizes, gutters) use `!important` — the canonical
   way to override an uncontrolled third-party global kit; still namespaced to
   `.pv-page`, so it cannot affect anything off this template. The shared
   `avira-` gallery/services/stats carousels are handled separately and are
   NOT touched here.
   Sources: web.dev/learn/css, Every Layout, NN/g + WCAG 1.4.8/1.4.12
   (measure & leading), WCAG 2.3.3 (prefers-reduced-motion).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive gutters — content must never touch the viewport edge
   --------------------------------------------------------------------------
   porcelain-veneers.css sets --section-padding-x: 0 at desktop, so sections
   ran edge-to-edge between ~1025–1440px. Redefine the token (the wrapper class
   is doubled to out-specify the family's `body .pv-page` definition) AND set
   the container padding directly with a fluid, bounded gutter.
   Min 20px on phones → up to 64px on large screens.                           */
.pv-page.pv-page {
    --section-padding-x: clamp(1.25rem, 4vw, 4rem);
}
.pv-page .pv-container {
    padding-inline: clamp(1.25rem, 4vw, 4rem) !important;
}

/* --------------------------------------------------------------------------
   2. Fluid headings the Elementor kit cannot override (+ hero H1 colour)
   --------------------------------------------------------------------------
   Fluid clamp() sizes so type scales smoothly instead of jumping at
   breakpoints. `!important` + `.pv-page` scope guarantees the intended scale
   wins over .elementor-kit-35 h1/h2/h3 without touching any other page. The
   hero H1 is pinned to --brand-dark (#1A1A1A) so the kit cannot recolour it.  */
.pv-page .pv-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem) !important;    /* 40 → 64px */
    line-height: 1.12 !important;
    color: var(--brand-dark) !important;
}
.pv-page .pv-split__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) !important;  /* 28 → 40px */
    line-height: 1.2 !important;
    color: var(--brand-dark);
}
.pv-page .pv-split__subtitle {
    font-family: var(--ff-heading);
    font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem) !important; /* 22 → 30px */
    line-height: 1.25 !important;
    color: var(--brand-dark);
}
.pv-page .pv-faq__heading {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;    /* 28 → 48px */
    line-height: 1.15 !important;
}
.pv-page .pv-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem) !important; /* 28 → 42px */
    line-height: 1.18 !important;
    color: var(--brand-white);
}
.pv-page .pv-timeline__title,
.pv-page .pv-benefit-card__title,
.pv-page .pv-why-card__title {
    font-family: var(--ff-heading);
}

/* --------------------------------------------------------------------------
   3. Rich-text prose — comfortable leading + bounded measure
   --------------------------------------------------------------------------
   Body copy shipped at line-height 1.3–1.5 (tight). Bump long-form prose to
   1.6 for readability, and cap the main split measure at ~68ch (45–75ch is the
   readable sweet spot). Headings keep their tighter leading set above.        */
.pv-page .pv-hero__desc,
.pv-page .pv-hero__subdesc,
.pv-page .pv-split__text,
.pv-page .pv-benefit-card__text,
.pv-page .pv-why-card__text,
.pv-page .pv-timeline__text p,
.pv-page .pv-faq__answer p,
.pv-page .pv-checklist__text,
.pv-page .pv-cta__text,
.pv-page .pv-candidate__note {
    line-height: 1.6;
}
.pv-page .pv-split__text {
    max-width: min(100%, 68ch);
}

/* --------------------------------------------------------------------------
   4. Overflow-proof layout — let grid children shrink, never blow out
   --------------------------------------------------------------------------
   (No comparison-gap rule: this family's "comparison" section renders as
   .pv-benefit-card cards in a grid, not touching <p> paragraphs or a <table>,
   so a gap would only double the existing card spacing.)                      */
.pv-page .pv-hero__text,
.pv-page .pv-split__content,
.pv-page .pv-comparison__intro,
.pv-page .pv-process__left,
.pv-page .pv-process__right,
.pv-page .pv-oralcare__inner > * {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   5. Small-screen gutters (≤1024px) — keep the ≥20px floor
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pv-page.pv-page {
        --section-padding-x: clamp(1.25rem, 5vw, 3rem);
    }
    .pv-page .pv-container {
        padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
    }
}

/* --------------------------------------------------------------------------
   6. Respect prefers-reduced-motion (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Stop the infinite marquee and reveal fade-in content immediately for users
   who ask for reduced motion (also keeps content visible if the reveal JS
   never runs).                                                                */
@media (prefers-reduced-motion: reduce) {
    .pv-page .pv-marquee-track {
        animation: none !important;
    }
    .pv-page .pv-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   Avira 2026 — Implant-Retained Overdentures (iro-) refinement layer
   --------------------------------------------------------------------------
   Loaded AFTER implant-overdentures.css. Every rule is scoped to `.iro-page`
   so it never leaks onto the parent theme, Elementor, or plugin markup, yet
   still wins over the Elementor global kit (.elementor-kit-35 h1 …). The
   load-bearing props (heading sizes, gutters, hero colour) use `!important`
   — the canonical way to override an uncontrolled third-party global kit —
   but stay namespaced to `.iro-page`, so they cannot affect anything else.
   Mirrors css/service-pages.css adapted to the iro- prefix.
   NOTE: the comparison section renders as <table> markup (labels + tables),
   NOT touching <p> paragraphs, so NO flex-gap is added (that would double the
   spacing). The gallery/services carousels render shared avira- markup and are
   handled separately, so their iro- title classes are intentionally not used.
   Sources: web.dev/learn/css, Every Layout (gutters), NN/g + WCAG 1.4.8/1.4.12
   (measure & leading), WCAG 2.3.3 (prefers-reduced-motion). padding-inline,
   clamp(), min() are CSS Baseline "Widely available".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive gutters — content must never touch the viewport edge
   --------------------------------------------------------------------------
   implant-overdentures.css sets --section-padding-x: 0 at desktop, so between
   ~1025px and 1440px every section ran edge-to-edge. Redefine the token (the
   doubled class beats the base `body .iro-page`) AND set the container padding
   directly with a fluid, bounded gutter. Min 20px on phones → 64px on large. */
.iro-page.iro-page {
    --section-padding-x: clamp(1.25rem, 4vw, 4rem);
}
.iro-page .iro-container {
    padding-inline: clamp(1.25rem, 4vw, 4rem) !important;
}

/* --------------------------------------------------------------------------
   2 + 3. Fluid headings the Elementor kit cannot override
   --------------------------------------------------------------------------
   Fluid (clamp) sizes scale smoothly instead of jumping at breakpoints.
   `!important` + `.iro-page` scope guarantees the intended scale (and the
   brand-dark hero colour, --brand-dark: #1A1A1A) win over the global kit
   without touching any other page. Only heading classes rendered by this
   template are included.                                                     */
.iro-page .iro-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem) !important;    /* 40 → 64px */
    line-height: 1.12 !important;
    color: var(--brand-dark) !important;
}
.iro-page .iro-split__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) !important; /* 28 → 40px */
    line-height: 1.2 !important;
    color: var(--brand-dark);
}
.iro-page .iro-faq__heading {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;   /* 28 → 48px */
    line-height: 1.15 !important;
}
.iro-page .iro-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem) !important; /* 28 → 42px */
    line-height: 1.18 !important;
    color: var(--brand-white);
}
.iro-page .iro-timeline__title,
.iro-page .iro-benefit-card__title,
.iro-page .iro-why-card__title {
    font-family: var(--ff-heading);
}

/* --------------------------------------------------------------------------
   4. Rich-text prose — comfortable leading + bounded measure
   --------------------------------------------------------------------------
   Base body copy ran at line-height 1.3–1.5 (tight). Bump long-form prose to
   1.6 for readability, and cap the measure (45–75ch is the readable range).  */
.iro-page .iro-hero__desc,
.iro-page .iro-hero__subdesc,
.iro-page .iro-split__text,
.iro-page .iro-benefit-card__text,
.iro-page .iro-why-card__text,
.iro-page .iro-timeline__text p,
.iro-page .iro-faq__answer p,
.iro-page .iro-checklist__text,
.iro-page .iro-cta__text,
.iro-page .iro-candidate__note {
    line-height: 1.6;
}
.iro-page .iro-split__text {
    max-width: min(100%, 68ch);
}
.iro-page .iro-hero__subdesc {
    max-width: min(100%, 62ch);
}
.iro-page .iro-cta__text {
    max-width: min(100%, 66ch);
    margin-inline: auto; /* keep the centred CTA copy centred after capping */
}

/* --------------------------------------------------------------------------
   5. Comparison — renders as <table> markup, so NO flex-gap is added.
      The .iro-table-label <p> headings already space the tables via their own
      margins; a gap here would double the spacing.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Overflow-proof layout — let grid children shrink, never blow out
   -------------------------------------------------------------------------- */
.iro-page .iro-hero__text,
.iro-page .iro-split__content,
.iro-page .iro-comparison__intro,
.iro-page .iro-comparison__tables,
.iro-page .iro-process__left,
.iro-page .iro-process__right,
.iro-page .iro-oralcare__inner > * {
    min-width: 0;
}
.iro-page .iro-comparison__tables td {
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   7. Small-screen gutters (mirror service-pages.css)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .iro-page.iro-page {
        --section-padding-x: clamp(1.25rem, 5vw, 3rem);
    }
    .iro-page .iro-container {
        padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
    }
}

/* --------------------------------------------------------------------------
   8. Respect prefers-reduced-motion (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Stop the infinite marquee and reveal fade-in content immediately for users
   who ask for reduced motion (also keeps content visible if the reveal JS
   never runs).                                                               */
@media (prefers-reduced-motion: reduce) {
    .iro-page .iro-marquee-track {
        animation: none !important;
    }
    .iro-page .iro-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   Avira 2026 Dentist Location + Service Areas — refinement layer
   --------------------------------------------------------------------------
   Loaded AFTER dentist-location.css and service-areas.css, ONLY on the
   location templates. Every rule is scoped to `.dl-page` (suburb location
   pages) or `.sa-page` (the Service Areas directory, whose wrapper carries
   BOTH `.dl-page` and `.sa-page`) so that it:
     • never leaks onto the parent theme, Elementor, or plugin markup, and
     • always wins over the Elementor global kit (.elementor-kit-35 h1 …).
   Load-bearing properties (heading sizes, gutters) use `!important` — the
   canonical way to override an uncontrolled third-party global kit and the
   family's own `body`-scoped base rules. Everything is namespaced, so the
   `!important` here cannot affect anything outside these templates.
   This family already ships generous 4–7vw gutters (no 0-bug), so gutters use
   the wider clamp(1.25rem, 5vw, 4.5rem) to preserve the look while still
   guaranteeing a >=20px minimum. There is no comparison/timeline/carousel
   markup here, so those canonical steps are intentionally omitted.
   Rationale sources: web.dev/learn/css, Every Layout (gutters), NN/g + WCAG
   1.4.8/1.4.12 (prose measure & line-height), WCAG 2.3.3 (reduced motion).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Responsive gutters — content must never touch the viewport edge
   --------------------------------------------------------------------------
   The base sets a fluid vw gutter that dips below 20px at some mid widths.
   Redefine the token AND pin the container padding with a bounded gutter so
   there is always a >=20px inline edge. `.dl-container` is the only container
   in this family (Service Areas reuses it, incl. `.sa-hero__inner`).         */
.dl-page,
.sa-page {
    --section-padding-x: clamp(1.25rem, 5vw, 4.5rem);
}
.dl-page .dl-container,
.sa-page .dl-container {
    padding-inline: clamp(1.25rem, 5vw, 4.5rem) !important;
}

/* --------------------------------------------------------------------------
   2. Fluid headings the Elementor kit cannot override
   --------------------------------------------------------------------------
   Same clamp() scale as the service pages. `!important` + wrapper scope
   guarantees the intended sizes beat the global kit and the base media
   queries without touching any other page.                                  */

/* Hero display titles (40 → 64px). Size both; colour only the light-bg one. */
.dl-page .dl-hero__title,
.sa-page .sa-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem) !important;   /* 40 → 64px */
    line-height: 1.12 !important;
}
/* Location hero <h1> is washed out at 65% black on cream — pin to brand-dark.
   NOTE: `.sa-hero__title` is intentionally white on the dark-green hero, so it
   is deliberately NOT recoloured (brand-dark there would fail contrast).      */
.dl-page .dl-hero__title {
    color: var(--brand-dark) !important;
}

/* Split subsection title (28 → 40px) */
.dl-page .dl-split__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) !important; /* 28 → 40px */
    line-height: 1.2 !important;
    color: var(--brand-dark);
}

/* Big section titles (28 → 48px) */
.dl-page .dl-tiles__title,
.dl-page .dl-empathy__title,
.dl-page .dl-why__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;   /* 28 → 48px */
    line-height: 1.15 !important;
}
/* Video/about section title shares the scale but keeps its Domine face. */
.dl-page .dl-video__title {
    font-family: 'Domine', var(--ff-heading);
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem) !important;   /* 28 → 48px */
    line-height: 1.2 !important;
}

/* Final-CTA title (28 → 42px). Used by suburb pages AND the Service Areas CTA
   (that wrapper also carries `.dl-page`). Colour left as base (#444 on white). */
.dl-page .dl-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem) !important; /* 28 → 42px */
    line-height: 1.18 !important;
}

/* --------------------------------------------------------------------------
   3. Rich-text prose — comfortable leading + bounded measure
   --------------------------------------------------------------------------
   Bump long-form body copy from the base 1.3–1.5 to 1.6. Where the text sits
   in child <p> elements, target the <p> too so the kit's `p` line-height can't
   win. Cap the main split copy at ~68ch (45–75ch readable sweet spot).       */
.dl-page .dl-hero__desc,
.dl-page .dl-hero__subdesc,
.dl-page .dl-split__text,
.dl-page .dl-split__text p,
.dl-page .dl-video__text,
.dl-page .dl-video__text p,
.dl-page .dl-tiles__subtitle,
.dl-page .dl-tile__text,
.dl-page .dl-empathy__step-text,
.dl-page .dl-why-card__text,
.dl-page .dl-cta__text,
.dl-page .dl-cta__text p,
.sa-page .sa-hero__subtitle,
.sa-page .sa-empty {
    line-height: 1.6;
}
.dl-page .dl-split__text {
    max-width: min(100%, 68ch);
}

/* --------------------------------------------------------------------------
   4. Overflow-proof layout — let grid/flex children shrink, never blow out
   -------------------------------------------------------------------------- */
.dl-page .dl-hero__text,
.dl-page .dl-hero__map,
.dl-page .dl-split__content,
.dl-page .dl-video__content,
.dl-page .dl-video__player,
.dl-page .dl-empathy__step-content,
.dl-page .dl-tile,
.dl-page .dl-why-card,
.sa-page .sa-area-link {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   5. Small-screen gutter refinement (<=1024px), matching service-pages.css
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .dl-page,
    .sa-page {
        --section-padding-x: clamp(1.25rem, 5vw, 3rem);
    }
    .dl-page .dl-container,
    .sa-page .dl-container {
        padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
    }
}

/* --------------------------------------------------------------------------
   6. Respect prefers-reduced-motion (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Stop the infinite marquee and the pulsing play button, and reveal fade-in
   content immediately (also keeps content visible if the reveal JS never
   runs). `.dl-fade-in` is used on both templates (the Service Areas wrapper
   carries `.dl-page`), so scoping to `.dl-page` covers both.                 */
@media (prefers-reduced-motion: reduce) {
    .dl-page .dl-marquee-track {
        animation: none !important;
    }
    .dl-page .dl-video__play {
        animation: none !important;
    }
    .dl-page .dl-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}