/**
 * Main Stylesheet for Dr. Ankit Parakh Custom Theme
 * Ultra-Performance, Pixel-to-Pixel Medical Design System
 */

/* =========================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================= */
:root {
    /* Brand Colors */
    --color-primary: #0E2342;       /* Deep Navy */
    --color-primary-light: #1E3A8A;
    --color-teal: #00A896;          /* Emerald / Medical Teal */
    --color-teal-dark: #00796B;
    --color-teal-darker: #00655A;
    --color-teal-light: #E6F7F5;
    --color-blue: #0369A1;          /* Royal Medical Blue */
    --color-blue-light: #E8F3FD;
    --color-purple: #6C5CE7;        /* Soft Purple */
    --color-purple-light: #F0EDFD;
    --color-pink: #E84393;          /* Warm Coral / Pink */
    --color-pink-light: #FCE8F3;
    --color-gold: #F59E0B;          /* Amber Gold */
    --color-gold-light: #FEF3C7;
    --color-cyan: #00CEC9;          /* Fresh Cyan */
    --color-cyan-light: #E6FAFA;
    --color-mint: #10B981;
    --color-mint-light: #ECFDF5;

    /* Neutrals */
    --color-dark: #0E2342;
    --color-text-main: #1E293B;
    --color-text-muted: #5D6C82; /* darkened from #64748B: the old value passed on white (4.76) but fell to 4.46 on every tinted panel */
    --color-text-light: #94A3B8;
    --color-bg-page: #FAFCFE;
    --color-bg-white: #FFFFFF;
    --color-bg-alt: #F8FAFC;
    --color-border: #E2E8F0;
    --color-border-light: #F1F5F9;

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type scale — the theme previously had 57 near-duplicate one-off
       font-size values (0.58rem, 0.72rem, 0.74rem, 0.76rem...) with no
       shared scale. Being migrated section by section onto this fixed set
       so nearby sizes (e.g. 13.44px vs 13.6px vs 13.76px) collapse into one
       intentional value instead of three accidental ones. */
    --text-3xs: 0.6875rem; /* 11px  — the smallest label size actually in use */
    --text-2xs: 0.75rem;   /* 12px  — micro labels, badges, meta */
    --text-xs: 0.8125rem;  /* 13px  — small captions, footnotes */
    --text-sm: 0.875rem;   /* 14px  — secondary body text, nav links */
    --text-base: 1rem;     /* 16px  — default body copy */
    --text-md: 1.125rem;   /* 18px  — lead paragraphs, card titles */
    --text-lg: 1.25rem;    /* 20px  — small headings (h4/h5) */
    --text-xl: 1.5rem;     /* 24px  — h3 */
    --text-2xl: 1.875rem;  /* 30px  — h2 (mobile) */
    --text-3xl: 2.25rem;   /* 36px  — h2 (desktop) */
    --text-4xl: 2.75rem;   /* 44px  — h1 (mobile) */
    --text-5xl: 3.5rem;    /* 56px  — h1 (desktop) */

    /* Shadows & Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 9999px;

    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 30px rgba(15, 76, 129, 0.06);
    --shadow-hover: 0 20px 40px rgba(15, 76, 129, 0.12);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

    /* Layout */
    --container-max-width: 1240px;
    --section-spacing: 64px;
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* Spacing scale — page.php, single.php and most page-*.php templates
       already write Bootstrap-style spacing classes (py-5, mb-4, mt-3...)
       but this theme never shipped Bootstrap or defined them, so they were
       silent no-ops sitewide. Standard Bootstrap rem scale, so the classes
       now do what every template already assumed they did. */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 1rem;     /* 16px */
    --space-4: 1.5rem;   /* 24px */
    --space-5: 3rem;     /* 48px */
    /* Colours that were used throughout the stylesheet without ever being
       defined — named here so they can be changed in one place. Deliberately
       kept distinct from the tokens they sit near rather than merged. */
    --color-text-body:     #475569;   /* Body copy grey, one step darker than --color-text-muted. */
    --color-text-strong:   #334155;   /* Strongest body grey, used for article text. */
    --color-sky-100:       #BAE6FD;   /* Light blue border/tint on active list rows and pills. */
    --color-sky-50:        #EFF6FF;   /* Pale blue background for selected rows. */
    --color-sky-600:       #0284C7;   /* Accent blue for icons and focus rings. */
}

/* =========================================================
   2. RESET & BASE STYLES
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    background-color: var(--color-bg-page);
    line-height: 1.6;
    /* `overflow-x: hidden` alone forces overflow-y to compute as `auto` (CSS
       spec: a non-visible overflow-x promotes a visible overflow-y) — even
       writing overflow-y:visible explicitly still gets promoted to auto, so
       that can't fix it. `clip` is the one non-visible keyword the spec
       doesn't promote: it blocks horizontal overflow without turning body
       into its own scroll container, which is what was breaking
       position:sticky for every descendant (including this page's sidebar). */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
}

/* =========================================================
   3. UTILITIES & HELPER CLASSES
   ========================================================= */
.site-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.py-section {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
}

.text-center { text-align: center; }
.color-cyan { color: var(--color-cyan); }
.color-mint { color: var(--color-mint); }

.bg-light-gradient {
    background: linear-gradient(180deg, var(--color-bg-page) 0%, #EEF6F5 50%, var(--color-bg-page) 100%);
}

/* Bootstrap-style spacing utilities — see --space-* tokens above for why
   these exist. Only the directions/steps actually referenced by templates. */
.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }

.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

.ml-0 { margin-left: var(--space-0) !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }

.mr-0 { margin-right: var(--space-0) !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }

.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }

.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }

.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }

.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }

.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }

/* =========================================================
   Homepage Section Colour Rhythm — alternating washes in the
   two brand colours (teal / blue) only, instead of a different
   unrelated hue per section, so the page reads as one coherent
   brand rather than a rainbow on scroll. White sections still
   act as breathing-room dividers between tinted ones.
   ========================================================= */
#section-appointment { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-teal-light) 50%, var(--color-bg-white) 100%); }
#section-specialist  { background: var(--color-bg-white); }
#section-services    { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-blue-light) 50%, var(--color-bg-white) 100%); }
#section-conditions  { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-teal-light) 50%, var(--color-bg-white) 100%); }
#section-clinic      { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-blue-light) 50%, var(--color-bg-white) 100%); }
#section-youtube     { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-teal-light) 50%, var(--color-bg-white) 100%); }
#section-reviews     { background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-blue-light) 50%, var(--color-bg-white) 100%); }
#section-articles    { background: var(--color-bg-white); }
#section-instagram   { background: linear-gradient(135deg, var(--color-teal-light) 0%, var(--color-blue-light) 100%); }

.bg-light-alt {
    background-color: var(--color-bg-alt);
}

.bg-mint-light { background-color: var(--color-teal-light); }
.bg-blue-light { background-color: var(--color-blue-light); }
.bg-purple-light { background-color: var(--color-purple-light); }
.bg-cyan-light { background-color: var(--color-cyan-light); }

.bg-teal { background-color: var(--color-teal); }
.bg-blue { background-color: var(--color-blue); }
.bg-purple { background-color: var(--color-purple); }
.bg-cyan { background-color: var(--color-cyan); }

.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Section Header Typography */
.section-header {
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin-top: 12px;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.title-underline-accent {
    width: 48px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 2px;
    margin: 12px auto 16px;
    position: relative;
}

.title-underline-accent::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 5px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 2px;
}

.title-underline-gradient {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #962FBF, #D62976, #F58529);
    border-radius: 2px;
    margin: 12px auto 16px;
}

.section-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Badges */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-primary-tint {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
}

.badge-teal-tint {
    background-color: var(--color-teal-light);
    color: var(--color-teal-dark);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    font-weight: 700;
    font-size: var(--text-base);
    border-radius: var(--radius-pill);
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
    text-align: center;
    white-space: nowrap;
}

.btn-lg {
    padding: 14px 32px;
    font-size: var(--text-md);
}

.btn-sm {
    padding: 8px 18px;
    font-size: var(--text-xs);
}

.btn-block {
    width: 100%;
}

.btn-navy-pill {
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(14, 35, 66, 0.25);
}

.btn-navy-pill:hover {
    background-color: #173663;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(14, 35, 66, 0.35);
    color: var(--color-bg-white);
}

.btn-teal-pill {
    background-color: var(--color-teal);
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
}

.btn-teal-pill:hover {
    background-color: var(--color-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 168, 150, 0.35);
    color: var(--color-bg-white);
}

.btn-blue-pill {
    background-color: var(--color-blue);
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(9, 132, 227, 0.25);
}

.btn-blue-pill:hover {
    background-color: #076fc4;
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

.btn-purple-pill {
    background-color: var(--color-purple);
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.25);
}

.btn-purple-pill:hover {
    background-color: #5b4bc7;
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

.btn-cyan-pill {
    background-color: #00B5B0;
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(0, 181, 176, 0.25);
}

.btn-cyan-pill:hover {
    background-color: #009692;
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

.btn-whatsapp-pill {
    background-color: var(--color-bg-white);
    color: var(--color-teal-dark);
    border: 1.5px solid var(--color-teal);
}

.btn-whatsapp-pill:hover {
    background-color: var(--color-teal-light);
    transform: translateY(-2px);
    color: var(--color-teal-dark);
}

.btn-youtube-red {
    background-color: #E02424;
    color: var(--color-bg-white);
    box-shadow: 0 6px 20px rgba(224, 36, 36, 0.3);
}

.btn-youtube-red:hover {
    background-color: #C81E1E;
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

/* Instagram's own sunset ramp, with the two lightest stops darkened. White
   text on the original #F58529 measured 2.54:1; every stop below clears
   5.5:1 while the gradient still reads as Instagram. */
.btn-instagram-gradient {
    background: linear-gradient(45deg, #B34700, #C2185B, #8E24AA, #4F5BD5);
    color: var(--color-bg-white);
    box-shadow: 0 6px 20px rgba(214, 41, 118, 0.35);
}

.btn-instagram-gradient:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

.btn-outline-pill {
    background-color: var(--color-bg-white);
    color: var(--color-blue);
    border: 1.5px solid #CBD5E1;
}

.btn-outline-pill:hover {
    border-color: var(--color-blue);
    background-color: var(--color-blue-light);
}

/* --color-teal is the logo accent and is only 3.0:1 on white — fine for the
   border, not for the label. The darker teal carries the text at 4.81:1. */
.btn-outline-teal {
    background-color: var(--color-bg-white);
    color: var(--color-teal-dark);
    border: 1.5px solid var(--color-teal);
}

.btn-outline-teal:hover {
    background-color: var(--color-teal);
    color: var(--color-bg-white);
}


/* =========================================================
   4. SITE HEADER & MEGA MENU
   ========================================================= */
/* No rule existed for this container before — its two CTA buttons plus the
   mobile toggle were laying out via plain inline flow, which let them wrap
   onto separate lines instead of sitting in a row once a second button
   (WhatsApp) was added. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header {
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: var(--transition-fast);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
}

.site-branding {
    display: flex;
    align-items: center;
}

.brand-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo-icon-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

/* --logo-* come from Customize → Logo Colors (inc/customizer.php). */
.logo-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--logo-title-color, var(--color-primary));
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.logo-subtitle {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--logo-subtitle-color, var(--color-text-muted));
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Nav Menu */
.main-navigation .nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-menu > .menu-item {
    position: relative;
    height: 84px;
    display: flex;
    align-items: center;
}

.nav-menu > .menu-item > a {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 8px 0;
    white-space: nowrap;
}

.nav-menu > .menu-item > a:hover,
.nav-menu > .menu-item.current-menu-item > a {
    color: var(--color-primary);
}

.nav-active-bar {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 24px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-menu > .menu-item.current-menu-item > a .nav-active-bar,
.nav-menu > .menu-item:hover > a .nav-active-bar {
    opacity: 1;
    transform: scaleX(1);
}

/* Simple Dropdown */
.simple-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition-smooth);
    z-index: 100;
}

/* :focus-within as well as :hover. The panel is hidden with
   `visibility: hidden`, which also takes its links out of the tab order, so
   until now a keyboard user tabbed straight past "Conditions Treated" to
   "Services" and could not reach any of the 36 links inside either panel. */
.menu-item-has-children:hover > .simple-dropdown,
.menu-item-has-children:focus-within > .simple-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.simple-dropdown li a {
    display: block;
    padding: 10px 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-main);
}

.simple-dropdown li a:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-teal-dark);
    padding-left: 24px;
}

/* Mega Menu Dropdown */
.has-mega-menu {
    position: static !important;
}

.mega-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-white);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 2px solid var(--color-teal);
    padding: 36px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition-smooth);
    z-index: 99;
}

.has-mega-menu:hover .mega-menu-wrapper,
.has-mega-menu:focus-within .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Closed by Escape: the panel stays shut until focus leaves the item, so a
   keyboard user is not trapped re-opening it on every tab. */
.has-mega-menu.menu-force-closed .mega-menu-wrapper,
.menu-item-has-children.menu-force-closed > .simple-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.mega-menu-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Conditions Treated & Services menus list only the real top-level pages
   (no sub-condition/sub-test children — those live inside their parent page,
   matching the live site's own menu), as a plain 3-column list with no
   category badges or featured card. */
.mega-menu-wrapper--flat {
    padding: 28px 0;
}
.mega-menu-inner--flat {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 32px;
}
.mega-menu-inner--flat .mega-col {
    display: flex;
    flex-direction: column;
}

/* Badge and heading are both inline; left alone they run together on one line
   and the heading wraps around the badge — "ALLERGY CLINIC Allergy & Lung /
   Tissue". The heading is given its own row below to keep them apart. */
.mega-col-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    margin-bottom: 16px;
}

/* The icon used to sit on a row of its own above the badge, costing the
   panel ~38px of height for no extra information. Icon and badge are both
   label-scale elements, so they share row one; the heading is pushed to its
   own full-width row beneath them. */
.mega-col-header .mega-heading {
    flex: 0 0 100%;
}

.mega-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}

/* Badge label colours are darkened where they sat below 4.5:1 on their own
   tint. These are 12px uppercase labels, so they need the full ratio; the
   three that already passed are left exactly as they were.
     allergy  #C72E76 -> #B02561   4.40 -> 5.48
     sleep    #6C5CE7 -> #5B4BD6   4.22 -> 5.33
     program  #00B5B0 -> #007D79   2.36 -> 4.61   */
