/* source-sans-3-cyrillic-ext-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/source-sans-3-cyrillic-ext-400-normal.woff) format('woff');*/
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* source-sans-3-cyrillic-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-cyrillic-400-normal.woff2) format('woff2'), url(./files/source-sans-3-cyrillic-400-normal.woff) format('woff');*/
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* source-sans-3-greek-ext-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-greek-ext-400-normal.woff2) format('woff2'), url(./files/source-sans-3-greek-ext-400-normal.woff) format('woff');*/
    unicode-range: U+1F00-1FFF;
}

/* source-sans-3-greek-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-greek-400-normal.woff2) format('woff2'), url(./files/source-sans-3-greek-400-normal.woff) format('woff');*/
    unicode-range: U+0370-03FF;
}

/* source-sans-3-vietnamese-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-vietnamese-400-normal.woff2) format('woff2'), url(./files/source-sans-3-vietnamese-400-normal.woff) format('woff');*/
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* source-sans-3-latin-ext-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-latin-ext-400-normal.woff2) format('woff2'), url(./files/source-sans-3-latin-ext-400-normal.woff) format('woff');*/
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* source-sans-3-latin-400-normal */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /*src: url(./files/source-sans-3-latin-400-normal.woff2) format('woff2'), url(./files/source-sans-3-latin-400-normal.woff) format('woff');*/
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/************************************************new*/
.sdh-home {
    --charcoal: #32323a;
    --orange: #E8681A;
    --orange-light: #fdeee4;
    --accent: #E8681A;
    --text: #2e2e35;
    --muted: #6a6a75;
    --white: #ffffff;
    --border: #e6e6ec;
    /* derived helpers */
    --charcoal-2: #3c3c45;
    --orange-dark: #C2540E;
    --shadow-sm: 0 2px 10px rgba(50, 50, 58, .06);
    --shadow-md: 0 12px 30px rgba(50, 50, 58, .10);
    --shadow-lg: 0 22px 50px rgba(50, 50, 58, .14);
    --radius: 16px;
    --radius-lg: 24px;
    --container: 1200px;
    --font-head: "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /*    //////why choose us////////*/
}

    .sdh-home, .sdh-home *, .sdh-home *::before, .sdh-home *::after {
        box-sizing: border-box;
    }

        .sdh-home :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) {
            margin: 0;
            padding: 0;
        }

        .sdh-home :where(ul, ol) {
            list-style: none;
        }

.sdh-home {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

    .sdh-home img {
        max-width: 100%;
        display: block;
    }

    .sdh-home a {
        color: inherit;
        text-decoration: none;
    }

    .sdh-home :where(h1, h2, h3, h4) {
        font-family: var(--font-head);
        color: var(--charcoal);
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -.01em;
    }

.sdh-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 22px;
}


.sdh-home section {
    padding: 38px 0;
    position: relative;
    scroll-margin-top: 24px;
}

/* ---------- reusable bits ---------- */
.sdh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange-light);
    color: var(--orange);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

    .sdh-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--orange);
    }

.sdh-sec-head {
    max-width: 720px;
    margin: 0 auto 52px;
    text-align: center;
}

    .sdh-sec-head h2 {
        font-size: clamp(1.7rem, 3.4vw, 2.5rem);
        margin-bottom: 14px;
    }

    .sdh-sec-head p {
        color: var(--muted);
        font-size: 1.03rem;
    }

.sdh-hl {
    color: var(--orange);
}

.sdh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 400;
    font-size: .95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: .25s ease;
    font-family: var(--font-body);
    white-space: nowrap;
}

    .sdh-btn svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

.sdh-btn-dark {
    background: var(--charcoal);
    color: var(--white) !important;
}

    .sdh-btn-dark:hover {
        background: #26262d;
        transform: translateY(-2px);
    }

.sdh-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: .3s ease;
}

    .sdh-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: rgba(232, 104, 26,.4);
    }

.sdh-grid {
    display: grid;
    gap: 24px;
}

.sdh-g-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sdh-g-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sdh-g-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ---------- 2. ABOUT ---------- */
.sdh-about {
    background: #fbfbfd;
}

    .sdh-about .sdh-container {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 56px;
        align-items: center;
        max-width: 1500px;
    }

.sdh-about-media {
    position: relative;
}

    .sdh-about-media .sdh-main-img {
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }

        .sdh-about-media .sdh-main-img img {
            height: 440px;
            width: 100%;
            object-fit: cover;
        }

    .sdh-about-media .sdh-sec-img {
        position: absolute;
        right: -24px;
        bottom: -34px;
        width: 210px;
        border-radius: 18px;
        overflow: hidden;
        border: 6px solid var(--white);
        box-shadow: var(--shadow-md);
    }

        .sdh-about-media .sdh-sec-img img {
            height: 150px;
            width: 100%;
            object-fit: cover;
        }

.sdh-exp-badge {
    position: absolute;
    left: -22px;
    top: 28px;
    background: var(--orange);
    color: var(--white);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 16px 34px rgba(232, 104, 26,.4);
    text-align: center;
}

    .sdh-exp-badge b {
        display: block;
        font-family: var(--font-head);
        font-size: 1.9rem;
        line-height: 1;
    }

    .sdh-exp-badge span {
        font-size: .74rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .95;
    }

.sdh-about h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    margin-bottom: 16px;
}

.sdh-about p {
    color: var(--muted);
    margin-bottom: 16px;
    text-align: justify;
}

.sdh-about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin: 26px 0 28px;
}

    .sdh-about-features li {
        display: flex;
        gap: 11px;
        align-items: flex-start;
        font-size: .93rem;
        font-weight: 400;
        color: var(--charcoal);
    }

    .sdh-about-features svg {
        width: 21px;
        height: 21px;
        color: var(--orange);
        flex: none;
    }

    .sdh-about-features span {
        display: block;
        font-weight: 400;
        font-size: .82rem;
        color: var(--muted);
    }

.sdh-sign-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .sdh-sign-row .sdh-sign {
        border-left: 3px solid var(--orange);
        padding-left: 14px;
    }

        .sdh-sign-row .sdh-sign b {
            display: block;
            font-family: var(--font-head);
            color: var(--charcoal);
        }

        .sdh-sign-row .sdh-sign span {
            font-size: .82rem;
            color: var(--muted);
        }

/* ---------- 3. DEPARTMENTS ---------- */
.sdh-dept-card {
    overflow: hidden;
    padding: 0;
}

    .sdh-dept-card .sdh-img {
        height: 250px;
        overflow: hidden;
        position: relative;
    }

        .sdh-dept-card .sdh-img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: .5s;
        }

    .sdh-dept-card:hover .sdh-img img {
        transform: scale(1.06);
    }

    .sdh-dept-card .sdh-tag {
        position: absolute;
        left: 18px;
        top: 18px;
        background: rgba(50,50,58,.85);
        color: var(--white);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-weight: 400;
        padding: 7px 13px;
        border-radius: 999px;
        backdrop-filter: blur(4px);
    }

    .sdh-dept-card .sdh-body {
        padding: 26px 26px 28px;
    }

    .sdh-dept-card h3 {
        font-size: 1.32rem;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .sdh-dept-card h3 svg {
            width: 22px;
            height: 22px;
            color: var(--orange);
        }

    .sdh-dept-card p {
        color: var(--muted);
        font-size: .93rem;
        margin-bottom: 18px;
    }

.sdh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

    .sdh-chips span {
        font-size: .79rem;
        font-weight: 400;
        color: var(--charcoal);
        background: #f5f5f8;
        border: 1px solid var(--border);
        padding: 6px 12px;
        border-radius: 999px;
    }

.sdh-dept-card:hover .sdh-chips span {
    background: var(--orange-light);
    border-color: transparent;
    color: var(--orange);
}

.sdh-dept-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .87rem;
    font-weight: 400;
    color: var(--orange);
}

    .sdh-dept-link span {
        display: inline-block;
        transition: transform .25s;
    }

    .sdh-dept-link:hover span {
        transform: translateX(4px);
    }

/* ---------- 4. TREATMENTS ---------- */
.sdh-treatments {
    background: #fbfbfd;
}

.sdh-treat-card {
    padding: 28px 24px;
    border-radius: var(--radius);
}

    .sdh-treat-card .sdh-t-ico {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        background: var(--orange-light);
        color: var(--orange);
        transition: .3s;
    }

    .sdh-treat-card:hover .sdh-t-ico {
        background: var(--orange);
        color: var(--white);
    }

    .sdh-treat-card .sdh-t-ico svg {
        width: 26px;
        height: 26px;
    }

    .sdh-treat-card h3 {
        font-size: 1.02rem;
        margin-bottom: 8px;
    }

    .sdh-treat-card p {
        font-size: .87rem;
        color: var(--muted);
    }
/*===================================================*/
.physio-section {
    position: relative;
    padding: 60px 20px 70px;
    text-align: center;
    overflow: hidden;
    background-image: url('/Images/Home/physio-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

    .physio-section .ps-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(20,21,25,0.55) 0%, rgba(25,27,32,0.40) 40%, rgba(25,27,32,0.40) 60%, rgba(20,21,25,0.60) 100%), linear-gradient(90deg, rgba(20,21,25,0.25) 0%, rgba(20,21,25,0.00) 50%, rgba(20,21,25,0.25) 100%);
        z-index: 0;
    }

    .physio-section .ps-container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Badge */
    .physio-section .ps-badge {
        display: inline-block;
        background: linear-gradient(90deg, rgba(232, 104, 26,0.18), rgba(232, 104, 26,0.08));
        border: 1px solid rgba(232, 104, 26,0.40);
        border-radius: 999px;
        padding: 9px 24px;
        margin-bottom: 28px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .physio-section .ps-badge-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #E8681A;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
        box-shadow: 0 0 10px rgba(232, 104, 26,0.9);
    }

    .physio-section .ps-badge-text {
        color: #E8681A;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        vertical-align: middle;
    }

    /* Heading & subtitle */
    .physio-section .ps-title {
        font-size: 46px;
        font-weight: 400;
        line-height: 1.2;
        margin: 0 0 18px 0;
        color: #ffffff;
        text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    }

    .physio-section .ps-subtitle {
        max-width: 700px;
        margin: 0 auto 50px auto;
        color: #d0d3da;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Grid rows */
    .physio-section .ps-row {
        display: grid;
        gap: 24px;
        margin-bottom: 24px;
    }

    .physio-section .ps-row-1 {
        grid-template-columns: repeat(4, 1fr);
    }

    .physio-section .ps-row-2 {
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 0;
    }

    /* Card */
    .physio-section .ps-card {
        background: rgba(44,46,52,0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 28px 24px;
        text-align: left;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .physio-section .ps-card:hover {
            transform: translateY(-5px);
            border-color: rgba(232, 104, 26,0.5);
            box-shadow: 0 14px 36px rgba(0,0,0,0.35);
        }

        .physio-section .ps-card.ps-featured {
            box-shadow: 0 0 0 1px rgba(232, 104, 26,0.15), 0 10px 30px rgba(0,0,0,0.3);
        }

    .physio-section .ps-card-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, #f78138, #E8681A);
        border-radius: 14px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 18px;
        box-shadow: 0 6px 16px rgba(232, 104, 26,0.40);
    }

    .physio-section .ps-card-title {
        font-size: 19px;
        font-weight: 400;
        color: #ffffff;
        margin: 0 0 10px 0;
    }

    .physio-section .ps-card-desc {
        font-size: 15px;
        color: #b8bbc3;
        line-height: 1.65;
        margin: 0;
    }

    /* Bottom OPD bar */
    .physio-section .ps-opd-bar {
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid rgba(255,255,255,0.08);
        color: #c4c7cf;
        font-size: 15px;
    }

        .physio-section .ps-opd-bar strong {
            color: #ffffff;
        }

    .physio-section .ps-book-link {
        color: #E8681A;
        font-weight: 400;
        text-decoration: none;
        margin-left: 4px;
    }

        .physio-section .ps-book-link:hover {
            text-decoration: underline;
        }

/* ===== Responsive (all scoped) ===== */
@media (max-width: 992px) {
    .physio-section .ps-row-1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .physio-section .ps-row-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .physio-section .ps-title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .physio-section {
        padding: 40px 16px 55px;
        background-attachment: scroll;
    }

        .physio-section .ps-row-1,
        .physio-section .ps-row-2 {
            grid-template-columns: 1fr;
        }

        .physio-section .ps-title {
            font-size: 28px;
        }

        .physio-section .ps-subtitle {
            font-size: 14px;
            margin-bottom: 36px;
        }

        .physio-section .ps-badge-text {
            font-size: 11px;
            letter-spacing: 1.2px;
        }
}
/* ---------- 5. PROCESS ---------- */
/*.sdh-process {
    background: var(--charcoal);
    color: #e8e8ee;
}

    .sdh-process .sdh-sec-head h2 {
        color: var(--white);
    }

    .sdh-process .sdh-sec-head p {
        color: #b6b6c1;
    }

    .sdh-process .sdh-eyebrow {
        background: rgba(232, 104, 26,.18);
    }

.sdh-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.sdh-step {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius);
    padding: 26px 22px;
    transition: .3s;
}

    .sdh-step:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(232, 104, 26,.55);
        transform: translateY(-5px);
    }

    .sdh-step .sdh-num {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        background: var(--orange);
        color: var(--white);
        display: grid;
        place-items: center;
        font-family: var(--font-head);
        font-size: 1.05rem;
        margin-bottom: 16px;
        box-shadow: 0 10px 22px rgba(232, 104, 26,.35);
    }

    .sdh-step h3 {
        color: var(--white);
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .sdh-step p {
        font-size: .86rem;
        color: #b9b9c4;
    }

.sdh-steps + .sdh-steps {
    margin-top: 26px;
    grid-template-columns: repeat(3, 1fr);
}

.sdh-process-note {
    margin-top: 34px;
    text-align: center;
    font-size: .95rem;
    color: #cfcfd8;
}

    .sdh-process-note b {
        color: var(--white);
    }
*/
/* ---------- 6. WHY CHOOSE US ---------- */
.sdh-why .sdh-grid {
    gap: 22px;
}

.sdh-why-card {
    padding: 28px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .sdh-why-card .sdh-w-ico {
        width: 48px;
        height: 48px;
        flex: none;
        border-radius: 14px;
        background: var(--orange-light);
        color: var(--orange);
        display: grid;
        place-items: center;
    }

        .sdh-why-card .sdh-w-ico svg {
            width: 23px;
            height: 23px;
        }

    .sdh-why-card h3 {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .sdh-why-card p {
        font-size: .86rem;
        color: var(--muted);
    }

/* ---------- 7. DOCTORS ---------- */
.sdh-doctors {
    background: #fbfbfd;
}

.sdh-doc-card {
    overflow: hidden;
    padding: 0;
}

    .sdh-doc-card .sdh-photo {
        position: relative;
        height: 350px;
        overflow: hidden;
        background: var(--orange-light);
    }

        .sdh-doc-card .sdh-photo img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: top center;
            transition: .5s;
        }

    .sdh-doc-card:hover .sdh-photo img {
        transform: scale(1.05);
    }

    .sdh-doc-card .sdh-photo .sdh-reg {
        position: absolute;
        bottom: 12px;
        left: 12px;
        background: rgba(255,255,255,.94);
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 400;
        color: var(--charcoal);
        padding: 6px 12px;
    }

    .sdh-doc-card .sdh-body {
        padding: 22px 24px 26px;
    }

    .sdh-doc-card h3 {
        font-size: 1.18rem;
        margin-bottom: 3px;
    }

    .sdh-doc-card .sdh-role {
        color: var(--orange);
        font-size: .84rem;
        font-weight: 400;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sdh-doc-card .sdh-qual {
        font-size: .86rem;
        color: var(--muted);
        margin: 10px 0 14px;
    }

    .sdh-doc-card ul li {
        display: flex;
        gap: 9px;
        font-size: .86rem;
        color: var(--text);
        margin-bottom: 8px;
    }

    .sdh-doc-card ul svg {
        width: 17px;
        height: 17px;
        color: var(--orange);
        flex: none;
        margin-top: 3px;
    }

.sdh-doc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

    .sdh-doc-foot .sdh-timing {
        font-size: .8rem;
        color: var(--muted);
    }

        .sdh-doc-foot .sdh-timing b {
            color: var(--charcoal);
            display: block;
        }

    .sdh-doc-foot a {
        font-size: .85rem;
        font-weight: 400;
        color: var(--orange);
    }
/***************responsive img doctor */
/* Laptop */
@media (max-width: 1200px) {
    .sdh-doc-card .sdh-photo {
        height: 320px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .sdh-doc-card .sdh-photo {
        height: 300px;
    }
}

/* Small Tablet */
@media (max-width: 768px) {
    .sdh-doc-card .sdh-photo {
        height: 280px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .sdh-doc-card .sdh-photo {
        height: 250px;
    }
}

/* Small Mobile */
@media (max-width: 400px) {
    .sdh-doc-card .sdh-photo {
        height: 220px;
    }
}
/* ---------- 8. FACILITIES ---------- */
.sdh-fac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sdh-fac {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    transition: .3s;
}

    .sdh-fac:hover {
        border-color: rgba(232, 104, 26,.45);
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
    }

    .sdh-fac .sdh-f-ico {
        width: 46px;
        height: 46px;
        margin: 0 auto 13px;
        border-radius: 50%;
        background: var(--orange-light);
        color: var(--orange);
        display: grid;
        place-items: center;
    }

        .sdh-fac .sdh-f-ico svg {
            width: 22px;
            height: 22px;
        }

    .sdh-fac h3 {
        font-size: .93rem;
        margin-bottom: 5px;
    }

    .sdh-fac p {
        font-size: .77rem;
        color: var(--muted);
        line-height: 1.5;
    }

.sdh-fac-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 26px;
}

    .sdh-fac-strip .sdh-fs {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        height: 210px;
    }

        .sdh-fac-strip .sdh-fs img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: .5s;
        }

        .sdh-fac-strip .sdh-fs:hover img {
            transform: scale(1.07);
        }

        .sdh-fac-strip .sdh-fs span {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 34px 16px 13px;
            color: var(--white);
            font-size: .87rem;
            font-weight: 400;
            background: linear-gradient(transparent, rgba(50,50,58,.88));
        }

/* ---------- 9. TESTIMONIALS ---------- */
.sdh-testi {
    background: #fbfbfd;
}

.sdh-testi-card {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sdh-stars {
    display: flex;
    gap: 3px;
    color: var(--orange);
    margin-bottom: 14px;
}

    .sdh-stars svg {
        width: 17px;
        height: 17px;
    }

.sdh-testi-card p {
    font-size: .93rem;
    color: var(--text);
    margin-bottom: 18px;
}

    .sdh-testi-card p::before {
        content: "\201C";
        font-family: Georgia, serif;
        font-size: 2.4rem;
        color: var(--orange);
        line-height: 0;
        display: block;
        margin-bottom: 10px;
    }

.sdh-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

    .sdh-who .sdh-av {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--orange-light);
        color: var(--orange);
        display: grid;
        place-items: center;
        font-family: var(--font-head);
        font-weight: 400;
        flex: none;
    }

    .sdh-who b {
        display: block;
        font-size: .9rem;
        color: var(--charcoal);
    }

    .sdh-who span {
        font-size: .78rem;
        color: var(--muted);
    }

.sdh-testi-note {
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    margin-top: 22px;
}

/* ---------- 9. TESTIMONIALS (slider) ---------- */
.sdh-testi-slider {
    --per: 3;
    --tgap: 24px;
    position: relative;
}

.sdh-testi-viewport {
    overflow: hidden;
    padding: 6px 2px 12px;
    touch-action: pan-y;
    cursor: grab;
}

    .sdh-testi-viewport.sdh-grabbing {
        cursor: grabbing;
    }

.sdh-testi-track {
    position: relative;
    display: flex;
    gap: var(--tgap);
    transition: transform .6s cubic-bezier(.4, .02, .2, 1);
    will-change: transform;
}

.sdh-testi-slide {
    flex: 0 0 calc((100% - (var(--per) - 1) * var(--tgap)) / var(--per));
    display: flex;
}

    .sdh-testi-slide .sdh-testi-card {
        width: 100%;
        height: auto;
    }

        .sdh-testi-slide .sdh-testi-card:hover {
            transform: none;
        }

        .sdh-testi-slide .sdh-testi-card p {
            font-size: .92rem;
        }

/* no arrows / dots / progress bar by request � the row slides on its own and can
   still be dragged or swiped, or nudged with the left/right arrow keys. */
@media (max-width: 1080px) {
    .sdh-testi-slider {
        --per: 2;
    }
}

@media (max-width: 760px) {
    .sdh-testi-slider {
        --per: 1;
        --tgap: 16px;
    }
}


/* ---------- 10. STATS ---------- */
.sdh-stats {
    background: linear-gradient(120deg, var(--charcoal) 0%, #3d3d47 55%, #4a3a30 100%);
    color: var(--white);
    padding: 68px 0;
}

    .sdh-stats .sdh-grid {
        gap: 20px;
    }

.sdh-stats-grid {
    grid-template-columns: repeat(5, 1fr);
}

.sdh-stat {
    text-align: center;
    padding: 20px 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
}

    .sdh-stat b {
        display: block;
        font-family: var(--font-head);
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        color: var(--orange);
        line-height: 1;
    }

        .sdh-stat b i {
            font-style: normal;
            font-size: .6em;
        }

    .sdh-stat span {
        display: block;
        font-size: .85rem;
        color: #cfcfd8;
        margin-top: 8px;
    }

/* ---------- 11. GALLERY ---------- */
.sdh-gal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 168px;
    gap: 16px;
}

.sdh-gal {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--charcoal);
}

    .sdh-gal img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: .5s;
    }

    .sdh-gal:hover img {
        transform: scale(1.07);
    }

    .sdh-gal .sdh-cap {
        position: absolute;
        inset: auto 0 0 0;
        padding: 36px 14px 12px;
        color: var(--white);
        font-size: .84rem;
        font-weight: 400;
        background: linear-gradient(transparent, rgba(50,50,58,.9));
        transform: translateY(6px);
        opacity: 0;
        transition: .35s;
    }

    .sdh-gal:hover .sdh-cap {
        transform: translateY(0);
        opacity: 1;
    }

    .sdh-gal.sdh-wide {
        grid-column: span 2;
    }

    .sdh-gal.sdh-tall {
        grid-row: span 2;
    }

    .sdh-gal.sdh-tile {
        display: grid;
        place-items: center;
        text-align: center;
        color: var(--white);
        padding: 20px;
        background: linear-gradient(140deg, var(--orange), #f7913f);
    }

        .sdh-gal.sdh-tile b {
            display: block;
            font-family: var(--font-head);
            font-size: 1.9rem;
        }

        .sdh-gal.sdh-tile span {
            font-size: .84rem;
            opacity: .95;
        }

/* ---------- lightbox ---------- */
.sdh-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(30,30,36,.9);
    z-index: 200;
    display: none;
    place-items: center;
    padding: 30px;
}

    .sdh-lightbox.sdh-open {
        display: grid;
    }

    .sdh-lightbox img {
        max-width: 92vw;
        max-height: 84vh;
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
    }

    .sdh-lightbox button {
        position: absolute;
        top: 22px;
        right: 26px;
        background: var(--orange);
        color: var(--white);
        border: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        line-height: 1;
    }

/* =====================================================================
   MH BANNER SLIDER � built from scratch (no Slick / jQuery / Bootstrap)
   ---------------------------------------------------------------------
   - Track position is PERCENTAGE based (translate3d(-N%,0,0)),
     so resizing across breakpoints can never break the layout.
   - All theme styling of the old banner-section-fourteen has been
     replicated: typography sizes, highlight underline, stroked text,
     stat boxes, pill arrows, secondary button with circle hover.
   - Class prefix: .mh-banner__
   ===================================================================== */

/* ---------- section shell ---------- */
.mh-banner {
    --mhbn-primary: #32323a; /* charcoal */
    --mhbn-secondary: #E8681A; /* orange  */
    --mhbn-secondary-hover: #C2540E; /* orange-dark */
    --mhbn-ink: #2e2e35;
    --mhbn-font: "Hanken Grotesk", "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    position: relative;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fdeee4 0%, #ffffff 100%);
    font-family: var(--mhbn-font);
    /* fixed-header offset, same as template */
}

/* ---------- viewport / track / slides ---------- */
.mh-banner__viewport {
    position: relative;
    padding: 0;
    overflow: hidden;
    touch-action: pan-y; /* vertical page scroll stays native, horizontal drags are ours */
}

.mh-banner__track {
    display: flex;
    transition: transform .65s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

    .mh-banner__track.is-dragging {
        transition: none; /* finger-follow while swiping */
    }

.mh-banner__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%; /* flexbox iOS safety */
    min-height: 440px;
    display: flex;
    align-items: flex-end; /* content sits at the bottom, like the original */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* clones added by JS for the seamless loop are purely visual */

/* ---------- inner grid (self-contained, no bootstrap) ---------- */
.mh-banner__container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
}

.mh-banner__contentwrap {
    width: 100%;
}

@media (min-width: 992px) {
    .mh-banner__contentwrap {
        max-width: 58.33%;
    }
}
/* col-lg-7 */
@media (min-width: 1200px) {
    .mh-banner__contentwrap {
        max-width: 50%;
    }
}
/* col-xl-6  */

.mh-banner__content {
    padding: 52px 0;
}

    /* ---------- typography (matches banner-section-fourteen) ---------- */
    .mh-banner__content h1 {
        color: #ffffff;
        font-size: 64px;
        font-weight: 600;
        line-height: 1.12;
        margin: 0 0 8px;
    }

/* highlight text with underline bar */
.mh-banner__line {
    position: relative;
    display: inline-block;
    z-index: 1;
}

    .mh-banner__line::before {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 18px;
        background: rgba(232, 104, 26, .88);
        height: 14px;
        bottom: 4px;
        z-index: -1;
    }

/* outlined "ghost" text */
.mh-banner__stroke {
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(255, 255, 255, .92);
    -webkit-font-smoothing: antialiased;
}

.mh-banner__content p {
    font-size: 18px;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 30px;
}

/* ---------- stats row (banner-wrap / banner-item-two) ---------- */
/* ---------- button (btn-secondary + theme-14 circle hover) ---------- */
.mh-banner__btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 12px;
    background-color: var(--mhbn-secondary);
    border: 1px solid var(--mhbn-secondary);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: background-color .3s, border-color .3s, transform .3s;
}

    .mh-banner__btn i {
        margin-right: 8px;
        font-size: 20px;
    }

    .mh-banner__btn svg {
        width: 20px;
        height: 20px;
    }

    .mh-banner__btn::before,
    .mh-banner__btn::after {
        content: "";
        background: var(--mhbn-secondary-hover);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        transition: all .5s;
        z-index: -1;
    }

    .mh-banner__btn::before {
        left: 0;
        top: -18px;
    }

    .mh-banner__btn::after {
        right: 0;
        bottom: -18px;
    }

    .mh-banner__btn:hover,
    .mh-banner__btn:focus-visible {
        background-color: var(--mhbn-secondary-hover);
        border-color: var(--mhbn-secondary-hover);
        color: #fff;
        transform: translateY(-2px);
    }

        .mh-banner__btn:hover::before,
        .mh-banner__btn:hover::after,
        .mh-banner__btn:focus-visible::before,
        .mh-banner__btn:focus-visible::after {
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            border-radius: 12px;
        }

/* ---------- arrow pill (slide-btn / slick-arrow look) ---------- */
.mh-banner__nav {
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
    padding: 20px 15px;
}

.mh-banner__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--mhbn-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .4s, color .4s;
}

    .mh-banner__arrow svg {
        width: 22px;
        height: 22px;
    }

    .mh-banner__arrow:hover {
        background: var(--mhbn-secondary);
        color: #fff;
    }

    .mh-banner__arrow:focus-visible {
        outline: 2px solid var(--mhbn-secondary);
        outline-offset: 2px;
    }

