/* =========================================================
   NARGOON — SOCIAL RESPONSIBILITY
   Final compact / minimal layout
   IMPORTANT: no green typography is used anywhere in this file.
   ========================================================= */

.ng-company-social {
    --ng-social-ink: #1a1a1a;
    --ng-social-muted: #747a78;
    --ng-social-gold: #c9a961;
    --ng-social-paper: #f7f5ef;
    --ng-social-paper-2: #fbfaf7;
    --ng-social-line: rgba(26, 26, 26, .12);
    --ng-social-green: #205043; /* surfaces only — never typography */
    box-sizing: border-box;
    color: var(--ng-social-ink);
    font-family: Vazirmatn, IRANSansWeb, Tahoma, sans-serif;
    text-align: start;
}

.ng-company-social *,
.ng-company-social *::before,
.ng-company-social *::after {
    box-sizing: border-box;
}

.ng-company-social :is(h1, h2, h3, p, figure, ol) {
    margin: 0;
}

.ng-company-social :is(h1, h2, h3, strong, a) {
    color: var(--ng-social-ink);
}

.ng-company-social em {
    color: var(--ng-social-gold);
    font-style: normal;
}

.ng-company-social a {
    text-decoration: none;
}

.ng-company-social .ng-company-kicker,
.ng-company-social .ng-company-eyebrow {
    display: inline-block;
    color: var(--ng-social-gold) !important;
    direction: ltr;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.5;
}

.ng-company-social :focus-visible {
    outline: 2px solid var(--ng-social-gold);
    outline-offset: 4px;
}


/* =========================================================
   01 — HERO
   ========================================================= */

.ng-social-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--ng-social-paper);
    padding: 74px max(32px, calc((100% - 1320px) / 2)) 68px;
}

.ng-social-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
    gap: clamp(56px, 6vw, 96px);
    align-items: center;
    width: min(1320px, calc(100vw - 64px));
    min-height: 500px;
    margin-inline: auto;
}

.ng-social-hero__copy {
    max-width: 650px;
}

.ng-company-social .ng-company-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-end: 46px;
    color: #929692;
    font-size: 12px;
    line-height: 1.5;
}

.ng-company-social .ng-company-breadcrumb a,
.ng-company-social .ng-company-breadcrumb span {
    color: #929692 !important;
}

.ng-company-social .ng-company-breadcrumb a {
    transition: color .25s ease;
}

.ng-company-social .ng-company-breadcrumb a:hover {
    color: var(--ng-social-gold) !important;
}

.ng-social-hero h1 {
    max-width: 720px;
    margin-block: 14px 18px;
    color: var(--ng-social-ink) !important;
    font-size: clamp(48px, 4.4vw, 76px);
    font-weight: 350;
    line-height: 1.26;
    letter-spacing: -.02em;
}

.ng-social-hero__lead {
    max-width: 560px;
    color: var(--ng-social-muted) !important;
    font-size: 16px;
    line-height: 2;
}

.ng-social-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-block-start: 30px;
    padding-block-end: 7px;
    border-block-end: 1px solid rgba(201,169,97,.65);
    color: var(--ng-social-ink) !important;
    font-size: 13px;
    font-weight: 650;
    transition: border-color .25s ease, gap .25s ease;
}

.ng-social-hero__link span {
    color: var(--ng-social-gold) !important;
    font-size: 16px;
}

.ng-social-hero__link:hover {
    gap: 16px;
    border-color: var(--ng-social-gold);
}

.ng-social-hero__media {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    background: #ebe7dc;
}

.ng-social-hero__media::after {
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(255,255,255,.62);
    content: "";
    pointer-events: none;
}

.ng-social-hero__media img {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    filter: saturate(.88) contrast(.98);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

.ng-social-hero__media:hover img {
    transform: scale(1.025);
    filter: saturate(1) contrast(1);
}

.ng-social-hero__media figcaption {
    position: absolute;
    z-index: 2;
    inset-inline: 24px;
    inset-block-end: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.32);
}

