/* ==========================================================================
   Advitya Healthcares — premium light theme for the inner pages
   Loaded after style.css and home-v2.css. home-v2.css supplies the shared
   header (utility bar + nav) and footer; everything here is page furniture.
   ========================================================================== */

/* Centred variant of the page hero */
.pg-hero.is-centered {
    text-align: center;
}

.pg-hero.is-centered .pg-crumb {
    justify-content: center;
}

.pg-hero.is-centered h1,
.pg-hero.is-centered .pg-lede {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* the action buttons follow the centred copy */
.pg-hero.is-centered .pg-hero-acts {
    justify-content: center;
}

/* ==========================  Our Team page  ============================= */
/* The dedicated team page wants a tidy block: cards on one baseline, the
   consultation link pinned to the bottom of each, and every portrait cut to
   exactly the same circle whatever the source framing. */
body.hv-light .hv-docs.is-team-page .team-grid {
    align-items: stretch;
    justify-items: center;
}

body.hv-light .hv-docs.is-team-page .team-card {
    width: 100%;
    max-width: 320px;
    height: 100%;
}

body.hv-light .hv-docs.is-team-page .team-info {
    flex: 1;
}

body.hv-light .hv-docs.is-team-page .team-link {
    margin-top: auto;
}

/* One portrait size, one crop, across every member */
body.hv-light .hv-docs.is-team-page .team-img-wrapper {
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
}

body.hv-light .hv-docs.is-team-page .team-img-wrapper img {
    object-fit: cover;
    object-position: 50% 42%;
}

/* Marks which About Us page the visitor is already on */
.dropdown-content a.is-current {
    color: var(--brand);
    font-weight: 700;
    background: var(--blush);
}

/* ============================  Page hero  =============================== */
.pg-hero {
    position: relative;
    padding: 168px 0 74px;
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(255, 138, 76, .16), transparent 62%),
        linear-gradient(165deg, var(--blush) 0%, var(--pearl) 62%);
}

/* Faint logo ray motif in the corner — brand, not decoration for its own sake */
.pg-hero::after {
    content: '';
    position: absolute;
    top: -180px;
    right: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 162, 59, .16) 0%, transparent 68%);
    pointer-events: none;
}

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

.pg-crumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.pg-crumb a {
    color: var(--brand);
    font-weight: 600;
}

.pg-crumb i {
    font-size: .6rem;
    opacity: .5;
}

.pg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--maroon);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 20px;
    box-shadow: var(--lift-1);
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 520px) {
    .pg-eyebrow {
        font-size: .62rem;
        letter-spacing: .12em;
        gap: 7px;
        padding: 7px 14px;
    }
}

.pg-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 4px rgba(255, 138, 76, .22);
}

.pg-hero h1 {
    font-size: 3.2rem;
    line-height: 1.1;
    letter-spacing: -.022em;
    color: var(--ink);
    margin-bottom: 18px;
    max-width: 18ch;
}

/* hero headings that must never break to a second line */
.pg-hero h1.pg-h1-oneline {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.5rem, 6.1vw, 3.2rem);
}

.pg-hero h1 span {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand);
}

.pg-hero .pg-lede {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--ink-body);
    max-width: 620px;
}

/* =========================  Section furniture  ========================== */
.pg-sec {
    padding: 78px 0;
}

.pg-sec.is-tint {
    background: var(--blush);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.sec-eyebrow {
    display: block;
    text-align: center;
    font-size: .73rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 12px;
}

.sec-title {
    font-size: 2.4rem;
    text-align: center;
    color: var(--ink);
    letter-spacing: -.02em;
    margin-bottom: 14px;
}

.sec-sub {
    text-align: center;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 660px;
    margin: 0 auto 48px;
}

.sec-eyebrow.left,
.sec-title.left {
    text-align: left;
}

.sec-sub.left {
    text-align: left;
    margin-left: 0;
}

/* Long-form body copy */
.prose p {
    font-size: 1.04rem;
    line-height: 1.88;
    color: var(--ink-body);
    margin-bottom: 18px;
}

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

/* ==========================  Pull quote  ================================ */
.pg-quote {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: 18px;
    padding: 34px 38px;
    box-shadow: var(--lift-2);
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.62;
    color: var(--ink);
}

.pg-quote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-sans);
    font-size: .88rem;
    font-style: normal;
    font-weight: 600;
    color: var(--brand);
}

/* ============================  Timeline  ================================ */
.tl {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding-left: 62px;
}

/* The spine */
.tl::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--brand), var(--ember) 55%, var(--gold-soft));
}

