/* ==========================================================================
   Clinical Piece — Theme Layer
   --------------------------------------------------------------------------
   Borrows the design language shared by somatrauma.com and reynaaday.com:
     · Cormorant Garamond display serif over a light Montserrat body
     · Warm cream ground instead of white/gray
     · Deep muted primary + warm copper accent
     · Tiny wide-tracked uppercase eyebrow labels
     · Thin rules, generous whitespace, restrained shadows
     · WCAG-aware adaptive accent tokens (copper shifts on dark grounds)

   Clinical Piece keeps its own navy identity so it reads as a sibling of the
   clinical sites, not a copy of them.

   Loaded AFTER the page's inline <style> block so it wins at equal
   specificity. Purely additive — deleting this file restores the old look.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Ground */
    --cp-cream:        #F6F3EE;   /* warm page ground */
    --cp-cream-deep:   #EFEAE2;   /* alternating band */
    --cp-card:         #FFFFFF;

    /* Primary — Clinical Piece navy, deepened for contrast */
    --cp-navy:         #16303F;
    --cp-navy-soft:    #1B3A4B;   /* original brand navy, retained */
    --cp-navy-deep:    #102631;   /* footer */

    /* Warm accent. Copper is decorative at full strength; the -ink and -light
       variants are the ones allowed to carry text, each AA on its ground. */
    --cp-copper:       #C07844;   /* borders, rules, fills */
    --cp-copper-ink:   #9E5A2B;   /* copper TEXT on cream  — 4.8:1 */
    --cp-copper-light: #DB9E63;   /* copper TEXT on navy   — 5.9:1 */
    --cp-copper-adaptive: var(--cp-copper-ink);

    /* Text */
    --cp-ink:          #1A1A1A;
    --cp-ink-soft:     rgba(22, 48, 63, 0.82);
    --cp-ink-faint:    rgba(22, 48, 63, 0.62);
    --cp-on-dark:      #F6F3EE;
    --cp-on-dark-soft: rgba(246, 243, 238, 0.80);

    /* Structure */
    --cp-rule:         rgba(22, 48, 63, 0.14);
    --cp-rule-dark:    rgba(246, 243, 238, 0.20);
    --cp-shadow:       0 1px 2px rgba(16, 38, 49, 0.04), 0 8px 24px rgba(16, 38, 49, 0.06);
    --cp-shadow-lift:  0 2px 4px rgba(16, 38, 49, 0.06), 0 16px 40px rgba(16, 38, 49, 0.10);

    /* Type */
    --cp-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --cp-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Any navy ground flips the adaptive accent to its light variant. */
.section-blue,
.footer,
.footer.section-dark,
.call-to-action,
#contact,
.cp-dark {
    --cp-copper-adaptive: var(--cp-copper-light);
}

/* --------------------------------------------------------------------------
   2. Foundations
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--cp-cream);
    color: var(--cp-ink);
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.03em;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cp-serif);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cp-navy);
}

p { font-weight: 300; line-height: 1.8; }

a { color: var(--cp-copper-ink); transition: color .2s ease; }
a:hover, a:focus { color: var(--cp-navy); text-decoration: none; }

::selection { background-color: var(--cp-copper); color: var(--cp-cream); }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cp-copper);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Eyebrow label — the signature small-caps line above section headings
   -------------------------------------------------------------------------- */
.cp-eyebrow {
    display: block;
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cp-copper-adaptive);
    margin-bottom: 14px;
}

.cp-eyebrow--center { text-align: center; }

/* Hairline that sits under a section heading. */
.cp-rule {
    width: 56px;
    height: 1px;
    background: var(--cp-copper);
    border: 0;
    margin: 22px 0 0;
}
.cp-rule--center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. Section grounds & headings
   -------------------------------------------------------------------------- */
.section-light { background-color: var(--cp-cream); }
.section-gray  { background-color: var(--cp-cream-deep); }

.section-blue,
.call-to-action.section-blue,
.contact-info.section-blue {
    background-color: var(--cp-navy);
    background-image: none;
    color: var(--cp-on-dark);
}

.section-blue h1, .section-blue h2, .section-blue h3,
.section-blue h4, .section-blue h5, .section-blue h6 {
    color: var(--cp-on-dark);
}
.section-blue p,
.section-blue li { color: var(--cp-on-dark-soft); }

section h2 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--cp-navy);
    margin-bottom: 18px;
}

.color-blue { color: var(--cp-copper-adaptive); }

/* Slightly tighter vertical rhythm than the template's pt100/pb100. */
.pt100 { padding-top: 92px; }
.pb100 { padding-bottom: 92px; }

/* --------------------------------------------------------------------------
   5. Header — translucent cream bar with a hairline, serif logotype
   -------------------------------------------------------------------------- */
.header-area,
.header-area-v2 {
    background-color: rgba(246, 243, 238, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cp-rule);
    box-shadow: none;
    transition: box-shadow .3s ease, background-color .3s ease;
}
.header-area-v2::before { display: none; }

.header-area.is_stuck {
    background-color: rgba(246, 243, 238, 0.96);
    box-shadow: 0 1px 20px rgba(16, 38, 49, 0.07);
}

.header-logo .logo-text {
    font-family: var(--cp-serif);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--cp-navy);
    text-transform: uppercase;
}
.header-logo .logo-text span { color: var(--cp-copper-ink); }

