/* ==========================================================================
   corporate.css — the corporate, hospital, department, network, patient
   services and contact pages.

   These pages were added when the site was restructured to present Advitya
   Healthcares Pvt Ltd as the parent company and Advitya Hospital Baruipur as
   a multispeciality hospital in its own right. Everything here consumes the
   tokens in brand.css and the aliases home-v2.css publishes; nothing restates
   a hex value.

   Loaded after home-v2.css and inner-v2.css, before responsive.css.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */

.pg-hero-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.co-more {
    margin-top: 30px;
    text-align: center;
}

/* A card grid that holds its column count until the cards would be too
   narrow to read, then folds to one column rather than to a cramped two. */
.co-grid {
    display: grid;
    gap: var(--adv-gap);
}

.co-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.co-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.co-card {
    position: relative;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--adv-lift-1);
    transition: transform var(--adv-dur) var(--adv-ease),
                box-shadow var(--adv-dur) var(--adv-ease);
}

.co-card h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0 0 10px;
}

.co-card p {
    color: var(--adv-ink-body);
    font-size: var(--adv-text-base);
    line-height: 1.65;
    margin: 0 0 12px;
}

.co-card p:last-child {
    margin-bottom: 0;
}

/* Only the cards that are themselves links lift — a static card that moves
   under the cursor reads as broken rather than responsive. */
.co-card.is-link {
    display: block;
    text-decoration: none;
}

.co-card.is-link:hover,
.co-card.is-link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--adv-lift-2);
}

.co-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--adv-warm-soft);
    color: var(--adv-crimson-700);
    font-size: 1.15rem;
}

.co-card.is-urgent {
    border-color: rgba(142, 27, 46, .24);
}

.co-card.is-urgent .co-i {
    background: var(--adv-grad-mark);
    color: var(--adv-white);
}

.co-list {
    margin: 0;
    padding-left: 20px;
    color: var(--adv-ink-body);
    line-height: 1.7;
}

.co-list li {
    margin-bottom: 9px;
}

.co-list li:last-child {
    margin-bottom: 0;
}

/* A flex row does not wrap by default, so the careers card — icon, email,
   separator, phone — ran 7px past the right edge of a 390px screen. It wraps
   now, and a long unbroken address or email breaks rather than pushing. */
.co-addr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 9px;
    min-width: 0;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-muted);
    overflow-wrap: anywhere;
}

.co-addr i {
    margin-top: 3px;
    color: var(--adv-crimson-700);
}

/* Ownership tags. The brief is explicit that an alliance hospital must never
   read as an owned one, so the two tags are deliberately different colours
   rather than two shades of the same. */
.co-tag,
.net-tag,
.coe-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: var(--adv-radius-pill);
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.co-tag-owned,
.net-tag-owned {
    background: var(--adv-grad-mark);
    color: var(--adv-white);
}

.co-tag-alliance,
.net-tag-alliance {
    background: var(--adv-warm-soft);
    color: var(--adv-warm-deep);
}

.net-tag-office {
    background: var(--adv-blush-deep);
    color: var(--adv-ink-muted);
}

/* ------------------------------------------------------------ leadership */

.co-lead {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 22px;
    align-items: start;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 26px;
    box-shadow: var(--adv-lift-1);
}

.co-lead-img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    border: 3px solid var(--adv-warm-soft);
}

.co-lead-body h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0 0 4px;
}

.co-role,
.opd-role {
    display: block;
    margin-bottom: 12px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    color: var(--adv-crimson-700);
}

.co-lead-body p {
    color: var(--adv-ink-body);
    line-height: 1.65;
    margin: 0 0 14px;
}

/* ------------------------------------------------- hospital page — hero */

.hosp-hero {
    padding: 160px 0 66px;
    border-bottom: 1px solid var(--adv-line-soft);
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(255, 138, 76, .16), transparent 62%),
        linear-gradient(165deg, var(--adv-blush) 0%, var(--adv-white) 62%);
}

.hosp-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 46px;
    align-items: center;
}

.hosp-hero-copy h1 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h1);
    line-height: 1.1;
    color: var(--adv-ink);
    margin: 10px 0 6px;
}

.hosp-hero-sub {
    font-family: var(--adv-font-head);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 600;
    color: var(--adv-crimson-700);
    margin: 0 0 16px;
}

.hosp-hero-lede {
    font-size: var(--adv-text-lg);
    line-height: 1.7;
    color: var(--adv-ink-body);
    margin: 0 0 22px;
    max-width: 56ch;
}

.hosp-hero-facts {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.hosp-hero-facts li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 10px;
    font-size: var(--adv-text-base);
    color: var(--adv-ink-2);
    line-height: 1.55;
}

.hosp-hero-facts i {
    margin-top: 4px;
    color: var(--adv-crimson-700);
}

.hosp-hero-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hosp-hero-media {
    position: relative;
}

.hosp-hero-media img {
    width: 100%;
    border-radius: var(--adv-radius-lg);
    box-shadow: var(--adv-lift-3);
}

.hosp-flag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--adv-radius-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--adv-crimson-700);
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    box-shadow: var(--adv-lift-2);
}

/* ----------------------------------------------- hospital page — content */

.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: var(--adv-gap);
}

.dept-card {
    display: flex;
    flex-direction: column;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 26px 24px;
    text-decoration: none;
    box-shadow: var(--adv-lift-1);
    transition: transform var(--adv-dur) var(--adv-ease),
                box-shadow var(--adv-dur) var(--adv-ease);
}

.dept-card:hover,
.dept-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--adv-lift-2);
}

.dept-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 15px;
    border-radius: 13px;
    background: var(--adv-warm-soft);
    color: var(--adv-crimson-700);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dept-card h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h4);
    color: var(--adv-ink);
    margin: 0 0 9px;
}

.dept-card p {
    flex: 1;
    color: var(--adv-ink-body);
    font-size: var(--adv-text-sm);
    line-height: 1.62;
    margin: 0 0 16px;
}

.dept-cta {
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    color: var(--adv-crimson-700);
}

.dept-cta i {
    margin-left: 6px;
    transition: transform var(--adv-dur) var(--adv-ease);
}

.dept-card:hover .dept-cta i {
    transform: translateX(4px);
}

/* Doctors, split by role so a resident is never mistaken for a consultant. */
.opd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: var(--adv-gap);
}