.ng-social-hero__media figcaption span {
    color: #ead59c !important;
    direction: ltr;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.ng-social-hero__media figcaption strong {
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
}

.ng-social-hero__index {
    position: absolute;
    inset-inline-end: max(32px, calc((100% - 1320px) / 2));
    inset-block-end: 28px;
    color: #a7aaa5 !important;
    direction: ltr;
    font-size: 10px;
    letter-spacing: .15em;
}


/* =========================================================
   02 — FIVE COMMITMENTS
   ========================================================= */

.ng-social-focus {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
    padding-block: 78px 82px;
}

.ng-social-focus__head {
    display: flex;
    justify-content: space-between;
    gap: 36px;
    align-items: end;
    margin-block-end: 38px;
}

.ng-social-focus__head h2 {
    max-width: 760px;
    color: var(--ng-social-ink) !important;
    font-size: clamp(36px, 3.6vw, 52px);
    font-weight: 350;
    line-height: 1.4;
}

.ng-social-focus__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block-start: 1px solid var(--ng-social-line);
    border-block-end: 1px solid var(--ng-social-line);
}

.ng-social-focus__item {
    position: relative;
    min-width: 0;
    padding: 26px 22px 28px;
    border-inline-end: 1px solid var(--ng-social-line);
}

.ng-social-focus__item:first-child {
    border-inline-end: 0;
}

.ng-social-focus__number {
    display: block;
    margin-block-end: 22px;
    color: var(--ng-social-gold) !important;
    direction: ltr;
    font-size: 27px;
    font-weight: 350;
    line-height: 1;
}

.ng-social-focus__item small {
    display: block;
    margin-block-end: 9px;
    color: #9a9d99 !important;
    direction: ltr;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.ng-social-focus__item h3 {
    margin-block-end: 9px;
    color: var(--ng-social-ink) !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.ng-social-focus__item p {
    color: var(--ng-social-muted) !important;
    font-size: 12px;
    line-height: 1.9;
}

@media (hover:hover) and (pointer:fine) {
    .ng-social-focus__item {
        transition: background-color .28s ease;
    }

    .ng-social-focus__item:hover {
        background: rgba(201,169,97,.055);
    }
}


/* =========================================================
   03 — PROCESS
   ========================================================= */

.ng-social-process {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
    padding-block: 72px 78px;
}

.ng-social-process__head {
    margin-block-end: 40px;
}

.ng-social-process__head h2 {
    margin-block-start: 10px;
    color: var(--ng-social-ink) !important;
    font-size: clamp(36px, 3.5vw, 50px);
    font-weight: 350;
    line-height: 1.4;
}

.ng-social-process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    list-style: none;
}

.ng-social-process__steps::before {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 20px;
    height: 1px;
    background: rgba(201,169,97,.48);
    content: "";
}

.ng-social-process__steps li {
    position: relative;
    min-width: 0;
    padding-inline-end: 36px;
}

.ng-social-process__number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-block-end: 23px;
    border: 1px solid rgba(201,169,97,.72);
    border-radius: 50%;
    background: #fff;
    color: var(--ng-social-gold) !important;
    direction: ltr;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ng-social-process__steps strong {
    display: block;
    margin-block-end: 7px;
    color: var(--ng-social-ink) !important;
    font-size: 18px;
    font-weight: 700;
}

.ng-social-process__steps p {
    max-width: 300px;
    color: var(--ng-social-muted) !important;
    font-size: 12.5px;
    line-height: 1.9;
}


/* =========================================================
   04 — FINAL STATEMENT + RELATED LINKS
   ========================================================= */

.ng-social-closing {
    position: relative;
    overflow: hidden;
    background: var(--ng-social-paper);
    padding: 76px max(32px, calc((100% - 1320px) / 2)) 42px;
}

.ng-social-closing::before {
    display: none;
}

.ng-social-closing__statement {
    width: min(1320px, 100%);
    margin-inline: auto;
    text-align: right;
}

.ng-social-closing__statement h2 {
    max-width: 920px;
    margin: 13px 0 18px auto;
    color: var(--ng-social-ink) !important;
    font-size: clamp(40px, 3.7vw, 66px);
    font-weight: 350;
    line-height: 1.42;
}

.ng-social-closing__statement p {
    max-width: 620px;
    margin: 0 0 0 auto;
    color: var(--ng-social-muted) !important;
    font-size: 14px;
    line-height: 2;
}

.ng-social-closing__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1320px, 100%);
    margin: 48px auto 0;
    border-block-start: 1px solid var(--ng-social-line);
    border-block-end: 1px solid var(--ng-social-line);
}