.mainmenu ul li a {
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cp-navy);
    position: relative;
    padding-bottom: 4px;
    transition: color .2s ease;
}
.mainmenu ul li a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--cp-copper);
    transition: width .25s ease;
}
.mainmenu ul li a:hover { color: var(--cp-copper-ink); }
.mainmenu ul li a:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero-v1 { background-position: center; background-size: cover; }

/* Warm navy scrim, deeper on the left so the headline stays legible. */
.gredient-overlay {
    background: linear-gradient(
        100deg,
        rgba(16, 38, 49, 0.92) 0%,
        rgba(16, 38, 49, 0.80) 42%,
        rgba(22, 48, 63, 0.58) 100%
    );
}

.hero-v1 h1 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 3.5rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--cp-cream);
    margin-bottom: 22px;
}

.hero-v1 p {
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.85;
    letter-spacing: 0.03em;
    color: var(--cp-on-dark-soft);
    max-width: 36em;
}

/* Accreditation note — a quiet framed line, not a loud badge. */
.ceu-badge {
    display: inline-block;
    background: rgba(246, 243, 238, 0.07);
    border: 1px solid rgba(219, 158, 99, 0.45);
    border-left: 2px solid var(--cp-copper-light);
    border-radius: 0;
    color: var(--cp-on-dark-soft);
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.7;
    padding: 12px 18px;
    margin-top: 26px;
    max-width: 40em;
}

/* --------------------------------------------------------------------------
   7. Forms — cream cards, hairline inputs, copper focus
   -------------------------------------------------------------------------- */
.quick-appoinment-form,
.contact-form-wrapper {
    background: var(--cp-cream);
    border: 1px solid var(--cp-rule);
    border-top: 2px solid var(--cp-copper);
    border-radius: 0;
    box-shadow: var(--cp-shadow);
    padding: 34px 30px;
}

.quick-appoinment-form h6,
.contact-form-wrapper h4 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
    color: var(--cp-navy);
    text-transform: none;
    margin-bottom: 6px;
}

.form-group label {
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cp-ink-soft);
    margin-bottom: 7px;
}

.form-control {
    background: var(--cp-card);
    border: 1px solid var(--cp-rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--cp-ink);
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    height: auto;
    padding: 12px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--cp-copper);
    box-shadow: 0 0 0 3px rgba(192, 120, 68, 0.14);
    outline: none;
}
.form-control::placeholder { color: var(--cp-ink-faint); font-weight: 300; }

select.form-control { padding-right: 34px; }
textarea.form-control { line-height: 1.7; }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.primary-btn,
.course-action-btn,
.btn-login {
    display: inline-block;
    background: var(--cp-navy);
    background-image: none;
    border: 1px solid var(--cp-navy);
    border-radius: 0;
    color: var(--cp-cream);
    font-family: var(--cp-sans);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 30px;
    box-shadow: none;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.primary-btn:hover, .primary-btn:focus,
.course-action-btn:hover, .course-action-btn:focus,
.btn-login:hover, .btn-login:focus {
    background: var(--cp-copper-ink);
    border-color: var(--cp-copper-ink);
    color: var(--cp-cream);
}

/* Secondary / outline treatment. */
.cp-btn-ghost {
    background: transparent;
    border: 1px solid var(--cp-copper);
    color: var(--cp-copper-ink);
}
.cp-btn-ghost:hover {
    background: var(--cp-copper-ink);
    border-color: var(--cp-copper-ink);
    color: var(--cp-cream);
}

/* On navy grounds the button inverts so it stays readable. */
.section-blue .primary-btn,
.call-to-action .primary-btn {
    background: var(--cp-copper);
    border-color: var(--cp-copper);
    color: #16303F;
}
.section-blue .primary-btn:hover,
.call-to-action .primary-btn:hover {
    background: var(--cp-cream);
    border-color: var(--cp-cream);
    color: var(--cp-navy);
}

.course-action-btn.coming-soon {
    background: transparent;
    border: 1px solid var(--cp-rule);
    color: var(--cp-ink-faint);
    cursor: default;
}
.course-action-btn.coming-soon:hover {
    background: transparent;
    border-color: var(--cp-rule);
    color: var(--cp-ink-faint);
}

/* --------------------------------------------------------------------------
   9. Course cards
   -------------------------------------------------------------------------- */
.bestdoctor-box-v2 {
    background: var(--cp-card);
    border: 1px solid var(--cp-rule);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.bestdoctor-box-v2:hover {
    transform: translateY(-3px);
    border-color: rgba(192, 120, 68, 0.45);
    box-shadow: var(--cp-shadow-lift);
}

.bestdoctor-info { padding: 28px 26px; }

.bestdoctor-info h6 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cp-navy);
    text-transform: none;
    margin-bottom: 10px;
}

.bestdoctor-info p {
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--cp-ink-soft);
}

.course-tag {
    background: rgba(192, 120, 68, 0.10);
    border: 1px solid rgba(192, 120, 68, 0.30);
    border-radius: 0;
    color: var(--cp-copper-ink);
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
}

.bestd-list-item {
    border-bottom: 1px solid var(--cp-rule);
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    color: var(--cp-ink-soft);
}
.bestd-list-item span { color: var(--cp-navy); font-weight: 500; }

.best-doctor-footer { border-top: 1px solid var(--cp-rule); }