.badge-asthma { background: var(--color-teal-light); color: var(--color-teal-dark); }
.badge-allergy { background: var(--color-pink-light); color: #B02561; }
.badge-sleep { background: var(--color-purple-light); color: #5B4BD6; }
.badge-pft { background: var(--color-blue-light); color: var(--color-blue); }
.badge-broncho { background: var(--color-gold-light); color: #B45309; }
.badge-program { background: var(--color-cyan-light); color: #007D79; }

.mega-heading {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.mega-list li {
    margin-bottom: 10px;
}

.mega-list li a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mega-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-teal);
    flex-shrink: 0;
}

.mega-list li a:hover {
    /* teal-dark, not teal: on the panel's white ground #00A896 is only 2.98:1,
       so hovering a link made it harder to read than at rest. */
    color: var(--color-teal-dark);
    transform: translateX(4px);
}

.mega-featured-card {
    background: linear-gradient(135deg, #F0FDF4 0%, var(--color-teal-light) 100%);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #CCFBF1;
}

.badge-accent {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.mega-featured-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.mega-featured-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

/* Mega Menu Bottom Bar Strip */
.mega-menu-bottom-bar {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-alt);
    padding: 14px 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.mega-bottom-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

.mega-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal-dark);
    flex-shrink: 0;
}

.mega-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: var(--color-bg-white) !important;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(14, 35, 66, 0.18);
    transition: var(--transition-fast);
}

.mega-view-all-link:hover {
    /* White on #00A896 is 2.98:1; the resting navy pill is 15.7:1, so the
       hover was the least readable state. teal-dark holds 5.32:1. */
    background: var(--color-teal-dark);
    color: var(--color-bg-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 150, 0.3);
}

.mega-view-all-link svg {
    transition: transform 0.2s ease;
}

.mega-view-all-link:hover svg {
    transform: translateX(4px);
}

.mobile-view-all-item a {
    /* teal-dark: #00A896 on the teal-light pill is only 2.70:1. */
    color: var(--color-teal-dark) !important;
    font-weight: 700 !important;
    background: var(--color-teal-light);
    padding: 8px 14px !important;
    border-radius: var(--radius-sm);
    display: block;
    margin-bottom: 6px;
}


/* Mobile Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger-icon span {
    display: block;
    width: 24px;
    height: 2.5px;
    background-color: var(--color-primary);
    margin-bottom: 5px;
    border-radius: 2px;
}

.hamburger-icon span:last-child {
    margin-bottom: 0;
}


/* =========================================================
   5. SECTION 1: HERO SECTION
   ========================================================= */
.hero-section {
    position: relative;
    padding: 70px 0 90px;
    background: radial-gradient(circle at 80% 20%, #F0FDF4 0%, var(--color-bg-page) 55%, var(--color-bg-page) 100%);
    overflow: hidden;
}

/* Floating Doodles */
.doodle-heart-top {
    position: absolute;
    top: 40px;
    left: 45%;
    width: 20px;
    height: 20px;
    background: #FF6B6B;
    transform: rotate(45deg);
    opacity: 0.6;
    display: none;
}

.doodle-cloud-top {
    position: absolute;
    top: 20px;
    right: 80px;
    animation: floatAnim 4s ease-in-out infinite alternate;
}

.doodle-star-yellow {
    position: absolute;
    top: 80px;
    right: 40px;
    color: #B45309;
    font-size: var(--text-xl);
    animation: pulseAnim 3s infinite;
}

.doodle-heart-red {
    color: #FF5252;
    font-size: var(--text-2xl);
    margin-left: 4px;
    vertical-align: middle;
}

@keyframes floatAnim {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes pulseAnim {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.hero-badge {
    background-color: var(--color-teal-light);
    color: var(--color-teal-dark);
    margin-bottom: 24px;
}

.hero-doctor-name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    margin-bottom: 8px;
}

.hero-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 520px;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.hero-video-cta {
    display: inline-block;
}

.video-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.play-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    transition: var(--transition-smooth);
}

.video-play-btn:hover .play-circle {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(9, 132, 227, 0.25);
}

.video-cta-text strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.video-cta-text span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Hero Visual */
.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-main-img {
    position: relative;
    z-index: 2;
    max-height: 440px;
    object-fit: contain;
}

/* Dr. Ankit Parakh Photo — shared frame used in Hero, Specialist, Clinic & YouTube sections */
.dr-photo-frame {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: radial-gradient(circle at 50% 38%, #E0F2FE 0%, var(--color-bg-alt) 100%);
}

.dr-photo {
    display: block;
    object-position: center top;
    filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

.hero-photo-frame {
    width: 360px;
    max-width: 100%;
    height: 420px;
    box-shadow: var(--shadow-card);
}

.hero-photo-frame .dr-photo.hero-main-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.hero-floating-card {
    position: absolute;
    right: -20px;
    top: 25%;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: 0 15px 35px rgba(14, 35, 66, 0.12);
    border: 1px solid var(--color-border-light);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 170px;
}

.float-metric-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.float-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-purple { background: var(--color-purple-light); }
.icon-teal { background: var(--color-teal-light); }
.icon-gold { background: var(--color-gold-light); }
.icon-red { background: var(--color-pink-light); }
.icon-blue { background: var(--color-blue-light); }

.float-stat-num {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

.float-stat-label {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.float-rating-stars {
    color: #B45309;
    font-size: var(--text-2xs);
    letter-spacing: 1px;
}

/* Hero Bottom 5-Stat Strip */
.hero-stats-bar {
    margin-top: 50px;
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 24px 36px;
    box-shadow: 0 15px 40px rgba(15, 76, 129, 0.07);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.hero-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bg-mint { background-color: var(--color-teal-light); }

.stat-number {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    line-height: 1.1;
}

.stat-text {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-weight: 600;
}


/* =========================================================
   6. SECTION 2: FOR APPOINTMENT
   ========================================================= */
.appointment-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.clinic-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.clinic-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* Clinic cards are image-free: the only art available for them was a set of
   3KB placeholder gradients, so the icon + name header carries the card
   instead — lighter to load and honest about what we actually have. */
.clinic-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.clinic-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-card-content {
    padding: 20px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.clinic-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    /* Two of the four names wrap to a second line and two do not. Reserving
       both lines everywhere keeps the address, the timings and the button on
       one line across the row instead of stair-stepping. */
    min-height: 2.5em;
}

.clinic-location {
    display: flex;
    /* flex-start, not center: on a two-line address a centred pin floats
       against the middle of the block instead of marking the first line. */
    align-items: flex-start;
    gap: 6px;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-muted);
    margin-bottom: 14px;
    min-height: 2.9em; /* two lines, for the same reason as .clinic-name */
}

.clinic-location svg {
    flex-shrink: 0;
    margin-top: 0.2em; /* optical: sits on the first line of the address */
}

.clinic-availability-tag {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    margin-top: auto;
    /* One status line plus two lines of timings. Without it the cards whose
       timings fit on one line show a visibly shorter chip. */
    min-height: 4.9em;
}

.avail-status {
    font-size: var(--text-2xs);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.avail-time {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    display: block;
}

.appointment-trust-bar {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 20px 30px;
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.trust-message {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-message strong {
    font-size: var(--text-base);
    color: var(--color-primary);
    display: block;
}

.trust-message p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.trust-badges-list {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
}


/* =========================================================
   7. SECTION 3: MEET OUR SPECIALIST
   ========================================================= */
.specialist-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
        "top    visual"
        "bottom visual";
    gap: 50px;
    align-items: center;
    margin-bottom: 50px;
}

.specialist-info-top { grid-area: top; }
.specialist-visual { grid-area: visual; }
.specialist-info-bottom { grid-area: bottom; }

.specialist-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin-top: 12px;
    margin-bottom: 8px;
}

.degrees-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.degree-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-blue-light);
    color: var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
}

.specialist-para {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.specialist-visual {
    position: relative;
}

.specialist-img-box {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.doctor-profile-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.specialist-floating-trust {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-check-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-label { font-size: var(--text-2xs); color: var(--color-text-muted); display: block; }
.trust-highlight { font-size: var(--text-base); font-weight: 700; color: var(--color-teal); display: block; line-height: 1; }
.trust-sub { font-size: var(--text-2xs); color: var(--color-text-muted); }

.specialist-metrics-bar {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 24px 36px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.metric-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-num {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

.metric-text {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.mini-bar {
    height: 3px;
    border-radius: 2px;
    width: 36px;
}


/* =========================================================
   8. SECTION 4: SPECIALIZED SERVICES
   ========================================================= */
.services-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 40px;
}

.service-card {
    position: relative;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    border: 1.5px solid transparent;
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 16px;
    align-items: center;
    transition: var(--transition-smooth);
}

.service-card:hover {
    cursor: pointer;
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.border-blue:hover { border-color: var(--color-blue); }
.border-teal:hover { border-color: var(--color-teal); }
.border-purple:hover { border-color: var(--color-purple); }
.border-red:hover { border-color: var(--color-pink); }
.border-gold:hover { border-color: var(--color-gold); }
.border-cyan:hover { border-color: var(--color-cyan); }

.service-icon-box {
    margin-bottom: 12px;
}

.service-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.service-desc {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.service-link {
    font-size: var(--text-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.service-img-wrap {
    height: 125px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.service-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Service Bottom Teddy Bear Banner */
.service-bottom-banner {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 20px 32px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.banner-left-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.banner-tag {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: block;
}

.banner-title {
    font-size: var(--text-md);
    font-weight: 700;
}

.banner-right-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}


/* =========================================================
   9. SECTION 5: CONDITIONS TREATED
   ========================================================= */
.conditions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.conditions-header .section-header {
    text-align: left;
    max-width: 640px;
}

.conditions-header .title-underline-accent {
    margin-left: 0;
}

.conditions-header-art {
    flex-shrink: 0;
    width: 300px;
    max-width: 38%;
}

.conditions-header-art img {
    display: block;
    width: 100%;
    height: auto;
}

.conditions-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 36px;
    scroll-snap-type: x mandatory;
}

.condition-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    text-align: center;
    scroll-snap-align: start;
}

/* Stretched link — makes the whole card clickable while keeping a
   single valid <a> per card (same href, larger tap target, no SEO impact) */
.stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.condition-card:hover {
    cursor: pointer;
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.card-mint { background: linear-gradient(180deg, #F0FDF4 0%, var(--color-bg-white) 100%); }
.card-blue { background: linear-gradient(180deg, var(--color-sky-50) 0%, var(--color-bg-white) 100%); }
.card-purple { background: linear-gradient(180deg, #FAF5FF 0%, var(--color-bg-white) 100%); }
.card-orange { background: linear-gradient(180deg, #FFF7ED 0%, var(--color-bg-white) 100%); }

.cond-media {
    width: 100%;
    /* 16/11 made a 229px band above three lines of text; 16/9 keeps the
       illustration readable and takes ~40px off every card. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.cond-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* When the card is showing one of the shared condition icons rather than a
   full-bleed illustration, it is a transparent glyph: `cover` would crop it
   and push it off centre, so it is contained and inset instead. */
.cond-media-img.is-cond-icon {
    object-fit: contain;
    padding: 14px;

}

.cond-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 20px 20px;
    flex: 1;
}

.dots-accent {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.dots-accent span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.dots-green span { background: var(--color-mint); }
.dots-blue span { background: #0984E3; }
.dots-purple span { background: var(--color-purple); }
.dots-orange span { background: var(--color-gold); }

.cond-title {
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: 10px;
}

.cond-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.btn-circle-action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 700;
}

.arrow-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-circle-mint { color: #047857; }
.btn-circle-blue { color: var(--color-blue); }
.btn-circle-purple { color: var(--color-purple); }
.btn-circle-orange { color: #EA580C; }

.btn-circle-nav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    font-size: var(--text-md);
    cursor: pointer;
    margin-right: 8px;
    transition: var(--transition-fast);
}

.btn-circle-nav:hover {
    background: var(--color-teal);
    color: var(--color-bg-white);
    border-color: var(--color-teal);
}


/* =========================================================
   10. SECTION 6: CHILDREN'S CHEST CLINIC
   ========================================================= */
.clinic-feature-box {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 50px 60px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 30px;
}

.feature-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 14px 0 16px;
}

.feature-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 30px;
}

.feature-stats-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.f-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.f-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.f-stat-num {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    line-height: 1.1;
}

.f-stat-lbl {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

.feature-img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    max-height: 340px;
    width: 100%;
    object-fit: cover;
}

.clinic-services-strip {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

.cs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-primary);
}

.cs-icon {
    flex-shrink: 0;
}

.clinic-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cta-trust-note {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* =========================================================
   11. SECTION 7: YOUTUBE BANNER
   ========================================================= */
.youtube-banner-card {
    background: linear-gradient(135deg, #F5F3FF 0%, var(--color-bg-white) 60%, #FAF5FF 100%);
    border-radius: var(--radius-xl);
    padding: 50px 60px;
    box-shadow: var(--shadow-card);
    border: 1.5px solid #DDD6FE;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 30px;
}

.yb-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 14px 0 16px;
}

.yb-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 30px;
}

.yb-visual {
    position: relative;
}

.yb-img {
    border-radius: var(--radius-lg);
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.yb-floating-badge {
    position: absolute;
    bottom: -15px;
    right: 20px;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.yb-highlights-strip {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.yb-hl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-primary);
}


/* =========================================================
   12. SECTION 8: GOOGLE REVIEWS
   ========================================================= */
.reviews-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}

.review-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stars-gold {
    color: #B45309;
    font-size: var(--text-base);
    letter-spacing: 2px;
}

.review-text {
    font-size: var(--text-sm);
    color: var(--color-text-main);
    line-height: 1.6;
    margin-bottom: 24px;
    font-style: italic;
}

.reviewer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.reviewer-name {
    font-size: var(--text-sm);
    color: var(--color-primary);
    display: block;
}

.reviewer-role {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.google-trust-bar {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 20px 36px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 24px;
    align-items: center;
}

.gt-col-google {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gt-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gt-score {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
}

.gt-stars {
    color: #B45309;
    font-size: var(--text-xs);
}

.gt-review-count {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.gt-col-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gt-col-stat strong {
    font-size: var(--text-md);
    color: var(--color-primary);
    display: block;
    line-height: 1.1;
}

.gt-col-stat span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.gt-col-btn {
    text-align: right;
}


/* =========================================================
   13. SECTION 9: LATEST ARTICLES
   ========================================================= */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

/* Homepage "Latest Articles" — three equal cards. Replaced the old
   1-featured + 4-mini mixed grid, which needed two separate card designs
   and stacked into five full-width blocks on mobile. */
.articles-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.article-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-subtle);
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.article-card-media {
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--color-teal-light) 0%, var(--color-bg-alt) 100%);
    /* No inset padding: it drew a band of the gradient around every thumbnail. */
}

.article-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.article-card-body {
    padding: 16px 10px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin-bottom: 8px;
}

.article-card-title a:hover {
    color: var(--color-teal-dark);
}

.article-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.article-card-link {
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
}

.article-card-link:hover {
    color: var(--color-primary);
}

.articles-mixed-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.85fr;
    gap: 30px;
    margin-bottom: 40px;
}

.article-featured-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
}

.feat-img-box {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.feat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-featured-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-cyan);
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}

.feat-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-meta {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.meta-cat {
    color: var(--color-blue);
    font-weight: 700;
}

.feat-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.35;
}

.feat-title a:hover {
    color: var(--color-teal-dark);
}

.feat-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.article-side-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.article-mini-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

.article-mini-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.mini-img-wrap {
    height: 130px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.mini-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin-bottom: 10px;
}

.mini-title a:hover {
    color: var(--color-teal-dark);
}

.mini-arrow-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--color-blue);
    font-size: var(--text-base);
    font-weight: 700;
}

.articles-topic-strip {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.topic-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.topic-chip:hover {
    color: var(--color-teal-dark);
}


/* =========================================================
   14. SECTION 10: INSTAGRAM
   ========================================================= */
.instagram-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.insta-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 270px;
    transition: var(--transition-smooth);
}

.insta-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.insta-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.insta-tag-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-purple);
}

.insta-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1.35;
}

.insta-snippet {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.insta-swipe-tag {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    display: block;
}

.insta-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Combined YouTube + Instagram follow bar (replaces the old full-width
   YouTube banner section and the Instagram post-card feed). */
.follow-bar {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-subtle);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.follow-bar-copy strong {
    display: block;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.follow-bar-copy span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.follow-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.insta-cta-bar {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 20px 36px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.insta-cta-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.insta-big-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-pink-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insta-cta-text strong {
    font-size: var(--text-base);
    color: var(--color-primary);
    display: block;
}

.insta-cta-text span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


/* =========================================================
   15. SITE FOOTER
   ========================================================= */
.site-footer {
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    padding: 48px 0 22px;
    font-family: var(--font-heading);
    position: relative;
    z-index: 10;
}

/* Footer Top CTA Strip */
.footer-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #0F3A5C 0%, var(--color-primary) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 22px 28px;
    margin-bottom: 36px;
}

.footer-cta-copy strong {
    display: block;
    font-size: var(--text-md);
    color: var(--color-bg-white);
    margin-bottom: 4px;
}

.footer-cta-copy span {
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.footer-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-outline-pill-light {
    background: transparent;
    color: var(--color-bg-white);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-outline-pill-light:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-bg-white);
    color: var(--color-bg-white);
}

/* Footer WhatsApp button. It used WhatsApp's #25D366 with white text (1.98:1);
   raised with the site owner on 2026-09-11, who chose a darker green so the
   label is readable (white on #0F7B41 is 5.2:1). */
.footer-cta-buttons .btn-whatsapp-pill {
    background: #0F7B41;
    color: var(--color-bg-white);
    border: none;
}

.footer-cta-buttons .btn-whatsapp-pill:hover {
    background: #0B6A37;
    color: var(--color-bg-white);
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #CBD5E1;
    transition: var(--transition-fast);
}

.footer-social-icon:hover {
    background: var(--color-teal-dark);
    border-color: var(--color-teal);
    color: var(--color-bg-white);
    transform: translateY(-3px);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    margin-bottom: 34px;
}

.footer-brand-box {
    margin-bottom: 12px;
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.footer-logo-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-bg-white);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.footer-logo-sub {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-teal);
    line-height: 1.4;
}

.footer-desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0 0 20px 0;
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-sm);
    color: #CBD5E1;
    line-height: 1.4;
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact-item a {
    color: var(--color-bg-white);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-item a:hover {
    color: var(--color-teal);
}

.footer-col-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-bg-white);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
    letter-spacing: -0.01em;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 2px;
}

/* The four link columns are <details>. On desktop they are always open and
   read as plain headings: the disclosure marker and the +/- are hidden and
   the summary does not take the pointer, so nothing invites a click that
   would collapse them. main.js strips the `open` attribute below 768px,
   where the +/- and the tap target come back (see the 768px block in
   responsive.css). No JavaScript means every column stays open, which is
   what the footer did before. */
summary.footer-col-title {
    list-style: none;
    cursor: default;
    pointer-events: none;
}

summary.footer-col-title::-webkit-details-marker {
    display: none;
}

.footer-col-plus {
    display: none;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links li a {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--color-teal);
    transform: translateX(4px);
}

.footer-clinic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-clinic-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-clinic-list li strong {
    font-size: var(--text-sm);
    color: var(--color-bg-white);
    font-weight: 700;
}

.footer-clinic-list li span {
    font-size: var(--text-2xs);
    color: var(--color-text-light);
}

.footer-clinic-list .footer-cta-li {
    margin-top: 8px;
}

.site-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
}

.bottom-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bottom-bar-left p {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.bottom-bar-left .bottom-tagline {
    font-size: var(--text-2xs);
    color: var(--color-text-light);
    margin-top: 2px;
}

/* Floating WhatsApp Button */
.floating-whatsapp-btn {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #25D366;
    color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s, box-shadow 0.3s ease;
}

.floating-whatsapp-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.floating-whatsapp-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.55);
}

/* Mobile Sticky Bottom Floating Bar (STRICTLY HIDDEN ON DESKTOP) */
.mobile-bottom-actions {
    display: none !important;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 50px 0 90px; /* Extra padding so bottom bar doesn't obscure content */
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bottom-bar-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    /* Touch targets. On the desktop grid these column links sit 22px tall,
       which a mouse handles fine but a thumb does not — WCAG 2.5.8 asks for
       24px. The padding is spent vertically and the li margin is wound back
       by the same amount, so the column reads at the same density it did
       before. */
    .footer-links li {
        margin-bottom: 0;
    }

    .footer-links li a {
        padding: 7px 0;
    }

    /* The clinic phone number is a tap-to-call control, not prose, so it
       needs the 24px target too. The padding is cancelled by an equal
       negative margin, keeping the text aligned with its icon. */
    .footer-contact-item a {
        display: inline-block;
        padding: 4px 0;
        margin: -4px 0;
    }

    .mobile-bottom-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        padding: 8px 12px;
        gap: 10px;
    }

    .mobile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: var(--text-2xs);
        font-weight: 700;
        text-decoration: none;
        border-radius: 12px;
        padding: 8px 4px;
        transition: all 0.2s ease;
    }

    .mobile-action-btn .mob-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-action-btn.btn-whatsapp {
        color: #0E7A6E;
        background: #E8F8F5;
    }

    .mobile-action-btn.btn-whatsapp:hover {
        background: #D1F2EB;
    }

    .mobile-action-btn.btn-book {
        color: var(--color-bg-white);
        background: var(--color-teal-dark);
        box-shadow: 0 2px 10px rgba(0, 168, 150, 0.3);
    }

    .mobile-action-btn.btn-book:hover {
        background: #008274;
    }
}

/* =========================================================
   16. BLOG PAGE & PARENT GUIDES LIBRARY
   ========================================================= */
.blog-page-wrapper {
    background-color: var(--color-bg-page);
    min-height: 80vh;
}

/* Blog Hero */
.blog-hero-section {
    position: relative;
    padding: 60px 0 45px;
    background: radial-gradient(circle at 50% 20%, #EDF6FD 0%, var(--color-bg-page) 60%, var(--color-border-light) 100%);
    border-bottom: 1px solid var(--color-border-light);
}

.blog-hero-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 10px;
    margin-bottom: 6px;
}

.blog-hero-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 680px;
    margin: 0 auto 30px;
    line-height: 1.65;
}

.blog-search-box-wrap {
    max-width: 660px;
    margin: 0 auto;
}

.search-input-group {
    background: var(--color-bg-white);
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 30px rgba(15, 76, 129, 0.08);
    border: 1.5px solid var(--color-border);
    padding: 6px 6px 6px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-smooth);
}

.search-input-group:focus-within {
    border-color: var(--color-teal);
    box-shadow: 0 12px 35px rgba(0, 168, 150, 0.15);
}

.search-icon-wrap {
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-field {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-base);
    color: var(--color-text-main);
    background: transparent;
}

.search-field::placeholder {
    color: var(--color-text-light);
}

.search-submit-btn {
    padding: 12px 28px;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* Topic Filter Strip */
.blog-filter-strip {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-light);
    padding: 14px 0;
}

.filter-pills-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
    padding-bottom: 4px;
}

.filter-pills-scroll::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    background: var(--color-bg-alt);
    color: var(--color-text-body);
    border: 1px solid var(--color-border);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.filter-pill:hover {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    border-color: var(--color-teal);
}

.filter-pill.active {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-teal);
}

/* Featured Spotlight Card */
.blog-featured-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1.5px solid var(--color-border-light);
    transition: var(--transition-smooth);
}

.blog-featured-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-teal);
}

.feat-card-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.35fr;
    gap: 36px;
    align-items: center;
}

.feat-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 460px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--color-teal-light) 0%, var(--color-bg-alt) 100%);
    /* No inset padding: it drew a band of the gradient around the photo and
       left the photo itself square inside a rounded box. With overflow
       hidden the image now takes the wrapper's radius directly. */
}

.feat-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* `cover`, anchored to the top. `contain` left wide bands of backdrop beside
   every square image, which read as broken edges. The 3:2 sources (600x400)
   are wider than this box, so cover only trims their sides; the squares lose
   height instead, and `center top` spends that loss at the bottom so the
   headline these illustrations carry at the top stays intact. */
.feat-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

.feat-card-grid:hover .feat-cover-img {
    transform: scale(1.03);
}

.feat-badge-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-primary);
    color: var(--color-bg-white);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.feat-card-info {
    padding: 36px 36px 36px 0;
    display: flex;
    flex-direction: column;
}

.feat-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.feat-cat-name {
    color: var(--color-teal-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: 0.03em;
}

.meta-separator {
    color: var(--color-text-light);
}

.feat-card-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 14px;
}

.feat-card-title a:hover {
    color: var(--color-teal-dark);
}

.feat-card-excerpt {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 24px;
}

.feat-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

.doctor-author-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-badge-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-teal);
}

.doc-badge-text strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.doc-badge-text span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Blog Layout Grid: Feed + Sticky Sidebar */
.blog-layout-grid {
    display: grid;
    grid-template-columns: 1.85fr 0.95fr;
    gap: 40px;
}

.feed-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-border-light);
}

.feed-section-heading {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.feed-count-badge {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
}

.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* Card carries a little padding so the media panel inside can be rounded on
   all four corners instead of butting flush against the card edge. */
.blog-article-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.blog-article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-teal);
}

/* Most featured images on these posts are dense medical infographics rather
   than photographs. A short landscape strip either crops them (cover) or
   shrinks them to an illegible stamp (contain), so the box gets a 4:3 ratio
   that scales with the card — the whole poster stays visible and readable. */
.card-thumb-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--color-teal-light) 0%, var(--color-bg-alt) 100%);
    /* See .feat-card-media: no inset, so the image takes the radius. */
}

.card-img-anchor {
    display: block;
    width: 100%;
    height: 100%;
}

.card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.blog-article-card:hover .card-thumb-img {
    transform: scale(1.04);
}

.card-tag-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(14, 35, 66, 0.88);
    backdrop-filter: blur(4px);
    color: var(--color-bg-white);
    font-size: var(--text-3xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.card-body-wrap {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-2xs);
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.card-article-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.38;
    margin-bottom: 10px;
}

.card-article-title a:hover {
    color: var(--color-teal-dark);
}

.card-excerpt-text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.58;
    margin-bottom: 18px;
}

.card-footer-line {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-primary);
}

.card-read-more-btn {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    transition: var(--transition-fast);
}

.card-read-more-btn:hover {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* Pagination */
.blog-pagination-wrapper {
    margin-top: 30px;
    margin-bottom: 40px;
}

.blog-pagination-wrapper .pagination,
.blog-pagination-wrapper .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-pagination-wrapper .page-numbers {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.blog-pagination-wrapper .page-numbers.current {
    /* teal-dark: white on #00A896 is 2.98:1 and this is the current page. */
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    border-color: var(--color-teal);
    box-shadow: 0 4px 12px rgba(0, 168, 150, 0.3);
}

.blog-pagination-wrapper .page-numbers:hover:not(.current) {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    border-color: var(--color-teal);
}

/* Blog Sticky Sidebar */
.sidebar-sticky-wrapper {
    position: sticky;
    top: 105px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

/* Doc Profile Card */
.doc-profile-card {
    text-align: center;
}

.doc-sidebar-img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    border: 3px solid var(--color-teal);
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
}

.doc-badge-pill {
    background: var(--color-purple-light);
    color: var(--color-purple);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    display: inline-block;
    margin-bottom: 6px;
}

.doc-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.doc-spec {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 14px;
    line-height: 1.4;
}

.doc-qualifications-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
}

.qual-tag {
    background: var(--color-blue-light);
    color: var(--color-blue);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.doc-brief-bio {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Clinic Widget Card */
.widget-heading {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.clinics-mini-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clinic-mini-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.c-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.c-indicator.blk { background-color: var(--color-teal); }
.c-indicator.max { background-color: var(--color-blue); }
.c-indicator.clinic { background-color: var(--color-purple); }
.c-indicator.video { background-color: var(--color-cyan); }

.clinic-mini-item strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-primary);
    line-height: 1.3;
}

.clinic-mini-item span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Conditions Widget */
.condition-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.condition-links-list li a {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.condition-links-list li a:hover {
    color: var(--color-teal-dark);
    padding-left: 4px;
}

.condition-links-list li a span {
    color: var(--color-teal-dark);
    font-size: var(--text-md);
}

/* Emergency Helpline Card */
.emergency-help-card {
    background: linear-gradient(135deg, #FEF2F2 0%, var(--color-bg-white) 100%);
    border-color: #FECACA;
    text-align: center;
}

.emergency-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FEE2E2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.emergency-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: #991B1B;
    margin-bottom: 4px;
}

.emergency-desc {
    font-size: var(--text-2xs);
    color: #7F1D1D;
    margin-bottom: 14px;
}

.emergency-phone-btn {
    display: block;
    background: #DC2626;
    color: var(--color-bg-white);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--text-sm);
    transition: var(--transition-fast);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.emergency-phone-btn:hover {
    background: #B91C1C;
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

/* Bottom CTA Banner */
.blog-bottom-banner-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

.blog-banner-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, #173663 100%);
    border-radius: var(--radius-xl);
    padding: 44px 50px;
    color: var(--color-bg-white);
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 15px 40px rgba(14, 35, 66, 0.2);
}

.bb-tag {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-cyan);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 8px;
}

.bb-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-bg-white);
    line-height: 1.25;
    margin-bottom: 12px;
}

.bb-desc {
    font-size: var(--text-base);
    color: #CBD5E1;
    line-height: 1.6;
    margin-bottom: 24px;
}

.bb-buttons-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bb-doc-img {
    border-radius: var(--radius-lg);
    max-height: 280px;
    width: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   17. SINGLE ARTICLE & POST DETAILS
   ========================================================= */
.single-post-wrapper {
    background-color: var(--color-bg-page);
}

.article-breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.article-breadcrumb a {
    color: var(--color-primary);
    font-weight: 600;
}

.article-breadcrumb a:hover {
    color: var(--color-teal-dark);
}
.crumb-sep {
    color: var(--color-text-muted);
    color: var(--color-text-light);
}

.crumb-current {
    color: var(--color-text-muted);
    font-weight: 500;
}

.single-article-header {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

.article-meta-pills {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.article-date-tag,
.article-read-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

.single-article-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.author-attribution-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}

.author-mini-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-teal);
}

.author-mini-info {
    display: flex;
    flex-direction: column;
}

.author-mini-info .author-name {
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.author-mini-info .author-cred {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.single-featured-image-box {
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-height: 480px;
    box-shadow: var(--shadow-card);
}

.single-feat-img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
}

/* Article Layout */
.article-layout-grid {
    display: grid;
    grid-template-columns: 1.9fr 0.9fr;
    gap: 40px;
}

/* A grid item's min-width defaults to its min-content width, so one long
   unbreakable string in a post widened the column past a phone screen. */
.article-layout-grid > * {
    min-width: 0;
}

.article-main-body {
    overflow-wrap: break-word;
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: 40px 48px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-strong);
}

/* These posts run long (this one is 83 paragraphs across 20 sections) and the
   column was setting ~93 characters a line, well past the 60-75 that stays
   comfortable to read. Cap the measure and let the extra width become margin
   rather than longer lines. */
