/* =============================================================================
   Style3 overrides — typography + visual identity (Phase B calibration)

   Loaded AFTER style1's base CSS via STYLE_CSS_BUNDLES["style3"] in
   platform/app.py. Tenant-specific colors flow through CSS variables.

   Specificity strategy: every rule is scoped to `body.style-style3 ...` so
   style1 and style2 are never contaminated. (style3 is loaded in its own
   bundle, but the scoping is defensive hygiene + future-proofing.)

   Type system (per memory style3_design_seed_values + dispatch 2026-06-06):
     Primary    = Jost 300 / UPPERCASE / 0.04em  -> h1/h2/section titles
     Secondary  = Jost 300                       -> h3/subheads
     Text       = Raleway 400                    -> body
     Accent     = PT Serif 400 italic 0.05em     -> eyebrow labels

   FONT-SIZES match s3-1's current style1-wrapper layout (NOT style2's
   tuned sizes), so the only visible change in Phase B is the font (Jost)
   + palette, not the layout. Per-selector size rationale:

     .hero__heading      = 46px desktop (mirrors style1's `body.style-
                            style1 .hero__heading` at style.css:406), 36px
                            ≤897 (style.css:897), 28px ≤480 (style.css:932).
                            Required because style.css's .hero__heading
                            rules are all body.style-style1-scoped, so
                            style3 would otherwise fall back to browser
                            h2 default and re-render at a wrong size.
     .welcome__heading   = 30px (matches style.css:543 unscoped value,
                            which style3 already inherits — set explicitly
                            so the cascade is intentional, not implicit).
     .section-heading    = 32px (matches inner-pages.css:17 unscoped value,
                            same rationale).

   Phase C will redefine LAYOUTS["style3"] to the demo3 section stack and
   replace the wrapper partials with demo3 markup; per-section two-tone
   heading color (hero medium-blue vs section dark-navy) is also a Phase C
   concern — Phase B intentionally uses one readable medium-blue primary.

   Palette seeds (in STYLE3_DEFAULTS in app.py, bootstrap-seeded at first
   boot per tenant if colors still equal STYLE1_DEFAULTS): #2c6ca0 primary,
   #4a7ba6 secondary, #6cb4e4 accent. Calibrated from demo3 grabs; the
   provisional yellow accent has been removed.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');



/* ---------- FONT FACES — self-hosted (Phase 1a 2026-06-07) ----------
   Files under /static/fonts/style3/. Single latin woff2 per family (Google's
   variable-font subset trick — one file covers all weights 100-900). Replaces
   the prior @import https://fonts.googleapis.com/... line (removed for CSP /
   perf / privacy: no external CDN call from style3 page loads).

   Roboto Slab is DEFINED but not yet assigned to any element (reserve for the
   spacing/size pass).

   PT Serif (used by the eyebrow + testimonial italic quote rules) is NO LONGER
   loaded — it now falls back to the inline-declared `Georgia, 'Times New Roman',
   serif` system fallback. Acceptable degradation for this PR; PT Serif self-host
   or replacement is a follow-up. */





/* Clean pass: all Roboto/Roboto-Slab @font-face removed — style3 type is fully Raleway (@import above).
   No Roboto family is loaded (document.fonts.check('300 40px Roboto') === false). */

