/* ============================================================
   SUSTAINABILITY PAGE — built on top of styles.css
   Reuses: fonts, navbar, contact, footer, root variables
   ============================================================ */

:root {
    --sus-green: #4caf50;
}

.sustainability-page { background: #000; }

.sus-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 7rem 4rem;
    position: relative;
    z-index: 2;
}

/* ============ HERO HEADER ============ */
.sus-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 480px;
    /* overflow: hidden; */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, #000000 75%, transparent, black 0%, #000000 75%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 0%, #000000 75%, transparent, black 0%, #000000 75%, transparent);
}
.sus-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
}
/* .sus-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.45) 80%, #000 100%);
} */

/* ============ GENERIC SECTION (image bg + bottom-anchored text) ============ */
.sus-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    /* overflow: hidden; */
    /* padding: 7rem 0; */
    /* background: #000; */
}
.sus-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 45%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 25%, black 45%, transparent);
}

.sus-section_01 {
    position: relative;
    width: 100%;
    min-height: 180vh;
    display: flex;
    align-items: flex-end;
    /* overflow: hidden; */
    padding: 7rem 0;
    /* background: #000; */
}
.sus-bg_01 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 75%, black 45%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 75%, black 45%, transparent);
}

.sus-section_02 {
    position: relative;
    width: 100%;
    min-height: 200vh;
    display: flex;
    align-items: flex-end;
    /* overflow: hidden; */
    padding: 7rem 0;
    /* background: #000; */
}
.sus-bg_02 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: -10%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 45%, black 45%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 45%, black 45%, transparent);
}

.sus-section_03 {
    position: relative;
    width: 100%;
    min-height: 300vh;
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}
.sus-bg_03 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 120%;
    top: -10%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 45%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 40%, black 45%, transparent);
}

.sus-section_04 {
    position: relative;
    width: 100%;
    min-height: 150vh;
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}
.sus-bg_04 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0%;
    object-fit: cover;
    object-position: top;
    z-index: 0;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 75%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 75%, transparent);
}
.sus-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.2) 100%);
}

/* ----- layered title ----- */
.sus-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.6rem;
}
.sus-title .t-top {
    font-size: clamp(1rem, 2.4vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
}
.sus-title .t-main {
    font-size: clamp(2.6rem, 8.5vw, 7rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: 1px;
    color: var(--light-text);
    text-transform: uppercase;
}
.sus-title .t-sub {
    align-self: flex-end;
    font-size: clamp(1.1rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--light-text);
    text-transform: uppercase;
}

.sus-text {
    font-size: clamp(.92rem, 1.3vw, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,.85);
    max-width: 1050px;
    margin: 0 0 1.1rem;
}
.sus-text:last-child { margin-bottom: 0; }

/* ============ CSR (Education + Community) ============ */
.csr-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 4rem;
    max-width: 1100px;
    margin-top: 1rem;
}
.csr-col h3 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--light-text);
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.csr-col p {
    font-size: clamp(.9rem, 1.3vw, 1.05rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,.85);
    margin: 0;
}

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

/* ----- large tablets / small laptops ----- */
@media (max-width: 1200px) {
    .sus-container { padding: 6rem 3rem; }
}

/* ----- tablets (landscape) ----- */
@media (max-width: 992px) {
    .sus-container { padding: 5rem 2.5rem; }
    .sus-section    { min-height: 90vh; }
    .sus-section_01 { min-height: 140vh; padding: 5rem 0; }
    .sus-section_02 { min-height: 150vh; padding: 5rem 0; }
    .sus-section_03 { min-height: 220vh; padding: 5rem 0; }
    .sus-section_04 { min-height: 120vh; padding: 5rem 0; }
    .csr-cols { gap: 2rem 2.5rem; }
}

/* ----- tablets (portrait) ----- */
@media (max-width: 768px) {
    .sus-container { padding: 3.5rem 1.5rem; }
    .sus-hero { min-height: 380px; }

    .sus-section    { min-height: 75vh; }
    /* image-only section (no text container) — chhota rakho */
    .sus-section:not(:has(.sus-container)) { min-height: 48vh; }
    .sus-section_01 { min-height: 110vh; padding: 3rem 0; }
    .sus-section_02 { min-height: 110vh; padding: 3rem 0; }
    .sus-section_03 {
        min-height: 0;
        padding: 3rem 0;
        justify-content: flex-start;
        gap: 28vh;
    }
    .sus-section_04 { min-height: 100vh; padding: 3rem 0; }

    .sus-title { margin-bottom: 1.2rem; }
    .sus-title .t-top { letter-spacing: 3px; }
    .sus-title .t-sub { letter-spacing: 3px; }

    .csr-cols { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ----- phones ----- */
@media (max-width: 576px) {
    .sus-container { padding: 3rem 1rem; }
    .sus-hero { min-height: 320px; }

    .sus-section    { min-height: 65vh; }
    .sus-section:not(:has(.sus-container)) { min-height: 38vh; }
    .sus-section_01 { min-height: 92vh; }
    .sus-section_02 { min-height: 92vh; }
    .sus-section_03 { gap: 20vh; }
    .sus-section_04 { min-height: 88vh; }

    .sus-title .t-main { font-size: clamp(2rem, 10.5vw, 3rem); letter-spacing: .5px; }
    .sus-title .t-top  { font-size: clamp(.9rem, 3.6vw, 1.2rem); }
    .sus-title .t-sub  { font-size: clamp(1rem, 4.2vw, 1.4rem); }
}

/* ----- small phones ----- */
@media (max-width: 400px) {
    .sus-title .t-main { font-size: 1.85rem; }
    .sus-title .t-top { letter-spacing: 2px; }
    .sus-section_03 { gap: 16vh; }
}

/* ----- short landscape phones ----- */
@media (max-height: 480px) and (orientation: landscape) {
    .sus-hero { height: 100svh; min-height: 0; }
    .sus-container { padding: 3rem 2rem; }
}