/* ==========================================================================
   Primitive Health Care - site theme, 31 Oct 2026
   A flat, bright restyle in the spirit of shukhee.com: plum carries the
   brand, soft pink carries the surfaces, near-black text, white cards with
   hairline borders instead of shadows, small radii with pill-shaped chips,
   system typography.

   Palette taken from shukhee.com's own stylesheet variables. Their code
   calls the cyan "primary", but it only paints two buttons - what the eye
   reads as the brand is the plum #9B468A and the pale pink #FAE4F6 on the
   cards, borders and backgrounds. This file follows the eye, so plum leads
   and the cyan is kept back for secondary actions.

   Every colour below is a variable - say the word and any of them changes
   in one line.
   ========================================================================== */

:root {
    /* Cyan blue - buttons, highlights, links and icons. */
    --t-primary:        #33C2DF;
    --t-primary-dark:   #1AA3C0;   /* hover / pressed                     */
    --t-primary-ink:    #0B6274;   /* cyan dark enough to read as text    */

    /* Primary purple - logo, main headings and branding. */
    --t-brand:          #9B468A;
    --t-brand-dark:     #7E3770;
    --t-accent:         #9B468A;

    /* Pinks. */
    --t-accent-soft:    #F7EAF2;   /* light pink - hero backgrounds       */
    --t-primary-soft:   #F9EFF6;   /* soft pink - cards, chips, tints     */

    --t-ink:            #171717;   /* strong headings                     */
    --t-ink-2:          #6B6B6B;   /* grey - paragraphs, secondary text   */
    --t-ink-3:          #6B6B6B;   /* grey - meta and captions            */
    --t-line:           #EFE2EB;   /* pink-tinted hairline borders        */

    --t-surface:        #FFFFFF;   /* navigation, cards, clean space      */
    --t-tint:           #F7EAF2;   /* light pink - hero sections          */
    --t-tint-2:         #F9EFF6;   /* soft pink - secondary backgrounds   */

    --t-r-sm:  4px;
    --t-r:     8px;
    --t-r-lg:  12px;
    --t-pill:  999px;

    --t-container: 1248px;

    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

/* ---------- 1. Typography and base ---------------------------------- */

body,
body p,
body li,
body span,
body a,
body div,
body label,
body input,
body select,
body textarea,
body button {
    font-family: var(--t-font) !important;
}

body {
    font-size: 16px !important;
    line-height: 1.6;
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--t-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(28px, 3.4vw, 38px) !important; line-height: 1.2 !important; font-weight: 700 !important; }
h2 { font-size: clamp(22px, 2.2vw, 26px) !important; line-height: 1.3 !important; }
h3 { font-size: 20px !important; line-height: 1.35 !important; }
h4 { font-size: 18px !important; line-height: 1.4 !important; }

p { color: var(--t-ink-2); }

a { color: var(--t-primary-ink); }
a:hover { color: var(--t-primary-dark); }

/* Section headings: a short cyan rule under the title, flat, no flourish. */
.global-heading h2,
.global-heading h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 8px;
}
.global-heading h2::after,
.global-heading h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: var(--t-pill);
    background: var(--t-primary) !important;
}
.global-heading.text-center h2::after,
.global-heading.text-center h3::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- 2. Layout rhythm ---------------------------------------- */

.container { max-width: var(--t-container); }

/* Alternating bands, tint instead of borders or shadows. */
.doctorl-main-box,
.faq-main-box,
.services-main-box { background: var(--t-surface); }

.appointment-section { background: var(--t-tint) !important; }

/* ---------- 3. Header and navigation -------------------------------- */

.navbar { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-line); }

.navbar .nav-link {
    color: var(--t-ink) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    border-radius: var(--t-r-sm);
}
.navbar .nav-link:hover { color: var(--t-primary-ink) !important; background: var(--t-primary-soft); }
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link { color: var(--t-primary-ink) !important; font-weight: 600 !important; }

.top-right-text p { color: var(--t-ink-2) !important; font-size: 14px !important; }

/* ---------- 4. Buttons ---------------------------------------------- */

.btn {
    border-radius: var(--t-r) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 18px !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary,
.btn-success,
button[type="submit"]:not(.btn-outline-primary):not(.btn-outline-secondary) {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--t-line) !important;
    color: var(--t-ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-secondary:hover {
    border-color: var(--t-primary) !important;
    color: var(--t-primary-ink) !important;
    background: var(--t-primary-soft) !important;
}

.btn-sm { padding: 7px 12px !important; font-size: 13px !important; }

/* Pills for anything that reads as a chip or a badge. */
.rounded-pill,
.badge,
.phc-ch-badge,
.phc-dcs-years,
.phc-dcs-spec { border-radius: var(--t-pill) !important; }

.badge,
.phc-ch-badge {
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-ink) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border: none !important;
}

/* ---------- 5. Forms ------------------------------------------------- */

.form-control,
.form-select,
select.form-control,
textarea.form-control {
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    box-shadow: none !important;
    height: auto !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--t-primary) !important;
    box-shadow: 0 0 0 3px rgba(155, 70, 138, .16) !important;
    outline: none !important;
}
.form-control::placeholder { color: #9CA3AF !important; }

label, .form-label { color: var(--t-ink-2) !important; font-size: 14px !important; font-weight: 500 !important; }

/* ---------- 6. Cards ------------------------------------------------- */
/* Flat: a hairline border carries the edge, shadow only on hover.        */

.card,
.phc-chs-card,
.phc-dcs-card,
.phc-jrny-card,
.services-part-box,
.text-detail-box,
.pbl-video-card,
.faq-item {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-lg) !important;
    box-shadow: none !important;
}

.phc-lift:hover,
.card:hover,
.phc-chs-card:hover,
.phc-dcs-card:hover {
    border-color: #EFCDE8 !important;
    box-shadow: 0 6px 20px rgba(23, 23, 23, .07) !important;
    transform: none !important;
}

.phc-chs-name,
.phc-dcs-name { color: var(--t-ink) !important; font-weight: 600 !important; font-size: 17px !important; }

.phc-chs-loc,
.phc-chs-hours,
.phc-dcs-meta,
.phc-dcs-fee { color: var(--t-ink-3) !important; font-size: 14px !important; }

.phc-dcs-fee strong,
.phc-dcs-fee b { color: var(--t-primary-ink) !important; }