/* ---------- BODY TYPOGRAPHY ---------- */
body.style-style3 {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- PRIMARY HEADINGS — Jost 300 title-case with letter-spacing (C2a flip) ----------
   C2a 2026-06-06: was `text-transform: uppercase`; flipped to `none` to match demo3 across home
   + inner pages (Welcome, Why Choose Us, Meet The Team, About, Services, FAQ all title-case).
   Letter-spacing 0.04em retained — subtle tracking reads fine on title-case.
   The C1 per-section overrides further down (hero, .info-card__title) now match this base
   value and become harmless no-ops; LEFT in place because they also carry color/max-width. */
body.style-style3 h1,
body.style-style3 h2,
body.style-style3 .hero__heading,
body.style-style3 .section-title,
body.style-style3 .section-heading,
body.style-style3 .welcome__heading,
body.style-style3 .testimonial__heading,
body.style-style3 .latest-news__heading,
body.style-style3 .departments__heading {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: var(--primary);
}

/* ---------- PRIMARY HEADING SIZES — match style1's intended layout (NOT style2's) ---------- */
/* .hero__heading: style.css:406 sets 46px on body.style-style1 only — style3
   needs the explicit size, otherwise it falls back to browser h2 default. */
body.style-style3 .hero__heading {
    font-size: 58px;        /* POST-QA overlay calibration (was 46px baseline; cap/char-width both ~58) */
}

/* .welcome__heading: style.css:543 sets 30px unscoped — style3 already
   inherits this, but we restate it explicitly so the cascade is intentional. */
body.style-style3 .welcome__heading {
    font-size: 32px;        /* PDF #6-8: unified section-heading size (was 30px) */
}

/* .section-heading: inner-pages.css:17 sets 32px unscoped — same rationale. */
body.style-style3 .section-heading {
    font-size: 32px;
}

/* PDF #6-8: ONE consistent section-heading size (32px) + light Raleway weight across ALL style3 sections.
   departments ("Our Services") + team ("Our Team") had no explicit size (h2 default, too small) -> 32px;
   latest-news 28 -> 32; why-choose was BOLD Cabin 600/30 (base style.css:1283 !important) -> light Raleway 32. */
body.style-style3 .departments__heading,
body.style-style3 .team__heading,
body.style-style3 .latest-news__heading {
    font-size: 32px;
}
body.style-style3 .why-choose__heading {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 32px !important;
}

/* ---------- SECONDARY HEADINGS — Jost 300, mixed case ---------- */
body.style-style3 h3 {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    font-size: 22px;
    line-height: 1.25;
}

/* h4-h6 stay Jost but slightly heavier for legibility at small sizes */
body.style-style3 h4,
body.style-style3 h5,
body.style-style3 h6 {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- ACCENT (eyebrow labels) — PT Serif italic ---------- */
body.style-style3 .section-eyebrow,
body.style-style3 .welcome__eyebrow,
body.style-style3 .testimonial__eyebrow,
body.style-style3 .latest-news__label,
body.style-style3 .services-list__eyebrow {
    /* Phase 5C: demo3 eyebrow reads as a small sans label, not a serif accent.
       Switched from the dangling 'PT Serif'(->Georgia) italic to Roboto, letter-spaced. */
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;       /* subtle — grab eyebrow is title-case, lightly spaced (not all-caps) */
    text-transform: none;         /* demo3 eyebrow reads "Welcome to Our Practice" title-case */
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* ---------- CTA BUTTON TYPE — Jost ---------- */
body.style-style3 .btn,
body.style-style3 .button,
body.style-style3 .hero__cta,
body.style-style3 .cta-button {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---------- RESPONSIVE HERO SIZE — mirror style.css:897 + style.css:932 ---------- */
/* Tablet / narrow desktop */
@media (max-width: 897px) {
    body.style-style3 .hero__heading {
        font-size: 36px;
    }
}

/* Phone */
@media (max-width: 480px) {
    body.style-style3 .hero__heading {
        font-size: 28px;
    }
}

/* =============================================================================
   STYLE3 PHASE C1 — HERO (demo3 calibration)

   Goal: full-bleed hero with WHITE sentence-case headline LEFT, NO CTA,
   subtle left-dark scrim for legibility.

   Key override: the Phase B PRIMARY HEADINGS block at L60+ sets
   `.hero__heading` to UPPERCASE + var(--primary). C1 narrows ONLY the
   hero variant to white + sentence-case via the more-specific selector
   chain `body.style-style3 .hero .hero__heading` (same specificity as
   Phase B; later in source order = wins). `.about__heading` and other
   inner-page primaries stay uppercase + var(--primary) untouched.
   ============================================================================= */

/* ---------- HERO STRUCTURE ---------- */
body.style-style3 .hero,
body.style-style3 .hero__slider,
body.style-style3 .hero__slide {
    min-height: 610px;      /* measured FULL hero band ~613 css (was 600 — essentially unchanged) */
}

/* Hero image framing (calibration): image-up pass. `auto 116%` gave only a 16%-of-container Y-range —
   not enough for a ~20%-of-IMAGE upward shift (≈23% of container), so size raised to `auto 145%` (~45%
   range; still height-constrained so it keeps covering at every width). Position-Y raised 38% -> 80% to
   show ~20% more of the LOWER image (content up), wrists off the top, cross prominent + clear of the cards.
   These are the OVERLAY BASELINE — exact zoom/Y from Cowork's grab overlay. */
body.style-style3 .hero__slide-bg {
    /* tester N (Peter PDF): `auto 145%` + `76% 80%` was a zoom-crop anchored 80% DOWN,
       tuned for the curated demo hero-home.jpg but applied to ANY tenant image -> heads
       cut on portraits. Safe universal default: cover + upper-third focal so the subject
       stays visible at the ~670px hero height for arbitrary uploads. */
    background-size: cover !important;
    background-position: center 30% !important;
}

body.style-style3 .hero__slide {
    display: flex;
    /* Hero placement (touch pass): the grab anchors the headline+subhead in the UPPER THIRD
       (~150px down a ~660px hero), left-aligned, with the hero image filling the space below where
       the quicklinks band overlaps. Top-anchor + padding-top matches it (the prior padding-bottom
       centered-then-shrunk approach stranded the headline at the very top). Offsets flagged for
       live-compare. */
    align-items: flex-start;
    padding-top: 150px;
    padding-bottom: 0;
}

/* Legibility scrim — dark on the left fading to transparent on the right,
   so the white headline + sub stay readable over any uploaded hero image. */
body.style-style3 .hero__slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 24, 48, 0.55) 0%, rgba(0, 24, 48, 0.20) 60%, rgba(0, 24, 48, 0) 100%);
    pointer-events: none;
}

/* Content container — left-aligned, capped width, padded for readability. */
body.style-style3 .hero__slide-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
    text-align: left;
}

/* ---------- HERO HEADING — white + (legacy) sentence-case override ----------
   Original purpose (C1): force `text-transform: none` on the hero variant ONLY, while
   inner-page primaries stayed uppercase. After C2a's global flip, `text-transform: none`
   here is a redundant no-op (matches the base) — but the rule still carries `color:#fff`
   and `max-width: 720px` which ARE needed for the hero variant, so kept as-is. */
