/* =============================================================================
   STYLE 7 — "Clinical & Modern Med Spa"
   Clinical-modern "Medical Luxury": cool off-white canvas, clean white cards,
   slate-teal ink, a clinical-teal accent, champagne-gold hairlines. Every rule
   scoped body.style-style7. !important ONLY to beat unscoped base !important pins.
   Phase B = tokens/chrome; sections iterate in C/D.
   Palette (D4, AA 2026-06-21): bg #FAF7F1 / ink #33302B / teal #4F6152 (white text
   OK, 4.95) / navy #4F6152 / sage #E4EAE2 / gold #C2A878 DECORATIVE-only (gold text
   = #8A6D3B). Traps: teal-on-sage 4.17 FAIL (use ink on sage); gold-as-text FAIL.
   ============================================================================= */
/* v4 Phase 2 (2026-06-28): Editorial Luxe retired Jost + Cormorant for Fraunces+Inter.
   v5 design-notes (2026-07-11, founder PDF Style_7_July_10 + explicit re-theme call):
   Playfair Display (display/titles; Medium-Italic section headings, Bold card titles)
   + Jost (body/labels/eyebrows/CTAs) replace Fraunces+Inter EVERYWHERE on style7.
   Every 'Fraunces'->'Playfair Display' and 'Inter'->'Jost' swap in this file is this
   batch; selectors/weights/sizes untouched except where the v5 block at EOF re-specs
   them. CSP already permits fonts.googleapis.com. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

/* ---------- PAGE BACKGROUND: cool off-white ---------- */
body.style-style7 { background: #FAF7F1; }

/* ---------- TYPE: body = Inter ---------- */
body.style-style7 { font-family: 'Jost', Arial, sans-serif; color: #33302B; }

/* ---------- TYPE: headings = Fraunces ---------- */
body.style-style7 h1, body.style-style7 h2, body.style-style7 h3,
body.style-style7 .hero__heading, body.style-style7 .section-heading,
body.style-style7 .welcome__heading, body.style-style7 .departments__heading,
body.style-style7 .why-choose__heading, body.style-style7 .latest-news__heading,
body.style-style7 .testimonial__heading, body.style-style7 .newsletter__heading,
body.style-style7 .team__heading, body.style-style7 .about__heading,
body.style-style7 .page-banner__title {
    font-family: 'Playfair Display', Georgia, serif; color: #33302B;
}
/* beat unscoped !important heading pins where present (style.css L1283/L1245) */
body.style-style7 .why-choose__heading {
    font-family: 'Playfair Display', Georgia, serif !important;
}
/* Phase C fix (2026-06-23): welcome feature-card titles are h4.wpc-card__title,
   which the heading group above omitted (only h1-h3) — so they fell through to
   the base Cabin pin and rendered non-Jost. Scope to the welcome cards (light
   bg) so h4s on dark bands keep their own color. Font only. */
body.style-style7 .wpc-card__title, body.style-style7 .welcome h4 {
    font-family: 'Playfair Display', Georgia, serif !important;
}
/* C1 (PDF style7 2026-07-10): the welcome feature cards render .wpc-card__icon, but
   NO base or style7 rule ever styled it, so the bare glyph sat flush in the padding-
   less, overflow:hidden .wpc-card top-left corner (measured offset 0,0 on the canary)
   while .wpc-card__body (padding 14/16px) inset the text. Mirror the style6 B5 fix
   with style7 tokens: a sage-mist circle, deep-sage glyph, inset to align the icon
   with the 16px body padding. (Icon on sage-mist = graphical AA >=3:1.) */
body.style-style7 .wpc-card__icon {
    width: 56px; height: 56px; margin: 22px 0 14px 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #E4EAE2;
}
body.style-style7 .wpc-card__icon i { font-size: 24px; color: #4F6152; }

/* ---------- TYPE: eyebrows/labels = Inter uppercase, tracked (v4 Phase 2: Editorial
   Luxe eyebrow — .2em / 11px; color stays deep-sage #4F6152 = 6.2:1 on ivory AA.
   The spec's #6E8472 = 3.8:1 at 11px FAILS small-text AA, so it is reserved for
   large/decorative only, never eyebrow text.) ---------- */
body.style-style7 .section-eyebrow, body.style-style7 .eyebrow,
body.style-style7 .departments__eyebrow, body.style-style7 .team__eyebrow,
body.style-style7 .why-choose__label, body.style-style7 .newsletter__eyebrow {
    font-family: 'Jost', Arial, sans-serif; text-transform: uppercase;
    letter-spacing: .2em; font-weight: 600; font-size: 11px; color: #4F6152;
}

/* ---------- TYPE: serif accent (sparing) = Fraunces (pull-quotes/large numbers) ---------- */
body.style-style7 .pull-quote, body.style-style7 .stat-number, body.style-style7 .accent-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ---------- SURFACES: clean white cards, thin rule, airy radius ---------- */
body.style-style7 .card, body.style-style7 .dept-card, body.style-style7 .feature-tile,
body.style-style7 .welcome, body.style-style7 .hero__inner {
    background: #fff; border: 1px solid rgba(51,48,43,.12); border-radius: 14px;
}
/* champagne-gold decorative hairline (NON-text; large/decorative only) */
body.style-style7 .section-rule, body.style-style7 .welcome__rule, body.style-style7 .hairline {
    height: 2px; background: #C2A878; border: 0;
}

/* ---------- CHROME: header = white bar, ink nav, teal hover/active ---------- */
body.style-style7 .header, body.style-style7 .topbar { background: #fff !important; box-shadow: none; }
/* B6 (2026-07): white-on-white bug. This override recolors .topbar / .topbar a /
   .topbar i to dark on the white bar, but the Business-Hours value is BARE text in
   its <li> (not an <a>), so its color came from the directly-matching base rule
   style.css:53 `.topbar__info li{color:#fff}` -> white text on white bg = invisible
   (icon showed, hours text didn't). Add .topbar__info li so bare li text is dark too. */
body.style-style7 .topbar, body.style-style7 .topbar a, body.style-style7 .topbar i, body.style-style7 .topbar__info li { color: #33302B !important; }
body.style-style7 .nav__link, body.style-style7 .nav a, body.style-style7 .header__link { color: #33302B; }
body.style-style7 .nav__link:hover, body.style-style7 .nav a:hover { color: #4F6152; }
body.style-style7 .nav__link--active { color: #4F6152 !important; font-weight: 600; } /* teal on white = 4.95 AA */

/* ---------- ACCENT: teal panels (may carry WHITE text; white-on-teal = 4.95) ---------- */
body.style-style7 .accent-panel, body.style-style7 .why-choose--panel {
    background: #4F6152; color: #fff;
}
body.style-style7 .accent-panel * { color: #fff; }

/* ---------- SAGE band: ink/navy text (teal-on-sage = 4.17 FAIL) ---------- */
body.style-style7 .sage-band, body.style-style7 .section--alt { background: #E4EAE2; color: #33302B; }
body.style-style7 .sage-band a, body.style-style7 .section--alt a { color: #4F6152; } /* navy on sage = 12.75 */

/* ---------- LINKS: clinical teal on white/off-white (4.95 / 4.64 AA) ---------- */
body.style-style7 a { color: #4F6152; }
/* C10 (PDF style7 2026-07-10): the broad `a{color:#4F6152}` above (spec 0,0,1,2)
   out-specifies .btn-primary's white (0,0,1,0), so filled dark-teal buttons rendered
   as <a> (doctor-detail "Make an Appointment", shop/product "Buy Now") showed
   deep-sage text on var(--primary) #13343B = dark-on-dark (measured on the canary).
   Re-pin white on the filled primary button. Same fix class as the existing
   demo-strip / consent-link / services-detail__btn--solid patches. */
body.style-style7 a.btn-primary, body.style-style7 .btn-primary { color: #fff !important; }

/* ---------- FORMS / contact: sage panel, white inputs, ink labels ---------- */
body.style-style7 .contact-section, body.style-style7 .contact { background: #E4EAE2 !important; }
body.style-style7 .contact-form__label { color: #33302B; font-weight: 600; }
body.style-style7 .contact-form__input, body.style-style7 .contact-form__textarea { background: #fff; border: 1px solid rgba(51,48,43,.25); }
body.style-style7 .contact-form__input:focus, body.style-style7 .contact-form__textarea:focus { border-color: #4F6152; outline: none; }

/* ---------- FOOTER: LIGHT (D9) — beat base dark-footer pin + recolor children (mirror style5 L335-361) ---------- */
body.style-style7 footer.footer { background-color: #fff !important; border-top: 1px solid rgba(51,48,43,.12); }
body.style-style7 .footer__about, body.style-style7 .footer__social a,
body.style-style7 .footer__links li a, body.style-style7 .footer__contact li { color: #6B655C !important; } /* AA on white */
body.style-style7 .footer__heading, body.style-style7 .footer__contact li i { color: #33302B !important; }
/* Phase D (2026-06-23): footer column headings were Inter (heading group L25 omitted them) — pin Jost. */
body.style-style7 .footer__heading { font-family: 'Playfair Display', Georgia, serif !important; }
body.style-style7 .footer__social a:hover, body.style-style7 .footer__links li a:hover { color: #4F6152 !important; }
body.style-style7 .footer__bottom { border-top-color: rgba(51,48,43,.12) !important; }
body.style-style7 .footer__bottom p, body.style-style7 .footer__bottom a { color: #6B655C !important; }

/* ---------- PAGE BANNER: light off-white/sage tint, ink title (dark-on-light, no scrim) ---------- */
body.style-style7 .page-banner { background-color: #E4EAE2; }
body.style-style7 .page-banner__overlay { display: none !important; }
body.style-style7 .page-banner__title { color: #33302B !important; }

/* =============================================================================
   PHASE C (v3, 2026-06-23) — §E home section calibration. All body.style-style7.
   Kills style1 cosmetic bleeds (hero CTA #005485/Cabin) + applies §E band treatments.
   AA: white-on-teal #4F6152 = 4.95; white-on-ink/navy bands pass; gold = decorative
   hairlines/separators ONLY (never small text); sage carries ink, never teal.
   Section bg images are placeholder gradients until Phase D seeds real art.
   ============================================================================= */

/* HERO — kill the style1 CTA bleed (#005485 bg + Cabin font); teal solid CTA in Jost. */
body.style-style7 .hero__cta,
body.style-style7 .hero__cta--colors {
    background: #4F6152 !important; color: #fff !important;
    font-family: 'Jost', Arial, sans-serif !important; border: 0; border-radius: 6px;
}
body.style-style7 .hero__cta:hover,
body.style-style7 .hero__cta--colors:hover { background: #3F4F42 !important; }

/* WELCOME — thin decorative champagne-gold hairline under the heading. */
body.style-style7 .welcome__heading::after {
    content: ""; display: block; width: 64px; height: 2px; background: #C2A878; margin: 14px 0 0;
}

/* SERVICES (departments) — clean white panels, thin rule, gold underline, teal links. */
body.style-style7 .dept-panel {
    background: #fff; border: 1px solid rgba(51,48,43,.12); border-radius: 14px;
}
body.style-style7 .departments__underline { background: #C2A878; }
body.style-style7 .dept-panel__content a, body.style-style7 .dept-panel a { color: #4F6152; }
/* D2 (2026-06-24): round the service-detail photo to match the .dept-panel radius (was 4px in
   a 14px panel). The photo is a background DIV (.dept-panel__image), not an <img>; !important
   beats the base .dept-panel__image radius:4px (no !important on base, but multiple defs). */
body.style-style7 .dept-panel__image { border-radius: 12px !important; }

/* PROVIDERS (team_grid §E, .team-section) — deep ink band, white text. Phase D (2026-06-23):
   replaces the wrongly-mapped .select-doctor band (select_doctor is a shop/billing CTA, not a
   providers band). team_grid uses generic .section, so the band is scoped via .team-section. */
body.style-style7 .team-section { background: #4F6152 !important; color: #fff !important; }
body.style-style7 .team-section .section-heading,
body.style-style7 .team-section .section-label,
body.style-style7 .team-section .section-intro,
body.style-style7 .team-section .section-intro * { color: #fff !important; }
body.style-style7 .team-section .section-underline { background: #C2A878 !important; }
/* provider cards on the ink band: names + titles + bios stay legible (white) */
body.style-style7 .team-section .team-grid h1, body.style-style7 .team-section .team-grid h2,
body.style-style7 .team-section .team-grid h3, body.style-style7 .team-section .team-grid h4,
body.style-style7 .team-section .team-grid p { color: #fff !important; }
body.style-style7 .team-section .team-grid a {
    color: #fff !important; border-color: rgba(255,255,255,.6) !important;
}
/* D2 (2026-06-24) — provider cards on the ink band. The base .doctor-circle is a WHITE
   card (names went white-on-white at D1); make it transparent so the white names/CTA show,
   give the circular photo a decorative GOLD ring + soft shadow, gold underline, white-outline
   CTA. AA guard: gold is decorative only (ring/underline) — never text on the ink band. */
body.style-style7 .team-section .doctor-circle {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 8px 8px 0;
}
body.style-style7 .team-section .doctor-circle__photo {
    width: 168px; height: 168px;
    border: 3px solid rgba(194,168,120,.85); box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
body.style-style7 .team-section .doctor-circle__name { color: #fff !important; }
body.style-style7 .team-section .doctor-circle__underline { background: #C2A878 !important; }
body.style-style7 .team-section .doctor-circle__cta {
    background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.6) !important;
}
body.style-style7 .team-section .doctor-circle__cta:hover {
    background: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important;
}
/* 4 distinct providers -> 4-up desktop (no orphan). Style7-scoped; replicate the base
   responsive breakpoints (768/480) because this selector out-specifies the base media rules. */
body.style-style7 .team-section .team-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { body.style-style7 .team-section .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { body.style-style7 .team-section .team-grid { grid-template-columns: 1fr; } }

/* MEMBERSHIP BAND (feature_tiles) — two panels, ink overlay, white labels (placeholder bg). */
body.style-style7 .feature-tiles { display: flex; flex-wrap: wrap; gap: 0; }
body.style-style7 .feature-tiles .ftile {
    flex: 1 1 50%; min-height: 300px; position: relative; display: flex; align-items: flex-end;
    text-decoration: none;
}
/* Phase D (2026-06-23): medi-spa photo backgrounds behind the brand gradient (AA-safe overlay).
   D2 (2026-06-24): strengthen tile-1 scrim — the product image is lighter, so "Our Treatments"
   needed more contrast (AA). */
/* v2 (2026-06-25, issue #4): drop the full diagonal color wash — the photo shows
   clean; legibility comes only from the bottom whisper-gradient on .ftile__overlay. */
body.style-style7 .ftile--1 { background: url('/static/images/style7/style7-tile-1.jpg') center/cover no-repeat; }
body.style-style7 .ftile--2 { background: url('/static/images/style7/style7-tile-2.jpg') center/cover no-repeat; }
body.style-style7 .ftile__overlay {
    width: 100%; padding: 28px; background: linear-gradient(transparent, rgba(51,48,43,.78));
}
body.style-style7 .ftile__label { color: #fff !important; font-family: 'Jost', Arial, sans-serif; margin: 0 0 6px; }
body.style-style7 .ftile__link {
    color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
}
body.style-style7 .ftile:hover .ftile__link { text-decoration: none; }  /* 2026-06-26 sweep: no fake-link hover underline */
/* Phase E R2 (2026-06-25): stack the two membership/financing tiles below 600px.
   At flex 1 1 50% they stayed cramped side-by-side on phones (D2-flagged nit). */
@media (max-width: 600px) {
    body.style-style7 .feature-tiles .ftile { flex: 1 1 100%; min-height: 240px; }
}

/* POSSIBILITIES — full-bleed band + left-weighted dark overlay (AA) + teal CTA (placeholder bg). */
body.style-style7 .possibilities {
    position: relative; min-height: 360px; display: flex; align-items: center; overflow: hidden;
    /* Phase D (2026-06-23): medi-spa photo bg; .possibilities__overlay supplies the left-weighted AA scrim. */
    background: #4F6152 url('/static/images/style7/style7-possibilities.jpg') center/cover no-repeat;
}
body.style-style7 .possibilities__overlay {
    position: absolute; inset: 0;
    /* v2 (2026-06-25, issue #4): lighter neutral left-weighted whisper-gradient (was a
       heavy .85 scrim) — keeps left-side white-text legibility, lets the photo read clean
       on the right. Cowork verifies AA over the live photo. */
    background: linear-gradient(90deg, rgba(51,48,43,.66) 0%, rgba(51,48,43,.28) 50%, transparent 82%);
}
body.style-style7 .possibilities__content { position: relative; max-width: 560px; padding: 0 6%; color: #fff; }

/* GALLERY PREVIEW (home before/after, §E-5) — D2 (2026-06-24): enabled on the demo via
   gallery_show_preview_on_home. Integrate the shared .cmh-gallery-preview into the style7
   rhythm: Jost/ink heading + gold underline, matched section padding, sage cards w/ panel
   radius, teal CTA. Scoped body.style-style7. */
body.style-style7 .cmh-gallery-preview { background: #FAF7F1; padding: 72px 20px; }
body.style-style7 .cmh-gallery-preview__heading {
    font-family: 'Playfair Display', Georgia, serif; color: #33302B; font-size: 1.9rem;
}
body.style-style7 .cmh-gallery-preview__heading::after {
    content: ""; display: block; width: 56px; height: 3px; background: #C2A878; margin: 14px auto 0;
}
body.style-style7 .cmh-gallery-preview__card { background: #fff; border: 1px solid rgba(51,48,43,.10); border-radius: 14px; }
body.style-style7 .cmh-gallery-preview__img { border-radius: 14px 14px 0 0; }
body.style-style7 .cmh-gallery-preview__title { font-family: 'Playfair Display', Georgia, serif; color: #33302B; }
body.style-style7 .cmh-gallery-preview__cta { color: #4F6152; font-weight: 600; }
body.style-style7 .possibilities__heading { color: #fff !important; font-family: 'Jost', Arial, sans-serif; }
body.style-style7 .possibilities__sub { color: #E4EAE2; }
body.style-style7 .possibilities__cta {
    display: inline-block; margin-top: 18px; background: #4F6152 !important; color: #fff !important;
    padding: 12px 28px; border-radius: 6px; font-family: 'Jost', Arial, sans-serif; font-weight: 600;
}
body.style-style7 .possibilities__cta:hover { background: #fff !important; color: #4F6152 !important; }

/* ACCREDITATIONS — navy band, white items, decorative gold separators. */
body.style-style7 .accreditations { background: #4F6152; padding: 44px 0; text-align: center; }
body.style-style7 .accreditations__heading { color: #fff !important; }
body.style-style7 .accreditations__item {
    color: #fff; font-family: 'Jost', Arial, sans-serif; letter-spacing: .04em; font-size: 16px;
}
body.style-style7 .accreditations__sep { color: #C2A878; margin: 0 14px; }

/* ===================== PHASE E R1 (2026-06-23) — INNER PAGES ===================== */

/* Banner — gold-hairline motif under the photo band (med-luxury accent; title stays sr-only). */
body.style-style7 .page-banner-bg { border-bottom: 3px solid #C2A878; }
/* 2026-06-26 shared sweep: style7 was the only style inheriting the base
   .page-banner{background-position:center top} (inner-pages.css), which crops tall
   interior banners to the ceiling. Center the crop (style5/6 already override the
   same way). All-ceiling source images still need recropping — see audit list. */
body.style-style7 .page-banner { background-position: center !important; }
/* Banner quicklinks row — deep-navy band + gold icons (med-luxury; was generic var(--primary)/var(--accent)). */
body.style-style7 .quicklinks__item { background: #4F6152 !important; }
body.style-style7 .quicklinks__icon i { color: #C2A878 !important; }

/* GALLERY page — Complete-tier ALWAYS-slider stack (shared s5-ba-stack + real cmh-ba-slider).
   Mirrors style6's structure with style7 tokens; per-case case_notes disclaimer renders below each. */
body.style-style7 .cmh-gallery-section { background: #FAF7F1; }
body.style-style7 .cmh-gallery-heading { font-family: 'Playfair Display', Georgia, serif; color: #33302B; }
body.style-style7 .cmh-gallery-intro { color: #6B655C; }
body.style-style7 .s5-ba-stack { max-width: 760px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 48px; }
body.style-style7 .s5-ba__title { font-family: 'Playfair Display', Georgia, serif; color: #33302B; font-size: 26px; text-align: center; margin: 0 0 14px; }
body.style-style7 .s5-ba__title::after { content: ""; display: block; width: 48px; height: 3px; background: #C2A878; margin: 12px auto 0; }
body.style-style7 .s5-ba__desc { color: #6B655C; text-align: center; max-width: 640px; margin: 14px auto 0; line-height: 1.6; font-size: 14px; }
body.style-style7 .s5-ba__caption { text-align: center; margin: 10px 0 0; color: #4F6152; font-family: 'Playfair Display', Georgia, serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body.style-style7 .s5-ba__tag { font-weight: 700; }
/* slider chrome: gold divider + gold-edged handle (decorative accent only). */
body.style-style7 .cmh-ba-slider__divider { background: #C2A878; }
body.style-style7 .cmh-ba-slider__handle { background: #fff; border-color: #C2A878; }
/* static-pair fallback (only if comparison slider ever disabled) — match panel radius. */
body.style-style7 .s5-ba__pair-static { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 12px; overflow: hidden; }
body.style-style7 .s5-ba__pair-static img { width: 100%; aspect-ratio: 3/4 !important; height: auto !important; object-fit: cover; display: block; }

/* =============================================================================
   STYLE 7 v2 (2026-06-25) — editorial services grid + before/after slider CSS.
   All body.style-style7. Issue #3 (services bunched -> modular grid) + issue #1
   (slider crop mismatch -> matched box; the regenerated matched IMAGES land in
   Part 2). The home `departments` section now renders the shared .service-card
   grid (markup swapped from the tabbed dept layout).
   ============================================================================= */
body.style-style7 .departments { background: #FAF7F1; padding: 84px 20px; }
body.style-style7 .departments__inner { max-width: 1180px; margin: 0 auto; }
body.style-style7 .departments__header { text-align: center; margin-bottom: 8px; }
body.style-style7 .departments__sub { color: #6B655C; max-width: 620px; margin: 10px auto 0; line-height: 1.6; }
body.style-style7 .departments__underline { width: 56px; height: 2px; background: #C2A878; margin: 18px auto 0; }

/* Editorial modular grid: even 3-up (2-up tablet, 1-up mobile), generous gutters,
   clean delineated white cards. Tuning (2026-06-25): the base .service-card pins
   max-width:calc(33.333% - 20px) (a flex 3-up); in this grid that shrank each card
   to ~1/3 of its cell (serif titles wrapped letter-by-letter). Reset max-width/flex
   so the card fills its 1fr column. */
body.style-style7 .services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 36px; margin-top: 48px; text-align: left; align-items: stretch;
}
@media (max-width: 980px) { body.style-style7 .services-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 620px) { body.style-style7 .services-grid { grid-template-columns: 1fr; gap: 24px; } }
body.style-style7 .services-grid .service-card {
    background: #fff; border: 1px solid rgba(51,48,43,.10); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 6px 22px rgba(51,48,43,.05); transition: box-shadow .2s ease, transform .2s ease;
    flex: initial !important; max-width: none !important; width: auto;  /* beat base flex 3-up sizing */
}
body.style-style7 .service-card:hover { box-shadow: 0 16px 38px rgba(51,48,43,.10); transform: translateY(-3px); }
body.style-style7 .service-card__image { aspect-ratio: 3 / 2; overflow: hidden; }
body.style-style7 .service-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.style-style7 .service-card__content { padding: 26px 28px 6px; flex: 1; }
body.style-style7 .service-card__name {
    font-family: 'Playfair Display', Georgia, serif; color: #33302B;
    font-size: 1.35rem; font-weight: 600; margin: 0 0 10px; line-height: 1.25;
}
body.style-style7 .service-card__desc { color: #6B655C; font-size: .95rem; line-height: 1.65; margin: 0; }
body.style-style7 .service-card__link {
    align-self: flex-start; margin: 18px 28px 28px; color: #4F6152; font-weight: 600;
    text-decoration: none; font-size: .9rem; letter-spacing: .03em;
    /* 2026-06-26 sweep: removed the clickable-looking border-bottom underline (kept the
       gold heading hairlines, which are the intentional D4 motif, not fake links). */
}
/* C6 (PDF style7 2026-07-10): this is a bordered box (base .service-card__link keeps
   its border under style7). On :hover the base inner-pages rule paints
   background:var(--primary) (dark #13343B) while style7 only recolored the text to
   #3F4F42 -> dark-on-dark (~1.1:1). Fill deep-sage + white text (4.95 AA), matching
   border. Verified on the live canary. */
body.style-style7 .service-card__link:hover {
    color: #fff !important; background: #4F6152 !important; border-color: #4F6152 !important;
}

/* Before/after slider (issue #1, CSS half): both layers cover an identical box with
   the same focal point so differing source crops render consistently. Matched IMAGES
   regenerate in Part 2. No width override -> base reveal/clip mechanism is preserved. */
body.style-style7 .cmh-ba-slider { aspect-ratio: 3 / 4; }
body.style-style7 .cmh-ba-slider__before,
body.style-style7 .cmh-ba-slider__after { object-fit: cover; object-position: center center; }

/* Demo style-selector strip — restyle the base orange (#e67e22) to the style7
   palette (deep-sage band, white text AA 6.64). Tuning 2026-06-25 (issue: orange
   clashes). Scoped body.style-style7 -> other styles' strip is unchanged. */
body.style-style7 .demo-style-strip { background: #4F6152; }
/* v4 Phase 3: the general `body.style-style7 a { color:#4F6152 }` (L88, spec 0,0,1,2)
   out-specified base `.demo-style-strip a {color:#fff}` (0,0,1,1) → deep-sage text on
   the deep-sage bar = dark-on-dark/invisible. Pin ivory here (0,0,2,2) to win. */
body.style-style7 .demo-style-strip a { color: #FAF7F1 !important; font-family: 'Jost', Arial, sans-serif; letter-spacing: .04em; }
body.style-style7 .demo-style-strip a:hover { color: #C2A878 !important; }

/* =============================================================================
   S7 v3 HERO (2026-06-27) — recomposed image (subject on the right, bright ivory
   out-of-focus spa filling the left half). Kill the base white readability scrim,
   sit the dark serif headline in the clean left space, vertically centered,
   larger + broken to 2 stacked lines. Verified legible with no overlay.
   ============================================================================= */
body.style-style7 .hero__slide-bg::after { display: none !important; }  /* remove the milky overlay gradient */
body.style-style7 .hero__slide-content {
    justify-content: center !important;   /* vertical-center the copy in the slide */
    max-width: 46% !important;            /* keep text in the clean left half, clear of the right-side subject */
}
body.style-style7 .hero__heading {
    font-size: 60px !important;
    line-height: 1.08 !important;
    max-width: 6.5em;                     /* wrap "Reveal Your Natural Radiance" to 2 stacked lines */
    margin-bottom: 16px;
}
body.style-style7 .hero__sub { color: #4A463E; }   /* dark ink on the light left half (no scrim) */
@media (max-width: 900px) {
    body.style-style7 .hero__slide-content { max-width: 100% !important; }
    body.style-style7 .hero__heading { font-size: 36px !important; max-width: none; }
}

/* =============================================================================
   STYLE 7 v4 PHASE 2 (2026-06-28) — EDITORIAL LUXE skin (Direction A).
   Imagery-forward (Goop/Dwell): serif + champagne-gold hairlines as the frame
   around generous photography. All rules body.style-style7. Tokens (AA-verified
   on their actual backgrounds — proofs in the PR/handback):
     ivory #FAF7F1 · white #FFF · charcoal #33302B · deep-sage #4F6152 (links/CTA,
     6.2:1 on ivory) · sage #6E8472 (LARGE/decorative only — 3.8:1 fails small text)
     · blush #EBD7CF (soft alt-band; charcoal-on-blush 9.46:1) · sage-mist #E4EAE2
     · gold hairline #C2A878 (decorative) · gold icon #9A7B4F (icons ≥3:1 on light;
     on blush use deep-sage instead — gold-on-blush 2.85:1 fails graphical AA).
   No markup changes; no new inline styles; !important only to beat base pins.
   ============================================================================= */

/* ---------- HERO CTA — understated outlined deep-sage (Editorial Luxe: text/outline,
   not filled-heavy). Overrides the Phase C filled-teal pin above. ---------- */
body.style-style7 .hero__cta,
body.style-style7 .hero__cta--colors {
    background: transparent !important; color: #4F6152 !important;
    border: 1.5px solid #4F6152 !important; border-radius: 4px;
    font-family: 'Jost', Arial, sans-serif !important; font-weight: 600; letter-spacing: .02em;
}
body.style-style7 .hero__cta:hover,
body.style-style7 .hero__cta--colors:hover { background: #4F6152 !important; color: #fff !important; }

/* ---------- INNER-PAGE BANNERS (v4 Phase 3) — full photographic, taller; serif title
   set TYPE-ONLY directly on the image (NO panel — the Phase 2 ivory box read like a
   quicklink button), left-aligned with the 56px gold hairline. A soft LEFT whisper
   gradient (not a full scrim) on .page-banner__overlay carries legibility for the
   light title across varied photos; banner art is composed with a clean left area. ---------- */
body.style-style7 .page-banner {
    position: relative; height: auto !important; min-height: 360px;
    display: flex; align-items: flex-end;
    background-color: #FAF7F1; background-size: cover;
}
/* re-enable the overlay as a left-weighted whisper gradient (was display:none) */
body.style-style7 .page-banner__overlay {
    display: block !important; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(20, 18, 15, .84) 0%, rgba(20, 18, 15, .64) 45%, rgba(20, 18, 15, .22) 74%, transparent 90%); /* Phase 2b: strengthened for AA (light Phase-2 utility images; covers wider wrapped titles) */
}
body.style-style7 .page-banner__content {
    position: relative; z-index: 1; margin: 0 0 40px 6%; max-width: 560px;
    background: transparent; padding: 0;
    /* C11 (PDF style7 2026-07-10): the base .page-banner__content is a flex-center
       container (display:flex; justify-content:center; text-align:center). style7
       left-shifts it (6%) and caps it at 560px but never reset the centering, so a
       long title was sized to max-content and centered -> overflowed OFF-SCREEN LEFT
       (measured left:-99px on the live canary). Left-align the box so the title
       starts at the box edge (matches the gold-hairline-left design). */
    display: block; text-align: left;
}
/* defeat the base sr-only !important pin (inner-pages.css L1570/L2760) for style7 only;
   light serif title on the photo + subtle shadow for legibility over busier areas */
body.style-style7 .page-banner .page-banner__title {
    position: static !important; width: auto !important; height: auto !important;
    overflow: visible !important; clip: auto !important;
    /* C11: the title also inherits white-space:nowrap from its .sr-only class (not
       reset above), so a long title ran one line off-screen right even once
       left-aligned. Allow it to wrap within the 560px box. */
    white-space: normal !important;
    margin: 0; font-family: 'Playfair Display', Georgia, serif; color: #FAF7F1 !important;
    font-size: 2.4rem; line-height: 1.12; font-weight: 600;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}
body.style-style7 .page-banner__title::after {
    content: ""; display: block; width: 56px; height: 3px; background: #C2A878; margin: 16px 0 0;
}
@media (max-width: 768px) {
    body.style-style7 .page-banner { min-height: 240px; }
    body.style-style7 .page-banner__content { margin: 0 0 24px 5%; max-width: 86%; }
    body.style-style7 .page-banner .page-banner__title { font-size: 1.7rem; }
}

/* ---------- QUICKLINKS (home + inner banner row) — calm WHITE band, thin gold
   top/bottom hairlines, gold icon + Fraunces serif label, thin gold vertical
   dividers, understated underline-on-hover. The white !important beats the JS-set
   per-item data-bg inline color (non-important) on the banner row. ---------- */
body.style-style7 .quicklinks { background: #fff; border-top: 1px solid #C2A878; border-bottom: 1px solid #C2A878; }
body.style-style7 .quicklinks__item {
    background: #fff !important; color: #33302B !important; border: 0; box-shadow: none;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 24px 18px; text-decoration: none;
}
body.style-style7 .quicklinks__item + .quicklinks__item { border-left: 1px solid rgba(194, 168, 120, .5); }
body.style-style7 .quicklinks__icon i { color: #9A7B4F !important; font-size: 20px; }
body.style-style7 .quicklinks__text {
    font-family: 'Playfair Display', Georgia, serif; color: #33302B !important;
    font-size: 1.05rem; font-weight: 500; letter-spacing: .01em;
}
body.style-style7 .quicklinks__item:hover .quicklinks__text {
    text-decoration: underline; text-decoration-color: #C2A878; text-underline-offset: 5px;
}

/* ---------- SERVICE CARDS — 3px champagne-gold top rule, larger (4/3) image-top,
   flatter editorial card (drop the heavy lift; subtle hover only). ---------- */
body.style-style7 .services-grid .service-card { border-top: 3px solid #C2A878; box-shadow: none; }
body.style-style7 .services-grid .service-card:hover { box-shadow: 0 10px 28px rgba(51, 48, 43, .08); transform: translateY(-2px); }
body.style-style7 .service-card__image { aspect-ratio: 4 / 3; }

/* ---------- WELCOME — image + text editorial block (graceful: 2-col only when the
   admin welcome image is present; falls back to single-col otherwise). The 3 feature
   cards drop full-width below the image/text row. ---------- */
body.style-style7 .welcome { background: #FAF7F1; }
body.style-style7 .welcome__inner:has(.welcome__image-col) {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
body.style-style7 .welcome__inner:has(.welcome__image-col) .welcome__text-col { grid-column: 1; grid-row: 1; }
body.style-style7 .welcome__inner:has(.welcome__image-col) .welcome__image-col { grid-column: 2; grid-row: 1; }
body.style-style7 .welcome__inner:has(.welcome__image-col) .wpc-grid { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
body.style-style7 .welcome__image {
    width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
    display: block; border-radius: 8px;
}
@media (max-width: 860px) {
    body.style-style7 .welcome__inner:has(.welcome__image-col) { grid-template-columns: 1fr; gap: 32px; }
    body.style-style7 .welcome__inner:has(.welcome__image-col) .welcome__image-col { grid-column: 1; grid-row: auto; }
    body.style-style7 .welcome__inner:has(.welcome__image-col) .wpc-grid { grid-row: auto; }
}

/* ---------- WHY-CHOOSE (home team-preview) — the base theme injects
   `.why-choose { background: var(--secondary) !important }` (= dark #0B2A30), so
   this band is DARK by design. Work with it: light serif heading/titles, gold
   eyebrow + icons (gold-on-dark #C2A878 = 6.6:1 AA); item text stays the themed
   white. (Blush moved to the newsletter, which is not theme-forced.) ---------- */
body.style-style7 .why-choose__label { color: #C2A878; }
body.style-style7 .why-choose__heading { color: #FAF7F1 !important; }
body.style-style7 .why-item__title { font-family: 'Playfair Display', Georgia, serif; color: #FAF7F1 !important; }
body.style-style7 .why-item__icon, body.style-style7 .why-item__icon i { color: #C2A878; }
/* C2 (PDF style7 2026-07-10): the base .why-item__icon is a 54px box with
   align-items:center, which centered the glyph ~16px BELOW the title's first line
   (title wraps to 2 lines, so center-of-box landed between them). Top-align the glyph
   to the title. height:auto drops the box to the glyph's own height; flex-start pins
   the glyph to the top; a 4px nudge drops the cap onto the title's cap-line (measured
   +16px -> +4px on the canary). */
body.style-style7 .why-item__icon { height: auto; align-items: flex-start; padding-top: 4px; }

/* ---------- TESTIMONIAL — base theme injects `.testimonial { background:
   var(--primary) !important }` (= dark #13343B), so this is a DARK band. Drop the
   clinical stock avatar (approved); LIGHT serif quote + name; AA-safe light role
   (the themed teal role was 2.68:1 — fails); gold stars (decorative). ---------- */
/* C4 (PDF style7 2026-07-10): SHOW avatars (founder decision, reverses the earlier
   "drop the clinical stock avatar" call). The prior display:none is removed; the
   avatar now renders ONLY when the testimonial carries a real photo (the doctor-1.jpg
   fallback was removed from testimonial.html), so fresh tenants show a clean
   quote-only card instead of four identical stock faces. */
body.style-style7 .testimonial__quote {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 1.5rem; line-height: 1.5; color: #FAF7F1;
}
body.style-style7 .testimonial__name { font-family: 'Jost', Arial, sans-serif; font-weight: 600; color: #FAF7F1 !important; }
body.style-style7 .testimonial__role { color: rgba(255, 255, 255, .72) !important; }
body.style-style7 .testimonial__stars .star--filled { color: #C2A878; }
/* v2c (2026-07-12, founder): initials-disc fallback (no-photo testimonials — replaces the
   removed quote-only-no-avatar path). Cream disc + ink initial on the dark ink band. */
body.style-style7 .testimonial__avatar--initial {
    display: flex; align-items: center; justify-content: center;
    background: #FAF7F1; color: #13343B; font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; font-size: 34px; line-height: 1;
}

/* ---------- NEWSLETTER — calm sage-mist band, serif heading + gold hairline,
   understated OUTLINED deep-sage subscribe button. (The eyebrow + divider in the
   template are inline-styled => CSP-stripped, no class hook — can't be skinned.)
   Soft BLUSH alt-band (approved token; not theme-forced so it wins cleanly):
   charcoal-on-blush 9.46:1, deep-sage outlined btn on blush 4.79:1. ---------- */
body.style-style7 .newsletter { background: #EBD7CF; }
body.style-style7 .newsletter__privacy { color: #5A554C; }
body.style-style7 .newsletter__heading { color: #33302B; }
body.style-style7 .newsletter__heading::after {
    content: ""; display: block; width: 56px; height: 3px; background: #C2A878; margin: 16px auto 0;
}
/* C3 (PDF style7 2026-07-10): the base .newsletter__text margin-bottom:25px sat the
   form too close under the copy (measured 25px on the canary). Open the text->form
   gap for the airier style7 rhythm. */
body.style-style7 .newsletter__text { color: #4A463E; margin-bottom: 36px; }
body.style-style7 .newsletter__input { background: #fff; border: 1px solid rgba(51, 48, 43, .25); }
body.style-style7 .newsletter__btn {
    background: transparent !important; color: #4F6152 !important;
    border: 1.5px solid #4F6152 !important; border-radius: 4px;
    font-family: 'Jost', Arial, sans-serif !important; font-weight: 600;
}
body.style-style7 .newsletter__btn:hover { background: #4F6152 !important; color: #fff !important; }

/* =============================================================================
   STYLE 7 v4 PHASE 3 (2026-06-28) — review-fix components. All body.style-style7.
   ============================================================================= */

/* feature_tiles promo sub-line (Item 5: "Our Treatments" -> /shop). White on the
   tile's dark photo whisper-gradient (.ftile__overlay), like .ftile__label. */
body.style-style7 .ftile__promo {
    color: #fff; font-family: 'Jost', Arial, sans-serif; font-size: .92rem;
    margin: 0 0 10px; max-width: 30ch; line-height: 1.5;
}

/* contact DEMO notice (Item 4: select-style removed -> Book Now; inline styles ->
   these scoped classes since CSP strips style=""). charcoal/sage on white = AA. */
body.style-style7 .s7-demo-notice {
    background: #fff; border: 1px solid rgba(51, 48, 43, .12); border-radius: 8px;
    padding: 32px 28px; text-align: center; margin-top: 16px;
}
body.style-style7 .s7-demo-notice__icon { font-size: 2rem; color: #4F6152; margin-bottom: 12px; display: block; }
body.style-style7 .s7-demo-notice__title { margin: 0 0 8px; font-size: 1.25rem; color: #33302B; font-family: 'Playfair Display', Georgia, serif; }
body.style-style7 .s7-demo-notice__text { color: #5A554C; margin: 0 0 20px; line-height: 1.6; }
body.style-style7 .s7-demo-notice__cta {
    display: inline-block; padding: 12px 28px; background: #4F6152; color: #fff;
    border-radius: 6px; font-weight: 600; text-decoration: none; font-family: 'Jost', Arial, sans-serif;
}
body.style-style7 .s7-demo-notice__cta:hover { background: #3F4F42; color: #fff; }

/* About -> Team teaser link (Item 3: full grid dropped from /about). deep-sage 6.2:1. */
body.style-style7 .about__team-link {
    display: inline-block; margin-top: 20px; color: #4F6152; font-weight: 600;
    font-family: 'Jost', Arial, sans-serif; text-decoration: none; letter-spacing: .02em;
}
body.style-style7 .about__team-link:hover { color: #3F4F42; text-decoration: underline; text-decoration-color: #C2A878; text-underline-offset: 4px; }

/* BOOK NOW CTA band (Item 3/4: replaces the full contact form on /about + /services).
   sage-mist band, serif heading, outlined deep-sage button. ink-on-sage-mist = AA. */
body.style-style7 .book-now-cta { background: #E4EAE2; padding: 72px 20px; }
body.style-style7 .book-now-cta__heading { font-family: 'Playfair Display', Georgia, serif; color: #33302B; font-size: 1.9rem; margin: 0 0 12px; }
body.style-style7 .book-now-cta__text { color: #4A463E; margin: 0 auto 26px; max-width: 52ch; line-height: 1.6; }
body.style-style7 .book-now-cta__btn {
    display: inline-block; padding: 13px 34px; background: #4F6152; color: #fff;
    border-radius: 4px; font-family: 'Jost', Arial, sans-serif; font-weight: 600; text-decoration: none;
}
body.style-style7 .book-now-cta__btn:hover { background: #3F4F42; color: #fff; }

/* SUPPORT STAFF section (Item 3: /team only, distinct from providers grid). Ivory band,
   white cards w/ gold top-rule (echoes service cards), serif role, charcoal detail. */
body.style-style7 .support-staff { background: #FAF7F1; padding: 80px 20px; }
body.style-style7 .support-staff__heading { font-family: 'Playfair Display', Georgia, serif; color: #33302B; font-size: 1.9rem; margin: 6px 0 0; }
body.style-style7 .support-staff__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px;
    max-width: 1180px; margin-left: auto; margin-right: auto;
}
@media (max-width: 980px) { body.style-style7 .support-staff__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.style-style7 .support-staff__grid { grid-template-columns: 1fr; } }
body.style-style7 .support-staff__card {
    background: #fff; border: 1px solid rgba(51, 48, 43, .10); border-top: 3px solid #C2A878;
    border-radius: 12px; padding: 28px 24px; text-align: center;
}
body.style-style7 .support-staff__icon { color: #9A7B4F; font-size: 1.6rem; margin-bottom: 12px; }
body.style-style7 .support-staff__role { font-family: 'Playfair Display', Georgia, serif; color: #33302B; font-size: 1.15rem; margin: 0 0 10px; }
body.style-style7 .support-staff__detail { color: #5A554C; font-size: .92rem; line-height: 1.6; margin: 0; }

/* =============================================================================
   CONSENT dark-on-dark fix (2026-06-30): the cookie banner's .consent-link
   inherited body.style-style7 a{#4F6152} (deep sage), dark on the dark banner.
   Re-assert the base light link. body.style-style7-scoped.
   ============================================================================= */
body.style-style7 .consent-link { color: rgba(255,255,255,0.85) !important; }
body.style-style7 .consent-link:hover { color: #fff !important; }

/* =============================================================================
   S7 v3 HOME POLISH (2026-06-30) — 48px section-spacing standard + card-grid centering.
   --cmh-section-y token, applied top+bottom to every home content section (horizontal
   per-style). Hero full-bleed. why-items -> flex (3 cards, consistent rule). body.style-style7.
   ============================================================================= */
body.style-style7 { --cmh-section-y: 48px; }
body.style-style7 .quicklinks, body.style-style7 .welcome, body.style-style7 .departments,
body.style-style7 .cmh-gallery-section, body.style-style7 .cmh-gallery-preview,
body.style-style7 .why-choose, body.style-style7 .newsletter, body.style-style7 .testimonial {
    padding-top: var(--cmh-section-y) !important;
    padding-bottom: var(--cmh-section-y) !important;
}
body.style-style7 .quicklinks { margin-top: 0 !important; }
body.style-style7 .why-items {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 28px;
}
body.style-style7 .why-item { flex: 0 1 300px; max-width: 320px; }
@media (max-width: 860px) { body.style-style7 .why-item { flex: 0 1 100%; } }

/* Services detail sections (Phase 3, 2026-07-01) — Fraunces names, editorial uppercase CTAs (style7 aesthetic). */
body.style-style7 .services-detail__name { font-family: 'Playfair Display', Georgia, serif; color: #33302B; }
body.style-style7 .services-detail__btn { text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }

/* Batch 1 (2026-07-02): re-pin service-detail Book Now text to white (style7 `a{color:#4F6152}`
   at :88 was out-specifying the base #fff -> 1.98:1). This -> 13.14:1. */
body.style-style7 .services-detail__btn--solid { color: #fff !important; }

/* R4 (2026-07): /services two-tile promo band is white-on-dark by design, but style7's
   h3 catch-all (color:#33302B) bled dark onto .services-promo__heading. Re-assert white. */
body.style-style7 .services-promo__heading { color: #fff !important; }


/* X1 (2026-07): style7 — accreditations separator dot (gold on green, 2.9:1) and the
   gallery filter chip text (dark on teal active chip, 1.34:1) -> AA light. */
body.style-style7 .accreditations__sep { color: rgba(255,255,255,0.8) !important; }
body.style-style7 .cmh-gallery-filter__chip { color: #fff !important; }

/* =============================================================================
   S7 v5 DESIGN-NOTES (2026-07-11) — founder PDF "Style 7 July 10" (tmp/ artifact)
   + founder overrides in-session:
   (a) FONTS: literal re-theme Playfair Display + Jost everywhere (the in-place
       family swaps above). This block sets the PDF's explicit weights/sizes/
       line-heights and extends the PDF's logic: section-level serif headings =
       Playfair Medium (500) Italic; card/button-level serif titles = Playfair
       Bold (700). Sans roles keep their weights in Jost. pt in notes = px
       (style5 precedent, #442).
   (b) RHYTHM: every "158 px" note in the PDF is WRONG (same misread number as
       style5 #442) — founder ruled: use the style5 shipped standard exactly:
       42px hero->buttons / 36px buttons->band-line / 14px heading->copy /
       48px (--cmh-section-y) section gaps. Applied to the home bands the PDF
       covers (quicklinks/welcome/departments); dark bands + below-the-fold
       bands untouched pending founder direction.
   Nothing here undoes C1-C14/TV-1 (#447/#449): those blocks are geometry/color/
   crop fixes; this block touches only type + vertical rhythm.
   ============================================================================= */
body.style-style7 { --cmh-section-y: 48px; }

/* ---- PDF note 2: hero headline Playfair Medium Italic 54/51; sub Jost Light 28/32.
   !important mirrors the v3 hero pins it must beat (same specificity, later wins). */
body.style-style7 .hero__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500; font-style: italic;
    font-size: 54px !important; line-height: 51px !important;
}
body.style-style7 .hero__sub {
    font-family: 'Jost', Arial, sans-serif; font-weight: 300;
    font-size: 28px; line-height: 32px;
    max-width: 420px;      /* base caps 380px; at 28px that forces a 3rd wrap — mock shows 2 lines */
    max-height: none;      /* base 120px 5-line cap would clip 28/32 copy */
}
@media (max-width: 900px) {
    body.style-style7 .hero__heading { font-size: 36px !important; line-height: 1.15 !important; }
}
/* note 2 "center block of copy vertically to line up with the button": already
   satisfied by the v3 .hero__slide-content justify-content:center pin — kept. */

/* ---- PDF notes 4+9: button labels + welcome feature-card titles = Playfair Bold 16 */
body.style-style7 .quicklinks__text {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; font-size: 16px; text-transform: none;
}
body.style-style7 .wpc-card__title, body.style-style7 .welcome h4 {
    font-family: 'Playfair Display', Georgia, serif !important;  /* keep the C-era !important that beats the base Cabin pin */
    font-weight: 700; font-size: 16px;
}

/* ---- PDF notes 7+12: section headings Playfair Medium Italic 32/30 (welcome +
   departments sized per note; the italic-500 treatment extends to the whole
   section-heading tier per the PDF's logic — sizes elsewhere unchanged). */
body.style-style7 .section-heading,
body.style-style7 .welcome__heading, body.style-style7 .departments__heading,
body.style-style7 .latest-news__heading, body.style-style7 .testimonial__heading,
body.style-style7 .newsletter__heading, body.style-style7 .team__heading,
body.style-style7 .about__heading, body.style-style7 .cmh-gallery-preview__heading,
body.style-style7 .cmh-gallery-heading, body.style-style7 .book-now-cta__heading,
body.style-style7 .support-staff__heading, body.style-style7 .accreditations__heading {
    font-weight: 500; font-style: italic;
}
body.style-style7 .why-choose__heading { font-weight: 500 !important; font-style: italic !important; }  /* its base pin is !important */
body.style-style7 .page-banner .page-banner__title { font-weight: 500; font-style: italic; }  /* hero-tier logic on inner pages */
body.style-style7 .welcome__heading,
body.style-style7 .departments__heading {
    font-size: 32px; line-height: 30px;
}

/* ---- PDF note 14: service-card names Playfair Bold 20/24 (was 1.35rem/600) */
body.style-style7 .service-card__name {
    font-weight: 700; font-size: 20px; line-height: 24px;
}

/* ---- RHYTHM (style5 standard) ----
   hero -> band top hairline = 42: replace the base Session-11 -30px hero overlap.
   button row -> bottom hairline = 36: item pad-bottom 24 + section pad-bottom 12.
   section.quicklinks (0,2,1)+!important beats the base padding:0 !important pin. */
body.style-style7 section.quicklinks {
    margin-top: 42px !important;
    padding: 0 0 12px !important;
}
/* band line -> welcome content = 48 (base .welcome pads 72px 0; inner pads top 0) */
body.style-style7 section.welcome { padding: 48px 0 0 !important; }
/* heading -> copy = 14 (base margin-bottom 18) */
body.style-style7 .welcome__heading { margin: 0 0 14px; }
/* text/photo row -> feature boxes = 48 (v4 set 8) */
body.style-style7 .welcome__inner:has(.welcome__image-col) .wpc-grid { margin-top: 48px; }
/* boxes -> Our Services container = 48 (welcome pad-bottom 0 + departments pad-top 48;
   was 84 — bottom rides the same 48 token) */
body.style-style7 .departments { padding: 48px 20px; }
/* PDF note 13 (rule -> service images): .services-grid margin-top is ALREADY 48 — no-op. */

/* ---- S7 v5.1 GATE-3 FIXES (2026-07-11, same batch — canary measurement pass) ----
   Computed-style audit on the live v5 canary found 4 base rules the v5 rhythm/type
   spec missed (all proven via getComputedStyle, not eyeballed):
   1) base style.css pins .quicklinks__text font-weight:500 !important -> the v5
      700 (unpinned) lost. Match the !important.
   2) base pads .welcome__inner 60px top+bottom -> line->content was 141, not 48.
   3) base .welcome__image-col margin-top:32 / .welcome__text-col margin-bottom:32
      (v1.9.52 stacked-layout era) -> extra offsets inside the grid.
   4) the welcome grid's gap:56 also applies as ROW gap -> stacked with the wpc
      margin-top 48 (=104). Keep 56 between columns only.
   Result (re-measured targets): line->welcome content 48 / row->boxes 48 /
   boxes->departments heading 48. */
body.style-style7 .quicklinks__text { font-weight: 700 !important; }
body.style-style7 .welcome__inner { padding-top: 0 !important; padding-bottom: 0 !important; }
body.style-style7 .welcome__inner:has(.welcome__image-col) { column-gap: 56px; row-gap: 0; }
body.style-style7 .welcome__inner .welcome__image-col { margin-top: 0; }
body.style-style7 .welcome__inner .welcome__text-col { margin-bottom: 0; }

/* ---- S7 v5.2 GATE-3 FRESH-EYES FIXES (2026-07-11, same batch — oracle pass) ----
   Fresh-eyes mock-vs-canary comparison + full-DOM font scan found:
   1) buttons->line: v5 read 36 as item-padding; the tiles are VISIBLE white cards,
      so the mock's space is tile-EDGE->line. Measured 13 (12 pad + 1 border).
      -> section padding-bottom 36 (line then sits flush above welcome's 48).
   2) departments heading->sub was base 10px; style5 heading->copy standard = 14.
   3) "fonts EVERYWHERE" (founder ruling) — 8 selectors still render base
      Raleway/Cabin via base !important pins the v4-era swaps never covered:
      nav links, welcome/wpc/why-item body copy, why-choose eyebrow, why-item
      titles, testimonial name/role. Card-title tier -> Playfair 700; sans ->
      Jost (weights/sizes unchanged). !important required to beat the base pins
      (proven: unpinned Jost on .testimonial__name lost to base Cabin pin). */
body.style-style7 section.quicklinks { margin-top: 42px !important; padding: 0 0 36px !important; }
body.style-style7 .departments__sub { margin: 14px auto 0; }
body.style-style7 .nav__link, body.style-style7 .nav a, body.style-style7 .header__link {
    font-family: 'Jost', Arial, sans-serif !important;
}
body.style-style7 .welcome__text, body.style-style7 .wpc-card__text,
body.style-style7 .why-item__text, body.style-style7 .testimonial__role,
body.style-style7 .why-choose__label, body.style-style7 .testimonial__name {
    font-family: 'Jost', Arial, sans-serif !important;
}
body.style-style7 .why-item__title {
    font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700;
}
body.style-style7 input, body.style-style7 textarea, body.style-style7 select, body.style-style7 button {
    font-family: 'Jost', Arial, sans-serif;
}