.article-main-body > * {
    max-width: 68ch;
}

.article-main-body > blockquote,
.article-main-body > figure,
.article-main-body > img,
.article-main-body > table {
    max-width: 100%;
}

.article-main-body h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 44px;
    margin-bottom: 14px;
    line-height: 1.3;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

/* First heading sits right under the intro, so it does not need the rule. */
.article-main-body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Table of contents, generated from the post's own H2s in single.php. */
.article-toc {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-teal);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 32px;
}

.article-toc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.article-toc-title::-webkit-details-marker {
    display: none;
}

/* Chevron that rotates when the list is open. */
.article-toc-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-teal);
    border-bottom: 2px solid var(--color-teal);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.article-toc[open] .article-toc-title::before {
    transform: rotate(45deg);
}

.article-toc-count {
    margin-left: auto;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.article-toc-list {
    margin: 14px 0 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 28px;
}

.article-toc-list li {
    margin-bottom: 7px;
    break-inside: avoid;
    color: var(--color-text-light);
}

.article-toc-list a {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.45;
}

.article-toc-list a:hover {
    color: var(--color-teal-dark);
    text-decoration: underline;
}

/* Anchor jumps must clear the sticky header. */
.article-main-body h2[id] {
    scroll-margin-top: 100px;
}

@media (max-width: 768px) {
    .article-toc-list {
        columns: 1;
    }
}

.article-main-body h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 28px;
    margin-bottom: 12px;
}

.article-main-body p {
    margin-bottom: 20px;
}

.article-main-body ul,
.article-main-body ol {
    margin-bottom: 22px;
    padding-left: 24px;
}

.article-main-body ul {
    list-style: disc;
}

.article-main-body ol {
    list-style: decimal;
}

.article-main-body li {
    margin-bottom: 8px;
}

.article-main-body blockquote {
    border-left: 4px solid var(--color-teal);
    padding: 14px 20px;
    background: var(--color-teal-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--color-primary);
    margin: 24px 0;
}

.article-main-body img {
    border-radius: var(--radius-md);
    margin: 24px auto;
    box-shadow: var(--shadow-subtle);
}

/* YouTube videos in posts, framed by ankitparakh_frame_post_videos(). The old
   bare 560x315 iframes overflowed the column on a phone, and each video's
   title sat below it as a section heading. */
.article-main-body > .ap-video-embed {
    max-width: 100%;
}

.ap-video-embed {
    margin: 28px 0;
}

.ap-video-embed + .ap-video-embed {
    margin-top: 36px;
}

.ap-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-primary);
    box-shadow: var(--shadow-subtle);
}

.ap-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ap-video-embed figcaption {
    margin-top: 12px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-primary);
}

/* Any other embed pasted into a post stays inside the column. */
.article-main-body iframe {
    max-width: 100%;
}

/* Default page template (page.php): the privacy policy and the three video
   consultation pages. Nothing styled .page-content, so after the global reset
   every paragraph, heading and list sat flush against the next with no space
   at all. Same reading rhythm as .article-main-body. */
.page-content {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-strong);
    overflow-wrap: break-word;
}

.page-content > * {
    max-width: 72ch;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content p {
    margin-bottom: 20px;
}

.page-content h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 12px;
}

.page-content h3,
.page-content h4 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin-top: 28px;
    margin-bottom: 10px;
}

.page-content h5,
.page-content h6 {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 24px;
    margin-bottom: 8px;
}

.page-content ul,
.page-content ol {
    margin-bottom: 22px;
    padding-left: 24px;
}

.page-content ul {
    list-style: disc;
}

.page-content ol {
    list-style: decimal;
}

.page-content li {
    margin-bottom: 8px;
}

.page-content p a,
.page-content li a {
    color: var(--color-teal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-content img,
.page-content iframe,
.page-content video {
    max-width: 100%;
    height: auto;
}

.page-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 22px;
}

/* The global reset sets `a { color: inherit; text-decoration: none }`, which is
   right for nav and cards but left every one of the ~420 in-article links
   indistinguishable from the sentence around it. Scoped to the prose elements
   so the disclaimer button, the author-bio CTA and the prev/next cards — which
   also live inside .article-main-body — keep their own treatment. */
.article-main-body p a,
.article-main-body li a,
.article-main-body td a,
.article-main-body th a,
.article-main-body blockquote a,
.article-main-body figcaption a {
    color: var(--color-teal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 168, 150, 0.4);
    font-weight: 600;
}

.article-main-body p a:hover,
.article-main-body li a:hover,
.article-main-body td a:hover,
.article-main-body p a:focus-visible,
.article-main-body li a:focus-visible {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}

/* A link wrapping only an image is a lightbox, not a phrase — an underline
   under a 1000px infographic reads as a stray rule. */
.article-main-body p > a:has(> img:only-child) {
    text-decoration: none;
}

/* Imported content nests a paragraph inside every list item. The 20px
   paragraph margin then applied inside the bullet as well, so a five-point
   list set nearly twice as tall as an authored one. */
.article-main-body li > p {
    margin-bottom: 0;
}

.article-main-body li > p + p {
    margin-top: 10px;
}

.article-main-body li > ul,
.article-main-body li > ol {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* h4-h6 had no rule at all, so they fell back to the browser default: h4 at
   body size and h5/h6 *smaller* than the text they introduce, in the default
   near-black rather than the brand navy. */
.article-main-body h4 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 24px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.article-main-body h5,
.article-main-body h6 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: 1.45;
}

/* A heading that lands right after another heading has nothing to separate
   it from, so it should not carry the full stack gap. */
.article-main-body h2 + h3,
.article-main-body h3 + h4,
.article-main-body h4 + h5 {
    margin-top: 12px;
}

/* Content-pasted inline SVG carries no width/height, only a viewBox. Left
   unconstrained it stretched to the full column and blew each row up to
   ~1370px tall. Icons in prose are icon-sized. */
.article-main-body svg {
    width: 1em;
    height: 1em;
    max-width: 100%;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Question/answer pairs recovered from the old accordion markup. */
.article-main-body .ap-faq-q {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 22px;
    margin-bottom: 8px;
    padding-left: 14px;
    border-left: 3px solid var(--color-teal);
    line-height: 1.45;
}

.article-main-body .ap-faq-q + p {
    padding-left: 17px;
    color: var(--color-text-body);
}

.article-main-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: var(--text-sm);
}

.article-main-body th,
.article-main-body td {
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.article-main-body th {
    background: var(--color-bg-alt);
    color: var(--color-primary);
    font-weight: 700;
}

.article-main-body figure {
    margin: 24px 0;
}

.article-main-body figcaption {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
}

.article-main-body strong,
.article-main-body b {
    color: var(--color-primary);
    font-weight: 700;
}

/* Medical Disclaimer Card */
.medical-disclaimer-card {
    background: linear-gradient(135deg, #F0FDF4 0%, var(--color-teal-light) 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.disc-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.disc-text h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.disc-text p {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Author Bio Card */
.author-bio-card {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-subtle);
}

.author-bio-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    align-items: center;
}

.author-bio-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-teal);
}

.bio-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
}

.bio-name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.bio-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 10px;
}

.bio-desc {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Post Navigation */
.post-nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.nav-post-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: var(--transition-fast);
}

.nav-post-card:hover {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
    transform: translateY(-2px);
}

.nav-dir {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-transform: uppercase;
}

.nav-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
}

.next-card {
    text-align: right;
}

/* =========================================================
   SPECIALTY SERVICES LANDING PAGE STYLES (MATCHING MOCKUP)
   ========================================================= */
.specialty-services-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.svc-hero-section {
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-alt) 100%);
    padding: 60px 0 50px;
    position: relative;
}

.svc-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    align-items: center;
    gap: 40px;
}

.svc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E1F0FE;
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: 18px;
}

.svc-hero-title {
    font-family: var(--font-heading);
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.color-sky {
    color: var(--color-blue);
}

.doodle-heart-outline {
    color: #F43F5E;
    font-size: 0.8em;
    font-weight: 400;
    vertical-align: middle;
    margin-left: 6px;
}

.soft-plus-icon {
    color: #93C5FD;
    font-size: 0.65em;
    font-weight: 300;
    vertical-align: super;
    margin-left: 12px;
    opacity: 0.8;
}

.svc-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

.svc-hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.btn-hero-primary {
    background: #0265D2;
    color: var(--color-bg-white) !important;
    border-radius: 9999px;
    padding: 13px 28px;
    font-size: var(--text-base);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(2, 101, 210, 0.28);
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-hero-primary:hover {
    background: #014FA8;
    color: var(--color-bg-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(2, 101, 210, 0.35);
}

.btn-hero-whatsapp {
    background: var(--color-bg-white);
    color: var(--color-teal-dark) !important;
    border: 1.5px solid var(--color-teal);
    border-radius: 9999px;
    padding: 12px 26px;
    font-size: var(--text-base);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    text-decoration: none;
}

.btn-hero-whatsapp:hover {
    background: var(--color-teal-light);
    color: var(--color-teal-dark) !important;
    transform: translateY(-2px);
}

.svc-hero-trust-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--color-text-strong);
    flex-wrap: wrap;
}

.trust-badge-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-avatars {
    display: flex;
    align-items: center;
    margin-left: 6px;
}

.trust-avatar-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--color-bg-white);
    margin-left: -8px;
    object-fit: cover;
}

/* Hero Right Arch Frame & Rotating Seal */
.svc-hero-media-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svc-hero-arch-frame {
    width: 100%;
    max-width: 440px;
    height: 420px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #E0F2FE;
    box-shadow: 0 20px 40px rgba(15, 76, 129, 0.1);
    border: 6px solid var(--color-bg-white);
}

.svc-hero-arch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

.svc-hero-seal-badge {
    position: absolute;
    bottom: -15px;
    right: 15px;
    width: 130px;
    height: 130px;
    background: var(--color-bg-white);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-border);
    z-index: 5;
}

.seal-circular-text {
    width: 100%;
    height: 100%;
    animation: rotateSeal 25s linear infinite;
}

@keyframes rotateSeal {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.seal-inner-lungs {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #F0FDF4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Key Features White Strip */
.svc-key-features-strip {
    margin-top: -25px;
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.key-features-white-card {
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 26px 36px;
    box-shadow: 0 12px 36px rgba(15, 76, 129, 0.08);
    border: 1px solid #EDF2F7;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
}

.key-feat-col {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}

.key-feat-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--color-border);
}

.key-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue { background-color: var(--color-sky-50); }
.icon-purple { background-color: #FAF5FF; }
.icon-green { background-color: #F0FDF4; }
.icon-pink { background-color: #FFF1F2; }

.key-feat-text strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.key-feat-text p {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* 3. Section: Our Specialized Services */
.svc-sub-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sub-line {
    width: 22px;
    height: 2px;
    background: var(--color-sky-600);
    border-radius: 2px;
}

.sub-text {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.svc-section-heading {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.svc-section-subtext {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 650px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* 3x2 Cards Grid */
.svc-cards-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 36px;
}

.svc-box-card {
    position: relative;
    cursor: pointer;
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 16px;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.svc-box-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}

.card-border-blue { border: 1.5px solid #DBEAFE; }
.card-border-blue:hover { border-color: #2563EB; }

.card-border-teal { border: 1.5px solid #CCFBF1; }
.card-border-teal:hover { border-color: var(--color-teal); }

.card-border-purple { border: 1.5px solid #EDE9FE; }
.card-border-purple:hover { border-color: #7C3AED; }

.card-border-red { border: 1.5px solid #FFE4E6; }
.card-border-red:hover { border-color: #E11D48; }

.card-border-gold { border: 1.5px solid var(--color-gold-light); }
.card-border-gold:hover { border-color: #D97706; }

.card-border-cyan { border: 1.5px solid #CFFAFE; }
.card-border-cyan:hover { border-color: #0891B2; }

.svc-box-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.svc-box-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.svc-box-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin-bottom: 6px;
}

.svc-box-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.svc-box-link {
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: var(--transition-fast);
}

.svc-box-link .arrow {
    transition: transform 0.2s ease;
}

.svc-box-link:hover .arrow {
    transform: translateX(4px);
}

.svc-box-right {
    height: 135px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-alt);
    position: relative;
}

.svc-box-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.svc-box-card:hover .svc-box-thumb {
    transform: scale(1.06);
}

/* 4. Teddy Bear CTA Banner */
.svc-teddy-cta-banner {
    background: #EBF5FF;
    border: 1.5px solid #D0E7FF;
    border-radius: 24px;
    padding: 26px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.teddy-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.teddy-icon-wrap {
    position: relative;
    flex-shrink: 0;
}

.teddy-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.teddy-floating-heart {
    position: absolute;
    top: -6px;
    right: -6px;
    color: #F43F5E;
    font-size: var(--text-md);
    animation: pulseHeart 1.8s infinite ease-in-out;
}

@keyframes pulseHeart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.teddy-tagline {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 2px;
}

.teddy-heading {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-teal-dark);
    display: block;
    line-height: 1.25;
    margin-bottom: 4px;
}

.teddy-desc {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    line-height: 1.45;
}

.teddy-banner-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 240px;
}

/* 5. Stats Counter Strip */
.svc-stats-counter-strip {
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 22px 32px;
    box-shadow: 0 8px 30px rgba(15, 76, 129, 0.06);
    border: 1px solid #EDF2F7;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 50px;
}

.stat-counter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.stat-counter-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--color-border);
}

.stat-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
    display: block;
}

.stat-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 6. Why Choose Section */
.svc-why-section {
    background-color: var(--color-border-light);
    padding: 60px 0;
}

.svc-features-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.svc-feature-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition-smooth);
}

.svc-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-teal);
}

.svc-feat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.svc-feature-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.svc-feature-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* 7. FAQ Accordion */
.svc-faq-section {
    padding: 60px 0 80px;
}

.svc-faq-accordion-wrap {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-fast);
}

.faq-item:hover,
.faq-item.is-open {
    border-color: var(--color-teal);
    box-shadow: var(--shadow-subtle);
}

.faq-toggle-btn {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    gap: 16px;
}

.faq-icon {
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-teal-dark);
    line-height: 1;
    flex-shrink: 0;
}

.faq-answer {
    display: none;
    padding: 0 24px 22px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.65;
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
}

.faq-item.is-open .faq-answer {
    display: block;
    animation: fadeInCard 0.3s ease;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .svc-cards-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .key-features-white-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .key-feat-col:nth-child(2)::after {
        display: none;
    }
    .svc-stats-counter-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .svc-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .svc-hero-title {
        font-size: 2.8rem;
    }
    .svc-hero-desc {
        margin: 0 auto 24px;
    }
    .svc-hero-cta-group {
        justify-content: center;
    }
    .svc-hero-trust-bar {
        justify-content: center;
    }
    .svc-teddy-cta-banner {
        flex-direction: column;
        text-align: center;
    }
    .teddy-banner-left {
        flex-direction: column;
    }
    .teddy-banner-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .svc-cards-grid-6 {
        grid-template-columns: 1fr;
    }
    .svc-box-card {
        grid-template-columns: 1fr;
    }
    .svc-box-right {
        height: 170px;
    }
    .key-features-white-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .key-feat-col::after {
        display: none !important;
    }
    .svc-stats-counter-strip {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .stat-counter-item::after {
        display: none !important;
    }
    .svc-features-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CONDITIONS TREATED LANDING PAGE STYLES (conditionstreated.png)
   ========================================================= */
.conditions-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.cond-hero-section {
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-alt) 100%);
    padding: 50px 0 45px;
    position: relative;
}

.cond-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    align-items: center;
    gap: 40px;
}

.cond-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.cond-breadcrumbs a {
    color: var(--color-blue);
    text-decoration: none;
}

.cond-breadcrumbs a:hover {
    text-decoration: underline;
}

.cond-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.cond-breadcrumbs .crumb-current {
    color: var(--color-primary);
    font-weight: 700;
}

.cond-hero-title {
    font-family: var(--font-heading);
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.color-blue-title {
    color: var(--color-blue);
}

.title-dot-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 20px;
}

.title-dot-line .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-teal);
}

.title-dot-line .line {
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-teal);
}

.cond-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 26px;
}

.cond-hero-pills-strip {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    flex-wrap: wrap;
}

.cond-pill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.cond-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cond-hero-media-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cond-hero-arch-frame {
    width: 100%;
    max-width: 440px;
    height: 420px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #E0F2FE;
    box-shadow: 0 20px 40px rgba(15, 76, 129, 0.1);
    border: 6px solid var(--color-bg-white);
}

.cond-hero-arch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

.cond-hero-seal-badge {
    position: absolute;
    bottom: -15px;
    right: 15px;
    width: 130px;
    height: 130px;
    background: var(--color-bg-white);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-border);
    z-index: 5;
}

/* 2. Main Conditions Grid (16 Items - 4x4) */
.cond-sub-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cond-section-heading {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.cond-section-subtext {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 650px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.cond-cards-grid-16 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 44px;
}

.cond-card-item {
    position: relative;
    cursor: pointer;
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border-light);
    border-radius: 20px;
    padding: 26px 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.cond-card-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-sky-100);
    box-shadow: 0 14px 30px rgba(15, 76, 129, 0.08);
}

.cond-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.cond-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin-bottom: 8px;
}

.cond-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 16px;
    flex-grow: 1;
}

.cond-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
    margin-top: auto;
}

.cond-card-link:hover .arrow {
    transform: translateX(4px);
}

.cond-card-link .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Color variations */







/* 3. Teddy Bear CTA Banner */
.cond-teddy-cta-banner {
    background: #EBF5FF;
    border: 1.5px solid #D0E7FF;
    border-radius: 24px;
    padding: 26px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.color-primary-navy {
    color: var(--color-primary) !important;
}

/* 4. Why Choose Section */
.cond-why-section {
    background-color: var(--color-border-light);
    padding: 60px 0;
}

.cond-features-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cond-feature-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition-smooth);
}

.cond-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-teal);
}

.cond-feat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cond-feature-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.cond-feature-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* 5. FAQ Section */
.cond-faq-section {
    padding: 60px 0 80px;
}

.cond-faq-accordion-wrap {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Responsive Styles for Conditions Treated */
@media (max-width: 1200px) {
    .cond-cards-grid-16 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cond-features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .cond-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cond-hero-title {
        font-size: 2.8rem;
    }
    .cond-hero-desc {
        margin: 0 auto 24px;
    }
    .cond-breadcrumbs {
        justify-content: center;
    }
    .title-dot-line {
        justify-content: center;
    }
    .cond-hero-pills-strip {
        justify-content: center;
    }
    .cond-teddy-cta-banner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .cond-cards-grid-16 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .cond-card-item {
        padding: 20px 16px;
    }
    .cond-features-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cond-cards-grid-16 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SERVICE DETAIL PAGE STYLES (page-service-detail.php)
   ========================================================= */
.service-detail-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.svc-detail-hero {
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-alt) 100%);
    padding: 40px 0 45px;
    border-bottom: 1px solid var(--color-border);
}

.svc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.svc-breadcrumbs a {
    color: var(--color-blue);
    text-decoration: none;
}

.svc-breadcrumbs a:hover {
    text-decoration: underline;
}

.svc-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.svc-breadcrumbs .crumb-current {
    color: var(--color-primary);
    font-weight: 700;
}

.svc-hero-header-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
}

.svc-spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E1F0FE;
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 700;
    margin-bottom: 14px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-teal-dark);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 168, 150, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 150, 0); }
}

.svc-hero-h1 {
    font-family: var(--font-heading);
    font-size: 2.9rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.title-accent-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 16px;
}

.title-accent-line .dot-accent {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-teal);
}

.title-accent-line .bar-accent {
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-teal);
}

.svc-hero-lead {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 22px;
}

/* Quick Metrics 4-Box Strip */
.svc-quick-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    margin-bottom: 24px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-text .m-label {
    display: block;
    font-size: var(--text-3xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.metric-text .m-value {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
}

.svc-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Right Media Card */
.svc-media-frame {
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-bg-white);
    border: 3px solid var(--color-bg-white);
    box-shadow: 0 16px 36px rgba(15, 76, 129, 0.1);
    position: relative;
    height: 360px;
}

.svc-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-floating-seal {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border: 1px solid rgba(0, 168, 150, 0.2);
}

.seal-badge-text strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.seal-badge-text span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

/* 2. Main Content & Sidebar Layout */
.svc-detail-body-section {
    padding: 40px 0 60px;
}

.svc-detail-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: flex-start;
}

/* Quick Nav Pills (Sticky) */
.svc-quick-nav-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 24px;
    position: sticky;
    top: 90px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.svc-quick-nav-pills .pill-link {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.svc-quick-nav-pills .pill-link.active,
.svc-quick-nav-pills .pill-link:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
}

/* Service Content Card */
.svc-content-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-bottom: 28px;
    scroll-margin-top: 160px;
}

.svc-content-card .card-tag {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-blue);
    margin-bottom: 8px;
}

.svc-content-card .card-heading {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 16px;
    line-height: 1.25;
}

.card-intro {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 20px;
}

.rich-text-content p {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.7;
    margin-bottom: 14px;
}

/* Clinical Callout Box */
.clinical-callout-box {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 14px;
    margin-top: 20px;
    border-left: 4px solid var(--color-sky-600);
    background: var(--color-sky-50);
}

.callout-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.callout-text h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.callout-text p {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
}

/* Indications Grid (2-Column) */
.indications-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.indication-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.indication-item:hover {
    background: var(--color-bg-white);
    border-color: var(--color-sky-100);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.06);
}

.ind-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.ind-info strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.ind-info span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Steps Timeline */
.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    position: relative;
}

.step-timeline-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    position: relative;
}

.step-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-sky-600), var(--color-teal));
    color: var(--color-bg-white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    font-size: var(--text-base);
}

.step-body {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px 20px;
    flex-grow: 1;
}

.step-body h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.step-body p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Why Highlights Grid */
.why-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.why-hl-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.hl-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hl-text h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.hl-text p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Parent Prep Guide Grid */
.prep-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.prep-box {
    padding: 24px;
    border-radius: 16px;
    background: var(--color-bg-alt);
    border: 1.5px solid var(--color-border);
}

.prep-box.border-blue { border-color: var(--color-sky-100); }
.prep-box.border-teal { border-color: #A7F3D0; }

.prep-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.prep-box-header h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.prep-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prep-list li {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.55;
    position: relative;
    padding-left: 18px;
}

.prep-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-blue);
    font-size: var(--text-lg);
    line-height: 1;
}

/* Right Sticky Sidebar */
.svc-sticky-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sidebar-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.booking-widget-card {
    border-color: var(--color-sky-100);
    box-shadow: 0 8px 26px rgba(2, 132, 199, 0.08);
}

