/* =============================================================================
   Style4 overrides — dentist visual identity (Phase B: tokens + chrome)

   Loaded AFTER style1's base CSS via STYLE_CSS_BUNDLES["style4"] in
   platform/app.py. Tenant colors flow through CSS variables seeded by
   bootstrap_plan (STYLE4_DEFAULTS: primary teal #0A5D80 / secondary navy
   #242B57 / accent mid-teal #176E94, PIL-measured + AA-verified).

   Specificity strategy: EVERY rule is scoped to `body.style-style4 ...` so
   style1/style2/style3 are never contaminated. `!important` is used ONLY where
   a base rule carries `!important` (audited) or where nav/chrome visibility is
   critical — not gratuitously.

   Phase B scope = TYPOGRAPHY (Poppins/Open Sans) + CHROME (navy topbar/header/
   nav) + hero heading (navy, sized) + inner page-banner (teal title, un-clip,
   LIGHT overlay). Section layouts/colors come in Phase C/D.

   AMENDMENT-1 (2026-06-10, user-approved, grab-faithful): hero/banner are
   DARK-ON-LIGHT, NOT white-on-navy-scrim. Hero = NAVY Poppins heading + LIGHT
   (white->transparent) overlay. Page-banner = TEAL Poppins title bottom-left +
   always-on LIGHT overlay so dark text stays AA on any admin image; #5F9AB5
   fallback bg. NO navy scrims. AA gate = effective composite (overlay over bg):
   teal title >=4.5 (raw teal-on-#5F9AB5 = 2.43 FAIL -> overlay@~0.88 = 6.4 PASS);
   navy hero = 4.53 raw, 11.66 over overlay.

   FLAGGED DEVIATIONS (for Cowork/user verify):
   - D7 footer (Phase B.1 fix): the live footer is TEAL, not navy. The Phase-B
     PRE-PROBE read style.css only (L1264/1265 set .footer/.footer-simple to
     var(--secondary)) and wrongly concluded "already navy" -- but base.html injects
     an inline <style> `footer.footer{background-color:var(--primary)!important}`
     (L323, specificity 0,1,1) that beats style.css's .footer (0,1,0). Scoped
     override added below: body.style-style4 footer.footer (0,2,2) wins.
   - Active-nav underline: dispatch said var(--accent), but #176E94 on navy =
     ~2.1:1 (fails the >=3.0 non-text floor; a 2px underline gets no overlay). The
     base .nav__link--active + ::after light-teal rgb(126,200,200) passes ~6.7:1
     on navy AND matches the grab, so it is KEPT (not overridden). See AA table.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600&display=swap');

/* ---------- TYPE: body = Open Sans 16/1.6 ----------
   (Body color is left to the existing cascade in Phase B; per-section dark/light
   text is a Phase C concern.) */
body.style-style4 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- TYPE: headings = Poppins 600 UPPERCASE letter-spaced ----------
   Enumerated from the heading classes style1's partials actually render. The
   base style1 heading rules (style.css L1209/1216/1227/1235) are
   body.style-style1-scoped, so they do NOT reach style4 -> no !important needed
   here. EXCEPTIONS handled below: .why-choose__heading (style.css:1283) and
   .select-doctor__heading (style.css:1245) are UNSCOPED `!important` Cabin. */
body.style-style4 h1,
body.style-style4 h2,
body.style-style4 .hero__heading,
body.style-style4 .section-heading,
body.style-style4 .welcome__heading,
body.style-style4 .departments__heading,
body.style-style4 .latest-news__heading,
body.style-style4 .testimonial__heading,
body.style-style4 .newsletter__heading,
body.style-style4 .team__heading,
body.style-style4 .about__heading,
body.style-style4 .cmh-gallery-preview__heading,
body.style-style4 .cta-bar__heading,
body.style-style4 .page-banner__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* .why-choose__heading + .select-doctor__heading: beat the UNSCOPED !important
   Cabin pins (style.css:1283 / :1245). Keep base size/color (Phase C). */