body.style-style3 .hero .hero__heading {
    color: #fff;
    text-transform: none;
    /* PDF #1-5: cap the text column to the left ~48% so the LONGEST slide headline wraps BEFORE the blue
       cross (cross occupies the right ~45-94% of the hero). Mobile already 65% (below). */
    max-width: 48%;
    letter-spacing: 0;      /* hero override of the global 0.04em */
}

body.style-style3 .hero__sub {
    color: rgba(255, 255, 255, 0.92);
    max-width: 48%;         /* PDF #1-5: wrap before the cross (same as headline) */
    font-size: 18px;        /* ~0.30 x 58 headline; Raleway 400. */
    font-weight: 400;
}

/* C1 spec: NO hero CTA per demo3. Belt-and-suspenders if base CSS leaks it in. */
body.style-style3 .hero__cta {
    display: none;
}

/* Slider progress — moved from the hero bottom (24px, which the overlapping quicklinks cards
   cover) to just below the subhead, left-aligned with the content container (grab treatment).
   Offsets approximate — flagged for live-compare. */
body.style-style3 .hero__dots {
    bottom: auto;
    top: 300px;             /* just below the upper-anchored subhead (padding-top 150 + heading + sub) */
    left: max(32px, calc(50% - 568px));
    transform: none;
    justify-content: flex-start;
}

body.style-style3 .hero__dot {
    background: rgba(255, 255, 255, 0.5);
}

body.style-style3 .hero__dot.active {
    background: #fff;
}

/* Responsive hero heights — tablet + phone keep proportional. */
@media (max-width: 768px) {
    body.style-style3 .hero,
    body.style-style3 .hero__slider,
    body.style-style3 .hero__slide {
        min-height: 480px;
    }
}

@media (max-width: 480px) {
    body.style-style3 .hero,
    body.style-style3 .hero__slider,
    body.style-style3 .hero__slide {
        min-height: 400px;
    }
}

/* =============================================================================
   STYLE3 PHASE C1 — INFO CARDS (quicklinks slot, demo3 design)

   3-column row of colored panels (Emergency / Doctors Timetable / Opening
   Hours) that pulls UP over the hero bottom (negative margin) for the demo3
   overlap. On mobile (<=768px), grid collapses to 1-col and the overlap is
   removed so nothing clips.
   ============================================================================= */

/* Slot container — clears the style.css base `.quicklinks { background: var(--primary); padding: 0 }`
   so the cards sit on the page background, not the primary color band. */
body.style-style3 .quicklinks {
    background: transparent;
    padding: 0;
    position: relative;
    z-index: 2;
}

body.style-style3 .quicklinks__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;      /* touch pass: panels form a continuous band. !important beats the unscoped
                               style.css:1040 `.quicklinks__inner{gap:10px!important}` (specificity wins). */
    max-width: 1200px;
    /* Phase 4 root-fix: default to a normal below-header top margin (inner pages have no hero).
       The home hero-overlap (-180px) is re-applied ONLY in home-hero context just below, so it
       can never leak onto hero-less inner pages (was the displaced-row / "star" artifact). */
    margin: 56px auto 60px;
    padding: 0 32px;
}

/* Home-only hero overlap — applies the negative pull-up ONLY when a hero is present on the page.
   Flush pass: -220px (= card height) so the cards' BOTTOM aligns with the hero band bottom — cards sit
   ENTIRELY inside the blue band (matches the grab's 62%-down card-top) instead of spilling onto the
   white page below. min-height alone can't fix this (cards track it); the overlap is the lever. */
body.style-style3:has(section.hero) .quicklinks__inner {
    margin-top: -220px;     /* flush pass: =card height (220) so card-bottom == hero band bottom (was -232 -> 12px strip below) */
}

/* Card base */
body.style-style3 .info-card {
    padding: 32px 28px;
    color: #fff;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    border-radius: 0;       /* touch pass: no rounded seams between the joined panels */
}

/* Card variants — SOLID grab-faithful demo3 pastel fills (measured from the grab), white text.
   NOTE: white-on-pastel here is below WCAG AA (~1.4–2.3:1); this is an EXPLICIT, user-approved
   design decision to match the demo3 grab exactly — AA waived on the style3 home tiles. Do not
   "fix" this back to navy/darkened fills without a new directive. */
body.style-style3 .info-card--emergency {
    background: #9BC7D0;   /* Contact card: #A9E3EE -> #9BC7D0 (slightly deeper teal for readability) */
}

body.style-style3 .info-card--timetable {
    background: #98AEBC;
}

body.style-style3 .info-card--hours {
    background: #9BC7D0;
}

/* Title — C1-refine: text-transform:none to match demo3 title-case ("Emergency Case" not "EMERGENCY CASE").
   C2a 2026-06-06: now redundant after the global flip on the PRIMARY HEADINGS block; kept for the
   font-family/size/letter-spacing/color/line-height that this rule also sets. */
body.style-style3 .info-card__title {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 22px;
    text-transform: none;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: #fff;
    line-height: 1.2;
}

/* Body copy — preserves line breaks for settings.hours freetext. */
body.style-style3 .info-card__body {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
    white-space: pre-line;
}

/* CTA — Jost uppercase outline button. */
body.style-style3 .info-card__cta {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    display: inline-block;
    width: fit-content;
    transition: background 0.15s ease;
}