.doc-badge-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 16px;
    margin-bottom: 14px;
}

.doc-thumb-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--color-teal);
}

.doc-badge-meta .doc-sub {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.doc-badge-meta .doc-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 2px 0;
}

.doc-badge-meta .doc-loc {
    display: block;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.timing-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    background: var(--color-teal-light);
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.widget-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.btn-primary-pill {
    background: var(--color-blue);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary-pill:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
}

.btn-whatsapp-pill {
    background: #25D366;
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.btn-whatsapp-pill:hover {
    background: #1EBE5D;
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
}

/* Services Nav Sidebar */
.services-nav-card .sidebar-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.services-nav-card .sidebar-title .title-bar {
    width: 4px;
    height: 18px;
    background: var(--color-teal);
    border-radius: 2px;
}

.sidebar-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-links-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-links-list li.active-service a,
.sidebar-links-list li a:hover {
    background: var(--color-sky-50);
    color: var(--color-blue);
    font-weight: 700;
}

.sidebar-links-list li.active-service a .arrow {
    color: var(--color-blue);
}

/* Download Guide Card */
.download-guide-card {
    text-align: center;
    background: linear-gradient(180deg, #F0FDF4 0%, var(--color-bg-white) 100%);
    border-color: #BBF7D0;
}

.download-guide-card .guide-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #DCFCE7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.download-guide-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.download-guide-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.download-guide-card .btn-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-decoration: none;
}

.download-guide-card .btn-text-link:hover {
    text-decoration: underline;
}

/* Responsive Styles for Service Detail */
@media (max-width: 1024px) {
    .svc-detail-layout-grid {
        grid-template-columns: 1fr;
    }
    .svc-sticky-sidebar {
        position: static;
    }
}

@media (max-width: 900px) {
    .svc-hero-header-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .svc-hero-h1 {
        font-size: 2.3rem;
    }
    .title-accent-line {
        justify-content: center;
    }
    .svc-hero-lead {
        margin: 0 auto 20px;
    }
    .svc-quick-metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-hero-actions {
        justify-content: center;
    }
    .svc-media-frame {
        max-width: 480px;
        margin: 0 auto;
    }
    .indications-grid-2col,
    .why-highlights-grid,
    .prep-guide-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .svc-quick-metrics-strip {
        grid-template-columns: 1fr;
    }
    .svc-content-card {
        padding: 22px 18px;
    }
    .svc-quick-nav-pills {
        display: none;
    }
}

/* =========================================================
   CONDITIONS TREATED DETAIL PAGE (page-condition-detail.php)
   ========================================================= */
.cdd-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.cdd-hero-section {
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-alt) 100%);
    padding: 36px 0 45px;
    border-bottom: 1px solid var(--color-border);
}

.cdd-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cdd-breadcrumbs a {
    color: var(--color-blue);
    text-decoration: none;
}

.cdd-breadcrumbs a:hover {
    text-decoration: underline;
}

.cdd-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.cdd-breadcrumbs .crumb-current {
    color: var(--color-primary);
    font-weight: 700;
}

.cdd-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 40px;
}

.cdd-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #E1F0FE;
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.cdd-hero-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.cdd-hero-title .title-line2 {
    color: var(--color-teal-dark);
}

.cdd-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 24px;
}

.cdd-feature-pills-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cdd-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 700;
}

.cdd-pill-badge.pill-green {
    background: #E8F8F5;
    color: var(--color-teal-dark);
    border: 1px solid #A7F3D0;
}

.cdd-pill-badge.pill-purple {
    background: #F3E8FF;
    color: #6D28D9;
    border: 1px solid #DDD6FE;
}

.cdd-pill-badge.pill-orange {
    background: #FFF4E5;
    color: #B45309;
    border: 1px solid #FED7AA;
}

/* Right Hero Visual */
.cdd-hero-avatar-frame {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #CFE8FF 0%, #D5F3EE 100%);
    padding: 12px;
    box-shadow: 0 16px 36px rgba(15, 76, 129, 0.08);
}

.cdd-hero-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.cdd-floating-lungs-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-white);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 3px solid var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: floatLungs 3s ease-in-out infinite;
}

@keyframes floatLungs {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 2. Main Two-Column Body Section */
.cdd-main-body-section {
    padding: 40px 0 60px;
}

.cdd-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: stretch;
}

/* Left Column: Overview Card */
.cdd-overview-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: center;
}

.cdd-card-header-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.badge-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdd-card-header-badge h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.cdd-body-p {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.65;
    margin-bottom: 12px;
}

/* Fallback overview card (raw page content, no structured illustration) has
   only one child — force it back to a single column or the grid's second
   track sits empty. */
.cdd-overview-card.cdd-page-content {
    display: block;
}

.cdd-overview-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lungs-diagram-box {
    background: linear-gradient(135deg, #F0F9FF 0%, var(--color-teal-light) 100%);
    border-radius: 18px;
    padding: 20px 24px;
    text-align: center;
    border: 1px solid var(--color-sky-100);
}

.diagram-caption {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-blue);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Accordion Items */
.cdd-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.cdd-accordion-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.cdd-accordion-item:hover {
    border-color: var(--color-sky-100);
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.06);
}

.cdd-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.acc-title-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.acc-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acc-title-meta h3 {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 2px;
}

.acc-title-meta .acc-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.acc-chevron {
    color: var(--color-blue);
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdd-accordion-item.is-open .acc-chevron {
    transform: rotate(180deg);
}

.cdd-accordion-body {
    display: none;
    padding: 0 22px 22px 82px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 16px;
}

.cdd-accordion-item.is-open .cdd-accordion-body {
    display: block;
}

.cdd-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdd-bullet-list li {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    position: relative;
    padding-left: 18px;
}

.cdd-bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-teal-dark);
    font-size: var(--text-lg);
    line-height: 1;
}

.faq-sub-qa strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-primary);
    margin-bottom: 4px;
}

.faq-sub-qa p {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
}

/* Left Bottom Banner: Expert Care for Every Breath */
.cdd-expert-care-banner {
    background: linear-gradient(135deg, var(--color-sky-50) 0%, var(--color-teal-light) 100%);
    border: 1px solid var(--color-sky-100);
    border-radius: 20px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Whichever content path precedes it (fixed accordion, or the raw-content
       fallback's .ap-related cards) zeroes its own bottom margin, so without
       this the banner sat flush against the last card above it. */
    margin-top: 24px;
}

.expert-care-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.star-badge-icon {
    font-size: var(--text-lg);
}

.expert-care-header h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.expert-care-text p {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 18px;
}

.expert-care-doc-photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-cutout-img {
    max-height: 180px;
    object-fit: contain;
}

/* 3. Right Sidebar Styles */
.cdd-sticky-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cdd-sidebar-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

/* Book an Appointment Card */
.cdd-booking-card {
    padding: 0;
    overflow: hidden;
    border-color: var(--color-primary);
}

.cdd-booking-card-head {
    background: var(--color-primary);
    color: var(--color-bg-white);
    padding: 18px 22px;
}

.cdd-booking-card-head .head-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.cdd-booking-card-head .head-top-row h3 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-bg-white);
    margin: 0;
}

/* This line sits on the navy card header, where --color-text-muted is only
   3.30:1. --color-text-light is the lighter token and reaches 6.12:1 there —
   the roles invert once the surface is dark. */
.doc-consult-sub {
    font-size: var(--text-xs);
    color: var(--color-text-light);
}

.doc-consult-sub strong {
    color: #38BDF8;
}

.cdd-booking-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clinic-loc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.loc-pin-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    flex-shrink: 0;
}

/* Calling is the primary action on a phone, so it gets the solid button and
   sits above the other two. */
.cdd-call-btn {
    gap: 9px;
    letter-spacing: 0.01em;
}

.cdd-call-btn svg {
    flex-shrink: 0;
}

.loc-meta strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.loc-meta span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.btn-solid-blue {
    background: var(--color-blue);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.btn-solid-blue:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
}

.btn-whatsapp-outline {
    background: var(--color-bg-white);
    color: #047857;
    border: 1.5px solid var(--color-mint);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-whatsapp-outline:hover {
    background: #E8F8F5;
    color: #047857;
}

/* Related Conditions Card */
.cdd-related-card .card-title-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.cdd-related-card .card-title-head h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.cdd-rel-conditions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cdd-rel-conditions-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.cdd-rel-conditions-list li a:hover {
    background: var(--color-sky-50);
}

.rel-thumb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--color-border);
}

.rel-name {
    flex-grow: 1;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-strong);
}

.cdd-rel-conditions-list li a:hover .rel-name {
    color: var(--color-blue);
}

.rel-arrow {
    color: var(--color-blue);
    font-weight: 700;
    font-size: var(--text-sm);
}

.btn-outline-blue {
    background: var(--color-bg-white);
    color: var(--color-blue);
    border: 1.5px solid var(--color-sky-100);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-outline-blue:hover {
    background: var(--color-sky-50);
    border-color: var(--color-sky-600);
}

/* Need Help Card */
.cdd-help-card {
    text-align: center;
}

.cdd-help-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-sky-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.cdd-help-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.cdd-help-text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.btn-solid-teal {
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.2s ease;
}

.btn-solid-teal:hover {
    background: #008F80;
    color: var(--color-bg-white);
}

/* Follow Us Card */
.cdd-social-card {
    text-align: center;
}

.cdd-social-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F3E8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.cdd-social-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.cdd-social-text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.cdd-social-icons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
}

.ig-btn { background: #FCE7F3; color: #DB2777; }
.yt-btn { background: #FEE2E2; color: #DC2626; }
.fb-btn { background: #DBEAFE; color: #2563EB; }

.btn-outline-purple {
    background: var(--color-bg-white);
    color: #6D28D9;
    border: 1.5px solid #DDD6FE;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-outline-purple:hover {
    background: #F3E8FF;
    border-color: #8B5CF6;
}

/* Watch Expert Videos Card */
.cdd-video-card .cdd-video-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.cdd-video-thumb-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    /* YouTube's hqdefault.jpg is 4:3 with black bars baked in above and below a
       16:9 picture. Only a 16:9 box with object-fit: cover crops exactly those
       bars away; 16:10 or a fixed height left a dark strip showing. */
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
}

.video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.play-btn-circle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-item-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.video-link-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-blue);
    text-decoration: none;
}

.video-link-action:hover {
    text-decoration: underline;
}

/* 4. Bottom Safety & Trust Banner */
.cdd-bottom-safety-strip {
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    padding: 18px 0;
}

.cdd-safety-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, var(--color-sky-50) 0%, var(--color-bg-white) 100%);
    border: 1px solid var(--color-sky-100);
    border-radius: 18px;
    padding: 22px 28px;
}

.safety-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.safety-shield-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--color-sky-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.safety-text strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.safety-text span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.safety-right .safety-lungs-character {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-2xl);
    background: var(--color-bg-white);
    border: 1px solid var(--color-sky-100);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}

.cute-lungs-art-sm {
    display: flex;
    color: var(--color-blue);
}

.safety-lungs-character .sparkle {
    color: #B45309;
    font-size: var(--text-lg);
    animation: sparkleBlink 1.5s infinite;
}

.safety-lungs-character .sparkle.sp-2 {
    color: var(--color-teal-dark);
    animation-delay: 0.7s;
}

@keyframes sparkleBlink {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Responsive Styles for Condition Detail */
@media (max-width: 1024px) {
    .cdd-layout-grid {
        grid-template-columns: 1fr;
    }
    .cdd-sticky-sidebar {
        position: static;
    }
}

@media (max-width: 900px) {
    .cdd-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cdd-hero-title {
        font-size: 2.5rem;
    }
    .cdd-hero-desc {
        margin: 0 auto 20px;
    }
    .cdd-feature-pills-row {
        justify-content: center;
    }
    .cdd-overview-card {
        grid-template-columns: 1fr;
    }
    .cdd-expert-care-banner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cdd-safety-banner {
        flex-direction: column;
        text-align: center;
        padding: 26px 20px;
        gap: 18px;
    }
    .safety-left {
        flex-direction: column;
    }
    .safety-right {
        margin-top: 4px;
    }
}

@media (max-width: 600px) {
    .cdd-accordion-body {
        padding-left: 20px;
    }
}

/* =========================================================
   SPECIALTY SERVICE DETAIL PAGE (docs/services-detail.png)
   ========================================================= */
.sdp-page-wrap {
    background-color: var(--color-bg-alt);
    padding: 30px 0 60px;
}

.sdp-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.sdp-breadcrumbs a {
    color: var(--color-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.sdp-breadcrumbs a:hover {
    text-decoration: underline;
}

.sdp-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.sdp-breadcrumbs .crumb-current {
    color: var(--color-primary);
    font-weight: 700;
}

/* Layout Grid: Left Sidebar 280px + Right Main Content */
.sdp-layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: stretch;
}

/* The sidebar is placed after the main content in source order (so the page's
   H1 reads first for SEO/accessibility) but must still display on the left —
   `order` restores that without touching DOM order. */
.sdp-sidebar-col {
    order: -1;
}

/* Left Sidebar */
.sdp-sticky-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sdp-sidebar-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.sdp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sdp-card-header h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.sdp-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdp-services-list li a,
.sdp-services-list li.active-item .svc-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.35;
    /* Transparent by default so the hover border does not shift the row. */
    border: 1px solid transparent;
}

/* The row for the page you are on is no longer a link to itself, so the
   highlight has to reach the plain text as well as the anchors. */
.sdp-services-list li.active-item .svc-name,
.sdp-services-list li a:hover,
.sdp-services-list li a:focus-visible {
    background: var(--color-sky-50);
    color: var(--color-blue);
    font-weight: 700;
    border-color: var(--color-sky-100);
}

.sdp-services-list li.active-item .svc-name {
    cursor: default;
}

/* Have Questions Card */
.sdp-questions-card {
    text-align: center;
    background: var(--color-bg-white);
}

.q-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-sky-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.sdp-questions-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.sdp-questions-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.sdp-btn-whatsapp {
    background: var(--color-bg-white);
    color: #047857;
    border: 1.5px solid var(--color-mint);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
}

.sdp-btn-whatsapp:hover {
    background: #E8F8F5;
    color: #047857;
}

/* Instagram Moments Card */
.sdp-instagram-card {
    background: #FAF5FF;
    border-color: #E9D5FF;
}

.ig-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ig-camera-icon {
    font-size: var(--text-xl);
}

.ig-head-text h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.ig-head-text span {
    font-size: var(--text-2xs);
    color: #6D28D9;
    font-weight: 600;
}

.ig-media-thumb {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 140px;
    margin-bottom: 12px;
}

.ig-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ig-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
}

.sdp-btn-instagram {
    background: #6D28D9;
    color: var(--color-bg-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    border: none;
}

.sdp-btn-instagram:hover {
    background: #7C3AED;
    color: var(--color-bg-white);
}

/* Right Main Content Column */
.sdp-hero-card {
    background: linear-gradient(135deg, #EFF8FE 0%, #E8F8F5 100%);
    border: 1px solid var(--color-sky-100);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.04);
}

.sdp-hero-inner-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}

/* Without this a single long title word ("Immunotherapy", "Bronchoscopy")
   set the track's minimum and pushed the hero past a phone screen. */
.sdp-hero-inner-grid > *,
.sdp-hero-title-wrap > * {
    min-width: 0;
}

.sdp-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-white);
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: var(--text-2xs);
    font-weight: 700;
    margin-bottom: 14px;
}

.sdp-hero-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.sdp-title-lungs-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-sky-100);
    margin-top: 4px;
}

.sdp-hero-h1 {
    font-family: var(--font-heading);
    /* Scales down on phones so one-word titles fit beside the icon. */
    font-size: clamp(1.6rem, 6.5vw, 2.6rem);
    overflow-wrap: break-word;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.sdp-hero-tagline {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.55;
    margin: 0;
}

.sdp-hero-media-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 76, 129, 0.1);
    border: 3px solid var(--color-bg-white);
    height: 240px;
}

.sdp-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4 Features Strip at bottom of Hero Card */
.sdp-hero-features-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 14px 18px;
}

.feature-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.f-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    flex-shrink: 0;
}

.f-text strong {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.f-text span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.2;
}

/* Section Common Titles with dash accent */
.sdp-sec-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.title-dash-accent {
    width: 38px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-teal);
    margin-bottom: 18px;
}

/* 2. About Section */
.sdp-about-section {
    margin-bottom: 30px;
}

.sdp-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: flex-start;
}

.sdp-rich-text p {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.7;
}

.sdp-why-important-card {
    background: var(--color-bg-white);
    border: 1.5px solid #FBCFE8;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(244, 114, 182, 0.05);
}

.why-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.why-heart-icon {
    font-size: var(--text-lg);
}

.why-card-head h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.why-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.why-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-strong);
    line-height: 1.45;
}

.why-checklist .chk-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #D1FAE5;
    color: #047857;
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* 3. Video Explainer Banner */
.sdp-video-explainer-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.video-explainer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: center;
}

.video-preview-thumb {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* YouTube's hqdefault.jpg is 4:3 with black bars baked in above and below a
       16:9 picture. Only a 16:9 box with object-fit: cover crops exactly those
       bars away; 16:10 or a fixed height left a dark strip showing. */
    aspect-ratio: 16 / 9;
}

.v-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v-caption-overlay {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--color-bg-white);
    font-size: var(--text-base);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.v-play-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(10, 25, 47, 0.75);
    color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.v-play-center-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.v-youtube-badge {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: #DC2626;
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.video-explainer-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v-play-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-sky-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-explainer-right h3 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.35;
}

.video-explainer-right p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.sdp-btn-yt-outline {
    background: var(--color-bg-white);
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.sdp-btn-yt-outline:hover {
    background: #FEE2E2;
}

/* 4. Benefits Section (4-Card Grid) */
.sdp-benefits-section {
    margin-bottom: 30px;
}

.sdp-benefits-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.benefit-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.benefit-card:hover {
    border-color: var(--color-sky-100);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.06);
}

.b-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.benefit-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.benefit-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* 5. FAQs & Doctor Card Row */
.sdp-faqs-doctor-section {
    margin-bottom: 30px;
}

.sdp-faqs-doc-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: flex-start;
}

/* No FAQ block: every service page is in this state today (see the
   comment in page-service-detail.php). One centred column instead of a
   lone card auto-placed into the wide track meant for FAQ copy. */
.sdp-faqs-doc-grid.no-faqs {
    display: flex;
    justify-content: center;
}

.sdp-faqs-doc-grid.no-faqs .sdp-doc-card-right {
    width: 100%;
    max-width: 420px;
}

.sdp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sdp-faq-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sdp-faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.sdp-faq-btn .faq-icon {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-blue);
    margin-left: 12px;
}

.sdp-faq-ans {
    display: none;
    padding: 0 20px 16px;
}

.sdp-faq-item.is-open .sdp-faq-ans {
    display: block;
}

.sdp-faq-ans p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Doctor Profile Card */
.sdp-doc-card {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-sky-100);
    border-radius: 20px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 8px 26px rgba(2, 132, 199, 0.08);
}

.doc-photo-wrap {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    border: 3px solid var(--color-teal);
}

.doc-photo-wrap .doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sdp-doc-card .doc-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.sdp-doc-card .doc-role {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-blue);
    font-weight: 700;
    margin-bottom: 12px;
}

.sdp-doc-card .doc-quote {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 16px;
}

.doc-perks-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-perks-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
}

.doc-perks-list .perk-check {
    color: var(--color-teal-dark);
    font-weight: 700;
    font-size: var(--text-sm);
}

.sdp-btn-book-navy {
    background: var(--color-primary);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

.sdp-btn-book-navy:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
}

/* Responsive Styles for SDP */
@media (max-width: 1024px) {
    .sdp-layout-grid {
        grid-template-columns: 1fr;
    }
    .sdp-sticky-sidebar {
        position: static;
    }
    .sdp-benefits-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .sdp-hero-inner-grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }
    .sdp-hero-title-wrap {
        justify-content: center;
    }
    .sdp-hero-media-frame {
        max-width: 400px;
        margin: 0 auto;
    }
    .sdp-hero-features-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .sdp-about-grid {
        grid-template-columns: 1fr;
    }
    .video-explainer-grid {
        grid-template-columns: 1fr;
    }
    .sdp-faqs-doc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sdp-hero-features-strip {
        grid-template-columns: 1fr;
    }
    .sdp-benefits-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SERVICE DETAIL LAYOUT 1 (page-service-detail-v1.php)
   ========================================================= */
.service-detail-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.svc-detail-hero {
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-alt) 100%);
    padding: 36px 0 45px;
    border-bottom: 1px solid var(--color-border);
}

.svc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.svc-breadcrumbs a {
    color: var(--color-blue);
    text-decoration: none;
}

.svc-breadcrumbs a:hover {
    text-decoration: underline;
}

.svc-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.svc-breadcrumbs .crumb-current {
    color: var(--color-primary);
    font-weight: 700;
}

.svc-hero-header-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 36px;
    align-items: center;
}

.svc-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E1F0FE;
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
}

.svc-hero-h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.svc-hero-lead {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
}

/* Quick Metrics Strip */
.svc-quick-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.svc-metric-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    flex-shrink: 0;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-val {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.svc-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-whatsapp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-white);
    color: #047857;
    border: 1.5px solid var(--color-mint);
    padding: 12px 22px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-whatsapp-pill:hover {
    background: #E8F8F5;
    color: #047857;
    transform: translateY(-2px);
}

/* Right Media Visual */
.svc-media-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15, 76, 129, 0.12);
    border: 4px solid var(--color-bg-white);
    background: var(--color-border);
    height: 320px;
}

.svc-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-media-floating-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(8px);
    color: var(--color-bg-white);
    padding: 10px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-xs);
}

.svc-media-floating-badge .badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 8px var(--color-mint);
}

/* 2. Quick Nav Bar */
.svc-quick-nav-bar {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.svc-quick-nav-pills {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.svc-quick-nav-pills li a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.svc-quick-nav-pills li a:hover,
.svc-quick-nav-pills li a.active {
    background: var(--color-blue);
    color: var(--color-bg-white);
}

/* 3. Main Two-Column Layout */
.svc-detail-body-section {
    padding: 40px 0 60px;
}

.svc-detail-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: flex-start;
}

.svc-main-content-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.svc-content-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.scroll-mt {
    scroll-margin-top: 80px;
}

.card-section-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-light);
}

.badge-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-sky-50);
    color: var(--color-blue);
    font-weight: 700;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-section-badge h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.svc-body-text {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.7;
    margin-bottom: 16px;
}

.clinical-callout-box {
    background: linear-gradient(135deg, var(--color-sky-50) 0%, var(--color-teal-light) 100%);
    border: 1px solid var(--color-sky-100);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 20px;
}

.callout-icon {
    font-size: var(--text-xl);
}