.opd-card {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 26px;
    box-shadow: var(--adv-lift-1);
}

.opd-img img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    border: 3px solid var(--adv-warm-soft);
    margin-bottom: 16px;
}

.opd-body h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0 0 4px;
}

.opd-spec {
    color: var(--adv-ink-body);
    font-size: var(--adv-text-sm);
    line-height: 1.6;
    margin: 0 0 14px;
}

.opd-when {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    margin: 0 0 14px;
    border-radius: var(--adv-radius-sm);
    background: var(--adv-blush);
    color: var(--adv-ink-2);
    font-size: var(--adv-text-sm);
    line-height: 1.55;
}

.opd-when i {
    margin-top: 3px;
    color: var(--adv-crimson-700);
}

.hosp-em-call {
    margin: 18px 0 0;
}

.hosp-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 16px 20px;
    border-radius: var(--adv-radius);
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    color: var(--adv-ink-body);
    font-size: var(--adv-text-sm);
    line-height: 1.65;
}

.hosp-note i {
    margin-top: 3px;
    color: var(--adv-crimson-700);
}

.hosp-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--adv-gap);
}

.hosp-photos figure {
    margin: 0;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    overflow: hidden;
    box-shadow: var(--adv-lift-1);
}

.hosp-photos img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.hosp-photos figcaption {
    padding: 14px 18px;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-body);
    line-height: 1.5;
}

.hosp-map-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: var(--adv-gap);
    align-items: stretch;
}

.hosp-map-side {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--adv-lift-1);
}

.hosp-map-side h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 700;
    letter-spacing: var(--adv-eyebrow-track);
    text-transform: uppercase;
    color: var(--adv-crimson-700);
    margin: 22px 0 6px;
}

.hosp-map-side h3:first-child {
    margin-top: 0;
}

.hosp-map-side p {
    color: var(--adv-ink-body);
    line-height: 1.65;
    margin: 0;
}

.hosp-map-side .btn {
    margin-top: 26px;
}

.hosp-addr {
    font-weight: 500;
    color: var(--adv-ink-2) !important;
}

.hosp-map {
    min-height: 420px;
    border-radius: var(--adv-radius-lg);
    overflow: hidden;
    border: 1px solid var(--adv-line);
    box-shadow: var(--adv-lift-1);
}

.hosp-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
}

/* The registration form reuses the contact modal's field styling from
   style.css; only the surface around it is new. */
.hosp-form {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 32px 30px;
    box-shadow: var(--adv-lift-2);
}

.hosp-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hosp-form .form-group {
    margin-bottom: 16px;
}

.hosp-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    color: var(--adv-ink-2);
}

.hosp-form input,
.hosp-form select,
.hosp-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-sm);
    background: var(--adv-white);
    font-family: var(--adv-font-sans);
    font-size: var(--adv-text-base);
    color: var(--adv-ink);
}

.hosp-form textarea {
    min-height: 130px;
    resize: vertical;
}

.hosp-form input:focus,
.hosp-form select:focus,
.hosp-form textarea:focus {
    outline: none;
    border-color: var(--adv-crimson-700);
    box-shadow: 0 0 0 3px rgba(142, 27, 46, .12);
}

.hosp-form .btn-gradient {
    width: 100%;
}

.hosp-form .form-note {
    margin: 14px 0 0;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-muted);
    text-align: center;
}

/* --------------------------------------------------- departments page */

.dept-nav {
    margin-bottom: 40px;
}

.dept-blocks {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.dept-block {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 30px 28px;
    box-shadow: var(--adv-lift-1);
    /* the sticky header is 100-ish px tall, so an anchored department
       would otherwise land with its heading under the bar */
    scroll-margin-top: 130px;
}

.dept-block-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.dept-block-head h2 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0;
}

.dept-block-head .dept-i {
    margin-bottom: 0;
}

.dept-lede {
    color: var(--adv-ink-body);
    line-height: 1.7;
    margin: 0 0 18px;
}

.dept-list {
    margin: 0 0 20px;
    padding-left: 20px;
    color: var(--adv-ink-body);
    line-height: 1.7;
}

.dept-list li {
    margin-bottom: 8px;
}

.dept-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

/* ------------------------------------------- centres of excellence page */

.coe-feature {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: center;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 36px;
    box-shadow: var(--adv-lift-2);
}

.coe-feature-media img {
    width: 100%;
    border-radius: var(--adv-radius);
    box-shadow: var(--adv-lift-2);
}

.coe-feature-body h2 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h2);
    color: var(--adv-ink);
    margin: 0 0 6px;
}

.coe-tag {
    background: var(--adv-grad-mark);
    color: var(--adv-white);
}

.coe-sub {
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-lg);
    font-weight: 600;
    color: var(--adv-crimson-700);
    margin: 0 0 18px;
}

.coe-feature-body p {
    color: var(--adv-ink-body);
    line-height: 1.7;
    margin: 0 0 18px;
}

.coe-list {
    margin: 0 0 24px;
    padding-left: 20px;
    color: var(--adv-ink-body);
    line-height: 1.7;
}

.coe-list li {
    margin-bottom: 8px;
}

.coe-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --------------------------------------------------------- network page */

.net-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--adv-gap);
}

.net-card {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--adv-lift-1);
    scroll-margin-top: 130px;
}

/* An owned facility gets the brand rule down its edge; an alliance partner
   gets the warm accent. The difference is legible without reading the tag. */
.net-card.is-owned {
    border-left: 4px solid var(--adv-crimson-700);
}

.net-card.is-alliance {
    border-left: 4px solid var(--adv-warm-400);
}

.net-card.is-office {
    border-left: 4px solid var(--adv-line);
}

.net-card h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0 0 12px;
}

.net-card p {
    color: var(--adv-ink-body);
    line-height: 1.65;
    margin: 0 0 12px;
}

.net-addr,
.net-tel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--adv-text-sm);
}

.net-addr i,
.net-tel i {
    margin-top: 4px;
    color: var(--adv-crimson-700);
    flex-shrink: 0;
}

.net-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border-radius: var(--adv-radius-sm);
    background: var(--adv-blush);
    font-size: var(--adv-text-sm);
    line-height: 1.55;
}

.net-note i {
    margin-top: 3px;
    color: var(--adv-crimson-700);
}