.ng-social-closing__link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 15px;
    align-items: center;
    min-height: 74px;
    padding: 0 20px;
    color: var(--ng-social-ink) !important;
}

.ng-social-closing__link + .ng-social-closing__link {
    border-inline-start: 1px solid var(--ng-social-line);
}

.ng-social-closing__link > span,
.ng-social-closing__link > b {
    color: var(--ng-social-gold) !important;
}

.ng-social-closing__link > span {
    direction: ltr;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.ng-social-closing__link strong {
    color: var(--ng-social-ink) !important;
    font-size: 15px;
    font-weight: 650;
}

.ng-social-closing__link b {
    font-size: 17px;
    font-weight: 400;
    transition: transform .25s ease;
}

.ng-social-closing__link:hover b {
    transform: translateX(-4px);
}


/* =========================================================
   MOTION
   ========================================================= */

.ng-company-social.ng-company-has-motion [data-company-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

.ng-company-social.ng-company-has-motion [data-company-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity .62s ease,
        transform .72s cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .ng-social-hero {
        padding: 64px 24px 58px;
    }

    .ng-social-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr);
        gap: 44px;
        min-height: 0;
    }

    .ng-social-hero h1 {
        font-size: clamp(44px, 4.8vw, 66px);
    }

    .ng-social-focus__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-block-end: 0;
    }

    .ng-social-focus__item {
        border-block-end: 1px solid var(--ng-social-line);
    }

    .ng-social-focus__item:nth-child(3n+1) {
        border-inline-end: 0;
    }

    .ng-social-focus__item:first-child {
        border-inline-end: 1px solid var(--ng-social-line);
    }
}

@media (max-width: 820px) {
    .ng-social-hero__inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .ng-company-social .ng-company-breadcrumb {
        margin-block-end: 30px;
    }

    .ng-social-hero__copy {
        max-width: 720px;
    }

    .ng-social-hero__media,
    .ng-social-hero__media img {
        height: 390px;
        min-height: 390px;
    }

    .ng-social-hero__index {
        display: none;
    }

    .ng-social-focus,
    .ng-social-process {
        width: calc(100% - 40px);
    }

    .ng-social-focus {
        padding-block: 62px 66px;
    }

    .ng-social-focus__head {
        display: block;
        margin-block-end: 30px;
    }

    .ng-social-focus__head .ng-company-eyebrow {
        margin-block-end: 10px;
    }

    .ng-social-focus__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ng-social-focus__item,
    .ng-social-focus__item:first-child,
    .ng-social-focus__item:nth-child(3n+1) {
        border-inline-end: 1px solid var(--ng-social-line);
    }

    .ng-social-focus__item:nth-child(odd) {
        border-inline-end: 0;
    }

    .ng-social-process {
        padding-block: 60px 64px;
    }

    .ng-social-process__steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ng-social-process__steps::before {
        inset-inline-start: 20px;
        inset-inline-end: auto;
        inset-block: 0;
        width: 1px;
        height: auto;
    }

    .ng-social-process__steps li {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 20px;
        padding: 0 0 30px;
    }

    .ng-social-process__number {
        margin: 0;
    }

    .ng-social-closing {
        padding: 62px 24px 34px;
    }
}