.callout-text {
    font-size: var(--text-sm);
    color: var(--color-text-main);
    line-height: 1.6;
}

/* Indications Grid */
.indications-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.indication-card-item {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: all 0.2s ease;
}

.indication-card-item:hover {
    border-color: var(--color-sky-100);
    background: var(--color-bg-white);
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06);
}

.ind-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    flex-shrink: 0;
}

.ind-meta h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px;
}

.ind-meta p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Step by Step Timeline */
.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
    position: relative;
}

.timeline-step-item {
    display: flex;
    gap: 18px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
}

.step-badge {
    background: var(--color-blue);
    color: var(--color-bg-white);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: var(--text-2xs);
    font-weight: 700;
    height: fit-content;
    white-space: nowrap;
}

.step-content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px;
}

.step-content p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Preparation Guide */
.prep-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.prep-card {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

.prep-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.prep-card-head h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
}

.prep-list {
    list-style: none;
    padding: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prep-list li {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.55;
    position: relative;
    padding-left: 18px;
}

.prep-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-teal-dark);
    font-weight: 700;
}

/* Why Highlights */
.why-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.why-highlight-item {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
}

.wh-icon {
    font-size: var(--text-xl);
    display: block;
    margin-bottom: 8px;
}

.why-highlight-item h4 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px;
}

.why-highlight-item p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* FAQ Section */
.svc-faqs-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.faq-row-item {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.faq-question-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-bg-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.faq-icon-toggle {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-blue);
}

.faq-answer-content {
    display: none;
    padding: 0 20px 16px;
    background: var(--color-bg-white);
}

.faq-row-item.is-active .faq-answer-content {
    display: block;
}

.faq-answer-content p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* 4. Right Sidebar Styles */
.svc-sticky-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.svc-sidebar-widget {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
    overflow: hidden;
}

.booking-widget-card .widget-head {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-widget-card .widget-head h3 {
    font-size: var(--text-md);
    font-weight: 700;
    margin: 0;
}

.booking-widget-card .widget-body {
    padding: 20px 22px;
}

.widget-lead-text {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.5;
    margin-bottom: 16px;
}

.location-picker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.loc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-bg-alt);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.loc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-sky-600);
    margin-top: 6px;
    flex-shrink: 0;
}

.loc-text strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-primary);
}

.loc-text span {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Related Services Card */
.related-services-card {
    padding: 22px;
}

.widget-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.widget-title-bar h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.related-services-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-services-links li a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    text-decoration: none;
    transition: background 0.2s ease;
}

.related-services-links li a:hover {
    background: var(--color-sky-50);
    color: var(--color-blue);
}

/* Download Guide Card */
.download-guide-card {
    padding: 20px;
    background: linear-gradient(135deg, #F0FDF4 0%, var(--color-teal-light) 100%);
    border-color: #A7F3D0;
}

.download-card-content {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.doc-icon {
    font-size: var(--text-xl);
}

.download-text h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.download-text p {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    line-height: 1.4;
    margin: 0 0 8px;
}

.btn-text-link {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-decoration: none;
}

.btn-text-link:hover {
    text-decoration: underline;
}

/* Responsive Styles for Service Detail */
@media (max-width: 1024px) {
    .svc-detail-layout-grid {
        grid-template-columns: 1fr;
    }
    .svc-sticky-sidebar {
        position: static;
    }
}

@media (max-width: 900px) {
    .svc-hero-header-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .svc-hero-h1 {
        font-size: 2.3rem;
    }
    .svc-hero-lead {
        margin: 0 auto 20px;
    }
    .svc-quick-metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-hero-actions {
        justify-content: center;
    }
    .svc-media-frame {
        max-width: 480px;
        margin: 0 auto;
    }
    .indications-grid-2col,
    .why-highlights-grid,
    .prep-guide-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .svc-quick-metrics-strip {
        grid-template-columns: 1fr;
    }
    .svc-content-card {
        padding: 22px 18px;
    }
    .svc-quick-nav-pills {
        display: none;
    }
}

/* =========================================================
   PHOTO GALLERY PAGE (page-photo-gallery.php)
   ========================================================= */
.pg-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.pg-hero-section {
    background: linear-gradient(180deg, #E6F4FE 0%, var(--color-bg-alt) 100%);
    padding: 50px 0 45px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

.pg-hero-grid {
    display: grid;
    /* One column. The right half held a three-photo collage, which on a page
       whose whole content is photos said nothing the grid below does not. */
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.pg-hero-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.title-dash-accent {
    width: 60px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 2px;
    margin-bottom: 20px;
}

.title-dash-accent-center {
    width: 50px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 2px;
    margin: 8px auto 30px;
}

.pg-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 560px;
}

/* Metrics Badges */
.pg-metrics-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pg-metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    padding: 12px 18px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.pg-m-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pg-m-text {
    display: flex;
    flex-direction: column;
}

.pg-m-text strong {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.pg-m-text span {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Right Hero Collage Visual */
.pg-hero-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: 150px 150px;
    gap: 16px;
    height: 316px;
}

.collage-item {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.08);
    border: 4px solid var(--color-bg-white);
    background: var(--color-border);
}

.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.collage-item:hover .collage-img {
    transform: scale(1.05);
}

.c-main {
    grid-row: span 2;
    border-radius: 140px 140px 24px 24px;
}

.c-top-right {
    border-radius: 20px;
}

.c-bot-right {
    border-radius: 20px;
}

.dot-matrix-decor {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(var(--color-sky-600) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* Color & Tint Utility Classes */
.color-primary-navy { color: var(--color-primary) !important; }

.btn-hero-primary {
    background: var(--color-teal-dark);
    color: var(--color-bg-white) !important;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-hero-primary:hover {
    background: var(--color-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 168, 150, 0.35);
    color: var(--color-bg-white) !important;
}

.btn-hero-whatsapp {
    background: var(--color-bg-white);
    color: var(--color-teal-dark) !important;
    border: 1.5px solid var(--color-teal);
    padding: 11px 24px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-hero-whatsapp:hover {
    background: var(--color-teal-light);
    color: var(--color-teal-dark) !important;
    transform: translateY(-2px);
}

/* 2. Explore by Category Section */
.pg-categories-section {
    padding: 40px 0 20px;
}

.pg-sec-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin: 0;
}

.pg-cat-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pg-sec-sub {
    text-align: center;
    max-width: 60ch;
    margin: 10px auto 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Six fixed columns for five categories left an empty sixth and squeezed
   every card to 186px, which is what broke the labels onto three lines.
   Sized by content instead, so the row fills however many categories have
   photos in them. */
.pg-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    padding: 6px 2px 14px;
    width: 100%;
}

@media (max-width: 1200px) {
    .pg-categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .pg-categories-grid {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        gap: 12px;
        padding-bottom: 12px;
    }
    .pg-categories-grid::-webkit-scrollbar {
        display: none;
    }
    .pg-cat-card {
        min-width: 220px;
        flex-shrink: 0;
    }
}

/* The card renders three siblings — icon, name, count. The stylesheet only
   ever described a different structure (.cat-card-top / .cat-icon-badge /
   .cat-meta), so none of it matched: the three spans fell back to bare flex
   items with no gap, which is why "Awards & Recognition" ran straight into
   "2 photos". Laid out as a two-column grid so the icon keeps its own column
   and the label stacks above the count. */
.pg-cat-card {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: all 0.25s ease;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    text-align: left;
    min-width: 0;
}

.pg-cat-icon {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pg-cat-icon svg {
    width: 20px;
    height: 20px;
}

.pg-cat-name {
    grid-column: 2;
    align-self: end;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.pg-cat-count {
    grid-column: 2;
    align-self: start;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.pg-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.12);
    border-color: var(--color-sky-600);
}

.pg-cat-card.active-cat {
    border-color: var(--color-sky-600);
    background: #F0F9FF;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.15);
}

.cat-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.cat-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-meta {
    min-width: 0;
    flex: 1;
}

.cat-meta h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 2px;
    line-height: 1.25;
}

.cat-count {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    display: block;
}

.cat-scroll-next-btn {
    position: absolute;
    right: -16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    color: var(--color-primary);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .cat-scroll-next-btn {
        display: flex;
    }
}

.cat-scroll-next-btn:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
    border-color: var(--color-sky-600);
    transform: scale(1.08);
}

/* 3. Filter Toolbar & Search */
.pg-filters-section {
    padding: 10px 0 20px;
}

.pg-filter-toolbar {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-border-light);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    padding: 9px 16px;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn.active-filter {
    background: var(--color-blue);
    color: var(--color-bg-white);
    border-color: var(--color-sky-600);
}

.pg-select-wrap {
    position: relative;
}

.pg-custom-select {
    appearance: none;
    background: var(--color-bg-white) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 12px center/14px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 36px 9px 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.pg-custom-select:focus {
    border-color: var(--color-sky-600);
}

.toolbar-right {
    flex-shrink: 0;
}

/* The template renders .pg-search-wrap, not .pg-search-box, so none of the
   rules below reached it: the input fell back to the browser's default inset
   border, and .search-ico — absolutely positioned with no positioned ancestor
   — escaped to the left edge of the page. */
.pg-filter-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.pg-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pg-search-wrap input {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 14px 9px 36px;
    font-size: var(--text-sm);
    color: var(--color-primary);
    width: 260px;
    max-width: 100%;
    outline: none;
    transition: all 0.2s ease;
}

.pg-search-wrap input::placeholder {
    color: var(--color-text-light);
}

.pg-search-wrap input:focus {
    background: var(--color-bg-white);
    border-color: var(--color-sky-600);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.pg-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-text-muted);
}

.pg-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-ico {
    position: absolute;
    left: 12px;
    color: var(--color-text-light);
    pointer-events: none;
}

.pg-search-box input {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 14px 9px 36px;
    font-size: var(--text-sm);
    color: var(--color-primary);
    width: 240px;
    outline: none;
    transition: all 0.2s ease;
}

.pg-search-box input:focus {
    background: var(--color-bg-white);
    border-color: var(--color-sky-600);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

/* Results Meta & Sorter */
.pg-results-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 4px;
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.meta-count-text strong {
    color: var(--color-primary);
}

.meta-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-sort-wrap label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

.pg-sort-select {
    border: none;
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    outline: none;
}

/* 4. Photo Grid & Cards */
/* Masonry columns rather than a fixed 4-across grid of identical 4:3 boxes.
   These are real event photographs in mixed portrait and landscape shapes —
   cropping every one of them to the same rectangle was what made the page
   read as a uniform, lifeless contact sheet. Columns let each photo keep its
   own proportions, and the caption moves into an overlay so the grid is
   pictures rather than rows of ragged truncated text. */
.pg-photos-grid {
    columns: 4;
    column-gap: 16px;
    margin-top: 14px;
}

.photo-card-item {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-border-light);
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(10, 25, 47, 0.16);
}

.photo-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-border-light);
    line-height: 0;
}

.photo-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.photo-card-item:hover .photo-img-wrap img {
    transform: scale(1.06);
}

.photo-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 25, 47, 0) 45%, rgba(10, 25, 47, 0.82) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 14px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.photo-card-item:hover .photo-hover-overlay {
    opacity: 1;
}

.photo-card-item:hover .photo-img-wrap img {
    transform: scale(1.04);
}

/* Caption now rides inside the overlay instead of sitting under the image as
   a truncated grey line. Kept in the DOM either way so the search filter and
   screen readers still have it. */
.photo-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    margin: 0;
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    line-height: 1.45;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.photo-card-item:hover .photo-card-caption {
    opacity: 1;
    transform: translateY(0);
}

/* No hover on touch, so the caption gradient stays on there. */
@media (hover: none) {
    .photo-hover-overlay,
    .photo-card-caption {
        opacity: 1;
        transform: none;
    }
}

.view-zoom-btn {
    background: var(--color-bg-white);
    color: var(--color-primary);
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Load More Button */
.btn-load-more-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-sky-50);
    color: var(--color-blue);
    border: 1px solid var(--color-sky-100);
    padding: 12px 30px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-more-pill:hover {
    background: var(--color-blue);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}

/* 5. Dual Cards (Instagram & Videos) */
.pg-dual-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
}

.pg-dual-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;

    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.dual-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.dual-card-head h3 {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* Instagram 5-grid */
.ig-gallery-5grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.ig-thumb-box {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-border-light);
    display: block;
}

.ig-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ig-thumb-box:hover img {
    transform: scale(1.1);
}

.btn-outline-ig {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-white);
    color: var(--color-primary);
    padding: 9px 20px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-ig:hover {
    border-color: var(--color-sky-600);
    color: var(--color-blue);
    background: var(--color-sky-50);
}

/* YouTube Videos 3-grid */
.yt-videos-3grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.yt-v-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yt-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-primary);
}

.yt-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-white);
    /* red-600 not red-500: 4.83:1 on white against 3.76 before. */
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.yt-thumb-wrap:hover .yt-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
}

.yt-duration-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    color: var(--color-bg-white);
    font-size: var(--text-3xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.yt-v-title {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-link-yt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-blue);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
}

.btn-link-yt:hover {
    text-decoration: underline;
}

/* 6. Bottom Trust Strip */
.pg-bottom-trust-strip {
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    padding: 16px 0;
}

.pg-trust-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.trust-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--color-text-strong);
}

.trust-right-avatars {
    display: flex;
    align-items: center;
}

.trust-right-avatars .t-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-bg-white);
    margin-left: -8px;
    object-fit: cover;
}

.trust-right-avatars .t-avatar:first-child {
    margin-left: 0;
}

/* 7. Lightbox Modal */
.pg-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pg-lightbox-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(8px);
}

.lightbox-dialog {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 90%;
    background: var(--color-primary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.lightbox-close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--color-bg-white);
    font-size: var(--text-2xl);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
}

.lightbox-close-btn:hover {
    background: #EF4444;
}

.lightbox-img-container {
    height: 520px;
    background: #050B14;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-caption-bar {
    padding: 14px 24px;
    background: var(--color-primary);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lightbox-caption-bar h3 {
    color: var(--color-bg-white);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
    line-height: 1.45;
}

.lightbox-counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-2xs);
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Prev / next arrows sit over the image so the whole set can be stepped
   through without closing the viewer. Also driven by the arrow keys and by
   swiping on touch. */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox-nav:hover {
    background: var(--color-teal);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* Filmstrip of every photo currently in view. */
.lightbox-filmstrip {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #050B14;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.lightbox-filmstrip::-webkit-scrollbar { height: 6px; }
.lightbox-filmstrip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.strip-thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 50px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-primary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.strip-thumb:hover { opacity: 0.85; }

.strip-thumb.is-active {
    opacity: 1;
    border-color: var(--color-teal);
}

/* Responsive Styles for Photo Gallery */
@media (max-width: 1024px) {
    .pg-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .title-dash-accent {
        margin: 0 auto 20px;
    }
    .pg-hero-desc {
        margin: 0 auto 24px;
    }
    .pg-metrics-strip {
        justify-content: center;
    }
    .pg-hero-collage {
        max-width: 500px;
        margin: 0 auto;
    }
    .pg-photos-grid {
        columns: 3;
    }
    .pg-dual-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pg-hero-title {
        font-size: 2.5rem;
    }
    .pg-photos-grid {
        columns: 2;
    }
    .pg-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar-left {
        justify-content: flex-start;
    }
    .pg-search-box input {
        width: 100%;
    }
    .lightbox-img-container {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .pg-photos-grid {
        columns: 1;
    }
    .pg-metrics-strip {
        flex-direction: column;
        align-items: stretch;
    }
    .yt-videos-3grid {
        grid-template-columns: 1fr;
    }
    .ig-gallery-5grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================
   VIDEO GALLERY PAGE (page-video-gallery.php)
   ========================================================= */
.vg-page-wrap {
    background-color: var(--color-bg-alt);
    overflow-x: clip;
}

/* 1. Hero Section */
.vg-hero-section {
    background: linear-gradient(180deg, #E6F4FE 0%, var(--color-bg-alt) 100%);
    padding: 50px 0 35px;
    border-bottom: 1px solid var(--color-border);
}

.vg-hero-grid {
    display: grid;
    /* One column: the hero photo that filled the right half was a heavily
       artefacted upscale, and a video index does not need a portrait. */
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.vg-hero-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-sky-100);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.vg-hero-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.vg-hero-subtitle {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 6px;
    line-height: 1.4;
}

.vg-hero-tagline {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-teal-dark);
    margin-bottom: 28px;
    letter-spacing: 0.01em;
}

.vg-metrics-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.vg-metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    padding: 10px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.vg-m-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vg-m-text strong {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
    display: block;
}

.vg-m-text span {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    display: block;
}

.vg-hero-visual-wrap {
    display: flex;
    justify-content: center;
    position: relative;
}

.vg-hero-visual-box {
    position: relative;
    border-radius: 32px;
    background: radial-gradient(circle at center, #E0F2FE 0%, var(--color-sky-100) 100%);
    box-shadow: 0 16px 36px rgba(10, 25, 47, 0.08);
    border: 5px solid var(--color-bg-white);
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.vg-bg-lungs-illustration {
    position: absolute;
    top: -20px;
    right: -20px;
    pointer-events: none;
    z-index: 0;
}

.vg-hero-doctor-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    object-fit: cover;
}

/* 2. Browse by Category Section */
.vg-categories-section {
    padding: 40px 0 20px;
}

.vg-sec-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin: 0;
}

.vg-cat-pills-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.vg-pills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.vg-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-strong);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.vg-cat-pill:hover {
    transform: translateY(-2px);
    border-color: var(--color-sky-600);
    color: var(--color-blue);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

.vg-cat-pill.active-pill {
    background: var(--color-blue);
    color: var(--color-bg-white) !important;
    border-color: var(--color-sky-600);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}

.vg-cat-pill.active-pill .vg-pill-ico {
    color: var(--color-bg-white) !important;
}

.vg-pill-ico {
    font-size: var(--text-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3. Main Content Grid (Left + Right Sidebar) */
.vg-main-content {
    padding: 25px 0 50px;
}

.vg-content-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* Featured Video Card */
.vg-featured-card {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    padding: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    margin-bottom: 35px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vg-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(10, 25, 47, 0.1);
    border-color: var(--color-sky-100);
}

.vg-feat-thumb-wrap {
    position: relative;
    /* YouTube's hqdefault.jpg is 4:3 with black bars baked in above and below a
       16:9 picture. Only a 16:9 box with object-fit: cover crops exactly those
       bars away; 16:10 or a fixed height left a dark strip showing. */
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-primary);
}

.vg-feat-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.vg-featured-card:hover .vg-feat-thumb-img {
    transform: scale(1.05);
}

.vg-feat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FBBF24;
    color: var(--color-primary);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 2;
}

.vg-play-btn-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 47, 0.25);
    backdrop-filter: blur(1px);
    transition: all 0.3s ease;
}

.vg-play-circle-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-bg-white);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.vg-featured-card:hover .vg-play-circle-btn {
    transform: scale(1.12);
    background: var(--color-blue);
    color: var(--color-bg-white);
}

.vg-duration-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(10, 25, 47, 0.85);
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.vg-feat-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vg-feat-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 0 0 10px;
}

.vg-feat-desc {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.5;
    margin-bottom: 16px;
}

.vg-feat-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.vg-meta-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-watch-now {
    background: var(--color-blue);
    color: var(--color-bg-white) !important;
    border: none;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-watch-now:hover {
    background: var(--color-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

/* Latest Videos Section */
.vg-section-head-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.vg-sec-subheading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The five /video-gallery/{topic}/ child pages are sections of this page now.
   Each keeps its own heading and its own way out to the channel, so the
   grouping survives a visitor filtering down to one topic. */
.vg-topic-section {
    padding-top: 34px;
    margin-top: 34px;
    border-top: 1px solid var(--color-border-light);
}

.vg-topic-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.vg-topic-count {
    font-family: var(--font-main);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0;
}

.vg-topic-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    transition: var(--transition-fast);
}

.vg-topic-cta svg {
    color: #FF0000;
    flex-shrink: 0;
}

.vg-topic-cta:hover,
.vg-topic-cta:focus-visible {
    border-color: #FF0000;
    background: #FFF5F5;
    color: var(--color-primary);
    transform: translateY(-1px);
}

.vg-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
}

.vg-cat-pill.active-pill .vg-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

@media (max-width: 640px) {
    .vg-section-head-flex {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .vg-sec-subheading {
        font-size: var(--text-lg);
    }

    .vg-topic-section {
        padding-top: 26px;
        margin-top: 26px;
    }
}

.vg-view-all-link {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-blue);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vg-view-all-link:hover {
    text-decoration: underline;
    color: var(--color-blue);
}

.vg-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vg-video-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.28s ease;
}

.vg-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(10, 25, 47, 0.1);
    border-color: var(--color-sky-100);
}

.vg-card-thumb-wrap {
    position: relative;
    /* YouTube's hqdefault.jpg is 4:3 with black bars baked in above and below a
       16:9 picture. Only a 16:9 box with object-fit: cover crops exactly those
       bars away; 16:10 or a fixed height left a dark strip showing. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-primary);
}

.vg-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.vg-video-card:hover .vg-card-thumb-wrap img {
    transform: scale(1.06);
}

.vg-card-play-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.vg-mini-play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
}

.vg-video-card:hover .vg-mini-play-btn {
    background: var(--color-blue);
    color: var(--color-bg-white);
    transform: scale(1.1);
}

.vg-duration-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(10, 25, 47, 0.85);
    color: var(--color-bg-white);
    font-size: var(--text-3xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
}

.vg-card-info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.vg-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vg-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.vg-cat-tag {
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.vg-views-count {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 4. Right Sidebar Widgets */
.vg-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Widget 1: Appointment Card */
.vg-side-appointment-card {
    background: linear-gradient(135deg, var(--color-sky-600) 0%, var(--color-primary) 100%);
    border-radius: 20px;
    padding: 18px;
    color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(10, 25, 47, 0.15);
    overflow: hidden;
}

.vg-apt-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.vg-apt-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vg-apt-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-white);
    flex-shrink: 0;
}

.vg-apt-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-bg-white);
}

.vg-apt-sub {
    display: block;
    font-size: var(--text-2xs);
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
}

.vg-apt-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-white);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.vg-apt-arrow-btn:hover {
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    transform: scale(1.1);
}

.vg-apt-doctor-img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    margin-left: 10px;
}

.vg-apt-doctor-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Side Widget Box */
.vg-side-widget-box {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.vg-side-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.vg-side-widget-header h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.vg-side-video-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vg-side-video-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.vg-side-video-item:hover {
    background: var(--color-border-light);
}

.vg-mini-thumb {
    position: relative;
    width: 68px;
    height: 38px; /* 16:9, see .vg-card-thumb-wrap */
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-primary);
}