.tl-item {
    position: relative;
    margin-bottom: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: var(--lift-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

.tl-item:last-child {
    margin-bottom: 0;
}

.tl-item:hover {
    transform: translateX(4px);
    border-color: rgba(228, 87, 78, .35);
    box-shadow: var(--lift-3);
}

.tl-num {
    position: absolute;
    left: -62px;
    top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 0 0 5px var(--pearl), 0 10px 20px -10px rgba(139, 16, 20, .7);
}

.tl-item h3 {
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 12px;
}

.tl-item p {
    font-size: .99rem;
    line-height: 1.82;
    color: var(--ink-body);
    margin-bottom: 14px;
}

.tl-item p:last-child {
    margin-bottom: 0;
}

/* ==========================  Pillar cards  ============================== */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Four-up variant, so a set of four centres does not leave an orphan */
.pillars.is-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pillar {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: var(--lift-1);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

.pillar::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.pillar:hover::before {
    transform: scaleX(1);
}

.pillar:hover {
    transform: translateY(-5px);
    border-color: rgba(228, 87, 78, .35);
    box-shadow: var(--lift-3);
}

.pillar-i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--blush);
    color: var(--brand);
    font-size: 1.24rem;
    margin-bottom: 18px;
    transition: background .35s ease, color .35s ease;
}

.pillar:hover .pillar-i {
    background: var(--grad-brand);
    color: #fff;
}

.pillar h3 {
    font-size: 1.16rem;
    color: var(--ink);
    margin-bottom: 10px;
}

.pillar p {
    font-size: .95rem;
    line-height: 1.74;
    color: var(--text-muted);
    margin: 0;
}

/* ====================  Letter layout (CEO / Directors)  ================= */
.letter-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.letter-aside {
    position: sticky;
    top: 118px;
}

.letter-portrait {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, var(--blush) 0%, var(--pearl) 62%);
    box-shadow: var(--lift-3);
    aspect-ratio: 4 / 5;
}

.letter-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 6%;
}

.letter-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 26px;
    margin-top: 18px;
    box-shadow: var(--lift-1);
}

.letter-card h4 {
    font-size: 1.12rem;
    color: var(--ink);
    margin-bottom: 4px;
}

.letter-card .role {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--blush);
    border-radius: 50px;
    padding: 5px 13px;
    margin-bottom: 14px;
}

.cred-list {
    display: grid;
    gap: 9px;
}

.cred-list li {
    position: relative;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-body);
}

.cred-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* The letter itself sits on a warm sheet */
.letter-body {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 46px 52px;
    box-shadow: var(--lift-2);
}

.letter-body>p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 3.6rem;
    line-height: .86;
    font-weight: 700;
    padding: 6px 12px 0 0;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.letter-sign {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px dashed var(--line);
}

.letter-sign strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--ink);
}

.letter-sign span {
    font-size: .92rem;
    color: var(--text-muted);
}

/* =====================  Vision / Mission panels  ======================== */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.vm-panel {
    position: relative;
    border-radius: 24px;
    padding: 44px 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--lift-2);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.vm-panel:hover {
    transform: translateY(-5px);
    box-shadow: var(--lift-3);
}

/* Vision takes the brand gradient, Mission the pearl sheet — so the pair
   reads as two halves of one statement rather than two identical boxes. */
.vm-panel.is-vision {
    background: linear-gradient(140deg, var(--ink) 0%, var(--maroon) 55%, #8E1B2E 100%);
    border-color: transparent;
    color: #fff;
}

.vm-panel.is-vision::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 280px at 88% 12%, rgba(255, 138, 76, .34), transparent 62%);
    pointer-events: none;
}

.vm-panel>* {
    position: relative;
    z-index: 1;
}

.vm-i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 1.4rem;
    margin-bottom: 22px;
    background: var(--blush);
    color: var(--brand);
}

.vm-panel.is-vision .vm-i {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--gold);
}

.vm-panel h2 {
    font-size: 1.9rem;
    letter-spacing: -.01em;
    margin-bottom: 14px;
    color: var(--ink);
}

.vm-panel.is-vision h2 {
    color: #fff;
}

.vm-panel p {
    font-size: 1.06rem;
    line-height: 1.82;
    color: var(--ink-body);
    margin: 0;
}

.vm-panel.is-vision p {
    color: rgba(255, 255, 255, .88);
}

/* Full-width guiding line */
.vm-band {
    padding: 62px 0;
    text-align: center;
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(255, 138, 76, .13), transparent 64%),
        var(--pearl);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.vm-band p {
    font-family: var(--font-heading);
    font-size: 1.72rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto;
}