@media (max-width: 560px) {
    .ng-social-hero {
        padding: 38px 18px 42px;
    }

    .ng-social-hero h1 {
        margin-block: 12px 14px;
        font-size: clamp(38px, 12vw, 52px);
        line-height: 1.32;
    }

    .ng-social-hero__lead {
        font-size: 14px;
    }

    .ng-social-hero__media,
    .ng-social-hero__media img {
        height: 310px;
        min-height: 310px;
    }

    .ng-social-hero__media figcaption {
        inset-inline: 18px;
        inset-block-end: 17px;
        display: block;
    }

    .ng-social-hero__media figcaption span {
        display: block;
        margin-block-end: 4px;
    }

    .ng-social-focus,
    .ng-social-process {
        width: calc(100% - 30px);
    }

    .ng-social-focus {
        padding-block: 48px 54px;
    }

    .ng-social-focus__head h2,
    .ng-social-process__head h2 {
        font-size: clamp(32px, 10vw, 42px);
    }

    .ng-social-focus__grid {
        grid-template-columns: 1fr;
    }

    .ng-social-focus__item,
    .ng-social-focus__item:first-child,
    .ng-social-focus__item:nth-child(odd),
    .ng-social-focus__item:nth-child(3n+1) {
        border-inline-end: 0;
        border-block-end: 1px solid var(--ng-social-line);
        padding: 22px 8px 24px;
    }

    .ng-social-process {
        padding-block: 50px 54px;
    }

    .ng-social-closing {
        padding: 52px 18px 28px;
    }

    .ng-social-closing__statement h2 {
        font-size: clamp(36px, 11vw, 48px);
    }

    .ng-social-closing__links {
        grid-template-columns: 1fr;
        margin-block-start: 36px;
    }

    .ng-social-closing__link + .ng-social-closing__link {
        border-inline-start: 0;
        border-block-start: 1px solid var(--ng-social-line);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ng-company-social *,
    .ng-company-social *::before,
    .ng-company-social *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .ng-company-social.ng-company-has-motion [data-company-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — MULTI-LAYER HERO MEDIA
   Main visual + 2 supporting cards.
   No green typography.
   ========================================================= */

.ng-social-hero-media {
    position: relative;
    width: min(100%, 640px);
    min-height: 470px;
    justify-self: start;
}

.ng-social-hero-media figure {
    margin: 0;
}

.ng-social-hero-media__main {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 28px;
    width: min(100%, 500px);
    height: 350px;
    overflow: hidden;
    background: #e9e5da;
    border: 1px solid rgba(201,169,97,.34);
}

.ng-social-hero-media__main::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.60);
    content: "";
    pointer-events: none;
}

.ng-social-hero-media__main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) contrast(.98);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.ng-social-hero-media__main:hover img {
    transform: scale(1.025);
    filter: saturate(.95) contrast(1);
}