.vg-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vg-mini-duration {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: var(--text-3xs);
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
}

.vg-mini-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vg-mini-arrow {
    color: var(--color-text-light);
    font-size: var(--text-lg);
    font-weight: 700;
}

.vg-side-bottom-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-blue);
    text-decoration: none;
}

.vg-side-bottom-link:hover {
    text-decoration: underline;
}

/* Follow Us Social Box */
.vg-follow-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 12px;
    text-align: center;
}

.vg-social-links-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vg-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-white);
    transition: transform 0.2s ease;
    text-decoration: none;
}

.vg-social-btn:hover {
    transform: scale(1.12);
}

.btn-yt { background: #FF0000; }
.btn-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.btn-fb { background: #1877F2; }
.btn-li { background: #0A66C2; }

/* Subscribe to YouTube Channel Box */
.vg-subscribe-box {
    background: linear-gradient(180deg, #EBF5FF 0%, #E6FFFA 100%);
    border: 1px solid var(--color-sky-100);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
}

.vg-sub-play-3d {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--color-bg-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.15);
    margin-bottom: 12px;
}

.vg-sub-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 0 0 8px;
}

.vg-sub-desc {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    line-height: 1.4;
    margin: 0 0 16px;
}

.btn-subscribe-pill {
    background: var(--color-blue);
    color: var(--color-bg-white) !important;
    border: none;
    padding: 9px 24px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-subscribe-pill:hover {
    background: var(--color-blue);
    transform: translateY(-2px);
}

/* 5. Bottom Questions CTA Banner */
.vg-bottom-cta-section {
    padding: 25px 0 45px;
}

.vg-lungs-cta-banner {
    background: linear-gradient(135deg, var(--color-mint-light) 0%, #E0F2FE 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 6px 20px rgba(0, 168, 150, 0.08);
}

.vg-cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vg-cute-lungs-card {
    flex-shrink: 0;
}

.vg-cta-heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.vg-cta-sub {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    margin: 0;
}

.btn-navy-pill {
    background: var(--color-blue);
    color: var(--color-bg-white) !important;
    padding: 12px 28px;
    border-radius: 9999px;
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-navy-pill:hover {
    background: var(--color-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

/* 6. Video Player Modal */
.vg-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vg-video-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.vg-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(8px);
}

.vg-modal-dialog {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 850px;
    background: var(--color-primary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.vg-modal-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: var(--text-2xl);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
}

.vg-modal-close-btn:hover {
    background: #EF4444;
}

.vg-modal-player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.vg-modal-player-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vg-modal-meta-bar {
    padding: 14px 20px;
    background: var(--color-primary);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.vg-modal-title {
    color: var(--color-bg-white);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
}

/* Responsive Rules for Video Gallery */
@media (max-width: 1024px) {
    .vg-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .vg-hero-icon-badge {
        margin: 0 auto 16px;
    }
    .vg-metrics-strip {
        justify-content: center;
    }
    .vg-content-layout {
        grid-template-columns: 1fr;
    }
    .vg-sidebar-right {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .vg-hero-title {
        font-size: 2.5rem;
    }
    .vg-featured-card {
        grid-template-columns: 1fr;
    }
    .vg-videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vg-lungs-cta-banner {
        flex-direction: column;
        text-align: center;
    }
    .vg-cta-left {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .vg-videos-grid {
        grid-template-columns: 1fr;
    }
    .vg-metrics-strip {
        flex-direction: column;
        align-items: stretch;
    }
    .vg-pills-row {
        gap: 8px;
    }
    .vg-cat-pill {
        padding: 8px 14px;
        font-size: var(--text-xs);
    }
}

/* ==========================================================================
   ABOUT US PAGE STYLING (docs/About.png & docs/About 1.png)
   ========================================================================== */

.about-page-wrap {
    background: var(--color-bg-white);
    color: var(--color-text-main);
    overflow-x: clip;
}

/* 1. Hero Section */
.about-hero-section {
    background: linear-gradient(180deg, #F0F9FF 0%, var(--color-bg-white) 100%);
    padding: 60px 0 40px;
    position: relative;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.about-badge-pill {
    display: inline-block;
    background: #E0F2FE;
    color: var(--color-blue);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid var(--color-sky-100);
}

.about-hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.12;
    margin-bottom: 14px;
    letter-spacing: -0.025em;
}

.about-name-highlight {
    color: var(--color-teal-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.about-heart-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    transform: translateY(-2px);
}

.about-accent-dash {
    width: 54px;
    height: 3.5px;
    background: var(--color-teal);
    border-radius: 3px;
    margin: 16px 0 20px;
    position: relative;
}

.about-accent-dash::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--color-teal);
}

.about-hero-subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.45;
    margin-bottom: 14px;
}

.about-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 540px;
}

.about-hero-cta-btns {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary-blue-pill {
    background: var(--color-blue);
    color: var(--color-bg-white) !important;
    border: none;
    padding: 13px 26px;
    border-radius: 9999px;
    font-size: var(--text-base);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.28);
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-primary-blue-pill:hover {
    background: var(--color-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(2, 132, 199, 0.38);
}

.btn-whatsapp-outline-pill {
    background: var(--color-bg-white);
    color: #0F5132 !important;
    border: 1.5px solid #25D366;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: var(--text-base);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.12);
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-whatsapp-outline-pill:hover {
    background: var(--color-mint-light);
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.22);
}

.about-hero-visual {
    display: flex;
    justify-content: center;
    position: relative;
}

.about-visual-arch-wrap {
    position: relative;
    max-width: 440px;
    width: 100%;
}

.about-dots-pattern {
    position: absolute;
    top: -15px;
    left: -20px;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(var(--color-sky-100) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.9;
    z-index: 0;
}

.about-arch-frame {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #E0F2FE 0%, var(--color-sky-100) 100%);
    border: 6px solid var(--color-bg-white);
    box-shadow: 0 16px 40px rgba(10, 25, 47, 0.08);
    display: block;
}

.about-hero-img {
    width: 100%;
    aspect-ratio: 420 / 480;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center 22%;
    filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

/* 2. Floating Metrics Strip */
.about-metrics-section {
    position: relative;
    margin-top: -30px;
    z-index: 10;
    padding-bottom: 25px;
}

.about-metrics-bar {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
    padding: 20px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
}

.about-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.about-m-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



.about-m-text strong {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    line-height: 1.15;
}

.about-m-text span {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    display: block;
    margin-top: 2px;
    line-height: 1.35;
}

/* 3. Our Story Section */
.about-story-section {
    padding: 55px 0;
    background: var(--color-bg-white);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 50px;
    align-items: center;
}

.about-desk-img-wrap {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(10, 25, 47, 0.08);
    border: 4px solid var(--color-bg-alt);
}

.about-desk-img-wrap {
    background: radial-gradient(circle at 50% 40%, #E0F2FE 0%, var(--color-bg-alt) 100%);
}

.about-desk-img {
    width: 100%;
    aspect-ratio: 420 / 400;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

.about-sec-eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.about-sec-heading {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.22;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.highlight-navy {
    color: var(--color-primary);
    font-weight: 700;
}

.about-story-paragraphs p {
    font-size: var(--text-base);
    color: var(--color-text-strong);
    line-height: 1.7;
    margin-bottom: 14px;
}

.about-signature-block {
    margin-top: 24px;
}

.about-signature-img-wrap {
    margin-bottom: 8px;
}

.about-signature-img {
    width: 150px;
    height: auto;
    display: block;
}

.about-sig-name {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-teal-dark);
    margin: 0 0 2px;
}

.about-sig-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
}

/* 4. Why Choose Us Section */
.about-why-section {
    padding: 60px 0 70px;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.about-why-header {
    margin-bottom: 40px;
}

/* Three across, not six. At six the columns fell to ~215px, which put half
   the titles on one line and half on two, so the descriptions started at
   different heights and every card ended in a different amount of dead
   space. Three columns give each title one line. */
.about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Icon and title share the top row and the text sits in one column beside
   the icon, so the six cards read as a list of features rather than six
   centred blocks the eye has to re-centre on. */
.about-why-card {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 24px 22px;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.about-why-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-sky-100);
    box-shadow: 0 14px 30px rgba(10, 25, 47, 0.08);
}

.about-why-icon-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.about-why-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px;
    line-height: 1.25;
}

.about-why-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.48;
    margin: 0;
    /* Second row, aligned under the title rather than under the icon. */
    grid-column: 2;
}

/* 5. Hospital Panorama Banner */
.about-hospital-banner-section {
    padding: 30px 0 50px;
    background: var(--color-bg-white);
}

.about-hospital-card {
    background: linear-gradient(135deg, #E6F4FE 0%, var(--color-sky-50) 50%, #E6FFFA 100%);
    border: 1.5px solid var(--color-sky-100);
    border-radius: 24px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.08);
    overflow: hidden;
}

.hosp-side {
    flex: 0 0 200px;
}

.hosp-banner-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.hosp-center-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
}

.hosp-stat-col {
    text-align: center;
    padding: 0 8px;
}

.hosp-stat-num {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-blue);
    display: block;
    line-height: 1.1;
}

.hosp-stat-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-body);
    display: block;
    margin-top: 4px;
    line-height: 1.25;
}

.hosp-stat-divider {
    width: 1px;
    height: 38px;
    background: #CBD5E1;
}

/* 6. Credentials & Qualifications Accordions */
.about-credentials-section {
    padding: 50px 0;
    background: var(--color-bg-white);
}

.about-cred-sub {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 620px;
    margin: 8px auto 30px;
}

.about-accordion-wrap {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-acc-item {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.about-acc-item.is-open {
    border-color: var(--color-sky-100);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
}

.about-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.about-acc-trigger:hover {
    background: var(--color-bg-alt);
}

.about-acc-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-acc-title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    flex: 1;
}

.about-acc-chevron,
.about-acc-chevron-icon {
    color: var(--color-text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
    transform: rotate(0deg);
}

.about-acc-item.is-open .about-acc-chevron,
.about-acc-item.is-open .about-acc-chevron-icon {
    transform: rotate(180deg);
    color: var(--color-blue);
}

.about-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 22px;
}

.about-acc-item.is-open .about-acc-body {
    max-height: 600px;
    padding: 0 22px 22px;
}

/* The global `ul, ol { list-style: none }` reset stripped the markers, but
   this rule still reserved 20px of padding for them — so every item sat in
   a hanging indent with nothing in it, and a wrapped item was
   indistinguishable from the start of the next one. */
.about-bullet-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.about-bullet-list li::marker {
    color: var(--color-teal-dark);
}

.about-bullet-list li {
    font-size: var(--text-base);
    color: var(--color-text-strong);
    line-height: 1.65;
    margin-bottom: 8px;
}

.about-bullet-list li:last-child {
    margin-bottom: 0;
}

/* Publication / abstract citations run long and are scanned rather than read,
   so they get tighter type and a scroll cap instead of pushing the accordion
   to several screens. */
.about-pub-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 12px;
}

.about-pub-list li {
    font-size: var(--text-sm);
    line-height: 1.55;
    margin-bottom: 12px;
    color: var(--color-text-muted);
}

.about-pub-list li strong {
    color: var(--color-primary);
}

/* 7. Teddy Bear CTA Banner */
.about-teddy-cta-section {
    padding-bottom: 60px;
}

.about-teddy-banner {
    background: linear-gradient(135deg, var(--color-mint-light) 0%, #E0F2FE 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: 26px;
    padding: 24px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    box-shadow: 0 10px 30px rgba(0, 168, 150, 0.08);
}

.teddy-left-flex {
    display: flex;
    align-items: center;
    gap: 22px;
}

.teddy-avatar-wrap {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    background: var(--color-bg-white);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 168, 150, 0.12);
    border: 2px solid var(--color-bg-white);
    overflow: hidden;
    /* The artwork is cropped to the bear's outline in the PNG itself, so with
       no inset the 20px corners slice its shoulders and feet. */
    padding: 11px;
}

.teddy-banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.teddy-heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.teddy-sub {
    font-size: var(--text-base);
    color: var(--color-text-body);
    margin: 0;
}

.teddy-right-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 2.8rem;
    }
    .about-why-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .about-metrics-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-hospital-card {
        flex-direction: column;
        text-align: center;
    }
    .hosp-side {
        display: none;
    }

    /* The desktop layout is a single flex row with a divider between every
       pair — wrapping that same row onto 2-3 lines left the dividers
       floating as orphan flex items and every row's columns misaligned
       with the one above it. A plain 2-column grid keeps every stat lined
       up, and the odd 5th item centers on its own row below. */
    .hosp-center-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        row-gap: 24px;
        column-gap: 12px;
    }
    .hosp-stat-divider {
        display: none;
    }
    .hosp-stat-col:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .about-hero-grid,
    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-hero-title {
        font-size: 2.4rem;
    }
    .about-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-teddy-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .teddy-left-flex {
        flex-direction: column;
        text-align: center;
    }
    .teddy-right-btns {
        flex-direction: column;
        width: 100%;
    }
    .teddy-right-btns .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-metrics-bar {
        grid-template-columns: 1fr;
    }
    .about-why-grid {
        grid-template-columns: 1fr;
    }
    .about-hero-cta-btns {
        flex-direction: column;
        width: 100%;
    }
    .about-hero-cta-btns .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Contact Us Page Styles (Exact match to docs/contact.png)
   ========================================================================== */

.contact-page-wrap {
    background: var(--color-bg-white);
    color: var(--color-text-main);
    overflow-x: clip;
}

.contact-hero-section {
    padding: 30px 0 50px;
    background: linear-gradient(180deg, #EDF6FD 0%, var(--color-bg-white) 100%);
}

.contact-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.contact-breadcrumbs a {
    color: var(--color-teal-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-breadcrumbs a:hover {
    color: #007A6D;
    text-decoration: underline;
}

.contact-breadcrumbs .breadcrumb-separator {
    color: var(--color-text-light);
}

.contact-breadcrumbs .breadcrumb-current {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Split Grid */
/* One column. The form used to sit in the right half; it has moved to its
   own section below the locations, so the hero is now just the heading,
   the OPD timings and the value cards. */
.contact-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 52px;
    align-items: flex-start;
}

.contact-left-col {
    display: flex;
    flex-direction: column;
}

.contact-title-group {
    margin-bottom: 12px;
}

.contact-hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.12;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.contact-title-teal {
    color: var(--color-teal-dark);
}

.contact-accent-line,
.contact-form-dash,
.contact-section-dash,
.info-col-dash {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contact-accent-line .accent-bar,
.contact-form-dash .accent-bar,
.contact-section-dash .accent-bar,
.info-col-dash .accent-bar {
    width: 36px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 2px;
}

.contact-accent-line .accent-dot,
.contact-form-dash .accent-dot,
.contact-section-dash .accent-dot,
.info-col-dash .accent-dot {
    width: 5px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 50%;
}

.contact-hero-desc {
    font-size: var(--text-base);
    color: #4A5568;
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 580px;
}

/* Hero Consultation Visual Card */
.contact-hero-visual-card {
    position: relative;
    border-radius: 120px 24px 24px 24px;
    overflow: hidden;
    background: #E6F6F4;
    box-shadow: 0 12px 36px rgba(0, 168, 150, 0.1);
    margin-bottom: 28px;
    border: 1px solid rgba(0, 168, 150, 0.15);
}

.contact-hero-img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
}

/* 3 Values Row */
.contact-values-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.contact-val-card {
    background: var(--color-bg-white);
    border: 1px solid #E6EFF0;
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 4px 16px rgba(10, 37, 64, 0.03);
    transition: all 0.25s ease;
}

.contact-val-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-teal);
    box-shadow: 0 10px 24px rgba(0, 168, 150, 0.09);
}

.contact-val-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8F7F5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.contact-val-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.contact-val-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Right Form Card */
.contact-right-col {
    position: relative;
}

.contact-form-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 32px 30px;
    box-shadow: 0 12px 40px rgba(10, 37, 64, 0.07);
}

.contact-form-header {
    margin-bottom: 22px;
}

.contact-form-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.contact-form-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 8px 0 0 0;
}

.contact-form-body {
    display: flex;
    flex-direction: column;
}

.form-field-group {
    position: relative;
    margin-bottom: 14px;
}

.form-field-group .field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-field-group .textarea-icon {
    top: 18px;
    transform: none;
}

.contact-input,
.contact-select,
.contact-textarea {
    width: 100%;
    padding: 12px 16px 12px 46px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: var(--text-sm);
    color: var(--color-primary);
    background: #FAFCFC;
    transition: all 0.2s ease;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: var(--color-text-light);
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
    background: var(--color-bg-white);
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.12);
}

.form-select-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.form-select-group .select-arrow-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.contact-textarea {
    resize: vertical;
    min-height: 80px;
}

.contact-btn-submit {
    width: 100%;
    height: 48px;
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    border: none;
    border-radius: 12px;
    font-size: var(--text-base);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
    margin-top: 4px;
}

.contact-btn-submit:hover {
    background: #008F80;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 168, 150, 0.35);
}

.contact-btn-submit:active {
    transform: translateY(0);
}

.contact-divider-or {
    position: relative;
    text-align: center;
    margin: 16px 0;
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.contact-divider-or::before,
.contact-divider-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: var(--color-border);
}

.contact-divider-or::before {
    left: 0;
}

.contact-divider-or::after {
    right: 0;
}

.contact-btn-whatsapp {
    width: 100%;
    height: 46px;
    border: 1.5px solid #25D366;
    background: var(--color-bg-white);
    color: #0E7A6E;
    border-radius: 12px;
    font-size: var(--text-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.contact-btn-whatsapp:hover {
    background: #F0FDF4;
    border-color: #1EBE5D;
    color: #0E7064;
    transform: translateY(-1px);
}

.contact-form-status {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: var(--text-sm);
    margin-top: 12px;
    text-align: center;
    line-height: 1.4;
}

.contact-form-status.success {
    background: var(--color-mint-light);
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.contact-form-status.error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* ==========================================================================
   Our Locations Section
   ========================================================================== */

.contact-locations-section {
    padding: 50px 0 35px;
    background: var(--color-bg-white);
}

.contact-section-header {
    text-align: center;
    margin-bottom: 36px;
}

.contact-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.contact-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.contact-location-card {
    position: relative;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(10, 37, 64, 0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.contact-location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.09);
    border-color: var(--color-teal);
}

.contact-loc-thumb-wrap {
    position: relative;
    height: 155px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: var(--color-border-light);
}

.contact-loc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.contact-location-card:hover .contact-loc-img {
    transform: scale(1.05);
}

.contact-loc-badge-floating {
    position: absolute;
    top: 130px;
    left: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(10, 37, 64, 0.14);
    border: 2.5px solid var(--color-bg-white);
    z-index: 10;
}

.contact-loc-body {
    padding: 30px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contact-loc-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}

.contact-loc-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 14px 0;
}

/* Per-clinic OPD, timings and appointment line. These differ per location
   (Patparganj runs two afternoons a week, not the blanket Mon-Sat 10-6 the
   page used to imply), so each card carries its own. */
.contact-loc-facts {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    flex-grow: 1;
    border-top: 1px solid var(--color-border-light);
    padding-top: 12px;
}

.contact-loc-facts li {
    display: flex;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-main);
    line-height: 1.5;
    margin-bottom: 8px;
}

.contact-loc-facts li:last-child {
    margin-bottom: 0;
}

.contact-loc-facts li span {
    flex: 0 0 92px;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: 0.03em;
    padding-top: 1px;
}

.contact-loc-facts li a {
    color: var(--color-teal-dark);
    font-weight: 700;
}

.contact-loc-facts li a:hover {
    color: var(--color-primary);
}

.contact-loc-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    margin-top: auto;
}

.contact-loc-btn-link:hover {
    color: #007A6D;
    gap: 10px;
}

/* ==========================================================================
   Information & Quick Contact Strip
   ========================================================================== */

.contact-info-strip-section {
    padding: 20px 0 50px;
    background: var(--color-bg-white);
}

.contact-info-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 6px 28px rgba(10, 37, 64, 0.05);
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.1fr;
    padding: 32px 36px;
    gap: 36px;
    position: relative;
}

.contact-info-col {
    display: flex;
    flex-direction: column;
    position: relative;
}

.contact-info-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 5%;
    height: 90%;
    width: 1px;
    background: #EEF2F6;
}

.contact-info-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.info-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E6F6F4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-col-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.info-col-dash {
    margin-bottom: 20px;
    margin-left: 46px;
}

.info-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

.schedule-label {
    color: var(--color-primary);
    font-weight: 700;
}

.schedule-val {
    color: var(--color-text-muted);
    font-weight: 500;
}

.info-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: color 0.2s ease;
}

.contact-list-item:hover {
    color: var(--color-teal-dark);
}

.contact-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1FBF9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-map-preview-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: block;
    height: 125px;
}

.contact-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.contact-map-preview-wrap:hover .contact-map-img {
    transform: scale(1.05);
}

.contact-map-overlay {
    position: absolute;
    inset: 0;
    /* 0.45 left white text at roughly 3:1 over a light map tile. */
    background: rgba(10, 37, 64, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 700;
}

.contact-map-preview-wrap:hover .contact-map-overlay {
    opacity: 1;
}

/* ==========================================================================
   Contact Responsive Styles
   ========================================================================== */

@media (max-width: 992px) {
    .contact-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-hero-title {
        font-size: 2.6rem;
    }
    .contact-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-info-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .contact-info-col:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .contact-values-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .contact-locations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-hero-title {
        font-size: 2.2rem;
    }
    .contact-form-card {
        padding: 24px 18px;
    }
}

/* ==========================================================================
   Our Team Page Styles (Exact match to docs/team.png)
   ========================================================================== */

.team-page-wrap {
    background: var(--color-bg-white);
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    overflow-x: clip;
}

/* Breadcrumbs */
.team-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.team-breadcrumbs a {
    color: var(--color-teal-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.team-breadcrumbs a:hover {
    color: #008274;
    text-decoration: underline;
}

.team-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.team-breadcrumbs .crumb-current {
    color: var(--color-text-body);
    font-weight: 600;
}

/* 1. Hero Section */
.team-hero-section {
    background: var(--color-bg-alt);
    padding: 30px 0 55px;
    position: relative;
    border-bottom: 1px solid #EEF2F6;
}

.team-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: center;
}

.team-hero-content {
    display: flex;
    flex-direction: column;
}

.team-hero-title {
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 16px 0;
}

.team-title-teal {
    color: var(--color-teal-dark);
}

.team-title-dash {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
}

.team-title-dash .accent-bar {
    width: 44px;
    height: 3.5px;
    background: var(--color-teal);
    border-radius: 2px;
}

.team-title-dash .accent-dot {
    width: 4px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 50%;
}

.team-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.65;
    max-width: 530px;
    margin: 0 0 36px 0;
}

/* Stats Floating Strip */
.team-stats-strip {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 16px 28px;
    gap: 32px;
    box-shadow: 0 6px 24px rgba(10, 37, 64, 0.05);
    max-width: fit-content;
}

.team-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.team-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--color-border);
}