body.style-style4 .why-choose__heading,
body.style-style4 .select-doctor__heading {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---------- CHROME: topbar -> navy ----------
   Base effective rule is style.css:1248 `.topbar{background:var(--accent)}`
   (later/unscoped, overrides L21). Scoped specificity wins; !important defensive
   over the unscoped base. Text/icons already #fff (style.css:56). */
body.style-style4 .topbar {
    background: var(--secondary) !important;
}

/* ---------- CHROME: header bar -> navy (base .header{background:#fff}) ---------- */
body.style-style4 .header {
    background: var(--secondary) !important;
}

/* ---------- CHROME: nav links -> white on navy ----------
   Base .nav__link = var(--primary) teal (invisible on navy). White INACTIVE
   links only; the active link keeps its base light-teal text + ::after underline
   (rgb(126,200,200)), which is visible on navy (~6.7:1) and matches the grab. */
body.style-style4 .nav__link {
    font-family: 'Open Sans', sans-serif;
}
body.style-style4 .nav__link:not(.nav__link--active) {
    color: #fff !important;
}
/* cart + hamburger icons -> white on navy (base both var(--primary) teal) */
body.style-style4 .header__cart {
    color: #fff !important;
}
body.style-style4 .header__hamburger {
    color: #fff;
}
body.style-style4 .header__hamburger span {
    background: #fff;
}
/* header CTA hover: base flips to var(--secondary) navy, which would vanish on
   the now-navy header -> use accent so it stays visible (white-on-accent 5.68). */
body.style-style4 .header__cta:hover {
    background: var(--accent) !important;
}

/* ---------- FOOTER (D7, Phase B.1): teal -> navy ----------
   The live footer is set TEAL by base.html's inline <style>
   `footer.footer{background-color:var(--primary)!important}` (L323, specificity
   0,1,1), NOT by style.css. This scoped rule (body.style-style4 footer.footer =
   0,2,2) beats it (both !important, higher specificity) -> navy var(--secondary).
   All style4 routes render <footer class="footer"> (none use .footer-simple), so
   one rule covers them; base.html is shared, so style1/2/3 footers are untouched. */
body.style-style4 footer.footer {
    background: var(--secondary) !important;
}

/* ---------- HOME HERO: navy Poppins heading + LIGHT readability overlay ----------
   style.css's .hero__heading sizing is body.style-style1-scoped only, so style4
   would fall back to the browser h2 default -> re-assert size (mirrors style1's
   46/36/28 breakpoints at style.css:406/897/932). Color = navy var(--secondary).
   The LIGHT overlay (white left->transparent) is style1's base technique; we
   re-declare it scoped so style4 owns it intentionally (AMENDMENT-1). Hero
   MARKUP/CTAs/layout stay Phase C. */
body.style-style4 .hero__heading {
    color: var(--secondary);
    font-size: 46px;
    line-height: 1.15;
}
body.style-style4 .hero__slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.60) 45%,
        rgba(255, 255, 255, 0.12) 80%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

/* ---------- INNER PAGE-BANNER: teal title bottom-left + always-on LIGHT overlay --
   1) #5F9AB5 fallback bg (admin image, when set, shows over it).
   2) Re-enable .page-banner__overlay (base display:none) as a LIGHT gradient,
      white concentrated bottom-left (where the title sits) -> composite lifts
      teal text from 2.43 (FAIL) to ~6.4 (PASS). Scoped: style1 banner UNCHANGED.
   3) Un-clip .page-banner__title (reverse style.css inner-pages L1566/L2752 clip,
      which is !important -> need !important on all 5 props), teal Poppins, sized.
   4) Title bottom-left (base .page-banner__content is centered). */
body.style-style4 .page-banner {
    background-color: #5F9AB5;
}
body.style-style4 .page-banner__overlay {
    display: block !important;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.62) 45%,
        rgba(255, 255, 255, 0.15) 100%
    );
    pointer-events: none;
    z-index: 0;
}
body.style-style4 .page-banner__content {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    text-align: left !important;
    /* #1 (tester round-1): align the title's left edge to the logo gutter. The
       header (.header__inner, base.html) is full-width with padding:0 16px, so
       the logo sits 16px from the viewport edge — match that (was 44px, which
       pushed the title ~28px right of the logo). Keep teal-on-light (no scrim
       change). Cowork live-DOM may fine-tune the px. */
    padding: 0 16px 26px 16px;
    z-index: 1;
}
body.style-style4 .page-banner__title {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    color: var(--primary);
    font-size: 64px;
    line-height: 1.1;
    margin: 0;
    /* #13/#17 (tester round-1): long page titles must wrap, not run off-screen. */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 90%;
}