/* ---------- dots ---------- */
.mh-banner__dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.mh-banner__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: width .3s, background-color .3s;
}

    .mh-banner__dot.is-active {
        width: 28px;
        background: var(--mhbn-secondary);
    }

    .mh-banner__dot:focus-visible {
        outline: 2px solid var(--mhbn-secondary);
        outline-offset: 2px;
    }

/* ---------- entrance animation (replaces wow.js fadeInUp) ---------- */
.mh-banner__content > * {
    opacity: 0;
}

.mh-banner__slide.is-active .mh-banner__content > * {
    animation: mhbnFadeUp .7s cubic-bezier(.22, .61, .36, 1) both;
}

    .mh-banner__slide.is-active .mh-banner__content > *:nth-child(1) {
        animation-delay: .12s;
    }

    .mh-banner__slide.is-active .mh-banner__content > *:nth-child(2) {
        animation-delay: .24s;
    }

    .mh-banner__slide.is-active .mh-banner__content > *:nth-child(3) {
        animation-delay: .36s;
    }

    .mh-banner__slide.is-active .mh-banner__content > *:nth-child(4) {
        animation-delay: .48s;
    }

/* used by JS when the loop silently jumps from a clone back to a real slide */
.mh-banner__slide.no-anim .mh-banner__content > * {
    animation: none !important;
    opacity: 1 !important;
}

@keyframes mhbnFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .mh-banner__track {
        transition: none;
    }

    .mh-banner__content > * {
        opacity: 1;
    }

    .mh-banner__slide.is-active .mh-banner__content > * {
        animation: none;
    }
}

/* =====================================================================
   RESPONSIVE � same breakpoints as the template
   ===================================================================== */
@media (max-width: 1399.98px) {
    .mh-banner__slide {
        min-height: 360px;
    }

    .mh-banner__content h1 {
        font-size: 58px;
    }
}

@media (max-width: 1199.98px) {
    .mh-banner__slide {
        min-height: 340px;
    }

    .mh-banner__content h1 {
        font-size: 52px;
    }
}

@media (max-width: 991.98px) {
    .mh-banner {
        padding: 1px 1px 0;
    }

    .mh-banner__slide {
        min-height: 380px;
    }

    .mh-banner__content {
        padding: 42px 0;
    }

        .mh-banner__content h1 {
            font-size: 46px;
        }

        .mh-banner__content p {
            font-size: 16px;
        }
}

@media (max-width: 767.98px) {
    .mh-banner {
        padding: 1px 1px 0;
    }

    .mh-banner__slide {
        min-height: 360px;
    }

    .mh-banner__content {
        padding: 34px 0;
        text-align: center;
    }

        .mh-banner__content h1 {
            font-size: 34px;
            margin-bottom: 12px;
        }




    .mh-banner__btn {
        display: inline-flex;
    }
    /* keep centered */

    /* arrows move below the slider, dots under them */
    /*  .mh-banner__nav {
        position: static;
        transform: none;
        flex-direction: row;
        display: inline-flex;
        padding: 8px;
        margin: 4px auto 0;
        left: auto;
    }*/

    .mh-banner__dots {
        /*        position: static;*/
        transform: none;
        justify-content: center;
        margin-top: 14px;
    }
}

@media (max-width: 575.98px) {
    .mh-banner__slide {
        min-height: 320px;
    }

    .mh-banner__content h1 {
        font-size: 28px;
    }

        .mh-banner__content h1 .mh-banner__line::before {
            height: 10px;
        }
}

/* ---------- additions required to sit inside the Shri Datta page ---------- */

/* HERO: no outer padding. The generic `.sdh-home section` rule (specificity
   0,1,1) would otherwise out-rank the plain `.mh-banner` (0,1,0) and add its
   84px top + bottom padding to the banner. Each slide carries its own inner
   padding, so the hero stays flush with whatever sits above and below it.
   This selector is 0,2,1 so it wins at every breakpoint.                      */
.sdh-home section.mh-banner {
    padding-top: 0;
    padding-bottom: 0;
}

.mh-banner,
.mh-banner__content h1,
.mh-banner__btn,
.mh-banner__eyebrow {
    font-family: var(--mhbn-font);
}

.mh-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mhbn-secondary);
    color: #fff;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 10px 24px rgba(232, 104, 26, .35);
}

.mh-banner__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* secondary button (the template used the class but shipped no styles) */
.mh-banner__btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

    .mh-banner__btn--outline::before,
    .mh-banner__btn--outline::after {
        background: #ffffff;
    }

    .mh-banner__btn--outline:hover,
    .mh-banner__btn--outline:focus-visible {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--mhbn-ink);
    }

/* mobile refinements (override the template's stacked-stat layout) */
@media (max-width: 767.98px) {
    .mh-banner__slide {
        min-height: 360px;
    }

    .mh-banner__content {
        padding: 34px 0 32px;
    }

        .mh-banner__content h1 {
            font-size: 30px;
            line-height: 1.14;
        }

        .mh-banner__content p {
            font-size: 15px;
            margin-bottom: 22px;
        }

    .mh-banner__eyebrow {
        font-size: .68rem;
        padding: 6px 12px;
        margin-bottom: 14px;
    }

    .mh-banner__nav {
        display: none;
    }





    .mh-banner__btn {
        padding: 12px 18px;
        font-size: 14px;
    }

    .mh-banner__dots {
        bottom: 16px;
    }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
    .sdh-about .sdh-container {
        grid-template-columns: 1fr;
        gap: 72px;
    }

    .sdh-about-media .sdh-main-img img {
        height: 380px;
    }

    .sdh-steps, .sdh-fac-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .sdh-steps + .sdh-steps {
            grid-template-columns: repeat(2, 1fr);
        }

    .sdh-g-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sdh-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .sdh-home section {
        padding: 62px 0;
    }

    .sdh-g-2, .sdh-g-3, .sdh-g-4, .sdh-steps, .sdh-steps + .sdh-steps, .sdh-fac-grid, .sdh-fac-strip, .sdh-about-features {
        grid-template-columns: 1fr;
    }

    .sdh-gal-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }

    .sdh-gal.sdh-wide {
        grid-column: span 2;
    }

    .sdh-gal.sdh-tall {
        grid-row: span 1;
    }

    .sdh-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sdh-stat:last-child {
        grid-column: span 2;
    }

    .sdh-about-media .sdh-sec-img {
        display: none;
    }
}
/**************************************************srvice */
/* =========================================================
   ORTHOPAEDIC SERVICES SECTION
   MAX CONTENT WIDTH: 1600px
   FULLY RESPONSIVE
   ========================================================= */

/* =========================
   GLOBAL BOX SIZING
   ========================= */

.os,
.os * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================
   MAIN SECTION
   ========================= */

.os {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient( 180deg, var(--white), color-mix(in srgb, var(--border) 26%, var(--white)) );
    font-family: var(--font-body);
    color: var(--text);
    padding: 72px 24px 64px;
    -webkit-font-smoothing: antialiased;
}


    /* =========================
   DECORATIVE BACKGROUND
   ========================= */

    .os::before,
    .os::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .os::before {
        width: 640px;
        height: 640px;
        right: -180px;
        top: -220px;
        background: radial-gradient( closest-side, rgba(232, 104, 26, 0.07), transparent 70% );
    }

    .os::after {
        width: 720px;
        height: 720px;
        left: -260px;
        bottom: -320px;
        background: radial-gradient( closest-side, rgba(50, 50, 58, 0.05), transparent 70% );
    }


/* =========================
   MAIN 1600px CONTAINER
   ========================= */

.os-wrap {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 1;
}


/* =========================================================
   HEADER
   ========================================================= */

.os header {
    text-align: center;
}

.os-badge {
    display: inline-block;
    background: var(--orange-light);
    color: var(--orange);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding: 9px 22px;
    border-radius: 999px;
}

.os h1 {
    margin: 18px auto 14px;
    font-family: var(--font-head);
    color: var(--charcoal);
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.15;
    max-width: 900px;
}

    .os h1 em {
        font-style: normal;
        color: var(--accent);
    }

.os-sub {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: var(--grey);
    font-size: 15.5px;
    line-height: 1.6;
}


/* =========================================================
   MAIN SERVICES GRID
   ========================================================= */

.os-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 520px) minmax(0, 1fr);
    gap: 50px;
    align-items: stretch;
    margin-top: 50px;
}


/* =========================================================
   SERVICE LIST
   ========================================================= */

ul.os-svc {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    height: 100%;
}


/* =========================================================
   SERVICE ITEM
   ========================================================= */

.os-svc li {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 72px;
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.os-svc-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--icon-bg);
    color: var(--orange);
    display: grid;
    place-items: center;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.os-svc li:hover .os-svc-icon {
    transform: scale(1.07);
    background: color-mix( in srgb, var(--orange) 18%, var(--white) );
    box-shadow: 0 10px 25px rgba(232, 104, 26, 0.12);
}

.os-svc-icon svg {
    width: 28px;
    height: 28px;
}


/* =========================================================
   SERVICE TEXT
   ========================================================= */

.os-svc h3 {
    font-family: var(--font-head);
    color: var(--charcoal);
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.3;
}

.os-svc p {
    margin-top: 5px;
    max-width: 330px;
    color: var(--grey);
    font-size: clamp(12px, 0.8vw, 13.5px);
    line-height: 1.5;
}


/* =========================================================
   CENTER COLUMN
   ========================================================= */

.os-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}


/* =========================================================
   15TH SERVICE
   ========================================================= */

ul.os-svc.os-svc-center {
    width: 100%;
    height: auto;
    justify-content: center;
}


/* =========================================================
   CENTER VISUAL
   ========================================================= */

.os-visual {
    position: relative;
    width: 100%;
    min-height: 660px;
}


/* =========================================================
   CENTER DISC
   ========================================================= */

.os-disc {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle at 34% 28%, var(--white) 0%, color-mix( in srgb, var(--border) 42%, var(--white) ) 52%, color-mix( in srgb, var(--border) 78%, var(--white) ) 100% );
    box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.65), 0 25px 70px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   DECORATIVE ARC
   ========================================================= */

.os-arc {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 535px;
    height: 535px;
    transform: translate(-50%, -50%);
    color: var(--accent);
    pointer-events: none;
}


/* =========================================================
   RUNNER IMAGE
   ========================================================= */

.os-visual img.os-runner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 455px;
    transform: translate(-63%, -50%);
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
}


/* =========================================================
   MOVE BETTER TEXT
   ========================================================= */

.os-move {
    position: absolute;
    left: 58%;
    top: 40%;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1.42;
    color: var(--muted);
    text-transform: uppercase;
}

    .os-move b {
        color: var(--accent);
    }


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.os-features {
    margin-top: 50px;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 26px 15px;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.os-feat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 20px;
    border-left: 1px solid var(--border);
    text-align: left;
}

    .os-feat:first-child {
        border-left: 0;
    }

    .os-feat svg {
        width: 36px;
        height: 36px;
        color: var(--accent);
        flex: none;
    }

    .os-feat h4 {
        font-family: var(--font-head);
        color: var(--charcoal);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    .os-feat p {
        margin-top: 3px;
        font-size: 12px;
        color: var(--grey);
    }


/* =========================================================
   CTA ROW
   ========================================================= */

.os-cta-row {
    position: relative;
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}


/* =========================================================
   BUTTON
   ========================================================= */

.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 999px;
    padding: 15px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .os-btn:hover {
        transform: translateY(-2px);
    }

    .os-btn svg {
        width: 19px;
        height: 19px;
        flex: none;
    }


    /* =========================================================
   PRIMARY BUTTON
   ========================================================= */

    .os-btn.os-primary {
        background: linear-gradient( 180deg, var(--orange), var(--orange-dark) );
        color: #fff;
        box-shadow: var(--shadow-md);
    }

        .os-btn.os-primary .os-chev {
            width: 15px;
            height: 15px;
        }


    /* =========================================================
   GHOST BUTTON
   ========================================================= */

    .os-btn.os-ghost {
        background: var(--white);
        color: var(--orange);
        box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var(--orange) 34%, var(--white) );
    }


/* =========================================================
   SCRIPT TEXT
   ========================================================= */

.os-script {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-46%) rotate(-7deg);
    font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive !important;
    font-size: 27px;
    line-height: 1.05;
    color: var(--orange);
    opacity: 0.92;
    pointer-events: none;
    white-space: nowrap;
}


/* =========================================================
   EXTRA LARGE DESKTOP
   1920px+
   ========================================================= */