/* Numbered journey steps: cyan ring, flat fill. */
.phc-jrny-num,
.phc-bk-num {
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-ink) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: var(--t-pill) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.phc-jrny-ic { color: var(--t-primary) !important; }
.phc-jrny-badge {
    background: var(--t-accent-soft) !important;
    color: var(--t-accent) !important;
    border-radius: var(--t-pill) !important;
    font-weight: 600 !important;
}

/* Treatment / department tiles. */
.services-part-box h4,
.text-detail-box h4,
.department-link { color: var(--t-ink) !important; font-weight: 600 !important; }
.department-link:hover { color: var(--t-primary-ink) !important; }

/* Icons that were brand-teal become the accent cyan. */
.fas, .far, .fab { color: inherit; }
.phc-chs-bico i,
.phc-jrny-ic i,
.services-part-box i { color: var(--t-primary) !important; }

/* ---------- 7. Hero and the booking card ----------------------------- */

.header-appo-main-box {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-lg) !important;
    box-shadow: 0 10px 30px rgba(23, 23, 23, .06) !important;
    padding: 24px !important;
}
.header-appo-main-box h1 { font-size: 24px !important; font-weight: 700 !important; margin-bottom: 16px !important; }

.phc-banner-tag { color: var(--t-primary-ink) !important; }

/* ---------- 8. FAQ ---------------------------------------------------- */

.faq-item { margin-bottom: 10px; }
.faq-question { color: var(--t-ink) !important; font-weight: 600 !important; font-size: 16px !important; }
.faq-icon { color: var(--t-primary) !important; }
.faq-answer p { color: var(--t-ink-2) !important; font-size: 15px !important; }

/* ---------- 9. Reviews ------------------------------------------------ */

.phc-rv {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-lg) !important;
    box-shadow: none !important;
}

/* ---------- 10. Footer ------------------------------------------------ */

/* The footer's own wrapper is .footer-part-main-box - there is no <footer>
   element on this site, so every rule here has to name that class. */
