/* =============================================================================
   Style5 overrides — warm dusty-rose / mauve-brown identity (Phase B: tokens+chrome)

   Loaded AFTER style1 base CSS via STYLE_CSS_BUNDLES["style5"] in platform/app.py.
   Tenant colors flow through CSS vars seeded by bootstrap_plan (STYLE5_DEFAULTS:
   primary #694140 mauve-brown / secondary #3F2625 deep brown / accent #00B7CD teal).
   EVERY rule scoped body.style-style5. `!important` ONLY where a base rule
   (style.css / base.html inline <style>) carries it (audited below).

   LOCKED (AUDIT): headings + prose subheads Jost (self-hosted, S5 review 2026-06-29;
   was Bodoni Moda); body + buttons Montserrat; teal accent carries
   DARK text, NEVER white (teal-on-white = 2.43, white-on-teal = 2.43, both FAIL AA);
   hexagon field = CSS/SVG data-URI pattern (themable). Hero/banner are DARK-ON-LIGHT,
   no scrims. Phase C/D do section layouts/colors.

   AA (scripted, >=4.5 text / >=3.0 non-text): white-on-#694140 = 8.64; dark-brown
   #3F2625-on-teal #00B7CD = 5.71 (locked button text); #694140 title-on-blush
   #F5E5E1 = 7.07; #694140 nav/footer text-on-white = 8.64; #3F2625 topbar-on-white
   = 13.86.

   DEVIATIONS from the Phase B dispatch (PRE-PROBE-driven; for Cowork verify):
   - PAGE-BANNER: the banner ALWAYS carries a photo via a nonce'd inline
     <style>.page-banner-bg{background-image:url(...)}</style> (page_banner.html L22),
     and the title is ALWAYS .page-banner__title.sr-only. So (a) a bare
     background-color sits UNDER the photo (invisible) -> kill it with
     background-image:none !important to realize the blush field; (b) revealing the
     title must beat BOTH the inner-pages.css L1566/L2752 clip !important rules AND
     .sr-only (style.css L237) -> reset position/width/height/overflow/clip/margin/
     white-space (all 5 dispatch props were insufficient; clip-path:none alone is a
     no-op since the hide is clip:rect()+1px, not clip-path).
   - NAV ACTIVE: dispatch said active color:var(--accent), but (a) base
     .nav__link--active{color:rgb(126,200,200)!important} (style.css L1484) beats a
     non-important override, and (b) teal-on-white = 2.43 FAILS AA. So active text =
     bold var(--primary) brown (8.64, !important to beat the base pin); the teal
     accent is carried by the ::after underline (brand decorative; state is also
     distinguished by the 700 weight). Mirrors the style4 nav-active AA call.
   - FOOTER: live footer is <footer class="footer"> (not .footer-simple); bg is
     forced TEAL/brown by base.html inline <style> footer.footer{background-color:
     var(--primary)!important} (L323). A LIGHT footer needs its CHILD text recolored
     too -- every .footer__* child uses explicit rgba(255,255,255,.x) (built for a
     dark bar) and would be invisible on white. Dark child overrides added (tones are
     first-cut for Phase C calibration).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ---------- Jost — self-hosted variable woff2 (S5 review 2026-06-29; was Aleo) ----------
   Headings + prose subheads (reviewer EB: "change font to Jost"). Mirrors the #245
   self-host pattern: one latin variable woff2 per axis covers all weights 100-900;
   no external CDN call for the heading face. Italic axis is a separate variable file.
   Files under /static/fonts/style5/. Body/buttons stay Montserrat (@import above). */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/style5/Jost-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/style5/Jost-italic-latin.woff2') format('woff2');
}

/* ---------- TYPE: body = Montserrat 16/1.6 ---------- */
body.style-style5 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;  /* S5 v2: tightened from 1.6 (markup: reduce line-spacing) */
}

/* ---------- TYPE: headings = Jost (self-hosted, S5 review 2026-06-29; was Aleo) ----------
   Base style1 heading rules are body.style-style1-scoped -> no !important needed
   for the enumerated set. EXCEPTIONS: .why-choose__heading (style.css L1283) and
   .select-doctor__heading (style.css L1245) are UNSCOPED !important Cabin -> beat
   them in the separate block below. */
body.style-style5 h1,
body.style-style5 h2,
body.style-style5 h3,
body.style-style5 .hero__heading,
body.style-style5 .section-heading,
body.style-style5 .welcome__heading,
body.style-style5 .departments__heading,
body.style-style5 .latest-news__heading,
body.style-style5 .testimonial__heading,
body.style-style5 .newsletter__heading,
body.style-style5 .team__heading,
body.style-style5 .about__heading,
body.style-style5 .cmh-gallery-preview__heading,
body.style-style5 .page-banner__title {
    font-family: 'Jost', sans-serif;
}
/* beat the UNSCOPED !important Cabin pins (style.css L1283 / L1245). Keep base
   size/color (Phase C concern). */
body.style-style5 .why-choose__heading,
body.style-style5 .select-doctor__heading {
    font-family: 'Jost', sans-serif !important;
}

/* ---------- CHROME: topbar -> LIGHT (demo-only strip: address left / phone right) --
   base .topbar bg = var(--accent) teal (style.css L21/L1248, non-important) and
   every text child is #fff (L24/L47/L56) -> recolor to deep brown for AA on white. */
body.style-style5 .topbar {
    background: #fff !important;
    color: #3F2625 !important;
    border-bottom: 1px solid #ecddd8 !important;
}
body.style-style5 .topbar a,
body.style-style5 .topbar li,
body.style-style5 .topbar i {
    color: #3F2625 !important;
}

/* ---------- CHROME: header bar -> white ---------- */
body.style-style5 .header {
    background: #fff !important;
}

/* ---------- CHROME: nav -> brown links, teal active underline ----------
   base .nav__link color = var(--primary) brown (L1269, readable on white).
   Active: base pins color:rgb(126,200,200)!important (L1484) which is ~1.8:1 on
   white -> override to bold brown (AA 8.64); teal underline via ::after. */
body.style-style5 .nav__link {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary);
    font-weight: 500;
}
body.style-style5 .nav__link--active {
    color: var(--primary) !important;
    font-weight: 700;
}
body.style-style5 .nav__link--active::after {
    background: var(--primary) !important;  /* F: was teal; mauve-brown underline on white (decorative) */
}

/* ===========================================================================
   PHASE C1 -- HOME: hero (field + photo) / welcome / service cards.
   FIRST cut; Cowork drives the live pixel-refinement loop vs the grab
   (hexagon cell size/opacity, photo crop/position, card proportions).
   ========================================================================== */