.ng-social-hero-media__main figcaption {
    position: absolute;
    z-index: 2;
    inset-inline: 20px;
    inset-block-end: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.ng-social-hero-media__main figcaption span,
.ng-social-hero-media__card figcaption span,
.ng-social-hero-media__caption {
    color: #d4b76e !important;
    direction: ltr;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.ng-social-hero-media__main figcaption strong,
.ng-social-hero-media__card figcaption strong {
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.ng-social-hero-media__card {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    width: 205px;
    height: 145px;
    background: #dedbd2;
    border: 7px solid #f7f5ef;
    box-shadow: 0 12px 32px rgba(26,26,26,.08);
}

.ng-social-hero-media__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.18) saturate(.8);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.ng-social-hero-media__card:hover img {
    transform: scale(1.04);
    filter: grayscale(0) saturate(1);
}

.ng-social-hero-media__card figcaption {
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 10px;
    display: grid;
    gap: 2px;
}

.ng-social-hero-media__card--people {
    inset-inline-end: 4px;
    inset-block-start: 4px;
}

.ng-social-hero-media__card--place {
    inset-inline-end: 32px;
    inset-block-end: 8px;
}

.ng-social-hero-media__caption {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 8px;
    color: #b5a06d !important;
}

@media (max-width: 1100px) {
    .ng-social-hero-media {
        width: min(100%, 580px);
        min-height: 440px;
    }

    .ng-social-hero-media__main {
        width: min(100%, 455px);
        height: 330px;
    }

    .ng-social-hero-media__card {
        width: 185px;
        height: 132px;
    }
}

@media (max-width: 820px) {
    .ng-social-hero-media {
        justify-self: stretch;
        width: min(100%, 720px);
        min-height: 470px;
        margin-inline: auto;
    }

    .ng-social-hero-media__main {
        width: min(82%, 540px);
        height: 350px;
    }

    .ng-social-hero-media__card {
        width: min(34vw, 205px);
        height: min(24vw, 145px);
    }
}

@media (max-width: 560px) {
    .ng-social-hero-media {
        min-height: 385px;
    }

    .ng-social-hero-media__main {
        inset-block-start: 18px;
        width: 84%;
        height: 285px;
    }

    .ng-social-hero-media__card {
        width: 145px;
        height: 104px;
        border-width: 5px;
    }

    .ng-social-hero-media__card--people {
        inset-inline-end: 0;
        inset-block-start: 0;
    }

    .ng-social-hero-media__card--place {
        inset-inline-end: 18px;
        inset-block-end: 10px;
    }

    .ng-social-hero-media__main figcaption strong,
    .ng-social-hero-media__card figcaption strong {
        font-size: 10px;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — HERO MEDIA SWAP
   Click a small image to swap it with the main image.
   ========================================================= */

.ng-social-hero-media__main,
.ng-social-hero-media__card {
    transition:
        transform .58s cubic-bezier(.22,.72,.18,1),
        opacity .35s ease,
        box-shadow .35s ease;
}

.ng-social-hero-media__main.is-swapping-out {
    opacity: .18;
    transform: scale(.96);
}

.ng-social-hero-media__main.is-swapping-in {
    animation: ng-social-main-in .58s cubic-bezier(.22,.72,.18,1);
}

@keyframes ng-social-main-in {
    0% {
        opacity: .18;
        transform: scale(.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.ng-social-hero-media__card {
    padding: 0;
    appearance: none;
    cursor: pointer;
    text-align: start;
}

.ng-social-hero-media__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(26,26,26,.12);
}

.ng-social-hero-media__card:active {
    transform: translateY(-1px) scale(.985);
}

.ng-social-hero-media__card.is-swapping {
    opacity: .2;
    transform: scale(.92);
}

.ng-social-hero-media__card-copy {
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 10px;
    display: grid;
    gap: 2px;
    pointer-events: none;
}

.ng-social-hero-media__card-copy small {
    color: #d4b76e !important;
    direction: ltr;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.ng-social-hero-media__card-copy strong {
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.ng-social-hero-media__card:focus-visible {
    outline: 2px solid #c9a961;
    outline-offset: 4px;
}

@media (max-width: 560px) {
    .ng-social-hero-media__card-copy strong {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ng-social-hero-media__main,
    .ng-social-hero-media__card {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — HERO / FLYING SWAP
   The clicked thumbnail visually travels to the main frame.
   ========================================================= */

.ng-social-hero-media {
    isolation: isolate;
}

.ng-social-hero-media__main,
.ng-social-hero-media__card {
    will-change: transform, opacity;
}

.ng-social-hero-media__swap-clone {
    position: fixed;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    background: #e9e5da;
    box-shadow: 0 18px 48px rgba(26,26,26,.16);
    pointer-events: none;
    transform-origin: center center;
    transition:
        left .62s cubic-bezier(.22,.72,.18,1),
        top .62s cubic-bezier(.22,.72,.18,1),
        width .62s cubic-bezier(.22,.72,.18,1),
        height .62s cubic-bezier(.22,.72,.18,1),
        border-radius .62s ease,
        box-shadow .62s ease;
}

.ng-social-hero-media__swap-clone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ng-social-hero-media__swap-clone.is-to-main {
    box-shadow: 0 10px 28px rgba(26,26,26,.10);
}

.ng-social-hero-media__main.is-swap-target,
.ng-social-hero-media__card.is-swap-source {
    opacity: .14;
}

.ng-social-hero-media__main.is-swap-return {
    animation: ng-social-main-return .34s ease both;
}

@keyframes ng-social-main-return {
    from { opacity: .2; transform: scale(.985); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ng-social-hero-media__swap-clone {
        transition: none !important;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — HERO / STACK THUMBNAILS VERTICALLY
   Two small cards aligned one under another.
   ========================================================= */

.ng-social-hero-media__card--people,
.ng-social-hero-media__card--place {
    inset-inline-end: 0 !important;
    inset-block-end: auto !important;
}

.ng-social-hero-media__card--people {
    inset-block-start: 18px !important;
}

.ng-social-hero-media__card--place {
    inset-block-start: 181px !important;
}

@media (max-width: 1100px) {
    .ng-social-hero-media__card--people {
        inset-block-start: 16px !important;
    }

    .ng-social-hero-media__card--place {
        inset-block-start: 164px !important;
    }
}

@media (max-width: 820px) {
    .ng-social-hero-media__card--people {
        inset-inline-end: 0 !important;
        inset-block-start: 16px !important;
    }

    .ng-social-hero-media__card--place {
        inset-inline-end: 0 !important;
        inset-block-start: 176px !important;
    }
}

@media (max-width: 560px) {
    .ng-social-hero-media__card--people {
        inset-inline-end: 0 !important;
        inset-block-start: 10px !important;
    }

    .ng-social-hero-media__card--place {
        inset-inline-end: 0 !important;
        inset-block-start: 126px !important;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — HERO / FINAL 3-IMAGE GRID
   Always: 1 large image + 2 small images stacked vertically.
   This override replaces all previous absolute thumbnail positioning.
   ========================================================= */

.ng-social-hero-media {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(100%, 640px) !important;
    min-height: 0 !important;
    height: 430px !important;
    align-items: stretch !important;
    justify-self: start !important;
    isolation: isolate;
}

/* Large image */
.ng-social-hero-media__main {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Both thumbnails share one vertical column */
.ng-social-hero-media__card,
.ng-social-hero-media__card--people,
.ng-social-hero-media__card--place {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.ng-social-hero-media__card--people {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.ng-social-hero-media__card--place {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.ng-social-hero-media__main img,
.ng-social-hero-media__card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* The old free-floating caption should not affect the grid height. */
.ng-social-hero-media__caption {
    position: absolute !important;
    inset-inline-start: 0 !important;
    inset-block-end: -28px !important;
}

/* Keep swap animation above the fixed grid. */
.ng-social-hero-media__swap-clone {
    z-index: 9999 !important;
}

@media (max-width: 1100px) {
    .ng-social-hero-media {
        grid-template-columns: minmax(0, 1fr) 170px !important;
        gap: 14px !important;
        width: min(100%, 580px) !important;
        height: 400px !important;
    }
}

@media (max-width: 820px) {
    .ng-social-hero-media {
        grid-template-columns: minmax(0, 1fr) 180px !important;
        width: min(100%, 720px) !important;
        height: 420px !important;
        justify-self: stretch !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 560px) {
    .ng-social-hero-media {
        grid-template-columns: minmax(0, 1fr) clamp(112px, 31vw, 145px) !important;
        gap: 10px !important;
        width: 100% !important;
        height: 310px !important;
    }

    .ng-social-hero-media__main::after {
        inset: 9px !important;
    }

    .ng-social-hero-media__main figcaption {
        inset-inline: 12px !important;
        inset-block-end: 12px !important;
        display: grid !important;
        gap: 2px !important;
    }

    .ng-social-hero-media__card {
        border-width: 4px !important;
    }

    .ng-social-hero-media__card-copy {
        inset-inline: 8px !important;
        inset-block-end: 7px !important;
    }

    .ng-social-hero-media__card-copy small {
        font-size: 7px !important;
    }

    .ng-social-hero-media__card-copy strong {
        font-size: 9px !important;
    }

    .ng-social-hero-media__caption {
        display: none !important;
    }
}


/* =========================================================
   SOCIAL RESPONSIBILITY — ACTION TIMELINE
   Adapted from the Gallery milestone interaction.
   Scope: .ng-social-action-timeline only
   No green typography.
   ========================================================= */

.ng-social-action-timeline {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
    padding-block: 74px 82px;
}

.ng-social-action-timeline__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 36px;
    margin-block-end: 30px;
}

.ng-social-action-timeline__head h2 {
    margin-block-start: 10px;
    color: #1a1a1a !important;
    font-size: clamp(38px, 3.7vw, 54px);
    font-weight: 350;
    line-height: 1.42;
}

.ng-social-action-timeline__head h2 em {
    color: #c9a961 !important;
}

.ng-social-action-timeline__head > [data-social-action-step] {
    flex: 0 0 auto;
    color: #8b8f8b !important;
    direction: ltr;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
}

/* Range / progress track */
.ng-social-action-timeline input[type="range"][data-social-action-range] {
    --ng-social-action-progress: 0%;
    display: block;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.ng-social-action-timeline input[type="range"][data-social-action-range]::-webkit-slider-runnable-track {
    height: 2px;
    border: 0;
    background:
        linear-gradient(
            to left,
            #c9a961 0,
            #c9a961 var(--ng-social-action-progress),
            rgba(26,26,26,.14) var(--ng-social-action-progress),
            rgba(26,26,26,.14) 100%
        );
}

.ng-social-action-timeline input[type="range"][data-social-action-range]::-moz-range-track {
    height: 2px;
    border: 0;
    background: rgba(26,26,26,.14);
}

.ng-social-action-timeline input[type="range"][data-social-action-range]::-moz-range-progress {
    height: 2px;
    background: #c9a961;
}

.ng-social-action-timeline input[type="range"][data-social-action-range]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border: 1px solid #c9a961;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #f7f5ef;
    box-shadow: 0 0 0 5px rgba(201,169,97,.10);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ng-social-action-timeline input[type="range"][data-social-action-range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 1px solid #c9a961;
    border-radius: 50%;
    background: #f7f5ef;
    box-shadow: 0 0 0 5px rgba(201,169,97,.10);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ng-social-action-timeline input[type="range"][data-social-action-range]:focus-visible::-webkit-slider-thumb {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(201,169,97,.16);
}

.ng-social-action-timeline input[type="range"][data-social-action-range]:focus-visible::-moz-range-thumb {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(201,169,97,.16);
}

/* Step labels */
.ng-social-action-timeline__labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: 6px;
    color: #8d918d !important;
    font-size: 11px;
    line-height: 1.6;
}

.ng-social-action-timeline__labels span {
    color: #8d918d !important;
}

.ng-social-action-timeline__labels span:nth-child(1) {
    text-align: right;
}

.ng-social-action-timeline__labels span:nth-child(2) {
    text-align: center;
}

.ng-social-action-timeline__labels span:nth-child(3) {
    text-align: left;
}

/* Dynamic supporting copy */
.ng-social-action-timeline > [data-social-action-copy] {
    max-width: 660px;
    margin: 24px 0 32px auto;
    color: #747a78 !important;
    font-size: 14px;
    line-height: 2;
    transition: opacity .22s ease, transform .22s ease;
}

.ng-social-action-timeline > [data-social-action-copy].is-changing {
    opacity: 0;
    transform: translateY(5px);
}

/* Milestone gallery */
.ng-social-action-timeline__milestones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ng-social-action-timeline__milestone {
    position: relative;
    overflow: hidden;
    min-height: 285px;
    margin: 0;
    border: 1px solid rgba(26,26,26,.10);
    background: #ede9df;
    cursor: pointer;
    opacity: .56;
    transform: translateY(0);
    transition:
        opacity .35s ease,
        transform .42s cubic-bezier(.2,.7,.2,1),
        border-color .3s ease,
        box-shadow .35s ease;
}

.ng-social-action-timeline__milestone::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(18,18,18,.02) 35%,
        rgba(18,18,18,.62) 100%
    );
    content: "";
    pointer-events: none;
}

.ng-social-action-timeline__milestone img {
    display: block;
    width: 100%;
    height: 285px;
    object-fit: cover;
    filter: grayscale(.78) saturate(.72) contrast(.96);
    transform: scale(1.025);
    transition:
        filter .45s ease,
        transform .72s cubic-bezier(.2,.7,.2,1);
}

.ng-social-action-timeline__milestone > div {
    position: absolute;
    z-index: 2;
    inset-inline: 18px;
    inset-block-end: 16px;
    display: grid;
    gap: 4px;
}

.ng-social-action-timeline__milestone > div span {
    color: #d9be7d !important;
    direction: ltr;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ng-social-action-timeline__milestone > div strong {
    color: #fff !important;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.6;
}

/* Active milestone */
.ng-social-action-timeline__milestone.is-active {
    opacity: 1;
    transform: translateY(-7px);
    border-color: rgba(201,169,97,.72);
    box-shadow: 0 18px 38px rgba(26,26,26,.10);
}

.ng-social-action-timeline__milestone.is-active img {
    filter: grayscale(0) saturate(.95) contrast(1);
    transform: scale(1.06);
}

@media (hover:hover) and (pointer:fine) {
    .ng-social-action-timeline__milestone:not(.is-active):hover {
        opacity: .78;
        transform: translateY(-4px);
    }

    .ng-social-action-timeline__milestone:not(.is-active):hover img {
        filter: grayscale(.35) saturate(.82);
        transform: scale(1.045);
    }
}

/* Responsive */
@media (max-width: 980px) {
    .ng-social-action-timeline {
        width: calc(100% - 40px);
        padding-block: 62px 68px;
    }

    .ng-social-action-timeline__head {
        align-items: start;
        margin-block-end: 26px;
    }

    .ng-social-action-timeline__milestone,
    .ng-social-action-timeline__milestone img {
        min-height: 240px;
        height: 240px;
    }
}

@media (max-width: 680px) {
    .ng-social-action-timeline {
        width: calc(100% - 30px);
        padding-block: 50px 56px;
    }

    .ng-social-action-timeline__head {
        display: block;
    }

    .ng-social-action-timeline__head > [data-social-action-step] {
        display: inline-block;
        margin-block-start: 12px;
    }

    .ng-social-action-timeline__head h2 {
        font-size: clamp(32px, 10vw, 42px);
    }

    .ng-social-action-timeline__labels {
        font-size: 10px;
    }

    .ng-social-action-timeline > [data-social-action-copy] {
        margin-block: 20px 26px;
        font-size: 13px;
    }

    .ng-social-action-timeline__milestones {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ng-social-action-timeline__milestone {
        min-height: 180px;
    }

    .ng-social-action-timeline__milestone img {
        height: 180px;
        min-height: 180px;
    }

    .ng-social-action-timeline__milestone:not(.is-active) {
        opacity: .72;
    }

    .ng-social-action-timeline__milestone.is-active {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ng-social-action-timeline *,
    .ng-social-action-timeline *::before,
    .ng-social-action-timeline *::after {
        transition: none !important;
        animation: none !important;
    }
}