body.style-style3 .info-card__cta:hover,
body.style-style3 .info-card__cta:focus {
    background: rgba(255, 255, 255, 0.18);
}

/* Responsive — stack 1-col on mobile, remove the hero overlap so nothing clips. */
@media (max-width: 768px) {
    body.style-style3 .quicklinks__inner {
        grid-template-columns: 1fr;
        gap: 0 !important;      /* touch pass: panels join (1-col stacked) on mobile too (beats style.css !important) */
        margin: 32px auto 40px;
        padding: 0 16px;
    }

    body.style-style3 .info-card {
        min-height: auto;
    }
}

/* =============================================================================
   STYLE3 PHASE C2 — WELCOME (demo3 2-col text-left / image-right)

   Markup (style3/sections/welcome.html):
     section.welcome > div.welcome__inner(.welcome__inner--text-only?)
       > div.welcome__text-col   (eyebrow + welcome__heading + welcome__text)
       > div.welcome__media-col  (img.welcome__image)  [omitted when no welcome_image]

   Eyebrow .section-eyebrow already styled by Phase B (PT Serif italic, var(--primary)).
   .welcome__heading inherits the C2a title-case primary-headings rule.
   Base style.css already has .welcome__image{max-width:100%;height:auto;border-radius:8px;
   box-shadow:...} (style.css L555) which we keep — no need to redeclare.
   ============================================================================= */

body.style-style3 section.welcome {
    padding: 80px 0;
    background: #fff;
}

body.style-style3 .welcome__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    /* Phase 5B: top-align so the eyebrow/heading sit at the top against the image
       (was `center`, which floated the text low beside the tall portrait). */
    align-items: start;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Text-only fallback — when no welcome_image is set, the media column is omitted in
   the template and the text column spans full width. */
body.style-style3 .welcome__inner--text-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
}

body.style-style3 .welcome__text-col {
    display: flex;
    flex-direction: column;
}

body.style-style3 .welcome__eyebrow {
    margin: 0 0 12px;
}

body.style-style3 .welcome__heading {
    margin: 0 0 20px;
}

body.style-style3 .welcome__text {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4a5563;
    margin: 0;
}

body.style-style3 .welcome__media-col {
    display: block;
    margin: 0;
    text-align: left;
}

body.style-style3 .welcome__media-col .welcome__image {
    width: 100%;
    /* Phase 5B: constrain the tall portrait to a contained 4:5 crop (object-fit cover) so the
       image height roughly matches the text column instead of towering over it. aspect-ratio
       paired with height:auto !important (css_aspect_ratio trap). FLAGGED for live-compare. */
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Responsive — stack 1-col below 768px (text then image), tighten section padding. */
@media (max-width: 768px) {
    body.style-style3 section.welcome {
        padding: 48px 0;
    }

    body.style-style3 .welcome__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 0 16px;
    }
}

/* =============================================================================
   STYLE3 PHASE C3 — DEPARTMENTS (demo3 image-top card grid)

   Markup (style3/sections/departments.html):
     section.departments > div.departments__inner
       > div.departments__header  (heading LEFT, intro RIGHT — 2-col)
       > div.dept-grid
           > article.dept-card * N
               > div.dept-card__media   (img.dept-card__img | div.dept-card__img-placeholder)
               > div.dept-card__body    (h3.dept-card__title + p.dept-card__text + a.dept-card__link)

   Base style.css L584 sets `.departments { background:#f5f5f5; padding:60px 0 0 }`
   and L590 centers `.departments__header`. We override both: light white background
   and a 2-col header grid (heading left / intro right). Style1's tabbed visual
   (.dept-tabs/.dept-tab/.dept-panel) is unused here — those base rules don't fire
   because the new template doesn't emit those elements.
   ============================================================================= */

body.style-style3 section.departments {
    background: #fff;
    padding: 80px 0;
}

body.style-style3 .departments__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Header — 2-col on desktop (heading left ~45%, intro right ~55%), stacks below 768px. */
body.style-style3 .departments__header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 48px;
    text-align: left;
    margin-bottom: 48px;
}

body.style-style3 .departments__heading {
    margin: 0;
}

body.style-style3 .departments__sub {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4a5563;
    margin: 0;
}

/* Card grid — 3-col desktop, wraps for >3 services. */
body.style-style3 .dept-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* Card surface — light, subtle shadow + hover lift. */
body.style-style3 .dept-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 24, 48, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.style-style3 .dept-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 24, 48, 0.12);
}

/* Image area — fixed 4:3 aspect, cover. Placeholder uses style3 primary tint. */
body.style-style3 .dept-card__media {
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    overflow: hidden;
    background: #eef3f8;
}

body.style-style3 .dept-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.style-style3 .dept-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 156, 196, 0.18), rgba(127, 184, 196, 0.22));
}

/* Body — title, text, link. */
body.style-style3 .dept-card__body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.style-style3 .dept-card__title {
    /* font-family/weight/letter-spacing come from Phase B h3 + C2a primary-headings cascade */
    font-size: 20px;
    margin: 0 0 10px;
}

body.style-style3 .dept-card__text {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5563;
    margin: 0 0 16px;
    flex: 1;
}

body.style-style3 .dept-card__link {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.15s ease;
}