.net-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* --------------------------------------------------------- staff login */

/* Moved out of the public header. It sits with the legal links because it is
   an internal tool, not a patient-facing one. */
.hv-foot-legal .staff-login-link {
    opacity: .72;
}

.hv-foot-legal .staff-login-link:hover {
    opacity: 1;
}

/* -------------------------------------------------------------- tablet */

@media (max-width: 980px) {
    .hosp-hero-grid,
    .hosp-map-layout,
    .coe-feature {
        grid-template-columns: 1fr;
    }

    .hosp-hero {
        padding-top: 140px;
    }

    .hosp-hero-media {
        order: -1;
    }

    .coe-feature-media {
        max-width: 340px;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------- phone */

@media (max-width: 640px) {
    .co-lead {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .co-lead-body .cred-list {
        text-align: left;
    }

    .hosp-form {
        padding: 24px 20px;
    }

    .hosp-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dept-block,
    .net-card,
    .co-card,
    .opd-card {
        padding: 22px 18px;
    }

    .coe-feature {
        padding: 24px 20px;
        gap: 26px;
    }

    .hosp-photos img {
        height: 180px;
    }

    .hosp-map,
    .hosp-map iframe {
        min-height: 320px;
    }

    .dept-acts {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================================
   Homepage additions

   The restructure added three blocks to index.html — the multispeciality
   department chips, the ownership badges on the location list, and the
   role-grouped team — plus the same grouping on our-team.html.
   ========================================================================== */

/* ------------------------------------------- multispeciality department chips */

.hv-depts {
    padding: var(--adv-sec-y) 0;
    background: var(--adv-blush);
    border-top: 1px solid var(--adv-line-soft);
}

.hv-dept-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 980px;
    margin: 34px auto 0;
}

.hv-dept-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--adv-radius-pill);
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    color: var(--adv-ink-2);
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--adv-lift-1);
    transition: transform var(--adv-dur) var(--adv-ease),
                border-color var(--adv-dur) var(--adv-ease),
                color var(--adv-dur) var(--adv-ease);
}

.hv-dept-chip i {
    color: var(--adv-crimson-700);
}

.hv-dept-chip:hover,
.hv-dept-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--adv-crimson-700);
    color: var(--adv-crimson-700);
}

/* ------------------------------------------------ location ownership badges */

/* The brief is explicit that an alliance hospital must not read as an owned
   one. The badge says which, and the rule down the card's edge repeats it in
   colour so the distinction survives a quick scan. */
.loc-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 11px;
    border-radius: var(--adv-radius-pill);
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.loc-badge-owned {
    background: var(--adv-grad-mark);
    color: var(--adv-white);
}

.loc-badge-alliance {
    background: var(--adv-warm-soft);
    color: var(--adv-warm-deep);
}

.loc-badge-office {
    background: var(--adv-blush-deep);
    color: var(--adv-ink-muted);
}

.loc-card.is-owned {
    border-left: 4px solid var(--adv-crimson-700);
}

.loc-card.is-alliance {
    border-left: 4px solid var(--adv-warm-400);
}

.loc-card.is-office {
    border-left: 4px solid var(--adv-line);
}

.loc-disclaimer {
    margin: -6px 0 14px;
    font-size: var(--adv-text-sm);
    line-height: 1.55;
    color: var(--adv-ink-muted);
}

/* The list is a 640px scroll box in home-v2.css. It now carries seven cards
   plus their ownership headings, so the box gets a little more height and the
   "full network" button is lifted out of it entirely — inside, it sat below
   the fold of a scroll container most visitors never notice. */
body.hv-light .loc-list {
    max-height: 720px;
}

.loc-more {
    margin-top: 26px;
    text-align: center;
}

/* A fading edge so the list reads as scrollable rather than as a list that
   simply stops after the Kolkata OPD. */
.hv-loc-layout {
    position: relative;
}

.loc-list::after {
    content: '';
    display: block;
    height: 6px;
}

@media (max-width: 900px) {
    .loc-more .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------- milestone block */

.ms-addr {
    display: block;
    margin: 0 0 18px;
    font-size: var(--adv-text-sm);
    line-height: 1.7;
    color: var(--adv-ink-body);
}

.ms-addr i {
    width: 18px;
    color: var(--adv-crimson-700);
}

.ms-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* --------------------------------------------------------- grouped team */

/* Consultants, resident doctors, nursing and management each get their own
   heading, so a resident is never read as a consultant. */
.team-group-title {
    margin: 44px 0 22px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    font-weight: 700;
    color: var(--adv-ink);
    text-align: center;
}

.team-group-title::after {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--adv-grad-mark);
}

.hv-testi-note {
    max-width: 760px;
    margin: 28px auto 0;
    font-size: var(--adv-text-sm);
    line-height: 1.65;
    color: var(--adv-ink-muted);
    text-align: center;
}

/* ------------------------------------------ clinical services: dept band */

/* The services page goes deep on the digestive system. The band says plainly
   that the hospital also runs twelve other departments, so a visitor looking
   for urology or trauma does not conclude we do not offer it. */
.svc-depts-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
    padding: 26px 28px;
    border-radius: var(--adv-radius-lg);
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-left: 4px solid var(--adv-crimson-700);
    box-shadow: var(--adv-lift-1);
}

.svc-depts-band > div {
    flex: 1 1 420px;
}

.svc-depts-band h2 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h4);
    color: var(--adv-ink);
    margin: 0 0 8px;
}

.svc-depts-band p {
    margin: 0;
    font-size: var(--adv-text-sm);
    line-height: 1.65;
    color: var(--adv-ink-body);
}

@media (max-width: 640px) {
    .svc-depts-band {
        padding: 22px 18px;
        gap: 18px;
    }

    .svc-depts-band .btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------- jump nav and CTA strip on departments.html

   Both classes were only ever defined inline inside clinical-services.html.
   departments.html reuses the same two patterns, so the rules are lifted
   here where a second page can reach them. Values match the originals, so
   clinical-services.html renders exactly as it did — its own inline block is
   still linked after this file and wins any tie. */

.dept-nav.service-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 45px;
}

.dept-nav.service-nav a {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-pill);
    padding: 8px 18px;
    font-family: var(--adv-font-head);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--adv-crimson-700);
    text-decoration: none;
    transition: background var(--adv-dur) var(--adv-ease),
                color var(--adv-dur) var(--adv-ease),
                transform var(--adv-dur) var(--adv-ease);
}