@media (min-width: 1920px) {

    .os {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .os-wrap {
        max-width: 1600px;
    }

    .os-grid {
        grid-template-columns: 490px 520px 490px;
        gap: 50px;
    }

    .os-visual {
        min-height: 680px;
    }

    .os-disc {
        width: 520px;
        height: 520px;
    }

    .os-arc {
        width: 555px;
        height: 555px;
    }

    .os-visual img.os-runner {
        width: 470px;
    }

    .os-move {
        left: 58%;
        top: 40%;
        font-size: 22px;
    }

    .os-svc h3 {
        font-size: 17px;
    }

    .os-svc p {
        font-size: 13.5px;
    }

    .os-features {
        margin-top: 50px;
        padding: 26px 15px;
    }
}


/* =========================================================
   LARGE DESKTOP
   1440px - 1919px
   ========================================================= */

@media (min-width: 1440px) and (max-width: 1919px) {

    .os {
        padding-left: 40px;
        padding-right: 40px;
    }

    .os-wrap {
        max-width: 1500px;
    }

    .os-grid {
        grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
        gap: 50px;
        margin-top: 55px;
    }

    .os-visual {
        min-height: 660px;
    }

    .os-disc {
        width: 500px;
        height: 500px;
    }

    .os-arc {
        width: 535px;
        height: 535px;
    }

    .os-visual img.os-runner {
        width: 455px;
    }

    .os-svc li {
        min-height: 72px;
    }

    .os-svc-icon {
        width: 60px;
        height: 60px;
    }

        .os-svc-icon svg {
            width: 28px;
            height: 28px;
        }
}


/* =========================================================
   1200px - 1439px
   ========================================================= */

@media (min-width: 1121px) and (max-width: 1439px) {

    .os {
        padding-left: 30px;
        padding-right: 30px;
    }

    .os-grid {
        grid-template-columns: minmax(0, 1fr) 450px minmax(0, 1fr);
        gap: 30px;
    }

    .os-visual {
        min-height: 600px;
    }

    .os-disc {
        width: 420px;
        height: 420px;
    }

    .os-arc {
        width: 455px;
        height: 455px;
    }

    .os-visual img.os-runner {
        width: 390px;
    }

    .os-move {
        font-size: 18px;
        left: 58%;
    }

    .os-svc li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    .os-svc-icon {
        width: 52px;
        height: 52px;
    }

        .os-svc-icon svg {
            width: 24px;
            height: 24px;
        }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   1120px
   ========================================================= */

@media (max-width: 1120px) {

    .os {
        padding-left: 24px;
        padding-right: 24px;
    }

    .os-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    /*
       Center runner moves above
       the two service columns
    */

    .os-center {
        grid-column: 1 / -1;
        grid-row: 1;
        order: -1;
    }

    .os-visual {
        width: 100%;
        height: 560px;
        min-height: 0;
    }

    .os-script {
        display: none;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .os {
        padding: 60px 20px 55px;
    }

    .os-grid {
        gap: 35px 24px;
    }

    .os-features {
        grid-template-columns: 1fr 1fr;
        gap: 18px 0;
    }

    .os-feat:nth-child(3) {
        border-left: 0;
    }

    .os-visual {
        height: 480px;
    }

    .os-disc {
        width: 380px;
        height: 380px;
    }

    .os-arc {
        width: 410px;
        height: 410px;
    }

    .os-visual img.os-runner {
        width: 360px;
    }

    .os-move {
        font-size: 17px;
    }

    .os-svc li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        min-height: 65px;
    }

    .os-svc-icon {
        width: 50px;
        height: 50px;
    }

        .os-svc-icon svg {
            width: 24px;
            height: 24px;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .os {
        padding: 52px 18px 48px;
    }

    .os-wrap {
        max-width: 100%;
    }

    .os-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /*
       Center content becomes normal
       single-column content
    */

    .os-center {
        display: contents;
    }

    .os-visual {
        width: 100%;
        height: 420px;
        min-height: 0;
        order: -1;
    }

    ul.os-svc {
        gap: 22px;
    }

        ul.os-svc.os-svc-center {
            order: 1;
        }

    .os-disc {
        width: 310px;
        height: 310px;
    }

    .os-arc {
        width: 338px;
        height: 338px;
    }

    .os-visual img.os-runner {
        width: 300px;
    }

    .os-move {
        font-size: 16px;
        left: 60%;
        top: 40%;
    }

    .os-svc li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        min-height: 60px;
    }

    .os-svc-icon {
        width: 50px;
        height: 50px;
    }

        .os-svc-icon svg {
            width: 23px;
            height: 23px;
        }

    .os-svc h3 {
        font-size: 15px;
    }

    .os-svc p {
        font-size: 12px;
        max-width: 100%;
    }

    /* =========================
       FEATURE STRIP
       ========================= */

    .os-features {
        grid-template-columns: 1fr;
        padding: 10px 0;
        margin-top: 35px;
    }

    .os-feat {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 16px 22px;
        justify-content: flex-start;
    }

        .os-feat:first-child {
            border-top: 0;
        }

    /* =========================
       CTA
       ========================= */

    .os-cta-row {
        margin-top: 28px;
        width: 100%;
    }

    .os-btn {
        width: 100%;
        justify-content: center;
    }

    .os-script {
        display: none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .os {
        padding-left: 14px;
        padding-right: 14px;
    }

        .os h1 {
            font-size: 28px;
        }

    .os-sub {
        font-size: 14px;
    }

    .os-visual {
        height: 360px;
    }

    .os-disc {
        width: 270px;
        height: 270px;
    }

    .os-arc {
        width: 295px;
        height: 295px;
    }

    .os-visual img.os-runner {
        width: 260px;
    }

    .os-move {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .os-svc li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .os-svc-icon {
        width: 44px;
        height: 44px;
    }

        .os-svc-icon svg {
            width: 21px;
            height: 21px;
        }
}

p {
    font-size: 17px !important;
}

h3 {
    font-size: 18px !important;
}
/*****************************why choose us */
/*.sdh-home .sdh-wcu {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 8vw, 112px) 24px;
    background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)), url("/images/Home/why-choose-bg.jpg") center / cover no-repeat;
}

.sdh-home .sdh-wcu__container {
    width: min(var(--container), 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(500px, 1.03fr) minmax(510px, .97fr);
    gap: clamp(52px, 6vw, 82px);
    align-items: center;
}

.sdh-home .sdh-wcu__content {
    min-width: 0;
}

.sdh-home .sdh-wcu__eyebrow {
    margin: 0 0 10px;
    color: var(--orange);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sdh-home .sdh-wcu h1 {
    margin: 0;
    color: var(--charcoal);
    font-family: var(--font-head);
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: 1.06;
    letter-spacing: -.045em;
    font-weight: 600;
}

.sdh-home .sdh-wcu__intro {
    max-width: 650px;
    margin: 18px 0 34px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
}

.sdh-home .sdh-wcu__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px 34px;
    margin: 0 0 38px;
    padding: 0;
    list-style: none;
}

.sdh-home .sdh-wcu__feature {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
}

.sdh-home .sdh-wcu__check {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--orange);
    box-shadow: var(--shadow-sm);
}

    .sdh-home .sdh-wcu__check svg {
        width: 11px;
        height: 11px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sdh-home .sdh-wcu__actions {
    display: flex;
    align-items: center;
    gap: 24px 34px;
    flex-wrap: wrap;
}

.sdh-home .sdh-wcu__appointment {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 6px 8px 6px 25px;
    border-radius: 12px;
    color: var(--white);
    background: var(--orange);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: transform .18s ease, background .18s ease;
}

    .sdh-home .sdh-wcu__appointment:hover {
        transform: translateY(-2px);
        background: var(--orange-dark);
    }

.sdh-home .sdh-wcu__appointment-arrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--charcoal);
    background: var(--white);
}

    .sdh-home .sdh-wcu__appointment-arrow svg {
        width: 19px;
        height: 19px;
    }

.sdh-home .sdh-wcu__contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--charcoal);
    text-decoration: none;
}

.sdh-home .sdh-wcu__contact-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: var(--orange);
}

    .sdh-home .sdh-wcu__contact-icon svg {
        width: 35px;
        height: 35px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sdh-home .sdh-wcu__contact small {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.sdh-home .sdh-wcu__contact strong {
    display: block;
    color: var(--charcoal);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 400;
}

.sdh-home .sdh-wcu__appointment:focus-visible,
.sdh-home .sdh-wcu__contact:focus-visible {
    outline: 3px solid rgba(232, 104, 26, .35);
    outline-offset: 4px;
}

.sdh-home .sdh-wcu__visual {
    min-width: 0;
    height: 420px;
    display: grid;
    grid-template-columns: minmax(245px, 1fr) minmax(215px, .92fr);
    gap: 18px;
    align-self: center;
    align-items: stretch;
}

.sdh-home .sdh-wcu__doctor-card {
    position: relative;
    min-height: 0;
    height: 100%;
    overflow: visible;
    border-radius: var(--radius);
}

.sdh-home .sdh-wcu__doctor-image-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: var(--orange-light);
    box-shadow: var(--shadow-lg);
}

.sdh-home .sdh-wcu__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sdh-home .sdh-wcu__doctor-image {
    object-position: 50% 45%;
}

.sdh-home .sdh-wcu__doctor-image-wrap::after,
.sdh-home .sdh-wcu__care-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 68%, rgba(50, 50, 58, .22));
}

.sdh-home .sdh-wcu__specialist-badge {
    position: absolute;
    z-index: 3;
    top: 54%;
    left: -32px;
    right: auto;
    transform: translateY(-50%);
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    color: var(--charcoal);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
}

.sdh-home .sdh-wcu__specialist-icon {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--orange);
    background: var(--orange-light);
}

.sdh-home .sdh-wcu__specialist-badge svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sdh-home .sdh-wcu__hours {
    position: absolute;
    z-index: 3;
    left: 18px;
    right: 18px;
    bottom: 16px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--white);
    background: rgba(50, 50, 58, .82);
    backdrop-filter: blur(10px);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: .01em;
}

    .sdh-home .sdh-wcu__hours svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sdh-home .sdh-wcu__visual-side {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 96px minmax(0, 1fr);
    gap: 15px;
}

.sdh-home .sdh-wcu__trust-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--charcoal);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.sdh-home .sdh-wcu__trust-mark {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--orange);
    box-shadow: var(--shadow-sm);
}

    .sdh-home .sdh-wcu__trust-mark svg {
        width: 26px;
        height: 26px;
    }

.sdh-home .sdh-wcu__trust-card strong {
    display: block;
    color: var(--charcoal);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
}

.sdh-home .sdh-wcu__trust-card span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 400;
}

.sdh-home .sdh-wcu__care-image {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--orange-light);
    box-shadow: var(--shadow-lg);
}

    .sdh-home .sdh-wcu__care-image img {
        object-position: 54% 50%;
    }

@media (max-width: 1080px) {
    .sdh-home .sdh-wcu__container {
        grid-template-columns: 1fr;
        width: min(760px, 100%);
    }

    .sdh-home .sdh-wcu__visual {
        width: min(600px, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .sdh-home .sdh-wcu {
        padding: 58px 18px;
    }

    .sdh-home .sdh-wcu__eyebrow {
        font-size: 11px;
    }

    .sdh-home .sdh-wcu h1 {
        font-size: clamp(38px, 12vw, 50px);
    }

    .sdh-home .sdh-wcu__intro {
        margin-bottom: 29px;
    }

    .sdh-home .sdh-wcu__features {
        gap: 17px 18px;
    }

    .sdh-home .sdh-wcu__feature {
        font-size: 13px;
    }

    .sdh-home .sdh-wcu__visual {
        height: 370px;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .sdh-home .sdh-wcu__doctor-card {
        min-height: 0;
    }

    .sdh-home .sdh-wcu__visual-side {
        grid-template-rows: 86px minmax(0, 1fr);
        gap: 11px;
    }

    .sdh-home .sdh-wcu__trust-card {
        padding: 11px;
        gap: 9px;
    }

    .sdh-home .sdh-wcu__trust-mark {
        flex-basis: 36px;
        height: 36px;
    }

        .sdh-home .sdh-wcu__trust-mark svg {
            width: 21px;
            height: 21px;
        }

    .sdh-home .sdh-wcu__trust-card strong {
        font-size: 11px;
    }

    .sdh-home .sdh-wcu__trust-card span {
        font-size: 9px;
    }

    .sdh-home .sdh-wcu__specialist-badge {
        left: -18px;
        right: auto;
        min-width: 135px;
        padding: 11px;
        font-size: 10px;
    }

    .sdh-home .sdh-wcu__specialist-icon {
        flex-basis: 29px;
        height: 29px;
    }

    .sdh-home .sdh-wcu__hours {
        left: 9px;
        right: 9px;
        bottom: 9px;
        padding-inline: 8px;
        font-size: 9px;
    }
}

@media (max-width: 470px) {
    .sdh-home .sdh-wcu__features {
        grid-template-columns: 1fr;
    }

    .sdh-home .sdh-wcu__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .sdh-home .sdh-wcu__appointment {
        width: 100%;
        justify-content: space-between;
    }

    .sdh-home .sdh-wcu__visual {
        height: auto;
        grid-template-columns: 1fr;
    }

    .sdh-home .sdh-wcu__doctor-card {
        height: 390px;
        min-height: 0;
    }

    .sdh-home .sdh-wcu__visual-side {
        height: auto;
        grid-template-rows: 86px 250px;
    }

    .sdh-home .sdh-wcu__specialist-badge {
        left: 14px;
        right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdh-home *,
    .sdh-home *::before,
    .sdh-home *::after {
        transition-duration: .01ms !important;
    }why-choose-orthopedic-bg.jpg
}*/
/*=================================================why choose use dark===================*/
.sdh-home .sdh-wcu {
    position: relative;
    isolation: isolate;
    min-height: 580px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #10161a;
    background-image: linear-gradient(90deg, rgba(10, 16, 20, .32) 0%, rgba(10, 16, 20, .14) 54%, rgba(10, 16, 20, .03) 100%), url("/images/Home/why-choose-orthopedic-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .sdh-home .sdh-wcu::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(90deg, rgba(12, 18, 22, .18), transparent 70%);
        pointer-events: none;
    }

.sdh-home .sdh-wcu__container {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
    padding: 68px 0;
    display: grid;
    grid-template-columns: minmax(480px, 1.06fr) minmax(315px, .66fr) minmax(250px, .58fr);
    gap: clamp(46px, 5vw, 80px);
    align-items: center;
}

.sdh-home .sdh-wcu__content {
    min-width: 0;
}

.sdh-home .sdh-wcu__eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 24px;
    color: var(--orange);
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .19em;
    text-transform: uppercase;
}

    .sdh-home .sdh-wcu__eyebrow::before {
        content: "";
        flex: 0 0 48px;
        height: 2px;
        background: var(--orange);
    }

.sdh-home .sdh-wcu__title {
    margin: 0;
    color: var(--white);
    font-family: var(--font-head);
    font-size: clamp(42px, 3.65vw, 57px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 400;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .28);
}

.sdh-home .sdh-wcu__title-accent {
    display: block;
    margin-top: 5px;
    color: var(--orange);
}

.sdh-home .sdh-wcu__description {
    max-width: 570px;
    margin: 21px 0 28px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.65;
}

.sdh-home .sdh-wcu__actions {
    display: flex;
    align-items: center;
    gap: 17px;
    flex-wrap: wrap;
}

.sdh-home .sdh-wcu__button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 27px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .03);
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.sdh-home .sdh-wcu__button--primary {
    min-width: 226px;
    border-color: var(--orange);
    background: var(--orange);
    box-shadow: 0 10px 26px rgba(232, 104, 26, .24);
}

.sdh-home .sdh-wcu__button:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
    background: var(--orange-dark);
}

.sdh-home .sdh-wcu__button:focus-visible {
    outline: 3px solid rgba(232, 104, 26, .45);
    outline-offset: 4px;
}

.sdh-home .sdh-wcu__button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sdh-home .sdh-wcu__benefits {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdh-home .sdh-wcu__benefit {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .sdh-home .sdh-wcu__benefit:last-child {
        border-bottom: 0;
    }

.sdh-home .sdh-wcu__icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(232, 104, 26, .13);
    border-radius: 50%;
    color: var(--orange);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, .02);
}

    .sdh-home .sdh-wcu__icon svg {
        width: 35px;
        height: 35px;
        fill: currentColor;
    }

.sdh-home .sdh-wcu__benefit-title {
    display: block;
    margin: 0 0 5px;
    color: var(--white);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
}

.sdh-home .sdh-wcu__benefit-text {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, .61);
    font-size: 15px;
    line-height: 1.45;
}

.sdh-home .sdh-wcu__image-space {
    min-height: 1px;
    pointer-events: none;
}

.sdh-home .sdh-wcu__motto {
    position: absolute;
    z-index: 3;
    top: 147px;
    right: max(28px, calc((100% - 1460px) / 2));
    width: 126px;
    color: rgba(255, 255, 255, .86);
    font-family: "Segoe Print", "Bradley Hand", cursive !important;
    font-size: 21px;
    line-height: 1.45;
    font-weight: 400;
    text-align: center;
    transform: rotate(-5deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

    .sdh-home .sdh-wcu__motto::after {
        content: "";
        display: block;
        width: 58px;
        height: 2px;
        margin: 8px 6px 0 auto;
        background: var(--orange);
        transform: rotate(-8deg);
    }

.sdh-home .sdh-wcu__mission {
    position: absolute;
    z-index: 3;
    right: 32px;
    bottom: 68px;
    padding-right: 17px;
    border-right: 2px solid var(--orange);
    color: rgba(255, 255, 255, .55);
    font-size: 8px;
    line-height: 1.65;
    letter-spacing: .24em;
    text-align: right;
    text-transform: uppercase;
}

    .sdh-home .sdh-wcu__mission strong {
        display: block;
        color: rgba(255, 255, 255, .9);
        font-size: 9px;
        font-weight: 400;
    }

@media (max-width: 1260px) {
    .sdh-home .sdh-wcu__container {
        width: min(1160px, calc(100% - 48px));
        grid-template-columns: minmax(430px, 1fr) minmax(300px, .7fr) minmax(170px, .42fr);
        gap: 42px;
    }

    .sdh-home .sdh-wcu__motto,
    .sdh-home .sdh-wcu__mission {
        display: none;
    }
}

@media (max-width: 1020px) {
    .sdh-home .sdh-wcu {
        min-height: auto;
        background-position: 64% center;
    }

        .sdh-home .sdh-wcu::before {
            background: rgba(10, 16, 20, .56);
        }

    .sdh-home .sdh-wcu__container {
        width: min(850px, calc(100% - 48px));
        grid-template-columns: minmax(400px, 1fr) minmax(290px, .72fr);
        gap: 48px;
    }

    .sdh-home .sdh-wcu__image-space {
        display: none;
    }
}

@media (max-width: 760px) {
    .sdh-home .sdh-wcu {
        background-position: 70% center;
    }

        .sdh-home .sdh-wcu::before {
            background: rgba(10, 16, 20, .78);
        }

    .sdh-home .sdh-wcu__container {
        width: min(620px, calc(100% - 38px));
        padding: 64px 0;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .sdh-home .sdh-wcu__title {
        font-size: clamp(38px, 9vw, 50px);
    }

    .sdh-home .sdh-wcu__description {
        max-width: 600px;
    }

    .sdh-home .sdh-wcu__benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }

    .sdh-home .sdh-wcu__benefit {
        grid-template-columns: 54px 1fr;
    }

    .sdh-home .sdh-wcu__icon {
        width: 54px;
        height: 54px;
    }

        .sdh-home .sdh-wcu__icon svg {
            width: 28px;
            height: 28px;
        }
}

@media (max-width: 520px) {
    .sdh-home .sdh-wcu__container {
        width: calc(100% - 32px);
        padding: 54px 0;
    }

    .sdh-home .sdh-wcu__eyebrow {
        font-size: 11px;
        gap: 11px;
    }

        .sdh-home .sdh-wcu__eyebrow::before {
            flex-basis: 32px;
        }

    .sdh-home .sdh-wcu__title {
        font-size: 38px;
    }

    .sdh-home .sdh-wcu__description {
        font-size: 14px;
    }

    .sdh-home .sdh-wcu__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sdh-home .sdh-wcu__button {
        width: 100%;
    }

    .sdh-home .sdh-wcu__benefits {
        grid-template-columns: 1fr;
    }

    .sdh-home .sdh-wcu__benefit {
        padding-block: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdh-home *,
    .sdh-home *::before,
    .sdh-home *::after {
        transition-duration: .01ms !important;
    }
}
/*===========================why choose us dark section end =================*/
/* =========================================================
   SHRI DATTA HOSPITAL - BLOG SECTION
========================================================= */

.sdh-blog {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 80px 20px 90px;
    background: #ffffff;
    font-family: "Poppins", "Segoe UI", sans-serif;
    color: #16263f;
}

.blog-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 100%);
    margin: auto;
}

.sdh-cb__track {
    display: flex;
    gap: 24px;
}

.sdh-cb__card {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
}

/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.blog-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.blog-deco-left {
    width: 340px;
    height: 340px;
    left: -190px;
    top: 80px;
    border: 65px solid rgba(232, 104, 26, 0.07);
    border-radius: 50%;
}

    .blog-deco-left::after {
        content: "";
        position: absolute;
        width: 70px;
        height: 70px;
        right: -160px;
        top: -80px;
        background: rgba(232, 104, 26, 0.08);
        border-radius: 50%;
    }

.blog-deco-right {
    width: 250px;
    height: 250px;
    right: -150px;
    bottom: -100px;
    background: rgba(43, 126, 190, 0.06);
    border-radius: 50%;
}


/* =========================================================
   HEADER
========================================================= */

.blog-header {
    position: relative;
    text-align: center;
    margin-bottom: 48px;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #E8681A;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.5px;
}

    .blog-eyebrow span {
        display: inline-block;
        width: 42px;
        height: 2px;
        background: #E8681A;
        border-radius: 10px;
    }

.blog-header h2 {
    margin: 10px 0 8px;
    color: #142a48;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -1px;
}

    .blog-header h2 strong {
        color: #E8681A;
    }

.blog-header > p {
    width: min(650px, 100%);
    margin: auto;
    color: #62718a;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   SCRIPT TEXT
========================================================= */

.blog-script {
    position: absolute;
    right: -5px;
    top: 20px;
    color: rgba(232, 104, 26, 0.18);
    font-family: "Brush Script MT", "Segoe Script", cursive !important;
    font-size: 27px;
    line-height: 1.1;
    text-align: left;
    transform: rotate(-5deg);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(22, 38, 63, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 50px rgba(22, 38, 63, 0.13);
    }


/* =========================================================
   BLOG IMAGE
========================================================= */

.blog-image {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

    .blog-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.blog-card:hover .blog-image img {
    transform: scale(1.07);
}


/* =========================================================
   CATEGORY
========================================================= */

.blog-category {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    color: #E8681A;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 30px;
    font-size: 11px;
    font-weight: 400;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

    .blog-category i {
        font-size: 11px;
    }

.blog-category-blue {
    color: #126dc0;
}


/* =========================================================
   BLOG CONTENT
========================================================= */

.blog-content {
    padding: 23px 24px 26px;
}

.blog-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #748197;
    font-size: 12px;
}

    .blog-date i {
        color: #E8681A;
    }


/* =========================================================
   BLOG TITLE
========================================================= */

.blog-content h3 {
    margin: 0 0 12px;
    color: #142a48;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
}


/* =========================================================
   BLOG DESCRIPTION
========================================================= */

.blog-content p {
    margin: 0 0 20px;
    color: black;
    font-size: 12.5px;
    line-height: 1.75;
}


/* =========================================================
   READ MORE
========================================================= */

.blog-read {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #E8681A !important;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: gap 0.25s ease;
}

    .blog-read span {
        font-size: 20px;
        line-height: 1;
    }

    .blog-read:hover {
        gap: 17px;
    }


/* =========================================================
   BOTTOM INFORMATION AREA
========================================================= */

.blog-bottom {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr auto 1fr 1fr 1fr;
    align-items: center;
    margin-top: 55px;
    padding: 35px 38px;
    overflow: hidden;
    background: linear-gradient( 110deg, #f3f9fd 0%, #ffffff 55%, #f9fcff 100% );
    border-radius: 22px;
    border: 1px solid #eef3f7;
}


    /* Soft curved effect */

    .blog-bottom::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 180px;
        left: -200px;
        bottom: -150px;
        background: rgba(232, 104, 26, 0.07);
        border-radius: 50%;
    }


/* =========================================================
   BOTTOM HEADING
========================================================= */

.bottom-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #E8681A;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
}

    .bottom-eyebrow span {
        width: 35px;
        height: 2px;
        background: #E8681A;
    }

.blog-bottom-content h3 {
    margin: 0 0 10px;
    color: #27527f;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
}

    .blog-bottom-content h3 strong {
        color: #E8681A;
    }

.blog-bottom-content p {
    max-width: 390px;
    margin: 0;
    color: #65758a;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.blog-all-btn-wrap {
    display: flex;
    justify-content: center;
}

.blog-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 14px 24px;
    color: #ffffff;
    background: #E8681A;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(232, 104, 26, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .blog-all-btn span {
        font-size: 18px;
    }

    .blog-all-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(232, 104, 26, 0.30);
    }


/* =========================================================
   FEATURES
========================================================= */

.blog-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 25px;
}

    .blog-feature + .blog-feature {
        border-left: 1px solid #dce4eb;
    }

.feature-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E8681A;
    background: #fff0e5;
    border-radius: 50%;
    font-size: 20px;
}

.blog-feature h4 {
    margin: 0 0 5px;
    color: #173458;
    font-size: 13px;
    font-weight: 600;
}

.blog-feature p {
    margin: 0;
    color: #687990;
    font-size: 10.5px;
    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .sdh-blog {
        padding: 65px 20px;
    }

    .blog-script {
        display: none;
    }

    .blog-bottom {
        grid-template-columns: 1.5fr auto 1fr 1fr;
        gap: 25px;
    }

    .blog-feature:last-child {
        display: none;
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 800px) {

    .blog-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: auto;
    }

    .blog-image {
        height: 250px;
    }

    .blog-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        padding: 30px;
    }

    .blog-bottom-content {
        grid-column: 1 / -1;
    }

    .blog-all-btn-wrap {
        justify-content: flex-start;
    }

    .blog-feature {
        padding-left: 0;
    }

        .blog-feature + .blog-feature {
            border-left: none;
        }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 550px) {

    .sdh-blog {
        padding: 55px 15px 60px;
    }

    .blog-header {
        margin-bottom: 32px;
    }

    .blog-eyebrow {
        font-size: 10px;
    }

    .blog-header h2 {
        font-size: 30px;
    }

    .blog-header > p {
        font-size: 12px;
    }

    .blog-grid {
        gap: 18px;
    }

    .blog-image {
        height: 210px;
    }

    .blog-content {
        padding: 20px;
    }

        .blog-content h3 {
            font-size: 19px;
        }

    .blog-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
        margin-top: 35px;
    }

    .blog-bottom-content h3 {
        font-size: 23px;
    }

    .blog-all-btn-wrap {
        margin: 5px 0 10px;
    }

    .blog-feature {
        width: 100%;
        padding: 15px 0;
        border-top: 1px solid #e5ebf0;
    }

        .blog-feature + .blog-feature {
            border-top: 1px solid #e5ebf0;
        }
}

/* =====================================================================
   ONE-LINE HEADINGS & SUB-HEADINGS (home page)
   Text never wraps; the inline script in Index.cshtml shrinks the font
   only when a heading is wider than its box.
   ===================================================================== */
.sdh-home :is(h1, h2, h3, h4, h5, h6),
.sdh-home :is(.sdh-eyebrow, .mh-banner__eyebrow, .ps-badge-text, .blog-eyebrow, .sdh-wcu__benefit-title) {
    white-space: nowrap;
    max-width: 100%;
}

.sdh-home .sdh-wcu__benefit-title {
    display: block;
}

/* pieces that were forced onto their own line */
.sdh-home .sdh-wcu__title-accent {
    display: inline;
    margin-top: 0;
}

/* section heads: let the heading use the full container width, keep the intro text narrow */
.sdh-home .sdh-sec-head {
    max-width: none;
}

    .sdh-home .sdh-sec-head > p {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

/* banner: give the one-line title more room beside the image */
@media (min-width: 992px) {
    .mh-banner__contentwrap {
        max-width: 75%;
    }
}

@media (min-width: 1200px) {
    .mh-banner__contentwrap {
        max-width: 66%;
    }
}


/*===========================================
Why Choose Us
===========================================*/
/* ==========================================================================
     Shri Datta Hospital — "Trusted by Patients" section.
     NO-GLOBAL-FOOTPRINT CSS:
       • every class / id / token uses the unique `sdh-tbp-` prefix
       • every rule is scoped under `.sdh-tbp-section` (nothing leaks out,
         and site CSS can't accidentally override this section)
       • orange / white / font tokens inherit your site :root values when this
         section is embedded in Index.cshtml, and fall back to the DESIGN.md
         hex values when viewed standalone
     ========================================================================== */
.sdh-tbp-section {
    --sdh-tbp-orange: var(--orange, #E8681A);
    --sdh-tbp-orange-dark: var(--orange-dark, #C2540E);
    --sdh-tbp-orange-light: var(--orange-light, #fdeee4);
    --sdh-tbp-white: var(--white, #ffffff);
    --sdh-tbp-bg: #101010;
    --sdh-tbp-card: #151515;
    --sdh-tbp-card-border: #2b2b2b;
    --sdh-tbp-desc: #9b9ba4;
    --sdh-tbp-dot-idle: #3d3d3d;
    --sdh-tbp-font-head: var(--font-head, "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
    --sdh-tbp-font-body: var(--font-body, "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
    position: relative;
    overflow: hidden;
    padding: 88px 40px 90px;
    background: var(--sdh-tbp-bg);
    color: var(--sdh-tbp-white);
    font-family: var(--sdh-tbp-font-body);
    -webkit-font-smoothing: antialiased;
}
    /* targeted reset — only the elements this section actually uses, every rule
     scoped under .sdh-tbp-section. There is no universal `*` selector,
     no `body`, no `html` and no `:root` selector anywhere in this file. */
    .sdh-tbp-section h2,
    .sdh-tbp-section h3,
    .sdh-tbp-section p {
        margin: 0;
        padding: 0;
    }

    .sdh-tbp-section,
    .sdh-tbp-section div,
    .sdh-tbp-section article,
    .sdh-tbp-section button,
    .sdh-tbp-section img {
        box-sizing: border-box;
    }
/* demo-page only: `sdh-tbp-demo` never exists in _Layout.cshtml, so this
     rule is dead code once the section is embedded — safe to leave or delete */
.sdh-tbp-demo {
    margin: 0;
    background: #101010;
}

/* warm orange glow on the left (dark-section version of the reference aurora) */
.sdh-tbp-section::before {
    content: '';
    position: absolute;
    left: -110px;
    top: 60px;
    width: 220px;
    height: 480px;
    background: linear-gradient(180deg, var(--sdh-tbp-orange) 0%, var(--sdh-tbp-orange-dark) 60%, var(--sdh-tbp-orange-dark) 100%);
    filter: blur(110px);
    opacity: 0.5;
    border-radius: 50%;
    pointer-events: none;
}

.sdh-tbp-section::after {
    content: '';
    position: absolute;
    left: -50px;
    bottom: 30px;
    width: 150px;
    height: 240px;
    background: var(--sdh-tbp-orange);
    filter: blur(110px);
    opacity: 0.28;
    border-radius: 50%;
    pointer-events: none;
}

.sdh-tbp-section .sdh-tbp-inner {
    position: relative;
    z-index: 2;
    max-width: 1500px; /* 1500px container, all cards in one line */
    margin: 0 auto;
}

.sdh-tbp-section .sdh-tbp-eyebrow {
    text-align: center;
    font-family: var(--sdh-tbp-font-head);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--sdh-tbp-orange);
    text-transform: uppercase;
}

.sdh-tbp-section .sdh-tbp-title {
    text-align: center;
    margin-top: 14px;
    font-family: var(--sdh-tbp-font-head);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.5px;
}

    .sdh-tbp-section .sdh-tbp-title .sdh-tbp-grad {
        background: linear-gradient(92deg, var(--sdh-tbp-orange-dark) 0%, var(--sdh-tbp-orange) 48%, var(--sdh-tbp-orange-light) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

.sdh-tbp-section .sdh-tbp-pill {
    display: inline-block;
    width: 112px;
    height: 46px;
    border-radius: 999px;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 6px 6px 2px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ---- Head row: illustration on the left, eyebrow + heading on the right ---- */
.sdh-tbp-section .sdh-tbp-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
}

.sdh-tbp-section .sdh-tbp-visual {
    position: relative;
}

    /* soft orange glow behind the transparent PNG */
    .sdh-tbp-section .sdh-tbp-visual::before {
        content: '';
        position: absolute;
        inset: 18% 14%;
        background: radial-gradient(circle, rgba(232, 104, 26,0.32) 0%, rgba(232, 104, 26,0) 70%);
        filter: blur(30px);
        pointer-events: none;
    }

    .sdh-tbp-section .sdh-tbp-visual img {
        position: relative;
        display: block;
        width: 100%;
        max-width: 560px;
        height: auto;
        margin: 0 auto;
    }

.sdh-tbp-section .sdh-tbp-head .sdh-tbp-eyebrow,
.sdh-tbp-section .sdh-tbp-head .sdh-tbp-title {
    text-align: left;
}

@media (max-width: 900px) {
    .sdh-tbp-section .sdh-tbp-head {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .sdh-tbp-section .sdh-tbp-visual img {
        max-width: 360px;
    }

    .sdh-tbp-section .sdh-tbp-head .sdh-tbp-eyebrow,
    .sdh-tbp-section .sdh-tbp-head .sdh-tbp-title {
        text-align: center;
    }
}
/* ---- ONE LINE ONLY: 4 equal columns, never wraps ---- */
.sdh-tbp-section .sdh-tbp-cards {
    margin-top: 62px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.sdh-tbp-section .sdh-tbp-card {
    position: relative;
    background: var(--sdh-tbp-card);
    border: 1px solid var(--sdh-tbp-card-border);
    border-radius: 14px;
    overflow: hidden;
    padding: 78px 26px 32px;
    min-height: 390px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .sdh-tbp-section .sdh-tbp-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    }

    .sdh-tbp-section .sdh-tbp-card:focus-visible {
        outline: 3px solid var(--sdh-tbp-orange);
        outline-offset: 3px;
    }

.sdh-tbp-section .sdh-tbp-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 118px;
    height: 136px;
    border-bottom-left-radius: 115px;
    overflow: hidden;
    z-index: 1;
}

    .sdh-tbp-section .sdh-tbp-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.sdh-tbp-section .sdh-tbp-badge {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--sdh-tbp-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(232, 104, 26, 0.45);
}

    .sdh-tbp-section .sdh-tbp-badge svg {
        width: 30px;
        height: 30px;
    }

        .sdh-tbp-section .sdh-tbp-badge svg.sdh-tbp-ic-fill {
            fill: var(--sdh-tbp-white);
        }

.sdh-tbp-section .sdh-tbp-card h3 {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    font-family: var(--sdh-tbp-font-head);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--sdh-tbp-white);
}

.sdh-tbp-section .sdh-tbp-card p {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--sdh-tbp-desc);
}
/* ---- ACTIVE card: LIGHT wash so the photo stays clearly visible ---- */
.sdh-tbp-section .sdh-tbp-card-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

    .sdh-tbp-section .sdh-tbp-card-bg img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sdh-tbp-section .sdh-tbp-card-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(232, 104, 26,0.48) 0%, rgba(232, 104, 26,0.40) 45%, rgba(194, 84, 14,0.66) 100%);
    }

.sdh-tbp-section .sdh-tbp-card.sdh-tbp-active {
    border-color: rgba(232, 104, 26,0.55);
}

    .sdh-tbp-section .sdh-tbp-card.sdh-tbp-active .sdh-tbp-card-bg {
        opacity: 1;
    }

    .sdh-tbp-section .sdh-tbp-card.sdh-tbp-active .sdh-tbp-photo {
        opacity: 0;
        transition: opacity .3s;
    }

    .sdh-tbp-section .sdh-tbp-card.sdh-tbp-active .sdh-tbp-badge {
        background: var(--sdh-tbp-orange-dark);
        box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    }

    .sdh-tbp-section .sdh-tbp-card.sdh-tbp-active h3,
    .sdh-tbp-section .sdh-tbp-card.sdh-tbp-active p {
        color: var(--sdh-tbp-white);
        text-shadow: 0 2px 14px rgba(0,0,0,0.5);
    }

.sdh-tbp-section .sdh-tbp-card.sdh-tbp-active {
    box-shadow: 0 20px 60px rgba(232, 104, 26,0.35);
}

/* Dots — mobile carousel only */
.sdh-tbp-section .sdh-tbp-dots {
    display: none;
}

.sdh-tbp-section .sdh-tbp-dot:focus-visible {
    outline: 2px solid var(--sdh-tbp-orange);
    outline-offset: 2px;
}

/* Smaller screens: STILL one line — auto-sliding carousel */
@media (max-width: 1150px) {
    .sdh-tbp-section {
        padding: 64px 20px 64px;
    }

        .sdh-tbp-section .sdh-tbp-cards {
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-auto-columns: minmax(300px, 340px);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 14px;
            scrollbar-width: none;
        }

            .sdh-tbp-section .sdh-tbp-cards::-webkit-scrollbar {
                display: none;
            }

        .sdh-tbp-section .sdh-tbp-card {
            scroll-snap-align: start;
            min-height: 370px;
        }

        .sdh-tbp-section .sdh-tbp-pill {
            width: 84px;
            height: 36px;
        }

        .sdh-tbp-section .sdh-tbp-dots {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
            margin-top: 22px;
        }

        .sdh-tbp-section .sdh-tbp-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--sdh-tbp-dot-idle);
            border: none;
            cursor: pointer;
            padding: 0;
            transition: width 0.3s ease, background 0.3s ease;
        }

            .sdh-tbp-section .sdh-tbp-dot.sdh-tbp-active {
                width: 30px;
                background: var(--sdh-tbp-orange);
            }
}

@media (prefers-reduced-motion: reduce) {
    .sdh-tbp-section .sdh-tbp-card,
    .sdh-tbp-section .sdh-tbp-card-bg,
    .sdh-tbp-section .sdh-tbp-photo,
    .sdh-tbp-section .sdh-tbp-dot {
        transition: none;
    }

        .sdh-tbp-section .sdh-tbp-card:hover {
            transform: none;
        }
}





/*===========================================
New Services section
===========================================*/
/**************************************************service — DARK THEME*/ /**
   =========================================================
   ORTHOPAEDIC SERVICES SECTION — DARK THEME
   MAX CONTENT WIDTH: 1600px
   FULLY RESPONSIVE
   Matches the dark navy + orange design:
   #08121d background, orange accents, glowing centre disc,
   x-ray knee corner art, orange swoosh lines, dot grids.
   ========================================================= */

/* =========================
   GLOBAL BOX SIZING
   ========================= */

.os,
.os * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================
   ANIMATIONS
   ========================= */

@keyframes osBgPan {
    0% {
        transform: scale(1) translate3d(0,0,0);
    }

    50% {
        transform: scale(1.08) translate3d(-1.5%, -1%, 0);
    }

    100% {
        transform: scale(1) translate3d(0,0,0);
    }
}

@keyframes osGlowDrift1 {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: translate3d(-18px, 22px, 0) scale(1.12);
        opacity: 1;
    }
}

@keyframes osGlowDrift2 {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translate3d(20px, -18px, 0) scale(1.15);
        opacity: 1;
    }
}

@keyframes osGlowDrift3 {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(12px, 16px, 0) scale(1.08);
    }
}