/* ---------- HERO: blush + tiling-hexagon FIELD on the section, photo confined
   right ~42%, dark-brown Bodoni copy lower-left ----------
   Phase B put the field on .hero__slide-bg, which inherits base
   .hero__slide-bg{background-repeat:no-repeat} (style.css L371) -> the hexagon
   never tiled. C1 moves the field to .hero--style5 (explicit repeat) and frees
   .hero__slide-bg for the photo (pages/home.html nonce'd .hero__bg-N sets it). */
/* v2: the hero image (style5-hero-1/2.jpg) is a COMPLETE composition - blush field
   + hexagon honeycomb + face-on-right baked in. So NO synthetic CSS field/grid here;
   just a fallback bg-color. */
body.style-style5 .hero--style5 {
    background-color: #F5E5E1 !important;
}
/* photo FULL-BLEED (was right-42% confined + mask). background-position is the
   live pixel-tune knob (Cowork) - start slightly above center so the face isn't
   cropped too high; keep both slides matched. */
body.style-style5 .hero--style5 .hero__slide-bg {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center 25% !important;
    background-repeat: no-repeat !important;
}
/* drop the base white readability gradient (text sits on the field, not the photo) */
body.style-style5 .hero--style5 .hero__slide-bg::after { display: none !important; }
/* copy lower-left, narrower than base 65% so it clears the right photo */
body.style-style5 .hero--style5 .hero__slide-content {
    max-width: 56% !important;
    padding: 64px 24px 56px 5% !important;
    justify-content: center !important;   /* S5 tester ②: was flex-end -> kills the top gap */
}
body.style-style5 .hero__heading {
    color: var(--primary);
    font-size: 57px;   /* S5 design-notes 2026-07-09: from 64px */
    line-height: 1.1;
    font-weight: 300;  /* S5 design-notes: Jost Light (from 700) */
    margin: 0 0 18px;  /* S5 v2: headline<->subhead gap so the pair reads as one unit */
}
body.style-style5 .hero--style5 .hero__sub {
    color: #5a4442;
    font-family: 'Jost', sans-serif;  /* S5 v2: prose subhead unified to Jost */
    font-weight: 300;  /* S5 design-notes 2026-07-09: Jost Light */
    font-size: 28px;   /* S5 design-notes: from 18px */
    line-height: 1.35; /* S5 design-notes: from 1.5 */
    max-width: 30em;
    margin: 0 0 24px;
}
/* hero CTA -> OUTLINE in darker brown var(--secondary) #3F2625 (v2). base .hero__cta
   + the home.html injected .hero__cta--colors paint it solid; body.style-style5
   .hero__cta = (0,2,1) beats both (0,1,0) -> no !important. AA: #3F2625 on blush
   #F5E5E1 ~= 11; hover white-on-#3F2625 = 13.0. */
body.style-style5 .hero__cta {
    background: transparent;
    border: 2px solid var(--secondary);
    /* S5 v2: ALL CAPS + consistent with the homepage solid CTAs (Montserrat, 700, tracked) */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-top: 56px;  /* S5 design-notes 2026-07-09: kill base margin-top:auto (~100.7px@1300) -> even top/bottom slack via justify-center */
}
/* P-v3 Fix1: force brown text over the home.html injected .hero__cta--colors{color:#fff}
   (settings.hero_btn_text_color). Cover both classes with !important. */
body.style-style5 .hero__cta,
body.style-style5 .hero__cta--colors {
    color: var(--secondary) !important;
}
/* hover color must ALSO be !important to beat the rest-state !important above
   (else brown text on the brown fill -> unreadable). White-on-#3F2625 = 13.0. */
body.style-style5 .hero__cta:hover {
    background: var(--secondary);
    color: #fff !important;
}
/* P-v3 Fix2: gentler crossfade (opacity-only; paired with 7s dwell in home.html JS) */
body.style-style5 .hero__slide { transition: opacity 0.8s ease !important; }

/* ---------- WELCOME (band 2): centered serif statement on white ---------- */
body.style-style5 section.welcome--style5 {  /* S5 design-notes 2026-07-09: 'section' bumps specificity (0,2,1) to beat the shared --cmh-section-y padding-top:48 !important block below */
    background: #fff;
    padding: 0 24px 48px !important;  /* S5 hotfix2 2026-07-09: section padding-top 22->0. ql button bottom -> welcome heading = 36px per MEASURED mock (was 158; note-2 "158" was a misread). Split: qlInner-bottom 28 + welcomeInner-top 8. !important beats base.html inline pin */
    text-align: center;
}
body.style-style5 .welcome--style5 .welcome__inner {
    max-width: 820px;
    margin: 0 auto;
    padding-top: 8px !important;  /* S5 hotfix2 2026-07-09: base .welcome__inner pads 60px top; trim to 8 for the 36px buttons->heading gap. !important + (0,3,0) beats base */
}
body.style-style5 .welcome--style5 .welcome__heading {
    color: var(--primary);
    font-size: 33px;   /* S5 design-notes 2026-07-09: from 40px */
    font-weight: 400;  /* S5 design-notes: Jost Regular */
    line-height: 1.15;
    margin: 0 0 14px;  /* S5 design-notes: heading->copy 20->14 */
}
body.style-style5 .welcome--style5 .welcome__text {
    color: #5a4442;
    font-family: 'Jost', sans-serif;  /* S5 v2: prose subhead/lead unified to Jost */
    font-size: 17px;
    line-height: 1.6;
}

/* ---------- SERVICE CARDS (band 3): 3 full-bleed photo cards, dark bottom overlay,
   title + LEARN MORE. aspect-ratio + height:auto (defeat inherited explicit heights). ---------- */
body.style-style5 .departments--style5 {
    background: #fff;
    padding: 56px 0 48px;
}
body.style-style5 .svc-cards__heading {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 40px;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 32px;
}
body.style-style5 .svc-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
body.style-style5 .svc-card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 800 / 775 !important;
    height: auto !important;
}
/* P6: <img> cover (CSP-safe; no inline style="") instead of CSS-bg div, so the
   home cards are DB-driven from Service.image_url. Overlay still sits on top. */
