/* components.css — section components, links, buttons, cards */

a.scroll-link {
    display: none;
}

section#heromedia {
    background: linear-gradient(to bottom, #fde3d8 0, #f8efeb 100%);
    padding: 50px;
}

/* ============ Link system ============ */
.link {
    transition: color var(--transition-fast);
}

/* Animated underline link (reference: 600-weight link, 4px bottom pad, underline grows) */
.link--underline {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 4px;
    position: relative;
    color: var(--color-link);
}

.link--underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform var(--transition-normal);
}

.link--underline:hover::after,
.link--underline:focus-visible::after {
    transform: scaleX(0);
    transform-origin: right;
}

.link--underline.link--invert {
    color: var(--color-white);
}

/* Blue text link with arrow that nudges on hover (reference CTA style) */
.link--arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-link);
    font-size: 16px;
    font-weight: 600;
}

.link--arrow .arrow {
    font-weight: 400;
}

.link--arrow.link--invert {
    color: var(--color-white);
}

/* Card CTA link ("Find out more" inside purpose cards — blue per reference) */
.link--cta {
    color: var(--color-link);
    font-size: 16px;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.link--cta:hover,
.link--cta:focus-visible {
    text-decoration: underline;
}

.link--arrow .arrow {
    transition: transform var(--transition-fast);
}

.link--arrow:hover .arrow,
.link--arrow:focus-visible .arrow {
    transform: translateX(6px);
}

/* Primary solid buttons */
.btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* PwC buttons: solid orange, square corners, bold label (pwc.in CTA style) */
.btn--blue {
    background: var(--color-btn);
    color: var(--color-white);
    padding: 13px 24px;
    border-radius: 0;
    font-weight: 700;
}

.btn--blue:hover,
.btn--blue:focus-visible {
    background: var(--color-btn-hover);
}

/* Outlined CTA — replica of pwc.in/careers.html "Find your next career
   opportunity" button: 0.8px black border, square corners, bold black
   label with external-link icon; fills black with white text on hover. */
.btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    color: var(--color-black);
    border: 0.8px solid var(--color-black);
    border-radius: 0;
    padding: 13px 20px;
    font-size: 16px;
    font-weight: 700;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn--outline .btn__ext-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-orange); /* #fd5108 */
    border-color: var(--color-orange);
    color: var(--color-white); /* label + icon (icon fills currentColor) */
}

.hero__cta {
    margin-top: var(--space-5);
}

/* Card link wrapper (whole card clickable) */
.link--card {
    display: block;
    color: inherit;
}

/* ============ Hero ============ */
.hero {
    padding-top: var(--space-7);
    text-align: center;
    overflow-x: clip; /* pre-reveal collage items sit translated ±60px */
}

.hero__figure {
    width: 356px;
    max-width: 80%;
    margin: 0 auto var(--space-7);
}

/* placeholder photo cropped to a circle to echo the reference's green-blob cutout */
.hero__figure img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.hero__title {
    max-width: 577px;
    margin: 0 auto var(--space-5);
    color: var(--color-green-deep); /* reference H1 is Deloitte green */
}

.hero__intro {
    max-width: 769px;
    margin: 0 auto;
}

.hero__intro p + p {
    margin-top: 42px;
}

.hero__video {
    max-width: 1013px;
    margin: var(--space-10) auto 0;
}

/* Video component with play overlay */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-black);
    overflow: hidden;
}

.video-frame img,
.video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-frame__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    transition: background-color var(--transition-fast);
}

.video-frame__play:hover,
.video-frame__play:focus-visible {
    background: rgba(0, 0, 0, 0.3);
}

/* Solid PwC-orange circle, white triangle, no ring */
.video-frame__play .play-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-link-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.video-frame__play:hover .play-icon {
    transform: scale(1.08);
    background: var(--color-btn-hover);
}

.video-frame__play .play-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--color-white);
    margin-left: 5px;
}

.video-frame.is-playing .video-frame__play {
    display: none;
}

/* Photo collage — 3 images, measured ratio 569:280:288, 8px gaps, 424px tall */
.photo-collage {
    display: grid;
    grid-template-columns: 569fr 280fr 288fr;
    gap: 8px;
    margin-top: 30px;
}

.photo-collage__item {
    position: relative; /* anchors the caption overlay */
    overflow: hidden;
    aspect-ratio: auto;
    height: 424px; /* pin item to the image height so the caption overlay
                      sits flush on the image, not in leftover grid space */
}

/* Caption overlay: heading always on the image; description slides open
   below it on hover/keyboard focus */
.collage-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 56px 24px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
    color: var(--color-white);
    text-align: left;
    pointer-events: none; /* image stays the hover target */
}