@keyframes osFloat {
    0%,100% {
        transform: translate(-63%, -50%) translateY(0);
    }

    50% {
        transform: translate(-63%, -50%) translateY(-10px);
    }
}

@keyframes osDiscPulse {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.04);
        opacity: 0.95;
    }
}

@keyframes osHaloPulse {
    0%,100% {
        transform: scale(1);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.06);
        opacity: 0.9;
    }
}

@keyframes osFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes osFadeDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes osFadeScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes osShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes osUnderlineGrow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 55px;
        opacity: 1;
    }
}

@keyframes osGridMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-40px);
    }
}

/* =========================
   MAIN SECTION
   ========================= */

.os {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* ---------- DARK PALETTE (scoped to this section only) ---------- */
    --white: #0a1420;
    --charcoal: #f2f5f8;
    --text: #dbe4ee;
    --muted: #f2f5f8;
    --grey: #8d9aab;
    --border: #1c2a3c;
    --card: #0e1a28;
    --icon-bg: #121c2b;
    --orange-light: rgba(232, 104, 26, 0.13);
    --accent: #E8681A;
    --orange-dark: #C2540E;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.45);
    /* --------------------------------------------------------------- */

    background: radial-gradient( 1100px 640px at 50% 40%, rgba(33, 62, 98, 0.38), transparent 62% ), radial-gradient( 760px 430px at 100% 0%, rgba(232, 104, 26, 0.06), transparent 62% ), radial-gradient( 760px 520px at 0% 88%, rgba(232, 104, 26, 0.05), transparent 62% ), linear-gradient( 180deg, #091423 0%, #08121d 42%, #07111c 100% );
    font-family: var(--font-body);
    color: var(--text);
    padding: 72px 24px 64px;
    -webkit-font-smoothing: antialiased;
    isolation: isolate;
}

/* =========================
   ABSTRACT BACKGROUND LAYERS
   ========================= */

.os-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.os-bg-img {
    position: absolute;
    inset: -4%;
    background: linear-gradient( 180deg, rgba(7,17,28,0.12), rgba(7,17,28,0.58) ), url('~/Images/Home/abstract-dark-bg.jpg') center / cover no-repeat;
    opacity: 0.55;
    filter: saturate(0.95) contrast(1.02) brightness(0.88);
    animation: osBgPan 26s ease-in-out infinite;
    will-change: transform;
}

    .os-bg-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( 800px 460px at 78% 22%, rgba(232, 104, 26,0.10), transparent 62% ), radial-gradient( 600px 360px at 15% 82%, rgba(232, 104, 26,0.05), transparent 60% ), linear-gradient( 180deg, rgba(8,18,29,0.10), rgba(7,17,28,0.42) );
    }

.os-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(36px);
    will-change: transform;
    opacity: 0.7;
}

.os-bg-glow--1 {
    width: 520px;
    height: 520px;
    right: -100px;
    top: -140px;
    background: radial-gradient( closest-side, rgba(232, 104, 26,0.14), rgba(232, 104, 26,0.04) 42%, transparent 72% );
    animation: osGlowDrift1 16s ease-in-out infinite;
}

.os-bg-glow--2 {
    width: 600px;
    height: 600px;
    left: -180px;
    bottom: -200px;
    background: radial-gradient( closest-side, rgba(36, 62, 98, 0.20), transparent 70% );
    animation: osGlowDrift2 20s ease-in-out infinite;
}

.os-bg-glow--3 {
    width: 380px;
    height: 380px;
    left: 48%;
    top: 42%;
    background: radial-gradient( closest-side, rgba(33, 62, 98, 0.18), transparent 72% );
    animation: osGlowDrift3 18s ease-in-out infinite;
    filter: blur(32px);
    opacity: 0.5;
}

.os-bg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.022;
    background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient( 75% 55% at 50% 40%, black 20%, transparent 88% );
    animation: osGridMove 80s linear infinite;
}

/* keep old glows for fallback but hide when new bg exists */
.os:has(.os-bg) .os-bg + .os-wrap ~ ::before,
.os:has(.os-bg) .os-bg + .os-wrap ~ ::after {
    display: none;
}

/* =========================
   DECORATIVE BACKGROUND GLOWS (fallback when .os-bg not present)
   ========================= */

.os::before,
.os::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.os::before {
    width: 640px;
    height: 640px;
    right: -180px;
    top: -220px;
    background: radial-gradient( closest-side, rgba(232, 104, 26, 0.08), transparent 70% );
    animation: osGlowDrift1 14s ease-in-out infinite;
}

.os::after {
    width: 720px;
    height: 720px;
    left: -260px;
    bottom: -320px;
    background: radial-gradient( closest-side, rgba(50, 84, 128, 0.10), transparent 70% );
    animation: osGlowDrift2 18s ease-in-out infinite;
}




/* =========================
   MAIN 1600px CONTAINER
   ========================= */

.os-wrap {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 1;
}


/* =========================================================
   HEADER — with entrance animation
   ========================================================= */

.os header {
    text-align: center;
}

.os-badge {
    display: inline-block;
    background: rgba(232, 104, 26, 0.13);
    color: var(--accent);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid rgba(232, 104, 26, 0.22);
    animation: osFadeDown 0.7s ease both;
    animation-delay: 0.1s;
    position: relative;
    overflow: hidden;
}

    .os-badge::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 100deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70% );
        background-size: 200% 100%;
        animation: osShimmer 3.2s ease-in-out infinite;
        pointer-events: none;
    }

.os h1 {
    margin: 18px auto 14px;
    font-family: var(--font-head);
    color: var(--charcoal);
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.15;
    max-width: 900px;
    animation: osFadeUp 0.8s ease both;
    animation-delay: 0.25s;
}

    .os h1 em {
        font-style: normal;
        color: var(--accent);
        position: relative;
        display: inline-block;
    }

        .os h1 em::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0.35;
            transform: scaleX(0);
            transform-origin: left;
            animation: osUnderlineGrow 0.8s ease forwards;
            animation-delay: 1s;
        }

.os-sub {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: var(--grey);
    font-size: 15.5px;
    line-height: 1.6;
    animation: osFadeUp 0.8s ease both;
    animation-delay: 0.4s;
}


/* =========================================================
   MAIN SERVICES GRID
   ========================================================= */

.os-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 520px) minmax(0, 1fr);
    gap: 50px;
    align-items: stretch;
    margin-top: 50px;
}


/* =========================================================
   SERVICE LIST
   ========================================================= */

ul.os-svc {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    height: 100%;
}


/* =========================================================
   SERVICE ITEM — with staggered entrance
   ========================================================= */

.os-svc li {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 72px;
    opacity: 0;
    animation: osFadeUp 0.6s ease both;
}

/* left column stagger */
.os-left li:nth-child(1) {
    animation-delay: 0.45s;
}

.os-left li:nth-child(2) {
    animation-delay: 0.52s;
}

.os-left li:nth-child(3) {
    animation-delay: 0.59s;
}

.os-left li:nth-child(4) {
    animation-delay: 0.66s;
}

.os-left li:nth-child(5) {
    animation-delay: 0.73s;
}

.os-left li:nth-child(6) {
    animation-delay: 0.80s;
}

.os-left li:nth-child(7) {
    animation-delay: 0.87s;
}

/* right column stagger */
.os-right li:nth-child(1) {
    animation-delay: 0.48s;
}

.os-right li:nth-child(2) {
    animation-delay: 0.55s;
}

.os-right li:nth-child(3) {
    animation-delay: 0.62s;
}

.os-right li:nth-child(4) {
    animation-delay: 0.69s;
}

.os-right li:nth-child(5) {
    animation-delay: 0.76s;
}

.os-right li:nth-child(6) {
    animation-delay: 0.83s;
}

.os-right li:nth-child(7) {
    animation-delay: 0.90s;
}

/* center 15th */
.os-svc-center li {
    animation-delay: 0.95s;
}

/* scroll reveal fallback — if JS adds .os-in-view */
.os.is-animated .os-svc li,
.os.os-in-view .os-svc li {
    animation-play-state: running;
}


/* =========================================================
   SERVICE ICON — white badge circle + orange two-tone PNG
   (like the reference badges, blue replaced by orange)
   + subtle idle + hover animation
   ========================================================= */

.os-svc-icon {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--accent);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    /* thin bottom hollow ring — same as ref heart's bottom badge: thin black circle with small gap at bottom */
    .os-svc-icon::after {
        content: "";
        position: absolute;
        inset: -0.5px;
        border-radius: 50%;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28.4' fill='none' stroke='%230e0e0e' stroke-width='1.35' stroke-linecap='round' stroke-dasharray='42 11 126'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        opacity: 1;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }

.os-svc li:hover .os-svc-icon {
    transform: scale(1.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 104, 26,0.18);
}

    .os-svc li:hover .os-svc-icon::after {
        transform: rotate(-12deg) scale(1.02);
    }

/* subtle continuous float for icons when not hovering — very gentle */
@media (prefers-reduced-motion: no-preference) {
    .os-svc li:nth-child(odd) .os-svc-icon {
        animation: osIconFloat 5s ease-in-out infinite;
    }

    .os-svc li:nth-child(even) .os-svc-icon {
        animation: osIconFloat 5.6s ease-in-out infinite reverse;
    }

    @keyframes osIconFloat {
        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-2px);
        }
    }

    .os-svc li:hover .os-svc-icon {
        animation: none;
    }
}

/* orange icon stays orange at all times — no swap on hover */
.os-svc-icon .os-ico {
    width: 32px;
    height: 32px;
    transition: transform 0.25s ease;
}

.os-svc li:hover .os-ico {
    transform: scale(1.06);
}


/* =========================================================
   SERVICE TEXT  (+ hairline divider between icon and text)
   ========================================================= */

.os-svc-txt {
    position: relative;
}

    .os-svc-txt::before {
        content: "";
        position: absolute;
        left: -9px;
        top: 3px;
        bottom: 3px;
        width: 1px;
        background: linear-gradient( 180deg, transparent, rgba(148, 178, 214, 0.22) 14%, rgba(148, 178, 214, 0.22) 86%, transparent );
        pointer-events: none;
    }

.os-svc h3 {
    font-family: var(--font-head);
    color: var(--charcoal);
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.3;
}

.os-svc p {
    margin-top: 5px;
    max-width: 330px;
    color: var(--grey);
    font-size: clamp(12px, 0.8vw, 13.5px);
    line-height: 1.5;
}


/* =========================================================
   CENTER COLUMN
   ========================================================= */

.os-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}


/* =========================================================
   15TH SERVICE
   ========================================================= */

ul.os-svc.os-svc-center {
    width: 100%;
    height: auto;
    justify-content: center;
}


/* =========================================================
   CENTER VISUAL
   ========================================================= */

.os-visual {
    position: relative;
    width: 100%;
    min-height: 660px;
    animation: osFadeScale 0.9s ease both;
    animation-delay: 0.35s;
}


/* =========================================================
   CENTER DISC  (dark glow + faint halo ring) + pulse
   ========================================================= */

.os-disc {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle at 50% 46%, rgba(36, 62, 95, 0.50), rgba(15, 30, 48, 0.22) 48%, transparent 72% );
    animation: osDiscPulse 6s ease-in-out infinite;
}

    /* faint halo ring around the glow */
    .os-disc::after {
        content: "";
        position: absolute;
        inset: -22px;
        border-radius: 50%;
        border: 1px solid rgba(148, 178, 214, 0.10);
        animation: osHaloPulse 4.5s ease-in-out infinite;
    }


/* =========================================================
   DECORATIVE ARC  (optional dashed ring — enable in HTML)
   ========================================================= */

.os-arc {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 535px;
    height: 535px;
    transform: translate(-50%, -50%);
    color: var(--accent);
    pointer-events: none;
    opacity: 0.55;
    animation: osHaloPulse 5s ease-in-out infinite reverse;
}


/* =========================================================
   RUNNER IMAGE — floating animation
   ========================================================= */

.os-visual img.os-runner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 455px;
    transform: translate(-63%, -50%);
    mix-blend-mode: normal;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.45));
    pointer-events: none;
    user-select: none;
    animation: osFloat 6s ease-in-out infinite;
    will-change: transform;
}


/* =========================================================
   MOVE BETTER TEXT — with reveal
   ========================================================= */

.os-move {
    position: absolute;
    left: 58%;
    top: 40%;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1.42;
    color: var(--muted);
    text-transform: uppercase;
    animation: osFadeUp 0.7s ease both;
    animation-delay: 0.85s;
}

    .os-move b {
        color: var(--accent);
        position: relative;
        display: inline-block;
    }

        /* short accent underline under PAIN-FREE */
        .os-move b::after {
            content: "";
            position: absolute;
            left: 1px;
            bottom: -9px;
            width: 55px;
            height: 3px;
            border-radius: 2px;
            background: var(--accent);
            animation: osUnderlineGrow 0.6s ease both;
            animation-delay: 1.15s;
            box-shadow: 0 0 12px rgba(232, 104, 26,0.5);
        }


/* =========================================================
   FEATURE STRIP — with entrance + hover lift
   ========================================================= */

.os-features {
    margin-top: 50px;
    width: 100%;
    background: linear-gradient( 180deg, #101d2c, #0b1725 );
    border: 1px solid rgba(148, 178, 214, 0.13);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 26px 15px;
    animation: osFadeUp 0.7s ease both;
    animation-delay: 1s;
    position: relative;
    overflow: hidden;
}

    .os-features::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 100deg, transparent 20%, rgba(232, 104, 26,0.06) 50%, transparent 80% );
        background-size: 200% 100%;
        animation: osShimmer 6s ease-in-out infinite;
        pointer-events: none;
        opacity: 0.6;
    }


/* =========================================================
   FEATURE ITEM — hover glow
   ========================================================= */

.os-feat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 20px;
    border-left: 1px solid rgba(148, 178, 214, 0.12);
    text-align: left;
    transition: transform 0.25s ease, background 0.25s ease;
    position: relative;
    z-index: 1;
}

    .os-feat:first-child {
        border-left: 0;
    }

    .os-feat:hover {
        transform: translateY(-2px);
        background: rgba(232, 104, 26,0.04);
        border-radius: 10px;
    }

    .os-feat svg {
        width: 36px;
        height: 36px;
        color: var(--accent);
        flex: none;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .os-feat:hover svg {
        transform: scale(1.12) rotate(-4deg);
        filter: drop-shadow(0 0 8px rgba(232, 104, 26,0.45));
    }

    .os-feat h4 {
        font-family: var(--font-head);
        color: var(--charcoal);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    .os-feat p {
        margin-top: 3px;
        font-size: 12px;
        color: var(--grey);
    }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .os-bg-img, .os-bg-glow, .os-disc, .os-disc::after, .os-arc,
    .os-visual, .os-visual img.os-runner, .os-badge, .os-badge::after,
    .os h1, .os-sub, .os-svc li, .os-move, .os-move b::after,
    .os-features, .os-features::before, .os-svc-icon {
        animation: none !important;
    }

    .os-svc li {
        opacity: 1;
    }
}


/* =========================================================
   CTA ROW
   ========================================================= */

.os-cta-row {
    position: relative;
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}


/* =========================================================
   BUTTON
   ========================================================= */

.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 999px;
    padding: 15px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .os-btn:hover {
        transform: translateY(-2px);
    }

    .os-btn svg {
        width: 19px;
        height: 19px;
        flex: none;
    }


    /* =========================================================
   PRIMARY BUTTON
   ========================================================= */

    .os-btn.os-primary {
        background: linear-gradient( 180deg, var(--accent), var(--orange-dark) );
        color: #fff;
        box-shadow: var(--shadow-md);
    }

        .os-btn.os-primary .os-chev {
            width: 15px;
            height: 15px;
        }


    /* =========================================================
   GHOST BUTTON
   ========================================================= */

    .os-btn.os-ghost {
        background: transparent;
        color: var(--accent);
        box-shadow: inset 0 0 0 1.5px rgba(232, 104, 26, 0.45);
    }


/* =========================================================
   SCRIPT TEXT
   ========================================================= */

.os-script {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-46%) rotate(-7deg);
    font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive !important;
    font-size: 27px;
    line-height: 1.05;
    color: var(--orange);
    opacity: 0.92;
    pointer-events: none;
    white-space: nowrap;
}


/* =========================================================
   EXTRA LARGE DESKTOP
   1920px+
   ========================================================= */

@media (min-width: 1920px) {

    .os {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .os-wrap {
        max-width: 1600px;
    }

    .os-grid {
        grid-template-columns: 490px 520px 490px;
        gap: 50px;
    }

    .os-visual {
        min-height: 680px;
    }

    .os-disc {
        width: 520px;
        height: 520px;
    }

    .os-arc {
        width: 555px;
        height: 555px;
    }

    .os-visual img.os-runner {
        width: 470px;
    }

    .os-move {
        left: 58%;
        top: 40%;
        font-size: 22px;
    }

    .os-svc h3 {
        font-size: 17px;
    }

    .os-svc p {
        font-size: 13.5px;
    }

    .os-features {
        margin-top: 50px;
        padding: 26px 15px;
    }
}


/* =========================================================
   LARGE DESKTOP
   1440px - 1919px
   ========================================================= */

@media (min-width: 1440px) and (max-width: 1919px) {

    .os {
        padding-left: 40px;
        padding-right: 40px;
    }

    .os-wrap {
        max-width: 1500px;
    }

    .os-grid {
        grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
        gap: 50px;
        margin-top: 55px;
    }

    .os-visual {
        min-height: 660px;
    }

    .os-disc {
        width: 500px;
        height: 500px;
    }

    .os-arc {
        width: 535px;
        height: 535px;
    }

    .os-visual img.os-runner {
        width: 455px;
    }

    .os-svc li {
        min-height: 72px;
    }

    .os-svc-icon {
        width: 60px;
        height: 60px;
    }

        .os-svc-icon .os-ico {
            width: 32px;
            height: 32px;
        }
}


/* =========================================================
   1200px - 1439px
   ========================================================= */

@media (min-width: 1121px) and (max-width: 1439px) {

    .os {
        padding-left: 30px;
        padding-right: 30px;
    }

    .os-grid {
        grid-template-columns: minmax(0, 1fr) 450px minmax(0, 1fr);
        gap: 30px;
    }

    .os-visual {
        min-height: 600px;
    }

    .os-disc {
        width: 420px;
        height: 420px;
    }

    .os-arc {
        width: 455px;
        height: 455px;
    }

    .os-visual img.os-runner {
        width: 390px;
    }

    .os-move {
        font-size: 18px;
        left: 58%;
    }

    .os-svc li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    .os-svc-icon {
        width: 52px;
        height: 52px;
    }

        .os-svc-icon .os-ico {
            width: 27px;
            height: 27px;
        }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   1120px
   ========================================================= */

@media (max-width: 1120px) {

    .os {
        padding-left: 24px;
        padding-right: 24px;
    }

    .os-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    /*
       Center runner moves above
       the two service columns
    */

    .os-center {
        grid-column: 1 / -1;
        grid-row: 1;
        order: -1;
    }

    .os-visual {
        width: 100%;
        height: 560px;
        min-height: 0;
    }

    .os-script {
        display: none;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .os {
        padding: 60px 20px 55px;
    }

    .os-grid {
        gap: 35px 24px;
    }

    .os-features {
        grid-template-columns: 1fr 1fr;
        gap: 18px 0;
    }

    .os-feat:nth-child(3) {
        border-left: 0;
    }

    .os-visual {
        height: 480px;
    }

    .os-disc {
        width: 380px;
        height: 380px;
    }

    .os-arc {
        width: 410px;
        height: 410px;
    }

    .os-visual img.os-runner {
        width: 360px;
    }

    .os-move {
        font-size: 17px;
    }

    .os-svc li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        min-height: 65px;
    }

    .os-svc-icon {
        width: 50px;
        height: 50px;
    }

        .os-svc-icon .os-ico {
            width: 27px;
            height: 27px;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .os {
        padding: 52px 18px 48px;
    }

    .os-wrap {
        max-width: 100%;
    }

    .os-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /*
       Center content becomes normal
       single-column content
    */

    .os-center {
        display: contents;
    }

    .os-visual {
        width: 100%;
        height: 420px;
        min-height: 0;
        order: -1;
    }

    ul.os-svc {
        gap: 22px;
    }

        ul.os-svc.os-svc-center {
            order: 1;
        }

    .os-disc {
        width: 310px;
        height: 310px;
    }

    .os-arc {
        width: 338px;
        height: 338px;
    }

    .os-visual img.os-runner {
        width: 300px;
    }

    .os-move {
        font-size: 16px;
        left: 60%;
        top: 40%;
    }

    .os-svc li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        min-height: 60px;
    }

    .os-svc-icon {
        width: 50px;
        height: 50px;
    }

        .os-svc-icon .os-ico {
            width: 26px;
            height: 26px;
        }

    .os-svc h3 {
        font-size: 15px;
    }

    .os-svc p {
        font-size: 12px;
        max-width: 100%;
    }

    /* =========================
       FEATURE STRIP
       ========================= */

    .os-features {
        grid-template-columns: 1fr;
        padding: 10px 0;
        margin-top: 35px;
    }

    .os-feat {
        border-left: 0;
        border-top: 1px solid rgba(148, 178, 214, 0.12);
        padding: 16px 22px;
        justify-content: flex-start;
    }

        .os-feat:first-child {
            border-top: 0;
        }

    /* =========================
       CTA
       ========================= */

    .os-cta-row {
        margin-top: 28px;
        width: 100%;
    }

    .os-btn {
        width: 100%;
        justify-content: center;
    }

    .os-script {
        display: none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .os {
        padding-left: 14px;
        padding-right: 14px;
    }

        .os h1 {
            font-size: 28px;
        }

    .os-sub {
        font-size: 14px;
    }

    .os-visual {
        height: 360px;
    }

    .os-disc {
        width: 270px;
        height: 270px;
    }

    .os-arc {
        width: 295px;
        height: 295px;
    }

    .os-visual img.os-runner {
        width: 260px;
    }

    .os-move {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .os-svc li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .os-svc-icon {
        width: 44px;
        height: 44px;
    }

        .os-svc-icon .os-ico {
            width: 24px;
            height: 24px;
        }
}



/*================================================
lab Testing section 
================================================*/
/* Scoped to .sdh-science only — does not target html, body, or a global *. */

.sdh-science {
    --sdh-charcoal: #32323a;
    --sdh-orange: #E8681A;
    --sdh-accent: #E8681A;
    --sdh-orange-dark: #C2540E;
    --sdh-orange-light: #fdeee4;
    --sdh-text: #2e2e35;
    --sdh-muted: #6a6a75;
    --sdh-border: #e6e6ec;
    --sdh-white: #ffffff;
    --sdh-logo-orange: #E8681A;
    --sdh-logo-ink: #171b20;
    --sdh-logo-blue: #009cfc;
    --sdh-logo-green: #97c301;
    --sdh-logo-pink: #fa016a;
    --sdh-bg: var(--sdh-logo-ink);
    --sdh-card: #1e2228;
    --sdh-card-hover: #252a32;
    --sdh-subtitle: #9a9aa3;
    --sdh-container: 1280px;
    --sdh-font-head: "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sdh-font-body: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 96px 24px 100px;
    background: var(--sdh-bg);
    color: var(--sdh-white);
    font-family: var(--sdh-font-body);
    box-sizing: border-box;
}

.sdh-science__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.sdh-science__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sdh-container);
    margin: 0 auto;
    box-sizing: border-box;
}

.sdh-science__header {
    text-align: center;
    margin-bottom: 56px;
}

.sdh-science__eyebrow {
    display: inline-block;
    font-family: var(--sdh-font-head);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sdh-orange);
    margin: 0 0 14px;
}

.sdh-science__title {
    font-family: var(--sdh-font-head);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 1.15;
    color: var(--sdh-white);
    margin: 0 0 18px;
}

.sdh-science__lede {
    max-width: 640px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 400;
    color: var(--sdh-subtitle);
}

.sdh-science__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sdh-science__card {
    background: var(--sdh-card);
    padding: 28px 18px 26px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    animation: sdhScienceRise 0.7s ease both;
    animation-delay: calc(var(--i) * 0.12s);
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

    .sdh-science__card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%);
    }

    .sdh-science__card:hover {
        transform: translateY(-8px);
        background: var(--sdh-card-hover);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--sdh-orange) 28%, transparent);
    }