body.style-style5 .svc-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
body.style-style5 .svc-card:hover .svc-card__media { transform: scale(1.05); }
body.style-style5 .svc-card__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 24px 24px;
    background: linear-gradient(to top, rgba(63,38,37,0.82) 0%, rgba(63,38,37,0.45) 55%, rgba(63,38,37,0) 100%);
    text-align: center;
}
body.style-style5 .svc-card__title {
    font-family: 'Jost', sans-serif;
    color: #fff;  /* white on the deep-brown overlay -> AA */
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}
body.style-style5 .svc-card__link {
    display: inline-block;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* 2026-06-26 sweep: removed clickable-looking accent underline (border-bottom: 2px solid #EFD3CA) */
    padding-bottom: 2px;
}
@media (max-width: 768px) {
    body.style-style5 .svc-cards { grid-template-columns: 1fr; }
    body.style-style5 .hero--style5 .hero__slide-bg { width: 100% !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 0.35 !important; }
    body.style-style5 .hero--style5 .hero__slide-content { max-width: 100% !important; padding: 48px 20px !important; }
}

/* ---------- INNER PAGE-BANNER (D1): photo composited RIGHT + hexagon field LEFT + dark title ----------
   D1 reverses Phase B's blush-only (which killed the nonce photo). Photo + blush + title
   share ONE element (.page-banner == .page-banner-bg), so COMPOSE (no mask: masking
   .page-banner would fade the title, a descendant):
   - blush bg-color fills the left; photo (nonce .page-banner-bg) confined right via
     background-size/position; hexagon honeycomb as ::before over the left blush;
   - title revealed (Phase B reveal kept) + dark-brown Bodoni, on the left blush, no scrim;
   - mobile: hide the photo (background-size:0) -> full blush+hexagon+title, AA-safe.
   Feather of the photo's left seam is deferred (one-element mask hits the title) -> Cowork
   refinement via the .page-banner__overlay gradient if the grab needs it. */
/* v2: the inner-banner image (style5-banner-*.jpg) is a COMPLETE composition
   (blush + hexagon + face-right baked in) -> show it FULL-BLEED, no synthetic
   blush panel / hexagon ::before / right-confine. background-position is the live
   tune knob (Cowork) - keep the face on the right per grab. */
body.style-style5 .page-banner {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    /* S5 v2 (markup #6): make the 300px band a flex container so the content block
       (and its title) centers vertically. Base .page-banner is a plain block, so the
       content's own flex only centered within its own height -> title sat at the top. */
    display: flex;
    align-items: center;
}
body.style-style5 .page-banner__overlay { display: none !important; }  /* no scrim; legibility via the title panel below */
/* Phase 2b (2026-07-01): guaranteed-AA blush panel hugging the overlaid dark title (#694140) so
   it passes over ANY Phase-2 utility image at ANY title length -- a scrim cannot cover style5's
   large 56px titles (e.g. "New Patient Registration") without washing the whole image.
   width:fit-content hugs the text; main pages get a subtle blush chip (no legibility regression). */
body.style-style5 .page-banner__title {
    display: inline-block !important; width: -moz-fit-content !important; width: fit-content !important;
    max-width: 100% !important; align-self: flex-start !important;
    background: rgba(250,244,242,.88); padding: 10px 22px; border-radius: 6px;
    box-shadow: 0 2px 14px rgba(63,38,37,.14);
}
body.style-style5 .page-banner__content {
    position: relative;
    z-index: 1;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    max-width: 60% !important;
    padding: 0 0 0 5% !important;
}
body.style-style5 .page-banner__title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
    white-space: normal !important;
    color: var(--primary) !important;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1 !important;   /* S5 tester ⑤: cut from inherited 1.6 */
    text-shadow: none !important;
}
@media (max-width: 768px) {
    /* mobile: KEEP the full-bleed image (carries blush+hexagon+face); title sits on
       the image's light blush-left. Cowork tunes the mobile crop. */
    body.style-style5 .page-banner { background-position: center !important; }
    body.style-style5 .page-banner__content { max-width: 100% !important; padding-left: 20px !important; }
}

/* ---------- FOOTER: LIGHT (grab) -> beat base.html inline footer.footer var(--primary);
   recolor every .footer__* child (all base rgba(255,255,255,.x) = invisible on white) ---------- */
body.style-style5 footer.footer {
    background-color: #fff !important;
    border-top: 1px solid #ecddd8;
}
body.style-style5 .footer__about,
body.style-style5 .footer__social a,
body.style-style5 .footer__links li a,
body.style-style5 .footer__contact li {
    color: #5a4442 !important;  /* AA ~9 on white */
}
body.style-style5 .footer__heading,
body.style-style5 .footer__contact li i {
    color: var(--primary) !important;  /* 8.64 on white */
}
body.style-style5 .footer__social a:hover,
body.style-style5 .footer__links li a:hover {
    color: var(--primary) !important;  /* F: was teal; brown link-hover on the light footer = 8.64 */
}
body.style-style5 .footer__bottom {
    border-top-color: #ecddd8 !important;
}
body.style-style5 .footer__bottom p,
body.style-style5 .footer__bottom a {
    color: #7a6663 !important;  /* AA ~5 on white */
}

/* ---------- RESPONSIVE: hero + banner title scale down ---------- */
@media (max-width: 1024px) {
    body.style-style5 .hero__heading { font-size: 40px; }
    body.style-style5 .page-banner__title { font-size: 40px; }
}
@media (max-width: 768px) {
    body.style-style5 .hero__heading { font-size: 30px; }
    body.style-style5 .page-banner__title { font-size: 30px; }
}

/* ===========================================================================
   PHASE C2 -- HOME: Meet-the-Team band / CTA tiles / Accreditations + card-title uppercase.
   Dark bands = #694140 + WHITE text (AA 8.64). teal #00B7CD on #694140 = 3.56 ->
   teal is an UNDERLINE/accent only, never the readable text. FIRST cut; Cowork refines.
   ========================================================================== */

/* ---------- C1 service-card titles -> uppercase (grab) ---------- */
body.style-style5 .svc-card__title { text-transform: uppercase; }

/* ---------- MEET THE TEAM: dark-brown 2-col band (copy left, doctor photo right) ----------
   beat unscoped .why-choose{background-color:var(--secondary)!important} (style.css L1260)
   + padding:100px 0!important (L1277) + .why-choose__heading Cabin/size !important (L1283). */