.team-stat-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #E6F6F4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal-dark);
    flex-shrink: 0;
}

.team-stat-text {
    display: flex;
    flex-direction: column;
}

.team-stat-num {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
}

.team-stat-lbl {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* Hero Right Visual */
.team-hero-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.team-hero-visual-frame {
    position: relative;
    width: 100%;
    max-width: 540px;
    height: 380px;
    border-radius: 190px 0 0 0;
    overflow: hidden;
    background: var(--color-border-light);
    box-shadow: 0 14px 40px rgba(10, 37, 64, 0.07);
}

.team-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

.team-hero-visual-frame:hover .team-hero-img {
    transform: scale(1.03);
}

/* 2. Meet Our Team Section */
.team-members-section {
    padding: 70px 0 80px;
    background: var(--color-bg-white);
}

.team-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.team-section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}

.team-section-dash {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.team-section-dash .accent-bar {
    width: 44px;
    height: 3.5px;
    background: var(--color-teal);
    border-radius: 2px;
}

.team-section-dash .accent-dot {
    width: 4px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 50%;
}

/* Doctor Cards Grid */
.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.team-doctor-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(10, 37, 64, 0.03);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.team-doctor-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 16px 40px rgba(10, 37, 64, 0.08);
    transform: translateY(-5px);
}

.team-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-card-top {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.team-photo-wrap {
    width: 175px;
    height: 235px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-border-light);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.06);
}

.team-doctor-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.team-doctor-card:hover .team-doctor-photo {
    transform: scale(1.04);
}

/* Initial-based avatar, used where a real portrait has not been supplied yet.
   Better than a stock photo of an unrelated person standing in for a named
   clinician. Sized to fill the same frames as .team-doctor-photo. */
.team-photo-initials,
.team-modal-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--color-teal-light) 0%, var(--color-bg-white) 100%);
    color: var(--color-teal-dark);
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--color-border-light);
}

.team-photo-initials {
    width: 100%;
    height: 100%;
    font-size: 2.75rem;
}

.team-division-intro {
    max-width: 860px;
    margin: 20px auto 0;
    text-align: center;
}

.team-division-intro p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.team-division-intro p:last-child {
    margin-bottom: 0;
}

.team-modal-initials {
    width: 180px;
    height: 230px;
    border-radius: 18px;
    margin-bottom: 14px;
    font-size: 3rem;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.08);
}

.team-info-wrap {
    flex-grow: 1;
}

.team-doctor-name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    line-height: 1.2;
}

.team-doctor-accent-line {
    width: 26px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 2px;
    margin-bottom: 10px;
}

.team-doctor-role {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-teal-dark);
    display: block;
    margin-bottom: 2px;
}

.team-doctor-dept {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 16px 0;
}

.team-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.team-meta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--color-text-body);
    font-weight: 500;
}

.team-meta-list .meta-icon {
    width: 18px;
    height: 18px;
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Special Interests */
.team-interests-section {
    margin-bottom: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.team-interests-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 12px 0;
}

.team-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-tag-pill {
    display: inline-block;
    padding: 6px 14px;
    background: #EBF8F6;
    color: #084c44;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid rgba(0, 168, 150, 0.15);
    transition: all 0.2s ease;
}

.team-tag-pill:hover {
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    border-color: var(--color-teal);
    transform: translateY(-1px);
}

/* Card Action Button */
.team-card-action {
    margin-top: auto;
}

.team-btn-view-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1.5px solid var(--color-teal);
    color: var(--color-teal-dark);
    background: transparent;
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    width: auto;
}

.team-btn-view-profile:hover {
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    box-shadow: 0 4px 12px rgba(0, 168, 150, 0.25);
    transform: translateY(-1px);
}

.team-btn-view-profile svg {
    transition: transform 0.2s ease;
}

.team-btn-view-profile:hover svg {
    transform: translateX(3px);
}

/* 3. Teddy Bear Mascot Banner */
.team-mascot-banner-section {
    padding: 0 0 70px;
    background: var(--color-bg-white);
}

.team-mascot-banner-card {
    background: #EBF8F6;
    border-radius: 24px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(0, 168, 150, 0.06);
    border: 1px solid rgba(0, 168, 150, 0.12);
}

.mascot-banner-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.mascot-avatar-wrap {
    width: 74px;
    height: 74px;
    border-radius: 18px;
    background: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.06);
    flex-shrink: 0;
}

.mascot-avatar-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mascot-banner-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.mascot-banner-title .text-teal {
    color: var(--color-teal-dark);
}

.mascot-banner-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-body);
    margin: 0;
}

.mascot-banner-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.btn-mascot-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #007791;
    color: var(--color-bg-white);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 119, 145, 0.25);
}

.btn-mascot-book:hover {
    background: #005f73;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 119, 145, 0.35);
    color: var(--color-bg-white);
}

.btn-mascot-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-bg-white);
    border: 1px solid #25D366;
    color: #0E7A6E;
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.12);
}

.btn-mascot-whatsapp:hover {
    background: #25D366;
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
}

.btn-mascot-whatsapp:hover svg {
    fill: var(--color-bg-white);
}

/* 4. Interactive Team Profile Modal */
body.team-modal-open {
    overflow: hidden;
}

.team-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 37, 64, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.team-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.team-modal-card {
    position: relative;
    background: var(--color-bg-white);
    border-radius: 24px;
    max-width: 780px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(10, 37, 64, 0.2);
    transform: scale(0.92);
    transition: transform 0.3s ease;
    padding: 36px;
}

.team-modal-overlay.is-active .team-modal-card {
    transform: scale(1);
}

.team-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: var(--color-border-light);
    border: none;
    font-size: var(--text-2xl);
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-modal-close:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.team-modal-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}

.team-modal-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.team-modal-img {
    width: 180px;
    height: 230px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.08);
}

.team-modal-role {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.team-modal-name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
}

.team-modal-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0 0 18px 0;
}

.btn-modal-consult {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-modal-consult:hover {
    background: #008274;
    color: var(--color-bg-white);
    transform: translateY(-1px);
}

.team-modal-right h4 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--color-border-light);
}

.team-modal-right p {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.team-modal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-modal-list li {
    position: relative;
    padding-left: 18px;
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.45;
}

.team-modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-teal);
}

.team-modal-loc {
    background: var(--color-bg-alt);
    border-radius: 12px;
    padding: 14px 18px;
    border-left: 3px solid var(--color-teal);
}

/* Responsive Styles for Our Team Page */
@media (max-width: 1024px) {
    .team-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .team-hero-visual {
        justify-content: center;
    }
    .team-hero-visual-frame {
        max-width: 100%;
        height: 320px;
        border-radius: 140px 0 0 0;
    }
    .team-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .team-mascot-banner-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }
    .mascot-banner-left {
        flex-direction: column;
    }
    .mascot-banner-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .team-hero-title {
        font-size: 2.4rem;
    }
    .team-stats-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }
    .team-stat-item:not(:last-child)::after {
        display: none;
    }
    .team-card-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .team-doctor-accent-line {
        margin: 0 auto 10px auto;
    }
    .team-meta-list li {
        justify-content: center;
    }
    .team-tags-cloud {
        justify-content: center;
    }
    .team-interests-title {
        text-align: center;
    }
    .team-card-action {
        text-align: center;
    }
    .team-modal-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   Media & Press Page Styles
   ========================================================================== */

.media-page-wrap {
    background: var(--color-bg-white);
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    overflow-x: clip;
}

/* Breadcrumbs */
.media-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.media-breadcrumbs a {
    color: var(--color-teal-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.media-breadcrumbs a:hover {
    color: #008274;
    text-decoration: underline;
}

.media-breadcrumbs .crumb-sep {
    color: var(--color-text-light);
}

.media-breadcrumbs .crumb-current {
    color: var(--color-text-body);
    font-weight: 600;
}

/* Hero Section */
.media-hero-section {
    background: var(--color-bg-alt);
    padding: 35px 0 35px;
    border-bottom: 1px solid #EEF2F6;
}

.media-hero-header {
    margin-bottom: 28px;
}

.media-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E6F6F4;
    color: var(--color-teal-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.media-hero-badge .badge-dot {
    width: 7px;
    height: 7px;
    background: var(--color-teal);
    border-radius: 50%;
    animation: mediaPulse 2s infinite;
}

@keyframes mediaPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 168, 150, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 150, 0); }
}

.media-hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 14px 0;
}

.media-title-teal {
    color: var(--color-teal-dark);
}

.media-title-dash {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}

.media-title-dash .accent-bar {
    width: 44px;
    height: 3.5px;
    background: var(--color-teal);
    border-radius: 2px;
}

.media-title-dash .accent-dot {
    width: 4px;
    height: 4px;
    background: var(--color-teal);
    border-radius: 50%;
}

.media-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    max-width: 680px;
    line-height: 1.65;
    margin: 0;
}

/* Filter Bar */
.media-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}

.media-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    color: var(--color-text-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.02);
}

.media-filter-btn:hover {
    border-color: var(--color-teal);
    color: var(--color-teal-dark);
    transform: translateY(-1px);
}

.media-filter-btn.is-active {
    background: var(--color-teal-dark);
    border-color: var(--color-teal);
    color: var(--color-bg-white);
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
}

.media-filter-btn .filter-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 1px 7px;
    border-radius: 20px;
    font-size: var(--text-2xs);
    margin-left: 2px;
}

.media-filter-btn:not(.is-active) .filter-count {
    background: var(--color-border-light);
    color: var(--color-text-muted);
}

/* Grid Section */
.media-grid-section {
    padding: 50px 0 70px;
    background: var(--color-bg-white);
}

/* Spotlight Card */
.media-spotlight-card {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 36px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(10, 37, 64, 0.05);
    margin-bottom: 50px;
    transition: all 0.35s ease;
}

.media-spotlight-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 16px 45px rgba(10, 37, 64, 0.09);
}

.spotlight-visual-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    background: var(--color-primary);
    overflow: hidden;
}

.spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.media-spotlight-card:hover .spotlight-img {
    transform: scale(1.04);
}

.spotlight-badge-overlay {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
}

.spotlight-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(10, 37, 64, 0.85);
    backdrop-filter: blur(8px);
    color: var(--color-bg-white);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.spotlight-content {
    padding: 36px 36px 36px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spotlight-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--text-sm);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.spotlight-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-teal-dark);
    font-weight: 700;
}

.spotlight-date {
    color: var(--color-text-muted);
    background: var(--color-border-light);
    padding: 3px 10px;
    border-radius: 50px;
    font-weight: 600;
}

.spotlight-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 0 0 14px 0;
}

.spotlight-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.spotlight-title a:hover {
    color: var(--color-teal-dark);
}

.spotlight-desc {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.65;
    margin: 0 0 24px 0;
}

.spotlight-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-spotlight-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);
}

.btn-spotlight-primary:hover {
    background: #008274;
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 168, 150, 0.35);
}

.btn-spotlight-secondary {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border: 1px solid #CBD5E1;
    color: var(--color-text-body);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-spotlight-secondary:hover {
    border-color: var(--color-teal);
    color: var(--color-teal-dark);
    background: #E6F6F4;
}

/* Cards Grid */
.media-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.media-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(10, 37, 64, 0.03);
    transition: all 0.35s ease;
}

.media-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 14px 36px rgba(10, 37, 64, 0.08);
    transform: translateY(-4px);
}

.media-card-thumb {
    position: relative;
    width: 100%;
    height: 210px;
    background: var(--color-border-light);
    overflow: hidden;
}

.media-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.media-card:hover .media-card-img {
    transform: scale(1.05);
}

.media-card-tag-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(10, 37, 64, 0.8);
    backdrop-filter: blur(6px);
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.02em;
}

.media-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.media-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.media-card-publisher {
    font-weight: 700;
    color: var(--color-teal-dark);
}

.media-card-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.media-card-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.media-card-title a:hover {
    color: var(--color-teal-dark);
}

.media-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.media-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-teal-dark);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.media-card-link:hover {
    color: #008274;
}

.media-card-link svg {
    transition: transform 0.2s ease;
}

.media-card-link:hover svg {
    transform: translateX(4px);
}

/* Press Contact Strip */
.media-press-contact-box {
    margin-top: 60px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0F3B60 100%);
    border-radius: 24px;
    padding: 40px 45px;
    color: var(--color-bg-white);
    box-shadow: 0 12px 36px rgba(10, 37, 64, 0.12);
}

.press-contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 36px;
    align-items: center;
}

.press-contact-sub {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 6px;
}

.press-contact-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-bg-white);
    line-height: 1.25;
    margin: 0 0 10px 0;
}

.press-contact-desc {
    font-size: var(--text-sm);
    color: #CBD5E1;
    line-height: 1.6;
    margin: 0;
}

.press-contact-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-press-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.3);
}

.btn-press-contact:hover {
    background: #008274;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 168, 150, 0.4);
    color: var(--color-bg-white);
}

.btn-press-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-press-call:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    color: var(--color-bg-white);
}

@keyframes mediaFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Media Page */
@media (max-width: 1024px) {
    .media-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .media-spotlight-card {
        grid-template-columns: 1fr;
    }
    .spotlight-content {
        padding: 28px;
    }
    .press-contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .press-contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .media-hero-title {
        font-size: 2.3rem;
    }
    .media-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .media-press-contact-box {
        padding: 28px 22px;
    }
    .press-contact-title {
        font-size: var(--text-lg);
    }
}



/* Service video card: the thumbnail is the link now, so it needs the pointer
   and the play badge has to sit above the image without being a button of its
   own. */
.video-preview-thumb {
    display: block;
    cursor: pointer;
}

.video-preview-thumb:hover .v-play-center-btn,
.video-preview-thumb:focus-visible .v-play-center-btn {
    background: #DC2626;
    transform: translate(-50%, -50%) scale(1.06);
}

.v-play-center-btn {
    color: var(--color-bg-white);
}

.v-eyebrow {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-teal-dark);
    margin-bottom: 8px;
}

/* =========================================================
   PHASE 4 — rules the templates asked for and never had
   Each of these classes is written in a template but was
   never defined, so the element rendered with nothing on it
   while its siblings were styled.
   ========================================================= */

/* Two tint utilities the specialty-services page uses. Every other tint in
   this family exists; these two were missed, so a cyan and a mint icon circle
   rendered with a transparent backing beside fully tinted neighbours. */
.bg-cyan-tint { background-color: var(--color-cyan-light); }
.bg-mint-tint { background-color: var(--color-mint-light); }

/* The conditions-treated page writes its pill icons as .icon-*-tint rather
   than .bg-*-tint, so all three rendered untinted. Same values as the
   bg- family they were meant to match. */
.icon-blue-tint   { background-color: var(--color-blue-light); }
.icon-teal-tint   { background-color: var(--color-teal-light); }
.icon-purple-tint { background-color: var(--color-purple-light); }

/* The 404 page's two buttons. .btn gave them their shape, but .btn-primary and
   .btn-outline had no rules at all, so both rendered as plain padded text with
   no background and no border — on the page visitors reach from a broken link
   or a stale search result. Matched to the site's existing button treatments. */
.btn-primary {
    background: var(--color-blue);
    color: var(--color-bg-white);
    border: 1.5px solid var(--color-blue);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-white);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-border);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    border-color: var(--color-teal);
    color: var(--color-teal-dark);
    background: var(--color-teal-light);
}

/* Mega menu column icon — one per column, in the tinted circle the rest of
   the site uses. The columns already group the conditions; the icon just
   gives the eye a fixed point to scan down. Per-link icons on nineteen
   clinical terms would have been noise. */
.mega-col-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The condition video thumbnail is the link now, so it needs to behave like
   one, and the play badge sits over it rather than being its own anchor. */
.cdd-video-thumb-wrap {
    display: block;
    cursor: pointer;
}

.cdd-video-thumb-wrap .play-btn-circle {
    color: var(--color-primary);
    pointer-events: none;
}

.cdd-video-thumb-wrap:hover .play-btn-circle,
.cdd-video-thumb-wrap:focus-visible .play-btn-circle {
    background: #DC2626;
    color: var(--color-bg-white);
}

/* ---------------------------------------------------------------
   Booking card — three stacked calls to action, made to read as a
   set. They had arrived at three different paddings (12/18, 10/16,
   11/18), so the buttons stepped in and out by a pixel or two down
   the stack, and the two outlines carried equal weight with nothing
   to say which was the fallback.
   --------------------------------------------------------------- */
.cdd-booking-card .btn {
    padding: 12px 18px;
    border-radius: 10px;
    width: 100%;
}

/* Call leads. Timings is the considered alternative. WhatsApp is the
   quiet third option, so it drops to a hairline border. */
.cdd-booking-card .btn-whatsapp-outline {
    border-color: var(--color-border);
    color: var(--color-text-body);
}

.cdd-booking-card .btn-whatsapp-outline:hover,
.cdd-booking-card .btn-whatsapp-outline:focus-visible {
    border-color: var(--color-mint);
    color: #047857;
}

/* The three clinic pins were tinted blue, purple and orange. Nothing on
   the site colour-codes the locations, so the colour said nothing and
   pulled the eye away from the buttons underneath. One calm treatment. */
.cdd-booking-card .loc-pin-icon {
    background-color: var(--color-teal-light);
    color: var(--color-teal-dark);
}

/* ---------------------------------------------------------------
   Mobile drawer stacking.
   The drawer sat at z-index 2000 while the chat launcher (9998) and
   the bottom action bar (9999) floated above it, covering the lower
   part of the open menu — the drawer's own "Book Appointment" button
   included. The drawer now outranks both, and both stand down while
   it is open, since the drawer offers the same actions.
   --------------------------------------------------------------- */
.mobile-drawer {
    z-index: 10000;
}

body.drawer-open .mobile-bottom-actions,
body.drawer-open #ap-chatbot-launcher,
body.drawer-open .floating-whatsapp-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Contact: OPD timings card ─────────────────────────────────────────────
   Replaces the decorative consultation photo in the contact hero. Four rows,
   one per location, each carrying the days, the hours and its own booking
   link — the three things a visitor is on this page to find. */
.contact-timings-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.contact-timings-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.contact-timings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.contact-timing-row {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr auto;
    align-items: center;
    column-gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
}