.sdh-science__visual {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 4px;
    align-items: start;
    min-height: 180px;
}

.sdh-science__number {
    font-family: var(--sdh-font-head);
    font-size: clamp(2.1rem, 2.6vw, 2.75rem);
    font-weight: 400;
    color: var(--sdh-orange);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.sdh-science__label {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.45;
    color: var(--sdh-white);
}

.sdh-science__figure {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    height: 180px;
    perspective: 900px;
}

    .sdh-science__figure img {
        height: 180px;
        width: auto;
        max-width: 100%;
        display: block;
        object-fit: contain;
        object-position: right top;
        transform-style: preserve-3d;
        backface-visibility: visible;
        transition: transform 0.9s ease;
    }

.sdh-science__card:hover .sdh-science__figure img {
    transform: rotateY(180deg);
}

.sdh-science__copy {
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

    .sdh-science__copy h3 {
        font-family: var(--sdh-font-head);
        font-size: 1.12rem;
        font-weight: 600;
        letter-spacing: -0.2px;
        margin: 0 0 8px;
        color: var(--sdh-white);
    }

    .sdh-science__copy p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--sdh-subtitle);
        max-width: 100%;
        margin: 0;
    }

.sdh-science__top {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 20;
    width: 46px;
    height: 46px;
    border: 0;
    background: var(--sdh-orange);
    color: var(--sdh-white);
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 3px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--sdh-orange) 32%, transparent);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .sdh-science__top:hover {
        background: var(--sdh-orange-dark);
        transform: translateY(-3px);
    }

    .sdh-science__top:focus-visible {
        outline: 2px solid var(--sdh-white);
        outline-offset: 3px;
    }

@keyframes sdhScienceRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1200px) {
    .sdh-science__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .sdh-science__card {
        min-height: 0;
    }

    .sdh-science__header {
        margin-bottom: 40px;
    }
}

@media (max-width: 720px) {
    .sdh-science {
        padding: 64px 16px 88px;
    }

    .sdh-science__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    .sdh-science__card {
        padding: 28px 22px 26px;
    }

    .sdh-science__visual {
        grid-template-columns: 1fr 1fr;
        min-height: 170px;
    }

    .sdh-science__figure,
    .sdh-science__figure img {
        height: 170px;
    }

    .sdh-science__top {
        right: 14px;
        bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdh-science__card,
    .sdh-science__figure img,
    .sdh-science__top {
        animation: none;
        transition: none;
    }

        .sdh-science__card:hover .sdh-science__figure img {
            transform: none;
        }
}



/*========================================
Process section 
========================================*/
/*========================================
Process section 
========================================*/
/* ==========================================================================
   12. ORTHOPAEDIC TREATMENT STEPS  —  ".sdh-steps"
   "There are some easy steps to start your recovery with us!"
   Four steps: Consult & Assess → Imaging & Diagnosis → Surgery & Implants →
   Physio & Recovery.

   Behaviour, geometry and motion are ported 1:1 from the Consultio process
   widget (ct-process-3-column / style2) used as the reference, then re-cut
   for four steps and for photographs instead of line icons:

     · wheel 165px  = 155px disc (+4px light ring, r 73.5–77.5)
     · progress arc : 14px stroke, r 75.5, square caps, flat brand colour,
                      75% of the circle, drawn from the top end
                      counter-clockwise in 2.0s easeInOutQuad (easyPieChart)
     · 90° gap      : rotated per step (0 / 90 / 180 / 270°), the coloured ball
                      sits centred in it — exactly how the reference does it
     · photo        : 132px circle (80% of the wheel) inside the ring
     · wheel entrance: flipInX 1s (animate.css, the theme's build)
     · text entrance : fade-up, staggered per step
     · connectors    : hand-drawn arrows between the steps (83×12 / 62×18)

   Colours come from DESIGN.md (root tokens + the --logo-* accents), so the
   section reads as part of the hospital site, not as a copied theme block.
   Append this file to wwwroot/css/index.css.
   ========================================================================== */

/* The --logo-* accents come from DESIGN.md but are NOT declared here: this file
   ships no global selector (`*`, `html`, `body`, `:root`) and must not theme the
   whole site. Every use falls back to the hex inline, so the section is correct
   whether or not you add the tokens to Layout.css :root — if you do add them
   (as DESIGN.md suggests), the section picks them up automatically.
     --logo-orange #E8681A · --logo-blue #009cfc
     --logo-green  #97c301 · --logo-pink #fa016a                            */

/* --------------------------------------------------------------------------
   1. Section shell + tokens
   -------------------------------------------------------------------------- */
.sdh-steps {
    /* Type — the reference uses Poppins 700. Poppins isn't loaded by the site,
     so this falls back to the site's own heading stack; see README if you
     want the exact reference face (one line change). */
    --sdhs-font-head: "Poppins", var(--font-head, "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif);
    --sdhs-font-body: var(--font-body, "Segoe UI", Arial, Helvetica, sans-serif);
    /* Surface */
    --sdhs-bg: #14161b; /* dark band (ref. #0e0e0e)        */
    --sdhs-title: #ffffff;
    --sdhs-divider-a: var(--logo-orange, #E8681A); /* heading underline, brand orange */
    --sdhs-divider-b: #ff9f4d;
    /* Wheel */
    --sdhs-wheel: 210px; /* ref. was 165px at 1/3 width        */
    --sdhs-disc: #22252c;
    --sdhs-disc-ring: rgba(255, 255, 255, .38); /* ref. #d7e7fd           */
    --sdhs-photo-edge: rgba(255, 255, 255, .16); /* hairline round the photo */
    --sdhs-arc-width: 14; /* svg user units          */
    /* Copy */
    --sdhs-step-title: #ffffff;
    --sdhs-step-text: rgba(255, 255, 255, .80); /* ref. #f2f2f2            */
    --sdhs-link: var(--orange, #E8681A);
    --sdhs-link-hover: #ff8a3d;
    --sdhs-arrow: #8b98ae; /* ref. #8898ae            */
    /* Entrance timing */
    --sdhs-stagger: 140ms;
    --sdhs-draw: 2s;
    /* dark wash over the photo so the white copy stays readable
       (ref. rgba(14,14,14,.94) — lighter here, the photo is already dark) */
    --sdhs-overlay: rgba(14, 16, 20, .45);
    position: relative;
    isolation: isolate;
    /* Parallax, as on the reference theme: the photo is pinned to the
       viewport (background-attachment: fixed, desktop only — see below)
       and the section scrolls over it like a window. Pure CSS, no JS. */
    background-color: var(--sdhs-bg);
    background-image: url(/Images/Home/backgroundimage3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 100px 0 95px;
    overflow: hidden;
}

/* ref. applies "fixed" from 1025px up only — touch browsers (iOS in
   particular) either ignore it or render it blurry/jumpy, so tablets and
   phones get a normal scrolling background instead */
@media (min-width: 1025px) {
    .sdh-steps {
        background-attachment: fixed;
    }
}

/* overlay layer */
.sdh-steps::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--sdhs-overlay);
    pointer-events: none;
}

/* scoped reset — deliberately NOT a global `*` rule; the site already has one
   in Layout.css / index.css, this just keeps the section correct on its own */
.sdh-steps,
.sdh-steps *,
.sdh-steps *::before,
.sdh-steps *::after {
    box-sizing: border-box;
}

.sdh-steps__inner {
    position: relative;
    z-index: 1; /* sits above the .sdh-steps::before background layer */
    /* the +40 cancels this block's own 20px gutters, so the four columns span
     the full --container width (1200px) rather than 1160px                 */
    max-width: calc(var(--container, 1200px) + 40px);
    margin: 0 auto;
    padding: 0 20px;
}


/* --------------------------------------------------------------------------
   2. Heading
   -------------------------------------------------------------------------- */
.sdh-steps__head {
    position: relative;
    text-align: center;
    margin: 0 0 60px;
}

.sdh-steps__divider {
    display: block;
    width: 54px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, var(--sdhs-divider-a), var(--sdhs-divider-b));
    transform-origin: center;
}
/* eyebrow pill above the heading */
.sdh-steps__badge {
    display: inline-block;
    margin: 0 auto 18px;
    padding: 7px 16px;
    border-radius: 999px;
    background-color: rgba(232, 104, 26, .14); /* orange tint, per DESIGN.md */
    color: var(--sdhs-divider-a);
    font-family: var(--sdhs-font-head);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* "strictly one line" — the size is fluid so the sentence never wraps while
   the four columns are showing; below 1024px it is allowed to wrap, because
   a single line would have to shrink to ~10px to fit a phone. */
.sdh-steps__title {
    margin: 0 auto;
    max-width: none;
    font-family: var(--sdhs-font-head);
    font-weight: 600;
    font-size: clamp(20px, 2.72vw, 36px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--sdhs-title);
    white-space: nowrap;
}

.sdh-steps__subtitle {
    margin: 14px auto 0;
    max-width: none;
    font-family: var(--sdhs-font-body);
    font-size: clamp(15px, 1.32vw, 17px);
    line-height: 1.55;
    color: var(--sdhs-step-text);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Steps row — four columns
   -------------------------------------------------------------------------- */
.sdh-steps__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0; /* full width of the container */
    list-style: none;
}

.sdh-step {
    position: relative;
    padding: 0 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- icon wheel ----------------------------------------------------------- */
.sdh-step__wheel {
    position: relative;
    width: var(--sdhs-wheel);
    height: var(--sdhs-wheel);
    margin: 0 auto 30px;
    max-width: 100%;
}

.sdh-step__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.sdh-step__disc {
    fill: var(--sdhs-disc);
}

.sdh-step__track {
    fill: none;
    stroke: var(--sdhs-disc-ring);
    stroke-width: 4;
}

.sdh-step__arc {
    fill: none;
    stroke-width: var(--sdhs-arc-width);
    stroke-linecap: square; /* easyPieChart lineCap:'square'        */
    /* the <path> itself is already the 75% arc, and pathLength="100" makes its
     length 100 units — so one 100-unit dash covers it exactly.
     offset 0 = fully drawn, 100 = hidden, anything between = mid-sweep.      */
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

/* hairline separating the photo from the ring */
.sdh-step__photo-edge {
    fill: none;
    stroke: var(--sdhs-photo-edge);
    stroke-width: 2;
}

/* --- photo filling the middle of the wheel -------------------------------- */
.sdh-step__photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%; /* 132px at the 165px wheel (svg r = 66)     */
    height: 80%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    background-color: var(--sdhs-disc);
}

    .sdh-step__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* soft landing into the disc so the crop edge never looks pasted on */
    .sdh-step__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, color-mix(in srgb, var(--sdhs-disc) 88%, transparent) 100%);
        pointer-events: none;
    }

/* --- coloured ball sitting in the 90° gap ---------------------------------
   The gap is rotated per step, so the ball moves with it — top-right,
   bottom-right, bottom-left, top-left. 7.27% = 12/165, 22.42% = 37/165.     */
/* top-right is the base position (see --gap-tr in the markup) */
.sdh-step__dot {
    position: absolute;
    top: calc(var(--sdhs-wheel) * .0727);
    right: calc(var(--sdhs-wheel) * .0727);
    width: calc(var(--sdhs-wheel) * .2242);
    height: calc(var(--sdhs-wheel) * .2242);
    border-radius: 50%;
    background-image: linear-gradient(-210deg, var(--dot-a), var(--dot-b));
    box-shadow: 0 10px 16px var(--dot-glow);
}

.sdh-step--gap-br .sdh-step__dot {
    top: auto;
    bottom: calc(var(--sdhs-wheel) * .0727);
    right: calc(var(--sdhs-wheel) * .0727);
    left: auto;
}

.sdh-step--gap-bl .sdh-step__dot {
    top: auto;
    bottom: calc(var(--sdhs-wheel) * .0727);
    right: auto;
    left: calc(var(--sdhs-wheel) * .0727);
}

.sdh-step--gap-tl .sdh-step__dot {
    top: calc(var(--sdhs-wheel) * .0727);
    right: auto;
    left: calc(var(--sdhs-wheel) * .0727);
    bottom: auto;
}

/* --- copy ----------------------------------------------------------------- */
.sdh-step__title {
    margin: 0 0 14px;
    font-family: var(--sdhs-font-head);
    font-weight: 600;
    font-size: 22px; /* ref. — back to full size now the columns
                                    are wide enough for one-line titles      */
    line-height: 1.25;
    color: var(--sdhs-step-title);
}

.sdh-step__text {
    margin: 0 0 5px;
    max-width: 260px;
    font-family: var(--sdhs-font-body);
    font-size: 15px;
    line-height: 26px;
    color: var(--sdhs-step-text);
}

.sdh-step__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sdhs-font-head);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    margin-top: auto; /* every "…now ››" sits on the same line */
    padding-top: 4px;
    color: var(--sdhs-link);
    text-decoration: none;
}

    .sdh-step__link svg {
        display: block;
        width: 12px;
        height: 10px;
        transition: transform 300ms linear;
    }

    .sdh-step__link:hover {
        color: var(--sdhs-link-hover);
    }

        .sdh-step__link:hover svg {
            transform: translateX(6px);
        }
    /* ref. */
    .sdh-step__link:focus-visible {
        outline: 2px solid var(--sdhs-link);
        outline-offset: 4px;
        border-radius: 3px;
    }

/* --- hand-drawn connectors between the steps ------------------------------ */
.sdh-step__arrow {
    position: absolute;
    top: calc(var(--sdhs-wheel) * .5 - 2.5px); /* ref. 80px at a 165px wheel  */
    right: auto;
    left: calc(50% + var(--sdhs-wheel) * .5 + 4px); /* starts just off the ring */
    width: 83px;
    height: 12px;
    color: var(--sdhs-arrow);
    pointer-events: none;
    overflow: visible;
}

.sdh-step__arrow--loop {
    top: calc(var(--sdhs-wheel) * .5 - 4.5px); /* ref. 78px at a 165px wheel  */
    left: calc(50% + var(--sdhs-wheel) * .5 + 12px);
    width: 62px;
    height: 18px;
}

.sdh-step:last-child .sdh-step__arrow {
    display: none;
}

/* --------------------------------------------------------------------------
   4. Accents — one accent per step, all four from the brand
      blue #009cfc · green #97c301 · pink #fa016a (the logo tiles) · orange
      #E8681A (the logo's brand primary). Swap them freely per speciality.
   -------------------------------------------------------------------------- */