body.style-style5 .why-choose--style5 {
    background-color: var(--primary) !important;
    background-image: none !important;
    padding: 0 !important;
    color: #fff;
}
body.style-style5 .why-choose--style5 .why-choose__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* S5 tester ③: was max-width:1320px (capped the right photo); full-width so the
       photo column bleeds to the viewport's right edge. Copy stays readable via the
       container-gutter left inset on .why-choose__text below. */
    max-width: none;
    margin: 0;
    padding: 0 !important;   /* ③: kill the inherited 20px side padding so the photo column reaches the viewport edge (text keeps its own inset below) */
}
body.style-style5 .why-choose--style5 .why-choose__text {
    /* left inset = container gutter on wide screens (min 56px) so copy aligns with the
       page content and stays a readable width; right photo still bleeds to the edge */
    padding: 64px 56px 64px max(56px, calc((100vw - 1280px) / 2)) !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
body.style-style5 .why-choose--style5 .why-choose__label {
    color: #F5E5E1;   /* F: was teal var(--accent); blush kicker on the brown band = AA 7.07 */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
}
body.style-style5 .why-choose--style5 .why-choose__heading {
    color: #fff !important;
    font-size: 40px !important;   /* beat .why-choose__heading{font-size:30px!important} L1283 */
    line-height: 1.15;
    margin: 0 0 18px;
}
body.style-style5 .why-choose--style5 .why-choose__body {
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 26px;
}
body.style-style5 .why-choose--style5 .why-choose__cta {
    display: inline-block;
    background: #F5E5E1;   /* F: was teal; blush button on the brown band */
    color: var(--secondary);   /* #3F2625 on blush = AA ~11 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
}
body.style-style5 .why-choose--style5 .why-choose__cta:hover { background: #ecd5cf; }
body.style-style5 .why-choose--style5 .why-choose__photo {
    background-image: url('/static/images/style5/style5-v2-meet-team.jpg');
    background-size: cover;
    background-position: center top;
    min-height: 460px;
}

/* ---------- CTA TILES: two full-bleed photo tiles ---------- */
body.style-style5 .feature-tiles--style5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
body.style-style5 .feature-tiles--style5 .ftile {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 16 / 11 !important;
    height: auto !important;
    background-size: cover;
    background-position: center;
}
body.style-style5 .feature-tiles--style5 .ftile--1 { background-image: url('/static/images/style5/style5-tile-1.jpg'); }
body.style-style5 .feature-tiles--style5 .ftile--2 { background-image: url('/static/images/style5/style5-tile-2.jpg'); }
body.style-style5 .feature-tiles--style5 .ftile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to top, rgba(63,38,37,0.72) 0%, rgba(63,38,37,0.30) 55%, rgba(63,38,37,0.15) 100%);
}
body.style-style5 .feature-tiles--style5 .ftile__label {
    font-family: 'Jost', sans-serif;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 14px;
}
body.style-style5 .feature-tiles--style5 .ftile__link {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* 2026-06-26 sweep: removed clickable-looking accent underline (border-bottom: 2px solid #EFD3CA) */
    padding-bottom: 2px;
}

/* ---------- ACCREDITATIONS: dark-brown band, white heading + white links w/ teal underline ---------- */
body.style-style5 .accreditations--style5 {
    background: var(--primary);
    padding: 48px 24px;
    text-align: center;
}
body.style-style5 .accreditations--style5 .accreditations__heading {
    font-family: 'Jost', sans-serif;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 18px;
}
body.style-style5 .accreditations--style5 .accreditations__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    font-family: 'Montserrat', sans-serif;
}
body.style-style5 .accreditations--style5 .accreditations__item {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    /* 2026-06-26 sweep: removed clickable-looking accent underline (border-bottom: 2px solid #EFD3CA) */
    padding-bottom: 3px;
}
body.style-style5 .accreditations--style5 .accreditations__sep {
    color: rgba(255,255,255,0.5);
    font-size: 18px;
}