/* ---------- RESPONSIVE: hero + banner title scale down ---------- */
@media (max-width: 897px) {
    body.style-style4 .hero__heading { font-size: 36px; }
    body.style-style4 .page-banner__title { font-size: 40px; }
    body.style-style4 .page-banner__content { padding: 0 16px 18px 16px; }
}
@media (max-width: 480px) {
    body.style-style4 .hero__heading { font-size: 28px; }
    body.style-style4 .page-banner__title { font-size: 30px; }
}

/* ===========================================================================
   PHASE C -- HOME section layouts (dentist pixel-pass, measured from the grab).
   All scoped body.style-style4. Section bg art uses absolute /static/ url() in
   THIS css file (CSP-safe; no inline style=""). Sizes follow the plan's measured
   cap-height system (banner ~64 / sections 30-34); Cowork live-DOM calibrates px.
   AA: see the PR AA table (white-on-navy 13.48, white-on-#3B4068 ~9.9, teal-on-gray
   5.61, white-on-teal 7.27, white-on-dark-overlay, navy-on-light overlay).
   ========================================================================== */

/* ---------- WELCOME -> navy full-width statement band ---------- */
body.style-style4 .welcome--statement {
    background: var(--secondary);
    padding: 56px 24px;
    text-align: center;
}
body.style-style4 .welcome--statement .welcome__inner {
    max-width: 880px;
    margin: 0 auto;
}
body.style-style4 .welcome--statement .welcome__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    font-size: 32px;
    margin: 0 0 14px;
}
body.style-style4 .welcome--statement .welcome__text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}
/* ===========================================================================
   TESTER ROUND-1 #4/#5/#6 — unified Style 4 button treatment (2026-06-18).
   ONE shape across all 8 CTAs: 4px radius (de-pills the old 20px ones), 2px
   solid stroke, outline-default (transparent bg, text = stroke color), fill on
   hover. Color follows the band so every pairing clears AA >=4.5:
     - LIGHT bands (hero, gallery-preview, newsletter) -> var(--primary) stroke
       -> hover fills primary with #fff text.
     - DARK bands (welcome navy, why-choose panel, dept-card primary strip,
       feature-tile/band overlays) -> #fff stroke -> hover fills #fff with
       var(--secondary) text.
   Two size tiers: standard CTAs use the hero proportion (18px 30px); compact
   card mini-links use 10px 22px so they don't balloon. Hero #4 resolves because
   both hero CTAs are now true 2px outlines (equal 64px), no transparent-border
   hack. Newsletter #6 padding folds into the standard tier.
   =========================================================================== */
body.style-style4 .welcome--statement .welcome__cta {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 18px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
body.style-style4 .welcome--statement .welcome__cta:hover { background: #fff; color: var(--secondary); }

/* ---------- DEPARTMENTS -> 3 image cards (photo + teal label strip) ---------- */
body.style-style4 .departments--cards {
    background: #fff;
    padding: 56px 24px;
}
body.style-style4 .departments--cards .departments__inner { max-width: 1200px; margin: 0 auto; }
body.style-style4 .dept-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
body.style-style4 .dept-card { position: relative; overflow: hidden; }
body.style-style4 .dept-card__media { aspect-ratio: 1 / 1; height: auto; overflow: hidden; }
body.style-style4 .dept-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.style-style4 .dept-card__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--primary);
    padding: 18px 20px;
    text-align: center;
}
body.style-style4 .dept-card__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    font-size: 20px;
    margin: 0 0 10px;
}
body.style-style4 .dept-card__link {
    display: inline-block;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 22px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
body.style-style4 .dept-card__link:hover { background: #fff; color: var(--secondary); border-color: #fff; }

/* ---------- WHY CHOOSE -> doctor band: flat dark panel + right photo ---------- */
/* D9 (2026-06-12): was a hardcoded #3B4068 navy — that leaked the default navy under
   a switched THEME_PRESET (per-theme sweep). Now var(--secondary) so the doctor band
   follows the active palette. !important required: style.css L1260 .why-choose
   {background-color:var(--secondary)!important} out-specifies a plain declaration.
   white prose (0.92) + #7EC8C8 checkmark both stay AA on any preset's secondary. */
body.style-style4 .why-choose--doctor { background: var(--secondary) !important; }
body.style-style4 .why-choose--doctor .why-choose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: 1320px;
    margin: 0 auto;
}
body.style-style4 .why-choose--doctor .why-choose__panel {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
body.style-style4 .why-choose--doctor .why-choose__label {
    color: #7EC8C8;  /* light teal: AA 5.18 on #3B4068 (var(--accent) #176E94 = 1.74 FAIL) */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
}
body.style-style4 .why-choose--doctor .why-choose__heading {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.2;
    margin: 0 0 18px;
}
body.style-style4 .why-choose--doctor .why-choose__body {
    color: rgba(255, 255, 255, 0.92);  /* AA: >=0.92 white on #3B4068 navy panel */
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 22px;
}
body.style-style4 .why-choose--doctor .why-choose__list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.92);
}
body.style-style4 .why-choose--doctor .why-choose__item {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
}
body.style-style4 .why-choose--doctor .why-choose__item::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: #7EC8C8;  /* light teal checkmark: visible on #3B4068 */
    font-size: 13px;
}
body.style-style4 .why-choose--doctor .why-choose__cta {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 18px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
body.style-style4 .why-choose--doctor .why-choose__cta:hover { background: #fff; color: var(--secondary); }
body.style-style4 .why-choose--doctor .why-choose__photo { overflow: hidden; }
body.style-style4 .why-choose--doctor .why-choose__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- AWARDS -> "OUR ACCREDITATIONS" on gray ---------- */
body.style-style4 .awards-media--accreditations {
    background: #E2E2E2;
    padding: 48px 24px;
    text-align: center;
}
body.style-style4 .awards-media--accreditations .awards-media__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--secondary);
    font-size: 30px;
    margin: 0 0 22px;
}
body.style-style4 .awards-media--accreditations .awards-media__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 44px;
}
body.style-style4 .awards-media--accreditations .awards-media__link {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 20px;
}