body.style-style3 .dept-card__link:hover,
body.style-style3 .dept-card__link:focus {
    opacity: 0.7;
}

/* Responsive — collapse header to 1-col + grid to 1-col below 768px. */
@media (max-width: 768px) {
    body.style-style3 section.departments {
        padding: 48px 0;
    }

    body.style-style3 .departments__inner {
        padding: 0 16px;
    }

    body.style-style3 .departments__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }

    body.style-style3 .dept-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* =============================================================================
   STYLE3 PHASE C3 — DEPARTMENTS card reveal: JS-free entrance animation

   Bug fix 2026-06-07: platform/static/js/main.js L216-221 sets
       el.style.opacity = '0'; el.style.transform = 'translateY(20px)'
   as INLINE styles on every `.dept-card` (along with .feature-card,
   .doctor-card, .blog-card), then an IntersectionObserver adds `.animate-in`
   to reveal them. On s3-1 the observer wasn't reaching the dept-cards,
   leaving them permanently invisible.

   Fix: take style3 off the JS reveal path entirely. `opacity: 1 !important`
   + `transform: none !important` beat the JS-set inline styles
   (inline < !important in the cascade). A CSS @keyframes preserves the
   visual fade-up so the entrance still feels alive, but it auto-plays on
   page load with no scroll/JS dependency. animation-fill-mode: both pins
   the final visible state.

   prefers-reduced-motion: reduce disables the entrance animation; cards
   are immediately visible (the !important static values still apply).

   Scope: body.style-style3 only — style1/style2 keep the JS reveal path.

   Forward note: .doctor-card / .blog-card / .feature-card on style3 will
   inherit the same JS bug if/when later phases use them. Apply the same
   pattern when they land.
   ============================================================================= */

body.style-style3 .dept-card {
    opacity: 1 !important;
    transform: none !important;
    animation: style3-card-reveal 0.5s ease both;
}

@keyframes style3-card-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.style-style3 .dept-card {
        animation: none;
    }
}

/* =============================================================================
   STYLE3 PHASE C4 — TESTIMONIAL (demo3 minimal pastel-blue band)

   Markup (style3/sections/testimonial.html):
     section.testimonial > div.container > div.testimonial__carousel
       > div.testimonial__zone--prev   #testimonialPrev    (carousel JS contract)
       > div.testimonial__zone--next   #testimonialNext    (carousel JS contract)
       > div.testimonial__slide(.active) * N
           > p.testimonial__quote
           > p.testimonial__name
       > div.testimonial__dashes
           > span.testimonial__dash(.active) data-dot="<i>"  (carousel JS contract)

   Demo3 omits avatar / stars / role / eyebrow / heading — these are NOT in the
   markup (cleaner HTML, no testimonial photo URL emissions).

   Cascade fights (per strip_important_holistically_for_overrides memory):
     - style.css L1266 + L1304 set `.testimonial { background:...!important }` —
       MUST use !important on body.style-style3 .testimonial background.
     - style.css L1242 + L1331 set `.testimonial__name { font-family:Cabin!important
       color:#fff!important }` — MUST use !important on font-family + color.
     - style.css L1325-26 already correctly handle .testimonial__slide{display:none}
       + .testimonial__slide.active{display:block} — we DO NOT need to redeclare.

   Big decorative quote mark: ::before on .testimonial__slide.active with the
   left-double-quote glyph \201C, semi-transparent white, top-centered.
   ============================================================================= */

body.style-style3 section.testimonial {
    /* 2026-06-09 de-blue/themes: band follows --secondary (theme slate), NOT --accent. Under the new
       themes --accent is a PALE color (harbor_teal #AAE2EC) — white text on it fails AA. Slate keeps the
       white quote/name AA (>=11:1). CHALLENGER catch (testimonial is a white-on-dark band). */
    background: var(--secondary) !important;
    padding: 80px 20px !important;  /* Phase 5D: normalize 96 -> 80 (style3 section scale) */
    text-align: center;
    color: #fff;
    position: relative;
    /* tester N: min-height was 380 but slides render 567 vs ~421 -> ~146px jump as the
       carousel cycles. Pin to tallest-measured + buffer and center the content column so
       short quotes don't float to the top. POST-QA: cycle all slides, height delta = 0. */
    min-height: 570px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.style-style3 .testimonial .container {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
}

body.style-style3 .testimonial__carousel {
    position: relative;
    min-height: 220px;
}

/* Active slide — relative for the ::before quote mark; top padding makes room. */
body.style-style3 .testimonial__slide.active {
    position: relative;
    padding-top: 72px;
}

/* Big decorative open-quote glyph, semi-transparent white. */
body.style-style3 .testimonial__slide.active::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 120px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.90);  /* Phase 5A: whiter open-quote mark (was 0.40) */
    pointer-events: none;
}

body.style-style3 .testimonial__quote {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    color: #fff;
    max-width: 720px;
    margin: 0 auto 24px;
}

body.style-style3 .testimonial__name {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif !important;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: none !important;  /* Phase 5A: demo3 title-case "John Marco" (was uppercase) */
    color: #fff !important;
    margin: 0;
}

/* Phase 5A: short divider rule above the name (demo3 quote/name separator). */
body.style-style3 .testimonial__name::before {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto 14px;
}