/* ---------- RESPONSIVE: stack the 2-col bands on mobile ---------- */
@media (max-width: 860px) {
    body.style-style5 .why-choose--style5 .why-choose__inner { grid-template-columns: 1fr; }
    body.style-style5 .why-choose--style5 .why-choose__text { padding: 40px 24px; }
    body.style-style5 .why-choose--style5 .why-choose__photo { min-height: 340px; }
    body.style-style5 .feature-tiles--style5 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PHASE C3 -- HOME (close): Explore-Possibilities promo + contact grey panel.
   Footer was completed in Phase B (light bg + dark children + brand hover). FIRST cut.
   ========================================================================== */

/* ---------- EXPLORE THE POSSIBILITIES: full-bleed promo, left-weighted dark overlay ----------
   AA: white on the 0.82 dark-brown overlay = 9.04 even over a pure-white photo region. */
body.style-style5 .possibilities--style5 {
    position: relative;
    background-image: url('/static/images/style5/style5-possibilities.jpg');
    background-size: cover;
    background-position: center;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
body.style-style5 .possibilities--style5 .possibilities__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(40,25,24,0.82) 0%, rgba(40,25,24,0.55) 45%, rgba(40,25,24,0.20) 100%);
    pointer-events: none;
}
body.style-style5 .possibilities--style5 .possibilities__content {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: 0 24px 0 6%;
    color: #fff;
}
body.style-style5 .possibilities--style5 .possibilities__heading {
    font-family: 'Jost', sans-serif;
    color: #fff;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 14px;
}
body.style-style5 .possibilities--style5 .possibilities__sub {
    color: rgba(255,255,255,0.92);
    font-family: 'Jost', sans-serif;  /* S5 v2: prose subhead unified to Jost */
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 26px;
}
body.style-style5 .possibilities--style5 .possibilities__cta {
    display: inline-block;
    background: #F5E5E1;   /* F: was teal; blush button on the dark promo overlay */
    color: var(--secondary);   /* #3F2625 on blush = AA ~11 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 13px 30px;
    border-radius: 4px;
    text-decoration: none;
}
body.style-style5 .possibilities--style5 .possibilities__cta:hover { background: #ecd5cf; }

/* ---------- CONTACT: grey panel (grab #E2E2E2), white inputs, brown labels ----------
   base .contact-section (inner-pages L739) has no bg -> scoped grey wins. Demo tenants
   show the disabled-form notice inside the panel; live tenants get the styled form. */
body.style-style5 .contact-section {
    background: #E2E2E2 !important;
    padding: 48px 0 !important;
}
body.style-style5 .contact-section .section-heading { color: var(--primary); }  /* Bodoni via Phase B */
body.style-style5 .contact-form__label { color: #3F2625; font-weight: 600; }
body.style-style5 .contact-form__input,
body.style-style5 .contact-form__textarea {
    background: #fff;
    border: 1px solid #cdbcb7;
}
body.style-style5 .contact-form__input:focus,
body.style-style5 .contact-form__textarea:focus {
    border-color: var(--primary);
    outline: none;
}
body.style-style5 .contact-section .btn-primary {
    background: var(--primary);
    color: #fff;   /* white on brown = 8.64 AA */
    text-transform: uppercase;  /* S5 v2: ALL CAPS, consistent CTA style */
    letter-spacing: 0.06em;
    font-weight: 700;
}
body.style-style5 .contact-section .btn-primary:hover { background: #51322f; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    body.style-style5 .possibilities--style5 .possibilities__heading { font-size: 34px; }
    body.style-style5 .possibilities--style5 .possibilities__content { padding: 0 20px; }
    body.style-style5 .possibilities--style5 .possibilities__overlay {
        background: linear-gradient(to right, rgba(40,25,24,0.82) 0%, rgba(40,25,24,0.62) 100%);
    }
}

/* ===========================================================================
   PHASE D2 -- ABOUT page: Why-Choose two-col + Meet-the-Team grid.
   (.about__heading / .section-heading already Bodoni via Phase B.) FIRST cut.
   ========================================================================== */

/* ---------- WHY CHOOSE US: text left, photo right, light section ---------- */
body.style-style5 .about__hero--style5 {
    background: #fff;
    padding: 48px 0;
}
body.style-style5 .about__hero--style5 .two-col {
    align-items: start;  /* #3 (2026-06-29): top-align the photo with the subhead — empty space falls UNDER the photo, not above */
    gap: 56px;
}
body.style-style5 .about__hero--style5 .about__heading {
    color: var(--primary);
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 18px;
}
body.style-style5 .about__hero--style5 .about__subheading {
    color: #5a4442;
    font-family: 'Jost', sans-serif;  /* S5 v2: prose subhead unified to Jost */
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 16px;
}
body.style-style5 .about__hero--style5 .about__text { color: #5a4442; font-size: 16px; line-height: 1.7; }
body.style-style5 .about__hero--style5 .about__text p { margin: 0 0 16px; }
body.style-style5 .about__hero--style5 .about__bullets { list-style: none; padding: 0; margin: 8px 0 0; }
body.style-style5 .about__hero--style5 .about__bullets li {
    position: relative; padding-left: 26px; margin-bottom: 8px; color: #5a4442;
}
body.style-style5 .about__hero--style5 .about__bullets li::before {
    content: '\2714'; position: absolute; left: 0; color: var(--primary);
}
body.style-style5 .about__hero--style5 .about__image img {
    width: 100%; height: 100%; max-height: 460px; object-fit: cover;
    border-radius: 8px; display: block;
}

/* ---------- MEET OUR TEAM: blush band, centered heading + doctor cards ---------- */
body.style-style5 .team--style5 {
    background: #F5E5E1;
    padding: 48px 0;
}
body.style-style5 .team--style5 .section-label {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 8px;
}
body.style-style5 .team--style5 .section-heading { color: var(--primary); font-size: 36px; margin: 0 0 14px; }
body.style-style5 .team--style5 .section-intro { color: #5a4442; font-family: 'Jost', sans-serif; max-width: 640px; margin: 0 auto 8px; }  /* S5 v2: prose subhead unified to Jost */
body.style-style5 .team--style5 .team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
}
body.style-style5 .team--style5 .doctor-circle__name {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
    body.style-style5 .about__hero--style5 .two-col { gap: 28px; }
    body.style-style5 .about__hero--style5 .about__image img { max-height: 320px; }
}

/* ===========================================================================
   PHASE D3 -- SERVICES page: alternating enhancement blocks + BEFORE-AND-AFTER / BOOK-NOW.
   FIRST cut; Cowork refines vs grab.
   ========================================================================== */
body.style-style5 .services--style5 { padding: 40px 0; background: #fff; }
body.style-style5 .services--style5 .inner-container {
    display: flex; flex-direction: column; gap: 48px;
}
body.style-style5 .svc-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
body.style-style5 .svc-block--reverse .svc-block__media { order: 2; }
body.style-style5 .svc-block__media {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
}
body.style-style5 .svc-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.style-style5 .svc-block__name {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 10px;
}
body.style-style5 .svc-block__tagline { color: #5a4442; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 16px; margin: 0 0 14px; }  /* S5 v2: prose subhead unified to Jost */
body.style-style5 .svc-block__text { color: #5a4442; font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
body.style-style5 .svc-block__actions { display: flex; flex-wrap: wrap; gap: 14px; }
body.style-style5 .svc-block__btn {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 26px;
    border-radius: 4px;
    text-decoration: none;
}
body.style-style5 .svc-block__btn--solid { background: var(--primary); color: #fff; border: 2px solid transparent; }   /* white on brown = 8.64; ⑥ transparent border => equal height vs --outline */
body.style-style5 .svc-block__btn--solid:hover { background: #51322f; }
body.style-style5 .svc-block__btn--outline {
    background: transparent; color: var(--primary); border: 2px solid var(--primary);
}
body.style-style5 .svc-block__btn--outline:hover { background: var(--primary); color: #fff; }
@media (max-width: 860px) {
    body.style-style5 .svc-block { grid-template-columns: 1fr; gap: 22px; }
    body.style-style5 .svc-block--reverse .svc-block__media { order: 0; }
}

/* ===========================================================================
   PHASE D4 -- SHOP page (shared shop.html, style5-scoped): toolbar + 3-product grid.
   FIRST cut; Cowork refines vs grab.
   ========================================================================== */
body.style-style5 .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ecddd8;
}
body.style-style5 .shop-toolbar #shopSort {
    border: 1px solid #cdbcb7;
    background: #fff;
    color: #3F2625;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
}
body.style-style5 .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
body.style-style5 .product-card { text-align: center; }
body.style-style5 .product-card__image {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 16px;
}
body.style-style5 .product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.style-style5 .product-card__name { margin: 0 0 8px; }
body.style-style5 .product-card__name a {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 20px;
    text-decoration: none;
}
body.style-style5 .product-card__price {
    color: #3F2625;
    font-weight: 700;
    font-size: 18px;
    margin: 6px 0 14px;
}
body.style-style5 .product-card .btn-primary,
body.style-style5 .product-card .product-buy-btn {
    background: var(--primary);
    color: #fff;   /* white on brown = 8.64 */
    border-radius: 4px;
    text-transform: uppercase;  /* S5 v2: ALL CAPS, consistent CTA style */
    letter-spacing: 0.06em;
    font-weight: 700;
}
body.style-style5 .product-card .btn-primary:hover,
body.style-style5 .product-card .product-buy-btn:hover { background: #51322f; }
@media (max-width: 860px) {
    body.style-style5 .products-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
    body.style-style5 .products-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PHASE D5 -- GALLERY (Before/After) page. gallery.css is shared -> style5 overrides
   scoped body.style-style5 .cmh-gallery-*. Banner already styled (D1). FIRST cut.
   ========================================================================== */
body.style-style5 .cmh-gallery-section { background: #fff; padding: 40px 0; }
body.style-style5 .cmh-gallery-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
body.style-style5 .cmh-gallery-heading {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 36px;
    text-align: center;
    margin: 0 0 12px;
}
body.style-style5 .cmh-gallery-intro {
    color: #5a4442;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 20px;
    line-height: 1.7;
}
body.style-style5 .cmh-gallery-disclaimer {
    background: #F5E5E1;
    color: #5a4442;
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto 28px;
    max-width: 900px;
}
body.style-style5 .cmh-gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px; }
body.style-style5 .cmh-gallery-filter__chip {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    border: 1px solid #cdbcb7;
    border-radius: 20px;
    padding: 7px 18px;
    text-decoration: none;
}
body.style-style5 .cmh-gallery-filter__chip--active,
body.style-style5 .cmh-gallery-filter__chip:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
body.style-style5 .cmh-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
body.style-style5 .cmh-gallery-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ecddd8;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .2s;
}
body.style-style5 .cmh-gallery-card:hover { box-shadow: 0 8px 24px rgba(63,38,37,0.12); }
body.style-style5 .cmh-gallery-card__images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
body.style-style5 .cmh-gallery-card__img {
    width: 100%;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover;
    display: block;
}
body.style-style5 .cmh-gallery-card__body { padding: 18px 20px; text-align: center; }
body.style-style5 .cmh-gallery-card__title {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 20px;
    margin: 0 0 6px;
}
body.style-style5 .cmh-gallery-card__meta { color: #8a7470; font-size: 13px; }
@media (max-width: 768px) {
    body.style-style5 .cmh-gallery-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PHASE D6 -- BOOK ONLINE (/appointment): feature-rows band + wizard brand styling.
   appt-* wizard CSS is shared (inner-pages.css) -> scoped overrides here. FIRST cut.
   ========================================================================== */

/* ---------- feature-rows band (4 teal-circle icon features) ---------- */
body.style-style5 .appt-features--style5 { background: #fff; padding: 40px 0; }
body.style-style5 .appt-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
body.style-style5 .appt-feature { text-align: center; }
body.style-style5 .appt-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);   /* F: was teal; mauve-brown circle on the white appt page */
    color: #fff;   /* white on #694140 = 8.64 */
    font-size: 26px;
    margin-bottom: 16px;
}
body.style-style5 .appt-feature__title {
    font-family: 'Jost', sans-serif;
    color: var(--primary);
    font-size: 20px;
    margin: 0 0 8px;
}
body.style-style5 .appt-feature__text { color: #5a4442; font-size: 14px; line-height: 1.6; }

/* ---------- wizard: brand the progress, cards, calendar, pills, buttons ---------- */
body.style-style5 .appt-progress__step.active .appt-progress__dot,
body.style-style5 .appt-progress__step--done .appt-progress__dot { background: var(--primary); color: #fff; }
body.style-style5 .appt-type-card:hover,
body.style-style5 .appt-type-card.selected { border-color: var(--primary); }
body.style-style5 .appt-type-card__icon { color: var(--primary); }
body.style-style5 .appt-doctor-card__select,
body.style-style5 .appt-service-card__select,
body.style-style5 .appt-btn-continue {
    background: var(--primary);
    color: #fff;   /* white on brown = 8.64 */
    border-radius: 4px;
}
body.style-style5 .appt-doctor-card__select:hover,
body.style-style5 .appt-service-card__select:hover,
body.style-style5 .appt-btn-continue:hover { background: #51322f; }
body.style-style5 .appt-back { color: var(--primary); }
body.style-style5 .appt-cal-cell--selected { background: var(--primary) !important; color: #fff !important; }
body.style-style5 .appt-cal-cell--today { border-color: var(--primary) !important; }
body.style-style5 .appt-cal-cell__dot { background: var(--primary) !important; }
body.style-style5 .appt-time-pill--selected { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
body.style-style5 .appt-form__input:focus { border-color: var(--primary); outline: none; }

@media (max-width: 860px) {
    body.style-style5 .appt-features__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
    body.style-style5 .appt-features__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   POLISH (P4) -- QUICKLINKS inner-page bar: 3 thin OUTLINE buttons on white (grab);
   NO blue, NO "Call Us" (the tel block is template-gated off for style5, and the
   per-item inline data-bg JS is skipped for style5 -> CSS governs the palette).
   Beats the base.html inline <style> !important pins (section.quicklinks /
   .quicklinks__inner / .quicklinks__item / __text). Icons already display:none
   in base.html (grab = text-only). AA: --primary brown on white = 8.64; hover
   white on --primary = 8.64. Both PASS.
   ========================================================================== */
body.style-style5 section.quicklinks { background: #fff !important; padding-top: 14px !important; padding-bottom: 0 !important; }  /* S5 design-notes 2026-07-09 (hotfix): hero-bottom -> button top = 42px (14 + inner 28). hotfix2: padding-bottom 48->0 so button bottom -> welcome heading = 36px; (0,2,1) beats shared --cmh-section-y block */
body.style-style5 .quicklinks__inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 28px 24px !important;
    max-width: 1100px;
    margin: 0 auto !important;
    overflow: visible !important;
}
body.style-style5 .quicklinks__item {
    flex: 0 1 280px !important;
    background: transparent !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 2px;
    padding: 16px 20px !important;
    font-family: 'Montserrat', sans-serif;
    transition: background 0.25s ease, color 0.25s ease;
}
body.style-style5 .quicklinks__item:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
body.style-style5 .quicklinks__text {
    color: inherit !important;
    font-size: 16px !important;   /* P-v3 Fix4: styleguide body size (base forces 14px) */
    font-weight: 600 !important;
    letter-spacing: 0.02em;  /* S5 v2: quicklink tiles stay Title Case (per RB verify); uppercase reverted */
}
/* P-v3 Fix3: show the icons (base.html pins display:none) + brand brown (was teal var(--accent)) */
body.style-style5 .quicklinks__icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
body.style-style5 .quicklinks__icon i { color: var(--primary) !important; }
/* P-v3 Fix5: drop the "Foundation" pill (base/always-included tier = noise);
   keep Complete/Growth+. style5-only -> style1-4 demos + shared template untouched. */
body.style-style5 .plan-badge.plan-foundation { display: none !important; }
@media (max-width: 600px) {
    body.style-style5 .quicklinks__item { flex: 1 1 100% !important; }
}

/* ===========================================================================
   content-round (Part D, v17) -- /gallery = vertical STACK of drag-to-compare
   cmh-ba-sliders (the real grab-line component). Theme the base slider (gallery.css)
   to the rose/mauve palette for style5 only: brown divider + handle ring + arrows,
   white handle bg for contrast on any photo. No teal.
   ========================================================================== */
body.style-style5 .s5-ba-stack {
    max-width: 760px; margin: 0 auto 28px;
    display: flex; flex-direction: column; gap: 48px;
}
body.style-style5 .s5-ba-item { }
body.style-style5 .s5-ba__title {
    font-family: 'Jost', sans-serif; color: var(--primary);
    font-size: 26px; text-align: center; margin: 0 0 14px;
}
body.style-style5 .s5-ba__desc {
    color: #5a4442; text-align: center; max-width: 640px; margin: 12px auto 0; line-height: 1.6;
}
body.style-style5 .s5-ba__caption {
    text-align: center; margin: 10px 0 0; color: var(--primary);
    font-family: 'Montserrat', sans-serif; font-size: 13px; letter-spacing: 0.04em;
}
body.style-style5 .s5-ba__tag { font-weight: 700; text-transform: uppercase; }
body.style-style5 .s5-ba__pair-static {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 8px; overflow: hidden;
}
body.style-style5 .s5-ba__pair-static img {
    width: 100%; aspect-ratio: 3 / 4 !important; height: auto !important; object-fit: cover; display: block;
}
/* theme the cmh-ba-slider (base gallery.css is white/neutral; (0,2,1) beats (0,1,0)) */
body.style-style5 .cmh-ba-slider__divider { background: var(--primary); }
body.style-style5 .cmh-ba-slider__handle { background: #fff; border-color: var(--primary); }
body.style-style5 .cmh-ba-slider__handle svg { stroke: var(--primary); }

/* =============================================================================
   STYLE 5 TESTER ROUND-1 (2026-06-19) — items ① and ⑦, deliberately style5-scoped
   (do NOT touch the SHARED .header__inner or .page-banner height; these add
   body.style-style5 overrides so styles 1-4/6 are unaffected).
   ============================================================================= */
/* ① logo <-> hero-title left alignment: the style5 hero content uses padding-left:5%
   (above). The shared header is full-width padding:0 16px (base.html), so the logo sits
   at 16px while the hero title sits at 5%. Re-pad the style5 header so the logo's left
   edge matches the hero content's 5% inset. Verify logo.left == heroTitle.left (±2px). */
/* the header is a centered max-width:1200 container (left≈83 on 1366), so padding alone
   can't reach the hero's 5% (=68); make the style5 header full-width + 5% inset so the
   logo's left edge == the hero title's left edge. */
body.style-style5 .header__inner { max-width: none !important; padding-left: 5% !important; }

/* ⑦ banner height (style5-scoped, +25% over the shared 240px) + responsive. Recompress
   was a no-op (all style5 banner images already 50-88KB < 300KB). Pairs with ⑤. */
body.style-style5 .page-banner { height: 300px !important; }
@media (max-width: 900px) { body.style-style5 .page-banner { height: 210px !important; } }

/* ⑧ newsletter band — style5 tokens (blush eyebrow/rule on a light section; brown CTA). */
body.style-style5 .newsletter--style5 { background: #FBF4F2; padding: 32px 0; text-align: center; }
body.style-style5 .newsletter--style5 .container { max-width: 680px; }
body.style-style5 .newsletter--style5 .newsletter__eyebrow {
    color: var(--primary); font-family: 'Montserrat', sans-serif; font-size: 13px;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px;
}
body.style-style5 .newsletter--style5 .newsletter__rule { width: 50px; height: 3px; background: var(--primary); margin: 0 auto 18px; border-radius: 2px; }
body.style-style5 .newsletter--style5 .newsletter__heading { color: var(--primary); font-size: 32px; margin: 0 0 12px; }
body.style-style5 .newsletter--style5 .newsletter__text { color: #5a4442; font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
body.style-style5 .newsletter--style5 .newsletter__form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.style-style5 .newsletter--style5 .newsletter__input {
    flex: 1 1 320px; max-width: 360px; background: #fff; border: 1px solid rgba(63,38,37,.30);
    border-radius: 4px; padding: 12px 14px; font-family: 'Montserrat', sans-serif; color: #3F2625;
}
body.style-style5 .newsletter--style5 .newsletter__btn {
    background: var(--primary); color: #fff; border: 2px solid var(--primary); border-radius: 4px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase;
    letter-spacing: .06em; padding: 12px 28px; cursor: pointer;
}
body.style-style5 .newsletter--style5 .newsletter__btn:hover { background: #51322f; }
body.style-style5 .newsletter--style5 .newsletter__privacy { color: #8a7270; font-size: 12px; margin: 16px 0 0; }
body.style-style5 .newsletter--style5 .newsletter__msg { margin: 12px 0 0; font-size: 14px; }

/* =============================================================================
   S5 v2 TRACK B (EB/Ryan markup, 2026-06-27) — all scoped body.style-style5.
   ============================================================================= */

/* p6/p10 FOOTER (#6 fix, 2026-06-29): hold the base 4-col grid down to ~900px; below
   that, 2-col (never a long single-column stack). Desktop (>1024) unchanged.
   BUG FIX: base.html's inline reflow (601-1024px) pins
   `.footer__col:nth-child(n){grid-area:logo/quick/services/contact !important}`. Track B
   set `grid-template-areas:none` but did NOT neutralize those pins, so across 601-1024px
   all 4 columns resolved to orphaned named areas and COLLAPSED into one cell (overlap —
   reproduced via live cascade-sim: 4 identical rects, all pairs overlapping). Reset the
   orphaned grid-area to auto so columns auto-flow into this grid. style5-scoped; other
   styles use base.html's coherent named-area reflow and are untouched. */
@media (max-width: 1024px) and (min-width: 901px) {
    body.style-style5 .footer__grid { grid-template-columns: repeat(4, 1fr) !important; grid-template-areas: none !important; }
    body.style-style5 .footer__col:nth-child(1),
    body.style-style5 .footer__col:nth-child(2),
    body.style-style5 .footer__col:nth-child(3),
    body.style-style5 .footer__col:nth-child(4) { grid-area: auto !important; }
}
@media (max-width: 900px) {
    body.style-style5 .footer__grid { grid-template-columns: 1fr 1fr !important; grid-template-areas: none !important; text-align: left; }
    body.style-style5 .footer__col:nth-child(1),
    body.style-style5 .footer__col:nth-child(2),
    body.style-style5 .footer__col:nth-child(3),
    body.style-style5 .footer__col:nth-child(4) { grid-area: auto !important; }
}

/* p11 BOLD LEAD-IN: bold the first line of the "Meet Our Team" intro body — reads
   like the subheads. Covers the /team page intro + the home meet-team band body. */
body.style-style5 .team--style5 .section-intro::first-line,
body.style-style5 .why-choose--style5 .why-choose__body::first-line { font-weight: 700; }

/* p13 DELETE THE DECORATIVE RULES: newsletter accent bar + the bars under the
   contact "Leave Us a Message" / "Address" headings ("slows the read"). Structural
   dividers (topbar/shop-toolbar borders) untouched. */
body.style-style5 .newsletter--style5 .newsletter__rule,
body.style-style5 .contact-section .section-underline { display: none !important; }

/* p13 OPEN BOX -> warm grey (was white + brown border). */
body.style-style5 .newsletter--style5 .newsletter__input { background: #F1EFEE; border-color: #C9C3C0; }
body.style-style5 .newsletter--style5 .newsletter__input:focus { border-color: var(--primary); outline: none; }

/* p5 ACCREDITATIONS: recolor the heavy dark-brown band to soft blush with dark
   text (was white-on-#694140); the value line + single CTA are added in the
   template. Keep the 3 award chips. AA: --primary #694140 on #F5E5E1 = 7.07. */
body.style-style5 .accreditations--style5 { background: #F5E5E1; }
body.style-style5 .accreditations--style5 .accreditations__heading { color: var(--primary); }
body.style-style5 .accreditations--style5 .accreditations__item { color: var(--primary); }
body.style-style5 .accreditations--style5 .accreditations__sep { color: #b79f9a; }
body.style-style5 .accreditations--style5 .accreditations__value {
    color: #5a4442; font-family: 'Jost', sans-serif; font-size: 18px; line-height: 1.5;
    max-width: 640px; margin: 14px auto 22px;
}
body.style-style5 .accreditations--style5 .accreditations__cta {
    display: inline-block; background: var(--primary); color: #fff;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.06em; padding: 13px 30px;
    border-radius: 4px; text-decoration: none;
}
body.style-style5 .accreditations--style5 .accreditations__cta:hover { background: #51322f; }

/* p8/p9 SQUARES: tighten the before/after gallery grid gap (was 32px) so the cards
   read as one set, not disjointed. */
body.style-style5 .cmh-gallery-grid { gap: 16px; }

/* =============================================================================
   S5 REVIEW (EB markup, 2026-06-29) — all scoped body.style-style5. The demo-box +
   FAQ live in SHARED style1 includes, so these are CSS-only overrides (no template
   edit -> styles 1-4/6/7 byte-identical).
   ============================================================================= */

/* #5 demo-box: remove the (i) info icon above "This is a Demo Site". (Inline-styled
   in the shared style1 contact include; hide for style5 only.) */
body.style-style5 .contact-section .fa-circle-info { display: none !important; }
/* #4 demo-box: add space between the demo copy and the SELECT THIS STYLE button. The
   select-style anchor is the only btn-primary with that href (not the form Send btn). */
body.style-style5 .contact-section a.btn-primary[href*="select-style"] { margin-top: 16px !important; }

/* #12 FAQ: open answer box -> soft blush/ivory tint (was bare; reviewer wants a color).
   #FBF1EE; answer text -> warm brown #5a4442 (8.08:1 AA). Rounded to read as a panel. */
body.style-style5 .faq-accordion__answer {
    background: #FBF1EE;
    color: #5a4442;
    border-radius: 0 0 8px 8px;
}
body.style-style5 .faq-accordion__answer p { color: #5a4442; }
/* #13 FAQ: remove the decorative hairline under "Why People Choose Us?" (the FAQ-page
   left column heading). Scoped to .faq-section so other section-underlines are kept. */
body.style-style5 .faq-section .section-underline { display: none !important; }

/* =============================================================================
   BOOK NOW CTA (S5 align 2026-06-29) — services/about CTA band (full contact form
   moved to /contact only). Blush band, Jost heading, mauve-brown button (white text
   on #694140 = 8.64 AA). Scoped body.style-style5.
   ============================================================================= */
body.style-style5 .book-now-cta { background: #FBF4F2; padding: 56px 20px; text-align: center; }
body.style-style5 .book-now-cta__heading { font-family: 'Jost', sans-serif; color: var(--primary); font-size: 1.9rem; margin: 0 0 12px; }
body.style-style5 .book-now-cta__text { color: #5a4442; margin: 0 auto 24px; max-width: 52ch; line-height: 1.6; }
body.style-style5 .book-now-cta__btn {
    display: inline-block; padding: 13px 32px; background: var(--primary); color: #fff;
    border-radius: 4px; font-family: 'Montserrat', sans-serif; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
body.style-style5 .book-now-cta__btn:hover { background: #51322f; color: #fff; }

/* =============================================================================
   WHY-CHOOSE = benefits/value-prop loop (S5 align 2026-06-29; mirror style7). Team
   content (heading + photo) moved to /team only. The band stays mauve-brown
   (.why-choose--style5 = var(--primary)); restore padding (old team rule pinned 0)
   + benefits grid with white text (white-on-#694140 = 8.64 AA). Scoped body.style-style5.
   ============================================================================= */
body.style-style5 .why-choose--style5 { padding: 64px 20px !important; }
body.style-style5 .why-choose--style5 .why-choose__label { color: #f0e3df; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; text-align: center; }
body.style-style5 .why-choose--style5 .why-choose__heading { color: #fff; text-align: center; margin: 6px 0 0; }
body.style-style5 .why-choose--style5 .why-items {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    max-width: 1100px; margin: 36px auto 0;
}
@media (max-width: 860px) { body.style-style5 .why-choose--style5 .why-items { grid-template-columns: 1fr; gap: 20px; } }
body.style-style5 .why-choose--style5 .why-item { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 26px 24px; text-align: center; }
body.style-style5 .why-choose--style5 .why-item__icon { font-size: 1.8rem; color: #f0e3df; margin-bottom: 12px; }
body.style-style5 .why-choose--style5 .why-item__icon img { width: 40px; height: 40px; filter: brightness(0) invert(1); }
body.style-style5 .why-choose--style5 .why-item__title { font-family: 'Jost', sans-serif; color: #fff; margin: 0 0 8px; font-size: 1.15rem; }
body.style-style5 .why-choose--style5 .why-item__text { color: #f0e3df; font-size: .92rem; line-height: 1.6; margin: 0; }

/* =============================================================================
   S5 v3 HOME POLISH (2026-06-30) — 48px section-spacing standard + card-grid centering.
   --cmh-section-y is the documented token; applied top+bottom to every home content
   section (horizontal padding stays per-style). Hero is full-bleed (rhythm delivered by
   quicklinks padding-top). Kills the quicklinks -30px hero-overlap. why-items -> flex
   so the orphan 4th card centers. All body.style-style5.
   ============================================================================= */
body.style-style5 { --cmh-section-y: 48px; }
body.style-style5 .quicklinks, body.style-style5 .welcome, body.style-style5 .departments,
body.style-style5 .services--style5, body.style-style5 .cmh-gallery-section,
body.style-style5 .cmh-gallery-preview, body.style-style5 .why-choose, body.style-style5 .why-choose--style5,
body.style-style5 .newsletter, body.style-style5 .newsletter--style5, body.style-style5 .testimonial {
    padding-top: var(--cmh-section-y) !important;
    padding-bottom: var(--cmh-section-y) !important;
}
body.style-style5 .quicklinks { margin-top: 0 !important; }
/* card grid: equal row/col gap + center orphan last row (4 cards -> lone bottom card centered) */
body.style-style5 .why-choose--style5 .why-items {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 28px;
}
body.style-style5 .why-choose--style5 .why-item { flex: 0 1 300px; max-width: 320px; }
@media (max-width: 860px) { body.style-style5 .why-choose--style5 .why-item { flex: 0 1 100%; } }

/* WCAG AA: testimonial role off teal --accent (3.56:1) -> muted white (6.75:1), mirrors style7's rgba(255,255,255,0.72). !important beats style.css:1358 var(--accent). */
body.style-style5 .testimonial__role { color: rgba(255,255,255,0.75) !important; }


/* X1 (2026-07): why-item body text was 4.39:1 on the mauve panel — lift to AA. */
body.style-style5 .why-choose--style5 .why-item__text { color: #f7f0ef !important; }