.sdh-step--blue {
    --dot-a: #63c9ff;
    --dot-b: var(--logo-blue, #009cfc);
    --dot-glow: rgba(0, 156, 252, .38);
    --arc: var(--logo-blue, #009cfc);
}

.sdh-step--green {
    --dot-a: #c9e84e;
    --dot-b: var(--logo-green, #97c301);
    --dot-glow: rgba(151, 195, 1, .36);
    --arc: var(--logo-green, #97c301);
}

.sdh-step--pink {
    --dot-a: #ff5ba0;
    --dot-b: var(--logo-pink, #fa016a);
    --dot-glow: rgba(250, 1, 106, .36);
    --arc: var(--logo-pink, #fa016a);
}

.sdh-step--orange {
    --dot-a: #ffa259;
    --dot-b: var(--logo-orange, #E8681A);
    --dot-glow: rgba(232, 104, 26, .38);
    --arc: var(--logo-orange, #E8681A);
}

.sdh-step__arc {
    stroke: var(--arc);
}

/* --------------------------------------------------------------------------
   5. Motion
   Hidden start states only apply while the section is waiting for its
   IntersectionObserver (.sdh-steps--animate:not(.is-in)) — with JS off
   everything simply renders finished.
   -------------------------------------------------------------------------- */
.sdh-steps--animate:not(.is-in) .sdh-step__wheel,
.sdh-steps--animate:not(.is-in) .sdh-step__arrow,
.sdh-steps--animate:not(.is-in) .sdh-step__title,
.sdh-steps--animate:not(.is-in) .sdh-step__text,
.sdh-steps--animate:not(.is-in) .sdh-step__link,
.sdh-steps--animate:not(.is-in) .sdh-steps__divider,
.sdh-steps--animate:not(.is-in) .sdh-steps__badge,
.sdh-steps--animate:not(.is-in) .sdh-steps__title,
.sdh-steps--animate:not(.is-in) .sdh-steps__subtitle {
    opacity: 0;
}

.sdh-steps--animate:not(.is-in) .sdh-step__arc {
    stroke-dashoffset: 100;
}

.sdh-steps--animate:not(.is-in) .sdh-step__dot {
    opacity: 0;
    transform: rotateX(-90deg) scale(.72);
}

/* wheel — flipInX, the exact keyframes shipped with the reference theme */
.sdh-steps--animate.is-in .sdh-step__wheel {
    animation: sdhFlipInX 1s both;
    animation-delay: calc(var(--i, 0) * var(--sdhs-stagger));
}

/* progress arc — easyPieChart's 2s easeInOutQuad sweep, counter-clockwise */
.sdh-steps--animate.is-in .sdh-step__arc {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--sdhs-draw) cubic-bezier(.455, .03, .515, .955);
    transition-delay: calc(var(--i, 0) * var(--sdhs-stagger));
}

/* photo — settles out of a slight zoom as its wheel lands */
.sdh-steps--animate.is-in .sdh-step__photo img {
    animation: sdhPhotoIn 1.8s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(var(--i, 0) * var(--sdhs-stagger) + .35s);
}

/* ball — pops into the gap once the sweep is under way, then breathes */
.sdh-steps--animate.is-in .sdh-step__dot {
    animation: sdhDotIn .9s cubic-bezier(.2, .9, .3, 1.25) both, sdhDotGlow 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * var(--sdhs-stagger) + .6s), calc(var(--i, 0) * var(--sdhs-stagger) + 2.2s);
}

/* copy + connector — fade-up, staggered */
.sdh-steps--animate.is-in .sdh-step__title,
.sdh-steps--animate.is-in .sdh-step__text,
.sdh-steps--animate.is-in .sdh-step__link,
.sdh-steps--animate.is-in .sdh-step__arrow {
    animation: sdhFadeUp .7s both;
    animation-delay: calc(var(--i, 0) * var(--sdhs-stagger) + .18s);
}

/* heading block — rule, eyebrow, title, sub-title */
.sdh-steps--animate.is-in .sdh-steps__divider {
    animation: sdhLineIn .7s both;
}

.sdh-steps--animate.is-in .sdh-steps__badge {
    animation: sdhFadeUp .7s .06s both;
}

.sdh-steps--animate.is-in .sdh-steps__title {
    animation: sdhFadeUp .7s .14s both;
}

.sdh-steps--animate.is-in .sdh-steps__subtitle {
    animation: sdhFadeUp .7s .22s both;
}

@keyframes sdhFlipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}

@keyframes sdhFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* the arrow is faded in with opacity only (see the ≤1100px block) so its own
   transform — the 90° turn used when the steps stack vertically — survives */
@keyframes sdhFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sdhLineIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes sdhDotIn {
    from {
        opacity: 0;
        transform: rotateX(-90deg) scale(.72);
    }

    to {
        opacity: 1;
        transform: rotateX(0) scale(1);
    }
}

@keyframes sdhDotGlow {
    0%, 100% {
        box-shadow: 0 10px 16px var(--dot-glow);
    }

    50% {
        box-shadow: 0 10px 20px var(--dot-glow), 0 0 15px var(--dot-glow);
    }
}

@keyframes sdhPhotoIn {
    from {
        transform: scale(1.16);
    }

    to {
        transform: scale(1);
    }
}

/* --------------------------------------------------------------------------
   6. Light variant — one class, matches the white homepage sections
      <section class="sdh-steps sdh-steps--light">
   -------------------------------------------------------------------------- */
.sdh-steps--light {
    --sdhs-bg: #ffffff;
    --sdhs-title: var(--charcoal, #32323a);
    --sdhs-step-title: var(--charcoal, #32323a);
    --sdhs-step-text: var(--muted, #6a6a75);
    --sdhs-disc: #f3f5f9;
    --sdhs-disc-ring: rgba(50, 50, 58, .16);
    --sdhs-photo-edge: rgba(50, 50, 58, .12);
    --sdhs-arrow: #c3cad6;
    --sdhs-link-hover: var(--orange-dark, #C2540E);
    box-shadow: inset 0 1px 0 var(--border, #e6e6ec), inset 0 -1px 0 var(--border, #e6e6ec);
}
    /* orange text on an orange tint only clears ~2.5:1 on white, so the light
   variant swaps the badge text to charcoal (~10:1) */
    .sdh-steps--light .sdh-steps__badge {
        color: var(--sdhs-title);
    }

    .sdh-steps--light .sdh-step--blue {
        --dot-glow: rgba(0, 156, 252, .22);
    }

    .sdh-steps--light .sdh-step--green {
        --dot-glow: rgba(151, 195, 1, .22);
    }

    .sdh-steps--light .sdh-step--pink {
        --dot-glow: rgba(250, 1, 106, .22);
    }

    .sdh-steps--light .sdh-step--orange {
        --dot-glow: rgba(232, 104, 26, .22);
    }

/* --------------------------------------------------------------------------
   7. Breakpoints — 4 columns → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .sdh-step {
        --sdhs-wheel: 195px;
    }
}

@media (max-width: 767px) {
    /* A single line would have to shrink to ~10px to fit a phone, so below the
     tablet width both lines wrap again — and grow back to a readable size. */
    .sdh-steps__title,
    .sdh-steps__subtitle {
        white-space: normal;
        text-wrap: balance;
    }

    .sdh-steps__title {
        font-size: 24px;
        max-width: 420px;
        margin-inline: auto;
    }

    .sdh-steps__subtitle {
        font-size: 15px;
        max-width: 340px;
        margin-inline: auto;
    }
}

@media (min-width: 621px) and (max-width: 1100px) {
    .sdh-steps {
        padding: 84px 0 88px;
    }

    .sdh-steps__head {
        margin-bottom: 50px;
    }

    .sdh-steps__list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 64px;
    }

    .sdh-step {
        --sdhs-wheel: 180px;
    }
        /* the 2nd of each pair has nothing to its right to point at */
        .sdh-step:nth-child(even) .sdh-step__arrow {
            display: none;
        }
}

@media (max-width: 620px) {
    .sdh-steps {
        padding: 64px 0 70px;
    }

    .sdh-steps__head {
        margin-bottom: 40px;
    }

    .sdh-steps__list {
        grid-template-columns: 1fr;
        row-gap: 56px;
        padding: 0;
    }

    .sdh-step {
        --sdhs-wheel: 170px;
    }

    .sdh-step__title {
        font-size: 20px;
    }

    .sdh-step__text {
        max-width: 290px;
    }

    .sdh-step__arrow { /* point down the stacked column */
        top: calc(100% + 22px);
        right: auto;
        bottom: auto;
        left: calc(50% - 28px);
        width: 56px;
        height: auto;
        transform: rotate(90deg); /* rotates about its own centre */
        transform-origin: center;
    }
    /* fade (not fade-up) so the rotation above isn't overwritten by keyframes */
    .sdh-steps--animate.is-in .sdh-step__arrow {
        animation-name: sdhFadeIn;
    }
}

/* --------------------------------------------------------------------------
   8. Reduced motion — everything lands in its final state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sdh-steps .sdh-step__wheel,
    .sdh-steps .sdh-step__dot,
    .sdh-steps .sdh-step__photo img,
    .sdh-steps .sdh-step__title,
    .sdh-steps .sdh-step__text,
    .sdh-steps .sdh-step__link,
    .sdh-steps .sdh-step__arrow,
    .sdh-steps .sdh-steps__divider,
    .sdh-steps .sdh-steps__badge,
    .sdh-steps .sdh-steps__title,
    .sdh-steps .sdh-steps__subtitle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .sdh-steps .sdh-step__arc {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .sdh-steps .sdh-step__link svg {
        transition: none;
    }

    /* background parallax — scroll with the page, no fixed-window effect */
    .sdh-steps {
        background-attachment: scroll !important;
    }
}
/*============================================
Facialities section 
============================================*/
.sdh-facilities {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 72px 56px;
    font-family: "Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    color: #17293e;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    text-align: left;
    background: linear-gradient(160deg,#f7fbfd 0%,#eff5fa 55%,#eaf2f8 100%);
}

    .sdh-facilities .inner {
        position: relative;
        z-index: 1;
        max-width: 1560px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 56px
    }

    /* ---------- left : circles ---------- */
    .sdh-facilities .visual {
        position: relative;
        flex: 0 0 clamp(460px,36vw,600px);
        width: clamp(460px,36vw,600px);
        aspect-ratio: 1;
        margin-left: 130px
    }

    .sdh-facilities .circle-main {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(23,60,95,.16)
    }

    .sdh-facilities .circle-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        max-width: none;
        margin: 0;
        border: 0
    }

    .sdh-facilities .circle-sub {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 78%;
        aspect-ratio: 1;
        margin: -39% 0 0 -39%;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        border: 14px solid #fff;
        box-shadow: 0 24px 55px rgba(23,60,95,.28);
        animation: sdh-facilities-spin 26s linear infinite;
    }

    /* ---------- floating props ---------- */
    .sdh-facilities .prop {
        position: absolute;
        display: block;
        max-width: none;
        height: auto;
        margin: 0;
        border: 0;
        pointer-events: none;
        filter: drop-shadow(0 18px 22px rgba(20,50,80,.22));
        animation: sdh-facilities-float 6s ease-in-out infinite;
        z-index: 3
    }
    /* full-size stethoscope in its own space left of the circles — never covers the photos */
    .sdh-facilities .prop-stetho {
        left: -150px;
        bottom: -40px;
        width: 173px;
        rotate: -8deg
    }

    .sdh-facilities .head-row {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .sdh-facilities .head-text {
        flex: 1;
        min-width: 0
    }

    .sdh-facilities .prop-knee {
        position: static;
        flex: 0 0 84px;
        width: 84px;
        align-self: flex-start;
        margin-top: -8px;
        rotate: 8deg;
        animation-delay: -3s
    }

    /* ---------- right : content ---------- */
    .sdh-facilities .content {
        flex: 1;
        min-width: 0;
        position: relative
    }

    .sdh-facilities .eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        font-weight: 400;
        letter-spacing: .22em;
        color: #68798c
    }

    .sdh-facilities .eyebrow-dot {
        width: 10px;
        height: 10px;
        background: #E8681A;
        border-radius: 2.5px
    }

    .sdh-facilities .title {
        position: relative;
        margin: 18px 0 22px;
        padding: 0;
        /* sized so the heading sits on exactly TWO lines beside the knee prop */
        font-size: clamp(28px,2.65vw,44px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -.015em;
        color: #15273c;
    }

        .sdh-facilities .title::before {
            content: "";
            position: absolute;
            left: -72px;
            top: 30px;
            width: 52px;
            height: 3.5px;
            border-radius: 2px;
            background: #E8681A
        }

    .sdh-facilities .or {
        color: #E8681A
    }

    .sdh-facilities .bl {
        color: #1e6fa6
    }

    .sdh-facilities .lead {
        margin: 0 0 26px;
        font-size: 18.5px;
        font-weight: 400;
        line-height: 1.7;
        color: #5d7085;
        max-width: 720px
    }

    .sdh-facilities .pills {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 30px
    }

    .sdh-facilities .pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 13px 26px;
        border-radius: 999px;
        font-weight: 400;
        font-size: 17.5px
    }

    .sdh-facilities .pill-ic {
        width: 22px;
        height: 22px;
        flex: 0 0 22px
    }

    .sdh-facilities .pill-blue {
        background: #d8e9f6;
        border: 1.5px solid #9fc6e4;
        color: #17496b
    }

        .sdh-facilities .pill-blue .pill-ic {
            color: #1e6fa6
        }

    .sdh-facilities .pill-green {
        background: #e3f2de;
        border: 1.5px solid #a9d59f;
        color: #28562f
    }

        .sdh-facilities .pill-green .pill-ic {
            color: #3f9142
        }

    .sdh-facilities .pill-pink {
        background: #fadde2;
        border: 1.5px solid #f0a7b2;
        color: #8c2733
    }

        .sdh-facilities .pill-pink .pill-ic {
            color: #d43f4f
        }

    .sdh-facilities .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin-bottom: 34px
    }

    .sdh-facilities .card {
        box-sizing: border-box;
        background: #fff;
        border: 1.5px solid #bcd0e1;
        border-radius: 16px;
        padding: 24px 26px;
        box-shadow: 0 10px 26px rgba(30,60,90,.05)
    }

    .sdh-facilities .card-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px
    }

    .sdh-facilities .card-dash {
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: #E8681A;
        flex: 0 0 20px
    }

    .sdh-facilities .card-title {
        margin: 0;
        padding: 0;
        font-size: 21px;
        font-weight: 600;
        color: #15273c;
        flex: 1;
        line-height: 1.3
    }

    .sdh-facilities .card-ic {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fdeadd;
        color: #E8681A;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px
    }

    .sdh-facilities .card-ic-svg {
        width: 22px;
        height: 22px
    }

    .sdh-facilities .card-text {
        margin: 0;
        font-size: 16.5px;
        font-weight: 400;
        line-height: 1.65;
        color: #5d7085
    }

    .sdh-facilities .facts {
        display: flex;
        align-items: center;
        border-top: 1.5px solid #bcd0e1;
        padding-top: 26px
    }

    .sdh-facilities .fact {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
        padding-right: 24px
    }

        .sdh-facilities .fact + .fact {
            border-left: 1.5px solid #bcd0e1;
            padding-left: 26px
        }

    .sdh-facilities .fact-ic {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .sdh-facilities .fact-ic-svg {
        width: 24px;
        height: 24px
    }

    .sdh-facilities .ic-blue {
        background: #d8e9f6;
        color: #1e6fa6
    }

    .sdh-facilities .ic-orange {
        background: #fdeadd;
        color: #E8681A
    }

    .sdh-facilities .ic-green {
        background: #e3f2de;
        color: #3f9142
    }

    .sdh-facilities .fact-title {
        display: block;
        font-size: 18px;
        font-weight: 400;
        color: #15273c
    }

    .sdh-facilities .fact-sub {
        display: block;
        font-size: 14.5px;
        font-weight: 400;
        color: #7b8a99;
        margin-top: 2px
    }

/* ---------- animation ---------- */
@keyframes sdh-facilities-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes sdh-facilities-float {
    0%,100% {
        translate: 0 0
    }

    50% {
        translate: 0 -14px
    }
}

@media (prefers-reduced-motion:reduce) {
    .sdh-facilities .circle-sub, .sdh-facilities .prop {
        animation: none
    }
}

/* ---------- responsive ---------- */
@media (max-width:1700px) {
    .sdh-facilities .br-lg {
        display: none
    }
}

@media (max-width:1360px) {
    .sdh-facilities .inner {
        flex-direction: column;
        gap: 56px
    }

    .sdh-facilities .title::before {
        display: none
    }

    .sdh-facilities .visual {
        flex: none;
        width: min(600px,calc(100vw - 112px - 190px));
        margin-left: 190px
    }

    .sdh-facilities .prop-stetho {
        left: -180px;
        bottom: 0
    }

    .sdh-facilities .prop-knee {
        flex-basis: 60px;
        width: 60px;
        margin-top: 0
    }
}

@media (max-width:760px) {
    .sdh-facilities {
        padding: 48px 22px
    }

        .sdh-facilities .prop-knee {
            flex-basis: 52px;
            width: 52px
        }

        .sdh-facilities .visual {
            width: min(600px,90vw);
            margin-left: 0
        }

        .sdh-facilities .prop-stetho {
            display: none
        }

        .sdh-facilities .cards {
            grid-template-columns: 1fr
        }

        .sdh-facilities .facts {
            flex-direction: column;
            align-items: flex-start;
            gap: 18px
        }

        .sdh-facilities .fact {
            padding-right: 0
        }

            .sdh-facilities .fact + .fact {
                border-left: none;
                padding-left: 0;
                border-top: 1.5px solid #bcd0e1;
                padding-top: 18px;
                width: 100%
            }
}




/*===================================================
New Services section 
===================================================*/
/* ==========================================================================
   Shri Datta Hospital — Services section (Consultio-style)
   Layout: heading centred · LEFT = intro + tabs + CTA · RIGHT = 3×3 service grid
   Parallax: fixed background (background-attachment:fixed) + two decorative
   layers + the two columns themselves moving at different scroll speeds.
   Porting note: copy the <section class="sdh-svc"> markup into Pages/Index.cshtml,
   this <style> block into wwwroot/css/index.css, and the <script> block into the
   shared script in _Layout.cshtml (or keep it inline). Everything is scoped
   under the .sdh-svc prefix and uses the site tokens from DESIGN.md.
   ========================================================================== */

/* --- tokens (from DESIGN.md) -------------------------------------------- */
.sdh-svc {
    --sv-orange: #E8681A;
    --sv-orange-dark: #C2540E;
    --sv-charcoal: #32323a;
    --sv-ink: #171b20;
    --sv-blue: #009cfc; /* logo accent — shoulder / joint replacement */
    --sv-green: #97c301; /* logo accent — spine care                   */
    --sv-pink: #fa016a; /* logo accent — knee replacement             */
    --sv-bg: #14151a;
    --sv-border: rgba(255,255,255,.10);
    --sv-track: #232633;
    --sv-title: #ffffff;
    --sv-body: #d6d9e3;
    --sv-muted: #9aa0b4;
    --sv-faint: #6d7284;
    --sv-font: "Segoe UI", Arial, Helvetica, "Nirmala UI", "Noto Sans Devanagari", sans-serif;
    --sv-parallax-travel: 340px; /* total vertical pan of the background across the pass */
}

/* --- section shell + fixed (parallax) background ------------------------- */
.sdh-svc {
    position: relative;
    margin: 0;
    background-color: var(--sv-bg);
    font-family: var(--sv-font);
    overflow: hidden; /* clips decorative layers only */
    isolation: isolate;
}

.sdh-svc__bg {
    position: absolute;
    left: 0;
    right: 0;
    /* taller than the section so it can pan without exposing edges (JS drives the pan) */
    top: calc(var(--sv-parallax-travel) / -2);
    height: calc(100% + var(--sv-parallax-travel));
    z-index: -2;
    background: url("~/Images/Home/services-bg.jpg") center center / cover no-repeat;
    transform: translate3d(0,0,0);
    will-change: transform;
}

    .sdh-svc__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        /* opacity is driven by scroll (--sv-ov): the image "reveals" as the section passes */
        opacity: var(--sv-ov, 1);
        background: linear-gradient(180deg, rgba(17,18,23,.82) 0%, rgba(17,18,23,.86) 55%, rgba(17,18,23,.90) 100%);
    }
/* decorative parallax layers (move on scroll at different speeds) */
.sdh-svc__deco {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.sdh-svc__deco--a {
    top: -90px;
    right: -140px;
    width: 560px;
    height: 560px;
    opacity: .08;
}

.sdh-svc__deco--b {
    bottom: -120px;
    left: -110px;
    width: 460px;
    height: 460px;
    opacity: .07;
}

.sdh-svc__deco svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sdh-svc__container {
    position: relative;
    max-width: 1500px; /* wider than the site --container so the tile grid sits further left */
    margin: 0 auto;
    padding: 96px 24px 104px;
}

/* --- heading (wow "bounce" entrance) -------------------------------------- */
.sdh-svc__head {
    text-align: center;
    max-width: 1200px; /* heading keeps the site --container width, centred */
    margin: 0 auto 64px;
}

.sdh-svc__sub {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sv-title);
    letter-spacing: .02em;
}

    .sdh-svc__sub::before {
        content: "";
        width: 50px;
        height: 3px;
        background: linear-gradient(90deg, var(--sv-orange), var(--sv-orange-dark));
        box-shadow: 0 7px 16px rgba(232, 104, 26,.35);
        border-radius: 2px;
    }

.sdh-svc__title {
    margin: 16px auto 0;
    max-width: 780px;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.3;
    font-weight: 600;
    color: var(--sv-title);
}

    .sdh-svc__title .accent {
        color: var(--sv-orange);
    }

/* --- two columns (text left · grid right; each with its own scroll speed) - */
.sdh-svc__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    align-items: start;
}

.sdh-svc__side,
.sdh-svc__grid-wrap {
    will-change: transform; /* parallax targets (data-parallax-speed) */
}

/* --- right column: intro + tabs + CTA ------------------------------------- */
.sdh-svc__intro {
    margin: 0 0 42px;
    font-size: 16px;
    line-height: 30px;
    color: var(--sv-body);
}

/* tabs (Consultio ct-tabs style3) */
.sdh-svc__tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.sdh-svc__tab {
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--sv-title);
    padding: 0 20px 12px;
    cursor: pointer;
}

    .sdh-svc__tab::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--sv-orange), var(--sv-orange-dark));
        transition: width .3s linear;
    }

    .sdh-svc__tab:hover::after,
    .sdh-svc__tab.is-active::after {
        width: 100%;
    }

    .sdh-svc__tab.is-active {
        color: var(--sv-title);
    }

    .sdh-svc__tab:focus-visible {
        outline: 2px solid var(--sv-orange);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* panels — smooth slide (grid-rows trick, 300ms like the demo's slideUp/Down) */
.sdh-svc__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s linear .3s;
}

    .sdh-svc__panel.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
        transition: grid-template-rows .3s ease, opacity .3s ease;
    }

.sdh-svc__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.sdh-svc__panel-content {
    padding-top: 34px;
    font-size: 16px;
    line-height: 30px;
    color: var(--sv-body);
}

    .sdh-svc__panel-content p {
        margin: 0 0 26px;
    }

        .sdh-svc__panel-content p:last-child {
            margin-bottom: 0;
        }

    .sdh-svc__panel-content strong {
        color: var(--sv-title);
        font-weight: 400;
    }

/* progress bars (Consultio ct-progressbar1) */
.sdh-svc__bars {
    margin-top: 8px;
}

.sdh-svc__bar {
    display: flex;
    align-items: center;
}

    .sdh-svc__bar + .sdh-svc__bar {
        margin-top: 24px;
    }

.sdh-svc__bar-label {
    min-width: 158px;
    margin-right: 16px;
    font-size: 15.5px;
    color: var(--sv-title);
}

.sdh-svc__bar-track {
    position: relative;
    flex: 1;
    height: 7px;
    background-color: var(--sv-track);
}

.sdh-svc__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 1.4s ease; /* same 1.4s ease fill as the demo */
}

.sdh-svc__bar--blue .sdh-svc__bar-fill {
    background: linear-gradient(90deg, var(--sv-blue), #0070c0);
}

.sdh-svc__bar--pink .sdh-svc__bar-fill {
    background: linear-gradient(90deg, var(--sv-pink), #c00150);
}

.sdh-svc__bar--green .sdh-svc__bar-fill {
    background: linear-gradient(90deg, var(--sv-green), #6e9401);
}

.sdh-svc__bar-value {
    min-width: 56px;
    text-align: right;
    color: var(--sv-title);
    font-size: 15.5px;
}

/* CTA — site hero-button pattern (double-circle fill, per DESIGN.md) */
.sdh-svc__cta {
    margin-top: 40px;
}

.sdh-svc__btn {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sv-orange);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 400;
    padding: 14px 26px;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .5s ease, background-color .5s ease, box-shadow .5s ease;
}

    .sdh-svc__btn::before,
    .sdh-svc__btn::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--sv-orange-dark);
        z-index: -1;
        transition: width .5s ease, height .5s ease;
    }

    .sdh-svc__btn::before {
        top: -10px;
        left: -10px;
    }

    .sdh-svc__btn::after {
        bottom: -10px;
        right: -10px;
    }

    .sdh-svc__btn:hover {
        transform: translateY(-2px);
        background: var(--sv-orange-dark);
        box-shadow: 0 12px 26px rgba(232, 104, 26,.28);
    }

        .sdh-svc__btn:hover::before,
        .sdh-svc__btn:hover::after {
            width: 100%;
            height: 100%;
        }

    .sdh-svc__btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }

    .sdh-svc__btn svg {
        width: 17px;
        height: 17px;
        flex: none;
    }

.sdh-svc__cashless {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sv-muted);
}

    .sdh-svc__cashless b {
        color: var(--sv-body);
        font-weight: 400;
    }

/* --- service tile grid (Consultio fancy-box-grid1) — 3×3, right column ---- */
.sdh-svc__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.sdh-svc__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 14px 28px;
    border-top: 1px solid var(--sv-border);
    border-left: 1px solid var(--sv-border);
    background: transparent;
    cursor: pointer;
    transition: background-color .2s linear;
    z-index: 1;
    text-decoration: none; /* tiles are <a> — kill default underline */
}

    .sdh-svc__tile:hover {
        text-decoration: none;
    }

.sdh-svc__grid > .sdh-svc__tile:nth-child(3n) {
    border-right: 1px solid var(--sv-border);
}

.sdh-svc__grid > .sdh-svc__tile:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--sv-border);
}

.sdh-svc__tile-icon {
    width: 48px;
    height: 48px;
    color: var(--sv-orange);
    opacity: .55; /* dim at rest, like the demo */
    transition: opacity .2s linear, transform .2s linear;
    margin-bottom: 12px;
}

    .sdh-svc__tile-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.sdh-svc__tile-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--sv-muted);
    transition: color .2s linear;
}

.sdh-svc__tile-cap {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .03em;
    color: var(--sv-faint);
    transition: color .2s linear;
}

/* the four gradient "draw-out" lines (extend 80px past the tile, like demo) */
.sdh-svc__line {
    position: absolute;
    opacity: 0;
    z-index: 3;
    transition: opacity .2s linear;
    pointer-events: none;
}

.sdh-svc__line--top, .sdh-svc__line--bottom {
    top: -1px;
    height: 2px;
    width: calc(100% + 160px);
    left: -80px;
    background: linear-gradient(to right, rgba(232, 104, 26,0), var(--sv-orange), rgba(232, 104, 26,0));
}

.sdh-svc__line--bottom {
    top: auto;
    bottom: -1px;
}

.sdh-svc__line--left, .sdh-svc__line--right {
    left: -1px;
    width: 2px;
    height: calc(100% + 160px);
    top: -80px;
    background: linear-gradient(to top, rgba(232, 104, 26,0), var(--sv-orange), rgba(232, 104, 26,0));
}

.sdh-svc__line--right {
    left: auto;
    right: -1px;
}

/* hover / focus / active → lines in, title white, icon lit (Consultio behaviour) */
.sdh-svc__tile:hover,
.sdh-svc__tile:focus-visible,
.sdh-svc__tile.is-active {
    background-color: rgba(232, 104, 26,.05);
}

    .sdh-svc__tile:hover .sdh-svc__line,
    .sdh-svc__tile:focus-visible .sdh-svc__line,
    .sdh-svc__tile.is-active .sdh-svc__line {
        opacity: 1;
    }

    .sdh-svc__tile:hover .sdh-svc__tile-title,
    .sdh-svc__tile:focus-visible .sdh-svc__tile-title,
    .sdh-svc__tile.is-active .sdh-svc__tile-title {
        color: var(--sv-title);
    }

    .sdh-svc__tile:hover .sdh-svc__tile-cap,
    .sdh-svc__tile:focus-visible .sdh-svc__tile-cap,
    .sdh-svc__tile.is-active .sdh-svc__tile-cap {
        color: #c9cdd9;
    }

    .sdh-svc__tile:hover .sdh-svc__tile-icon,
    .sdh-svc__tile:focus-visible .sdh-svc__tile-icon,
    .sdh-svc__tile.is-active .sdh-svc__tile-icon {
        opacity: 1;
        transform: translateY(-2px);
    }

.sdh-svc__tile:focus-visible {
    outline: 2px solid var(--sv-orange);
    outline-offset: -2px;
}

/* the demo's statically-active tile shows a small dot beside its title */
.sdh-svc__tile.is-active .sdh-svc__tile-title::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--sv-orange);
    box-shadow: 0 0 10px rgba(232, 104, 26,.9);
    vertical-align: 2px;
}

/* --- entrance animations (wow.js equivalents) ------------------------------ */
.sdh-svc__head,
.sdh-svc__side > * {
    opacity: 0;
    transform: translateY(26px);
}

.sdh-svc__tile {
    opacity: 0;
    transform: translateY(140px);
}

.sdh-svc.is-in .sdh-svc__head {
    animation: sdhSvcBounce .9s ease .15s forwards;
}

.sdh-svc.is-in .sdh-svc__side > * {
    animation: sdhSvcFadeUp .7s ease forwards;
}

    .sdh-svc.is-in .sdh-svc__side > *:nth-child(1) {
        animation-delay: .35s;
    }

    .sdh-svc.is-in .sdh-svc__side > *:nth-child(2) {
        animation-delay: .5s;
    }

    .sdh-svc.is-in .sdh-svc__side > *:nth-child(3) {
        animation-delay: .6s;
    }

    .sdh-svc.is-in .sdh-svc__side > *:nth-child(4) {
        animation-delay: .7s;
    }

.sdh-svc.is-in .sdh-svc__tile {
    animation: sdhSvcMoveUp .65s ease forwards; /* demo: .65s ease moveUp, isotope stagger 30ms */
    animation-delay: calc(var(--i) * 50ms + .25s);
}

@keyframes sdhSvcMoveUp {
    from {
        opacity: 0;
        transform: translateY(140px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sdhSvcFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sdhSvcBounce {
    0% {
        opacity: 0;
        transform: translateY(-34px);
    }

    45% {
        opacity: 1;
        transform: translateY(10px);
    }

    70% {
        transform: translateY(-6px);
    }

    85% {
        transform: translateY(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
    .sdh-svc__container {
        padding: 72px 20px 80px;
    }

    .sdh-svc__cols {
        grid-template-columns: 1fr;
        gap: 52px 0;
    }

    .sdh-svc__head {
        margin-bottom: 48px;
    }
}

@media (max-width: 620px) {
    .sdh-svc__grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .sdh-svc__grid > .sdh-svc__tile:nth-child(3n) {
            border-right: none;
        }

        .sdh-svc__grid > .sdh-svc__tile:nth-child(2n) {
            border-right: 1px solid var(--sv-border);
        }

        .sdh-svc__grid > .sdh-svc__tile:nth-last-child(-n+3) {
            border-bottom: none;
        }

        .sdh-svc__grid > .sdh-svc__tile:nth-last-child(-n+2) {
            border-bottom: 1px solid var(--sv-border);
        }

    .sdh-svc__bar-label {
        min-width: 118px;
    }

    .sdh-svc__tab {
        padding: 0 12px 10px;
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    .sdh-svc__grid {
        grid-template-columns: 1fr;
    }

        .sdh-svc__grid > .sdh-svc__tile {
            border-right: 1px solid var(--sv-border);
            border-bottom: none;
        }

            .sdh-svc__grid > .sdh-svc__tile:last-child {
                border-bottom: 1px solid var(--sv-border);
            }
}

/* --- reduced motion (per DESIGN.md: extend the pattern, never fight it) ----- */
@media (prefers-reduced-motion: reduce) {
    .sdh-svc__head,
    .sdh-svc__side > *,
    .sdh-svc__tile {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .sdh-svc__bar-fill {
        transition: none;
    }

    .sdh-svc__btn, .sdh-svc__tile, .sdh-svc__line {
        transition: none;
    }

    .sdh-svc__panel, .sdh-svc__panel.is-open {
        transition: none;
    }

    .sdh-svc__deco,
    .sdh-svc__side,
    .sdh-svc__grid-wrap,
    .sdh-svc__bg {
        transform: none !important;
    }

    .sdh-svc__deco {
        display: none;
    }
}


/*=======================================
CTA
=======================================*/
/* ============ SCOPED TOKENS (logo palette, DESIGN.md) + RESET ============ */
.cs-section {
    /* brand colours sampled from the logo */
    --logo-orange: #0a0a0a;
    --logo-ink: #0a0a0a;
    --logo-blue: #009cfc;
    --logo-green: #97c301;
    --logo-pink: #f00038;
    --logo-white: #ffffff;
    /* site tokens (DESIGN.md) */
    --text: #2e2e35;
    --border: #e6e6ec;
    --white: #ffffff;
    /* type (DESIGN.md: system stack, no webfont) */
    --font-head: "Segoe UI Semibold","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --font-body: "Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    display: grid;
    grid-template-columns: clamp(300px,25.2%,470px) 1fr;
    background: var(--white);
    position: relative;
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.5;
}

    .cs-section, .cs-section *, .cs-section *::before, .cs-section *::after {
        box-sizing: border-box
    }

.cs-main {
    display: flex;
    flex-direction: column;
    min-width: 0
}

/* ============ LEFT PINK PANEL : APPOINTMENT FORM ============ */
.cs-testimonial {
    background: var(--logo-pink);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 88px 42px 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cs-map {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 150%;
    max-width: none;
    opacity: .3;
    pointer-events: none;
    user-select: none;
}

.cs-form-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.cs-eyebrow {
    font: 700 11.5px/1 var(--font-head);
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--logo-ink);
    margin: 0 0 12px;
}

.cs-form-title {
    font: 700 29px/1.22 var(--font-head);
    color: var(--white);
    margin: 0 0 12px
}

.cs-form-sub {
    font: 400 13.5px/1.7 var(--font-body);
    color: var(--logo-ink);
    margin: 0 0 26px
}

.cs-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    color-scheme: dark;
    text-align: left
}

.cs-field input, .cs-field select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 6px;
    border: 1px solid var(--logo-ink);
    background: var(--logo-ink);
    color: var(--white);
    font: 400 14px/1.3 var(--font-body);
    outline: none;
    transition: background .3s,border-color .3s;
    appearance: none;
    -webkit-appearance: none;
}

.cs-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

    .cs-field select:invalid {
        color: rgba(255,255,255,.75)
    }

.cs-field input::placeholder {
    color: rgba(255,255,255,.72)
}

.cs-field input:focus, .cs-field select:focus {
    border-color: var(--logo-white);
    background: var(--logo-ink)
}

.cs-field select option {
    color: var(--text);
    background: var(--white)
}

.cs-field input[type="date"] {
    cursor: pointer
}

    .cs-field input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer
    }

.cs-submit {
    margin-top: 5px;
    padding: 15px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--logo-ink);
    color: var(--white);
    font: 700 14.5px/1 var(--font-head);
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .3s,color .3s,transform .25s,box-shadow .25s;
}

    .cs-submit:hover {
        background: var(--white);
        color: var(--logo-ink);
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0,0,0,.35)
    }

.cs-helpline {
    margin: 18px 0 0;
    font: 600 12.5px/1.6 var(--font-body);
    color: var(--logo-ink)
}

    .cs-helpline a {
        color: var(--logo-ink);
        font-weight: 400;
        text-decoration: none;
        border-bottom: 1.5px solid var(--logo-ink);
        transition: border-color .3s
    }

        .cs-helpline a:hover {
            border-color: transparent
        }
/* success state */
.cs-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 0
}

.cs-form-wrap.done .cs-form,
.cs-form-wrap.done .cs-form-sub {
    display: none
}

.cs-form-wrap.done .cs-success {
    display: flex
}

.cs-success svg {
    margin-bottom: 10px
}

.cs-success .ok-c {
    stroke: var(--logo-ink)
}

.cs-success .ok-t {
    stroke: var(--white)
}

/* ============ SERVICE CARDS (hover reveal + accent coding) ============ */
.cs-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    flex: 1 1 auto
}