.coming-soon-overlay {
    background: rgba(16, 38, 49, 0.72);
    color: var(--cp-cream);
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Presenter block
   -------------------------------------------------------------------------- */
.creds,
.doc-specialist {
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cp-copper-adaptive);
}

.presenter-social a {
    background: transparent;
    border: 1px solid var(--cp-rule);
    border-radius: 0;
    color: var(--cp-navy);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.presenter-social a:hover {
    background: var(--cp-copper-ink);
    border-color: var(--cp-copper-ink);
    color: var(--cp-cream);
}

/* --------------------------------------------------------------------------
   11. Contact & footer
   -------------------------------------------------------------------------- */
.contact-detail li,
.opening-hours li {
    font-family: var(--cp-sans);
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--cp-on-dark-soft);
    border-bottom: 1px solid var(--cp-rule-dark);
}
.contact-detail li i,
.opening-hours li i { color: var(--cp-copper-light); }
.contact-detail li a { color: var(--cp-on-dark-soft); }
.contact-detail li a:hover { color: var(--cp-copper-light); }

.opening-hours-wrap h2 { color: var(--cp-on-dark); }

.footer-widget.section-gray { background-color: var(--cp-cream-deep); }

.footer,
.footer.section-dark {
    background-color: var(--cp-navy-deep);
    color: var(--cp-on-dark-soft);
}
.footer a { color: var(--cp-on-dark-soft); }
.footer a:hover { color: var(--cp-copper-light); }

/* --------------------------------------------------------------------------
   12. Long-form policy pages
   -------------------------------------------------------------------------- */
.cp-legal,
.policy-content { background: var(--cp-cream); }
.cp-legal h1,
.policy-content h1 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: -0.02em;
    color: var(--cp-navy);
}
.cp-legal h2,
.policy-content h2 {
    font-size: 1.8rem;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--cp-rule);
}
.cp-legal p,
.cp-legal li,
.policy-content p,
.policy-content li {
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.94rem;
    line-height: 1.85;
    color: var(--cp-ink-soft);
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .hero-v1 h1 { font-size: 2.7rem; }
    section h2  { font-size: 2.1rem; }
    .pt100 { padding-top: 68px; }
    .pb100 { padding-bottom: 68px; }
}

@media (max-width: 767px) {
    body { font-size: 15px; }
    .hero-v1 h1 { font-size: 2.15rem; line-height: 1.14; }
    .hero-v1 p  { font-size: 0.95rem; }
    section h2  { font-size: 1.8rem; }
    .quick-appoinment-form,
    .contact-form-wrapper { padding: 26px 20px; }
    .ceu-badge { font-size: 0.68rem; padding: 10px 14px; }
    .pt100 { padding-top: 54px; }
    .pb100 { padding-bottom: 54px; }
}

/* --------------------------------------------------------------------------
   14. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .bestdoctor-box-v2:hover { transform: none; }
}

@media print {
    .header-area, .mobile-menu-area, .footer, .call-to-action { display: none; }
    body { background: #fff; color: #000; }
}

/* Hero sits on the navy scrim, so its eyebrow uses the dark-ground accent. */
.hero-v1 .cp-eyebrow { color: var(--cp-copper-light); }

/* --------------------------------------------------------------------------
   15. Remap the template's own variables
   --------------------------------------------------------------------------
   The page's inline <style> block drives ~25 `!important` rules through these
   four variables. Redefining them here re-points every one of those rules at
   the new palette in a single place, instead of fighting each `!important`
   declaration with a more specific override.
   -------------------------------------------------------------------------- */