.dept-nav.service-nav a:hover,
.dept-nav.service-nav a:focus-visible {
    background: var(--adv-crimson-700);
    color: var(--adv-white);
    transform: translateY(-2px);
}

.dept-blocks + .cta-strip,
.pg-sec .cta-strip {
    margin-top: 34px;
    padding: 34px 30px;
    border-radius: var(--adv-radius-lg);
    background: var(--adv-blush);
    border: 1px solid var(--adv-line);
    text-align: center;
}

.pg-sec .cta-strip h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
    margin: 0 0 12px;
}

.pg-sec .cta-strip p {
    max-width: 56ch;
    margin: 0 auto 20px;
    color: var(--adv-ink-body);
    line-height: 1.65;
}

@media (max-width: 640px) {
    .dept-nav.service-nav {
        gap: 8px;
        margin-bottom: 30px;
    }

    .dept-nav.service-nav a {
        padding: 7px 14px;
        font-size: 0.82rem;
    }

    .pg-sec .cta-strip {
        padding: 26px 18px;
    }
}

/* style.css strips the default marker from every ul in its reset, so these
   lists need theirs back or they read as loose lines of prose. */
.co-list,
.dept-list,
.coe-list {
    list-style: disc;
}

.co-list::marker,
.dept-list::marker,
.coe-list::marker {
    color: var(--adv-crimson-700);
}

.co-list li::marker,
.dept-list li::marker,
.coe-list li::marker {
    color: var(--adv-crimson-700);
}

/* ------------------------------------------------ stacked contact cards

   inner-v2.css lays .contact-card out as a flex row, because on about.html
   each card leads with a .ci icon tile and the text sits beside it. The cards
   on contact.html and advitya-healthcares.html have a heading, a paragraph
   and sometimes a button instead, which that row squeezes into columns — the
   emergency button collapsed into a one-character-wide strip. These stack. */

.contact-cards.is-stacked {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.contact-cards.is-stacked .contact-card {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.contact-cards.is-stacked .contact-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--adv-font-head);
    font-size: var(--adv-h4);
    color: var(--adv-ink);
}

.contact-cards.is-stacked .contact-card h3 i {
    color: var(--adv-crimson-700);
}

.contact-cards.is-stacked .contact-card p {
    margin: 0;
    color: var(--adv-ink-body);
    font-size: var(--adv-text-sm);
    line-height: 1.7;
}

.contact-cards.is-stacked .contact-card .btn {
    margin-top: 4px;
    white-space: nowrap;
}

/* The emergency card leads the row and is marked out by its edge, not by a
   louder fill — a red panel next to three white ones reads as an alert
   banner rather than a phone number. */
.contact-cards.is-stacked .contact-card.is-urgent {
    border-color: rgba(142, 27, 46, .3);
    border-left: 4px solid var(--adv-crimson-700);
}

/* ======================================================= doctor sections

   Three fixes from a visual review of every doctor section.

   1. Grouped team grids. .team-grid is a fixed four-column grid, so a group
      of one, two or three people sat against the left edge with the rest of
      the row empty. Grids that follow a group heading are centred rows
      instead, holding the same card width. */

body.hv-light .hv-docs .team-group-title + .team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

body.hv-light .hv-docs .team-group-title + .team-grid > .team-card {
    flex: 0 1 300px;
    max-width: 320px;
    height: auto;
}

@media (max-width: 600px) {
    body.hv-light .hv-docs .team-group-title + .team-grid > .team-card {
        flex-basis: 100%;
        max-width: 380px;
    }
}

/* 2. Management. Every manager is already shown above as a consultant or
      nurse, so repeating the full portrait card read as a duplicated block.
      Management is a compact list of roles instead. */

.team-mgmt-note {
    max-width: 640px;
    margin: -8px auto 22px;
    text-align: center;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-muted);
}

.team-mgmt {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}

.team-mgmt-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px 14px 14px;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius);
    box-shadow: var(--adv-lift-1);
    text-decoration: none;
    transition: transform var(--adv-dur) var(--adv-ease),
                border-color var(--adv-dur) var(--adv-ease),
                box-shadow var(--adv-dur) var(--adv-ease);
}

.team-mgmt-row:hover,
.team-mgmt-row:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(142, 27, 46, .3);
    box-shadow: var(--adv-lift-2);
}

.team-mgmt-row img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
    border: 2px solid var(--adv-warm-soft);
}

.team-mgmt-txt {
    min-width: 0;
}

.team-mgmt-txt b {
    display: block;
    font-family: var(--adv-font-head);
    font-size: 1.02rem;
    color: var(--adv-crimson-700);
}

.team-mgmt-txt span {
    display: block;
    margin-top: 2px;
    font-size: var(--adv-text-sm);
    line-height: 1.45;
    color: var(--adv-ink-body);
}

.team-mgmt-cta {
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    color: var(--adv-crimson-700);
    white-space: nowrap;
}

.team-mgmt-cta i {
    margin-left: 6px;
}

@media (max-width: 600px) {
    .team-mgmt-row {
        grid-template-columns: 48px 1fr;
        gap: 4px 12px;
    }

    .team-mgmt-row img {
        width: 48px;
        height: 48px;
        grid-row: span 2;
    }

    .team-mgmt-cta {
        white-space: normal;
    }
}

/* 3. Icon rows. These were flex rows, and a flex container turns every run
      of text and every link into a separate column — "OPD at Baruipur by
      appointment. Call" | "+91 9211221551" | "for the current schedule."
      They are normal text blocks now, with the icon hung in the left gutter. */

.opd-when,
.net-note,
.hosp-note,
.net-addr,
.net-tel,
.co-addr,
.hosp-hero-facts li {
    display: block;
    position: relative;
}

.opd-when,
.net-note {
    padding-left: 40px;
}

.opd-when i,
.net-note i {
    position: absolute;
    left: 14px;
    top: 16px;
    margin: 0;
}

.hosp-note {
    padding-left: 48px;
}

.hosp-note i {
    position: absolute;
    left: 20px;
    top: 20px;
    margin: 0;
}

.net-addr,
.net-tel,
.co-addr {
    padding-left: 24px;
}