.cs-card {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border-top: 3px solid var(--acc);
    padding: 54px 42px 46px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cs-cards .cs-card:nth-child(1) {
    --acc: var(--logo-blue)
}
/* shoulder / joints  */
.cs-cards .cs-card:nth-child(2) {
    --acc: var(--logo-pink)
}
/* knee               */
.cs-cards .cs-card:nth-child(3) {
    --acc: var(--logo-green)
}
/* spine              */
.cs-card + .cs-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26%;
    height: 48%;
    width: 1px;
    background: var(--border);
    transition: opacity .35s;
    z-index: 2;
}

.cs-card:hover::before, .cs-card:hover + .cs-card::before {
    opacity: 0
}

.cs-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity .45s ease,transform .7s ease;
}

    .cs-card-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(10,10,10,.55),rgba(10,10,10,.68)); /* --logo-ink tint */
    }

.cs-card:hover .cs-card-bg {
    opacity: 1;
    transform: scale(1)
}

.cs-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%
}

.cs-icon {
    width: 92px;
    height: 92px;
    border-radius: 22px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--acc) 12%, white); /* tint chip, DESIGN.md */
    transition: background .35s;
}

    .cs-icon svg {
        stroke: var(--acc);
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.cs-card:hover .cs-icon {
    background: rgba(255,255,255,.14)
}

.cs-card h3 {
    font: 700 23px/1.3 var(--font-head);
    color: var(--logo-ink);
    margin: 0 0 18px;
    transition: color .35s;
}

.cs-card p {
    font: 400 15px/1.9 var(--font-body);
    color: var(--text);
    margin: 0 0 28px;
    max-width: 335px;
    transition: color .35s;
}

.cs-readmore {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    font: 700 14.5px/1 var(--font-head);
    color: var(--logo-ink);
    text-decoration: none;
    transition: color .35s;
}

    .cs-readmore .arr {
        stroke: var(--logo-ink);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .35s,transform .3s
    }

.cs-card:hover h3 {
    color: var(--white)
}

.cs-card:hover p {
    color: rgba(255,255,255,.93)
}

.cs-card:hover .cs-readmore,
.cs-card:hover .cs-readmore .arr {
    color: var(--logo-pink);
    stroke: var(--logo-pink)
}

    .cs-card:hover .cs-readmore .arr {
        transform: translateX(4px)
    }

/* ============ DARK CTA STRIP ============ */
.cs-cta {
    background: var(--logo-orange);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 66px 350px 66px 126px;
    min-height: 357px;
    display: flex;
    align-items: center;
}

.cs-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 70px;
    align-items: center;
    width: 100%
}

.cs-cta h2 {
    font: 800 46px/1.16 var(--font-head);
    margin: 0 0 28px;
    letter-spacing: -.5px;
    color: var(--white);
}

.cs-cta-link {
    color: var(--white);
    font: 700 15px/1.4 var(--font-body);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    transition: text-underline-offset .3s;
}

    .cs-cta-link:hover {
        text-underline-offset: 8px
    }

.cs-cta p {
    font: 400 16px/1.75 var(--font-body);
    color: var(--white);
    margin: 0 0 32px;
    max-width: 410px;
}
/* hero-banner button pattern: rounded-rect + double-circle fill hover */
.cs-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background: var(--logo-pink);
    color: var(--white);
    font: 700 14.5px/1 var(--font-head);
    letter-spacing: .2px;
    padding: 18px 37px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .5s,color .5s,transform .3s,box-shadow .3s;
}

    .cs-btn span {
        position: relative;
        z-index: 1
    }

    .cs-btn::before, .cs-btn::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--white);
        transition: width .5s ease,height .5s ease;
        z-index: 0;
    }

    .cs-btn::before {
        top: -14px;
        left: -14px
    }

    .cs-btn::after {
        bottom: -14px;
        right: -14px
    }

    .cs-btn:hover {
        background: var(--white);
        color: var(--logo-ink);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.28)
    }

        .cs-btn:hover::before, .cs-btn:hover::after {
            width: 150%;
            height: 340%
        }

.cs-man {
    position: absolute;
    right: 22px;
    bottom: 0;
    height: 94%;
    max-height: 352px;
    pointer-events: none;
    user-select: none;
}

/* ============ QUALITY FLOOR (DESIGN.md) ============ */
.cs-btn:focus-visible, .cs-cta-link:focus-visible {
    outline: 2px solid var(--logo-white);
    outline-offset: 3px;
}

.cs-submit:focus-visible {
    outline: 2px solid var(--logo-white);
    outline-offset: 3px;
}

.cs-readmore:focus-visible {
    outline: 2px solid var(--logo-pink);
    outline-offset: 3px
}

.cs-field input:focus-visible, .cs-field select:focus-visible {
    outline: 2px solid var(--logo-white);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-section, .cs-section * {
        transition: none !important;
        animation: none !important
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1380px) {
    .cs-cta {
        padding-right: 300px
    }
}

@media (max-width:1180px) {
    .cs-section {
        grid-template-columns: 1fr
    }

    .cs-testimonial {
        padding: 72px 32px 76px
    }

    .cs-map {
        width: 640px
    }

    .cs-cta {
        padding: 56px 48px 250px
    }

    .cs-cta-inner {
        grid-template-columns: 1fr;
        gap: 38px;
        align-items: start
    }

    .cs-man {
        height: auto;
        width: min(340px,46%);
        right: 16px
    }
}

@media (max-width:940px) {
    .cs-cards {
        grid-template-columns: 1fr
    }

    .cs-card + .cs-card::before {
        display: none
    }

    .cs-card {
        padding: 46px 28px 40px
    }
}

@media (max-width:600px) {
    .cs-cta {
        padding: 46px 24px 215px
    }

        .cs-cta h2 {
            font-size: 34px
        }

    .cs-man {
        width: 230px
    }

    .cs-testimonial {
        padding: 56px 24px 64px
    }
}

/*=============================================== 
BLOG AND CONTACT CTA
===============================================*/
/* ============================================================
   Shri Datta Hospital — Blog + Contact sections only
   Scoped to .hc-blog / .hc-contact (no html, body, or * resets)
   Blog colours follow DESIGN.md tokens.
   Contact-info card colours are left unchanged.
   ============================================================ */

.hc-blog {
    --charcoal: #32323a;
    --orange: #E8681A;
    --accent: #E8681A;
    --orange-dark: #C2540E;
    --orange-light: #fdeee4;
    --text: #2e2e35;
    --muted: #6a6a75;
    --border: #e6e6ec;
    --white: #ffffff;
    --font-head: "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.6;
    box-sizing: border-box;
}

.hc-contact {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.6;
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   1. BLOG
   ------------------------------------------------------------ */

.hc-blog {
    padding: 78px 0 48px;
    background: #ffffff;
}

.hc-blog__wrap {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.hc-blog__intro {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 46px;
}

.hc-blog__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
}

    .hc-blog__kicker::before {
        content: "";
        width: 34px;
        height: 3px;
        background: var(--orange);
        border-radius: 4px;
    }

.hc-blog__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.038em;
    font-weight: 600;
    color: var(--charcoal);
    max-width: 15ch;
}

.hc-blog__lead {
    margin: 0;
    padding-top: 38px;
    max-width: 48ch;
    color: var(--text);
    font-size: 16.5px;
    line-height: 1.7;
}

.hc-blog__grid {
    display: grid;
    grid-template-columns: 1fr 1.38fr 1fr;
    grid-template-areas:
        "a feat b"
        "c feat d";
    column-gap: 36px;
    row-gap: 36px;
    align-items: start;
}

.hc-blog__post {
    min-width: 0;
    box-sizing: border-box;
}

.hc-blog__post--a {
    grid-area: a;
}

.hc-blog__post--feat {
    grid-area: feat;
}

.hc-blog__post--b {
    grid-area: b;
}

.hc-blog__post--c {
    grid-area: c;
}

.hc-blog__post--d {
    grid-area: d;
}

.hc-blog__media {
    overflow: hidden;
    border-radius: 4px;
    background: var(--border);
    margin-bottom: 16px;
}

    .hc-blog__media img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.55s ease;
    }

.hc-blog__post:hover .hc-blog__media img {
    transform: scale(1.045);
}

.hc-blog__post--feat .hc-blog__media img {
    height: 460px;
}

.hc-blog__post-title {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--charcoal);
}

.hc-blog__post--feat .hc-blog__post-title {
    font-size: 32px;
    letter-spacing: -0.038em;
    margin-top: 4px;
    margin-bottom: 10px;
    max-width: 18ch;
}

.hc-blog__meta {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 400;
}

.hc-blog__more {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    color: var(--orange);
    font-size: 14.5px;
    font-weight: 400;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    gap: 6px;
}

    .hc-blog__more:hover {
        gap: 10px;
        color: var(--orange-dark);
    }

    .hc-blog__more:focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: 3px;
    }

.hc-blog__excerpt {
    margin: 12px 0 0;
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.65;
}

@media (max-width: 1100px) {
    .hc-blog__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "feat feat"
            "a b"
            "c d";
    }

    .hc-blog__post--feat .hc-blog__media img {
        height: 380px;
    }
}

@media (max-width: 780px) {
    .hc-blog {
        padding-top: 48px;
    }

    .hc-blog__wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hc-blog__intro {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hc-blog__lead {
        padding-top: 0;
    }

    .hc-blog__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "feat"
            "a"
            "b"
            "c"
            "d";
    }

    .hc-blog__media img,
    .hc-blog__post--feat .hc-blog__media img {
        height: 220px;
    }
}


/* ------------------------------------------------------------
   2. CONTACT CTA
   ------------------------------------------------------------ */

.hc-contact {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: #ececec;
}

.hc-contact__map {
    width: 100%;
    height: 100%;
    /*    filter: grayscale(1) contrast(0.95) brightness(1.05);*/
    filter: none;
}

.hc-contact .leaflet-control-attribution {
    font-size: 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

.hc-contact__pin {
    background: none !important;
    border: 0 !important;
}

.hc-contact__pin-dot {
    width: 22px;
    height: 22px;
    background: #1f2937;
    border: 3px solid #111111;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
    position: relative;
    box-sizing: border-box;
}

    .hc-contact__pin-dot::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        left: 4px;
        background: #ffffff;
        border-radius: 50%;
    }

.hc-contact__place {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 8;
    width: 280px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    padding: 12px 14px;
    font-size: 13px;
    color: #334155;
    box-sizing: border-box;
}

.hc-contact__place-title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

.hc-contact__place-text {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.45;
}

.hc-contact__place-rating {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #475569;
}

.hc-contact__star {
    color: #f59e0b;
}

.hc-contact__place-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}

.hc-contact__place-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    box-sizing: border-box;
}

    .hc-contact__place-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.hc-contact__panel {
    position: absolute;
    top: 0;
    right: 11%;
    width: 360px;
    height: 100%;
    background: #050505;
    color: #ffffff;
    z-index: 9;
    padding: 46px 40px 36px 42px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    box-sizing: border-box;
}

    .hc-contact__panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 28px solid #ececec;
        border-right: 28px solid transparent;
        z-index: 3;
    }

    .hc-contact__panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.35) 50%);
        z-index: 2;
    }

.hc-contact__dots {
    position: absolute;
    right: -40px;
    top: 40px;
    width: 280px;
    height: 280px;
    opacity: 0.28;
    pointer-events: none;
}

.hc-contact__heading {
    margin: 0 0 38px;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

    .hc-contact__heading::after {
        content: "";
        width: 42px;
        height: 4px;
        background: #E8681A;
        border-radius: 2px;
    }

.hc-contact__row {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.hc-contact__icon {
    grid-row: 1 / span 2;
    margin-top: 4px;
}

.hc-contact__label {
    margin: 0;
    color: #d1d5db;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.hc-contact__value {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #ffffff;
    text-decoration: none;
}

    .hc-contact__value:hover,
    .hc-contact__label:hover {
        color: #E8681A;
    }

.hc-contact__value--sm {
    font-size: 22px;
}

@media (max-width: 1024px) {
    .hc-contact__panel {
        right: 0;
        width: 320px;
    }
}

@media (max-width: 780px) {
    .hc-contact {
        height: auto;
    }

    .hc-contact__map {
        height: 340px;
    }

    .hc-contact__panel {
        position: relative;
        width: 100%;
        right: auto;
        height: auto;
    }

    .hc-contact__place {
        width: min(260px, calc(100% - 36px));
    }
}


.hc-contact__map iframe {
    filter: none !important;
}



/*==============================================
New Blogs section 
==============================================*/
/* =====================================================================
   Shri Datta Hospital — "Hospital Blog" parallax band + blog slider
   (.sdh-cb) — case-studies style layout (ref: consultio-corporate2),
   restyled with the site tokens from DESIGN.md.

   SCOPED ON PURPOSE — every selector starts with .sdh-cb.
   No html / body / :root rules; the one universal selector is scoped
   UNDER .sdh-cb so the section never depends on (or affects) the
   site's global reset.

   PARALLAX — pure CSS, same technique as the consultio reference:
   background-attachment: fixed on the band. The photo layer comes from
   the band's INLINE style in the .cshtml, where Razor resolves the
   ~/ path server-side via @Url.Content (a CSS file can never resolve
   ~/). No JavaScript is required for the parallax.

   SLIDER — the only JS needed is the carousel (arrows + autoplay),
   inline at the bottom of hospital-blog-section.html.

   Markup: hospital-blog-section.html → <section class="sdh-cb">
   ===================================================================== */

.sdh-cb {
    /* scoped copy of the site tokens (DESIGN.md) */
    --cb-orange: #E8681A;
    --cb-orange-dark: #C2540E;
    --cb-orange-light: #fdeee4;
    --cb-charcoal: #32323a;
    --cb-text: #2e2e35;
    --cb-muted: #6a6a75;
    --cb-border: #e6e6ec;
    --cb-white: #ffffff;
    --cb-ink: #171b20;
    /* logo speciality accents — categorise only; orange still "acts" */
    --cb-blue: #009cfc; /* shoulder */
    --cb-green: #97c301; /* spine    */
    --cb-pink: #fa016a; /* knee     */
    --cb-blue-tint: #e0f3ff; /* ~12% tint for pill backgrounds */
    --cb-green-tint: #f3f8e1;
    --cb-pink-tint: #fee1ed;
    --cb-container: 1400px;
    --cb-font-head: "Segoe UI Semibold","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --cb-font-body: "Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    position: relative;
    background: var(--cb-white);
    font-family: var(--cb-font-body);
    color: var(--cb-text);
    line-height: 1.5;
}

    /* scoped box-sizing — the section is self-contained and must not rely
   on the site's global * reset (without this, card padding + borders
   add on top of the flex-basis and the 3rd card gets sliced) */
    .sdh-cb,
    .sdh-cb *,
    .sdh-cb *::before,
    .sdh-cb *::after {
        box-sizing: border-box;
    }

/* ---- parallax band ---------------------------------------------------
   The two background-IMAGE layers (shade gradient + photo) are set in
   the band's inline style so Razor can resolve ~/ server-side.
   Everything else (tint, blend, sizing, the fixed attachment that
   creates the parallax) lives here.                               */
.sdh-cb__band {
    position: relative;
    padding: 110px 24px 330px;
    text-align: center;
    color: var(--cb-white);
    background-color: var(--cb-orange); /* multiply tint target  */
    background-blend-mode: normal, multiply; /* shade normal, photo × orange */
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed; /* ← the parallax effect */
}

.sdh-cb__head {
    position: relative;
    z-index: 1;
}

.sdh-cb__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 18px;
    font-family: var(--cb-font-head);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .5px;
    color: var(--cb-white);
}

.sdh-cb__line {
    width: 44px;
    height: 2px;
    background: currentColor;
    opacity: .9;
    flex: none;
}

.sdh-cb__title {
    margin: 0 auto 22px;
    max-width: none; /* one line on desktop — see the min-width block below */
    font-family: var(--cb-font-head);
    font-weight: 600;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.18;
    color: var(--cb-white);
}

.sdh-cb__sub {
    margin: 0 auto;
    max-width: 760px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255,255,255,.93);
    text-align: center !important; /* centred under the heading (beats the site-wide justify) */
}

/* sub-heading on ONE line wherever it fits (~1070px at 17px); narrower
   screens wrap it, still centred */
@media (min-width: 1140px) {
    .sdh-cb__sub {
        max-width: none;
        white-space: nowrap;
    }
}

/* heading + sub-heading each on ONE line where there is room for it;
   narrower screens fall back to normal wrapping */
/* the one-line heading needs ~1180px at 52px, so only force it from 1280px
   (at 992–1279px it ran off the right edge and made the page scroll sideways) */
@media (min-width: 1280px) {
    .sdh-cb__title {
        white-space: nowrap;
    }
}