/* ---------- GALLERY PREVIEW -> BEFORE/AFTER teaser (image-bg + LIGHT overlay, dark text) ---------- */
body.style-style4 .gallery-preview--teaser {
    position: relative;
    background-image: url('/static/images/style4/style4-gallery.jpg');
    background-size: cover;
    background-position: center 30%;
    min-height: 360px;
    display: flex;
    align-items: center;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.05) 80%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    max-width: 560px;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--secondary);
    font-size: 44px;
    margin: 0 0 14px;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__text {
    color: #2E2E2E;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 22px;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__cta {
    display: inline-block;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 18px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
body.style-style4 .gallery-preview--teaser .gallery-preview__cta:hover { background: var(--primary); color: #fff; }

/* ---------- FEATURE TILES -> two image tiles (WHAT TO EXPECT / OFFICES), white-on-dark-overlay ---------- */
body.style-style4 .feature-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
body.style-style4 .feature-tile {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
body.style-style4 .feature-tile--expect { background-image: url('/static/images/style4/style4-expect.jpg'); }
body.style-style4 .feature-tile--offices { background-image: url('/static/images/style4/style4-offices.jpg'); }
body.style-style4 .feature-tile__overlay {
    position: absolute; inset: 0;
    background: rgba(20, 30, 56, 0.55);  /* AA: white heading 5.04 over a LIGHT photo (0.46 = 4.00 FAIL) */
    pointer-events: none;
}
body.style-style4 .feature-tile__heading {
    position: relative; z-index: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    font-size: 30px;
    margin-bottom: 18px;
}
body.style-style4 .feature-tile__cta {
    position: relative; z-index: 1;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 22px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 600;
}
body.style-style4 .feature-tile:hover .feature-tile__cta { background: #fff; color: var(--secondary); }

/* ---------- Phase D: full-width WHAT TO EXPECT / LOCATIONS bands (feature-tile art
   family, full-width single-band variants; reused on about/services/faq/contact) ---------- */
body.style-style4 .feature-band__inner {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
body.style-style4 .feature-band--expect .feature-band__inner { background-image: url('/static/images/style4/style4-expect.jpg'); }
body.style-style4 .feature-band--locations .feature-band__inner { background-image: url('/static/images/style4/style4-offices.jpg'); }
body.style-style4 .feature-band__overlay {
    position: absolute; inset: 0;
    background: rgba(20, 30, 56, 0.55);  /* AA: white heading 5.04 over a LIGHT photo (same as feature-tile) */
    pointer-events: none;
}
body.style-style4 .feature-band__heading {
    position: relative; z-index: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    font-size: 30px;
    margin-bottom: 18px;
}
body.style-style4 .feature-band__cta {
    position: relative; z-index: 1;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 22px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 600;
}
body.style-style4 .feature-band__inner:hover .feature-band__cta { background: #fff; color: var(--secondary); }

/* ---------- NEWSLETTER (D3) -> home-bottom CTA band on gray (NOT a form) ---------- */
body.style-style4 .newsletter--cta {
    background: #E2E2E2;
    padding: 56px 24px;
    text-align: center;
}
body.style-style4 .newsletter--cta .newsletter__inner { max-width: 760px; margin: 0 auto; }
body.style-style4 .newsletter--cta .newsletter__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--secondary);
    font-size: 32px;
    margin: 0 0 12px;
}
body.style-style4 .newsletter--cta .newsletter__text {
    color: #2E2E2E;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}
body.style-style4 .newsletter--cta .newsletter__cta {
    display: inline-block;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 18px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
body.style-style4 .newsletter--cta .newsletter__cta:hover { background: var(--primary); color: #fff; }

/* ---------- HERO (Phase C) -> #5F9AB5 banner bg behind the admin image; 2-CTA row ---------- */
body.style-style4 .hero .hero__slide-bg { background-color: #5F9AB5; }
body.style-style4 .hero .hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
body.style-style4 .hero .hero__cta--outline {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
body.style-style4 .hero .hero__cta--outline:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
/* #4: the home.html-injected .hero__cta--colors paints filled with border:0
   (60px) while --outline is 64px. Make it a true outline too so both hero CTAs
   are equal-height 2px outlines (no transparent-border hack). Hero = LIGHT band
   -> primary stroke. (radius/padding come from style.css .hero__cta 4px/18-30.) */
body.style-style4 .hero .hero__cta--colors {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
body.style-style4 .hero .hero__cta--colors:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ---------- RESPONSIVE: stack the 2-col / 3-col bands on mobile ---------- */
@media (max-width: 860px) {
    body.style-style4 .dept-cards { grid-template-columns: 1fr; }
    body.style-style4 .why-choose--doctor .why-choose__grid { grid-template-columns: 1fr; }
    body.style-style4 .why-choose--doctor .why-choose__panel { padding: 40px 24px; }
    body.style-style4 .feature-tiles { grid-template-columns: 1fr; }
    body.style-style4 .gallery-preview--teaser .gallery-preview__heading { font-size: 32px; }
}

/* ---------- Phase D: faq "Our Approach" numbered steps ---------- */
body.style-style4 .approach-steps { padding: 56px 20px; background: #fff; }
body.style-style4 .approach-steps__inner { max-width: 880px; margin: 0 auto; }
body.style-style4 .approach-steps__intro-heading {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--primary); font-size: 15px; margin: 0 0 8px;
}
body.style-style4 .approach-steps__intro { color: #54595f; line-height: 1.7; margin: 0 0 32px; }
body.style-style4 .approach-steps__list { list-style: none; margin: 0; padding: 0; }
body.style-style4 .approach-step { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
body.style-style4 .approach-step__num {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: #fff;  /* AA: white on #0A5D80 = 6.0 */
    display: flex; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px;
}
body.style-style4 .approach-step__title {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--primary); font-size: 16px; margin: 6px 0 6px;
}
body.style-style4 .approach-step__text { color: #54595f; line-height: 1.7; margin: 0; }
body.style-style4 .approach-steps__img {
    width: 100%; height: auto; border-radius: 6px; margin-top: 24px; display: block;
}

/* ---------- Phase D: about "Why Choose Us?" body ---------- */
body.style-style4 .about-why { padding: 56px 20px; background: #fff; }
body.style-style4 .about-why__inner { max-width: 880px; margin: 0 auto; }
body.style-style4 .about-why__heading {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--primary); font-size: 26px; margin: 0 0 20px;
}
body.style-style4 .about-why__text { color: #54595f; line-height: 1.75; }
body.style-style4 .about-why__text p { margin: 0 0 16px; }
body.style-style4 .about-why__text a { color: var(--primary); text-decoration: underline; }
body.style-style4 .about-why__list { margin: 0 0 16px; padding-left: 22px; }
body.style-style4 .about-why__list li { margin-bottom: 6px; color: #54595f; }
body.style-style4 .about-why__img {
    width: 100%; height: auto; border-radius: 6px; margin-top: 24px; display: block;
}

/* ---------- Phase D: services "Procedures" alternating rows ---------- */
body.style-style4 .svc-rows { padding: 56px 20px; background: #fff; }
body.style-style4 .svc-rows__inner { max-width: 1080px; margin: 0 auto; }
body.style-style4 .svc-rows__heading {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--primary); font-size: 26px; text-align: center; margin: 0 0 12px;
}
body.style-style4 .svc-rows__intro { color: #54595f; line-height: 1.7; text-align: center; max-width: 720px; margin: 0 auto 40px; }
body.style-style4 .svc-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 48px;
}
body.style-style4 .svc-row--reverse .svc-row__media { order: 2; }
body.style-style4 .svc-row__media { position: relative; border-radius: 6px; overflow: hidden; }
body.style-style4 .svc-row__img { width: 100%; height: 320px; object-fit: cover; display: block; }
body.style-style4 .svc-row__media-label {
    position: absolute; left: 0; bottom: 0; right: 0; padding: 14px 18px;
    background: linear-gradient(to top, rgba(10,30,56,0.78) 0%, rgba(10,30,56,0) 30%); /* #9: soften — fade out by 30% height (AA: white text sits over the >=0.78 base band) */
    color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; font-size: 18px;
}
body.style-style4 .svc-row__title {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--primary); font-size: 20px; margin: 0 0 12px;
}
body.style-style4 .svc-row__desc { color: #54595f; line-height: 1.75; }
body.style-style4 .svc-row__desc p { margin: 0 0 14px; }

/* ---------- Phase D: contact quicklinks circular feature row (real QuickLink rows) ---------- */
body.style-style4 .ql-features { padding: 56px 20px; background: #f6f8fa; }
body.style-style4 .ql-features__inner {
    max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 48px;
}
body.style-style4 .ql-feature {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; max-width: 240px;
}
body.style-style4 .ql-feature__icon {
    width: 96px; height: 96px; border-radius: 50%; background: var(--primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
    color: #fff; font-size: 38px; /* AA: white icon on teal = non-text >=3.0 */
}
body.style-style4 .ql-feature__title {
    font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--secondary); font-size: 16px;
}

/* ---------- Phase D: alternating-row + feature-row mobile collapse ---------- */
@media (max-width: 768px) {
    body.style-style4 .svc-row { grid-template-columns: 1fr; gap: 18px; }
    body.style-style4 .svc-row--reverse .svc-row__media { order: 0; }
    body.style-style4 .ql-features__inner { gap: 32px; }
}

/* ---------- Phase D: public gallery pass (Poppins type; teal accents already
   flow via var(--primary)/var(--accent) in gallery.css -> AA verified 5.68/7.27). ---------- */
body.style-style4 .cmh-gallery-heading {
    font-family: 'Poppins', sans-serif; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
body.style-style4 .cmh-gallery-card__title {
    font-family: 'Poppins', sans-serif; font-weight: 600;
}
body.style-style4 .cmh-gallery-filter__chip {
    font-family: 'Poppins', sans-serif; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.02em; font-size: 13px;
}

/* Special Offer / Booking CTA band (book_now_cta shared partial, 2026-07-01).
   Eyebrow styled by the shared .book-now-cta__eyebrow rule in inner-pages.css. */
body.style-style4 .book-now-cta { background: #f5f8fa; padding: 56px 20px; text-align: center; }
body.style-style4 .book-now-cta__heading { color: var(--primary); font-size: 1.9rem; margin: 0 0 12px; }
body.style-style4 .book-now-cta__text { color: #455; margin: 0 auto 24px; max-width: 52ch; line-height: 1.6; }
body.style-style4 .book-now-cta__btn { display: inline-block; background: var(--primary); color: #fff; padding: 14px 32px; border-radius: 4px; text-decoration: none; font-weight: 600; }
body.style-style4 .book-now-cta__btn:hover { opacity: 0.92; color: #fff; }

/* R2 (2026-07): center the banner composition in the visible strip above the quicklinks
   band (30px overlap). style4 keeps its bespoke bottom-left title treatment — this only
   adjusts the background image framing, not the title. Founder live-tunes the exact %. */
body.style-style4 .page-banner { background-position: center 40%; }


/* X1 (2026-07): footer text/links AA on the dark footer band (were muted under 4.5:1). */
body.style-style4 .footer, body.style-style4 .footer p, body.style-style4 .footer a,
body.style-style4 .footer li, body.style-style4 .footer__about,
body.style-style4 .footer-simple, body.style-style4 .footer-simple a { color: rgba(255,255,255,0.85) !important; }