.net-addr i,
.net-tel i,
.co-addr i {
    position: absolute;
    left: 0;
    top: 4px;
    margin: 0;
}

.hosp-hero-facts li {
    padding-left: 28px;
}

.hosp-hero-facts i {
    position: absolute;
    left: 0;
    top: 4px;
    margin: 0;
}

/* ====================================================== Baruipur contact bar

   The five actions the hospital page must make obvious: call, book,
   emergency, directions, WhatsApp. Full-width bar under the hero so none of
   them wraps under another on desktop; two columns on a phone with the
   emergency action spanning both, because it is the one that cannot wait. */

.hosp-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.hosp-act {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    border-radius: var(--adv-radius);
    border: 1px solid var(--adv-line);
    background: var(--adv-white);
    color: var(--adv-ink);
    text-decoration: none;
    box-shadow: var(--adv-lift-1);
    transition: transform var(--adv-dur) var(--adv-ease),
                box-shadow var(--adv-dur) var(--adv-ease),
                border-color var(--adv-dur) var(--adv-ease);
}

.hosp-act:hover,
.hosp-act:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--adv-lift-2);
}

.hosp-act > i {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.05rem;
    background: var(--adv-warm-soft);
    color: var(--adv-crimson-700);
}

.hosp-act span {
    min-width: 0;
    line-height: 1.3;
}

.hosp-act b {
    display: block;
    font-family: var(--adv-font-head);
    font-size: .95rem;
    font-weight: 700;
}

.hosp-act small {
    display: block;
    margin-top: 2px;
    font-size: var(--adv-text-xs);
    color: var(--adv-ink-muted);
    overflow-wrap: anywhere;
}

.hosp-act.is-book {
    background: var(--adv-grad-brand);
    border-color: transparent;
    color: var(--adv-white);
}

.hosp-act.is-book > i {
    background: rgba(255, 255, 255, .18);
    color: var(--adv-white);
}

.hosp-act.is-book small {
    color: rgba(255, 255, 255, .85);
}

.hosp-act.is-emergency {
    border-color: rgba(185, 45, 60, .45);
    background: #FFF4F3;
}

.hosp-act.is-emergency > i {
    background: #C62828;
    color: var(--adv-white);
}

.hosp-act.is-emergency b {
    color: #B71C1C;
}

.hosp-act.is-whatsapp > i {
    background: var(--adv-wa-wash);
    color: var(--adv-wa-deep);
}

.hosp-act.is-whatsapp:hover {
    border-color: var(--adv-wa);
}

@media (max-width: 1100px) {
    .hosp-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hosp-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hosp-act.is-emergency {
        grid-column: 1 / -1;
        order: -1;
    }

    .hosp-act {
        padding: 10px 12px;
        gap: 10px;
    }

    .hosp-act > i {
        flex-basis: 36px;
        height: 36px;
    }
}

/* The directions button sits directly under the address, full width of the
   panel, so it is the first thing a visitor reaches for. */
.hosp-map-side .hosp-dir-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 14px 0 6px;
    padding: 15px 20px;
    font-size: 1.02rem;
}

/* Confirmed-speciality cards: the treatments list takes the flexible space so
   every card's booking link lines up along the bottom of the row. */
article.dept-card p {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

.dept-card-list {
    flex: 1;
    list-style: disc;
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--adv-ink-body);
    font-size: var(--adv-text-sm);
    line-height: 1.6;
}

.dept-card-list li {
    margin-bottom: 4px;
}

.dept-card-list li::marker {
    color: var(--adv-crimson-700);
}

article.dept-card .dept-cta {
    text-decoration: none;
}

.dept-note {
    max-width: 680px;
    margin: 26px auto 0;
    text-align: center;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-muted);
}

/* ----------------------------------------------------------- treatments

   The confirmed treatments are information, not links, so their chips keep
   the pill shape but drop the hover lift a link chip has. */

.hv-dept-chip.is-static {
    cursor: default;
}

.hv-dept-chip.is-static:hover {
    transform: none;
    border-color: var(--adv-line);
    color: var(--adv-ink-2);
}

.hv-treat-title {
    margin: 34px 0 0;
    text-align: center;
    font-family: var(--adv-font-head);
    font-size: var(--adv-h4);
    color: var(--adv-ink);
}

.hv-dept-chips.is-treatments {
    margin-top: 16px;
}

.dept-treatments {
    margin-top: 34px;
    padding: 28px 26px;
    border-radius: var(--adv-radius-lg);
    background: var(--adv-blush);
    border: 1px solid var(--adv-line);
    text-align: center;
    scroll-margin-top: 130px;
}

.dept-treatments h2,
.dept-treatments h3 {
    margin: 0 0 6px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    color: var(--adv-ink);
}

.dept-treatments p {
    margin: 0;
    font-size: var(--adv-text-sm);
    color: var(--adv-ink-muted);
}

.dept-treatments .hv-dept-chips {
    margin-top: 18px;
}

.dept-block .dept-sub {
    margin: 0 0 8px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 700;
    letter-spacing: var(--adv-eyebrow-track);
    text-transform: uppercase;
    color: var(--adv-crimson-700);
}

@media (max-width: 640px) {
    .dept-treatments {
        padding: 22px 16px;
    }
}

/* ==========================================================================
   Phase 4 — doctors, treatments, facilities, admission, insurance, packages,
   gallery and the registration form.

   Written for elderly patients as much as anyone: body copy never drops
   below 15-16px, every control is at least 48px tall, and nothing that is
   still unconfirmed is dressed up to look confirmed — those slots use the
   dashed .tbd placeholder so the difference is visible at a glance.
   ========================================================================== */

/* ---------------------------------------------------------- placeholders */
.tbd {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--adv-blush);
    border: 1px dashed #D9C3BE;
    color: var(--adv-ink-muted);
    font-size: .95rem;
    line-height: 1.45;
}

.tbd i {
    color: var(--adv-rose-600);
}

.tp-note {
    margin: 18px 0 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--adv-ink-muted);
}

/* --------------------------------------------------------------- doctors */
.doc-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 30px;
}

.doc-filter button {
    min-height: 46px;
    padding: 9px 18px;
    border-radius: var(--adv-radius-pill);
    border: 1px solid var(--adv-line);
    background: var(--adv-white);
    font-family: var(--adv-font-head);
    font-size: .98rem;
    font-weight: 600;
    color: var(--adv-ink-2);
    cursor: pointer;
}