/* Prev/next zones — re-positioned from full-edge hot zones to small top-right
   circular buttons (demo3). The JS click handlers are attached by ID, not
   class/position, so we can freely re-place them in CSS. */
body.style-style3 .testimonial__zone {
    position: absolute;
    top: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background 0.15s ease;
    z-index: 5;
}

body.style-style3 .testimonial__zone:hover,
body.style-style3 .testimonial__zone:focus {
    background: rgba(255, 255, 255, 0.30);
}

body.style-style3 .testimonial__zone--prev {
    right: 56px;
}

body.style-style3 .testimonial__zone--next {
    right: 12px;
}

/* CSS chevron arrows via border tricks (no extra markup, CSP-safe). */
body.style-style3 .testimonial__zone::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

body.style-style3 .testimonial__zone--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

body.style-style3 .testimonial__zone--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* Dashes — centered below the carousel. */
body.style-style3 .testimonial__dashes {
    text-align: center;
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

body.style-style3 .testimonial__dash {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.40);
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-block;
}

body.style-style3 .testimonial__dash.active,
body.style-style3 .testimonial__dash:hover {
    background: #fff;
}

/* Responsive — tighter vertical padding + smaller quote on mobile. */
@media (max-width: 768px) {
    body.style-style3 section.testimonial {
        padding: 48px 16px !important;  /* Phase 5D: normalize mobile 64 -> 48 */
    }

    body.style-style3 .testimonial__slide.active {
        padding-top: 56px;
    }

    body.style-style3 .testimonial__slide.active::before {
        font-size: 88px;
        top: -4px;
    }

    body.style-style3 .testimonial__quote {
        font-size: 18px;
    }
}

/* =============================================================================
   STYLE3 PHASE 2 — MEET THE TEAM (demo3 photo-top doctor card grid)

   Markup (style3/sections/team_grid.html):
     section.team > div.team__inner
       > div.team__header   (eyebrow + heading + intro, centered)
       > div.doctor-grid
           > article.doctor-card * N
               > div.doctor-card__media  (img.doctor-card__img | div.doctor-card__img-placeholder)
               > div.doctor-card__body   (h3.doctor-card__name + p.doctor-card__role + a.doctor-card__link)

   Mirrors the C3 departments card system (surface, shadow, 4:3 cover media, 3-col grid) so the
   home rhythm is consistent. Reveal: .doctor-card is a main.js IntersectionObserver target, so it
   gets the same JS-free reveal as .dept-card (see C3 block above) — opacity:1 !important beats the
   JS-set inline opacity:0, the existing @keyframes style3-card-reveal auto-plays the fade-up, and
   prefers-reduced-motion disables it. Scope: body.style-style3 only.
   ============================================================================= */

body.style-style3 section.team {
    background: #fff;
    padding: 80px 0;
}

body.style-style3 .team__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

body.style-style3 .team__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

body.style-style3 .team__heading {
    margin: 0 0 12px;
}

body.style-style3 .team__sub {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4a5563;
    margin: 0;
}

/* Card grid — 3-col desktop, wraps for >3 doctors.
   A8 (2026-07): flex-wrap + center so a lone 4th card centers instead of orphaning
   bottom-left (was a 3-col grid). Mirrors style5/overrides.css:737. */
body.style-style3 .doctor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}
body.style-style3 .doctor-grid > .doctor-card { flex: 1 1 280px; max-width: 340px; }

/* Card surface — light, subtle shadow + hover lift (matches .dept-card). */
body.style-style3 .doctor-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 24, 48, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.style-style3 .doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 24, 48, 0.12);
}

/* Photo area — fixed 4:3 aspect, cover. aspect-ratio MUST pair with height:auto !important
   (css_aspect_ratio_height_auto_trap: aspect-ratio is ignored if an explicit height is inherited). */
body.style-style3 .doctor-card__media {
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    overflow: hidden;
    background: #eef3f8;
}

body.style-style3 .doctor-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.style-style3 .doctor-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 156, 196, 0.18), rgba(127, 184, 196, 0.22));
}

/* Body — name, role, link. Centered (team cards). */
body.style-style3 .doctor-card__body {
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.style-style3 .doctor-card__name {
    /* font-family/weight from Phase B h3 + primary-headings cascade (matches .dept-card__title) */
    font-size: 20px;
    margin: 0 0 6px;
}

body.style-style3 .doctor-card__role {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #6c9cc4;
    margin: 0 0 16px;
}

body.style-style3 .doctor-card__link {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    align-self: center;
    margin-top: auto;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.15s ease;
}

body.style-style3 .doctor-card__link:hover,
body.style-style3 .doctor-card__link:focus {
    opacity: 0.7;
}

body.style-style3 .team__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    color: #6c757d;
}

/* Reveal — extend the C3 JS-free pattern to .doctor-card (main.js L216 targets it too). */
body.style-style3 .doctor-card {
    opacity: 1 !important;
    transform: none !important;
    animation: style3-card-reveal 0.5s ease both;
}

@media (prefers-reduced-motion: reduce) {
    body.style-style3 .doctor-card {
        animation: none;
    }
}