/* ---- slider (cards overlap the band) -------------------------------- */
.sdh-cb__wrap {
    max-width: var(--cb-container);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

.sdh-cb__slider {
    position: relative;
    margin-top: -270px; /* pulls the cards up over the band */
    padding: 0 78px 70px; /* side gutters keep the arrows OUTSIDE the cards */
}

.sdh-cb__viewport {
    overflow: hidden;
    padding: 14px 6px 36px; /* room for hover-lift + shadows   */
    margin: -14px -6px 0;
}

.sdh-cb__track {
    display: flex;
    gap: 30px;
    will-change: transform;
}

.sdh-cb__card {
    /* card width per view (3 on desktop/tablet, 1 on phones — see 799px block).
       js/blog-slider.js sets the same value inline; this keeps the layout
       right before/without the script. */
    flex: 0 0 calc((100% - 60px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    background: var(--cb-white);
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    padding: 16px 22px 30px;
    text-align: center;
    box-shadow: 0 22px 45px rgba(23,27,32,.16);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .sdh-cb__card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 60px rgba(23,27,32,.22);
    }

.sdh-cb__media {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

    .sdh-cb__media img {
        display: block;
        width: 100%;
        height: 225px;
        object-fit: cover;
        transition: transform .6s ease;
    }

.sdh-cb__card:hover .sdh-cb__media img {
    transform: scale(1.07);
}

/* speciality tag pills — tint background, ink text, full-colour dot */
.sdh-cb__tag {
    margin: 20px 0 12px;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--cb-ink);
}

    .sdh-cb__tag::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 7px;
        vertical-align: 1px;
        background: var(--cb-orange);
    }

.sdh-cb__tag--pink {
    background: var(--cb-pink-tint);
}

    .sdh-cb__tag--pink::before {
        background: var(--cb-pink);
    }

.sdh-cb__tag--green {
    background: var(--cb-green-tint);
}

    .sdh-cb__tag--green::before {
        background: var(--cb-green);
    }

.sdh-cb__tag--blue {
    background: var(--cb-blue-tint);
}

    .sdh-cb__tag--blue::before {
        background: var(--cb-blue);
    }

.sdh-cb__card-title {
    margin: 0 0 10px;
    font-family: var(--cb-font-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.35;
    color: var(--cb-charcoal);
}

.sdh-cb__card-text {
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cb-muted);
}

/* "Read more" + circular arrow (orange acts) */
.sdh-cb__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    font-family: var(--cb-font-head);
    font-weight: 400;
    font-size: 15px;
    color: var(--cb-charcoal);
    text-decoration: none;
    transition: color .3s ease;
}

    .sdh-cb__more:hover {
        color: var(--cb-orange-dark);
    }

    .sdh-cb__more:focus-visible {
        outline: 3px solid var(--cb-orange);
        outline-offset: 3px;
        border-radius: 4px;
    }

.sdh-cb__arrow {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cb-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease;
}

    .sdh-cb__arrow svg {
        width: 18px;
        height: 18px;
        transition: transform .3s ease;
    }

.sdh-cb__more:hover .sdh-cb__arrow {
    background: var(--cb-orange-dark);
}

    .sdh-cb__more:hover .sdh-cb__arrow svg {
        transform: translateX(3px);
    }

/* ---- slider prev / next buttons (outside the cards, left & right) --- */
.sdh-cb__nav {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--cb-border);
    background: var(--cb-white);
    color: var(--cb-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23,27,32,.2);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

    .sdh-cb__nav svg {
        width: 20px;
        height: 20px;
    }

.sdh-cb__nav--prev {
    left: 0;
}
/* sits in the reserved gutter, outside the cards */
.sdh-cb__nav--next {
    right: 0;
}

.sdh-cb__nav:hover {
    background: var(--cb-orange);
    color: var(--cb-white);
    transform: translateY(-50%) scale(1.06);
}

.sdh-cb__nav:focus-visible {
    outline: 3px solid var(--cb-orange);
    outline-offset: 3px;
}

/* ---- responsive / motion -------------------------------------------- */
@media (max-width: 1100px) {
    .sdh-cb__slider {
        padding-left: 64px;
        padding-right: 64px;
    }
}

@media (max-width: 1024px) {
    .sdh-cb__track {
        gap: 22px;
    }

    /* tablets: 2 cards per view */
    .sdh-cb__card {
        flex-basis: calc((100% - 22px) / 2);
    }

    .sdh-cb__media img {
        height: 200px;
    }
}

@media (max-width: 900px) {
    .sdh-cb__band {
        padding: 90px 20px 300px;
        background-attachment: scroll, scroll; /* fixed is janky on small screens */
    }

    .sdh-cb__slider {
        margin-top: -230px;
        padding-left: 56px;
        padding-right: 56px;
    }

    .sdh-cb__media img {
        height: 240px;
    }
}

@media (max-width: 799px) {
    /* arrows stay outside the card */
    .sdh-cb__slider {
        padding-left: 52px;
        padding-right: 52px;
    }

    .sdh-cb__nav {
        width: 44px;
        height: 44px;
        top: calc(50% - 30px);
    }
}

/* phones: 1 card per view */
@media (max-width: 639px) {
    .sdh-cb__card {
        flex-basis: 100%;
    }
}

@media (max-width: 560px) {
    .sdh-cb__band {
        padding: 70px 16px 280px;
    }

    /* phones: card uses the full width, arrows sit side by side BELOW it */
    .sdh-cb__wrap {
        padding: 0 16px;
    }

    .sdh-cb__slider {
        margin-top: -210px;
        padding: 0 0 96px;
    }

    .sdh-cb__media img {
        height: 210px;
    }

    .sdh-cb__card {
        padding: 14px 16px 26px;
    }

    .sdh-cb__nav {
        width: 44px;
        height: 44px;
        top: auto;
        bottom: 30px;
        transform: none;
    }

        .sdh-cb__nav:hover {
            transform: scale(1.06);
        }

    .sdh-cb__nav--prev {
        left: calc(50% - 54px);
    }

    .sdh-cb__nav--next {
        right: calc(50% - 54px);
    }
}

/* (no hover/pointer override on purpose: iOS already treats fixed as
   scroll, and the override needlessly disabled the effect on some
   desktop setups) */

@media (prefers-reduced-motion: reduce) {
    .sdh-cb__band {
        background-attachment: scroll, scroll;
    }

    .sdh-cb__card,
    .sdh-cb__media img,
    .sdh-cb__arrow,
    .sdh-cb__arrow svg,
    .sdh-cb__nav,
    .sdh-cb__more {
        transition: none;
    }

        .sdh-cb__card:hover {
            transform: none;
        }

            .sdh-cb__card:hover .sdh-cb__media img {
                transform: none;
            }
}





/*==============================================
New ABOUT US
==============================================*/
/* ==========================================================================
   1. BOX-SIZING — explicit element list, no * / html / body reset
   ========================================================================== */
.sd-about,
.sd-about__bg,
.sd-about__watermark,
.sd-about__inner,
.sd-about__media,
.sd-about__media img,
.sd-about__content,
.sd-about__badge,
.sd-about__badge-dot,
.sd-about__title,
.sd-about__text,
.sd-about__list,
.sd-about__list li,
.sd-about__icon,
.sd-about__stat,
.sd-about__stat-label,
.sd-about__bar-row,
.sd-about__track,
.sd-about__fill,
.sd-about__value,
.sd-about__actions,
.sd-about__play,
.sd-about__btn {
    box-sizing: border-box;
}


/* ==========================================================================
   2a. VARIANT TOKENS — LIGHT
   Hospital site palette: white-based ground, charcoal type, logo-blue
   icons/bar/play, orange pill CTA (site convention: "orange means act").
   ========================================================================== */
.sd-about--light {
    /* ground */
    --sd-bg: #ffffff; /* --white */
    --sd-ground: linear-gradient(145deg, #eaf3ff 0%, #f6faff 28%, #fdf3ea 68%, #fdeadb 100%);
    --sd-frame: #f9f8f6; /* collage border vs. the ground behind it */
    --sd-glow: radial-gradient(52% 54% at 4% 2%, rgba(0, 156, 252, .27) 0%, transparent 70%), radial-gradient(56% 50% at 98% 104%, rgba(232, 104, 26, .21) 0%, transparent 70%), radial-gradient(40% 34% at 54% 100%, rgba(151, 195, 1, .14) 0%, transparent 72%);
    --sd-hairline: rgba(50, 50, 58, .10);
    --sd-node: rgba(232, 104, 26, .45);
    --sd-watermark: rgba(50, 50, 58, .07);
    /* type */
    --sd-title: #32323a; /* --charcoal */
    --sd-body: #6a6a75; /* --muted */
    --sd-body-strong: #2e2e35; /* --text */
    --sd-label: #32323a; /* --charcoal (logo-green is only 2.1:1 on white) */
    /* accents */
    --sd-accent: #009cfc; /* --logo-blue : icons, bar, play */
    --sd-accent-soft: rgba(0, 156, 252, .12);
    --sd-orange: #E8681A; /* --orange */
    --sd-orange-soft: rgba(232, 104, 26, .18);
    --sd-bar-glow: 0 0 0 rgba(0, 156, 252, 0);
    --sd-track: #ecebf0;
    /* badge — white fill + orange border so it reads against the tinted ground */
    --sd-badge-bg: #ffffff;
    --sd-badge-border: rgba(232, 104, 26, .55);
    --sd-badge-fg: #32323a;
    --sd-badge-shadow: 0 6px 18px rgba(232, 104, 26, .18);
    /* CTA */
    --sd-cta-bg: #E8681A; /* --orange */
    --sd-cta-bg-hover: #C2540E;
    --sd-cta-fg: #ffffff;
    /* elevation */
    --sd-media-shadow: 0 24px 55px rgba(23, 27, 32, .16);
    --sd-btn-shadow: 0 10px 26px rgba(232, 104, 26, .26);
}


/* ==========================================================================
   2b. VARIANT TOKENS — DARK
   Reference layout recoloured with Shri Datta logo hues: navy ground, white
   headline, cyan bar/play, green-yellow label, green pill with ink text.
   ========================================================================== */
.sd-about--dark {
    /* ground */
    --sd-bg: #101d2b; /* deep navy — logo-blue darkened toward logo-ink */
    --sd-ground: linear-gradient(165deg, #0b1725 0%, #101d2b 48%, #171b20 100%);
    --sd-frame: #101d2b;
    --sd-glow: radial-gradient(78% 62% at 8% -4%, rgba(0, 156, 252, .24) 0%, transparent 62%), radial-gradient(68% 58% at 96% 104%, rgba(0, 156, 252, .15) 0%, transparent 62%), radial-gradient(46% 40% at 78% 14%, rgba(151, 195, 1, .07) 0%, transparent 68%);
    --sd-hairline: rgba(255, 255, 255, .06);
    --sd-node: rgba(0, 156, 252, .42);
    --sd-watermark: rgba(255, 255, 255, .05);
    /* type */
    --sd-title: #ffffff;
    --sd-body: rgba(255, 255, 255, .82);
    --sd-body-strong: #ffffff;
    --sd-label: #97c301; /* --logo-green : the "green-yellow" label */
    /* accents */
    --sd-accent: #009cfc; /* --logo-blue : the "cyan" of the original */
    --sd-accent-soft: rgba(0, 156, 252, .16);
    --sd-orange: #E8681A; /* --logo-orange */
    --sd-orange-soft: rgba(232, 104, 26, .22);
    --sd-bar-glow: 0 0 20px rgba(0, 156, 252, .55);
    --sd-track: rgba(255, 255, 255, .10);
    /* badge */
    --sd-badge-bg: rgba(232, 104, 26, .14);
    --sd-badge-border: rgba(232, 104, 26, .50);
    --sd-badge-fg: #E8681A;
    --sd-badge-shadow: none;
    /* CTA */
    --sd-cta-bg: #97c301; /* --logo-green : bright pill */
    --sd-cta-bg-hover: #a8d601;
    --sd-cta-fg: #171b20; /* --logo-ink  : the "black text" of the original */
    /* elevation */
    --sd-media-shadow: 0 26px 60px rgba(0, 0, 0, .48);
    --sd-btn-shadow: 0 10px 28px rgba(151, 195, 1, .22);
}


/* ==========================================================================
   3. BASE STRUCTURE
   ========================================================================== */
.sd-about {
    /* shared, variant-agnostic */
    --sd-font-head: "Segoe UI Semibold", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sd-font-body: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sd-bar-fill: linear-gradient(90deg, #0079fd 0%, #009cfc 55%, #4fc3ff 100%);
    position: relative;
    display: block;
    width: 100%;
    padding: 120px 32px;
    background-color: var(--sd-bg);
    background-image: var(--sd-ground, none);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: var(--sd-font-body);
    color: var(--sd-body);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* background overlay: network pattern, then the variant glows underneath */
.sd-about__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1.5px 1.5px, var(--sd-node) 1.4px, transparent 1.8px), linear-gradient(to right, var(--sd-hairline) 1px, transparent 1px), linear-gradient(to bottom, var(--sd-hairline) 1px, transparent 1px), linear-gradient(62deg, transparent 0 49.75%, var(--sd-hairline) 49.75% 50.05%, transparent 50.05%), linear-gradient(-62deg, transparent 0 74.75%, var(--sd-hairline) 74.75% 75.05%, transparent 75.05%), var(--sd-glow);
    background-size: 46px 46px, 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* background: faint oversized "ABOUT US" watermark across the top */
.sd-about__watermark {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--sd-font-head);
    font-size: clamp(80px, 15vw, 240px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sd-watermark);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.sd-about__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .87fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}


/* ==========================================================================
   4. LEFT COLUMN — overlapping two-image collage
   ========================================================================== */
.sd-about__media {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 600 / 730;
}

    .sd-about__media img {
        position: absolute;
        display: block;
        object-fit: cover;
        border-radius: 14px;
    }

.sd-about__img--top {
    top: 0;
    left: 0;
    width: 82%;
    height: 55.2%;
    object-position: 50% 42%;
    box-shadow: var(--sd-media-shadow);
}

.sd-about__img--bottom {
    right: 0;
    bottom: 0;
    width: 70%;
    height: 57.5%;
    object-position: 50% 38%;
    border: 5px solid var(--sd-frame);
    box-shadow: var(--sd-media-shadow);
}


/* ==========================================================================
   5. RIGHT COLUMN
   ========================================================================== */
.sd-about__content {
    display: block;
    margin: 0;
    padding: 0;
}

/* ---- 5.1 "About Us" badge ---- */
.sd-about__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 9px 18px 9px 14px;
    border: 2px solid var(--sd-badge-border);
    border-radius: 999px;
    background: var(--sd-badge-bg);
    box-shadow: var(--sd-badge-shadow);
    font-family: var(--sd-font-head);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sd-badge-fg);
}

.sd-about__badge-dot {
    flex: 0 0 auto;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sd-orange);
    box-shadow: 0 0 0 4px var(--sd-orange-soft);
    animation: sdAboutPulse 2.4s ease-in-out infinite;
}

@keyframes sdAboutPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.8);
    }
}

/* ---- 5.2 headline ---- */
.sd-about__title {
    margin: 0;
    padding: 0;
    font-family: var(--sd-font-head);
    font-size: clamp(32px, 3.2vw, 56px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.01em;
    color: var(--sd-title);
}

    .sd-about__title span {
        display: block;
    }

/* TWO lines on desktop: each <span> is one line and never wraps */
@media (min-width: 1200px) {
    .sd-about__title span {
        white-space: nowrap;
    }
}

/* Hospital Facilities heading — TWO lines on desktop, one per .title-line */
@media (min-width: 768px) {
    .sdh-facilities .head-text {
        container-type: inline-size;
    }

    /* font follows the heading column's own width (cqi), so the longest line
       always fits no matter where the knee prop / column breakpoints land */
    .sdh-facilities .title {
        font-size: clamp(26px, 7.3cqi, 44px);
    }

        .sdh-facilities .title .title-line {
            display: block;
            white-space: nowrap;
        }
}

/* ---- 5.3 body copy ---- */
.sd-about__text {
    margin: 30px 0 0;
    padding: 0;
    max-width: 780px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--sd-body);
}

/* ---- 5.4 bulleted list — double-check icons ---- */
.sd-about__list {
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    max-width: 780px;
}

    .sd-about__list li {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 0;
        font-size: 17px;
        line-height: 1.5;
        color: var(--sd-body-strong);
    }

        .sd-about__list li + li {
            margin-top: 18px;
        }

.sd-about__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    color: var(--sd-accent);
}

    .sd-about__icon svg {
        display: block;
        width: 28px;
        height: 22px;
    }

/* ---- 5.5 stat + glowing progress bar ---- */
.sd-about__stat {
    margin: 48px 0 0;
    padding: 0;
    max-width: 780px;
}

.sd-about__stat-label {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--sd-font-head);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sd-label);
}

.sd-about__bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sd-about__track {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    border-radius: 999px;
    background: var(--sd-track);
    overflow: hidden;
}

.sd-about__fill {
    display: block;
    height: 100%;
    width: var(--sd-pct, 96%);
    border-radius: 999px;
    background: var(--sd-bar-fill);
    box-shadow: var(--sd-bar-glow);
    transition: width 1.5s cubic-bezier(.22, .68, .3, 1) .12s;
}

/* scroll-in reveal: JS adds .is-animated (start empty) then .is-inview (grow).
   Without JS the bar simply renders at its full width. */
.sd-about.is-animated .sd-about__fill {
    width: 0;
}

.sd-about.is-animated.is-inview .sd-about__fill {
    width: var(--sd-pct, 96%);
}

.sd-about__value {
    flex: 0 0 auto;
    font-family: var(--sd-font-head);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.01em;
    background: var(--sd-bar-fill);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .sd-about__value {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--sd-accent);
    }
}

/* ---- 5.6 CTA row — play circle + pill button ---- */
.sd-about__actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 56px 0 0;
    padding: 0;
}

.sd-about__play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--sd-accent);
    color: #ffffff;
    box-shadow: 0 12px 30px var(--sd-accent-soft), 0 0 0 8px var(--sd-accent-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .sd-about__play svg {
        display: block;
        width: 19px;
        height: 21px;
        margin-left: 3px;
    }

.sd-about__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 68px;
    padding: 0 38px;
    border-radius: 999px;
    background: var(--sd-cta-bg);
    color: var(--sd-cta-fg);
    font-family: var(--sd-font-head);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--sd-btn-shadow);
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

    .sd-about__btn svg {
        display: block;
        width: 17px;
        height: 12px;
        transition: transform .25s ease;
    }


/* ==========================================================================
   6. VARIANT OVERRIDES — LIGHT abstract art
   (dark keeps the square network grid above; light swaps in a 45 degree
   lattice plus abstract rings, discs, edge arcs and a diagonal band)
   ========================================================================== */
.sd-about--light .sd-about__bg {
    background-image:
    /* lattice + nodes */
    radial-gradient(circle at 1.5px 1.5px, var(--sd-node) 1.4px, transparent 1.8px), repeating-linear-gradient(45deg, var(--sd-hairline) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, var(--sd-hairline) 0 1px, transparent 1px 34px),
    /* blue concentric rings, upper right */
    radial-gradient(circle at 84% 14%, transparent 0 76px, rgba(0, 156, 252, .40) 76px 79px, transparent 79px), radial-gradient(circle at 84% 14%, transparent 0 124px, rgba(0, 156, 252, .26) 124px 127px, transparent 127px), radial-gradient(circle at 84% 14%, rgba(0, 156, 252, .10) 0 76px, transparent 76px),
    /* orange concentric rings, lower left */
    radial-gradient(circle at 9% 84%, transparent 0 98px, rgba(232, 104, 26, .36) 98px 101px, transparent 101px), radial-gradient(circle at 9% 84%, transparent 0 156px, rgba(232, 104, 26, .22) 156px 159px, transparent 159px), radial-gradient(circle at 9% 84%, rgba(232, 104, 26, .07) 0 98px, transparent 98px),
    /* green disc, bottom edge */
    radial-gradient(circle at 58% 101%, rgba(151, 195, 1, .16) 0 92px, transparent 92px),
    /* edge arcs in the visible margins */
    radial-gradient(circle at 100% 46%, transparent 0 148px, rgba(0, 156, 252, .30) 148px 151px, transparent 151px), radial-gradient(circle at 0% 28%, transparent 0 118px, rgba(232, 104, 26, .32) 118px 121px, transparent 121px),
    /* soft diagonal band */
    linear-gradient(145deg, transparent 0 38%, rgba(232, 104, 26, .10) 38% 46%, transparent 46%),
    /* variant glows, bottom-most */
    var(--sd-glow);
    background-size: 46px 46px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}


/* ==========================================================================
   7. INTERACTION
   ========================================================================== */
.sd-about__play:hover,
.sd-about__play:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px var(--sd-accent-soft), 0 0 0 12px var(--sd-accent-soft);
}

.sd-about__btn:hover,
.sd-about__btn:focus-visible {
    background: var(--sd-cta-bg-hover);
    transform: translateY(-2px);
}

    .sd-about__btn:hover svg {
        transform: translateX(4px);
    }

.sd-about a:focus-visible {
    outline: 3px solid var(--sd-cta-bg);
    outline-offset: 3px;
}


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 1140px) {
    .sd-about__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .sd-about__media {
        max-width: 640px;
        margin: 0 auto;
    }

    .sd-about__text,
    .sd-about__list,
    .sd-about__stat {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .sd-about {
        padding: 80px 20px;
    }

    .sd-about__inner {
        gap: 36px;
    }

    .sd-about__actions {
        flex-wrap: wrap;
        gap: 22px;
        margin-top: 38px;
    }

    .sd-about__btn {
        height: 56px;
        padding: 0 26px;
    }

    .sd-about__watermark {
        top: 6px;
    }
}

@media (max-width: 420px) {
    .sd-about__list li {
        align-items: flex-start;
    }

    .sd-about__icon {
        margin-top: 2px;
    }
}


/* ==========================================================================
   9. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sd-about__fill {
        transition: none;
    }

    .sd-about__badge-dot {
        animation: none;
    }

    .sd-about__play,
    .sd-about__btn,
    .sd-about__btn svg {
        transition: none;
    }

        .sd-about__play:hover,
        .sd-about__btn:hover {
            transform: none;
        }
}





/*====================================
Services 
====================================*/
/* Tokens from DESIGN.md — use these, don't hardcode new brand colours. */
:root {
    --charcoal: #32323a;
    --orange: #E8681A;
    --accent: #E8681A;
    --orange-dark: #C2540E;
    --orange-light: #fdeee4;
    --text: #2e2e35;
    --muted: #6a6a75;
    --border: #e6e6ec;
    --white: #ffffff;
    --footer-bottom-bg: #f8f9fb;
    --logo-orange: #E8681A;
    --logo-ink: #171b20;
    --logo-blue: #009cfc;
    --logo-green: #97c301;
    --logo-pink: #fa016a;
    --container: 1200px;
    --font-head: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --card-radius: 10px;
    --ease-open: cubic-bezier(0.19, 0.85, 0.22, 1);
    --ease-close: cubic-bezier(0.4, 0, 0.2, 1);
}

/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--logo-ink);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}*/

/*img {
    display: block;
    max-width: 100%;
}*/

::selection {
    background: var(--orange);
    color: var(--white);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Preview chrome only — not part of the section. */
.version-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 22px;
    background: color-mix(in srgb, var(--logo-ink) 92%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
    backdrop-filter: blur(14px);
}

.version-bar__brand {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--white) 72%, transparent);
}

    .version-bar__brand strong {
        color: var(--white);
        font-weight: 400;
    }

.version-bar__hint {
    color: color-mix(in srgb, var(--white) 74%, transparent);
}

.version-bar nav {
    display: flex;
    gap: 6px;
}

.version-bar a {
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
}

    .version-bar a:hover {
        background: color-mix(in srgb, var(--white) 8%, transparent);
    }

    .version-bar a.is-current {
        background: var(--orange);
        border-color: var(--orange);
        color: var(--white);
    }

    .version-bar a:focus-visible {
        outline: 2px solid var(--orange-light);
        outline-offset: 2px;
    }

/* ---------- section ---------- */
.svc {
    padding: 88px 0 96px;
    scroll-margin-top: 64px;
}

.svc--dark {
    background: radial-gradient(ellipse 72% 38% at 50% -4%, color-mix(in srgb, var(--orange) 9%, transparent), transparent 68%), var(--logo-ink);
    color: var(--white);
}

.svc--light {
    background: radial-gradient(ellipse 78% 36% at 50% -6%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 64%), var(--footer-bottom-bg);
    color: var(--charcoal);
}

.svc-wrap {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
}

.svc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 0 auto 52px;
}

.svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 13px 7px 9px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.svc-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 24%, transparent);
}

.svc--dark .svc-badge {
    color: var(--white);
    background: color-mix(in srgb, var(--white) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
}

.svc--light .svc-badge {
    color: var(--charcoal);
    background: var(--orange-light);
    border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--white));
}

.svc-title {
    max-width: none;
    margin: 0;
    text-align: center;
    font-family: var(--font-head);
    /* sized so the whole sentence fits on ONE line inside the 1200px wrap */
    font-size: clamp(26px, 2.9vw, 44px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: inherit;
}

/* one line on desktop; below 1100px the sentence may wrap again */
@media (min-width: 1100px) {
    .svc-title {
        white-space: nowrap;
    }
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* ---------- card ---------- */
.svc-card {
    --mark: color-mix(in srgb, var(--charcoal) 32%, var(--white));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--card-radius);
    aspect-ratio: 1 / 1.08;
    background: var(--logo-ink);
    color: var(--white);
}

.svc-card--knee {
    --mark: var(--logo-pink);
}

.svc-card--shoulder {
    --mark: var(--logo-blue);
}

.svc-card--spine {
    --mark: var(--logo-green);
}

.svc--dark .svc-card {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--white) 7%, transparent);
}

.svc--light .svc-card {
    box-shadow: 0 14px 32px color-mix(in srgb, var(--logo-ink) 8%, transparent), 0 0 0 1px var(--border);
    transition: box-shadow 0.45s ease;
}

    .svc--light .svc-card:is(:hover, :focus-within, .is-preview, .is-open) {
        box-shadow: 0 20px 44px color-mix(in srgb, var(--logo-ink) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--logo-ink) 42%, transparent);
    }

.svc-card__media,
.svc-card__shade {
    position: absolute;
    inset: 0;
}

    .svc-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.02);
        transition: transform 0.55s var(--ease-close);
    }

.svc-card--knee img {
    object-position: center 36%;
}

.svc-card--shoulder img {
    object-position: center 40%;
}

.svc-card--spine img {
    object-position: center 34%;
}

.svc-card--hip img {
    object-position: center 30%;
}

.svc-card--scope img {
    object-position: center 48%;
}

.svc-card--physio img {
    object-position: center 42%;
}

.svc-card--trauma img {
    object-position: center 24%;
}

.svc-card__shade {
    background: linear-gradient( to top, color-mix(in srgb, var(--logo-ink) 84%, transparent) 0%, color-mix(in srgb, var(--logo-ink) 58%, transparent) 16%, color-mix(in srgb, var(--logo-ink) 16%, transparent) 40%, transparent 62% );
    z-index: 1;
    pointer-events: none;
}

.svc-card__heading {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-family: var(--font-head);
}

.svc-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 18px 22px;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 8px color-mix(in srgb, var(--logo-ink) 45%, transparent);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.28s ease 0.32s, text-shadow 0.28s ease 0.32s;
}

    .svc-card__link:focus {
        outline: none;
    }

.svc-card:has(:focus-visible) {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* Sheet sits above the title and rises slowly from the bottom.
       Dark section: white sheet. Light section: dark sheet. */
.svc-card__panel {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 22px 28px;
    text-align: center;
    background: var(--white);
    color: var(--text);
    box-shadow: 0 -18px 34px color-mix(in srgb, var(--logo-ink) 20%, transparent);
    transform: translateY(101%);
    transition: transform 0.48s var(--ease-close);
    pointer-events: none;
    will-change: transform;
}

.svc-mark {
    display: none;
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: var(--mark);
    transform: scaleX(0.35);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.5s var(--ease-open);
}

.svc-card--knee .svc-mark,
.svc-card--shoulder .svc-mark,
.svc-card--spine .svc-mark {
    display: block;
}

.svc-card__name {
    margin: 0;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.35s ease, transform 0.45s var(--ease-open);
}

.svc-card__desc {
    margin: 0;
    max-width: 28ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.35s ease, transform 0.45s var(--ease-open);
}

.svc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 42px;
    margin-top: 4px;
    padding: 0 20px;
    border-radius: 10px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.45s var(--ease-open), background 0.3s ease;
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-card__media img {
    transform: scale(1.08);
    transition-duration: 1.25s;
    transition-timing-function: var(--ease-open);
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-card__link {
    color: transparent;
    text-shadow: none;
    transition-delay: 0.18s;
    transition-duration: 0.22s;
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-card__panel {
    transform: translateY(0);
    transition-duration: 1.05s;
    transition-timing-function: var(--ease-open);
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-mark {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.42s;
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-card__name {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}

/* Light section: the sheet that rises is dark, so it still reads on a light page. */
.svc--light .svc-card__panel {
    background: var(--logo-ink);
    color: color-mix(in srgb, var(--white) 78%, transparent);
    box-shadow: 0 -20px 36px color-mix(in srgb, var(--logo-ink) 30%, transparent);
}

.svc--light .svc-card__name {
    color: var(--white);
}

.svc--light .svc-card__desc {
    color: color-mix(in srgb, var(--white) 76%, transparent);
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-card__desc {
    opacity: 1;
    transform: none;
    transition-delay: 0.6s;
}

.svc-card:is(:hover, :focus-within, .is-preview, .is-open) .svc-btn {
    opacity: 1;
    transform: none;
    transition-delay: 0.7s;
}

/* ---------- more services cell ---------- */
.svc-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
}

.svc-more__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    max-width: 16em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
}

.svc-more__text {
    font-family: var(--font-head);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
    transition: color 0.35s ease;
}

.svc-plus {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 38%, transparent);
    transition: background 0.4s ease, transform 0.6s var(--ease-open), box-shadow 0.4s ease;
}

.svc-more__link:hover .svc-more__text,
.svc-more__link:focus-visible .svc-more__text {
    color: var(--orange);
}

.svc-more__link:hover .svc-plus,
.svc-more__link:focus-visible .svc-plus {
    background: var(--orange-dark);
    transform: rotate(90deg) translateY(-2px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--orange) 46%, transparent);
}

.svc-more__link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 8px;
}

/* ---------- breakpoints ---------- */
@media (max-width: 1140px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-card {
        aspect-ratio: 1 / 0.92;
    }
}

@media (max-width: 720px) {
    .version-bar {
        padding: 10px 14px;
    }

    .version-bar__hint {
        display: none;
    }

    .svc {
        padding: 64px 0 72px;
    }

    .svc-wrap {
        width: min(var(--container), calc(100% - 32px));
    }

    .svc-head {
        margin-bottom: 32px;
        gap: 14px;
    }

    .svc-title br {
        display: none;
    }

    .svc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .svc-card {
        aspect-ratio: 16 / 11;
    }

    .svc-more {
        order: 8;
        padding: 18px 0 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .svc-card__panel,
    .svc-card__media img,
    .svc-card__link,
    .svc-mark,
    .svc-card__name,
    .svc-card__desc,
    .svc-btn,
    .svc-plus,
    .svc-more__text {
        transition: none !important;
    }
}