.doc-filter button[aria-pressed="true"] {
    background: var(--adv-crimson-700);
    border-color: var(--adv-crimson-700);
    color: var(--adv-white);
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: var(--adv-gap);
    align-items: stretch;
}

.doc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 26px 24px;
    box-shadow: var(--adv-lift-1);
    scroll-margin-top: 130px;
}

.doc-card[hidden] {
    display: none !important;
}

/* Dr. Kapoor's card is the same size and layout as every other card; it is
   marked out by a brand rule along the top and her role badge only, so no
   other doctor reads as secondary. */
.doc-card.is-featured {
    border-color: rgba(142, 27, 46, .32);
    box-shadow: var(--adv-lift-2);
}

.doc-card.is-featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: var(--adv-radius-lg) var(--adv-radius-lg) 0 0;
    background: var(--adv-grad-mark);
}

.doc-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.doc-photo {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--adv-warm-soft);
    background: var(--adv-blush);
}

.doc-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

.doc-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--adv-font-head);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--adv-crimson-700);
    background: linear-gradient(145deg, var(--adv-blush) 0%, var(--adv-warm-soft) 100%);
}

.doc-id {
    min-width: 0;
}

.doc-id h3 {
    margin: 0;
    font-family: var(--adv-font-head);
    font-size: 1.28rem;
    line-height: 1.25;
    color: var(--adv-ink);
}

.doc-spec {
    margin: 5px 0 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--adv-crimson-700);
}

.doc-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: var(--adv-radius-pill);
    background: var(--adv-warm-soft);
    color: var(--adv-warm-deep);
    font-family: var(--adv-font-head);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.doc-block h4 {
    margin: 0 0 7px;
    font-family: var(--adv-font-head);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--adv-ink-muted);
}

.doc-block ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    color: var(--adv-ink-body);
    font-size: 1rem;
    line-height: 1.6;
}

.doc-block ul li::marker {
    color: var(--adv-crimson-700);
}

.doc-block p {
    margin: 0;
    color: var(--adv-ink-body);
    font-size: 1rem;
    line-height: 1.65;
}

.doc-opd {
    padding: 14px 16px;
    border-radius: var(--adv-radius);
    background: var(--adv-blush);
}

.doc-date {
    margin-top: 12px;
}

.doc-date label {
    display: block;
    margin-bottom: 6px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--adv-ink-2);
}

.doc-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doc-date input {
    flex: 1 1 150px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--adv-line);
    border-radius: 10px;
    background: var(--adv-white);
    font: inherit;
    font-size: 1rem;
    color: var(--adv-ink);
}

.doc-date .btn {
    flex: 0 0 auto;
    min-height: 48px;
    justify-content: center;
}

.doc-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.doc-acts .btn,
.doc-acts .hv-ghost {
    min-height: 48px;
    justify-content: center;
}

.dept-docs {
    margin: 0 0 18px;
    color: var(--adv-ink-body);
    line-height: 1.6;
}

.dept-docs a {
    font-weight: 600;
}

/* ------------------------------------------------ emergency and admission */
.em-call {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}

.em-call a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 20px;
    border-radius: 14px;
    background: #C62828;
    color: var(--adv-white);
    font-family: var(--adv-font-head);
    font-size: 1.12rem;
    font-weight: 700;
    text-decoration: none;
}

.em-call a.is-alt {
    background: var(--adv-white);
    color: #B71C1C;
    border: 2px solid #C62828;
}

.steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.steps li {
    position: relative;
    padding: 2px 0 16px 48px;
    color: var(--adv-ink-body);
    font-size: 1rem;
    line-height: 1.6;
}

.steps li:last-child {
    padding-bottom: 0;
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--adv-crimson-700);
    color: var(--adv-white);
    font-family: var(--adv-font-head);
    font-weight: 700;
}

.steps li b {
    color: var(--adv-ink);
}

/* ------------------------------------------------------------ facilities */
.fac-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--adv-gap);
}

.fac-group {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 24px 22px;
    box-shadow: var(--adv-lift-1);
}

.fac-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--adv-font-head);
    font-size: 1.18rem;
    color: var(--adv-ink);
}

.fac-group h3 i {
    color: var(--adv-crimson-700);
}

.fac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.fac-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: var(--adv-blush);
    color: var(--adv-ink-2);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.fac-list li i {
    flex: 0 0 22px;
    text-align: center;
    color: var(--adv-crimson-700);
}

/* -------------------------------------------------------------- packages */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--adv-gap);
}

.pkg-card {
    display: flex;
    flex-direction: column;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    padding: 24px 22px;
    box-shadow: var(--adv-lift-1);
}

.pkg-card h3 {
    margin: 0 0 12px;
    font-family: var(--adv-font-head);
    font-size: 1.22rem;
    color: var(--adv-ink);
}

.pkg-card dl {
    flex: 1;
    margin: 0 0 18px;
}

.pkg-row {
    padding: 11px 0;
    border-top: 1px solid var(--adv-line-soft);
}

.pkg-row dt {
    margin-bottom: 5px;
    font-family: var(--adv-font-head);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--adv-ink-muted);
}

.pkg-row dd {
    margin: 0;
    color: var(--adv-ink-body);
}

.pkg-card .btn {
    justify-content: center;
    min-height: 50px;
}

/* --------------------------------------------------------------- gallery */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--adv-gap);
}

.gal-tile {
    margin: 0;
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    overflow: hidden;
    box-shadow: var(--adv-lift-1);
}

.gal-tile img,
.gal-ph {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gal-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: repeating-linear-gradient(135deg, var(--adv-blush) 0 12px, var(--adv-white) 12px 24px);
    color: var(--adv-ink-muted);
    font-size: .95rem;
}

.gal-ph i {
    font-size: 1.7rem;
    color: var(--adv-rose-600);
}

.gal-tile figcaption {
    padding: 12px 16px 14px;
}

.gal-tile figcaption b {
    display: block;
    font-family: var(--adv-font-head);
    font-size: 1.02rem;
    color: var(--adv-ink);
}

.gal-tile figcaption span {
    font-size: .92rem;
    color: var(--adv-ink-muted);
}

/* ----------------------------------------------- registration form, larger */
.hosp-form .form-label {
    font-size: 1rem;
}