:root {
    --primary-color:   #16303F;   /* was #1B3A4B — deepened navy */
    --darker-blue:     #102631;
    --accent-color:    #9E5A2B;   /* was #C41E3A crimson — now copper ink */
    --secondary-color: #C07844;   /* was #51a9f1 bright blue — now copper */
    --hero-gradient:   linear-gradient(135deg, #102631 0%, #16303F 60%, #1B3A4B 100%);
    --light-blue:      #DB9E63;   /* repurposed: light accent on dark grounds */
    --bg-light:        #EFEAE2;   /* was #f4f7f9 cool gray — now warm cream */
}

/* .section-light is pinned to #fff !important in the inline block. */
.section-light { background-color: var(--cp-cream) !important; }

/* Buttons inherit --secondary-color (now copper) from the inline !important
   rules; force the navy fill the design calls for and keep copper for hover. */
.primary-btn,
.course-action-btn {
    background-color: var(--cp-navy) !important;
    border-color: var(--cp-navy) !important;
    color: var(--cp-cream) !important;
}
.primary-btn:hover, .primary-btn:focus,
.course-action-btn:hover, .course-action-btn:focus {
    background-color: var(--cp-copper-ink) !important;
    border-color: var(--cp-copper-ink) !important;
    color: var(--cp-cream) !important;
}
.course-action-btn.coming-soon,
.course-action-btn.coming-soon:hover {
    background-color: transparent !important;
    border-color: var(--cp-rule) !important;
    color: var(--cp-ink-faint) !important;
}

/* On navy grounds the CTA inverts to copper so it reads against the dark. */
.section-blue .primary-btn,
.call-to-action .primary-btn {
    background-color: var(--cp-copper) !important;
    border-color: var(--cp-copper) !important;
    color: #16303F !important;
}
.section-blue .primary-btn:hover,
.call-to-action .primary-btn:hover {
    background-color: var(--cp-cream) !important;
    border-color: var(--cp-cream) !important;
    color: var(--cp-navy) !important;
}

/* --------------------------------------------------------------------------
   16. Overrides for the template's `!important` declarations
   --------------------------------------------------------------------------
   The rules below need `!important` only because the originals use it. Each
   one is paired with the declaration it is displacing.
   -------------------------------------------------------------------------- */

/* 16a. Header ------------------------------------------------------------
   The template painted the header with a photo (service-appoinment-bg.jpg)
   under an 85% navy scrim. Both reference sites instead use a light,
   translucent bar that lets the page ground show through. */
.header-area-v2 {
    background-image: none !important;
    background-color: rgba(246, 243, 238, 0.92);
    padding: 6px 0;
}
.header-area-v2::before { display: none; }

/* Logo and nav were white for the dark photo; they now sit on cream. */
.header-logo .logo-text {
    color: var(--cp-navy) !important;
    font-family: var(--cp-serif);
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.header-logo .logo-text span { color: var(--cp-copper-ink) !important; }

.header-area-v2 .mainmenu ul li a,
.mainmenu ul li a {
    color: var(--cp-navy) !important;
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    padding: 26px 14px !important;
}
.header-area-v2 .mainmenu ul li a:hover,
.mainmenu ul li a:hover {
    color: var(--cp-copper-ink) !important;
}

/* Mobile menu sits on the same cream ground. */
.mean-container .mean-nav { background: var(--cp-cream); }
.mean-container .mean-nav ul li a {
    color: var(--cp-navy) !important;
    border-top: 1px solid var(--cp-rule);
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mean-container .mean-nav ul li a:hover { color: var(--cp-copper-ink) !important; }
.mean-container a.meanmenu-reveal { color: var(--cp-navy) !important; }
.mean-container a.meanmenu-reveal span { background: var(--cp-navy) !important; }

/* 16b. Three-up feature panels -------------------------------------------
   Were #51a9f1 / #44a3f1 / #389df1. Graduated navy keeps the tri-panel
   structure while dropping the bright blue. */
.single-service:nth-child(1) { background: #16303F; }
.single-service:nth-child(2) { background: #1B3A4B; }
.single-service:nth-child(3) { background: #21455A; }

.single-service h6 {
    color: var(--cp-cream);
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0;
    text-transform: none;
}
.single-service p {
    color: var(--cp-on-dark-soft);
    font-family: var(--cp-sans);
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.8;
}
.single-service i { color: var(--cp-copper-light); }

/* The icon PNGs are dark line art drawn for a light ground; invert them to
   cream so they read on the navy panels. */
.single-service img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
    width: 58px;
    height: auto;
}

/* The raised middle panel's accent bar. */
.hero-services .single-service:nth-child(2) { border-top-color: var(--cp-copper); }

/* 16c. Outline button on the navy panels --------------------------------- */
.section-service-btn {
    border: 1px solid rgba(246, 243, 238, 0.45);
    border-radius: 0;
    color: var(--cp-cream);
    font-family: var(--cp-sans);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    padding: 12px 28px;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.section-service-btn:hover,
.section-service-btn:focus {
    background: var(--cp-copper) !important;
    border-color: var(--cp-copper) !important;
    color: #16303F !important;
}

/* 16d. Stray template blues ----------------------------------------------- */
input:focus,
textarea:focus,
select:focus { border-color: var(--cp-copper) !important; }

.single-service:nth-child(2) a.service-btn {
    background: var(--cp-cream);
    color: var(--cp-navy);
    box-shadow: none;
    border-radius: 0;
}

/* Section heading icons above each h2 were the template's blue line art. */
.section-title img,
.services-section > .container > .row img[src*="icons"] { }

/* Back-to-top control. */
#scrollUp,
.scrollup {
    background: var(--cp-navy) !important;
    border-radius: 0 !important;
    color: var(--cp-cream) !important;
}
#scrollUp:hover,
.scrollup:hover { background: var(--cp-copper-ink) !important; }

/* --------------------------------------------------------------------------
   17. Layout & imagery refinements
   -------------------------------------------------------------------------- */

/* 17a. Let the hero photograph read through the scrim. The first pass was
   opaque enough to flatten it to a solid navy block. */
.gredient-overlay {
    background: linear-gradient(
        100deg,
        rgba(16, 38, 49, 0.88) 0%,
        rgba(16, 38, 49, 0.72) 45%,
        rgba(22, 48, 63, 0.44) 100%
    );
}

/* 17b. Centre the hairline under centred section headings. */
.section-title.text-center .cp-rule,
.text-center > .cp-rule {
    margin-left: auto;
    margin-right: auto;
}

/* 17c. The template's blue title icons, rotated to copper.
   Blue sits near 205° and copper near 25°, so a 180° rotation lands on tone
   without needing new artwork. */
.section-title img {
    filter: hue-rotate(180deg) saturate(1.15) brightness(0.95);
    height: 54px;
    width: auto;
    margin-bottom: 6px;
}

/* 17d. Equal-height feature panels.
   Fixing the icon HEIGHT (rather than width) keeps the headings on a shared
   baseline across the three panels, since the source PNGs differ in ratio. */
.cp-service-row {
    display: flex;
    flex-wrap: wrap;
}
.cp-service-row > .single-service {
    display: flex;
    flex-direction: column;
    float: none;
}
.cp-service-row > .single-service p { flex: 1 1 auto; }

.single-service img {
    height: 62px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* 17e. Keep the panel CTA on a consistent footing. */
.single-service .section-service-btn {
    align-self: center;
    margin-top: auto;
}

@media (max-width: 767px) {
    .cp-service-row { display: block; }
    .cp-service-row > .single-service { display: block; }
}

/* --------------------------------------------------------------------------
   18. Contrast & spacing corrections
   -------------------------------------------------------------------------- */

/* 18a. Lighter scrim so the hero photograph is actually visible on the right,
   while the left stays dark enough to carry the headline. */
.gredient-overlay {
    background: linear-gradient(
        100deg,
        rgba(16, 38, 49, 0.90) 0%,
        rgba(16, 38, 49, 0.66) 48%,
        rgba(22, 48, 63, 0.30) 100%
    );
}

/* 18b. The hairline was colliding with the paragraph beneath it. */
.cp-rule { margin: 20px 0 26px; }
.section-title.text-center .cp-rule { margin: 20px auto 26px; }

/* 18c. Body copy on the navy panels was set at 300 weight and 80% opacity,
   which read as washed out at this size. */
.single-service p,
.section-blue p {
    color: rgba(246, 243, 238, 0.90);
    font-size: 0.9rem;
}
.hero-v1 p { color: rgba(246, 243, 238, 0.90); }
.ceu-badge { color: rgba(246, 243, 238, 0.88); }
.contact-detail li,
.opening-hours li { color: rgba(246, 243, 238, 0.90); }

/* 18d. The hero carries data-stellar-background-ratio, and jquery.stellar
   writes an inline background-position that pushed the photograph out of
   frame, leaving a flat navy block. An author `!important` outranks the
   script's inline declaration, so the image stays put. */
.hero-v1,
.hero-parallax {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 18e. Restore the hero photograph.
   index.html sets the image on the element, but the inline stylesheet's
   `background: var(--hero-gradient) !important` shorthand was resetting
   background-image, so the photo never rendered — the hero has been a flat
   gradient. Re-declaring the longhand later, also !important, wins. */
.hero-v1 {
    background-image: url('../img/hero/hero-bg.jpg') !important;
    background-color: #102631 !important;
}

/* 18f. Final scrim balance: dark enough on the left that the headline, body
   copy and accreditation note all clear AA, while the photograph still reads
   as texture toward the right. */
.gredient-overlay {
    background: linear-gradient(
        100deg,
        rgba(16, 38, 49, 0.93) 0%,
        rgba(16, 38, 49, 0.86) 38%,
        rgba(22, 48, 63, 0.66) 100%
    );
}

/* --------------------------------------------------------------------------
   19. Call-to-action band
   --------------------------------------------------------------------------
   The band layers .bg-overlay (a flat #333 at 60% opacity) over a photograph,
   which muddied the image to olive. A navy scrim matches the rest of the
   palette and gives the white type a clean ground.
   -------------------------------------------------------------------------- */
.bg-overlay {
    background: #102631;
}
.call-to-action .bg-overlay,
.call-to-action .bg-overlay.opacity-6 {
    background: linear-gradient(
        180deg,
        rgba(16, 38, 49, 0.90) 0%,
        rgba(22, 48, 63, 0.84) 100%
    );
    opacity: 1;
}

/* background-attachment: fixed is set inline and misbehaves on iOS; scroll is
   the safe equivalent and looks identical at this section height. */
.call-to-action .call-to-item {
    background-attachment: scroll !important;
    background-position: center center !important;
}

.call-to-action h2 { font-family: var(--cp-serif); letter-spacing: -0.015em; }

/* --------------------------------------------------------------------------
   20. Course cards
   -------------------------------------------------------------------------- */

/* 20a. Card header — was 700-weight sans in a navy bar. */
.coming-soon-header {
    background-color: var(--cp-navy);
    color: var(--cp-cream) !important;
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: 0;
}

/* 20b. The footer bar sits on navy, but the shared .bestd-list-item rule set
   dark ink, which rendered the STATUS and CE HOURS values invisible. */
.best-doctor-footer .bestd-list-item,
.best-doctor-footer .bestd-list-item span {
    color: var(--cp-cream);
    border-bottom: 0;
}
.best-doctor-footer .bestd-list-item {
    font-family: var(--cp-sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(246, 243, 238, 0.72);
}
.best-doctor-footer .bestd-list-item span {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cp-cream);
    margin-top: 3px;
}

/* 20c. Equal-height cards so the footers line up across the row. */
.cp-course-row {
    display: flex;
    flex-wrap: wrap;
}
.cp-course-row > [class*="col-"] {
    display: flex;
    float: none;
    margin-bottom: 30px;
}
.cp-course-row .bestdoctor-box-v2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cp-course-row .bestdoctor-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Push the CTA to the bottom so buttons align regardless of copy length. */
.cp-course-row .course-action-btn { margin-top: auto; }
.cp-course-row .course-tags-wrapper { margin-bottom: 16px; }

@media (max-width: 767px) {
    .cp-course-row { display: block; }
    .cp-course-row > [class*="col-"] { display: block; }
}

/* --------------------------------------------------------------------------
   21. Mobile overflow
   --------------------------------------------------------------------------
   Bootstrap 3's negative .row margins overshoot the container padding by a few
   pixels at narrow widths, so the document scrolls ~5px horizontally. Clamping
   at the root removes the sideways scroll without disturbing the grid.
   -------------------------------------------------------------------------- */
/* (overflow-x clamp removed — it hid content instead of fitting it) */

@media (max-width: 767px) {
    .container { padding-left: 18px; padding-right: 18px; }
    .row { margin-left: -12px; margin-right: -12px; }

    /* The template indents hero copy for a right-hand image that is not
       present at this width. */
    .intro-text { padding-right: 0; padding-top: 40px; }

    /* Keep the inquiry card clear of the viewport edges. */
    .quick-appoinment-form { margin-top: 28px; }
}

/* Policy pages lead with an h2 rather than an h1, so give the first one the
   display treatment and drop the top rule it would otherwise inherit. */
.policy-content h2:first-of-type {
    font-size: 2.8rem;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.policy-content { padding: 60px 0 80px; }
.policy-content h3 {
    font-size: 1.35rem;
    margin-top: 30px;
    color: var(--cp-navy);
}
.policy-content a { color: var(--cp-copper-ink); }
.policy-content a:hover { color: var(--cp-navy); }

/* Policy pages: give the text column a comfortable measure and centre it,
   rather than letting it hug the left edge of a wide viewport. */
.policy-content .container { max-width: 860px; }
.policy-content h4 {
    font-family: var(--cp-serif);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--cp-copper-ink);
    margin-top: 4px;
}
.policy-content h5 {
    font-family: var(--cp-serif);
    font-weight: 500;
    font-size: 1.45rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-navy);
    margin-top: 40px;
    margin-bottom: 12px;
}
.policy-content hr { border-top: 1px solid var(--cp-rule); margin: 26px 0; }
.policy-content p,
.policy-content li { color: var(--cp-ink-soft); max-width: none; }
.policy-content ul { margin-bottom: 20px; }

/* ==========================================================================
   22. TYPOGRAPHY SCALE  (supersedes the rem sizes set earlier in this file)
   --------------------------------------------------------------------------
   bootstrap.min.css sets `html { font-size: 10px }`, so every `rem` above
   resolved at 62.5% of its intended size — the eyebrow specified at 0.65rem
   rendered at 6.5px, nav links at 7px, course tags at 6px.

   Everything below is stated in px so the rendered size is unambiguous, and
   the whole scale is raised for comfortable reading on a professional
   education site. Body copy is 17px rather than the reference sites' lighter
   setting, because this audience reads dense clinical detail.
   ========================================================================== */

body {
    font-size: 17px;
    line-height: 1.75;
}

p { font-size: 17px; line-height: 1.8; }

/* --- Display ------------------------------------------------------------ */
.hero-v1 h1      { font-size: 56px; line-height: 1.08; }
section h2       { font-size: 42px; line-height: 1.14; margin-bottom: 20px; }
.call-to-action h2 { line-height: 1.14; }

/* --- Eyebrow: was 6.5px --------------------------------------------------- */
.cp-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin-bottom: 16px;
}

/* --- Header: nav was 7px -------------------------------------------------- */
.header-logo .logo-text { font-size: 30px; }

.header-area-v2 .mainmenu ul li a,
.mainmenu ul li a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.12em;
    padding: 26px 18px !important;
}

.mean-container .mean-nav ul li a { font-size: 16px; letter-spacing: 0.08em; }

/* --- Feature panels ------------------------------------------------------ */
.single-service h6 { font-size: 26px; }
.single-service p  { font-size: 16.5px; line-height: 1.8; }
.section-service-btn { font-size: 14px; letter-spacing: 0.12em; padding: 14px 32px; }

/* --- Course cards -------------------------------------------------------- */
.coming-soon-header { font-size: 22px; line-height: 1.3; padding: 20px 18px; }
.bestdoctor-info h6 { font-size: 26px; }
.bestdoctor-info p  { font-size: 16.5px; line-height: 1.8; }

.course-tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    /* Copper ink on a light copper wash — verified above 4.5:1. */
    background: rgba(192, 120, 68, 0.12);
    border-color: rgba(192, 120, 68, 0.45);
    color: #8A4E24;
}

.bestd-list-item { font-size: 13px; letter-spacing: 0.12em; }
.best-doctor-footer .bestd-list-item { font-size: 13px; }
.best-doctor-footer .bestd-list-item span { font-size: 16px; }

.course-action-btn,
.primary-btn,
.btn-login { font-size: 14px; letter-spacing: 0.12em; padding: 15px 32px; }

/* The template shrinks these again at narrow widths; keep them legible. */
@media (max-width: 767px) {
    .course-action-btn { font-size: 14px !important; padding: 13px 20px !important; }
    .active-course-details-list { font-size: 16px !important; }
}

/* --- Forms --------------------------------------------------------------- */
.quick-appoinment-form h6,
.contact-form-wrapper h4 { font-size: 28px; }

.form-group label { font-size: 13px; letter-spacing: 0.12em; }

.form-control {
    font-size: 16px;   /* 16px also stops iOS zooming the page on focus */
    padding: 14px 16px;
}
.form-control::placeholder { color: #5E707B; }

/* #777 measured 4.05:1 on the cream ground — below AA. */
.contact-form-wrapper > p,
.quick-appoinment-form > p { color: #4F6470; font-size: 15px; }

/* --- Contact & footer ---------------------------------------------------- */
.contact-detail li,
.opening-hours li { font-size: 16.5px; }
.creds, .doc-specialist { font-size: 13px; letter-spacing: 0.16em; }
.footer, .footer p, .footer a { font-size: 16px; }
.footer-widget p, .footer-widget li, .footer-widget a { font-size: 16px; }

/* --- Policy pages -------------------------------------------------------- */
.policy-content p,
.policy-content li { font-size: 17px; line-height: 1.85; }
.policy-content h2:first-of-type { font-size: 44px; }
.policy-content h4 { font-size: 22px; }
.policy-content h5 { font-size: 24px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    .hero-v1 h1 { font-size: 42px; }
    section h2  { font-size: 34px; }
}
@media (max-width: 767px) {
    body, p { font-size: 16.5px; }
    .hero-v1 h1 { font-size: 32px; line-height: 1.16; }
    section h2  { font-size: 28px; }
    .single-service h6, .bestdoctor-info h6 { font-size: 23px; }
    .coming-soon-header { font-size: 20px; }
    .policy-content h2:first-of-type { font-size: 32px; }
    .cp-eyebrow { font-size: 12px; }
}

/* ==========================================================================
   23. CONTRAST FIXES
   ========================================================================== */

/* 23a. Sticky header --------------------------------------------------------
   The inline stylesheet pins the scrolled header to
   `background-color: var(--darker-blue) !important`. Because section 15
   re-pointed that variable at navy, the scrolled header turned dark while the
   logo and nav text stayed dark navy — effectively invisible. Keeping the bar
   cream in both states also avoids a jarring flip on scroll. */
.header-area.is_stuck,
.header-area-v2.is_stuck {
    background-color: rgba(246, 243, 238, 0.97) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 16px rgba(16, 38, 49, 0.10) !important;
    border-bottom: 1px solid var(--cp-rule);
}
.is_stuck .header-logo .logo-text { color: var(--cp-navy) !important; }
.is_stuck .header-logo .logo-text span { color: var(--cp-copper-ink) !important; }
.is_stuck .mainmenu ul li a,
.is_stuck.header-area-v2 .mainmenu ul li a {
    color: var(--cp-navy) !important;
    padding: 18px 18px !important;
}
.is_stuck .mainmenu ul li a:hover { color: var(--cp-copper-ink) !important; }

/* 23b. Accreditation note ---------------------------------------------------
   This sat directly on the hero photograph, where the scrim lightens toward
   the right, so its legibility depended on whatever was behind it. Giving it
   its own near-opaque panel makes the contrast independent of the image. */
.ceu-badge {
    background: rgba(13, 32, 42, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(219, 158, 99, 0.55);
    border-left: 3px solid var(--cp-copper-light);
    color: #F6F3EE;
    font-size: 14.5px;
    line-height: 1.65;
    letter-spacing: 0.02em;
    padding: 16px 20px;
    max-width: 44em;
}

/* 23c. Hero copy at full strength on the scrim. */
.hero-v1 p {
    color: #F1EDE6;
    font-size: 18px;
    line-height: 1.8;
}
.hero-v1 .cp-eyebrow { color: #E8B07A; }

/* 23d. Panel and dark-ground copy. */
.single-service p,
.section-blue p,
.contact-detail li,
.opening-hours li { color: #E9E5DE; }
.contact-detail li a { color: #E9E5DE; }
.best-doctor-footer .bestd-list-item { color: #CFC9C0; }

/* 23e. Footer link contrast on the deep navy ground. */
.footer a, .footer p { color: #DCD7CF; }
.footer a:hover { color: var(--cp-copper-light); }

/* 23f. Nav fit ---------------------------------------------------------------
   style.css adds `margin-right: 30px` to each nav item, which stacked on top
   of the link padding and pushed CONTACT onto a second row once the links
   were sized up to 15px. Spacing now comes from the padding alone. */
.mainmenu ul li { margin-right: 0; }
.mainmenu ul { display: flex; align-items: center; flex-wrap: nowrap; }
.mainmenu ul li a,
.header-area-v2 .mainmenu ul li a {
    padding: 26px 16px !important;
    white-space: nowrap;
}
.is_stuck .mainmenu ul li a,
.is_stuck.header-area-v2 .mainmenu ul li a { padding: 18px 16px !important; }

/* Reclaim width from the logo column so the nav has room to breathe. */
@media (min-width: 768px) {
    .header-area .header-logo { width: 33.33%; }
    .header-area .mainmenu-area { width: 66.66%; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .mainmenu ul li a,
    .header-area-v2 .mainmenu ul li a {
        font-size: 13px;
        padding: 24px 11px !important;
        letter-spacing: 0.08em;
    }
    .header-logo .logo-text { font-size: 25px; }
}

/* 23g. Course-detail sub-labels ------------------------------------------- */
.active-course-section-heading {
    font-size: 14px !important;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--cp-copper-ink) !important;
}
.active-course-details-list,
.active-course-details-list li { font-size: 16px; line-height: 1.7; }
.active-course-objectives li { font-size: 16.5px; line-height: 1.75; }
.active-course-details-box { border-left-color: var(--cp-copper); }

/* ==========================================================================
   24. Cream cards nested inside dark sections
   --------------------------------------------------------------------------
   The contact form card sits inside #contact, which is .section-blue. The
   dark-ground rule `.section-blue p { color: #E9E5DE }` therefore also matched
   the paragraph inside the cream card, rendering it cream-on-cream. These
   rules re-assert dark ink for anything on a light card, and are placed last
   so they win over the section-level defaults.
   ========================================================================== */
.contact-form-wrapper,
.quick-appoinment-form {
    color: var(--cp-ink);
}
.section-blue .contact-form-wrapper p,
.section-blue .contact-form-wrapper label,
.section-blue .contact-form-wrapper li,
.contact-form-wrapper > p,
.quick-appoinment-form > p {
    color: #4F6470;
}
.section-blue .contact-form-wrapper h1,
.section-blue .contact-form-wrapper h2,
.section-blue .contact-form-wrapper h3,
.section-blue .contact-form-wrapper h4,
.section-blue .contact-form-wrapper h5,
.section-blue .contact-form-wrapper h6 {
    color: var(--cp-navy);
}
.contact-form-wrapper > p { font-size: 16px; line-height: 1.7; }
.contact-form-wrapper label,
.section-blue .contact-form-wrapper label {
    color: var(--cp-navy);
    font-size: 13px;
    letter-spacing: 0.12em;
}
.contact-form-wrapper h4 { font-weight: 400; }

/* The contact column's own intro copy sits on navy and was still at the
   template's 14px. Scoped to the left-hand column only: an earlier, broader
   version of this rule (.contact-info > .container p) also matched the
   paragraph inside the cream form card and repainted it cream-on-cream. */
.contact-info .col-md-5 p,
.contact-info .col-md-5 li,
#contact .contact-detail li,
#contact .opening-hours li {
    font-size: 16.5px;
    line-height: 1.8;
    color: #E9E5DE;
}

/* Send button keeps copper fill with dark ink for AA. */
.contact-submit-btn {
    background: var(--cp-copper) !important;
    border-color: var(--cp-copper) !important;
    color: #16303F !important;
    font-size: 14px;
    letter-spacing: 0.12em;
    border-radius: 0;
}
.contact-submit-btn:hover {
    background: var(--cp-cream) !important;
    border-color: var(--cp-cream) !important;
    color: var(--cp-navy) !important;
}


/* Light card inside the navy contact section — ID specificity so no
   section-level rule can repaint this text cream again. */
#contact .contact-form-wrapper p,
#contact .contact-form-wrapper li {
    color: #4F6470;
    font-size: 16px;
    line-height: 1.7;
}
#contact .contact-form-wrapper label { color: var(--cp-navy); font-size: 13px; }
#contact .contact-form-wrapper h4 { color: var(--cp-navy); }
#contact .contact-form-wrapper .form-control { color: var(--cp-ink); }

/* ==========================================================================
   25. AA corrections from the full-page contrast sweep
   ========================================================================== */

/* 25a. Copper text ink ------------------------------------------------------
   #9E5A2B measured 4.44:1 on the cream-deep band (#EFEAE2) — just short of
   4.5. Darkened to #8A4E24, which measures 5.48:1 there and stays warm. */
:root {
    --cp-copper-ink: #8A4E24;
    --cp-copper-adaptive: #8A4E24;
}
.accent-color { color: #8A4E24; }

/* 25b. Text ON copper fills -------------------------------------------------
   Cream on copper is only 3.49:1 and the previous #16303F was 3.93:1. A
   near-black navy reaches 4.78:1 while keeping the copper button reading as
   copper. */
.section-blue .primary-btn,
.call-to-action .primary-btn,
.contact-submit-btn,
.section-service-btn:hover,
.section-service-btn:focus {
    color: #0D202A !important;
}
.contact-submit-btn { font-weight: 700; }

/* 25c. Outline buttons on the navy panels ----------------------------------
   These were rendering as copper fills with cream text (3.49:1). Returning
   them to a true outline on the navy ground gives cream-on-navy instead. */
.section-service-btn {
    background: transparent !important;
    border: 1px solid rgba(246, 243, 238, 0.55) !important;
    color: #F6F3EE !important;
}
.section-service-btn:hover,
.section-service-btn:focus {
    background: var(--cp-cream) !important;
    border-color: var(--cp-cream) !important;
    color: #16303F !important;
}

/* 25d. Footer widget links sit on the cream-deep band. */
.footer-widget a,
.footer-widget li a { color: #8A4E24; }
.footer-widget a:hover { color: var(--cp-navy); }

/* 25e. Small-print sizes raised off the 12-13px floor. */
.course-tag { font-size: 13px; }
.bestd-list-item,
.best-doctor-footer .bestd-list-item { font-size: 14px; }
.creds, .doc-specialist { font-size: 14px; }
.cp-eyebrow { font-size: 14px; }
@media (max-width: 767px) { .cp-eyebrow { font-size: 13px; } }

/* 25f. Final pass on the smallest remaining labels. */
.course-tag { font-size: 14px; padding: 7px 13px; }
.bestd-list-item,
.best-doctor-footer .bestd-list-item { font-size: 14px !important; }
.best-doctor-footer .bestd-list-item span { font-size: 17px; }