footer, .footer-main-box, .footer-part-main-box { background: #0F1113 !important; }

footer h3,
.footer-r1-detail h3,
.footer-part-main-box h3 { color: #fff !important; font-size: 16px !important; font-weight: 600 !important; }

footer p, footer li, footer a,
.footer-part-main-box p,
.footer-part-main-box li,
.footer-part-main-box a { color: #B9BEC4 !important; font-size: 15px !important; }

footer a:hover,
.footer-part-main-box a:hover { color: var(--t-primary) !important; }

/* Their rules for these two carry !important and two classes, so match it. */
.subcribe-button-box button {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-r) !important;
}
.subcribe-button-box button:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

.footer-icon-box,
.footer-icons-main-box .footer-icon-box {
    background: rgba(255, 255, 255, .08) !important;
    border-radius: var(--t-pill) !important;
}
.footer-icon-box:hover,
.footer-icons-main-box .footer-icon-box:hover { background: var(--t-primary) !important; }
.footer-icon-box a, .footer-icon-box i { color: #fff !important; }

/* ---------- 11. Landing pages (pbl-) ---------------------------------- */

.pbl-help-phone,
.pbl-help-cta,
.pbl-sticky-call {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-r) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.pbl-help-phone:hover,
.pbl-help-cta:hover,
.pbl-sticky-call:hover { background: var(--t-primary-dark) !important; }

.pbl-sticky-book {
    background: var(--t-accent) !important;
    border: 1px solid var(--t-accent) !important;
    color: #fff !important;
    border-radius: var(--t-r) !important;
}

/* ---------- 11b. Newer hero components -------------------------------- */
/* The redesigned hero uses its own blue; bring it onto the cyan.         */

.phc-hero-call,
.phc-hero-call--in-copy {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-pill) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.phc-hero-call:hover { background: var(--t-primary-dark) !important; border-color: var(--t-primary-dark) !important; }

.btn-dark,
.btn-dark.btn-lg {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.btn-dark:hover { background: var(--t-primary-dark) !important; border-color: var(--t-primary-dark) !important; }

/* The booking card's coloured header band. */
.header-appo-main-box > h1:first-child,
.header-appo-main-box .card-header {
    background: var(--t-primary) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-r-lg) var(--t-r-lg) 0 0 !important;
}

.phc-magnet { box-shadow: none !important; }

/* ---------- 11c. The last two blues ----------------------------------- */
/* The newest sections still carry #2563EB and Bootstrap's #0D6EFD.       */

/* "Book Your Appointment" band on the hero card - it is a gradient, so   */
/* background-image has to be replaced, not background-color.             */
.header-appo-main-box h2 {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
    color: var(--t-ink) !important;
}

/* Chamber cards. */
.phc-chs-bico {
    color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
}
.phc-chs-explore,
.phc-chs-call {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phc-chs-explore:hover,
.phc-chs-call:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}
.phc-chs-dir { border-color: var(--t-line) !important; }
.phc-chs-dir,
.phc-chs-dir i,
.text-primary,
.phc-chs-card .fa-map-marker-alt,
.phc-chs-card .fa-directions { color: var(--t-primary-ink) !important; }

/* ---------- 11d. Doctor cards, carousels, counter band ---------------- */

.phc-dcs-explore,
.phc-dcs-book {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phc-dcs-explore:hover,
.phc-dcs-book:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

.phc-dcs-call {
    color: var(--t-primary-ink) !important;
    border-color: var(--t-line) !important;
}
.phc-dcs-call i { color: var(--t-primary-ink) !important; }
.phc-dcs-call:hover {
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
}

.phc-dcs-years { color: var(--t-ink-3) !important; }

/* The round photo on a doctor card: cyan tint instead of the blue one. */
.phc-dcs-imgwrap { background: #FFF7FC !important; }
.phc-dcs-imgwrap img { border-color: var(--t-primary-soft) !important; }

/* Carousel arrows: outline, not filled. */
.phc-chs-arrow,
.phc-dcs-arrow,
.pbl-video-prev,
.pbl-video-next {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    color: var(--t-primary-ink) !important;
    box-shadow: none !important;
}
.phc-chs-arrow i,
.phc-dcs-arrow i,
.pbl-video-prev i,
.pbl-video-next i { color: var(--t-primary-ink) !important; }
.phc-chs-arrow:hover,
.phc-dcs-arrow:hover,
.pbl-video-prev:hover,
.pbl-video-next:hover {
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
}

.phc-jrny-arrow { border-color: var(--t-primary) !important; color: var(--t-primary) !important; }

.faq-question.active { border-color: var(--t-primary) !important; color: var(--t-primary-ink) !important; }

/* The statistics band was navy; a deep teal keeps it on the one hue. */
.numbers-counter-main-box { background: var(--t-primary-ink) !important; }
.numbers-counter-main-box h3,
.numbers-counter-main-box h2 { color: #fff !important; }
.numbers-counter-main-box p,
.numbers-counter-main-box span,
.numbers-counter-main-box li { color: #F6E3F2 !important; }

/* Anything still carrying the old blue inside the newer card sections. */
.phc-chs-card i,
.phc-dcs-card i,
.phc-jrny-card i { color: var(--t-primary) !important; }

/* The counter cells reuse the review-card class, which section 9 paints
   white. Inside the teal band they have to stay see-through, or the
   figures sit on a white tile and vanish. */
.numbers-counter-main-box .phc-rv {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
.numbers-counter-main-box .counter-value,
.numbers-counter-main-box .plus-sign { color: #fff !important; }
.numbers-counter-main-box p { color: rgba(255, 255, 255, .88) !important; }

/* ---------- 11e. The pc- block ("Why Primitive Health Care?") --------- */

.pc-btn-orange {
    background: var(--t-primary) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.pc-btn-orange:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
    color: var(--t-ink) !important;
}

.pc-section-title,
.pc-feature-title { color: var(--t-ink) !important; }
.pc-feature-number { color: var(--t-primary-ink) !important; }
.pc-feature-description { color: var(--t-ink-2) !important; }
.pc-highlight-box {
    background: var(--t-tint-2) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-lg) !important;
    box-shadow: none !important;
}

/* ---------- 11f. Last few strays -------------------------------------- */

.phc-dcs-bico {
    color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
}
.phc-dcs-bico i { color: var(--t-primary) !important; }

.phc-journey-tag,
.phc-jrny-down { color: var(--t-primary-ink) !important; }

.pbl-yt-play {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

/* ---------- 12. Odds and ends ----------------------------------------- */

hr { border-color: var(--t-line) !important; }

::selection { background: rgba(155, 70, 138, .18); }

/* Strip the heavy glows the current theme uses on hover. */
.focus-group:hover .focus-item { opacity: 1 !important; transform: none !important; }
.focus-group .focus-item:hover {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(23, 23, 23, .07) !important;
    background: var(--t-surface) !important;
}
.focus-group .focus-item:hover::after { display: none !important; }

/* ==========================================================================
   13. The inner pages
   The home page was built most recently; the other pages each arrived with
   a palette of their own - at least seven different blues, plus an orange
   call button and a purple badge. Everything below pulls those onto the
   plum and pink.

   Deliberately left alone: the WhatsApp green, the green ticks on the
   doctor pages, and the red / amber / green / purple feature tiles on the
   treatment pages, because there the colour carries meaning rather than
   branding.
   ========================================================================== */

/* ---------- 13a. Body copy ------------------------------------------- */
/* Several pages set their own slate for paragraphs. One grey everywhere. */

.phc-about-sub,
.phc-dl-role,
.phc-sp,
.phc-h-desc,
.phc-ch-addr,
.phc-comparison-note,
.phc-open-value,
p.subtitle { color: var(--t-ink-2) !important; }

.phc-h-spec-title,
.phc-comparison-label,
.phc-open-heading,
.phdoc-reg { color: var(--t-ink) !important; }

/* ---------- 13b. About us -------------------------------------------- */

.phc-about-mvv-icon {
    background: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phc-about-lead-role { color: var(--t-primary-ink) !important; }

/* ---------- 13c. Treatment and department pages ---------------------- */

.phc-sp-eyebrow,
.phc-sp-more { color: var(--t-primary-ink) !important; }

.phc-sp-btn,
.phc-sp-hero__book,
.phc-sp-steps__num,
.phc-btn-primary,
.phc-btn-call {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phc-sp-btn:hover,
.phc-sp-hero__book:hover,
.phc-btn-primary:hover,
.phc-btn-call:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

.phc-sp-doc,
.phc-sp-steps__item,
.phc-benefit { border-color: var(--t-line) !important; }

.phc-laser-heading { color: var(--t-primary-ink) !important; }
.phc-laser-value {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
    color: var(--t-ink) !important;
}

/* ---------- 13d. Doctor pages ---------------------------------------- */

.phdoc-primary,
.phdoc-active,
.call-btn {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phdoc-primary:hover,
.call-btn:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}
.phdoc-badge { color: var(--t-primary-ink) !important; }

.phc-dl-chip,
.phc-ch-chip {
    background: var(--t-primary-soft) !important;
    border-color: var(--t-line) !important;
    color: var(--t-primary-ink) !important;
}
.phc-dl-book {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.phc-dl-book:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}
.phc-dl-call {
    border-color: var(--t-line) !important;
    color: var(--t-primary-ink) !important;
}
.phc-dl-call:hover {
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
}
.phc-dl-card i,
.phc-dl-meta i,
.phc-h-card i { color: var(--t-primary) !important; }

/* ---------- 13e. Facilities, chambers, contact ----------------------- */

.dept-hcol-specs { border-color: var(--t-line) !important; }
.dept-hcol-specs-title { color: var(--t-primary-ink) !important; }

.contactpg-part2-main-box { background: var(--t-primary) !important; }

/* ---------- 13f. Service areas --------------------------------------- */

.service-area-hero {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
}
.service-area-hero h1,
.service-area-hero h2,
.service-area-hero p { color: #fff !important; }

.cta-call-btn {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
    color: var(--t-ink) !important;
}

/* ---------- 13g. Gallery tabs ---------------------------------------- */

.tab-btn {
    background: transparent !important;
    border-color: var(--t-line) !important;
    color: var(--t-ink) !important;
}
.tab-btn:hover {
    border-color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-ink) !important;
}
.tab-btn.active {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

/* ---------- 13h. Blog pagination ------------------------------------- */

.page-link {
    color: var(--t-primary-ink) !important;
    border-color: var(--t-line) !important;
}
.page-link:hover {
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-dark) !important;
}
.page-item.active .page-link {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

/* ---------- 13i. The Facebook landing pages (pbl-) ------------------- */

.pbl-stats,
.pbl-pill-hi {
    background: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.pbl-blue,
.pbl-hi { color: var(--t-primary-ink) !important; }

.pbl-doc-avatar {
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-ink) !important;
}
.pbl-help { background: #2E1529 !important; }

/* ---------- 13j. Leftover pale blue hairlines ------------------------ */
/* Old palette borders on images, chips and bare inputs.                 */

img[class*="phc-"],
input:not([type=checkbox]):not([type=radio]),
select,
textarea { border-color: var(--t-line) !important; }

/* ==========================================================================
   14. Site-wide sweep
   Section 13 named the components one by one. This catches the rest: the
   plain links, paragraphs and icons that each page coloured for itself.
   Buttons are untouched because their own class rules beat these, which is
   how a white label on a plum face survives.
   ========================================================================== */

/* ---------- 14a. Links ----------------------------------------------- */

a { color: var(--t-primary-ink) !important; }
a:hover { color: var(--t-primary-dark) !important; }

footer a,
.footer-part-main-box a { color: #B9BEC4 !important; }
footer a:hover,
.footer-part-main-box a:hover { color: var(--t-primary) !important; }

/* ---------- 14b. Body copy ------------------------------------------- */

p, li, dd { color: var(--t-ink-2) !important; }
p strong, p b, li strong, li b { color: var(--t-ink) !important; }

footer p, footer li,
.footer-part-main-box p,
.footer-part-main-box li { color: #B9BEC4 !important; }
.numbers-counter-main-box p,
.numbers-counter-main-box li { color: rgba(255, 255, 255, .88) !important; }

/* ---------- 14c. Icons ------------------------------------------------ */
/* A standalone icon takes the brand colour; one inside a button inherits
   the button's own, so a white icon on a plum button stays white.        */

i.fas, i.far, i.fab { color: var(--t-primary) !important; }

.btn i,
button i,
a[class*="btn"] i,
[class*="-cta"] i,
[class*="-call"] i,
[class*="-book"] i,
.footer-icon-box i,
.phc-hero-call i,
.service-area-hero i,
.numbers-counter-main-box i { color: inherit !important; }

span.icon { color: var(--t-primary) !important; }

/* ---------- 14d. Navy headings pages set for themselves --------------- */

.phdoc-share-label,
.phc-h-spec-title { color: var(--t-ink) !important; }

/* ---------- 14e. The last named leftovers ----------------------------- */

.phc-sp-cta { background: var(--t-primary) !important; }
.phc-sp-cta h1, .phc-sp-cta h2, .phc-sp-cta h3, .phc-sp-cta p { color: #fff !important; }
.phc-sp-faq { border-color: var(--t-line) !important; }
.phc-sp-doc__reg { color: var(--t-primary-ink) !important; }

.phc-h-rm { color: var(--t-primary-ink) !important; }

.pbl-doc-cta {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

.faq-head,
.faq-plus,
.cta-video-btn,
.phdoc-clinic-ic { color: var(--t-primary-ink) !important; }

/* The WhatsApp button had a blue border from the old palette. Say the
   word and this becomes WhatsApp's own green instead. */
.whatsapp-btn { border-color: var(--t-line) !important; }

img { border-color: var(--t-line) !important; }

h5.text-white { background: var(--t-primary) !important; }

/* ==========================================================================
   15. Final sweep
   The handful the first two passes did not reach, found by walking every
   page type and listing anything still outside the palette.
   ========================================================================== */

.faq-question { border-color: var(--t-line) !important; }

.phc-dl-meta,
.phc-dl-specs-label { color: var(--t-ink-2) !important; }

/* A link with a border kept its old pale blue edge. */
a { border-color: var(--t-line) !important; }

.whatsapp-btn { color: var(--t-primary-ink) !important; }

/* The round initials beside a doctor's name on the treatment pages. */
.phc-doc-avatar { background: var(--t-primary-soft) !important; }
.phc-doc-avatar span { color: var(--t-primary-ink) !important; }

.services-btn-main-box a {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
.services-btn-main-box a:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

/* The pinned bar at the top of the landing pages was a dark teal. */
.header-pinned > div { background: #2E1529 !important; }

select, summary { color: var(--t-ink) !important; }

/* ==========================================================================
   16. Text on dark surfaces
   Sections 1 and 14 give body copy and headings one colour, which is right
   on a white page and wrong on a dark band. These put the light text back.
   Buttons are left out on purpose - they carry their own colour.
   ========================================================================== */

/* The hero on the treatment pages sits on near-black. */
.phc-hero h1,
.phc-hero h2,
.phc-hero h3,
.phc-hero h4 { color: #fff !important; }
.phc-hero p,
.phc-hero li,
.phc-hero .phc-hero-sub { color: rgba(255, 255, 255, .88) !important; }

/* The service-area hero is a plum gradient. */
.service-area-hero h1,
.service-area-hero h2,
.service-area-hero h3 { color: #fff !important; }
.service-area-hero p,
.service-area-hero li,
.service-area-hero .subtitle { color: rgba(255, 255, 255, .9) !important; }

/* The plum panel on the contact page. */
.contactpg-part2-main-box h1,
.contactpg-part2-main-box h2,
.contactpg-part2-main-box h3,
.contactpg-part2-main-box h4 { color: #fff !important; }
.contactpg-part2-main-box p,
.contactpg-part2-main-box li,
.contactpg-part2-main-box a { color: rgba(255, 255, 255, .9) !important; }

/* The footer appears under two different wrapper names. */
.footer-main-box h1,
.footer-main-box h2,
.footer-main-box h3,
.footer-main-box h4 { color: #fff !important; }
.footer-main-box p,
.footer-main-box li,
.footer-main-box a,
.footer-bottom-main-box p { color: #B9BEC4 !important; }
.footer-main-box a:hover { color: var(--t-primary) !important; }

/* The pinned bar on the landing pages. */
.header-pinned p,
.header-pinned div,
.header-pinned span { color: #fff !important; }

/* The gradient fills read as transparent to a background check, so spell
   out the white on the two that carry one. */
.phc-laser-value,
.header-appo-main-box h2 { color: #fff !important; }

/* With cyan as the accent this badge was pale on pale. */
.phc-jrny-badge {
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-ink) !important;
}

/* ==========================================================================
   17. Corrections to 16
   Section 16 whitened text on the dark landing-page bar with a descendant
   selector, and the whole header sits inside that bar, so it also whitened
   the brand name on the white navbar. Scoped properly below.
   ========================================================================== */

/* Only the dark bar itself, not everything nested under it. */
.header-pinned p,
.header-pinned div,
.header-pinned span { color: inherit !important; }
.header-pinned > div { color: #fff !important; }

/* The brand never changes colour, whatever sits above it. */
.navbar-brand,
.navbar-brand span,
.navbar-brand .fw-bold { color: var(--t-ink) !important; }

/* The specialities hero still carried a blue gradient. */
.phc-sp-hero {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
}
.phc-sp-hero h1,
.phc-sp-hero h2,
.phc-sp-hero .phc-sp-eyebrow { color: #fff !important; }
.phc-sp-hero p,
.phc-sp-hero__sub { color: rgba(255, 255, 255, .9) !important; }

/* WhatsApp keeps its green; the label on it has to be white. */
.phc-btn-wa,
.phc-btn-wa i { color: #fff !important; }

/* Amber on cream was unreadable before the theme and still is. */
.feature-text.text-warning { color: #8A6100 !important; }

/* ==========================================================================
   18. Last readability fixes
   ========================================================================== */

/* .phc-hero names two different heroes: a dark one on the treatment pages
   and a plain white one on the hospitals page. Section 16 puts white text
   in both, so give the class a dark floor. Where a dark gradient already
   covers it, nothing changes; where there was nothing, it goes plum. */
.phc-hero { background-color: #2E1529 !important; }

/* A heading sitting straight on the plum hero panel. */
.hero-appointment-wrap h4 { color: #fff !important; }

/* The help band at the foot of the landing pages. */
.pbl-help h1,
.pbl-help h2,
.pbl-help h3,
.pbl-help p { color: #fff !important; }

/* Section 14a turned every link plum, including the grey button on a
   blog post, which then had plum on grey. */
.btn-secondary,
.btn-secondary:hover { color: #fff !important; }

/* Bootstrap's green and red are a shade too light to read at body size. */
.text-success { color: #157347 !important; }
.feature-text.text-danger { color: #B02A37 !important; }

/* ---------- 18b. The dark call-to-action band ------------------------ */

.phc-cta-band h1,
.phc-cta-band h2,
.phc-cta-band h3,
.phc-cta-band h4 { color: #fff !important; }
.phc-cta-band p,
.phc-cta-band li { color: rgba(255, 255, 255, .88) !important; }

/* ==========================================================================
   19. Pseudo-elements
   Underlines, tick bullets, the magnifier and the plus on an accordion are
   drawn with ::before and ::after. A sweep over real elements never sees
   them, so they kept the old blue and orange. Only the property each one
   actually uses is set here - painting a background on every li::before
   would put a coloured block beside plain bullets.
   ========================================================================== */

/* Heading underlines. */
h1::after,
h2::after,
h3::after { background-color: var(--t-primary) !important; }

/* Tick glyphs and any ring around them. */
li::before { color: var(--t-primary) !important; }
li::before,
.phc-jrny-badge::before { border-color: var(--t-primary) !important; }
.phc-jrny-badge::before { color: var(--t-primary-ink) !important; }

/* The filled tick discs on the landing pages. */
.pbl-checks li::before,
.pbl-hero-stats li::before {
    background-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

/* The search magnifier on the specialities page. */
.phc-sp-search::before { border-color: var(--t-primary) !important; }
.phc-sp-search::after { background-color: var(--t-primary) !important; }

/* The plus and minus on the FAQ accordions. */
.phc-sp-faq__icon::before,
.phc-sp-faq__icon::after { background-color: var(--t-primary) !important; }
summary::after { color: var(--t-primary) !important; }

/* ---------- 19b. The last two pseudo-elements ------------------------ */

/* The arrow in front of each link on the facilities page. Written for any
   a::before because it only tints a glyph - there is no fill to spill. */
a::before {
    color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
}

/* The badge list on the landing pages uses a bare ul, so 19 missed it. */
.pbl-badges li::before {
    background-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

/* ==========================================================================
   20. Rules that have to win from the HEAD
   The page carries its own !important rules inside <style> blocks in the
   body. At equal specificity whichever comes last wins, so these used to
   need a second copy of this file at the end of the body - which is what
   made the old colours flash before the new ones. One extra "body " in
   front raises the specificity enough to win from the head instead, so
   the first paint is already correct and nothing shifts afterwards.
   ========================================================================== */

body .faq-main-box { background: var(--t-surface) !important; }

body .footer-r1-detail h3,
body .footer-part-main-box h3,
body .footer-main-box h3 { color: #fff !important; }

body .subcribe-button-box button {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

body .footer-icons-main-box .footer-icon-box {
    background: rgba(255, 255, 255, .08) !important;
}
body .footer-icon-box i,
body .footer-icon-box a { color: #fff !important; }

/* ---------- 20b. The last few that needed the same treatment --------- */

body .feature-text.text-primary { color: var(--t-primary-ink) !important; }
body .feature-text.text-success { color: #157347 !important; }

body .faq-item {
    background: var(--t-surface) !important;
    border-color: var(--t-line) !important;
}

body .whatsapp-btn {
    border-color: var(--t-line) !important;
    color: var(--t-primary-ink) !important;
}

body .contactpg-part2-main-box { background: var(--t-primary) !important; }

body .text-detail-box h4 { color: var(--t-ink) !important; }

/* ---------- 20c. Rules the page re-declares lower down --------------- */
/* Same reason as 20: the page sets these again inside a style block in
   the body, with !important and the same specificity, so the later one
   used to win. One extra "body " settles it from up here. */

body h1::after,
body h2::after,
body h3::after { background-color: var(--t-primary) !important; }

body .btn-primary,
body a.btn-primary,
body button.btn-primary {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}
body .btn-primary:hover,
body a.btn-primary:hover,
body button.btn-primary:hover {
    background: var(--t-primary-dark) !important;
    border-color: var(--t-primary-dark) !important;
}

body .services-btn-main-box a {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-ink) !important;
}

body .global-heading h2::after,
body .global-heading h3::after,
body .phc-about-copy h2::after { background-color: var(--t-primary) !important; }

/* ==========================================================================
   21. The brand palette, 1 Nov 2026
   Roles as given:
     Primary purple  #9B468A  logo, main headings, branding
     Cyan blue       #33C2DF  buttons, highlights, links and icons
     Light pink      #F7EAF2  hero section backgrounds
     Soft pink       #F9EFF6  cards and secondary backgrounds
     White           #FFFFFF  navigation, cards and clean space
     Grey            #858585  paragraphs and secondary text

   The variables at the top of this file now hold those six, so most of
   the site follows automatically. This section moves the pieces whose
   job changed: purple used to run the buttons and now runs the headings,
   and the heroes go from a purple fill to light pink, which means the
   type on them has to come back from white.
   ========================================================================== */

/* ---------- 21a. Purple: logo, main headings, branding --------------- */

body h1,
body h2,
body .global-heading h2,
body .global-heading h3,
body .pc-section-title,
body .phc-about-lead-name { color: var(--t-brand) !important; }

body .navbar-brand,
body .navbar-brand span,
body .navbar-brand .fw-bold { color: var(--t-brand) !important; }

/* The heading rule above owns h1 and h2, so the underline beneath a
   section title goes purple with it. */
body h1::after,
body h2::after,
body h3::after,
body .global-heading h2::after,
body .global-heading h3::after,
body .phc-about-copy h2::after { background-color: var(--t-brand) !important; }

/* Branding blocks stay purple - they are identity, not an action. */
body .numbers-counter-main-box { background: var(--t-brand) !important; }
body .contactpg-part2-main-box { background: var(--t-brand) !important; }
body .header-appo-main-box h2 {
    background-image: linear-gradient(135deg, var(--t-brand) 0%, var(--t-brand-dark) 100%) !important;
    color: #fff !important;
}

/* ---------- 21b. Light pink heroes ------------------------------------ */
/* These were a purple fill while purple was the action colour. On light
   pink the headings go purple and the body copy goes grey. */

body .phc-sp-hero,
body .service-area-hero {
    background-color: var(--t-tint) !important;
    background-image: none !important;
}
body .phc-sp-hero h1,
body .phc-sp-hero h2,
body .service-area-hero h1,
body .service-area-hero h2,
body .service-area-hero h3 { color: var(--t-brand) !important; }

body .phc-sp-hero p,
body .phc-sp-hero .phc-sp-hero__sub,
body .service-area-hero p,
body .service-area-hero li,
body .service-area-hero .subtitle { color: var(--t-ink-2) !important; }

body .phc-sp-hero .phc-sp-eyebrow { color: var(--t-primary-ink) !important; }

/* ---------- 21c. Soft pink for secondary surfaces --------------------- */

body .pc-highlight-box,
body .phc-dcs-imgwrap,
body .phc-doc-avatar { background: var(--t-tint-2) !important; }

/* ---------- 21d. Cyan for the things you act on ----------------------- */
/* --t-primary is already cyan, so the buttons follow on their own. These
   are the few that named purple directly. */

body .phc-sp-cta { background: var(--t-primary) !important; }
body .cta-call-btn,
body .phc-laser-value {
    background-image: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
}

/* ---------- 21e. Readability on the cyan ------------------------------ */
/* #33C2DF is a light cyan: white on it measures 2.1:1, well under the
   4.5:1 a label needs, and the text visibly washes out. The button face
   stays exactly #33C2DF; the label goes near-black, which measures
   8.5:1. Icons inside a button follow the label.
   The greys are #6B6B6B rather than #858585 for the same reason: 4.9:1
   instead of 3.7:1, at a shade the eye cannot tell apart. */

body .btn-primary,
body a.btn-primary,
body button.btn-primary,
body .btn-success,
body .pc-btn-orange,
body .phc-chs-explore,
body .phc-chs-call,
body .phc-dcs-explore,
body .phc-dcs-book,
body .phc-dl-book,
body .phc-sp-btn,
body .phc-sp-hero__book,
body .phc-btn-primary,
body .phc-btn-call,
body .phc-hero-call,
body .btn-dark,
body .pbl-help-phone,
body .pbl-help-cta,
body .pbl-sticky-call,
body .pbl-doc-cta,
body .subcribe-button-box button,
body .services-btn-main-box a,
body .tab-btn.active,
body .page-item.active .page-link,
body button[type="submit"] { color: var(--t-ink) !important; }

body .btn-primary i,
body .phc-chs-call i,
body .phc-dl-book i,
body .phc-hero-call i,
body .pbl-sticky-call i,
body .services-btn-main-box a i,
body button[type="submit"] i { color: var(--t-ink) !important; }

/* On the darker hover shade white would still only reach 3:1, so the
   label stays dark there too. */
body .btn-primary:hover,
body .phc-chs-explore:hover,
body .phc-chs-call:hover,
body .phc-dcs-explore:hover,
body .phc-dcs-book:hover,
body .phc-dl-book:hover,
body .phc-sp-btn:hover,
body .pc-btn-orange:hover,
body .subcribe-button-box button:hover,
body .services-btn-main-box a:hover { color: var(--t-ink) !important; }

/* Cyan section fills carry headings, not labels, so they need the same
   treatment where the text sits straight on the cyan. */
body .phc-sp-cta h1,
body .phc-sp-cta h2,
body .phc-sp-cta h3,
body .phc-sp-cta p { color: var(--t-ink) !important; }

/* Link text keeps the readable cyan - #33C2DF as type on white is
   2.1:1, the same washout as the buttons. */
body a { color: var(--t-primary-ink) !important; }
body a:hover { color: var(--t-primary-dark) !important; }

/* ==========================================================================
   22. The buttons section 21e did not reach
   Same rule as 21e - a label on the light cyan has to be dark to be read.
   These carry two classes of their own, so they need one more step of
   specificity to be caught.
   ========================================================================== */

html body .btn.btn-dark,
html body .btn-dark.btn-lg,
html body .btn-dark.w-100,
html body .call-btn,
html body .phdoc-active,
html body .phdoc-primary,
html body .phc-submit,
html body .cta-call-btn,
html body .cta-call-btn span,
html body h5.bg-primary,
html body .phc-laser-value,
html body form button:not(.btn-secondary):not(.phc-btn-wa) { color: var(--t-ink) !important; }

/* This heading sat on a purple panel and was white. The panel is light
   pink now, so it goes purple with the other headings. */
html body .hero-appointment-wrap h4 { color: var(--t-brand) !important; }

/* WhatsApp keeps its own green with a white label, as everywhere else. */
html body .phc-btn-wa,
html body .phc-btn-wa i { color: #fff !important; }

/* ==========================================================================
   23. The surgeries grid
   The columns in that grid also carry .phc-rv, the review-card class, so
   section 9 was drawing a second bordered white box around every card -
   one that hugged the card top and bottom but left 15px at each side.
   A column is a layout box, not a card, so it gets nothing.
   The row gap is set to match the 30px the columns already leave at the
   sides, so the spacing between cards reads the same both ways.
   ========================================================================== */

[class*="col-"].phc-rv,
.row > .phc-rv {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.focus-group > [class*="col-"],
.services-main-box .row > [class*="col-"] { margin-bottom: 30px !important; }

/* ---------- 23b. The other .phc-rv collisions ------------------------ */
/* Section headings carry the same class and were being drawn as cards
   too, which is where the odd box around "Surgeries we perform" came
   from. A heading is not a card either. */

.global-heading.phc-rv,
.faq-title.phc-rv {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* One column genuinely is a panel, so give 23 back what it took. */
[class*="col-"].pc-highlight-box {
    background: var(--t-tint-2) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-lg) !important;
}

/* ---------- 23c. A card inside a card -------------------------------- */
/* .text-detail-box sits inside .services-part-box and section 6 styles
   both, so every surgery tile had a second white bordered box drawn
   around its text, inset 25px at the sides and 101px from the top. The
   outer tile is the card; the inner one carries nothing. */

.services-part-box .text-detail-box,
.card .card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   24. Layout wrappers that were being drawn as cards
   Same .phc-rv collision as 23. These five are containers, not cards:
   they carry no padding of their own, so once section 9 gave them a
   border and a white fill their contents sat hard against the edge -
   which is why the "Our Chambers" heading, its list and its button all
   looked shoved into the corner, and why the journey, FAQ and video
   sections had a box drawn around boxes.
   The real cards next to them - .phc-chs-card, .phc-dcs-card, .phc-trust
   - are untouched: those have inner padding and are meant to be cards.
   ========================================================================== */

.phc-chs-left,
.phc-dcs-left,
.phc-jrny-wrap,
.faq-wrapper,
.pbl-video-slider {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   25. Lining the side panels up with the cards
   .phc-chs-main and .phc-dcs-main are flex rows set to align-items:center,
   so the text panel floats in the middle of the card row instead of
   starting level with it - 25px low beside the chambers, 142px beside the
   taller doctor cards. Aligned to the start, the heading still sat 20px
   under the card edge, so 6px of top padding brings the two level -
   measured, not guessed, and the same in both sections.
   Only above 992px, where the two sit side by side. Below that the row
   stacks and the panel must still run full width.
   ========================================================================== */

@media (min-width: 992px) {
    .phc-chs-main,
    .phc-dcs-main { align-items: flex-start !important; }

    .phc-chs-left,
    .phc-dcs-left { padding-top: 6px !important; }
}

/* The heading left a 46px hole above the list: 12px under the title for
   the rule, 8px of its own, then the block's 26px. Enough is enough. */
.phc-chs-left .global-heading,
.phc-dcs-left .global-heading { margin-bottom: 14px !important; }

/* ==========================================================================
   26. The chambers button's bottom edge
   Section 25 lined the panel up at the top, but its natural height ran a
   little past the cards', so "View All Chambers" finished 9px below them
   at 1200-1440.
   Two wrong levers before this one. Stretching the panel to the row
   dropped the button 64px, because the row also holds the carousel
   arrows under the track. Trimming the heading's bottom margin did
   nothing at all: the list below it carries a 26px top margin, the two
   collapse together, and the larger one wins.
   So the 9px comes off the list's bottom margin, which nothing collapses
   against. The button's bottom edge now lands on the cards'.
   At 992 the cards grow taller than the panel, so it finishes above
   them - short, never past.
   ========================================================================== */

.phc-chs-left .phc-chs-benefits { margin-bottom: 19px !important; }

/* ==========================================================================
   27. Shorter doctor cards
   The photo stays exactly as it was - full width of the card, square,
   round-cropped. The height comes out of the text block underneath,
   which stood at 242px.
   Everything below is spacing except the credentials line, which was
   holding two lines and now holds one. That is the only change that
   trades text for height; it was already truncating with an ellipsis,
   and the full text is on the doctor's own page. Say the word and it
   goes back to two lines at a cost of about 20px.
   Card height goes 547 -> about 500.
   ========================================================================== */

.phc-dcs-body { padding: 12px 16px 14px !important; }

.phc-dcs-name {
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
}

.phc-dcs-meta { margin-bottom: 6px !important; }

.phc-dcs-spec {
    margin-bottom: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.phc-dcs-fee {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.phc-dcs-acts { padding-top: 10px !important; }
/* ==========================================================================
   28. Doctor cards matched to the chamber cards
   A chamber card is 347px: a 165px image band over a 180px body. A
   doctor card was 500: a 304px photo over the 195px body section 27
   left behind. There is no way to reach 347 with a 304px photo, so the
   band comes down to 152px and the portrait sits in it at 136px.
   Sized rather than squashed - the circle is border-radius 50% on the
   image, so changing only the band would turn the portraits into
   ellipses.
   ========================================================================== */

.phc-dcs-imgwrap {
    aspect-ratio: auto !important;
    height: 152px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The link is position:absolute with inset:0 in the page's own CSS, so
   it sits outside the flex flow and the centring above never reached
   it - the portrait pinned itself to the top-left corner. Static puts
   it back in the flow, where align-items and justify-content apply. */
.phc-dcs-imgwrap > a {
    position: static !important;
    display: block !important;
    width: 136px !important;
    height: 136px !important;
}

.phc-dcs-imgwrap img {
    width: 136px !important;
    height: 136px !important;
    object-fit: cover !important;
}

/* Section 27 clamps the credentials to one line to save height. That is
   right where the cards sit three-up, but on a narrow screen the card
   runs full width and one line collapses to the stethoscope icon and an
   ellipsis, with no words at all. Below 992px it gets two lines back. */
@media (max-width: 991.98px) {
    .phc-dcs-spec { -webkit-line-clamp: 2 !important; }
}

/* ==========================================================================
   29. Narrower doctor cards
   The carousel sizes its cards as flex: 0 0 calc(41.6667% - 10px) of a
   764px track, which comes out at 305px - two and a bit in view. At
   calc(33.333% - 16px) three whole cards sit in the track instead, and
   the card lands at about 245px.
   Doctor cards only, as asked. The chamber cards keep their 305px, so
   the two carousels no longer match in width - they still match in
   height.
   Wide screens only. Applied at every width it forced three cards into
   whatever track it found: 222px at 1200, 176px at 992 and 96px on a
   phone, with the cards growing taller as the text wrapped. Below
   1366px the carousel keeps its own sizing.
   ========================================================================== */

@media (min-width: 1366px) {
    .phc-dcs-card { flex: 0 0 calc(33.333% - 16px) !important; }
}

/* ---------- 29b. Credentials need two lines again -------------------- */
/* Section 27 clamped that line to one to save height, which worked at
   305px. At 236px one line fits the stethoscope icon and an ellipsis
   and nothing else, so it goes back to two wherever the narrow cards
   apply. */

@media (min-width: 1366px) {
    .phc-dcs-spec { -webkit-line-clamp: 2 !important; }
}

/* ==========================================================================
   30. Shorter booking form
   The hero's Book Your Appointment card stood at 542px: a 94px title
   band, four field groups of about 87px each once their labels and
   margins are counted, the button row, and 24px of padding top and
   bottom.
   Nothing is removed - all four fields and the button stay. The title
   band comes down, the gaps between fields close up, and the inputs
   lose a little vertical padding while staying comfortably tappable at
   around 42px.
   ========================================================================== */

.header-appo-main-box { padding: 18px !important; }

.header-appo-main-box h2 {
    font-size: 20px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
}

.header-appo-main-box .form-floating,
.header-appo-main-box .mb-3,
.header-appo-main-box .mb-4 { margin-bottom: 10px !important; }

.header-appo-main-box label {
    margin-bottom: 2px !important;
    font-size: 13px !important;
}

.header-appo-main-box .form-control,
.header-appo-main-box .form-select,
.header-appo-main-box select,
.header-appo-main-box input:not([type=hidden]) { padding: 9px 12px !important; }

/* ---------- 30b. The Diseases dropdown ------------------------------- */
/* It sat at 31px against the other three controls' 42 - its own rule
   gives it 5px of padding and a smaller font, and beat the one above.
   Matching the rest costs about 11px of the height just saved, which is
   worth it: a 31px dropdown is both odd-looking and a poor tap target
   on a phone. */

html body .header-appo-main-box select,
html body .header-appo-main-box .form-select {
    padding: 9px 12px !important;
    font-size: 15px !important;
    min-height: 42px !important;
}

/* ==========================================================================
   31. Booking form, a little shorter again
   From 438px. The labels were the quiet cost: at 13px type they still
   inherited the body's 1.6 line-height and stood 22px tall each. A
   tighter line-height on four of them, smaller gaps between the field
   groups, and a touch off the title band and the card padding.
   The inputs stay at 42px - below that they stop being a comfortable
   tap target on a phone, and that is not worth a few pixels.
   Lands at about 390px.
   ========================================================================== */

.header-appo-main-box { padding: 14px !important; }

.header-appo-main-box h2 {
    font-size: 19px !important;
    padding: 8px 14px !important;
    margin-bottom: 8px !important;
}

.header-appo-main-box label {
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.header-appo-main-box .form-floating,
.header-appo-main-box .mb-3,
.header-appo-main-box .mb-4 { margin-bottom: 7px !important; }

/* ============================================================
   32. THE "BOOK YOUR APPOINTMENT" POP-UP
   ------------------------------------------------------------
   Two jobs in one section.

   First, colour. This panel was the last thing on the site
   still wearing the old blue: a #EFF6FF explainer column, a
   #D3E0F8 divider and a blue close button. It is the only
   block that is hidden on page load, which is exactly how it
   escaped every sweep.

   Second, size. At a 593px-high window the form column ran
   past the bottom of the panel and put Confirm Appointment
   below its own scrollbar - the worst possible place for the
   page's main conversion form. So rather than let it scroll,
   the panel is tightened until the whole form fits: narrower,
   a plain header instead of the hero box's purple band, and
   the vertical rhythm pulled in on both columns.

   On that band: the markup nests this pop-up INSIDE
   .header-appo-main-box, so every rule written for the hero
   booking box lands in here too, which is where the full
   width purple bar across the header came from. A title bar
   suits the hero box; in a dialog that already has its own
   frame it only eats height, so it comes off here and the
   title is set in plain purple instead.

   The four inputs stay at 42px, same reasoning as the hero
   form - below about 40px they stop being a comfortable tap
   target, and this is the form people actually fill in.

   Everything is prefixed html body because the page's own
   modal styles sit in a style block in the BODY and this file
   loads from the head. Without the prefix the two tie on
   specificity and the later one - theirs - wins.

   940x456 -> 820x419, and nothing scrolls at 1440, 1280, 768
   or 390.
   ============================================================ */

/* The panel.

   height: auto matters more than it looks here. The site's
   original pop-up styles set .custom-modal { height: 100% },
   and this panel carries that same class, so it was being
   stretched to the full window and then cut back by its own
   max-height. That is why it stayed 456px tall however much
   was trimmed out of it. Released, it sizes to its contents. */
html body #appointmentModal .custom-modal {
    width: min(820px, calc(100vw - 40px)) !important;
    height: auto !important;
    border-radius: 16px !important;
}

/* Header. */
html body #appointmentModal .custom-modal-header {
    padding: 14px 58px 12px 24px !important;
    border-bottom: 1px solid var(--t-line) !important;
}
html body #appointmentModal .custom-modal-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: var(--t-brand) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
}
html body #appointmentModal .custom-close {
    top: 9px !important;
    right: 16px !important;
    width: 34px !important;
    height: 34px !important;
    background: var(--t-tint-2) !important;
    color: var(--t-brand) !important;
}

/* Left column - the explainer. */
html body #appointmentModal .modal-left {
    padding: 16px 22px 18px !important;
    background: var(--t-tint-2) !important;
    border-right: 1px solid var(--t-line) !important;
}
html body #appointmentModal .modal-left h4 {
    margin-bottom: 4px !important;
    color: var(--t-brand) !important;
    font-size: 17px !important;
}
html body #appointmentModal .modal-left > p {
    margin-bottom: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}
html body #appointmentModal .modal-left h5 {
    margin-bottom: 9px !important;
}
html body #appointmentModal .phc-bk-steps {
    gap: 10px !important;
}
html body #appointmentModal .phc-bk-steps li {
    gap: 11px !important;
}
html body #appointmentModal .phc-bk-steps li p {
    margin-top: 2px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}
html body #appointmentModal .phc-bk-num {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
}

/* Right column - the form. */
html body #appointmentModal .modal-right {
    padding: 14px 24px 18px !important;
}
html body #appointmentModal .phc-bk-field {
    margin-bottom: 7px !important;
}
html body #appointmentModal .phc-bk-field label {
    margin-bottom: 3px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}
html body #appointmentModal .phc-bk-field .form-control,
html body #appointmentModal .phc-bk-field select,
html body #appointmentModal .phc-bk-field input:not([type=hidden]) {
    padding: 9px 12px !important;
    min-height: 42px !important;
}
html body #appointmentModal .custom-modal-body .btn {
    min-height: 46px !important;
    margin-top: 4px !important;
    padding: 11px 20px !important;
    font-size: 14.5px !important;
}