.contact-timing-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ct-place {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.ct-where {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.ct-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-days {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ct-hours {
    font-size: var(--text-sm);
    color: var(--color-text-main);
    line-height: 1.35;
}

.ct-extra {
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
}

/* The booking link is the row's action, so it keeps a 40px target rather than
   sitting at text height. */
.ct-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    /* Transparent border matches .ct-book-quiet's 1.5px, so the solid and
       outline variants are exactly the same height. */
    border: 1.5px solid transparent;
    /* Brand teal, not the navy primary — at #0E2342 four of these read as
       black blocks. teal-dark holds 5.32:1 with white and matches the
       Today pill. */
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.ct-book:hover {
    background: var(--color-teal-darker, #00655A);
    color: var(--color-bg-white);
}

@media (max-width: 600px) {
    .contact-timings-card {
        padding: 18px 16px;
    }

    .contact-timing-row {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
    }

    .ct-place {
        grid-column: 1;
    }

    .ct-when {
        grid-column: 1;
        grid-row: 2;
    }

    .ct-book {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* ── Mobile touch targets ──────────────────────────────────────────────────
   These three are the card links that are NOT .stretched-link, so the anchor
   itself is the whole tap area. At 21–22px tall they sit under the 24px
   WCAG 2.5.8 minimum on a phone. The padding is vertical only, so the text
   stays where it was; the sibling spacing already carries the gap. */
@media (max-width: 768px) {
    .article-card-link,
    .card-read-more-btn,
    .contact-loc-btn-link,
    .video-link-action,
    .btn-link-yt {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Breadcrumb links sit in their own row, not inside prose. */
    .cdd-breadcrumbs a,
    .cond-breadcrumbs a,
    .contact-breadcrumbs a,
    .media-breadcrumbs a,
    .sdp-breadcrumbs a,
    .team-breadcrumbs a,
    .article-breadcrumb a {
        display: inline-block;
        padding: 4px 0;
    }

    /* Hospital appointment numbers are tel: links inside a facts list — a
       tap target, not prose. */
    .contact-loc-facts a {
        display: inline-block;
        padding: 4px 0;
    }
}

/* Timings card, second pass. Four identical navy pills down the right made
   every clinic shout equally; the row that is actually open today now keeps
   the solid button and the rest step back to an outline. */
.contact-timings-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.contact-timings-head .contact-timings-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-timings-today {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.contact-timing-row {
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
    transition: background 0.2s ease;
}

/* No row tint: on a weekday three of the four clinics run, so tinting them
   made the highlight the norm and the signal disappeared. The Today tag
   carries it precisely, and the quiet button marks the one that is shut. */
.contact-timing-row.is-today {
    background: transparent;
}

.contact-timing-row.is-today .ct-name {
    color: var(--color-primary);
}

.ct-today-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}

/* Not-today rows: same size and position, quieter weight. */
/* Matches .ct-book box exactly — the solid variant gets a transparent
   border of the same width so the two never differ in height. */
.ct-book-quiet {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-border);
}

.ct-book-quiet:hover {
    background: var(--color-teal-dark);
    color: var(--color-bg-white);
    border-color: var(--color-teal-dark);
}

/* ── Contact: appointment form, now its own section ────────────────────────
   Constrained rather than full-bleed: a form is easier to complete in a
   single readable column than stretched across the container. */
.contact-form-section {
    padding: 10px 0 60px;
    background: var(--color-bg-page);
}

.contact-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ==========================================================================
   YouTube facades (inc/youtube.php) — sharp thumbnail, play button, player
   loads on click. Used in post frames, condition/service page content and
   default pages.
   ========================================================================== */
.ap-yt {
    position: relative;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    margin: 24px 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-primary);
    box-shadow: var(--shadow-subtle);
}

.ap-video-frame .ap-yt {
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.ap-yt-btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ap-yt-img,
.article-main-body .ap-yt-img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.ap-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(14, 35, 66, 0.82);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}

.ap-yt-play svg {
    margin-left: 4px;
}

.ap-yt-btn:hover .ap-yt-img,
.ap-yt-btn:focus-visible .ap-yt-img {
    transform: scale(1.03);
    filter: brightness(0.92);
}

.ap-yt-btn:hover .ap-yt-play,
.ap-yt-btn:focus-visible .ap-yt-play {
    background: #FF0000;
    transform: translate(-50%, -50%) scale(1.06);
}

.ap-yt-btn:focus-visible {
    outline: 3px solid var(--color-teal);
    outline-offset: -3px;
}

.ap-yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767px) {
    .ap-yt-play {
        width: 56px;
        height: 56px;
    }
}

/* Sub-labels and numbered sub-headings recovered from the imported list/bold
   markup by ankitparakh_format_rows(). */
.ap-sublabel {
    margin: 18px 0 8px;
    font-weight: 700;
    color: var(--color-primary);
}

.ap-subhead {
    margin: 30px 0 10px;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}

.ap-subhead:first-child {
    margin-top: 0;
}
/* Condition icons — the blue line illustrations from the live site's
   Conditions Treated page (ankitparakh_condition_icon()). One soft blue tile
   for all of them: the per-card teal/purple/pink tints clashed with a blue
   drawing. */
.cond-card-icon.has-icon-img {
    width: 60px;
    height: 60px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
}

.cond-card-icon .cond-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.cond-card-item:hover .cond-icon-img {
    transform: scale(1.08);
}

/* Related conditions list on a condition page: same icons, same tile. */
img.rel-thumb[src*="/uploads/2025/01/"] {
    object-fit: contain;
    padding: 6px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
}
/* ==========================================================================
   Booking location chooser (inc/booking.php). Every "Book Appointment" button
   that is not tied to one location opens this; each option books on that
   hospital's or clinic's own page.
   ========================================================================== */
.ap-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ap-booking-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 35, 66, 0.55);
}

.ap-booking-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: 28px 24px 22px;
    box-shadow: 0 24px 60px rgba(14, 35, 66, 0.25);
}

.ap-booking-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--color-border-light);
    color: var(--color-primary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ap-booking-title {
    margin: 0 0 6px;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.ap-booking-sub {
    margin: 0 0 18px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.ap-booking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-booking-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ap-booking-option:hover,
.ap-booking-option:focus-visible {
    border-color: var(--color-teal);
    background: #F0FDFA;
    transform: translateY(-1px);
}

.ap-booking-opt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ap-booking-opt-text strong {
    font-size: var(--text-base);
    color: var(--color-primary);
}

.ap-booking-opt-time {
    font-size: var(--text-xs);
    color: var(--color-teal-dark);
    font-weight: 600;
}

.ap-booking-opt-go {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-size: 16px;
}

body.ap-booking-open {
    overflow: hidden;
}

/* Condition page sidebar: the location rows are booking links now. */
a.clinic-loc-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease;
}

a.clinic-loc-link:hover,
a.clinic-loc-link:focus-visible {
    background: #F0FDFA;
}

a.clinic-loc-link .loc-meta {
    flex: 1;
}

.clinic-loc-go {
    color: var(--color-teal-dark);
    font-weight: 700;
    padding: 0 6px;
}

/* Chatbot: location links look like the other option buttons. */
.chat-book-link {
    text-decoration: none;
    color: #0A2540;
}
/* Service cards (home + Specialty Services): a square image box, so the
   square service illustrations are no longer cropped into a tall strip
   (service-img-wrap square). */
.service-img-wrap,
.svc-box-right {
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
    background: #F1F8F6;
}

.service-thumb,
.svc-box-thumb {
    object-fit: cover;
}
/* The chooser is shown/hidden with the hidden attribute; its display:flex
   above would otherwise override it, leaving the dialog open for good. */
.ap-booking-modal[hidden] {
    display: none !important;
}


/* ==========================================================================
   Colour utilities — the single definition of each.
   Text colours are all 4.5:1 or better on white and on their own tint.
   ========================================================================== */
.bg-teal-tint   { background-color: #E6F7F5 !important; }
.bg-blue-tint   { background-color: #EFF6FF !important; }
.bg-purple-tint { background-color: #F5F3FF !important; }
.bg-pink-tint   { background-color: #FDF2F8 !important; }
.bg-orange-tint { background-color: #FFF7ED !important; }
.bg-green-tint  { background-color: #ECFDF5 !important; }
.bg-gold-tint   { background-color: #FEF3C7 !important; }
.bg-cyan-tint   { background-color: #E6FAFA !important; }

.color-teal   { color: #00796B !important; }
.color-blue   { color: #0369A1 !important; }
.color-purple { color: #6D28D9 !important; }
.color-pink   { color: #BE185D !important; }
.color-orange { color: #C2410C !important; }
.color-green  { color: #047857 !important; }
.color-gold   { color: #B45309 !important; }
.color-cyan   { color: #0E7490 !important; }

.link-teal   { color: #00796B; }
.link-blue   { color: #0369A1; }
.link-purple { color: #6D28D9; }
.link-pink   { color: #BE185D; }
.link-red    { color: #BE123C; }
.link-orange { color: #C2410C; }
.link-green  { color: #047857; }
.link-gold   { color: #B45309; }
.link-cyan   { color: #0E7490; }

/* ==========================================================================
   Contrast fixes found by the colour audit.
   ========================================================================== */

/* Media page: teal label on the navy press card (2.2:1). */
.press-contact-sub { color: #5EEAD4; }

/* Blog: cyan label on the navy video banner (2.3:1). */
.bb-tag { color: #67E8F9; }

/* Video gallery appointment card: the light end of the gradient left white
   text at 3.4:1. */
.vg-side-appointment-card {
    background: linear-gradient(135deg, #0369A1 0%, var(--color-primary) 100%);
}

/* Count badge on the active category pill: white on a white wash (3.6:1). */
.vg-cat-pill.active-pill .vg-pill-count {
    background: rgba(14, 35, 66, 0.35);
    color: #FFFFFF;
}

/* Instagram button: small white label over the lightest gradient stops. */
.btn-instagram-gradient {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Condition page booking card — site colours.
   The call button was bright royal blue, the outline button sky blue and the
   doctor's name light cyan: none of them used anywhere else on the site,
   whose actions are teal and navy.
   ========================================================================== */
.cdd-booking-card {
    border-color: var(--color-border);
}

.doc-consult-sub strong {
    color: #5EEAD4;
}

.cdd-booking-card .btn-solid-blue {
    background: var(--color-teal-dark);
    color: #FFFFFF;
}

.cdd-booking-card .btn-solid-blue:hover,
.cdd-booking-card .btn-solid-blue:focus-visible {
    background: var(--color-teal-darker);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 121, 107, 0.28);
}

.cdd-booking-card .btn-outline-blue {
    background: #FFFFFF;
    color: var(--color-teal-dark);
    border-color: #99E0D6;
}

.cdd-booking-card .btn-outline-blue:hover,
.cdd-booking-card .btn-outline-blue:focus-visible {
    background: var(--color-teal-light);
    border-color: var(--color-teal-dark);
    color: var(--color-teal-darker);
}

/* ==========================================================================
   Specialty Services grid — image on top, text below, whole card is the link.
   ========================================================================== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.svc-card {
    --svc-accent: #00796B;
    --svc-accent-soft: #E6F7F5;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(14, 35, 66, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.svc-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--svc-accent);
    z-index: 1;
}

.svc-accent-blue   { --svc-accent: #0369A1; --svc-accent-soft: #EFF6FF; }
.svc-accent-purple { --svc-accent: #6D28D9; --svc-accent-soft: #F5F3FF; }
.svc-accent-pink   { --svc-accent: #BE185D; --svc-accent-soft: #FDF2F8; }
.svc-accent-orange { --svc-accent: #C2410C; --svc-accent-soft: #FFF7ED; }
.svc-accent-green  { --svc-accent: #047857; --svc-accent-soft: #ECFDF5; }

.svc-card:hover,
.svc-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--svc-accent);
    box-shadow: 0 16px 34px rgba(14, 35, 66, 0.12);
}

.svc-card:focus-visible {
    outline: 3px solid var(--svc-accent);
    outline-offset: 3px;
}

/* Many of these images are infographics with text in them, so the whole
   image is shown (contain) on a soft tint rather than cropped. */
.svc-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--svc-accent-soft);
    padding: 14px;
}

.svc-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.35s ease;
}

.svc-card:hover .svc-card-img {
    transform: scale(1.03);
}

.svc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

.svc-card-title {
    margin: 0 0 8px;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

.svc-card-desc {
    display: block;
    flex: 1;
    margin-bottom: 18px;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-body);
}

.svc-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--svc-accent);
}

.svc-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--svc-accent-soft);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.svc-card:hover .svc-card-arrow {
    background: var(--svc-accent);
    color: #FFFFFF;
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 575px) {
    .svc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .svc-card-body {
        padding: 18px;
    }
}

/* ==========================================================================
   Specialty Services grid — compact version.
   The image-on-top cards were tall (a 4:3 image block per card, fifteen of
   them). Each card is now one row: a small square thumbnail, the title and a
   two-line description, and an arrow.
   ========================================================================== */
.svc-grid {
    gap: 16px;
}

.svc-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(14, 35, 66, 0.04);
}

.svc-card::before {
    inset: 14px auto 14px 0;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.svc-card:hover::before,
.svc-card:focus-visible::before {
    opacity: 1;
}

.svc-card:hover,
.svc-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 35, 66, 0.10);
}

.svc-card-media {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    padding: 4px;
    border-radius: 14px;
    overflow: hidden;
}

.svc-card-img {
    object-fit: cover;
    border-radius: 10px;
}

.svc-card-body {
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

.svc-card-title {
    margin: 0 0 4px;
    font-size: var(--text-base);
    line-height: 1.3;
}

.svc-card-desc {
    flex: none;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Only the arrow shows; the card itself says where it goes. */
.svc-card-link {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
}

.svc-card-link > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.svc-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.svc-card-body {
    display: flex;
}

.svc-card-arrow {
    width: 32px;
    height: 32px;
}

@media (max-width: 575px) {
    .svc-card {
        padding: 12px;
    }
    .svc-card-media {
        width: 68px;
        height: 68px;
    }
}



/* ==========================================================================
   Conditions Treated grid — modern compact cards.
   Each card is one row: the condition icon on a soft gradient tile, the title
   and a two-line description, and a round arrow. Replaces the tall
   icon-on-top cards (16 of them, ~230px each, four across).
   ========================================================================== */
.cond-cards-grid-16 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cond-cards-grid-16 .cond-card-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 16px 16px 14px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(14, 35, 66, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cond-cards-grid-16 .cond-card-item:hover,
.cond-cards-grid-16 .cond-card-item:focus-within {
    transform: translateY(-3px);
    border-color: #7DD3C8;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 100%);
    box-shadow: 0 12px 28px rgba(14, 35, 66, 0.10);
}

.cond-cards-grid-16 .cond-card-icon,
.cond-cards-grid-16 .cond-card-icon.has-icon-img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: 16px;
    border: 1px solid #DBEAFE;
    background: linear-gradient(135deg, #EFF6FF 0%, #E6F7F5 100%);
}

.cond-cards-grid-16 .cond-icon-img {
    width: 40px;
    height: 40px;
}

.cond-cards-grid-16 .cond-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.3;
}

.cond-cards-grid-16 .cond-card-desc {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The link already stretches over the card; its arrow becomes a round button. */
.cond-cards-grid-16 .cond-card-link {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    color: var(--color-teal-dark);
}

.cond-cards-grid-16 .cond-card-link .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-size: var(--text-base);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cond-cards-grid-16 .cond-card-item:hover .cond-card-link .arrow {
    background: var(--color-teal-dark);
    color: #FFFFFF;
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .cond-cards-grid-16 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .cond-cards-grid-16 {
        grid-template-columns: minmax(0, 1fr);
    }
    .cond-cards-grid-16 .cond-card-item {
        padding: 14px 12px;
    }
    .cond-cards-grid-16 .cond-card-icon,
    .cond-cards-grid-16 .cond-card-icon.has-icon-img {
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   Logo wordmark (docs/Dr_Ankit_Parakh_Logo.svg): "Dr. Ankit" in navy,
   "Parakh" in teal, a hairline, then the tagline — all Montserrat.
   Colours come from Customize → Logo Colors (inc/customizer.php):
   --logo-title-color, --logo-lung-left (accent), --logo-lung-right (rule),
   --logo-subtitle-color.
   ========================================================================== */
.brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-decoration: none;
}

.wordmark-title {
    font-family: 'Montserrat', var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--logo-title-color, #0E2342);
}

.wordmark-accent {
    color: var(--logo-lung-left, #00796B);
}

.wordmark-rule {
    display: block;
    align-self: stretch;
    height: 1px;
    margin: 5px 0 4px;
    background: var(--logo-lung-right, #5D6C82);
    opacity: 0.55;
}

.wordmark-sub {
    font-family: 'Montserrat', var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--logo-subtitle-color, #5D6C82);
}

/* Mobile drawer: same wordmark, a touch smaller. */
.mobile-logo.brand-wordmark .wordmark-title {
    font-size: 1.25rem;
}

/* Footer: light version on the navy background, full tagline allowed to wrap. */
.footer-wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 12px;
}

.footer-wordmark .wordmark-title {
    font-size: 1.5rem;
    color: #FFFFFF;
}

.footer-wordmark .wordmark-accent {
    color: #5EEAD4;
}

.footer-wordmark .wordmark-rule {
    background: rgba(255, 255, 255, 0.28);
    opacity: 1;
    margin: 8px 0 6px;
}

.footer-wordmark .wordmark-sub {
    font-size: 0.75rem;
    white-space: normal;
    color: #CBD5E1;
}

@media (max-width: 480px) {
    .site-branding .wordmark-title {
        font-size: 1.2rem;
    }
    .site-branding .wordmark-sub {
        font-size: 0.625rem;
    }
}

/* ==========================================================================
   Blog sidebar "Consultation Centers": each centre is a booking link row —
   colour dot, name and area, round arrow. The links had no layout of their
   own, so the arrow dropped onto its own line and the dots disappeared.
   ========================================================================== */
.clinics-widget-card .clinics-mini-list {
    gap: 4px;
}

.clinics-widget-card .clinic-mini-item {
    display: block;
}

.clinic-mini-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}

.clinic-mini-link:hover,
.clinic-mini-link:focus-visible {
    background: #F0FAF8;
}

.clinic-mini-link .c-indicator {
    margin-top: 0;
}

.clinic-mini-link > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.clinic-mini-item .clinic-mini-link .clinic-loc-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-size: 0.875rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.clinic-mini-link:hover .clinic-loc-go,
.clinic-mini-link:focus-visible .clinic-loc-go {
    background: var(--color-teal-dark) !important;
    color: #FFFFFF !important;
}

/* Footer logo: "Parakh" in the footer's own teal (its tagline line and column
   underlines), not a different aqua. */
.footer-wordmark .wordmark-accent {
    color: #00A896;
}

/* ==========================================================================
   Internal links (inc/interlinks.php)
   ========================================================================== */

/* Blog post: related conditions & services */
.article-main-body > .ap-rel-pages,
.article-main-body > .ap-rel-posts {
    max-width: 100%;
}

.ap-rel-pages {
    margin-top: 32px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F0FAF8 100%);
}

.article-main-body .ap-rel-title,
.ap-rel-title {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

.ap-rel-pages-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ap-rel-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--color-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ap-rel-page:hover,
.ap-rel-page:focus-visible {
    border-color: #7DD3C8;
    box-shadow: 0 6px 16px rgba(14, 35, 66, 0.08);
    transform: translateY(-1px);
}

.ap-rel-type {
    grid-column: 1;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-teal-dark);
}

.ap-rel-service .ap-rel-type {
    color: #0369A1;
}

.ap-rel-name {
    grid-column: 1;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.35;
}

.ap-rel-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.ap-rel-page:hover .ap-rel-arrow {
    background: var(--color-teal-dark);
    color: #FFFFFF;
}

/* Author bio: booking button + link to the doctor's page */
.bio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.bio-more-link {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-decoration: none;
}

.bio-more-link:hover,
.bio-more-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.doc-profile-link {
    display: inline-block;
    border-radius: 50%;
}

.doc-name-link {
    color: inherit;
    text-decoration: none;
}

.doc-name-link:hover,
.doc-name-link:focus-visible {
    color: var(--color-teal-dark);
}

/* Related article cards: blog posts and condition/service pages */
.ap-rel-posts {
    margin-top: 32px;
}

.ap-rel-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ap-rel-posts-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ap-rel-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--color-primary);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ap-rel-post:hover,
.ap-rel-post:focus-visible {
    transform: translateY(-3px);
    border-color: #7DD3C8;
    box-shadow: 0 12px 26px rgba(14, 35, 66, 0.10);
}

.ap-rel-post-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #EFF6FF 0%, #E6F7F5 100%);
    overflow: hidden;
}

.ap-rel-post-media img,
.article-main-body .ap-rel-post-media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.35s ease;
}

.ap-rel-post:hover .ap-rel-post-media img {
    transform: scale(1.04);
}

.ap-rel-post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}

.ap-rel-post-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ap-rel-post-title {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-rel-post-more {
    margin-top: auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-teal-dark);
}

/* Condition / service page section */
.ap-page-articles {
    padding: 48px 0 56px;
    background: #F8FAFC;
    border-top: 1px solid var(--color-border-light);
}

.ap-page-articles-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ap-page-articles-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.ap-page-articles-all {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal-dark);
    text-decoration: none;
    white-space: nowrap;
}

.ap-page-articles-all:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991px) {
    .ap-rel-posts-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ap-rel-pages-grid,
    .ap-rel-posts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ap-page-articles-title {
        font-size: var(--text-xl);
    }
}

@media (max-width: 575px) {
    .ap-rel-posts-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Related article cards — compact: small square thumbnail on the left, date,
   two-line title and a link on the right. Used under blog posts and on
   condition/service pages. */
.ap-rel-posts-grid,
.ap-rel-posts-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ap-rel-posts .ap-rel-posts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.ap-rel-post {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 14px;
}

.ap-rel-post-media {
    width: 88px;
    height: 88px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
}

.ap-rel-post-body {
    gap: 4px;
    padding: 0 6px 0 0;
}

.ap-rel-post-title {
    -webkit-line-clamp: 2;
}

.ap-rel-post-more {
    margin-top: 2px;
    font-size: 0.78rem;
}

@media (min-width: 1100px) {
    .ap-page-articles .ap-rel-posts-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ap-rel-posts-grid,
    .ap-rel-posts-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }
    .ap-rel-post {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .ap-rel-post-media {
        width: 72px;
        height: 72px;
    }
}

.ap-page-articles {
    padding: 36px 0 40px;
}

.ap-page-articles-title {
    font-size: var(--text-xl);
}

/* ==========================================================================
   Blog featured image.
   The frame was the full article width at 480px tall with the image set to
   "contain", so square and portrait graphics sat in wide empty bands and the
   rounded corners never touched the picture. Now the same image, blurred,
   fills the frame, and the real image sits centred on it with its own
   rounded corners and shadow.
   ========================================================================== */
.single-featured-image-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: none;
    height: clamp(260px, 42vw, 460px);
    padding: 18px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, #EAF4F8 0%, #E6F7F5 100%);
    box-shadow: var(--shadow-card);
    isolation: isolate;
}

.single-featured-image-box::before {
    content: "";
    position: absolute;
    inset: -40px;
    background-image: var(--feat-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.1);
    opacity: 0.45;
    z-index: -1;
}

.single-featured-image-box .single-feat-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(14, 35, 66, 0.18);
}

@media (max-width: 767px) {
    .single-featured-image-box {
        height: auto;
        max-height: 420px;
        padding: 12px;
    }
    .single-featured-image-box .single-feat-img {
        max-height: 396px;
        border-radius: 12px;
    }
}

/* Condition pages, "Expert Care for Every Breath": rounded doctor photo. */
.expert-care-doc-photo .doc-cutout-img {
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(14, 35, 66, 0.14);
}

/* ==========================================================================
   Footer menus — five columns: brand, Explore (+ Media), Conditions,
   Services, Clinic Locations.
   ========================================================================== */
.footer-grid {
    grid-template-columns: 1.35fr 0.9fr 0.9fr 1fr 1.05fr;
    gap: 32px;
}

.footer-col-subtitle {
    margin: 18px 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links .footer-links-all a {
    margin-top: 4px;
    font-weight: 700;
    color: #5EEAD4;
}

.footer-links .footer-links-all a:hover {
    color: #FFFFFF;
}

.footer-clinic-link {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-clinic-link:hover strong,
.footer-clinic-link:focus-visible strong {
    color: #5EEAD4;
}

.footer-clinic-link strong {
    transition: color 0.2s ease;
}

@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }
    .footer-grid .footer-col-about {
        grid-column: 1 / -1;
    }
}

/* Condition page booking card: the head was solid navy — heavier than the rest
   of the card and of the page. A soft tint with navy text sits better and keeps
   the teal accent on the doctor's name. */
.cdd-booking-card-head {
    background: linear-gradient(135deg, #E6F7F5 0%, #EAF4FB 100%);
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.cdd-booking-card-head .head-top-row h3 {
    color: var(--color-primary);
}

.cdd-booking-card-head .head-top-row svg {
    stroke: var(--color-teal-dark);
}

.cdd-booking-card .doc-consult-sub {
    color: var(--color-text-muted);
}

.cdd-booking-card .doc-consult-sub strong {
    color: var(--color-teal-dark);
}

/* Section rhythm around "Related articles" on condition and service pages.
   The band above ends with 50px of padding and this one opened with 36px, so
   the space above it read much larger than the space below. The section that
   precedes it tightens up, this one is symmetric, and the closing strip gets
   a little more room. */
.ap-page-articles {
    padding: 44px 0;
}

main > section:has(+ .ap-page-articles),
main > div:has(+ .ap-page-articles) {
    padding-bottom: 28px;
}

.cdd-bottom-safety-strip,
.sdp-bottom-banner {
    padding-top: 22px;
    padding-bottom: 22px;
}

/* =========================================================
   IN-CONTENT IMAGE ZOOM (assets/js/main.js)
   ========================================================= */
.sdp-rich-text img,
.ap-item-body img,
.cdd-overview-content img,
.article-main-body img,
.page-content img {
    cursor: zoom-in;
}

.ap-img-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 20, 35, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    overflow: auto;
}

.ap-img-zoom-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Capped at 100% of a phone's width, the "zoomed" image would render at
   the same effective size it already had in the card \u2014 no legibility gain.
   It renders at its own natural pixel size instead (so a 652px infographic
   is 652 CSS px here even on a 375px screen), capped so nothing enormous
   balloons past a readable size; the overlay scrolls for the part that
   doesn't fit, and the page's own viewport meta allows the browser's
   native pinch-zoom on top of that. */
.ap-img-zoom-img {
    /* No vw-based cap: on a 375px phone, min(90vw,700px) is still only
       ~337px \u2014 essentially the same size the image already had in its
       card. The point of this view is to exceed the viewport and let the
       overlay's own scroll (and the browser's native pinch-zoom) cover
       the rest. */
    max-width: 700px;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    cursor: zoom-out;
    margin: auto;
}

.ap-img-zoom-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.ap-img-zoom-open {
    overflow: hidden;
}