.hosp-form input,
.hosp-form select,
.hosp-form textarea {
    min-height: 52px;
    font-size: 1.05rem;
}

.hosp-form .req {
    color: #B71C1C;
}

.hosp-form .hint {
    display: block;
    margin-top: 6px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--adv-ink-muted);
}

.hosp-form input[type="file"] {
    padding: 11px;
    background: var(--adv-blush);
}

.hosp-form .consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--adv-blush);
    border: 1px solid var(--adv-line);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--adv-ink-2);
    cursor: pointer;
}

.hosp-form .consent input {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--adv-crimson-700);
}

.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-err {
    margin: 12px 0 0;
    color: #B71C1C;
    font-weight: 600;
}

.form-ok {
    padding: 30px 24px;
    text-align: center;
}

.form-ok > i {
    font-size: 2.8rem;
    color: #2E7D32;
}

.form-ok h3 {
    margin: 10px 0 10px;
    font-family: var(--adv-font-head);
    font-size: 1.45rem;
    color: var(--adv-ink);
}

.form-ok p {
    max-width: 54ch;
    margin: 0 auto 10px;
    color: var(--adv-ink-body);
    font-size: 1.04rem;
    line-height: 1.65;
}

.form-ok .ref {
    display: inline-block;
    margin: 6px 0 14px;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--adv-blush);
    font-family: var(--adv-font-head);
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--adv-crimson-700);
}

/* -------------------------------------------------------- treatment pages */
.tp-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--adv-gap);
}

.tp-urgent {
    margin-top: 24px;
    padding: 20px 22px;
    border-radius: var(--adv-radius);
    background: #FFF4F3;
    border: 1px solid rgba(185, 45, 60, .35);
    border-left: 5px solid #C62828;
}

.tp-urgent h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--adv-font-head);
    font-size: 1.18rem;
    color: #B71C1C;
}

.tp-urgent ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    color: var(--adv-ink-body);
    font-size: 1rem;
    line-height: 1.65;
}

.tp-depts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 840px;
    margin: 0 auto;
}

.faq-list details {
    background: var(--adv-white);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius);
    padding: 0 20px;
    box-shadow: var(--adv-lift-1);
}

.faq-list summary {
    position: relative;
    padding: 18px 34px 18px 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--adv-font-head);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--adv-ink);
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--adv-crimson-700);
}

.faq-list details[open] summary::after {
    content: "\2212";
}

.faq-list details p {
    margin: 0 0 18px;
    color: var(--adv-ink-body);
    font-size: 1rem;
    line-height: 1.7;
}

.tp-disclaimer {
    max-width: 840px;
    margin: 26px auto 0;
    text-align: center;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--adv-ink-muted);
}

@media (max-width: 640px) {
    .doc-card {
        padding: 22px 18px;
    }

    .doc-photo {
        flex-basis: 80px;
        width: 80px;
        height: 80px;
    }

    .doc-acts .btn,
    .doc-acts .hv-ghost {
        flex: 1 1 100%;
    }

    .em-call a {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* .hint sets display:block, which beats the browser's [hidden] rule, so the
   "doctor details will be confirmed" hint showed before any department had
   been chosen. */
.hosp-form .hint[hidden] {
    display: none;
}

/* =====================  Doctor card photos: arch frame  ==================
   Matches the Our Team portraits. The photo files are circular cut-outs, so
   each one is zoomed inside an arch that hides the disc edge; the zoom
   origin sits high to keep the face in view. Initials use the same shape. */
.doc-photo {
    position: relative;
    flex: 0 0 90px;
    width: 90px;
    height: 104px;
    border: 0;
    border-radius: 45px 45px 20px 20px;
    overflow: hidden;
    background: linear-gradient(165deg, #FDECEA 0%, #F6D3CC 100%);
    box-shadow:
        6px 6px 0 0 rgba(142, 27, 46, .12),
        0 12px 20px -12px rgba(120, 60, 55, .5);
}

.doc-card.is-featured .doc-photo {
    box-shadow:
        6px 6px 0 0 rgba(233, 162, 59, .45),
        0 12px 20px -12px rgba(120, 60, 55, .5);
}

.doc-photo img {
    object-position: 50% 20%;
    transform: scale(1.5);
    transform-origin: 50% 20%;
}

@media (max-width: 640px) {
    .doc-photo {
        flex-basis: 78px;
        width: 78px;
        height: 90px;
        border-radius: 39px 39px 18px 18px;
    }
}

/* The browser's own file button is grey system chrome next to the brand
   fields. Only the button is restyled; the field itself keeps the shape
   and spacing every other input on the form has. */
.hosp-form input[type="file"] {
    padding: 10px 12px;
    cursor: pointer;
}

.hosp-form input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--adv-grad-brand);
    color: var(--adv-white);
    font-family: var(--adv-font-head);
    font-size: var(--adv-text-sm);
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 6px 14px -8px rgba(142, 27, 46, .75);
    transition: filter .2s ease, box-shadow .2s ease;
}

.hosp-form input[type="file"]:hover::file-selector-button {
    filter: brightness(1.06);
    box-shadow: 0 8px 18px -8px rgba(142, 27, 46, .85);
}

.hosp-form input[type="file"]:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .hosp-form input[type="file"]::file-selector-button {
        transition: none;
    }
}

/* The sticky header covers the top of an anchored section, so the
   appointment form's own heading has to clear it on arrival. */
#appointment {
    scroll-margin-top: 120px;
}

/* The address card carries the booking link as well as the route: someone
   reading the address is as likely to want a slot as a map. It is the quiet
   twin of the directions button above it, so the two do not compete. */
.hosp-map-side .hosp-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 6px;
    padding: 14px 20px;
    border: 1px solid rgba(142, 27, 46, .22);
    border-radius: 50px;
    background: var(--adv-white);
    font-family: var(--adv-font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--adv-crimson-700);
    text-decoration: none;
    box-shadow: var(--adv-lift-1);
    transition: border-color .2s ease, box-shadow .2s ease, translate .2s ease;
}

.hosp-map-side .hosp-book-btn:hover {
    border-color: var(--adv-crimson-700);
    box-shadow: var(--adv-lift-2);
    translate: 0 -2px;
}

@media (prefers-reduced-motion: reduce) {
    .hosp-map-side .hosp-book-btn:hover {
        translate: none;
    }
}