.collage-caption__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.collage-caption__desc {
    font-size: 15px;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height var(--transition-normal), opacity var(--transition-normal),
        transform var(--transition-normal), margin-top var(--transition-normal);
}

.photo-collage__item:hover .collage-caption__desc,
.photo-collage__item:focus-visible .collage-caption__desc,
.photo-collage__item:focus-within .collage-caption__desc {
    max-height: 140px;
    opacity: 1;
    transform: none;
    margin-top: 8px;
}

/* reference collage: middle image sits slightly lower */
.photo-collage__item:nth-child(2) {
    margin-top: 32px;
}

.photo-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.photo-collage__item:hover img {
    transform: scale(1.04);
}

/* ============ Statistics (expanding image + frosted cards) ============
 * Reference: a tall group photo starts inset at content width and expands
 * to full-bleed as you scroll (scroll-linked), with frosted glass cards
 * anchored over its lower portion. */
.statistics {
    position: relative;
    padding: 250px 0 40px;
    overflow: hidden;
}

.statistics__bg {
    position: absolute;
    inset: 0;
    /* JS drives the inline margin (expansion) and scale (zoom) with scroll progress */
    margin: 0 var(--container-pad);
    background-size: cover;
    background-position: center top;
    transition: margin 0.2s linear, transform 0.2s linear;
    will-change: transform;
}

.statistics_title__grid {
    position: relative;
    display: grid;
    max-width: 1008px;
    margin: 0 auto;
    padding: 0 var(--space-2);
}

.statistics_title__grid h2 {
    color: #fff;
}

.statistics__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1008px;
    margin: 0 auto;
    padding: 0 var(--space-2);
}

.stat {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 32px 24px 24px;
    min-height: 325px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .3s ease-in-out;
}
.stat:hover {
    background: #FFCDA8;
}

.stat__number {
    font-size: var(--fs-stat-number);
    font-weight: 700;
    line-height: 1.375;
}

.stat__label {
    font-size: var(--fs-stat-label);
    font-weight: 300;
    line-height: 1.375;
    margin-bottom: auto;
}

.stat .btn {
    margin-top: 16px;
}