.vm-band p span {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================  Value chips  =============================== */
.values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.value {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: var(--lift-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.value:hover {
    transform: translateY(-4px);
    box-shadow: var(--lift-2);
}

.value i {
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 14px;
    display: block;
}

.value h3 {
    font-size: 1.04rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.value p {
    font-size: .9rem;
    line-height: 1.66;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================  Contact strip  ============================= */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contact-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 26px;
    box-shadow: var(--lift-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(228, 87, 78, .35);
    box-shadow: var(--lift-2);
}

.contact-card .ci {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--blush);
    color: var(--brand);
    font-size: 1.06rem;
}

.contact-card h4 {
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 6px;
}

.contact-card p,
.contact-card a {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

.contact-card a {
    color: var(--maroon);
    font-weight: 600;
}

.contact-card a:hover {
    color: var(--brand);
}

/* ============================  CTA band  ================================ */
.pg-cta {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background: linear-gradient(112deg, var(--ink) 0%, var(--maroon) 52%, #8E1B2E 100%);
    color: #fff;
}

.pg-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 320px at 88% 18%, rgba(255, 138, 76, .3), transparent 62%);
    pointer-events: none;
}

.pg-cta-in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.pg-cta h2 {
    font-size: 2.05rem;
    line-height: 1.22;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

.pg-cta p {
    font-size: 1.02rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin: 0;
}

/* ===========================  Responsive  =============================== */
@media (max-width: 1100px) {

    .pillars,
    .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .letter-aside {
        position: static;
        max-width: 420px;
    }

    .pg-hero h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 860px) {
    .vm-grid {
        grid-template-columns: 1fr;
    }

    .letter-body {
        padding: 32px 28px;
    }

    .pg-cta-in {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {

    .pillars,
    .contact-cards,
    .values {
        grid-template-columns: 1fr;
    }

    .pg-hero {
        padding: 122px 0 54px;
    }

    .pg-hero h1 {
        font-size: 2.1rem;
    }

    .sec-title {
        font-size: 1.9rem;
    }

    .vm-band p {
        font-size: 1.3rem;
    }

    .tl {
        padding-left: 44px;
    }

    .tl::before {
        left: 15px;
    }

    .tl-num {
        left: -44px;
        width: 32px;
        height: 32px;
        font-size: .82rem;
    }

    .tl-item {
        padding: 24px 22px;
    }
}

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

    .tl-item:hover,
    .pillar:hover,
    .vm-panel:hover,
    .value:hover,
    .contact-card:hover {
        transform: none;
    }
}

/* =====================  Team portraits: arch frame  ======================
   The portrait files are circular cut-outs on a pale square. Instead of a
   circle, each photo is zoomed inside an arch (rounded top, soft bottom
   corners) so the disc edge never shows, with an offset tint frame behind
   it. The zoom origin sits high so the whole face stays in view. */
body.hv-light .hv-docs.is-team-page .team-img-wrapper {
    position: relative;
    width: 200px;
    height: 236px;
    flex: 0 0 236px;
    margin: 6px auto 30px;
    border-radius: 100px 100px 40px 40px;
    overflow: hidden;
    background: linear-gradient(165deg, #FDECEA 0%, #F6D3CC 100%);
    box-shadow:
        12px 12px 0 0 rgba(142, 27, 46, .12),
        0 22px 34px -20px rgba(120, 60, 55, .55);
}

body.hv-light .hv-docs.is-team-page .team-img-wrapper::before,
body.hv-light .hv-docs.is-team-page .team-img-wrapper::after {
    content: none;
    display: none;
}

body.hv-light .hv-docs.is-team-page .team-card .team-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 20%;
    transform: scale(1.45);
    transform-origin: 50% 20%;
    filter: none;
    transition: transform .6s var(--ease);
}

body.hv-light .hv-docs.is-team-page .team-card:hover .team-img-wrapper img {
    transform: scale(1.52);
    filter: none;
}

/* the lead consultant's frame in the logo's gold */
body.hv-light .hv-docs.is-team-page .team-card.is-lead .team-img-wrapper {
    box-shadow:
        12px 12px 0 0 rgba(233, 162, 59, .45),
        0 22px 34px -20px rgba(120, 60, 55, .55);
}

@media (prefers-reduced-motion: reduce) {
    body.hv-light .hv-docs.is-team-page .team-card:hover .team-img-wrapper img {
        transform: scale(1.45);
    }
}