/* Responsive — 1-col grid + tighter section padding below 768px. */
@media (max-width: 768px) {
    body.style-style3 section.team {
        padding: 48px 0;
    }

    body.style-style3 .team__inner {
        padding: 0 16px;
    }

    body.style-style3 .doctor-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* =============================================================================
   STYLE3 PHASE 3 — HEADER / NAV (demo3 solid-white header)

   Grab finding (Additional Styles/style3- screengrabs/): the demo3 header is a SOLID
   WHITE bar on BOTH home and inner pages — the hero sits BELOW it, not behind it. So
   there is NO transparent-over-hero state; no home/inner discriminator is needed. The
   base .header (style.css:74) is already white + sticky, so this is pure nav restyling.

   All rules body.style-style3-scoped → style1/style2 header byte-identical (base.html and
   style.css are untouched). Overrides three GLOBAL base rules: .nav__link font (Cabin,
   L1253) / color (var(--primary), L1269) / .nav__link--active teal underbar (L1484-1485).

   Deltas sampled from the grab:
     - nav case: UPPERCASE -> none (labels stored Title Case: "Home"/"Our Team", app.py).
     - nav font: Cabin -> Raleway.
     - nav color: var(--primary) -> #686868 (sampled dark grey).
     - active: teal underbar -> filled rounded pill. Grab pill #aae2ec is too pale for white
       text (white-on-#aae2ec = 1.42:1, fails AA), so the pill is deepened to #1f7d9c
       (white = 4.7:1, passes AA) — same cyan-blue family. FLAGGED for live-compare.
     - header height ~70px -> ~90px + airier nav gap (desktop only; >=901px so the
       hamburger/mobile layout below 900px is untouched).
   ============================================================================= */

body.style-style3 .nav__link {
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #686868;
    text-transform: none;
    letter-spacing: 0.2px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

body.style-style3 .nav__link:hover,
body.style-style3 .nav__link:focus-visible {
    color: #1f7d9c;
}

/* Active = filled pill, white text. !important + higher specificity beat style.css L1484. */
body.style-style3 .nav__link--active,
body.style-style3 .nav__link--active:hover,
body.style-style3 .nav__link--active:focus-visible {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    background: #aae2ec !important;   /* grab-faithful pale demo3 nav box (supersedes Phase-3 #1f7d9c). white-on-pale
                                          is below AA (~1.4:1) — AA WAIVED to match the grab, same as the home tiles. */
    color: #ffffff !important;
    border-radius: 4px;
    padding: 8px 16px;
    letter-spacing: 0.2px;
}

/* Kill the base teal underbar dash (style.css L1485) for style3. */
body.style-style3 .nav__link--active::after {
    display: none !important;
}

/* Desktop-only header height + nav spacing (>=901px keeps the <=900px hamburger view intact). */
@media (min-width: 901px) {
    body.style-style3 .header__inner {
        height: 90px;
    }
    body.style-style3 .nav__list {
        gap: 32px;
    }
}

/* =============================================================================
   STYLE3 PHASE 4 — INNER PAGES: remove page_banner, quicklinks on top

   partials/page_banner.html (hard-included at the top of each inner pages/X.html) emits a
   `.page-banner` bg band + a `banner_links` `.quicklinks`>`.quicklinks__item` CTA row. Phase 4
   prepends the demo3 `.quicklinks`>`.info-card` row to the style3 inner LAYOUTS (about/services/
   team/faq/contact via LAYOUTS; /blog via a guarded include in blog.html) and HIDES the banner.

   Both hides are gated on `body.style-style3:has(.quicklinks .info-card)` so they fire ONLY on the
   pages that received the new quicklinks (the 6) — other style3 inner pages (doctor_detail, gallery,
   forms, …) keep their banner untouched. `:has(.quicklinks__item)` vs `.info-card` disambiguates the
   two sections that share the `.quicklinks` class. The home hero-overlap is handled at its source
   above (only applies under `:has(section.hero)`), so inner quicklinks sit normally below the header.
   ============================================================================= */

body.style-style3:has(.quicklinks .info-card) .page-banner,
body.style-style3:has(.quicklinks .info-card) .quicklinks:has(.quicklinks__item) {
    display: none !important;
}

/* =============================================================================
   STYLE3 PHASE 5D — section spacing normalization

   The demo3-restyled home sections (welcome / departments / team) use an 80px desktop /
   48px mobile vertical rhythm. The still-Phase-A wrapper sections inherited base style.css
   outliers (why-choose 70, latest-news 70, newsletter 60) and testimonial was 96 (handled at
   its own rule above). Normalize the wrappers to the same 80/48 scale so the home rhythm is
   uniform. Vertical padding only — no look/markup change to those sections. style3-scoped.
   (hero = full-bleed banner and quicklinks = hero-overlap row are intentionally left as-is.)
   ============================================================================= */

body.style-style3 section.why-choose,
body.style-style3 section.latest-news,
body.style-style3 section.newsletter {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    body.style-style3 section.why-choose,
    body.style-style3 section.latest-news,
    body.style-style3 section.newsletter {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* Hero placement — mobile: the shorter hero (min-height 400px) gets a proportionally smaller
   top anchor, with the slider progress just below the subhead. */
@media (max-width: 768px) {
    body.style-style3 .hero__slide {
        padding-top: 80px;
        padding-bottom: 0;
    }
    body.style-style3 .hero__dots {
        top: 210px;
        bottom: auto;
        left: 16px;
    }
}

/* =============================================================================
   STYLE3 (touch pass) — WHY CHOOSE readability fix
   Section bg is var(--secondary) rgb(74,123,166) [blue]; the heading inherited var(--primary)
   rgb(44,108,160) [blue] = blue-on-blue. Force all why-choose text to white (white on
   rgb(74,123,166) ~= 4.5:1, AA). Scoped body.style-style3 only — style1/style2 unaffected.
   ============================================================================= */
body.style-style3 .why-choose__label,
body.style-style3 .why-choose__heading,
body.style-style3 .why-item__title,
body.style-style3 .why-item__text {
    color: #fff;
}

/* =============================================================================
   2026-06-09 — DE-BLUE / THEME PALETTE (harbor_teal default; all 5 presets theme-driven)
   Interactive = var(--primary) teal (data-driven). This block does the NON-interactive recolors:
   charcoal headings/eyebrows on white sections, slate footer, and charcoal TEXT on the kept pastel
   tile/nav-box fills. White-on-dark bands (why-choose / testimonial / footer) keep white text.
   Scope: body.style-style3 only. EXCLUDES: nav-box fill (#aae2ec) + tile fills (kept), and the
   white-on-dark band text (why-choose__*/testimonial__*).
   ============================================================================= */

/* Charcoal headings + eyebrows on white/light sections (demo3 headings are near-black). */
body.style-style3 .section-heading,
body.style-style3 .welcome__heading,
body.style-style3 .departments__heading,
body.style-style3 .team__heading,
body.style-style3 .latest-news__heading,
body.style-style3 .doctor-card__name,
body.style-style3 .page-banner__title,
body.style-style3 .welcome__eyebrow,
body.style-style3 .section-eyebrow,
body.style-style3 .services-list__eyebrow,
body.style-style3 .latest-news__label {
    color: #1F1F1F !important;
}

/* Footer band -> theme slate (base.html:323 forces var(--primary); body-scoped + !important wins). */
body.style-style3 footer.footer {
    background-color: var(--secondary) !important;
}

/* Tiles + active nav-box: TEXT -> charcoal (readability supersedes the prior white-on-pastel waiver).
   Fills are UNCHANGED (#9bc7d0/#98aebc tiles, #aae2ec nav box) — only text recolors. */
body.style-style3 .info-card,
body.style-style3 .info-card__title,
body.style-style3 .info-card__body,
body.style-style3 .info-card__cta {
    color: #1F1F1F !important;
}
body.style-style3 .nav__link--active,
body.style-style3 .nav__link--active:hover,
body.style-style3 .nav__link--active:focus-visible {
    color: #1F1F1F !important;
}

/* PHASE 5E — inner first-section top padding -> 35px (match home .welcome's base.html:58 !important 35px).
   Scoped to hero-less (inner) quicklinks pages only, targeting the FIRST section after the info-card band.
   Never touches home (has section.hero) or non-quicklinks pages. */
body.style-style3:not(:has(section.hero)) .quicklinks:has(.info-card) + section {
    padding-top: 35px !important;
}
@media (max-width: 768px) {
    body.style-style3:not(:has(section.hero)) .quicklinks:has(.info-card) + section {
        padding-top: 24px !important;
    }
}

/* DEMO topbar readability (2026-06-09). The demo-mode topbar inherits
   .topbar { background: var(--accent) } = #AAE2EC pale cyan with white text
   (~1.33:1, fails AA). Re-skin to var(--secondary) slate #2C3034 so the
   existing white topbar text reads ~13:1 — consistent with the footer.
   Only appears when DEMO_MODE=1; scoped to style3 so style1/2 are untouched. */
body.style-style3 .topbar {
    background: var(--secondary) !important;
}

/* ---------- E4 (2026-06-12): public gallery typography -> style3 type system ----------
   style3 type is fully Raleway (light headings, no transform per C2a). gallery.css stays
   shared; accents already flow via var(--primary)/var(--accent). */
body.style-style3 .cmh-gallery-heading { font-family: 'Raleway', 'Open Sans', sans-serif; font-weight: 300; letter-spacing: 0.04em; text-transform: none; }
body.style-style3 .cmh-gallery-card__title { font-family: 'Raleway', 'Open Sans', sans-serif; font-weight: 400; }
body.style-style3 .cmh-gallery-filter__chip { font-family: 'Raleway', 'Open Sans', sans-serif; font-weight: 500; }
body.style-style3 .cmh-gallery-intro,
body.style-style3 .cmh-gallery-disclaimer,
body.style-style3 .cmh-gallery-case-notes { font-family: 'Raleway', 'Open Sans', sans-serif; }

/* 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-style3 .book-now-cta { background: #f5f8fa; padding: 56px 20px; text-align: center; }
body.style-style3 .book-now-cta__heading { color: var(--primary); font-size: 1.9rem; margin: 0 0 12px; }
body.style-style3 .book-now-cta__text { color: #455; margin: 0 auto 24px; max-width: 52ch; line-height: 1.6; }
body.style-style3 .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-style3 .book-now-cta__btn:hover { opacity: 0.92; color: #fff; }

/* Services detail sections (Phase 3, 2026-07-01) — harbor-teal names (style3 aesthetic). */
body.style-style3 .services-detail__name, body.style-style3 .services-detail__tagline { color: #2E7D95; }


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