/* ==========================================================================
   Hospital page hero — premium pass (styling only, markup untouched)
   --------------------------------------------------------------------------
   The hero carried the right content on a flat tint: the building floated on
   a plain card, the facts read as a bulleted list, and the five action tiles
   were five equal boxes with no order to them. This gives the band depth, the
   photograph a studio surface, the facts a card of their own, and the tiles a
   hierarchy — book first, everything else supporting.
   ========================================================================== */
.hosp-hero {
    position: relative;
    padding: 170px 0 74px;
    overflow: hidden;
    background:
        radial-gradient(780px 420px at 84% -12%, rgba(255, 138, 76, .18), transparent 64%),
        radial-gradient(620px 420px at 6% 104%, rgba(142, 27, 46, .1), transparent 62%),
        linear-gradient(168deg, #FFF6F3 0%, #FFFFFF 58%, #FDF5F2 100%);
}

/* a single wide ray across the band, at the angle the logo mark uses */
.hosp-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto;
    height: 150%;
    background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .55) 47%, transparent 58%);
    pointer-events: none;
}

.hosp-hero > .container {
    position: relative;
    z-index: 1;
}

.hosp-hero-copy h1 {
    letter-spacing: -.02em;
}

.hosp-hero-sub {
    display: inline-block;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(142, 27, 46, .16);
}

.hosp-hero-lede {
    max-width: 58ch;
}

/* ---- the three facts become a card, not a bullet list ------------------ */
.hosp-hero-facts {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--adv-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--adv-lift-1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* the earlier rules put the icon on an absolute pin inside a block row; the
   card lays the row out as flex instead, so both have to be answered here */
.hosp-hero-facts li {
    display: flex;
    position: relative;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 11px 0;
    padding-left: 0;
    border-bottom: 1px solid var(--adv-line-soft);
}

.hosp-hero-facts li:first-child {
    padding-top: 0;
}

.hosp-hero-facts li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hosp-hero-facts i {
    position: static;
    flex: 0 0 34px;
    height: 34px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(142, 27, 46, .08);
    font-size: .88rem;
}

.hosp-hero-facts a {
    font-weight: 600;
    color: var(--adv-crimson-700);
    text-decoration: none;
}

.hosp-hero-facts a:hover {
    text-decoration: underline;
}

/* ---- the building gets the studio surface, as on the home page --------- */
.hosp-hero-media {
    isolation: isolate;
    padding: clamp(16px, 1.8vw, 26px);
    border-radius: 26px;
    border: 1px solid rgba(142, 27, 46, .1);
    background:
        radial-gradient(70% 55% at 50% 20%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(120% 90% at 50% 120%, rgba(142, 27, 46, .12) 0%, rgba(142, 27, 46, 0) 60%),
        linear-gradient(168deg, #FFF9F7 0%, #FCEFEC 52%, #F6E2DE 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 26px 64px -30px rgba(94, 16, 25, .4),
        0 6px 18px -12px rgba(94, 16, 25, .18);
}

/* the shadow the building stands on */
.hosp-hero-media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 2vw, 26px);
    width: min(66%, 420px);
    height: 28px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(74, 12, 20, .24) 0%, rgba(74, 12, 20, .09) 45%, transparent 72%);
    filter: blur(8px);
    z-index: 0;
    pointer-events: none;
}

.hosp-hero-media img {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    box-shadow: none;
    filter: saturate(1.04) contrast(1.03) drop-shadow(0 16px 24px rgba(74, 12, 20, .15));
}

.hosp-hero-media .hosp-flag {
    z-index: 2;
    left: clamp(18px, 2vw, 28px);
    bottom: clamp(18px, 2vw, 28px);
    padding: 10px 17px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(142, 27, 46, .12);
    box-shadow: 0 10px 26px -14px rgba(94, 16, 25, .5);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

/* ---- action tiles ------------------------------------------------------ */
.hosp-actions {
    gap: 14px;
    margin-top: 40px;
}

.hosp-act {
    position: relative;
    overflow: hidden;
    min-height: 74px;
    border-radius: 18px;
    border-color: rgba(142, 27, 46, .12);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hosp-act:hover,
.hosp-act:focus-visible {
    border-color: rgba(142, 27, 46, .32);
    box-shadow: 0 18px 38px -22px rgba(94, 16, 25, .5);
}

.hosp-act > i {
    flex-basis: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(142, 27, 46, .1), rgba(255, 138, 76, .12));
}

/* five tiles across a 1440 row leave each label about 150px: the labels are
   sized to that rather than wrapping to three lines */
.hosp-act {
    gap: 11px;
    padding: 12px 14px;
}

.hosp-act b {
    font-size: .9rem;
    line-height: 1.25;
}

.hosp-act small {
    font-size: .74rem;
}

/* the booking tile is the one that should be read first */
.hosp-act.is-book {
    box-shadow: 0 16px 34px -18px rgba(142, 27, 46, .75);
}

/* one slow pass of light over the booking tile on hover */
.hosp-act.is-book::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
    translate: -20% 0;
    transition: translate .7s var(--adv-ease);
    pointer-events: none;
}

.hosp-act.is-book:hover::after {
    translate: 320% 0;
}

.hosp-act.is-emergency {
    border-color: rgba(185, 45, 60, .35);
    background: linear-gradient(150deg, #FFF6F5 0%, #FFECEA 100%);
}

@media (prefers-reduced-motion: reduce) {

    .hosp-act:hover,
    .hosp-act:focus-visible {
        transform: none;
    }

    .hosp-act.is-book::after {
        display: none;
    }
}

/* On a phone the two-up tiles left the longer labels ("Book an Appointment",
   "WhatsApp Enquiry") on three lines, and the bottom row ran under the
   floating call button. One tile per row reads better and clears it. */
@media (max-width: 560px) {
    .hosp-actions {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 8px;
    }

    .hosp-act,
    .hosp-act.is-emergency {
        grid-column: auto;
        min-height: 64px;
    }

    .hosp-act b {
        font-size: .95rem;
    }
}

/* The cutout leaves a margin of its own inside the PNG, so the building read
   small on its panel. It is scaled up rather than the panel shrunk, so the
   studio surface around it keeps the same proportions. */
.hosp-hero-media img {
    scale: 1.1;
    transform-origin: 50% 52%;
}