/* ============ Purpose / WorldClass card-reveal ============ */
.card-reveal {
    background: var(--color-gray-bg); /* PwC light gray section, white card panels */
    min-height: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.card-reveal__content {
    padding: 74px var(--space-5) 74px var(--space-4);
    max-width: 633px;
    justify-self: end;
    width: 100%;
}

.card-reveal__content p {
    font-size: 20px;
}

.card-reveal__item-body h3.heading-card {
    font-size: 22px;
}

.card-reveal__content .eyebrow {
    margin-bottom: var(--space-4);
}

.card-reveal__content .heading-xl {
    margin-bottom: var(--space-6, 48px);
}

.card-reveal__content .body-copy {
    max-width: 561px;
}

.card-reveal__content .body-copy p + p {
    margin-top: 24px;
}

.card-reveal__content .btn {
    margin-top: var(--space-4);
}

.card-reveal__stage {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
}

.card-reveal__track {
    display: flex;
    flex-wrap: wrap; /* 4 half-width cards → 2×2 grid on desktop */
    gap: 20px;
    height: 100%;
    padding-left: var(--space-3);
}

/* Scroll-depth entrance (driven by interactions.js): card 1 slides in when
   the section enters the viewport, card 2 only after scrolling deeper. */
.card-reveal__item {
    transform: translateX(60vw);
    opacity: 0;
    transition:
        transform 1.4s var(--reveal-ease),
        opacity 1s var(--reveal-ease);
    will-change: transform;
}

.card-reveal__item.is-in {
    transform: none;
    opacity: 1;
}

/* Reference card: full-height white panel — title on top, blue "Find out
   more" above a padded image at the bottom. The whole rail starts fully
   off-screen right and slides in as one panel. */
/* two cards share the column: padding-left 24 + gap 20 + 2 cards = 100% */
.card-reveal__item {
    flex: 0 0 calc(50% - 32px);
    min-height: 340px;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.card-reveal__item img {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    aspect-ratio: 440 / 240;
    object-fit: cover;
}

.card-reveal__item-body {
    padding: 28px 24px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

.card-reveal__item-body .link {
    margin-top: auto;
    padding-bottom: 24px;
}

/* ============ Leaders (profile promo) ============
   Reference: two large circular portraits side by side, centered,
   blue name link, role, and outlined circular social icons below. */
.leaders__header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.leaders__header .eyebrow {
    margin-bottom: var(--space-7);
}

.leaders__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    max-width: 1000px;
    margin: 0 auto;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile__avatar {
    width: 285px;
    height: 285px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.profile__avatar img {
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.profile:hover .profile__avatar img {
    transform: scale(1.06);
}

.profile__name {
    font-size: 18px;
    font-weight: 600;
}

.profile__name a {
    color: var(--color-link);
    transition: color var(--transition-fast);
}

.profile__name a:hover,
.profile__name a:focus-visible {
    text-decoration: underline;
}

.profile__role {
    font-size: 15px;
    margin-top: 8px;
}

.profile__social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.profile__social a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-link);
    color: var(--color-link);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.profile__social a:hover,
.profile__social a:focus-visible {
    background: var(--color-link);
    color: var(--color-white);
}

.profile__social svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ============ Real results (editorial split + quote collage) ============
   Reference: mint gradient section; sticky left text; tall portraits with a
   frosted translucent quote card overlapping each photo's bottom-right.
   The second card scrolls up OVER the pinned first (CSS sticky stacking),
   and the effect reverses on scroll up. */
.people-section {
    background: linear-gradient(160deg, #fff5ed 0%, var(--color-orange-tint) 60%, #ffd9bd 100%);
    padding: 50px 0;
    overflow-x: clip; /* overhanging quotes must never widen the page */
}

.people {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: var(--space-10);
    align-items: start;
}

.people__text {
    position: sticky;
    top: 140px;
    padding-top: 44px;
}

.people__text .eyebrow, .section-dark__content .eyebrow {
    margin-bottom: var(--space-4);
}

.people__text .heading-xl {
    margin-bottom: var(--space-6, 48px);
}

.people__text .body-lg {
    margin-bottom: var(--space-5);
}

/* Cards flow naturally, one below the other, each with the standard
   slide-up reveal as it scrolls into view (no overlap effect). */
/* Reference composition: the frosted mint quote overlaps the photo's lower
   corner and hangs below/beside it — card 1 bottom-right (overhanging right),
   card 2 bottom-left (overhanging left), photos zigzagging in the column. */
.poe {
    background: linear-gradient(160deg, #fff5ed 0%, var(--color-orange-tint) 60%, #ffd9bd 100%);
    padding: 50px 0;
    overflow-x: clip;
}

.poe__inner {
    width: min(100% - 112px, 1288px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 80px;
    align-items: start;
    direction: ltr;               /* guard: host rtl/float rules can't flip us */
}

/* Explicit placement: the host site's CSS can never swap these columns. */
.poe__text  { grid-column: 1; grid-row: 1; }
.poe__steps { grid-column: 2; grid-row: 1; min-width: 0; }

.poe__text {
    position: sticky;
    top: 140px;
    padding-top: 44px;
}

.poe__eyebrow {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 32px;
}

.poe__heading {
    font-family: "PwC ITC Charter", Georgia, "Times New Roman", serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.375;
    margin: 0 0 48px;
}

.poe__intro {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.75;
    margin: 0;
}

/* ------ step cards: photo with an overlapping panel, zigzag layout ------ */
.poe-card {
    position: relative;
    max-width: 630px;
    margin: 0 0 200px;            /* room for the panel's bottom overhang */
}

.poe-card:nth-child(even) { margin-left: auto; }
.poe-card:last-child      { margin-bottom: 140px; }

.poe-card img {
    display: block;
    width: 100%;
    aspect-ratio: 630 / 440;
    object-fit: cover;
}

.poe-card__panel {
    position: absolute;
    bottom: -120px;
    width: min(500px, calc(100% - 48px));
    background: #ffffff;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* zigzag: odd panels bottom-right, even panels bottom-left */
.poe-card:nth-child(odd)  .poe-card__panel { right: 24px; }
.poe-card:nth-child(even) .poe-card__panel { left: 24px; }

.poe-card__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px;
}

.poe-card__desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* ------ scroll reveal (scoped) ------ */
[data-poe-reveal] {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}
[data-poe-reveal="up"]    { transform: translateY(60px); }
[data-poe-reveal="left"]  { transform: translateX(-60px); }
[data-poe-reveal="right"] { transform: translateX(60px); }
[data-poe-reveal].poe-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-poe-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------ responsive ------ */
@media (max-width: 1100px) {
    .poe__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        width: min(100% - 64px, 1288px);
    }
    /* stacked: release the desktop pinning, text first then steps */
    .poe__text, .poe__steps { grid-column: 1; grid-row: auto; }
    .poe__text { position: static; padding-top: 0; max-width: 560px; }
}

@media (max-width: 640px) {
    .poe { padding: 48px 0; }
    .poe__heading { font-size: 32px; }
    .poe-card { margin-bottom: 56px; }
    .poe-card:nth-child(even) { margin-left: 0; }
    .poe-card img { aspect-ratio: auto; height: 240px; }
    /* panel flows below the photo instead of overlapping on small screens */
    .poe-card__panel {
        position: static;
        width: auto;
        margin: -32px 16px 0;
    }
    .poe-card:last-child { margin-bottom: 0; }
}

/* ============ Ethics / Societal editorial splits ============ */
/* Split: wide image flush to the viewport edge, text column beside it with
   a tight gap (reference proportions ~50/50) */
.split {
    display: grid;
    grid-template-columns: minmax(0, 50%) 1fr;
    align-items: center;
    gap: var(--space-5);
    /* image spans the full screen height (reference look), section = one viewport */
    min-height: 0;
    padding: 0;
}

.split__media {
    overflow: hidden;
    padding-left: 40px;
}

/* scroll-driven clip reveal (interactions.js): the visible window expands
   as you scroll down, contracts on scroll up — reference's clip:rect effect */
.split__media img {
    /* full-viewport-height portrait, flush to the screen edge (reference look) */
    width: 100%;
    height: 100vh;
    object-fit: cover;
    will-change: clip-path;
}

.split__text {
    max-width: 620px;
}

.split--media-left .split__text {
    justify-self: start;
    margin-left: 48px;
    padding-right: var(--container-pad);
}

.split--media-right {
    grid-template-columns: 1fr minmax(0, 50%);
}

.split--media-right .split__media {
    order: 2;
}

.split--media-right .split__text {
    order: 1;
    justify-self: end;
    margin-right: 48px;
    padding-left: var(--container-pad);
}

.split__text .heading-xl {
    margin-bottom: 16px;
}

.split__text .eyebrow {
    display: block;
    margin-bottom: var(--space-4);
}

.split__text .body-lg:not(:last-child) {
    margin-bottom: var(--space-4);
}

/* ============ News ============ */
.news {
    background: var(--color-green-pale);
    padding: 80px 0;
}

.news__inner {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: var(--space-10);
    align-items: center;
}

.news__text .heading-xl {
    margin-bottom: 16px;
}

.news__text .eyebrow {
    display: block;
    margin-bottom: var(--space-3);
}

.news__text .body-lg {
    margin-bottom: var(--space-4);
}

.news__video {
    max-width: 549px;
    justify-self: end;
    width: 100%;
}

/* ============ WorldImpact card dealer ============
   Reference: centered header, blue arrow link, three portrait-image cards */
section#worldimpact {
    padding: 0 12px;
}
.worldimpact__header {
    /*text-align: center;*/
}

.worldimpact__header .eyebrow {
    font-size: 16px;
    margin-bottom: 24px;
}

.worldimpact__header .heading-xl {
    max-width: 1153px;
    margin: 0 auto var(--space-3);
}

.worldimpact__cards {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    /*justify-content: center;*/
    gap: 62px;
    margin-top: 30px;
    padding-bottom: 30px;
}

.wi-card {
    display: block;
}

.wi-card__media {
    overflow: hidden;
    margin-bottom: 21px;
}

.wi-card__media img {
    object-fit: cover;
    transition: transform var(--transition-normal);
    width: 72px;
    height: 72px;
}

.wi-card:hover .wi-card__media img,
.wi-card:focus-visible .wi-card__media img {
    transform: scale(1.05);
}

.wi-card__title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
    transition: color var(--transition-fast);
}

.wi-card__desc {
    font-size: 16px;
    color: var(--color-text);
}

/* Dark section CTA spacing */
.section-dark .heading-xl {
    margin-bottom: 42px;
}

.section-dark .body-lg {
   /* margin-bottom: 42px; */
}

/* Visible focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 2px;
}

/* ====== India map ====== */
.pim {
    background: #ffffff;
    padding: 50px 0;
    overflow-x: clip;             /* pre-reveal offsets must not widen the page */
    font-family: "PwC Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #2d2d2d;
    direction: ltr;               /* guard: host rtl rules can't reflow us */
}

.pim__inner {
    width: min(100% - 112px, 1288px);
    margin: 0 auto;
}

.pim__eyebrow {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.pim__heading {
    font-family: "PwC ITC Charter", Georgia, "Times New Roman", serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.375;
    margin: 0;
}

.pim__intro {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.75;
    max-width: 769px;
    margin: 0 auto;
}

.pim__figure img {
    margin: 0 auto;
    width: 57%;
}

/* ------ scroll reveal ------ */
[data-pim-reveal] {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}
[data-pim-reveal="up"] { transform: translateY(60px); }
[data-pim-reveal-delay="200"] { transition-delay: 0.4s; }
[data-pim-reveal].pim-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-pim-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------ responsive ------ */
@media (max-width: 1100px) {
    .pim__inner { width: min(100% - 64px, 1288px); }
}

@media (max-width: 640px) {
    .pim { padding: 48px 0; }
    .pim__heading { font-size: 32px; }
    .pim__intro { font-size: 18px; }
    .pim__figure img { width: 100%;}}