html { overflow-x: clip; }            /* kill horizontal scrollbar from full-bleed sliders */
/* The web Noto Sans does not bold the Indian Rupee sign (U+20B9). Wrap each
   rupee glyph in <span class="rs"> so it uses a local font that bolds it,
   inheriting the surrounding weight. */
.rs { font-family: Arial, 'Segoe UI', sans-serif; }
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Noto Sans', sans-serif;
    color: #222;
    overflow-x: clip;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
    font-family: 'Playfair Display', serif;
}
p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none !important;
    font-size: 16px;
}

a:hover {
    text-decoration: none !important;
}

p {
    font-size: 16px;
    line-height: 24px;
}

.my-sidenav {
    display: none;
}

img { display: block; max-width: 100%; }

/* ============================================================
   PRELOADER — centred logo + horizontal progress bar + counter
   ============================================================ */
.preloader {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff;
    transition: opacity .6s ease, visibility .6s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; }
.preloader-logo { width: 130px; height: auto; display: block; }
.preloader-bar {
    position: relative; overflow: hidden;
    width: 220px; height: 2px; margin-top: 30px;
    background: #e6e6e6; border-radius: 2px;
}
.preloader-fill {
    position: absolute; top: 0; left: 0; height: 100%; width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    transition: width .25s ease;
}
.preloader-num {
    margin-top: 16px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: .5px;
    color: #8a8a8a;
}

/* ============================================================
   HEADER
   ============================================================ */
:root {
    --header-bg:     rgba(255, 255, 255, 0.6);
    --header-border: rgba(0, 0, 0, 0.06);
    --header-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
    --text-primary:  #1a1a1a;
    --text-secondary:#555555;
    --divider:       rgba(0, 0, 0, 0.18);
    --hover-bg:      rgba(0, 0, 0, 0.06);
    --brand-purple:  #8e278f;
    --brand-blue:    #006db7;
    /* "opens in a new tab" glyph — used as a mask so it inherits text colour */
    --ext-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

.header-fixed {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform .4s ease;
}
/* hidden when scrolling down, slides back in on scroll up */
.header-fixed.header-hidden {
    transform: translateY(-160%);
}

.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    transition: box-shadow .35s ease;
}
.header-fixed.sticky .site-header {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}
.header-left { display: flex; align-items: center; gap: 18px; }

.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 46px; width: auto; }

.header-divider { width: 1px; height: 46px; background: var(--divider); flex-shrink: 0; }
.header-title { display: flex; flex-direction: column; gap: 3px; }
.company-name {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    line-height: 1.3; white-space: nowrap;
}
.report-subtitle {
    font-size: 12.5px; font-weight: 400; color: var(--text-secondary);
    line-height: 1.3; white-space: nowrap;
}

.header-right { display: flex; align-items: center; gap: 10px; }
.search-btn {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    color: var(--text-primary);
    transition: background .2s;
}
.search-btn:hover { background: var(--hover-bg); }
.search-btn svg { width: 22px; height: 22px; }

.menu-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 20px; cursor: pointer;
    background: linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    border: none; color: #fff;
    font-size: 16px;; font-weight: 500; letter-spacing: .2px;
    transition: opacity .2s, transform .15s;
}
.menu-btn:hover { opacity: .9; transform: scale(1.02); }
.hamburger { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.hamburger span { display: block; width: 16px; height: 1.8px; background: #fff; border-radius: 2px; }

/* ============================================================
   HERO / BANNER
   ============================================================ */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #f0ebe3;
}
.hero-video-wrap { position: absolute; inset: 0; z-index: 1; transition: opacity 1s ease; }
.hero-video-wrap.is-hidden { opacity: 0; }
.hero-video {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* Banner content container */
.hero-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

/* Right-side heading + CTA + icons */
.banner-right-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 620px;
    max-width: 100%;
    pointer-events: auto;
    opacity: 0;                       /* JS sets opacity to 1 when the video completes */
    transition: opacity 0.8s ease;    /* smooth 0 -> 100% fade-in on completion */
}
.banner-right-panel.is-visible {
    opacity: 1;
}
.brp-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28.6px, 3.3vw, 46.2px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-purple);
    margin: 0 0 28px;
}

/* Read More button (outlined blue) */
.cta-read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .3px;
    background: transparent;
    color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    transition: background .25s ease, color .25s ease;
}
.cta-read-more .cta-arrow { display: flex; align-items: center; transition: transform .25s ease; }
.cta-read-more:hover { background: var(--brand-blue); color: #fff; }
.cta-read-more:hover .cta-arrow { transform: translateX(4px); }

/* Sector icons strip — slider */
.brp-icons-bottom {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-top: 40px;
    padding-bottom: 32px;
}
.brp-icons-bottom .swiper-wrapper { align-items: flex-start; }
.brp-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: auto;
    border-right: .5px solid #00000020;
}
.brp-icons-bottom .swiper-slide:last-child
{
border-right: none;
}
/* pagination dots — bottom left */
.brp-pagination.swiper-pagination-bullets {
    left: 0; right: auto; bottom: 0;
    width: auto;
    text-align: left;
}
.brp-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #1a1a1a; opacity: .25;
    transition: opacity .25s ease, background .25s ease;
}
.brp-pagination .swiper-pagination-bullet-active {
    background: var(--brand-purple); opacity: 1;
}
.brp-icon-circle {
    display: flex; align-items: center; justify-content: center;
}
.brp-icon-circle img { width: 66px; height: 66px; object-fit: contain; }
.brp-icon-item span {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

/* ============================================================
   MESSAGE FROM THE CHAIRMAN
   ============================================================ */
.chairman-section {
    position: relative;
    background: url('../images/bg.jpg') center center / cover no-repeat;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: flex-end;
}
.md-section
{
     background: url('../images/bg02.jpg') center center / cover no-repeat;
}
.chairman-row {
    display: flex;
    align-items: flex-end;
    min-height: 88vh;
}
.chairman-img-col {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    align-items: flex-end;
}
.chairman-img-col img {
    width: 100%;
    height: auto;
    display: block;
}
.chairman-content-col {
    flex: 1;
    align-self: center;
    padding: 0 0 0 50px;
    max-width: 620px;
}
.chairman-label {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 18px;
}
.chairman-title {
    font-family: 'Playfair Display', serif;
    font-size:40px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-purple);
    margin-bottom: 22px;
}
.chairman-body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin-bottom:30px;
}
.chairman-name {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--brand-purple);
    letter-spacing: 1px;
    margin-bottom:40px;
}

/* Managing Director — same layout mirrored: image right, content left */
.md-section .chairman-row { flex-direction: row-reverse; }
.md-section .chairman-content-col {
    padding: 0 50px 0 0;
    margin-left: auto;
}

/* ============================================================
   ADANI PORTFOLIO OF COMPANIES — scroll-driven slideshow
   ============================================================ */
.pf-scroll {
    position: relative;
    height: 100vh;
    background: #e9f6fc;
}
.pf-stage {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* Background — base image + sliced "shatter" layer.
   Base and slices use identical sizing so the assembled slices match the
   base pixel-for-pixel (no jump when the transition completes). */
.pf-bgbase {
    position: absolute; inset: 0; z-index: 1;
    background-size: 100% 100%; background-position: 0 0;
}
.pf-bgslices { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.pf-slice {
    position: absolute; left: 0; width: 100%;
    background-repeat: no-repeat;
    visibility: hidden;
    will-change: transform;
}
.pf-scrim {
    position: absolute; inset: 0; z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* UI rail — centered to the same container as the header */
.pf-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pf-ui-inner {
    position: relative; height: 100%;
    padding-left: 0; padding-right: 0;
}

/* Left title — aligned to header content (16px inside the container) */
.pf-titlebar {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 330px; max-width: 40%;
    pointer-events: auto;
}
.pf-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #fff; margin-bottom: 14px;
}
.pf-gradient {
    font-family: 'Playfair Display', serif;
    font-size:40px;
    font-weight: 700; line-height: 1.15;
   color: #ffffff;
}
.pf-title-cta
{
    margin-top: 28px;
    color: #fff;
    border-color: #fff;
}
.pf-title-cta:hover { background: #fff; color: #006db7; }
/* Right-side figures (per slide) */
.pf-figs {
    position: absolute; right: 16px; top: 50%; z-index: 5;
    transform: translateY(-50%);
    pointer-events: auto;
    display: flex; flex-direction: column;
    min-width: 240px;
}
.pf-figs-fy {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; color: #fff;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}
.pf-fig {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.pf-fig-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: rgba(255, 255, 255, 0.85);
}
.pf-fig-val {
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px; font-weight: 800; color: #fff; line-height: 1;
}
.pf-figs-unit {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
}

/* Prev / next arrows */
.pf-nav {
    position: absolute; right: 16px; bottom: 40px; z-index: 6;
    display: flex; gap: 14px;
    pointer-events: auto;
}
.pf-arrow {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pf-arrow:hover { background: #fff; color: #1a1a1a; border-color: #fff; }

/* Fixed beige card */
.pf-cardframe {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: min(430px, 86vw);
    height: 100vh;
    background: #e9f6fc;
}
.pf-card-inner {
    height: 100%;
    padding: 40px 38px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.pf-counter {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px; letter-spacing: 3px; font-weight: 600;
    color: #7a7464; margin-bottom: 0px;
}
.pf-head { margin-bottom: 10px; }
.pf-company {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px; font-weight: 700;
    color: #2b2b2b; margin-bottom: 0px;
}
.pf-largest {
    display: block;;
    font-size: clamp(22px, 2vw, 30px); font-weight: 400;
    color: #2b2b2b; line-height: 1.1;
}
.pf-largest strong { font-weight: 700; font-size:72px; display:block; }

/* Image box — images slide vertically (one over another) */
.pf-imagebox {
    position: relative;
    width: 100%; height: 230px;
    overflow: hidden;
}
.pf-imagebox img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transform: translateY(100%);
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

.pf-foot { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 0px; }
.pf-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px; color: #4a4a4a; line-height: 1.45;
    max-width: 320px;
}
.pf-fade { will-change: opacity; }
.pf-discover {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 50px; cursor: pointer;
    background: transparent;
    border: 1.5px solid #3a3a3a;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 500;
    color: #2b2b2b;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.pf-discover:hover { background: #2b2b2b; color: #fff; transform: translateY(-2px); }
.pf-arrow { font-style: normal; font-size: 16px; }

/* ============================================================
   STABLE, PREDICTABLE GROWTH — tabs
   ============================================================ */
.growth-section { background: #fff; padding: 80px 0px; }
.industry-section { background: #fff; padding: 20px 0 80px; }
.growth-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700; line-height: 1.15;
    color: var(--brand-purple);
    text-align: center;
    margin-bottom: 44px;
}

/* Stacked blocks (headings one below another, separated by a line) */
.growth-blocks { display: flex; flex-direction: column; }
.growth-block { padding: 40px 0; border-bottom: 1px solid #e2e2e2; }
.growth-block:last-child { border-bottom: none; }
.growth-block:first-child { padding-top: 0; }
.growth-block-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px; font-weight: 700; line-height: 1.2;
    margin-bottom: 26px;
}
.soclispan li span{
    display: block;
}
/* Heading accent per block */
.growth-block[data-block="0"] .growth-block-title { color: #1b8fc4; }
.growth-block[data-block="1"] .growth-block-title { color: #43408e; }
.growth-block[data-block="2"] .growth-block-title { color: #43408e; }
.growth-block-intro {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.4;
    margin-bottom: 22px;
}
.growth-block-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #111111;
    margin-bottom: 22px;
}
/* Stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 22px 34px; border-left: 1px solid #e6e6e6; }
.stat:nth-child(3n+1) { border-left: none; padding-left: 0; }
.stat:nth-child(n+4) { border-top: 1px solid #e6e6e6; padding-top: 30px; }
/* Block 2 (5 stats): full-width divider under the first row (incl. 3.32x) */
.growth-block[data-block="1"] .stat:nth-child(-n+3) { border-bottom: 1px solid #e6e6e6; padding-bottom: 30px; }
.growth-block[data-block="1"] .stat:nth-child(n+4) { border-top: none; padding-top: 30px; }
.growth-block[data-block="1"] .stat:nth-child(5) { border-right: 1px solid #e6e6e6; }
.stat-num {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(30px, 3.4vw, 46px); font-weight: 800;
    color: #3a3a3a; line-height: 1.05; margin-bottom: 12px;
}
.stat-num .cur { font-size: 0.55em; font-weight: 600; vertical-align: 0.18em; }
.stat-num .unit { font-size: 0.42em; font-weight: 500; color: #777; }
.stat-num .unit-lead { font-size: 0.55em; font-weight: 700; }
.stat-purple .stat-num { color: var(--brand-purple); }
.stat-purple .stat-num .unit,
.stat-purple .stat-num .cur { color: var(--brand-purple); opacity: .85; }
.stat-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #444; line-height: 1.4;
}
.stat-label::before {
    content: ""; display: inline-block; width: 16px; height: 4px;
    background: var(--brand-purple); vertical-align: middle; margin: -2px 10px 0 0;
}
.stat-note { font-size: 12.5px; color: #9a9a9a; margin-top: 6px; }
.stat-cagr {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #555; margin-top: 14px;
}
.stat-cagr .tri { color: #5fb1a1; font-style: normal; font-size: 12px; margin-right: 4px; }
.stat-cagr b { color: var(--brand-blue); font-weight: 700; }

/* Graph slider (tab 4) — two graphs per slide */
.graph-swiper { width: 100%; }
.graph-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:200px;
    align-items: start;
}
.graph-cell img { width: 100%; height: auto; display: block; }
.graph-swiper-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top:30px;
}
.graph-swiper .swiper-pagination {
    position: static; display: flex; gap: 10px; width: auto;
}
.graph-swiper .swiper-pagination-bullet {
    width: 9px; height: 9px; background: #c9c2d6; opacity: 1;
}
.graph-swiper .swiper-pagination-bullet-active { background: var(--brand-purple); }
.graph-nav { display: flex; gap: 12px; }
.graph-arrow {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; cursor: pointer;
    border: 1.5px solid #c9c2d6; color: #8e278f;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.graph-arrow:hover { background: #8e278f; border-color: #8e278f; color: #fff; }
.graph-arrow.swiper-button-disabled { opacity: .35; cursor: default; }
.graph-arrow.swiper-button-disabled:hover { background: transparent; color: #8e278f; border-color: #c9c2d6; }

/* ============================================================
   AFTERMARKET / INDUSTRY-LEADING — card slider
   ============================================================ */
.aft-section { position: relative; overflow: hidden; }
.aft-bgs { position: absolute; inset: 0; z-index: 0; }
.aft-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity .8s ease;
}
.aft-bg.is-active { opacity: 1; }
.aft-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); }

.aft-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 40px;
    min-height: 100vh;
}

/* Left column — heading only */
.aft-left { flex: 1; max-width: 480px; }
.aft-head {
    font-family: 'Playfair Display', serif;
    font-size:40px; font-weight: 700;
    line-height: 1.15; color: #fff;
}

/* Right column — card slider */
.aft-right {
    flex: 1; position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0 56px;
}
.aft-swiper { width: 100%; max-width: 440px; overflow: hidden; }
.aft-card {
    background: #fff; border-radius: 14px;
    padding: 16px 16px 26px;
}
.aft-card-img { border-radius: 10px; overflow: hidden; }
.aft-card-img img { width: 100%; height: 250px; object-fit: cover; display: block; }
.aft-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 600; color: #1f1f1f;
    margin: 20px 4px 8px;
}
.aft-card-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #666; margin: 0 4px;
}
/* Graph-only card */
.aft-card-graph { padding: 24px 22px; }
.aft-card-graph img { width: 100%; height: auto; display: block; }

/* Pagination bars (hidden) */
.aft-pagination { display: none; }
.aft-pagination .swiper-pagination-bullet {
    width: 28px; height: 4px; border-radius: 2px;
    background: #cfcabf; opacity: 1; transition: background .2s, width .2s;
}
.aft-pagination .swiper-pagination-bullet-active { background: #e8862e; width: 40px; }

/* Arrows flanking the card */
.aft-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.65); cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15); color: #555;
    transition: background .2s ease, color .2s ease;
}
.aft-arrow:hover { background: #fff; color: #1f1f1f; }
.aft-prev { left: 0; }
.aft-next { right: 0; }

/* ============================================================
   PERFORMANCE HIGHLIGHTS  (scroll-driven split + image reveal)
   Base = mobile/static layout. Desktop animation is in the
   @media (min-width:1026px) block (and driven by js/app.js).
   ============================================================ */
.ph-section { position: relative; background: #fff; padding: 70px 0; overflow: hidden; }

/* Heading words */
.ph-headwrap {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; text-align: center;
}
.ph-t1, .ph-t2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700; line-height: 1.1;
    font-size:40px;
    color: var(--brand-purple);
    margin: 0;
}

/* Mobile-only header (above the image) — hidden on tablet/desktop */
.ph-mobile-head { display: none; }

/* Reveal image */
.ph-img { margin: 36px auto 0; max-width: 980px; position: relative; }
.ph-img img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* Dark overlay — fades in (via JS) only after the image is full.
   Sits at section level, above the image (z2) but below the numbers (z6). */
.ph-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; z-index: 5; pointer-events: none; }

/* Frosted data box */
.ph-databox-wrap { margin: 40px auto 0; }
.ph-databox {
    background: transparent;
    padding: 40px 48px;
}
.ph-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: .3px;
    color: #2a2a2a;
    text-align: center; margin-bottom: 8px;
}
.ph-box-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 700; color: var(--brand-purple);
    text-align: center; margin-bottom: 34px;
}
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ph-cell { padding: 18px 30px; border-left: 1px solid #e6e6e6; }
.ph-cell:nth-child(3n+1) { border-left: none; padding-left: 0; }
.ph-cell:nth-child(n+4) { border-top: 1px solid #e6e6e6; padding-top: 26px; }
.ph-num {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(28px, 3vw, 40px); font-weight: 800;
    color: var(--brand-purple); line-height: 1.05; margin-bottom: 10px;
}
.ph-num .cur { font-size: 0.6em; font-weight: 600; vertical-align: 0.12em; margin-right: 2px; }
.ph-num .unit { font-size: 0.4em; font-weight: 500; color: #777; }
.ph-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444; line-height: 1.4; }
.ph-box-cta { text-align: center; margin-top: 34px; }

/* ---- Desktop scroll animation states ---- */
@media (min-width: 1026px) {
    .ph-section { padding: 0; }
    .ph-headwrap { height: 100vh; flex-wrap: nowrap; gap: 0; position: relative; z-index: 4; }
    /* Each word fills half the width and hugs the centre with a small equal
       gap — words sit together at the start, then split symmetrically and the
       reveal image grows from the exact centre with equal space on both sides. */
    .ph-t1 { flex: 1; text-align: right; padding-right: 10px; white-space: nowrap; }
    .ph-t2 { flex: 1; text-align: left;  padding-left: 10px;  white-space: nowrap; }
    .ph-img {
        position: absolute; inset: 0; margin: 0; max-width: none;
        height: 100vh; width: 100%; z-index: 2;
        transform: scale(0); opacity: 0;
    }
    .ph-img img { height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
    .ph-databox-wrap {
        position: absolute; left: 50%; transform: translateX(-50%);
        bottom: 40px; width: 100%; margin: 0; z-index: 6; opacity: 0;
    }
    .ph-databox { padding: 36px 90px; }
    /* white text over the darkened image */
    .ph-eyebrow { color: rgba(255, 255, 255, 0.9); }
    .ph-box-title { color: #fff; }
    .ph-num { color: #fff; }
    .ph-num .cur { color: #fff; }
    .ph-num .unit { color: rgba(255, 255, 255, 0.8); }
    .ph-label { color: rgba(255, 255, 255, 0.9); }
    .ph-cell { border-left-color: rgba(255, 255, 255, 0.28); }
    .ph-cell:nth-child(n+4) { border-top-color: rgba(255, 255, 255, 0.28); }
    .ph-box-cta .cta-read-more { color: #fff; border-color: #fff; }
    .ph-box-cta .cta-read-more:hover { background: #fff; color: var(--brand-blue); }
}

/* ============================================================
   ABOUT AEL  (scroll-driven: text rises, image grows fullscreen)
   Base = mobile/static. Desktop animation in @media + js/app.js.
   ============================================================ */
.about-section {
    position: relative;
    background: rgb(239, 234, 225);
    overflow: hidden;
    min-height: 100vh;
}
.about-section > .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.about-content {
    width: 50%;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 70px 50px 70px 0;
}
.about-label {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; color: #2a2a2a;
    margin-bottom: 16px;
}
.about-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4.2vw, 40px);
    font-weight: 700; line-height: 1.12; color: var(--brand-purple);
    margin: 0 0 20px;
}
.about-body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; line-height: 1.6; color: #444;
    margin: 0 0 28px; max-width: 560px;
}
.about-media { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 1; overflow: hidden; }
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; will-change: transform; }

/* ============================================================
   BUSINESS SEGMENT PERFORMANCE REVIEW  (expanding card slider)
   Active card grows (350 -> 730px); the inner image stays a fixed
   730px so narrow cards show a cropped centre that "opens up".
   Driven by Swiper (virtualTranslate) + manual step — see custom.js.
   ============================================================ */
.bsp-section {
    position: relative;
    background: #fff;                     /* white */
    padding: 80px 0;
    overflow: hidden;
    --bsp-card:    350px;                 /* normal card width  */
    --bsp-active:  730px;                 /* active card width   */
    --bsp-h:       490px;                 /* card height         */
    --bsp-radius:  15px;
}
.bsp-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 700; line-height: 1.15;
    color: var(--brand-purple);
    text-align: center;
    margin-bottom: 44px;
}
/* 3-card Operational Performance grid */
.bsp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bsp-card { display: flex; flex-direction: column; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 12px 34px rgba(30, 20, 50, .10); }
.bsp-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.bsp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bsp-card:hover .bsp-card-media img { transform: scale(1.06); }
.bsp-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 28px; }
.bsp-card-body h5 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--brand-purple); margin: 0 0 12px; }
.bsp-card-body p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 20px; }
.bsp-card-body .cta-read-more { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .bsp-grid { grid-template-columns: 1fr; gap: 24px; } }
/* Left edge aligned to the header container (logo). Track bleeds off right.
   .bsp-nav shares the same padding so the arrows line up under the card. */
.bsp-colwrap, .bsp-nav { padding-left: 16px; }
@media (min-width: 992px)  { .bsp-colwrap, .bsp-nav { padding-left: calc((100% - 960px)  / 2 + 16px); } }
@media (min-width: 1200px) { .bsp-colwrap, .bsp-nav { padding-left: calc((100% - 1140px) / 2 + 16px); } }
@media (min-width: 1400px) { .bsp-colwrap, .bsp-nav { padding-left: calc((100% - 1320px) / 2 + 16px); } }

/* margin:0 overrides Swiper's default margin:auto (which centred the card) */
.bsp-swiper { position: relative; margin-left: 0; margin-right: 0; max-width: var(--bsp-active); overflow: visible; cursor: grab; }
.bsp-swiper.is-grabbing { cursor: grabbing; }
.bsp-swiper .swiper-slide {
    max-width: var(--bsp-card);
    overflow: hidden;
    transition: max-width 1s ease;       /* matches Swiper speed (1000ms) */
}
.bsp-swiper .swiper-slide.swiper-slide-active { max-width: var(--bsp-active); }

/* Image frame */
.bsp-slide-div {
    position: relative;
    height: var(--bsp-h);
    border-radius: var(--bsp-radius);
    overflow: hidden;
}
.bsp-pic {
    position: absolute; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: var(--bsp-active); height: 100%;
    overflow: hidden;
    border-radius: var(--bsp-radius);
    transition: all .5s ease;
}
.bsp-pic img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    border-radius: var(--bsp-radius);
    transition: transform .8s ease-in-out;
}
.bsp-slide-div:hover .bsp-pic img { transform: scale(1.12); }
/* bottom scrim so the caption stays legible */
.bsp-slide-div::after {
    content: ""; position: absolute; inset: 0;
    border-radius: var(--bsp-radius);
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 42%);
    pointer-events: none;
}

/* Caption overlay (bottom-left, italic serif w/ underline) */
.bsp-caption {
    position: absolute; left: 40px; bottom: 46px; width: 80%; z-index: 2;
    pointer-events: none;
}
.bsp-caption h5 {
    color: #fff;
 font-weight: 500;
    font-size: 20px; line-height: 28px;
    margin: 0;
}
.bsp-cap-desc {
    color: rgba(255, 255, 255, .9);
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.5;
    margin: 8px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Footer row: arrows pinned left (aligned with the card), Read More centred */
.bsp-footer { position: relative; margin-top: 36px; min-height: 46px; }
.bsp-nav { display: flex; gap: 12px; align-items: center; }
.bsp-more {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;                /* let arrow clicks through the centred overlay */
}
.bsp-more .cta-read-more { pointer-events: auto; }
.bsp-arrow {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; cursor: pointer;
    border: 1.5px solid #c9c2d6; color: var(--brand-purple);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bsp-arrow:hover { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.bsp-arrow.swiper-button-disabled { opacity: .35; cursor: default; }
.bsp-arrow.swiper-button-disabled:hover { background: transparent; color: var(--brand-purple); border-color: #c9c2d6; }

/* Side arrows — prev on the left, next on the right, vertically centred on the cards */
.bsp-colwrap { position: relative; }
.bsp-nav { position: static; padding: 0; }
.bsp-prev, .bsp-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
}
/* left arrow sits ON the first card (container offset + 16px inset) */
.bsp-prev { left: 32px; }
@media (min-width: 992px)  { .bsp-prev { left: calc((100% - 960px)  / 2 + 32px); } }
@media (min-width: 1200px) { .bsp-prev { left: calc((100% - 1140px) / 2 + 32px); } }
@media (min-width: 1400px) { .bsp-prev { left: calc((100% - 1320px) / 2 + 32px); } }
.bsp-next { right: 16px; }
.bsp-prev:hover, .bsp-next:hover { background: var(--brand-purple); }

/* ============================================================
   BUSINESS MODEL — EMPOWERED TO DELIVER VALUE  (capital tabs)
   Each panel sets --cap (its accent). The shared bottom block's
   --cap is updated by JS to follow the active tab.
   ============================================================ */
/* --cap-bg = active capital colour (set by JS on the section) */
.bm-section { background: #f4f6f8; padding: 80px 0; --cap-bg: #8e278f; }
.bm-eyebrow {
    display: block; text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #1a1a1a; margin-bottom: 12px;
}
.bm-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 700; color: var(--brand-purple);
    text-align: center; margin-bottom: 36px;
}

/* Tabs — a coloured indicator slides behind the active tab and, via the two
   curved SVGs, merges smoothly into the coloured body (notched-tab effect). */
.bm-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 0; position: relative; z-index: 2; }
.bm-select { display: none; }   /* shown only on mobile (replaces the tab row) */
.bm-tab {
    position: relative; z-index: 1;
    background: none; border: none; cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 600; color: #2b2b2b;
    padding: 16px 4px; white-space: nowrap;
    transition: color .25s ease;
    letter-spacing: -0.8px;
}
.bm-tab[data-tab="0"] { padding-left: 14px; }
.bm-tab[data-tab="5"] { padding-right: 14px; }
.bm-tab:not(.is-active):hover { color: #000; }
.bm-tab.is-active { color: #fff; }

.bm-indicator {
    position: absolute; top: 0; left: 0; height: 100%; z-index: 0;
    background: var(--cap-bg);
    transition: transform .55s cubic-bezier(.77, 0, .18, 1),
                width .55s cubic-bezier(.77, 0, .18, 1),
                background .3s ease;
}
.bm-indicator svg { position: absolute; bottom: 0; height: 100%; width: auto; }
.bm-indicator svg path { fill: var(--cap-bg); transition: fill .3s ease; }
.bm-ind-l { right: 98%; }
.bm-ind-r { left: 98%; }
.bm-indicator.is-first { border-top-left-radius: 14px; }
.bm-indicator.is-first .bm-ind-l { display: none; }
.bm-indicator.is-last { border-top-right-radius: 14px; }
.bm-indicator.is-last .bm-ind-r { display: none; }

/* Coloured body block (background follows the active capital) */
.bm-section .bm-body {
    background: var(--cap-bg);
    border-radius: 20px;
    padding: 30px 40px 30px;
    color: #fff;
    position: relative; z-index: 1;
    transition: background .3s ease;
}
/* square the corner that connects to the first / last tab */
.bm-section.cap-first .bm-body { border-top-left-radius: 0; }
.bm-section.cap-last  .bm-body { border-top-right-radius: 0; }

.bm-panel { display: none; }
.bm-panel.is-active { display: block; }

.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.bm-head-left { display: flex; align-items: center; gap: 16px; }
.bm-icon { width: 52px; height: 52px; object-fit: contain; filter: brightness(0) invert(1); }
.bm-cap-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: .5px;
}
.bm-sdg { height: 54px; width: auto; object-fit: contain; flex-shrink: 0; display:none; }

/* Input / Outcomes boxes (translucent on the coloured block) */
.bm-section .bm-io {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(255,255,255,.4); border-radius: 10px; overflow: hidden;
    margin-bottom: 34px;
}
/* Outcomes column — stats stacked one below another */
.bm-out { display: inline-block; vertical-align: top; margin: 0 24px 0 0; }
.bm-out:last-child { margin-right: 0; }
.bm-out-num { font-family: 'Noto Sans', sans-serif; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.bm-out-lbl { font-size: 16px; color: rgba(255,255,255,.88); margin-top: 3px; }
.bm-section .bm-io-col { padding: 22px 22px; border-top: none; }
.bm-io-col + .bm-io-col { border-left: 1px solid rgba(255,255,255,.4); }
.bm-io-label {
    display: block; font-family: 'Noto Sans', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.75); margin-bottom: 16px;
}
.bm-io-col ul { list-style: none; margin: 0; padding: 0; }
.bm-io-col li {
    position: relative; padding-left: 18px; margin-bottom: 10px;
    font-size: 16px; line-height: 1.5; color: #fff;
}
.bm-io-col li:last-child { margin-bottom: 0; }
.bm-io-col li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
/* Scrollable list inside a capital column */
.scroll-text-new { overflow-y:auto; overflow-x:hidden; padding-right:10px !important; max-height:105px; }
.scroll-text-new::-webkit-scrollbar { width:3px; }
.scroll-text-new::-webkit-scrollbar-track { border-radius:0; background-color:rgba(255,255,255,.2); }
.scroll-text-new::-webkit-scrollbar-thumb { border-radius:0; background-color:rgba(255,255,255,.85); }
.bm-out-m
{
    margin-top: 20px;
}
/* Shared bottom block — outcomes (left) + business model (right) */
.bm-block-label { margin-bottom: 16px; color: rgba(255,255,255,.78); }
.bm-bottom-grid {
    display: grid; grid-template-columns: minmax(300px, 360px) 1fr;
    gap: 25px; align-items: start; margin-bottom: 30px;
}
/* When the active capital has no SDG, the business model takes the full row */
#businessModel.bm-no-sdg .bm-bottom-grid { grid-template-columns: 1fr; }
/* SDG Alignment block (replaces outcomes in the shared bottom) */

.bm-sdg-box img { max-width: 100%; height: auto; display: block; }

/* Both outcome numbers in ONE box, split by a divider */
.bm-stats {
    display: flex;
    background: rgba(255,255,255,.14);
    border-left: 4px solid #fff;
    border-radius: 10px;
    overflow: hidden;
}
.bm-stat { flex: 1; padding: 22px 20px; }
.bm-stat + .bm-stat { border-left: 1px solid rgba(255,255,255,.28); }
.bm-stat-num { font-family: 'Noto Sans', sans-serif; font-size: 28px; font-weight: 800; color: #fff; line-height: 1.1; }
.bm-stat-label { font-size: 16px; color: rgba(255,255,255,.88); margin-top: 4px; }

/* Business & operating model icons (white), to the right of outcomes */
.bm-model { display: flex; flex-wrap: wrap; gap: 22px 5px; align-items: flex-start; }
.bm-model-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 100px; text-align: center; text-decoration: none; transition: transform .2s;
}
.bm-model-item:hover { transform: translateY(-3px); }
.bm-model-item img { width: 46px; height: 46px; object-fit: contain; filter: brightness(0) invert(1); }
.bm-model-item span { font-size: 13px; color: #fff; line-height: 1.3; }

/* Output column — stacked big stats (common to every capital) */
.bm-out-stats { display: flex; flex-direction: column; gap: 16px; }
.bm-out-stat b { display: block; width: fit-content; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.bm-out-stat b span { font-size: 15px; font-weight: 700; }
.bm-out-stat em { display: block; position: relative; padding-left: 18px; font-style: normal; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.9); margin-top: 6px; }
.bm-out-stat em::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 3px; background: rgba(255,255,255,.85); }

/* Strategic Priorities — shared bottom, full width */
.bm-strat { margin-bottom: 26px; }
.bm-strat-h { display: block; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.bm-strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 30px; }
.bm-strat-item { display: flex; align-items: center; gap: 14px; }
.bm-strat-code { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 10px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 15px; color: #fff; border: 1.5px solid rgba(255,255,255,.55); border-radius: 3px; }
.bm-strat-lbl { font-size: 15px; line-height: 1.35; color: #fff; }

/* Read More on the coloured block → white outline */
.bm-cta { text-align: left; }
.bm-body .cta-read-more { color: #fff; border-color: #fff; background: transparent; }
.bm-body .cta-read-more:hover { background: #fff; color: var(--cap-bg); }

/* ============================================================
   OUR STRATEGY — animated image-stack slider (Yes Bank style)
   ============================================================ */
.yb-slider {
    --font-body: 'Noto Sans', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --yb-white: #fff;
    --yb-gold: #c79a4b;
    position: relative; width: 100%; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; z-index: 2;
    background-color: #1a3a6b;
    transition: background-color 1.2s ease;
}
/* Wrap = Bootstrap container (aligns content with the header), 16px gutter */
.yb-slider__wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; padding-top: 90px; padding-bottom: 36px; padding-left: 16px; padding-right: 16px; }
.yb-slider__body { flex: 1; display: flex; flex-direction: column; padding: 0; min-height: 0; position: relative; }

/* LEFT */
.yb-slider__left { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; z-index: 4; justify-content: center; }
.yb-slider__label { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.yb-slider__title { font-family: var(--font-heading); font-size: clamp(30px, 4vw, 40px); font-weight: 800; color: var(--yb-white); line-height: 1.15; overflow: hidden; position: relative; margin-bottom: 24px; }
.yb-slider__title span { display: inline-block; will-change: transform; }
.yb-slider__footer { flex-shrink: 0; }
.yb-slider__desc { font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 440px; margin-bottom: 24px; }
/* Read More button (matches other sections), white variant for the dark bg */
.yb-slider .cta-read-more { color: #fff; border-color: #fff; background: transparent; }
.yb-slider .cta-read-more:hover { background: #fff; color: #1a3a6b; }

/* RIGHT (image stack) */
.yb-slider__right { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.yb-slider__images { width: 100%; height: 100%; position: relative; }
.yb-slider__slide { position: absolute; top: 50%; right: 0; left: auto; width: 55%; aspect-ratio: 1.4; overflow: hidden; border-radius: 12px; will-change: transform, filter, opacity; }
.yb-slider__slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); }

/* NAV */
.yb-slider__nav { align-self: flex-end; margin-top: 20px; display: flex; align-items: center; gap: 16px; z-index: 5; }
.yb-slider__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; color: var(--yb-white); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.yb-slider__arrow:hover { background: var(--yb-gold); border-color: var(--yb-gold); }
.yb-slider__counter-display { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .1em; }

/* Desktop: title left, images right */
@media (min-width: 1024px) {
    .yb-slider__body { flex-direction: row; padding: 0; }
    .yb-slider__left { width: 50%; flex-shrink: 0; }
    .yb-slider__right { position: static; flex: 1; display: flex; align-items: center; justify-content: flex-end; min-height: 0; pointer-events: auto; }
    .yb-slider__images { display: flex; align-items: center; justify-content: flex-end; }
    .yb-slider__slide { width: 80%; right: 0; left: auto; }
}
@media (max-width: 767.98px) {
    .yb-slider__wrap { padding-top: 40px; }
    .yb-slider__title { font-size: clamp(24px, 9vw, 40px); }
    .yb-slider__slide { width: 90%; left: 0; margin: auto; }
    .yb-slider__desc { display: none; }
    .yb-slider__title
    {
        margin-bottom: 15px;
    }
}
/* ============================================================
   ESG — full-screen background image with left heading
   ============================================================ */
.esg-section {
    position: relative;
    min-height: 100vh;
    background: url('../images/esg-img.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
}
.esg-section .container { width: 100%; }
.esg-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0;
}
@media (max-width: 767.98px) {
    .esg-section { min-height: 80vh; }
    .esg-title { font-size: clamp(28px, 8vw, 42px); }
}

/* ============================================================
   ESG FOCUS AREAS — vertical parallax slider (Swiper 11)
   ============================================================ */
.esg-slider-section { background: #fff; padding: 70px 0; }
.upk-salf-slider-wrapper {
    display: flex; flex-direction: row; position: relative;
    background: #fff; box-shadow: 0 5px 24px rgba(0,0,0,.08);
    border-radius: 10px; overflow: hidden;
    height: 400px; padding: 30px 0 30px 30px;
}
.upk-salf-slider-wrapper .swiper { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; }
.upk-salf-item { position: relative; display: flex; flex-direction: row-reverse; }
.upk-salf-item.swiper-slide-active .upk-salf-title,
.upk-salf-item.swiper-slide-active .upk-salf-desc,
.upk-salf-item.swiper-slide-active .upk-salf-button { opacity: 1; }
.upk-salf-image-wrap { height: 100%; width: 100%; }
.upk-xanc-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.upk-salf-content-wrap {
    position: absolute; left: 0; bottom: 0; top: unset; max-width: 460px;
    overflow: hidden; background: rgba(255,255,255,.55);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    transition: backdrop-filter .9s; padding: 20px; border-radius: 8px;
}
.upk-salf-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.2;
    color: var(--brand-purple); margin-bottom: 18px; opacity: 1;
}
.upk-salf-desc {
    font-family: 'Noto Sans', sans-serif;
    color: #656565; font-size: 16px; line-height: 1.6; margin-bottom: 20px; opacity: 1;
}
.upk-salf-button { opacity: 1; }
.upk-salf-button .link {
    font-family: 'Noto Sans', sans-serif;
    color: #2b2d42; cursor: pointer; font-weight: 500; text-decoration: none;
    font-size: 16px; transition: color .3s ease;
}
.upk-salf-button .link:hover { color: var(--brand-purple); }
.link--arrowed { display: inline-flex; align-items: center; gap: 8px; }
.link--arrowed .arrow-icon { transition: transform .3s ease; }
.link--arrowed .arrow-icon--circle { transition: stroke-dashoffset .3s ease; stroke-dasharray: 95; stroke-dashoffset: 95; }
.link--arrowed g { stroke: currentColor; color: #2b2d42; }
.link--arrowed:hover .arrow-icon { transform: translate3d(5px, 0, 0); }
.link--arrowed:hover .arrow-icon--circle { stroke-dashoffset: 0; }
.link--arrowed:hover g { color: var(--brand-purple); }

/* Right-side rail: circular up/down arrows (same style as other sections) */
.upk-salf-nav-pag-wrap { position: absolute; top: 0; right: 0; height: 100%; width: 76px; display: flex; align-items: center; justify-content: center; }
.upk-salf-navigation { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.esg-counter {
    display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1;
    font-family: 'Noto Sans', sans-serif; color: #2b2d42;
}
.esg-counter .esg-cur { font-size: 16px; font-weight: 700; }
.esg-counter .esg-sep {
    font-size: 0;                                  /* hide the dash glyph */
    width: 18px; height: 1px; margin: 3px 0;
    background: rgba(43, 45, 66, .4);
}
.esg-counter .esg-total { font-size: 13px; color: rgba(43, 45, 66, .6); }
.upk-button-prev, .upk-button-next { cursor: pointer; }

@media (min-width: 768px) {
    .upk-salf-slider-wrapper { height: 550px; padding: 60px 0 60px 60px; }
    .upk-salf-title { font-size: 36px; }
    .upk-salf-content-wrap { max-width: 400px; padding: 40px; padding-left: 0; top: 50%; transform: translateY(-50%); bottom: unset; background: rgba(255,255,255,.55); }
    .upk-salf-image-wrap { width: 86%; }
}
@media (min-width: 1024px) {
    .upk-salf-slider-wrapper { height: 600px; padding: 70px; }
    .upk-salf-title { font-size: 40px; }
    .upk-salf-content-wrap { max-width: 460px; padding: 50px; padding-left: 0; }
    .upk-salf-desc { font-size: 16px; }
    .upk-salf-button .link { font-size: 16px; }
    .upk-salf-image-wrap { width: 84%; }
}
/* ============================================================
   DOWNLOAD CENTRE
   ============================================================ */
.dc-section {
    background: linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    padding: 70px 0 64px;
}
.dc-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 700; color: #fff;
     margin-bottom: 44px;
}
.dc-grid {
    display: grid;
    grid-template-columns: 1fr 240px 1fr;
    border: 1px solid rgba(255, 255, 255, .35);
}
.dc-col-left, .dc-center { border-right: 1px solid rgba(255, 255, 255, .35); }

.dc-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 30px 30px; min-height: 100px;
    color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    transition: background .25s ease;
}
.dc-col-left .dc-item:last-child, .dc-col-right .dc-item:last-child { border-bottom: none; }
.dc-item span { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 600; }
.dc-item svg { width: 24px; height: 24px; flex-shrink: 0; opacity: .9; transition: transform .25s ease; }
.dc-item:hover { background: rgba(255, 255, 255, .08); }
.dc-item:hover svg { transform: translateY(3px); }

.dc-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 30px 18px;
}
.dc-center img { width: 168px; height: auto; display: block; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.dc-caption { color: #fff; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.45; margin-top: 18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
                      linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    padding: 26px 0;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-copy, .footer-credit,.footer-credit a { color: rgba(255, 255, 255, .9); font-family: 'Noto Sans', sans-serif; font-size: 16px; margin: 0; }
.footer-credit a{
    font-weight: 600;
}
.footer-social { display: flex; align-items: center; gap: 16px; }
.footer-social-label { color: #fff; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; margin-right: 6px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px;
    transition: background .25s ease;
}
.footer-social a:hover { background: rgba(255, 255, 255, .28); }
/* ============================================================
   INFRASTRUCTURE PLATFORM CONTRIBUTION — auto tab slider
   ============================================================ */
.ipc-section {
    background: linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    padding: 70px 0 52px;
}
.ipc-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.4vw, 40px); font-weight: 700;
    color: #fff; text-align: center; line-height: 1.2; margin-bottom: 36px;
}
.ipc-card {
    max-width: 820px; margin: 0 auto;
    background: #fff; border-radius: 16px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
    padding: 26px 34px 24px;
}
.ipc-card-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #e3e3e3; }
.ipc-fy { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #222; }
.ipc-unit { font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #9a9a9a; }
.ipc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #ececec; }
.ipc-row-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }
.ipc-row-val { font-family: 'Noto Sans', sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--brand-purple); letter-spacing: .5px; }
.ipc-note { font-family: 'Noto Sans', sans-serif; font-size: 11.5px; line-height: 1.55; color: rgba(142, 39, 143, .7); margin-top: 16px; }

/* Tabs with progress bars */
.ipc-tabs { display: flex; gap: 8px; margin-top: 34px; }
.ipc-tab {
    flex: 1; min-width: 0; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 6px 4px 0;
    font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase;
    color: rgba(255, 255, 255, .7); transition: color .25s ease;
}
.ipc-tab:hover { color: #fff; }
.ipc-tab.is-active { color: #fff; }
.ipc-tab-label { white-space: nowrap; }
.ipc-tab-bar { width: 100%; height: 3px; background: rgba(255, 255, 255, .3); border-radius: 2px; overflow: hidden; }
.ipc-tab-fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
/*-----------Header Css End-------------*/

/* ============================================================
   ACCELERATING INFRASTRUCTURE POPUP
   ============================================================ */
.ai-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ai-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
/* Full-screen panel with the PDF's soft blue gradient */
.ai-popup-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: linear-gradient(135deg, #ffffff 0%, #eaf6fc 45%, #d6eefa 100%);
    border-radius: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.ai-popup-overlay.is-open .ai-popup-panel {
    transform: translateY(0);
}

/* Close button */
.ai-close {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: background 0.2s, color 0.2s;
}
.ai-close:hover { background: var(--brand-purple); color: #fff; border-color: var(--brand-purple); }

/* Scroll container */
.ai-popup-inner {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    max-height: 100vh;
    padding: 36px 60px 40px;
    -webkit-overflow-scrolling: touch;
}

/* Two-column grid: media+person box (left) | all text (right) */
.ai-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Title column — dark charcoal title with purple underline (as per PDF) */
.ai-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    color: #2b2b2b;
    margin-bottom: 22px;
    padding-bottom: 22px;
    position: relative;
}
.ai-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 2px;
    background: var(--brand-purple);
}
/* Subhead — same grey body style, NOT highlighted (as per PDF) */
.ai-subhead {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    line-height: 1.7;
    margin-bottom: 16px;
}
.ai-body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}
.ai-body:last-child { margin-bottom: 0; }

/* Left media column */
.ai-col-media { position: relative; }
.ai-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    /* height: 330px; */
}
.ai-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(30%);
}
.ai-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(142,39,143,0.18) 0%, rgba(0,109,183,0.12) 100%);
    pointer-events: none;
}
.ai-grid-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Person card — clean white box with purple border (as per PDF) */
.ai-person-card {
    margin-top: 22px;
    border: 1.5px solid var(--brand-purple);
    border-radius: 10px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.55);
}
.ai-person-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(142,39,143,0.2);
    margin-bottom: 14px;
}
.ai-person-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2b2b2b;
}
.ai-person-role {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}
.ai-person-bio {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #333;
    margin: 0;
}

/* ============================================================
   PORTFOLIO PAGE — A LEGACY OF VISION, LEADERSHIP & NATIONHOOD
   ============================================================ */
.pl-section {
    background: #fff;
    padding: 130px 0 80px;
}
.pl-label {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 14px;
}
.pl-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.12;
    color: #43408e;
    margin-bottom: 44px;
}

/* Intro lead paragraph (no background, aligned to the heading) */
.pl-intro-box {
    padding: 0;
    margin-bottom: 50px;
}
.pl-intro-box p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--brand-blue);
    margin: 0;
}

/* Guided-by paragraphs (left) + bird image (right) */
.pl-guided-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}
.pl-guided-text p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 18px;
}
.pl-guided-text p:last-child { margin-bottom: 0; }
.pl-guided-media {
    border-radius: 14px;
    overflow: hidden;
}
.pl-guided-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pedigree, Vision + Values, Culture — stacked one below the other */
.pl-pvc-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 60px;
}
/* Vision+Values and Culture side by side */
.pl-pvc-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 44px;
    align-items: start;
}
.pl-col-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}
.pl-col-title + .pl-list,
.pl-col-body + .pl-col-title { margin-top: 26px; }
.pl-title-purple { color: var(--brand-purple); }
.pl-title-blue { color: #00aeef; }
.pl-col-body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin: 0;
}
.pl-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pl-list li {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 14px;
}
.pl-list li:last-child { margin-bottom: 0; }
.pl-list li strong { color: #1a1a1a; font-weight: 700; }

/* ---- A portfolio invested in India's tomorrow (text left, image right) ---- */
.pf-tomorrow { background: #eef6fb; overflow: hidden; }
.pf-tomorrow-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;   /* image gets the larger share */
    align-items: stretch;
    gap: 50px;
    min-height: 88vh;
}
.pf-tomorrow-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 70px 0;
}
.pf-tomorrow-title {
    font-family: 'Noto Sans', serif;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 700; line-height: 1.12; color:#43408e;
    margin-bottom: 34px;
}
.pf-tomorrow-pillars {
    display: flex; flex-direction: column;
    gap: 22px;
}
.pf-pillar span {
    display: inline-block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 19px; font-weight: 600; color: #1a1a1a; line-height: 1.4;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-blue);
}
.pf-tomorrow-media {
    position: relative;   /* aligns to the container (menu) right edge */
}
.pf-tomorrow-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* ---- Built Around Core Infrastructure chart ---- */
.pf-chart-section { background: #fff; padding: 80px 0; }
.pf-sec-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 28px;
    font-weight: 700; color: var(--brand-purple);
    margin-bottom: 16px;
}
.pf-sec-intro {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.7; color: #444;
     margin-bottom: 20px;
}
.pf-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.pf-chart { min-width: 980px; }
/* Company-structure chart as a single SVG */
.pf-chart-img { margin: 8px 0 24px; }
.pf-chart-img img { width: 100%; max-width: 1040px; height: auto; display: block; }

/* adani logo centred over a thin rule */
.pf-chart-logo {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.pf-chart-logo::before {
    content: ""; position: absolute; left: 16%; right: 16%; top: 50%;
    height: 1px; background: #d6d6d6;
}
.pf-chart-logo img { height: 38px; position: relative; background: #fff; padding: 0 24px; }

/* Group banners aligned to the 5-column grid */
.pf-chart-banners {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.pf-banner {
    position: relative;
    background: var(--brand-purple);
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700;
    text-align: center;
    padding: 12px 10px;
    border-radius: 3px;
}
.pf-banner-flagship { grid-column: 1; }
.pf-banner-core     { grid-column: 2 / 4; }
.pf-banner-primary  { grid-column: 4; }
.pf-banner-other    { grid-column: 5; }
/* blue right-pointing arrow sitting in the gap after the banner */
.pf-banner-arrow {
    position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 12px solid var(--brand-blue);
}

/* Column heads + top tier (5-column grid) */
.pf-chart-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
}
.pf-chart-heads { margin-bottom: 16px; }
/* stretch top columns to equal height so the AEL connector can run full length */
.pf-chart-top { align-items: stretch; }
.pf-chart-top .pf-chart-col:first-child { position: relative; }
.pf-chart-top .pf-chart-col:first-child::after {
    content: ""; position: absolute;
    left: 50%; top: 82px; bottom: -16px;
    border-left: 2px solid var(--brand-blue);
}
.pf-col-head {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--brand-blue);
    text-align: center; line-height: 1.25;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-blue);
}
.pf-node {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    border-radius: 6px;
    padding: 12px 10px;
    margin-bottom: 14px;
}
.pf-node:last-child { margin-bottom: 0; }
.pf-listed   { background: #dceefb; border: 1.5px solid #2aa6e0; }
.pf-unlisted { background: #ececec; border: 1.5px solid transparent; }
.pf-direct   { background: #fff;    border: 1.5px solid #2aa6e0; }
.pf-node-name { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.pf-node-sub  { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #555; margin-top: 2px; }
.pf-node-pct  { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; margin-top: 8px; }
.pf-pct-family { color: var(--brand-purple); }
.pf-pct-ael    { color: #0093d0; }
.pf-pct-ambuja { color: #3a9d3a; }

/* Materials sub-group (ACC + Orient under Ambuja) */
.pf-down-arrow {
    display: block; margin: 0 auto 12px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid var(--brand-blue);
}
.pf-subgroup {
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    padding: 14px 14px 0;
}

/* Bottom band — bordered box fed by the AEL connector */
.pf-chart-lower {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.pf-lower-connector { position: relative; }
.pf-lower-connector::before {
    content: ""; position: absolute;
    left: 50%; top: 0; bottom: 50%; width: 50%;
    border-left: 2px solid var(--brand-blue);
    border-bottom: 2px solid var(--brand-blue);
}
.pf-lower-connector::after {
    content: ""; position: absolute;
    right: -2px; bottom: calc(50% - 7px);
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--brand-blue);
}
.pf-band {
    grid-column: 2 / 6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    padding: 18px 6px;
}
.pf-band-col { padding: 0 12px; }
.pf-band-col + .pf-band-col { border-left: 1px dashed #c2c2c2; }

/* Legend */
.pf-legend {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
    margin: 34px 0 24px;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444;
}
.pf-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.pf-swatch { width: 26px; height: 16px; border-radius: 3px; display: inline-block; }
.pf-sw-listed { background: #dceefb; }
.pf-sw-unlisted { background: #ececec; }
.pf-sw-direct { background: #fff; border: 1.5px solid #2aa6e0; }

/* Footnotes + abbreviations */
.pf-notes {
    margin: 0 0 18px; padding-left: 20px;
    font-family: 'Noto Sans', sans-serif; font-size: 12.5px; line-height: 1.6; color: #333;
}
.pf-notes li { margin-bottom: 6px; }
.pf-abbr {
    font-family: 'Noto Sans', sans-serif; font-size: 12.5px; line-height: 1.7; color: #333;
}

/* ---- Empowering India's Critical Sectors ---- */
.pf-critical { background: #eef7f3; padding: 80px 0; }
.pf-critical-title {
    font-family: 'Noto Sans', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700; color: #43408e; line-height: 1.1;
    white-space: nowrap;
    margin-bottom: 34px;
}
.pf-critical-intro {
    max-width: 620px;
    margin-bottom: 50px;
}
/* Page-10 block: stacked text cards + flamingo image */
.pf-uns-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 54px;
}
.pf-uns-textcol { display: flex; flex-direction: column; gap: 24px; }
.pf-uns-media { border-radius: 12px; overflow: hidden; min-height: 320px; }
.pf-uns-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Empowering Critical Sectors — sectors + factory image (image matches sector height) */
.pf-sectors-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}
.pf-sectors-media {
    border-radius: 12px;
    background: url('../images/portfolio-critical-plant.jpg') center center / cover no-repeat;
    height: 300px;
}

/* Enabling India's Rise — plain, left-aligned (no background) */
.pf-enabling {
    padding: 0;
    margin-bottom: 54px;
}
.pf-enabling-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 28px; font-weight: 700; color: #484848;
    line-height: 1.2; margin-bottom: 12px;
}
.pf-enabling p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.7; color: #444; margin: 0;
}
.pf-sectors-block { margin-bottom: 56px; }
.pf-card-soft {
    background: rgba(255,255,255,0.6);
    border-radius: 12px; padding: 28px 30px;
}
.pf-card-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 22px; font-weight: 700; color: #333; line-height: 1.25;
    margin-bottom: 14px;
}
.pf-card-soft p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.7; color: #444; margin: 0;
}
.pf-critical-grid {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px;
    align-items: start; margin-bottom: 56px;
}
.pf-tick-list { list-style: none; margin: 18px 0 0; padding: 0; }
.pf-tick-list li {
    position: relative; padding-left: 22px; margin-bottom: 12px;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444;
}
.pf-tick-list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand-purple);
}
.pf-card-foot {
    font-family: 'Noto Sans', sans-serif; font-size: 12px; line-height: 1.55;
    color: #888; margin: 18px 0 0;
}
.pf-critical-media { margin-top: 24px; border-radius: 12px; overflow: hidden; }
.pf-critical-media img { width: 100%; height: auto; display: block; }

.pf-block-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 28px; font-weight: 700;
    color: var(--brand-purple); margin-bottom: 10px;
}
.pf-block-title.pf-title-dark { color: #484848; font-size: 22px; }
.pf-block-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #444; margin-bottom: 26px;
}
.pf-sectors {
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px;
    margin-bottom: 34px;
}
.pf-sector h5 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;
}
.pf-sector p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; color: #555; margin: 0;
}
.pf-intel { border-top: 1px solid #d6e3dd; padding-top: 24px; }
.pf-intel-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; color: var(--brand-purple); line-height: 1.25;
    margin-bottom: 12px;
}
.pf-intel p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.7; color: #444; margin: 0;
}

/* Purpose-driven ESG */
.pf-purpose { border-top: 1px solid #d6e3dd; padding-top: 44px; }
.pf-esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pf-esg { border-radius: 10px; padding: 26px 26px; color: #fff; }
.pf-esg h5 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 16px;
}
.pf-esg ul { list-style: none; margin: 0; padding: 0; }
.pf-esg li {
    position: relative; padding-left: 18px; margin-bottom: 12px;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.95);
}
.pf-esg li:last-child { margin-bottom: 0; }
.pf-esg li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.pf-esg li strong { font-weight: 700; color: #fff; }
.pf-esg-env { background: #0b6e6a; }
.pf-esg-soc { background: #1a7fc0; }
.pf-esg-gov { background: #b85a28; }

/* ---- Growing with the Nation (text left, image right) ---- */
.pf-growing-hero { background: #eef6fb; overflow: hidden; }
.pf-growing-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;   /* image gets the larger share */
    align-items: stretch;
    gap: 50px;
    min-height: 88vh;
}
.pf-growing-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 70px 0;
}
.pf-growing-title {
    font-family: 'Noto Sans', serif;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 700; line-height: 1.12; color: #43408e;
    margin: 0;
}
.pf-growing-media {
    position: relative;   /* aligns to the container (menu) right edge */
}
.pf-growing-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* ---- Growing with Impact (metrics) ---- */
.pf-impact { background: #fff; padding: 80px 0; }
.pf-impact-group { padding: 34px 0; border-bottom: 1px solid #e6e6e6; }
.pf-impact-group:first-child { padding-top: 0; }
.pf-impact-head {
    font-family: 'Noto Sans', serif;
    font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 26px;
    display: flex; align-items: center; gap: 12px;
}
/* Placeholder icon (design team to replace the SVGs) */
.pf-impact-icon { display: inline-flex; flex-shrink: 0; }
.pf-impact-icon img { height: 40px; width: auto; display: block; }
.pf-impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 50px; }
.pf-metric { }
.pf-metric-val {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(26px, 3vw, 36px); font-weight: 800;
    color: var(--brand-purple); line-height: 1.1; margin-bottom: 10px;
}
.pf-metric-val sup { font-size: 0.5em; vertical-align: super; font-weight: 600; }
.pf-metric p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; color: #555; margin: 0;
}
.pf-notes-impact { margin-top: 30px; }
.pf-notes-impact p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12.5px; line-height: 1.6; color: #333; margin: 0 0 6px;
}
.pf-notes-impact p:last-child { margin-bottom: 0; }
.pf-notes-impact sup { font-size: 0.75em; }

/* ============================================================
   DRIVEN BY SYNERGIES, SIGNIFICANCE AND SUSTAINABILITY
   ============================================================ */
/* Hero — text left, larger image bleeding to the right edge */
.syn-hero { background: linear-gradient(135deg, #eef5fb 0%, #f7f0f8 100%); overflow: hidden; padding-top: 110px; }
.syn-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; color: #1a1a1a;
    margin-bottom: 14px;
}
.syn-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700; line-height: 1.12; color: var(--brand-purple);
    margin: 0 0 24px;
}
.syn-hero-row {
    display: grid; grid-template-columns: 2fr 3fr;   /* image gets the larger share */
    gap: 50px; align-items: stretch; min-height: 480px;
}
.syn-hero-text { display: flex; flex-direction: column; justify-content: center; padding: 20px 0 40px; }
.syn-hero-img {
    position: relative;   /* aligns to the container (menu) right edge */
}
.syn-hero-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block;
}
/* Intro copy below the banner */
.syn-intro { background: #fff; padding: 50px 0 0; }
.syn-intro-copy {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; line-height: 1.7; font-weight: 600; color: var(--brand-blue); margin: 0;
}

/* Company blocks */
.syn-companies { background: #fff; padding: 70px 0 60px; }
/* Per-company colour coding (bar = header colour, accent = metric line/bullet) */
.syn-company { --syn-bar: #8e278f; --syn-accent: #00aeef; }
.syn-company--ael    { --syn-bar: #8e278f; --syn-accent: #00aeef; }
.syn-company--apsez  { --syn-bar: #42408e; --syn-accent: #42408e; }
.syn-company--agel   { --syn-bar: #2f9c6a; --syn-accent: #2f9c6a; }
.syn-company--aesl   { --syn-bar: #107aa1; --syn-accent: #107aa1; }
.syn-company--atgl   { --syn-bar: #007978; --syn-accent: #007978; }
.syn-company--apl    { --syn-bar: #2f2e82; --syn-accent: #2f2e82; }
.syn-company--ambuja { --syn-bar: #7c1f25; --syn-accent: #7c1f25; }
.syn-company--ndtv   { --syn-bar: #3d306d; --syn-accent: #3d306d; }
.syn-company { padding: 44px 0; border-bottom: 1px solid #e6e6e6; }
.syn-company:last-of-type { border-bottom: none; }
.syn-company:first-child { padding-top: 0; }

.syn-company-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; color: var(--syn-bar);
    margin: 0 0 4px;
}
.syn-company-tag {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 600; color: #333; margin: 0;
}
.syn-company-tag sup { font-size: 0.7em; }

/* Image (left, full height) | heading + metrics (right) */
.syn-company-top {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    align-items: stretch; margin-bottom: 34px;
}
.syn-company-media { position: relative; border-radius: 12px; overflow: hidden; min-height: 240px; }
.syn-company-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.syn-company-right { display: flex; flex-direction: column; justify-content: center; }
.syn-company-head { margin-bottom: 24px; }
.syn-metrics {
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px;
}
.syn-metric-foot { grid-column: 1 / -1; }
.syn-metric-num {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 30px; font-weight: 800; color: #3a3a3a; line-height: 1.05;
    margin-bottom: 6px;
}
.syn-metric-num .syn-metric-unit { font-size: 0.5em; font-weight: 700; color: #777; }
.syn-metric-num.syn-metric-text { font-size: 20px; font-weight: 700; }
.syn-metric-logos { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.syn-metric-logos img { height: 42px; width: auto; display: block; }
.syn-metric p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.45; color: #555; margin: 0;
    position: relative; padding-top: 8px;
}
.syn-metric p::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 22px; height: 2px; background: #00aeef;
}
.syn-metric-foot {
    grid-column: 1 / -1;
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px; color: #888; margin: 18px 0 0;
}

/* Contribution columns */
.syn-contrib {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden;
}
.syn-contrib-2 { grid-template-columns: repeat(2, 1fr); }
.syn-contrib-col { border-left: 1px solid #e2e2e2; }
.syn-contrib-col:first-child { border-left: none; }
.syn-contrib-head {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; color: #fff;
    background: var(--syn-bar);
    padding: 12px 18px; margin: 0;
}
.syn-contrib-col ul { list-style: none; margin: 0; padding: 18px 18px; }
.syn-contrib-col li {
    position: relative; padding-left: 16px; margin-bottom: 12px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.5; color: #444;
}
.syn-contrib-col li:last-child { margin-bottom: 0; }
.syn-contrib-col li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 7px; height: 7px; background: #00aeef;
}
.syn-note {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12.5px; line-height: 1.6; color: #333; margin: 40px 0 0;
}

/* ============================================================
   STABLE, PREDICTABLE INFRASTRUCTURE-LED GROWTH
   ============================================================ */
.spg-hero { background: #fff; padding: 130px 0 0; }
.spg-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px;
}
.spg-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700; line-height: 1.12; color: var(--brand-purple); margin: 0;
}

/* Section headings */
.spg-sec-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; color: #2b2b2b; margin: 0;
}

/* Performance section */
.spg-perf { background: #fff; padding: 28px 0 60px; }
.spg-perf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.spg-unit { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #888; }

/* Table */
.spg-table-wrap { overflow-x: auto; margin-bottom: 44px; }
.spg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.spg-table thead th {
    background: #1976b5; color: #fff;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700;
    text-align: right; padding: 14px 18px; line-height: 1.3; vertical-align: bottom;
}
.spg-table thead th:first-child { text-align: left; }
.spg-table tbody td {
    font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333;
    text-align: right; padding: 13px 18px; border-bottom: 1px solid #e6e6e6;
}
.spg-table tbody td:first-child { text-align: left; color: #1a1a1a; }
.spg-table tbody td + td { border-left: 1px solid #e6e6e6; }
.spg-table tbody tr:last-child td { border-bottom: 2px solid #1976b5; }

/* Totals */
.spg-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.spg-total-val {
    display: block;
    font-family: 'Noto Sans', sans-serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800;
    color: var(--brand-purple); line-height: 1.05;
}
.spg-total-val small { font-size: 0.6em; font-weight: 700; }
.spg-total-label {
    font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444;
    position: relative; padding-left: 26px; margin: 12px 0 0;
}
.spg-total-label::before { content: ""; position: absolute; top: 0.95em; left: 0; width: 18px; height: 3px; background: var(--brand-purple); }
.spg-cagr { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444; margin: 12px 0 0; }
.spg-cagr .spg-tri { color: #2bb3a3; font-size: 11px; }
.spg-cagr b { color: #009fc7; font-size: 18px; }

/* Split label + body (Growth with Prudence / Solid Fundamentals) */
.spg-split { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: stretch; padding: 36px 0; border-top: 1px solid #e6e6e6; }
.spg-card { background: #eef6f3; border-radius: 12px; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.spg-card-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--brand-purple); line-height: 1.25; margin: 0; }
.spg-card-sub { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 14px 0 0; }
.spg-split-body { display: flex; flex-direction: column; justify-content: center; }
.spg-split-eyebrow { font-family: 'Noto Sans', sans-serif; font-size: 18px; color: #333; margin: 0 0 22px; }
.spg-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.spg-fund-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 30px; margin-bottom: 30px; }
.spg-fund-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; }
.spg-mini-num {
    display: block;
    font-family: 'Noto Sans', sans-serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800;
    color: #3a3a3a; line-height: 1.05;
}
.spg-mini p {
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.45; color: #555;
    position: relative; padding-left: 24px; margin: 8px 0 0;
}
.spg-mini p::before { content: ""; position: absolute; top: 0.9em; left: 0; width: 16px; height: 2px; background: var(--brand-purple); }
.spg-foot { font-family: 'Noto Sans', sans-serif; font-size: 12.5px; line-height: 1.6; color: #555; margin: 30px 0 0; }

/* Industry-Leading by Design — charts */
.spg-ilg { background: #fff; padding: 0 0 70px; }
.spg-ilg-title { margin-bottom: 36px; }
.ilg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 70px; }
.ilg-chart img { display: block; width: 100%; height: auto; }
.ilg-chart-title { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 2px; }
.ilg-chart-title .ilg-unit { font-size: 13px; font-weight: 400; color: #888; }
.ilg-tag {
    display: inline-block; background: var(--brand-purple); color: #fff;
    font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 3px; margin: 9px 0 10px;
}
.ilg-bars { border-top: 1px solid #e0e0e0; }
.ilg-bar-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #e0e0e0; }
.ilg-bar-label { font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #333; }
.ilg-bar-track { display: block; height: 18px; }
.ilg-bar-fill { display: block; height: 100%; }
.ilg-ind { background: #5bc2e7; }
.ilg-comp { background: #a3d6bb; }
.ilg-bar-val { font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #333; text-align: right; min-width: 46px; }
.ilg-data { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ilg-data td { font-family: 'Noto Sans', sans-serif; font-size: 16px; padding: 6px 6px; border-bottom: 1px solid #e6e6e6; }
.ilg-data td:first-child { font-weight: 700; color: #1a1a1a; width: 33%; }
.ilg-data .ilg-c-ind { color: #009fc7; font-weight: 600; }
.ilg-data .ilg-c-comp { color: #5bab86; font-weight: 600; }
/* ============================================================
   FULLSCREEN MEGA MENU (copied from DAR reference)
   Opens from the existing Menu button; hamburger -> cross.
   ============================================================ */
.menu {
    position: fixed; inset: 0; z-index: 900; background: #fbfafc;
    clip-path: circle(0% at calc(100% - 48px) 42px);
    transition: clip-path .65s cubic-bezier(.22,.61,.36,1);
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 140px 0 clamp(28px,5vh,56px); overflow-y: auto;
}
/* Inner container aligns the menu's left/right edges with the header */
.menu > .container { width: 100%; }
.menu.open { clip-path: circle(150% at calc(100% - 48px) 42px); }
.menu-search { max-width: 520px; margin-bottom: clamp(18px,2.6vh,32px); display:none; }
.menu-search form { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #012a3f; padding-bottom: 10px; }
.menu-search input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Noto Sans', sans-serif; font-size: 18px; color: #1b2127; }
.menu-search button { background: none; border: none; cursor: pointer; color: #012a3f; display: flex; }
.menu-search button svg { width: 20px; height: 20px; }
.menu-inner { width: 100%; max-width: 1340px; }
.mega {
    display: grid; grid-template-columns: 0.8fr 1.5fr; gap: clamp(28px,4vw,60px); align-items: stretch;
    opacity: 0; transform: translateY(18px);
}
.menu.open .mega { opacity: 1; transform: translateY(0); transition: opacity .55s cubic-bezier(.22,.61,.36,1) .14s, transform .55s cubic-bezier(.22,.61,.36,1) .14s; }
.mega-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #e4e7ea; padding-right: clamp(14px,2vw,30px); }
.mega-tab {
    text-align: left; background: none; border: none; cursor: pointer; font-family: 'Playfair Display', serif;
    font-size: clamp(19px,1.9vw,28px); font-weight: 400; color: #1b2127; letter-spacing: -.01em; line-height: 1.18;
    padding: 10px 0; display: flex; align-items: baseline; gap: 13px; transition: color .25s, padding-left .25s;
}
.mega-tab .ix { font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #5b6770; font-weight: 700; transition: color .25s; }
.mega-tab:hover, .mega-tab.active { color: var(--brand-purple); padding-left: 8px; }
.mega-tab:hover .ix, .mega-tab.active .ix { color: var(--brand-purple); }
.mega-panels { position: relative; min-height: 340px; }
.mega-panel {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(22px,2.6vw,42px);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1), visibility .45s;
}
.mega-panel.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }
.mega-subs { list-style: none; columns: 1; column-gap: 30px; align-self: center; margin: 0; padding: 0; }
.mega-subs.two { columns: 2; }
.mega-subs li { break-inside: avoid; margin-bottom: 11px; }
.mega-subs li a { font-size: 16px; color: #5b6770; line-height: 1.35; transition: color .2s, padding-left .2s; display: inline-block; }
.mega-subs li a:hover { color: var(--brand-purple); padding-left: 5px; }
/* external-link glyph on the two PDF panels */
#m-statutory .mega-subs li a::after,
#m-financial .mega-subs li a::after {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    margin-left: 7px;
    background-color: #8e278f;
    opacity: .6;
    transition: opacity .2s;
    -webkit-mask: var(--ext-link-icon) center / contain no-repeat;
            mask: var(--ext-link-icon) center / contain no-repeat;
}
#m-statutory .mega-subs li a:hover::after,
#m-financial .mega-subs li a:hover::after { opacity: 1; }
.mega-sub-toggle { font-family: inherit; font-size: 16px; color: #5b6770; line-height: 1.35; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.mega-sub-toggle:hover { color: var(--brand-purple); }
.mega-sub-toggle::after { content: "\25B8"; font-size: 12px; transition: transform .2s; }
.mega-has-sub.open > .mega-sub-toggle::after { transform: rotate(90deg); }
.mega-has-sub.open > .mega-sub-toggle { color: var(--brand-purple); font-weight: 600; }
.mega-nested { list-style: none; margin: 0; padding: 0 0 0 16px; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mega-has-sub.open > .mega-nested { max-height: 200px; margin-top: 9px; }
.mega-nested li { margin-bottom: 9px; }
.mega-nested li:last-child { margin-bottom: 0; }
.mega-nested li a { font-size: 13px; color: #6b7680; }
.mega-figure {
    display: block; text-decoration: none; cursor: pointer;
    border-radius: 8px; overflow: hidden; min-height: 320px; position: relative;
    background-size: cover; background-position: center;
    background-image: linear-gradient(150deg, rgba(1, 42, 63, .55), rgba(138, 43, 140, .5)), var(--img, none);
    background-color: #0a2335;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.mega-figure:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.mega-figure .cap {
    position: absolute; left: 20px; bottom: 18px; right: 20px; color: #fff; font-family: 'Playfair Display', serif;
    font-size: clamp(17px,1.4vw,21px); line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
@media (max-width: 860px) {
    .menu { padding-top: 96px; }
    /* Accordion: JS moves each panel directly under its tab inside .mega-nav */
    .mega { display: block; }
    .mega-nav { border-right: none; padding-right: 0; gap: 0; }
    .mega-panels { display: none; }                 /* emptied on mobile */
    .mega-tab { border-bottom: 1px solid #e4e7ea; width: 100%; padding: 15px 0; display: flex; align-items: center; }
    .mega-tab::after { content: '+'; margin-left: auto; font-size: 24px; font-weight: 400; line-height: 1; color: var(--brand-purple); }
    .mega-tab.active::after { content: '\2212'; }   /* minus when open */
    /* smooth expand/collapse */
    .mega-panel {
        position: relative; display: block; visibility: visible; transform: none;
        max-height: 0; overflow: hidden; opacity: 0; padding: 0;
        transition: max-height .4s ease, opacity .35s ease, padding .4s ease;
    }
    .mega-panel.active { max-height: 1000px; opacity: 1; padding: 2px 0 16px; }
    .mega-figure { display: none; }                 /* remove image on mobile */
    .mega-subs, .mega-subs.two { columns: 1; }
    .mega-subs li { margin-bottom: 13px; }
}
/* hamburger -> cross on the existing Menu button */
.menu-btn .hamburger span { transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s; }
.menu-btn.is-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.is-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-btn.is-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   INNER PAGE — Accelerating Infrastructure, Leveraging Intelligence
   ============================================================ */
/* Page-wide gradient background (bottom #b7f1ff -> top #fff) */
.ail-page { background: linear-gradient(to top, #b7f1ff 0%, #ffffff 65%); }
.ail-content { background: transparent; }
.ail-hero { background: linear-gradient(135deg, #eef5fb 0%, #f7f0f8 100%); padding: 130px 0 0; }
.ail-label {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 22px;
}
/* Two-column: heading + lead (left) | image placeholder (right) */
.ail-hero-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;   /* image gets the larger share, matches syn-hero */
    gap: 56px;
    align-items: center;
}
.ail-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-purple);
    margin: 0 0 20px;
}
.ail-hero-grid p 
{
    padding-bottom: 20px;
}
.ail-lead,
.ail-body > p.ail-lead {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--brand-blue);
    margin: 0 0 24px;
}
.ail-hero-media { border-radius: 14px 14px 0 0; overflow: hidden; align-self: end; }
.ail-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #eef0f3;
    border: 1px dashed #c4cad2;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #97a1ac;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 600; letter-spacing: .3px;
}
.ail-hero-img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* Body content — single column */
.ail-content { background: transparent; padding: 10px 0 90px; }
.ail-body { max-width: 100%; }
.ail-body > p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 22px;
}

/* Profile / caption card */
.ail-profile {
    border: 1px solid #8e278f;
    border-radius: 14px;
    padding: 26px 30px;
    margin-top: 14px;
}
.ail-profile-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700;
    color: #444;
    margin: 0 0 8px;
}
.ail-profile-role {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; color: #444;
    margin: 0 0 14px; padding-bottom: 14px;
    border-bottom: 1px solid #444;
}
.ail-profile-bio {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.7; color: #444;
    margin: 0;
}

/* ============================================================
   MESSAGE FROM THE CHAIRMAN — letter page
   ============================================================ */
/* Hero: reuse chairman-section; page-hero tweaks */
.mftc-hero { min-height: 100vh; height: auto; padding: 120px 0 0; }
.mftc-hero .chairman-title { color: var(--brand-purple); }

/* The letter body — centred readable column */
.mftc-letter { background: #fff; padding: 70px 0 90px; }
.mftc-body { max-width: 100%; }
.mftc-body > p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.8; color: #444;
    margin: 0 0 22px;
}
.mftc-body strong { font-weight: 700; color: #1a1a1a; }
.mftc-salutation { font-weight: 700; color: #1a1a1a !important; font-size: 18px !important; }

/* Report call-out / highlight (APSEZ letters) — cyan rule + muted light statement */
.mftc-callout { margin: 46px 0; padding: 0; }
.mftc-callout::before {
    content: ""; display: block;
    width: 56px; height: 3px; background: #00aeef;
    margin: 0 0 22px;
}
.mftc-callout-text {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 22px; line-height: 1.5; font-weight: 300;
    color: #8a8a8a;
}
.mftc-callout-text .rs { color: #8a8a8a; -webkit-text-fill-color: #8a8a8a; }

/* Section subheadings within the letter */
.mftc-subhead {
    font-family: 'Noto Sans', sans-serif;
    font-size: 24px; font-weight: 700; line-height: 1.25;
    color: var(--brand-purple);
    margin: 40px 0 18px;
}

/* Short anaphora / emphasis lines */
.mftc-verse { margin: 0 0 22px; }
.mftc-verse p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; font-weight: 600; color: #1a1a1a;
    margin: 0 0 6px;
}

/* Pull-quote — quotation-mark glyph above purple statement */
.mftc-quote { margin: 44px 0; padding: 0; }
.mftc-quote-mark { width: 44px; height: auto; display: block; margin: 0 0 18px; }
.mftc-quote-text {
    display: block;
    font-family: 'Noto Sans', serif;
    font-size: 26px; line-height: 1.4; font-weight: 700;
    color: var(--brand-purple);
}

/* Stat call-outs */
.mftc-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 24px; margin: 36px 0;
}
.mftc-stat { padding: 0; }
.mftc-stat-val {
    display: block;
    font-family: 'Noto Sans', serif;
    font-size: 32px; font-weight: 700; line-height: 1.1;
    /* blue -> purple gradient text (matches the report call-out numbers) */
    background: linear-gradient(90deg, #006db7 0%, #8e278f 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mftc-stat-val .rs { -webkit-text-fill-color: #006db7; }
.mftc-stat-label {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.5; color: #444; margin-top: 10px;
}

/* Gratitude list — square bullets (site convention) */
.mftc-gratitude { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mftc-gratitude li {
    position: relative; padding-left: 26px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.8; color: #444;
}
.mftc-gratitude li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 8px; height: 8px; background: var(--brand-purple);
}

/* Sign-off */
.mftc-signoff {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; line-height: 1.4;
    color: var(--brand-purple); margin: 34px 0 30px !important;
}
.mftc-sign-name {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0 !important;
}
.mftc-sign-role {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #555; margin: 4px 0 0 !important;
}

/* ============================================================
   ABOUT APSEZ — intro + multi-section body + hero image
   ============================================================ */
.abt-hero { background: linear-gradient(135deg, #eef5fb 0%, #f7f0f8 100%); padding: 120px 0 0; }
.abt-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.abt-hero-media { align-self: end; }
.abt-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; color: #1a1a1a;
    margin-bottom: 14px;
}
.abt-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 700; line-height: 1.14; color: var(--brand-purple);
    margin: 0 0 22px;
}
.abt-intro {
    font-family: 'Noto Sans', sans-serif;
    padding-bottom: 15px;
    font-size: 18px; line-height: 1.7; font-weight: 600;
    color: var(--brand-blue); margin: 0;
}
.abt-hero-media img { width: 100%; height: auto; border-radius: 14px 14px 0 0; display: block; }
.abt-body { background: #fff; padding: 24px 0 90px; }
/* lead paragraph moved full-width below the hero banner, on white (no tint) */
.abt-lead { max-width: 100%; margin: 0 0 40px; }
@media (max-width: 991px) { .abt-hero-row { grid-template-columns: 1fr; gap: 30px; } }
/* single full-width column — matches the other inner pages (no multi-column) */
.abt-block + .abt-block { margin-top: 38px; }
.abt-subhead {
    font-family: 'Noto Sans', sans-serif;
    font-size: 24px; font-weight: 700; color: var(--brand-purple);
    line-height: 1.25; margin: 0 0 16px;
}
.abt-block p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 18px;
}
.abt-block p:last-child { margin-bottom: 0; }

/* ============================================================
   STAKEHOLDER ENGAGEMENT
   ============================================================ */
.se-body { background: #fff; padding: 24px 0 90px; }
.se-subhead { font-family: 'Noto Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--brand-purple); margin: 46px 0 20px; }
.se-band { font-family: 'Noto Sans', sans-serif; font-size: clamp(17px,1.7vw,20px); font-weight: 700; color: #2b4a9e; margin: 54px 0 24px; padding-bottom: 10px; border-bottom: 2px solid #cdd6ea; }
.se-list { list-style: none; margin: 0; padding: 0; }
.se-list li { position: relative; padding: 0 0 8px 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; }
.se-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--brand-purple); }

/* Approach: committee / head */
.se-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 760px; }
.se-approach-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 3px; }
.se-approach-val { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #555; margin: 0; }

/* Process followed — 3 cards + arrows */
.se-process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.se-proc-card { background: #fff; border: 1px solid #e6e6e6; box-shadow: 0 4px 14px rgba(0,0,0,.07); border-radius: 6px; padding: 22px 24px; }
.se-proc-card h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.se-proc-arrow { display: flex; align-items: center; justify-content: center; padding: 0 12px; color: #2b4a9e; }

/* Inclusive highlights — 4-col cards */
.se-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.se-hl-card { background: linear-gradient(#f5f8fc, #eaf1fa); border-bottom: 3px solid #00aeef; padding: 20px 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #333; }

/* Stakeholder importance matrix */
.se-matrix { position: relative; max-width: 760px; margin: 0 auto; }
.se-mx-plot { position: relative; }
.se-mx-svg { width: 100%; height: auto; display: block; }
.se-mx-lbl { position: absolute; transform: translateY(-50%); font-family: 'Noto Sans', sans-serif; font-size: clamp(11px, 1.15vw, 14px); font-weight: 600; color: #333; white-space: nowrap; }

/* Stakeholder engagement cards */
.se-stake { margin: 0 0 46px; }
.se-stake-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 18px; }
.se-stake-icon { flex: 0 0 auto; border: 1px solid #cfc7e4; box-shadow: 5px 5px 0 #efeaf7; padding: 10px; }
.se-stake-icon img { width: 44px; height: 44px; display: block; object-fit: contain; }
.se-stake-name { font-family: 'Noto Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--brand-purple); margin: 4px 0 6px; }
.se-stake-desc { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #444; margin: 0; max-width: 780px; }
.se-stake-card { border: 1px solid #d7d0ea; border-radius: 4px; box-shadow: 10px 10px 0 rgba(120,100,180,.22); padding: 28px 32px; }
.se-stake-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 44px; }
.se-stake-card h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 14px 0 8px; }
.se-stake-card h4:first-child { margin-top: 0; }
.se-stake-hr { border: none; border-top: 1px solid #e3e3e3; margin: 22px 0; }
.se-stake-foot { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 30px; align-items: start; }
.se-stat { margin: 0 0 16px; }
.se-stat-val { font-family: 'Noto Sans', sans-serif; font-size: 27px; font-weight: 800; color: var(--brand-purple); line-height: 1.1; }
.se-stat-val small { font-size: .62em; font-weight: 700; }
.se-stat-label { position: relative; padding-left: 16px; margin-top: 3px; font-family: 'Noto Sans', sans-serif; font-size: 12.5px; line-height: 1.4; color: #555; }
.se-stat-label::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 2px; background: var(--brand-purple); }
.se-foot-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.se-cap-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.se-cap-icons img { width: 32px; height: 32px; object-fit: contain; }
.se-mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.se-mt-chip { border: 1px solid #b9a9d6; border-radius: 4px; padding: 3px 9px; font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 700; color: #4a3d7a; }

/* Legends */
.se-legends { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin: 20px 0 0; padding: 26px 0 0; border-top: 1px solid #eee; }
.se-legend-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; }
.se-cap-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.se-cap-legend div { display: flex; align-items: center; gap: 10px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444; }
.se-cap-legend img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 30px; }
.se-mt-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.se-mt-legend div { display: flex; align-items: baseline; gap: 8px; font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #444; }
.se-mt-legend .se-mt-chip { flex: 0 0 auto; }

/* Engagement highlights — photo + text cards */
.se-eng-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.se-eng-photo img { width: 100%; height: 190px; object-fit: cover; display: block; box-shadow: 6px 6px 0 rgba(120,100,180,.12); }
.se-eng-text { background: #fff; box-shadow: 6px 6px 0 rgba(120,100,180,.12); border: 1px solid #eee; padding: 22px 22px; margin-top: -30px; position: relative; }
.se-eng-text h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.se-eng-text p { font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.55; color: #444; margin: 0 0 10px; }
.se-eng-text ul { list-style: none; margin: 0 0 10px; padding: 0; }
.se-eng-text li { position: relative; padding: 0 0 7px 16px; font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #444; }
.se-eng-text li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--brand-purple); }

@media (max-width: 991px) {
    .se-highlights { grid-template-columns: repeat(2, 1fr); }
    .se-eng-grid { grid-template-columns: repeat(2, 1fr); }
    .se-stake-foot { grid-template-columns: 1fr 1fr; }
    .se-mt-legend { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .se-process { grid-template-columns: 1fr; gap: 12px; }
    .se-proc-arrow { transform: rotate(90deg); padding: 4px 0; }
    .se-highlights, .se-eng-grid, .se-approach { grid-template-columns: 1fr; }
    .se-stake-cols, .se-stake-foot, .se-legends, .se-cap-legend, .se-mt-legend { grid-template-columns: 1fr; }
    .se-stake-card { box-shadow: 5px 5px 0 rgba(120,100,180,.2); padding: 22px; }
}

/* ============================================================
   BUSINESS MODEL — value-creation (six capitals) model
   ============================================================ */
section.bm-body { background: #fff; padding: 10px 0 90px; }

/* Flow-arrow band headers */
.bm-flow { display: grid; gap: 8px; margin: 52px 0 24px; }
.bm-flow:first-of-type { margin-top: 24px; }
.bm-flow--io { grid-template-columns: 1fr 1.25fr; }
.bm-flow--oa { grid-template-columns: 1fr 1fr; }
.bm-flow--single { grid-template-columns: 1fr; }
.bm-flow-seg {
    background: linear-gradient(90deg, #2456a8 0%, #7B2FA8 100%);
    color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700;
    font-size: clamp(13.5px, 1.35vw, 17px); line-height: 1.2;
    padding: 14px 34px 14px 22px; display: flex; align-items: center;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

/* Input | Availability (and Outcomes | Actions) aligned two-column grid */
section.bm-body .bm-io { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0 30px; }
section.bm-body .bm-io--oa { grid-template-columns: 1fr 1fr; }
section.bm-body .bm-io > * { border-top: 1px solid #ececec; padding: 22px 0; }
section.bm-body .bm-io > *:nth-child(1), section.bm-body .bm-io > *:nth-child(2) { border-top: none; padding-top: 4px; }
.bm-cap-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.bm-cap-icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.bm-cap-name { font-family: 'Noto Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--brand-purple); margin: 0; line-height: 1.15; }
.bm-io-avail-label { font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9a8cb0; margin: 0 0 8px; }
.bm-list { list-style: none; margin: 0; padding: 0; }
.bm-list li { position: relative; padding: 0 0 9px 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.55; color: #444; }
.bm-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--brand-purple); }

/* Culture & Values */
.bm-cv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bm-cv-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.bm-cv-head img { width: 44px; height: 44px; object-fit: contain; }
.bm-cv-head h3 {font-family: 'Noto Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--brand-purple); margin: 0; }
.bm-cv-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.bm-cv-item { border-left: 3px solid #dccfe8; padding-left: 14px; }
.bm-cv-item b { display: block; color: #1a1a1a; font-family: 'Noto Sans', sans-serif; font-size: 16px;; margin-bottom: 3px; }
.bm-cv-item span { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #555; }

/* Strategic priorities + outputs + photo */
/* .bm-sp-out { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: stretch; } */
.bm-block-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--brand-purple); margin: 0 0 14px; }
.bm-sp { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid #eee; }
.bm-sp-badge { flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid var(--brand-purple); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--brand-purple); }
.bm-sp-text { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }
.bm-outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 0; }
.bm-output-val { font-family: 'Noto Sans', sans-serif; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.05;
    background: linear-gradient(90deg, #006db7, #8e278f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bm-output-val small { font-size: .5em; }
.bm-output-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #555; margin-top: 6px; }
.bm-photo { min-height: 320px; }
.bm-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }

@media (max-width: 900px) {
    .bm-flow--io, .bm-flow--oa { grid-template-columns: 1fr; }
    section.bm-body .bm-io, section.bm-body .bm-io--oa { grid-template-columns: 1fr; gap: 0; }
    section.bm-body .bm-io > * { border-top: none !important; padding: 4px 0 0 !important; }
    section.bm-body .bm-io > .bm-io-avail { padding: 0 0 20px !important; border-bottom: 1px solid #ececec; margin-bottom: 18px; }
    section.bm-body .bm-io > .bm-io-cap { padding-top: 6px !important; }
    .bm-cv-wrap, .bm-sp-out { grid-template-columns: 1fr; }
    .bm-cv-list, .bm-outputs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .bm-cv-list, .bm-outputs { grid-template-columns: 1fr; } }

/* ============================================================
   INVESTMENT CASE — cards, partnerships, ratings
   ============================================================ */
.ic-body { background: #fff; padding: 24px 0 90px; }
.ic-case { margin: 0 0 42px; }

/* Header: gradient "Investment Case N" badge + blue title, raised bar */
.ic-head {
    display: flex; align-items: stretch;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 5px 16px rgba(0,0,0,.12);
    margin-bottom: 20px;
}
.ic-badge {
    background: linear-gradient(135deg, #3a2b82 0%, #7a3b9a 100%);
    color: #fff; font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: .2px;
    padding: 15px 24px; display: flex; align-items: center; white-space: nowrap;
}
.ic-title {
    flex: 1; background: #fff;
    color: #2b4a9e; font-family: 'Noto Sans', sans-serif;
    font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; line-height: 1.2;
    padding: 13px 26px; display: flex; align-items: center;
}

/* Body card */
.ic-card {
    background: #fff; border: 1px solid #e8e8e8; border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0,0,0,.06);
    padding: 30px 36px;
}
.ic-lead { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 18px; }

/* Two-column bullet flow (matches the report layout) */
.ic-bullets { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 50px; }
.ic-bullets li {
    position: relative; padding: 0 0 14px 22px; break-inside: avoid;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444;
}
.ic-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--brand-purple); }
.ic-bullets--single { columns: 1; }

/* Case 4 — technology sub-groups flowed into two columns */
.ic-tech { columns: 2; column-gap: 50px; }
.ic-tech-group { break-inside: avoid; margin: 0 0 16px; }
.ic-subhead { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
.ic-tech-group ul { list-style: none; margin: 0; padding: 0; }
.ic-tech-group li {
    position: relative; padding: 0 0 12px 22px;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444;
}
.ic-tech-group li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--brand-purple); }

/* Outcome */
.ic-outcome { margin: 22px 0 0; }
.ic-outcome-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.ic-outcome-text { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0; }

/* Strategic partnerships panel */
.ic-partners { border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.05); padding: 28px 32px; margin: 26px 0 0; }
.ic-partners-title { text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #2b4a9e; margin: 0 0 24px; }
.ic-partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.ic-pcol-title { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; text-align: center; margin: 0 0 16px; }
.ic-partner { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; }
.ic-partner-logo { flex: 0 0 56px; width: 56px; height: auto; object-fit: contain; }
.ic-partner-logo--empty { visibility: hidden; }
.ic-partner-txt { position: relative; padding-left: 15px; font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.4; color: #333; }
.ic-partner-txt::before { content: "\203A"; position: absolute; left: 0; top: -1px; color: var(--brand-purple); font-weight: 700; }
.ic-partner-name { font-weight: 700; display: block; }
.ic-partner-stake { color: #666; }

/* Rating agencies */
.ic-ratings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 50px; margin: 26px 0 0; }
.ic-rate-col-title { text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #2b4a9e; border-bottom: 2px solid #cdd6ea; padding-bottom: 8px; margin: 0 0 6px; }
.ic-rate-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid #eee; }
.ic-rate-logo { max-height: 30px; max-width: 150px; width: auto; }
.ic-rate-logo-text { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #333; }
.ic-rate-val { position: relative; padding-left: 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; color: #333; white-space: nowrap; }
.ic-rate-val::before { content: "\203A"; position: absolute; left: 0; color: var(--brand-purple); font-weight: 700; }
.ic-rate-note { grid-column: 1 / -1; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 12.5px; color: #666; margin: 14px 0 0; }

@media (max-width: 767px) {
    .ic-bullets, .ic-tech { columns: 1; }
    .ic-partners-grid, .ic-ratings-grid { grid-template-columns: 1fr; }
    .ic-head { flex-direction: column; align-items: stretch; }
    .ic-badge { justify-content: center; }
}

/* ============================================================
   RECOGNITION / awards & accolades list
   ============================================================ */
.rfe-body { background: #fff; padding: 40px 0 90px; }
.rfe-cert { float: right; width: 300px; max-width: 40%; margin: 4px 0 22px 44px; border-radius: 12px; display: block; }
.rfe-list { list-style: none; margin: 0; padding: 0; }
.rfe-list li {
    position: relative; padding: 0 0 18px 30px;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.7; color: #444;
}
.rfe-list li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; background: var(--brand-purple);
}
@media (max-width: 640px) { .rfe-cert { float: none; width: 100%; max-width: 320px; margin: 0 0 24px; } }

/* ============================================================
   SHORE-TO-DOOR asset-footprint diagram
   ============================================================ */
.s2d { background: #eaf0f9; padding: 60px 0; }
.s2d-card { border-radius: 16px; padding: 46px 44px; position: relative; }
/* Wrap-around connector: MMLPs (top-right) down into Warehouses (bottom) */
.s2d-vconn { position: absolute; inset: 0; pointer-events: none; }
.s2d-vconn svg { width: 100%; height: 100%; display: block; }
.s2d-vc-solid { stroke: #55607a; stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.s2d-vc-dash { stroke: #9aa3b2; stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; }
.s2d-vc-head { position: absolute; width: 0; height: 0; }
.s2d-vc-head--up { left: 87%; top: 34%; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #55607a; }
.s2d-vc-head--left { left: 74.5%; top: 65%; margin-top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 7px solid #55607a; }
.s2d-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #2d2b6b;
    line-height: 1.25; margin: 0 0 10px;
}
.s2d-legend { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #00a5e4; letter-spacing: .5px; }
.s2d-legend .s2d-sep { color: #00aeef; margin: 0 8px; }
.fy31clr{
    color: #2d2b6b;
}
.s2d-flow { display: flex; align-items: flex-start; gap: 8px; margin: 34px 0 0; }
.s2d-flow--top { padding-right: 8%; }   /* right gutter for the wrap-around connector */
.s2d-flow--bottom { max-width: 74%; }
.s2d-node { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s2d-node img { width: 100%; max-width: 200px; height: 120px; object-fit: contain; }
.s2d-node-label { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #2d2b6b; }
.s2d-stat { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.4; color: #00a5e4; }
.s2d-stat b { font-weight: 700; }
.s2d-stat sup { color: #8a8a8a; font-size: .7em; }
.s2d-stat .s2d-arrow { color: #00a99d; margin: 0 4px; font-weight: 700; }
.s2d-stat em { font-style: normal; color: #8e278f; font-weight: 700; }
.s2d-arrow-c { flex: 0 0 auto; align-self: flex-start; padding-top: 46px; }
.s2d-arw-pair { display: block; }
.s2d-arw-solid { stroke: #55607a; stroke-width: 1.5; fill: none; }
.s2d-arw-dash { stroke: #9aa3b2; stroke-width: 1.5; fill: none; }
.s2d-arw-dash line { stroke-dasharray: 4 3; }

.s2d-ifn-wrap {
    position: relative; height: 11px; margin: 22px 0 0; max-width: 88%;
    border: 1px solid #cfd8e3; border-bottom: none;
}
.s2d-ifn {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: #fff; padding: 0 14px; white-space: nowrap;
    font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #2d2b6b;
}
.s2d-tech {
    max-width: 88%;
    margin: 18px 0 30px;
    padding: 14px 24px;
    background: #d4e3f4;
    text-align: center;
}
.s2d-tech-box {
    font-family: 'Noto Sans', sans-serif; font-size: 15px;
    font-weight: 700; color: #2d2b6b; margin-bottom: 5px;
}
.s2d-tech-desc { font-family: 'Noto Sans', sans-serif; font-size: 15px; line-height: 1.5; color: #2d2b6b; margin: 0; }
.s2d-notes { margin: 30px 0 0; }
.s2d-notes p { font-family: 'Noto Sans', sans-serif; font-size: 11.5px; line-height: 1.5; color: #999; margin: 0 0 4px; }

@media (max-width: 900px) {
    .s2d-flow { flex-wrap: wrap; }
    .s2d-node { flex: 1 1 40%; }
    .s2d-flow--bottom { max-width: 100%; }
    .s2d-arrow-c { display: none; }
    .s2d-vconn { display: none; }
}

/* Banner with overlay text — constrained to the container (space left & right) */
.ail-banner { margin: 50px 0; }
.ail-banner-inner {
    position: relative;
    min-height: 580px;
    display: flex; align-items: center;
    overflow: hidden;
    border-radius: 14px;
    background-color: #14243a;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.ail-banner-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.12) 100%);
}
.ail-banner-content { position: relative; z-index: 2; max-width: 760px; padding: 50px; }
.ail-banner-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700; line-height: 1.12; color: #fff;
    margin: 0 0 22px;
}
.ail-banner-lead {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 600; line-height: 1.6;
    color: #fff; margin: 0 0 20px;
}
.ail-banner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ail-banner-list li {
    position: relative; padding-left: 26px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.92);
}
.ail-banner-list li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 8px; height: 8px; background: #fff;
}

/* Closing paragraph + list */
.ail-closing { background: transparent; padding: 10px 0 90px; }
.ail-closing-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ail-closing-list li {
    position: relative; padding-left: 26px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.8; color: #444;
}
.ail-closing-list li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; background: var(--brand-purple);
}

/* ============================================================
   REUSABLE UTILITIES (design-system) — prefix: ar-
   Generic building blocks for new pages. See design.md.
   ============================================================ */

/* --- Section wrappers / spacing --- */
.ar-section       { padding: 28px 0 60px; background: #fff; }
.ar-section--hero { padding: 130px 0 0; }        /* clears fixed header */
.ar-section--tint-blue  { background: #e9f6fc; }
.ar-section--tint-green { background: #eef6f3; }
.ar-section--wide { padding: 60px 0 70px; }

/* --- Text: eyebrow + titles --- */
.ar-eyebrow {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px; font-weight: 700; line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.ar-eyebrow--light { color: #fff; }

.ar-page-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700; line-height: 1.12;
    color: var(--brand-purple);
    margin: 0;
}
.ar-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; line-height: 1.25;
    color: #2b2b2b;
    margin: 0 0 22px;
}
.ar-section-title--purple { color: var(--brand-purple); }

.ar-body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; line-height: 1.6; color: #333;
    margin: 0 0 18px;
}
.ar-body--lg  { font-size: 18px; }
.ar-note {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12.5px; line-height: 1.6; color: #555;
    margin: 0;
}
.ar-caption {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #888;
}

/* Purple tick accent before a label/stat */
.ar-tick { position: relative; padding-left: 30px; }
.ar-tick::before {
    content: ""; position: absolute; left: 0; top: 0.9em;
    width: 16px; height: 2px; background: var(--brand-purple);
}

/* --- Stats / big figures --- */
.ar-stat-val {
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px; font-weight: 800; line-height: 1; color: #1a1a1a;
}
.ar-stat-val--teal { color: #009fc7; }
.ar-stat-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; color: #555; margin-top: 8px;
}

/* --- Buttons --- */
.ar-btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 22px; border-radius: 50px; cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 500; letter-spacing: .3px;
    background: transparent;
    color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    transition: background .25s ease, color .25s ease, transform .15s ease;
}
.ar-btn-outline:hover { background: var(--brand-blue); color: #fff; }
.ar-btn-outline--light { color: #fff; border-color: #fff; }
.ar-btn-outline--light:hover { background: #fff; color: var(--brand-blue); }

.ar-btn-gradient {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 24px; border: none; cursor: pointer;
    color: #fff; border-radius: 50px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 500; letter-spacing: .2px;
    background: linear-gradient(90deg, #1565C0 0%, #7B2FA8 50%, #C01535 100%);
    transition: opacity .2s ease, transform .15s ease;
}
.ar-btn-gradient:hover { opacity: .9; transform: scale(1.02); }

/* --- Cards --- */
.ar-card {
    background: #eef6f3; border-radius: 12px; padding: 30px 32px;
    display: flex; flex-direction: column; justify-content: center;
}
.ar-card--blue { background: #e9f6fc; }
.ar-card--white { background: #fff; border: 1px solid #e6e6e6; }
.ar-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; line-height: 1.25;
    color: var(--brand-purple); margin: 0;
}
.ar-card-sub {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 14px 0 0;
}

/* --- Grid helpers --- */
.ar-grid      { display: grid; gap: 30px; }
.ar-grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 30px; }
.ar-grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ar-split     { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: stretch; }

/* --- Table --- */
.ar-table-wrap { overflow-x: auto; margin-bottom: 44px; }
.ar-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ar-table thead th {
    background: #1976b5; color: #fff;
    font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700;
    text-align: right; padding: 14px 18px; line-height: 1.3; vertical-align: bottom;
}
.ar-table thead th:first-child { text-align: left; }
.ar-table tbody td {
    font-family: 'Noto Sans', sans-serif; font-size: 16px;
    text-align: right; padding: 14px 18px; color: #333;
    border-bottom: 1px solid #e6e6e6;
}
.ar-table tbody td:first-child { text-align: left; color: #1a1a1a; }
.ar-table tbody td + td { border-left: 1px solid #e6e6e6; }
.ar-table tbody tr:last-child td { border-bottom: 2px solid #1976b5; }

/* --- Responsive: collapse grids, tighten hero --- */
@media (max-width: 991px) {
    .ar-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ar-split  { grid-template-columns: 1fr; gap: 26px; }
    .ar-section--hero { padding: 100px 0 0; }
}
@media (max-width: 600px) {
    .ar-grid-2, .ar-grid-3 { grid-template-columns: 1fr; }
    .ar-card { padding: 24px 22px; }
    .ar-stat-val { font-size: 34px; }
}

/* ============================================================
   MATERIALITY — approach, process, matrix, material topics, cards
   ============================================================ */
.mat-body { background: #fff; padding: 24px 0 90px; }
.mat-subhead { font-family: 'Noto Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--brand-purple); margin: 46px 0 20px; }
.mat-p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 18px; }
.mat-p:last-child { margin-bottom: 0; }

/* Process flow chevrons */
.mat-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 4px; margin: 4px 0 34px; }
.mat-flow-step { font-family: 'Noto Sans', sans-serif; font-size: 15.5px; font-weight: 700; color: #123a7a; }
.mat-flow-arrow { display: inline-flex; color: #2f6fc0; margin: 0 4px; }

/* Process detail boxes */
.mat-proc { border: 1px solid #e4e4e4; box-shadow: 6px 6px 0 rgba(0,0,0,.05); margin-bottom: 26px; background: #fff; }
.mat-proc-head { display: flex; align-items: center; gap: 12px; background: #eaf3fb; border-left: 4px solid #2f6fc0; padding: 11px 18px; }
.mat-proc-head img { width: 34px; height: 34px; display: block; }
.mat-proc-head h3 { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #123a7a; margin: 0; }
.mat-proc-body { padding: 22px 24px; }
.mat-proc-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; }
.mat-cols-2 ul { columns: 2; column-gap: 40px; }
.mat-cols-2 ul li { break-inside: avoid; }
.mat-venn { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.mat-list { list-style: none; margin: 0; padding: 0; }
.mat-list li { position: relative; padding: 0 0 9px 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; }
.mat-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--brand-purple); }
.mat-list li b { color: #1a1a1a; }
.mat-list .mat-sub { list-style: none; margin: 8px 0 4px; padding: 0; }
.mat-list .mat-sub li { padding-left: 18px; }
.mat-list .mat-sub li::before { width: 5px; height: 5px; border-radius: 50%; background: #2f6fc0; top: 8px; }

/* Materiality matrix */
.mat-matrix { max-width: 940px; margin: 0 auto; }
.mat-matrix img { width: 100%; height: auto; display: block; }

/* Our Material Topics — 3 columns */
.mat-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mat-topics-head { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 2px solid; }
.mat-topic { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eee; }
.mat-topic-code { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; min-width: 40px; text-align: center; padding: 3px 0 4px; border-bottom: 2px solid; }
.mat-topic-name { font-family: 'Noto Sans', sans-serif; font-size: 16px;; color: #333; line-height: 1.35; }
.mat--env  .mat-topics-head, .mat--env  .mat-topic-code { color: #1f8a78; border-color: #1f8a78; }
.mat--soc  .mat-topics-head, .mat--soc  .mat-topic-code { color: #0a7bc0; border-color: #0a7bc0; }
.mat--gov  .mat-topics-head, .mat--gov  .mat-topic-code { color: #d9772a; border-color: #d9772a; }

/* Legend */
.mat-legend { display: grid; grid-template-columns: 2.2fr 1fr; gap: 44px; margin-top: 34px; padding-top: 26px; border-top: 1px solid #e6e6e6; }
.mat-legend h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; }
.mat-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.mat-cap { display: flex; align-items: center; gap: 9px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }
.mat-cap img { width: 26px; height: 26px; display: block; }
.mat-fin-list { display: flex; flex-direction: column; gap: 12px; }
.mat-fin-list span { display: flex; align-items: center; gap: 10px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }

/* Category banners */
.mat-cat { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; margin: 58px 0 26px; }
.mat-cat--env { color: #1f9e8f; }
.mat-cat--soc { color: #0a7bc0; }
.mat-cat--gov { color: #e07b2c; }

/* Section photo banner */
.mat-photo { margin: 8px 0 34px; }
.mat-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ---- Material issue CARD ---- */
.mat-card { position: relative; border: 1px solid #ececec; box-shadow: 8px 9px 0 rgba(0,0,0,.06); margin-bottom: 40px; background: #fff; }
.mat-card-tabwrap { padding: 16px 0 0 22px; }
.mat-card-tab { display: inline-block; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; padding: 9px 20px 8px; border-radius: 3px 3px 0 0; box-shadow: 3px 3px 0 rgba(0,0,0,.05); }
.mat-card--env .mat-card-tab { background: #e7f4f0; color: #1f8a78; border-bottom: 3px solid #1f8a78; }
.mat-card--soc .mat-card-tab { background: #e9f3fb; color: #0a7bc0; border-bottom: 3px solid #0a7bc0; }
.mat-card--gov .mat-card-tab { background: #fdefe1; color: #d9772a; border-bottom: 3px solid #d9772a; }
.mat-card__top { display: grid; grid-template-columns: 150px 1.5fr 1.15fr 1fr; gap: 26px; padding: 20px 26px 24px; }
.mat-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 11px; }
.mat-gri { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #444; }
.mat-sdg { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-sdg img { width: 38px; height: 38px; display: block; }
.mat-caps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mat-caps img { width: 32px; height: 32px; display: block; }
.mat-tris { display: flex; gap: 10px; align-items: center; }
.mat-card__divider { border-top: 1px solid #e6e6e6; margin: 0 26px; }
.mat-card__bot { display: grid; grid-template-columns: 1fr 2fr; gap: 34px; padding: 20px 26px 24px; }
.mat-ro h4, .mat-mit h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 11px; }
.mat-ro p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 12px; }
.mat-ro p:last-child { margin-bottom: 0; }
.mat-ro .rk { font-weight: 700; color: #c0392b; }
.mat-ro .op { font-weight: 700; color: #1f8a78; }
.mat-mit ul { columns: 2; column-gap: 36px; }
.mat-mit ul li { break-inside: avoid; }
.mat-readmore { display: flex; align-items: center; gap: 9px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #555; padding: 14px 26px 18px; text-decoration: none; transition: color .15s; }
a.mat-readmore:hover { color: var(--brand-blue); }
.mat-readmore svg { flex: none; color: var(--brand-blue); }
.mat-readmore b { color: #1a1a1a; }

@media (max-width: 991px) {
    .mat-topics { grid-template-columns: 1fr; }
    .mat-card__top { grid-template-columns: 130px 1fr; gap: 20px; }
    .mat-card__bot { grid-template-columns: 1fr; gap: 20px; }
    .mat-legend { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
    .mat-proc-split { grid-template-columns: 1fr; gap: 20px; }
    .mat-cols-2 ul, .mat-mit ul { columns: 1; }
    .mat-card__top { grid-template-columns: 1fr; }
    .mat-cap-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-flow { gap: 6px; }
    .mat-flow-step { font-size: 16px; }
}

/* Materiality — low-res photo cap (keeps small epub images crisp) */
.mat-photo--sm { text-align: center; }
.mat-photo--sm img { max-width: 640px; margin: 0 auto; }

/* Materiality — Top Three Focus Areas + Impact on External Stakeholders (teal bracket cards) */
.mat-tealcard { position: relative; background: #fff; margin-bottom: 40px;
    border: 1px solid #ececec; border-right: 3px solid #2e8b7a; border-bottom: 3px solid #2e8b7a;
    box-shadow: 6px 8px 0 rgba(0,0,0,.05); }
.mat-tealcard .mat-card-tabwrap { padding: 16px 0 0 22px; }
.mat-tealcard .mat-card-tab { display: inline-block; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700;
    padding: 9px 20px 8px; border-radius: 3px 3px 0 0; box-shadow: 3px 3px 0 rgba(0,0,0,.05);
    background: #e7f4f0; color: #1f8a78; border-bottom: 3px solid #2e8b7a; }
.mat-val { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; }

/* Focus area card */
.mat-focus__top { display: grid; grid-template-columns: 1.2fr 1.4fr 0.9fr; gap: 30px; padding: 20px 26px 22px; }
.mat-focus__divider { border-top: 1px solid #e6e6e6; margin: 0 26px; }
.mat-focus__bot { display: grid; grid-template-columns: 1fr 2fr; gap: 34px; padding: 20px 26px 24px; }
.mat-bcase p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 12px; }
.mat-bcase p:last-child { margin-bottom: 0; }
.mat-focus__bot .mat-strat ul { columns: 2; column-gap: 36px; }
.mat-focus__bot .mat-strat ul li { break-inside: avoid; }

/* Impact on external stakeholders card */
.mat-impact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 20px 26px 6px; }
.mat-impact-block + .mat-impact-block { margin-top: 20px; }
.mat-impact__type { padding: 8px 26px 24px; }
.mat-impact__type h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
.mat-impact__type p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0; }
.mat-impact__type .neg { color: #c0392b; font-weight: 700; }

@media (max-width: 991px) {
    .mat-focus__top { grid-template-columns: 1fr; gap: 18px; }
    .mat-focus__bot { grid-template-columns: 1fr; gap: 20px; }
    .mat-impact__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
    .mat-focus__bot .mat-strat ul { columns: 1; }
}

/* ============================================================
   RISK & OPPORTUNITIES
   ============================================================ */
.rsk-body { background: #fff; padding: 24px 0 90px; }
.rsk-subhead { font-family: 'Noto Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--brand-purple); margin: 48px 0 18px; }
.rsk-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 26px 0 12px; }
/* per-heading colour overrides (risk-and-opportunities) */
.rsk-subhead.is-purple, .rsk-h.is-purple { color: var(--brand-purple); }
.rsk-subhead.is-dark, .rsk-h.is-dark { color: #1a1a1a; }
.rsk-p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 18px; }
.rsk-p:last-child { margin-bottom: 0; }
.rsk-list { list-style: none; margin: 0 0 18px; padding: 0; }
.rsk-list li { position: relative; padding: 0 0 9px 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; }
.rsk-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--brand-purple); }
.rsk-list .rsk-sub { list-style: none; margin: 8px 0 2px; padding: 0; }
.rsk-list .rsk-sub li::before { width: 5px; height: 5px; border-radius: 50%; background: #43408e; }

/* Our Approach — 7 sub-approach cards */
.rsk-approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 6px; }
.rsk-approach-card { background: #f5f8fc; border-top: 3px solid #00a5e4; padding: 18px 20px; }
.rsk-approach-card h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #43408e; margin: 0 0 10px; }
.rsk-approach-card ul { list-style: none; margin: 0; padding: 0; }
.rsk-approach-card li { position: relative; padding: 0 0 7px 15px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; }
.rsk-approach-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--brand-purple); }

/* Governance boxes (Dual Approach / Three Lines of Defence) */
.rsk-boxrow { display: grid; gap: 24px; margin: 6px 0 8px; align-items: stretch; }
.rsk-boxrow--2 { grid-template-columns: 1fr auto 1fr; align-items: center; }
.rsk-boxrow--3 { grid-template-columns: repeat(3, 1fr); }
.rsk-box { background: #f4f8fc; border-bottom: 3px solid var(--brand-purple); box-shadow: 4px 6px 0 rgba(0,0,0,.05); padding: 0 0 18px; }
.rsk-box-tab { display: inline-block; background: linear-gradient(90deg, #3b8fd4, #5aa6e0); color: #fff; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; padding: 9px 20px; margin: 14px 0 14px 14px; }
.rsk-box p, .rsk-box ul { padding: 0 20px; }
.rsk-box p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; margin: 0; }
.rsk-box ul { list-style: none; margin: 0; }
.rsk-box li { position: relative; padding: 0 0 8px 16px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; }
.rsk-box li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--brand-purple); }
.rsk-box-arrow { color: #3b8fd4; display: flex; align-items: center; }

/* Diagrams (framework + process SVGs) */
.rsk-diagram { margin: 10px auto 6px; }
.rsk-diagram img { width: 100%; height: auto; display: block; }
.rsk-diagram--framework { max-width: 900px; }
.rsk-diagram--process { max-width: 820px; }

/* Functions / Actions two-column bullets */
.rsk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

/* Read-more footer */
.rsk-readmore { display: flex; align-items: center; gap: 9px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #555; margin: 18px 0 0; }
.rsk-readmore svg { flex: none; color: var(--brand-blue); }
.rsk-readmore b { color: #1a1a1a; }

/* Our Top Risks matrix */
.rsk-matrix-wrap { overflow-x: auto; }
.rsk-matrix { width: 100%; min-width: 820px; border-collapse: collapse; font-family: 'Noto Sans', sans-serif; }
.rsk-matrix th, .rsk-matrix td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid #e6e6e6; }
.rsk-matrix thead th { border-bottom: 1px solid #ccc; }
.rsk-mx-code { display: inline-block; font-size: 13px; font-weight: 700; color: #3b8fd4; border: 1px solid #9cc6e8; border-bottom: none; padding: 2px 10px; }
.rsk-mx-name { font-size: 16px; font-weight: 700; color: #3b8fd4; line-height: 1.2; margin-top: 4px; }
.rsk-matrix tbody th { font-size: 16px; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.rsk-matrix td { font-size: 16px; line-height: 1.45; color: #444; }
.rsk-tri { display: block; margin-bottom: 6px; }
.rsk-legend { display: flex; flex-wrap: wrap; gap: 22px; margin: 12px 0 0; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444; }
.rsk-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* Material topics / capitals / strategic priorities legend */
.rsk-mt { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; margin: 4px 0 6px; }
.rsk-mt-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; }
.rsk-badge { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 2px 8px;  white-space: nowrap; }
.rsk-badge--m { color: #43408e; border-color: #9cc6e8; }
.rsk-badge--s { color: var(--brand-purple); border-color: #d3a9d4; }
.rsk-badge--r { color: #fff; background: #3b8fd4; border-color: #3b8fd4; }
.rsk-badge--risk { color: #00aeef; background: #fff; 
    border-right: 1px solid #00aeef;
border-bottom: 1px solid #00aeef;
 }
.rsk-badge--mat { color: #3f3f9e; background: #fff;
    border-right: 1px solid #3f3f9e;
border-bottom: 1px solid #3f3f9e; }
.rsk-mt-name { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }
.rsk-caps { display: flex; flex-wrap: wrap; gap: 26px; margin: 6px 0 4px; }
.rsk-cap { display: flex; align-items: center; gap: 9px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; }
.rsk-cap img { width: 30px; height: 30px; display: block; }
.rsk-sp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 30px; margin: 6px 0 0; }
.rsk-sp-item { display: flex; align-items: flex-start; gap: 10px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; line-height: 1.4; }
.rsk-label { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #888; margin: 14px 0 8px; }

/* ---- Risk card R1..R16 ---- */
.rsk-card { position: relative; background: #fff; border: 1px solid #ececec; border-right: 3px solid #3b8fd4; border-bottom: 3px solid #3b8fd4; box-shadow: 9px 10px 0 rgba(0,0,0,.06); margin-bottom: 40px; }
.rsk-card-head { display: flex; align-items: center; gap: 0; padding: 16px 0 0 16px; }
.rsk-card-num { background: linear-gradient(160deg, #3b8fd4, #2f7fc4); color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 8px 14px; }
.rsk-card-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; border-bottom: 2px solid #9cc6e8; padding: 0 18px 8px 14px; align-self: flex-end; }
.rsk-card-body { display: grid; grid-template-columns: 168px 1fr; gap: 30px; padding: 22px 26px 26px; }
.rsk-meta-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 9px; }
.rsk-meta-block + .rsk-meta-block { margin-top: 18px; }
.rsk-meta-caps { display: flex; flex-wrap: wrap; gap: 8px; }
.rsk-meta-caps img { width: 30px; height: 30px; display: block; }
.rsk-meta-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.rsk-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.rsk-field-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 7px; }
.rsk-field-h + p { margin-top: 0; }
.rsk-card p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; margin: 0 0 14px; }
.rsk-opp { background: #f8f5fc; border: 1px solid #d9bde0; box-shadow: 3px 4px 0 rgba(142,39,143,.08); padding: 16px 18px; }
.rsk-opp h5 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
.rsk-opp p { font-size: 16px; margin: 0; }

/* Sensitivity to financial risks table — reuse simple table */
.rsk-sens-wrap { overflow-x: auto; margin: 6px 0 8px; }
.rsk-sens { width: 100%; min-width: 620px; border-collapse: collapse; font-family: 'Noto Sans', sans-serif; }
.rsk-sens th { background: #ece7f4; color: #1a1a1a; font-size: 16px; font-weight: 700; text-align: left; padding: 12px 16px; }
.rsk-sens td { font-size: 16px; color: #444; padding: 11px 16px; border-bottom: 1px solid #e6e6e6; }
.rsk-sens td.num { text-align: right; white-space: nowrap; }

/* Emerging risk cards */
.rsk-emerg { border: 1px solid #ececec; border-right: 3px solid #3b8fd4; border-bottom: 3px solid #3b8fd4; box-shadow: 9px 10px 0 rgba(0,0,0,.06); margin-bottom: 36px; }
.rsk-emerg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 0 12px 16px; }
.rsk-emerg-head .rsk-card-num { align-self: stretch; display: flex; align-items: center; }
.rsk-emerg-name { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; border-bottom: 2px solid #9cc6e8; padding: 0 16px 6px; }
.rsk-emerg-caps { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-right: 22px; }
.rsk-emerg-caps span { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.rsk-emerg-caps img { width: 28px; height: 28px; display: block; }
.rsk-emerg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rsk-emerg-col { padding: 16px 22px 22px; }
.rsk-emerg-col + .rsk-emerg-col { border-left: 1px solid #eee; }
.rsk-emerg-colh { background: #ece7f4; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; padding: 10px 22px; }
.rsk-emerg-col p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #444; margin: 0 0 10px; }

@media (max-width: 991px) {
    .rsk-approach { grid-template-columns: 1fr 1fr; }
    .rsk-boxrow--3 { grid-template-columns: 1fr; }
    .rsk-boxrow--2 { grid-template-columns: 1fr; }
    .rsk-box-arrow { transform: rotate(90deg); justify-content: center; }
    .rsk-2col { grid-template-columns: 1fr; gap: 4px; }
    .rsk-card-body { grid-template-columns: 1fr; gap: 20px; }
    .rsk-card-cols { grid-template-columns: 1fr; gap: 18px; }
    .rsk-mt { grid-template-columns: 1fr; }
    .rsk-sp { grid-template-columns: 1fr 1fr; }
    .rsk-emerg-grid { grid-template-columns: 1fr; }
    .rsk-emerg-col + .rsk-emerg-col { border-left: none; border-top: 1px solid #eee; }
}
@media (max-width: 767px) {
    .rsk-approach { grid-template-columns: 1fr; }
    .rsk-sp { grid-template-columns: 1fr; }
    .rsk-emerg-caps { margin-left: 0; }
}

/* ============================================================
   STRATEGY
   ============================================================ */
.strat-body { background: #fff; padding: 40px 0 90px; }
.strat-legend-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 34px 0 16px; }
.strat-legend-top { display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: start; }
.strat-caps { display: flex; flex-direction: column; gap: 18px; }
.strat-caps .rsk-cap { align-items: flex-start; }
.strat-risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 40px; }
@media (max-width: 991px) {
    .strat-legend-top { grid-template-columns: 1fr; gap: 24px; }
    .strat-risks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .strat-risks { grid-template-columns: 1fr; }
}

/* Strategy — strategic priority cards (S1..S7) */
.strat-sp { margin: 30px 0 46px; }
.strat-sp-head { display: flex; align-items: flex-end; padding-left: 8px; position: relative; z-index: 2; margin-bottom: -12px; }
.strat-sp-num { background: linear-gradient(160deg, #9a44b8, #7f2fa4); color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 9px 15px; }
.strat-sp-title { font-family: 'Noto Sans', sans-serif; font-size: 20px; font-weight: 700; color: #43408e; border-bottom: 3px solid #b98fc8; padding: 0 22px 8px 14px; align-self: flex-end; }
.strat-sp-card { background: #f7f4fb; border: 1px solid #d9bde0; border-right: 3px solid #8e3fb0; border-bottom: 3px solid #8e3fb0; box-shadow: 8px 9px 0 rgba(142,39,143,.07); display: grid; grid-template-columns: 240px 1fr; gap: 34px; padding: 30px 30px 30px; }
.strat-rail .rsk-meta-h { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 9px; }
.strat-rail .rsk-meta-block + .rsk-meta-block { margin-top: 18px; }
.strat-rail .rsk-list { margin: 0; }
.strat-rail .rsk-list li { font-size: 16px; padding-bottom: 7px; }
.strat-intro { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 18px; }
.strat-aw { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.strat-aw h4 { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 11px; }
.strat-aw .rsk-list { margin: 0; }
.strat-vessel { margin: 8px 0 40px; }
.strat-vessel img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 991px) {
    .strat-sp-card { grid-template-columns: 1fr; gap: 22px; }
    .strat-aw { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   KEY PERFORMANCE INDICATORS — charts
   ============================================================ */
.kpi-body { background: #fff; padding: 24px 0 90px; }
.kpi-band { display: inline-block; background: linear-gradient(90deg, #3b8fd4, #5aa6e0); color: #fff; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; padding: 9px 20px; margin: 44px 0 28px; }
.kpi-sub { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 30px 0 18px; }
.kpi-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 54px; }
.kpi-chart { margin-bottom: 6px; }
.kpi-chart--svg img { width: 100%; max-width: 420px; height: auto; display: block; margin-top: 10px; }
.kpi-chart-title { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 2px; line-height: 1.25; }
.kpi-chart-title span { font-weight: 400; font-size: 13px; color: #666; }
.kpi-note { font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #777; margin: 8px 0 0; line-height: 1.4; }

/* Horizontal bars — contiguous table style */
.kpi-bars { margin-top: 14px; border-top: 1px solid #d6d6d6; }
.kpi-bar-row { display: grid; grid-template-columns: 52px 1fr 80px; align-items: stretch; border-bottom: 1px solid #e4e4e4; }
.kpi-bar-fy { display: flex; align-items: center; font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #333; }
.kpi-bar-row--hl .kpi-bar-fy { font-weight: 700; color: #1a1a1a; }
.kpi-bar-track { position: relative; display: flex; align-items: center; height: 34px; }
.kpi-bar-fill { height: 100%; background: #c3cde8; }
.kpi-bar-row--hl .kpi-bar-fill { background: #8e3f8f; }
.kpi-bar-fill--intl { background: #5aa6e0; }
.kpi-bar-fill--nonmundra { background: #2f2f7d; }
.kpi-bar-val { display: flex; align-items: center; justify-content: flex-end; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; white-space: nowrap; }
.kpi-bar-row--hl .kpi-bar-val { font-weight: 700; }

/* Combo (bars + margin line) */
.kpi-combo { position: relative; }
.kpi-combo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kpi-combo-svg polyline { fill: none; stroke: #2f2f7d; stroke-width: 1.5; }

/* stacked segment colours must beat the highlight-row purple */
.kpi-bar-row--hl .kpi-bar-fill--intl { background: #5aa6e0; }
.kpi-bar-row--hl .kpi-bar-fill--nonmundra { background: #2f2f7d; }

/* Grouped bars (ROCE by segment) — contiguous, value after each bar */
.kpi-grp { margin-top: 14px; }
.kpi-grp-fy { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #1a1a1a; margin: 16px 0 5px; }
.kpi-grp-set { display: flex; flex-direction: column; }
.kpi-grp-row { display: flex; align-items: center; }
.kpi-grp-fill { height: 22px; }
.kpi-grp-val { margin-left: 9px; font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #333; white-space: nowrap; }

/* Donuts */
.kpi-donuts { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 10px; }
.kpi-donut { text-align: center; }
.kpi-donut svg { width: 224px; height: 200px; overflow: visible; }
.kpi-donut-cap { font-family: 'Noto Sans', sans-serif; font-size: 8px; font-weight: 700; fill: #1a1a1a; }
.kpi-donut-val { font-family: 'Noto Sans', sans-serif; font-size: 6px; fill: #333; }

/* Legends */
.kpi-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #444; }
.kpi-legend span { display: inline-flex; align-items: center; gap: 8px; }
.kpi-legend i { width: 13px; height: 13px; display: inline-block; border-radius: 2px; }

/* Line chart */
.kpi-linechart { margin-top: 12px; }
.kpi-linechart svg { width: 100%; height: auto; }

/* Segment panel (tinted) */
.kpi-segpanel { background: #e9f2fb; padding: 26px 30px 32px; }
.kpi-photo { margin-top: 24px; }
.kpi-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }

@media (max-width: 991px) {
    .kpi-grid2 { grid-template-columns: 1fr; gap: 26px; }
    .kpi-donuts { justify-content: flex-start; }
}

/* KPI — stacked segment values, combo margin chips */
.kpi-stacked .kpi-bar-row { align-items: start; }
.kpi-stacked .kpi-bar-fy, .kpi-stacked .kpi-bar-val { height: 34px; }
.kpi-seg-under { grid-column: 2; display: flex; justify-content: space-between; font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #666; margin: 2px 0 4px; }
.kpi-seg-a { color: #8e3f8f; font-weight: 700; }
.kpi-seg-b { color: #3b6fb0; }
.kpi-mgn-layer { position: absolute; inset: 0; pointer-events: none; }
.kpi-mgn { position: absolute; transform: translate(-3.5px, -50%); display: flex; align-items: center; gap: 3px; }
.kpi-mgn i { width: 7px; height: 7px; border-radius: 50%; background: #2f2f7d; display: block; flex: none; }
.kpi-mgn b { font-family: 'Noto Sans', sans-serif; font-size: 11px; font-weight: 700; color: #1a1a1a; background: rgba(255,255,255,.85); padding: 0 2px; line-height: 1; white-space: nowrap; }

/* ============================================================
   OPERATIONAL PERFORMANCE — PORTS
   ============================================================ */
.opp-body { background: #fff; padding: 24px 0 90px; }

/* First-page: India map (left) + stats & global map (right) */
.opp-intro-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px 44px; align-items: end; margin: 18px 0 30px; }
.opp-intro-left .opp-map { margin: 0; text-align: left; }
.opp-intro-left .opp-map img { max-width: 100%; }
.opp-coastlist { margin: 20px 0 0; }
.opp-coastlist p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.7; color: #333; margin: 0; }
.opp-coastlist b { color: #1a1a1a; }
.opp-note { font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #777; line-height: 1.6; margin: 14px 0 0; }

/* First-page network stats */
.opp-netstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; margin: 6px 0 0; }
.opp-netstat { position: relative; }
.opp-netstat b { display: block; font-family: 'Noto Sans', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 8px; width: fit-content; }
.opp-netstat b span { font-size: 16px; font-weight: 700; }
/* first three numbers — azure -> blue gradient */
.opp-netstat:nth-child(-n+3) b {
    background: linear-gradient(90deg, #00a3e0 0%, #43408e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* last three numbers — purple */
.opp-netstat:nth-child(n+4) b { color: #4c3d8f; }
/* dash sits in front of the label text, not the number */
.opp-netstat em { display: block; position: relative; padding-left: 16px; font-style: normal; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.35; color: #1a1a1a; }
.opp-netstat em::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 3px; background: var(--brand-purple); }
.opp-coast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 6px 0 30px; }
.opp-coast-card { background: #eef4fb; border-left: 3px solid #3b8fd4; padding: 14px 16px; }
.opp-coast-card h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #43408e; margin: 0 0 8px; }
.opp-coast-card p { font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #444; margin: 0; }
.opp-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 10px 0 0; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #444; }
.opp-legend span { display: inline-flex; align-items: center; gap: 10px; }
.opp-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.opp-legend--vert { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }

/* Port section */
.opp-port { margin: 0 0 60px; padding-top: 20px; border-top: 1px solid #eee; }
.opp-port:first-of-type { border-top: none; }
.opp-port-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 20px; }
.opp-port-icon { flex: none; width: 56px; height: auto; display: block; }
.opp-award-icon { width: 22px; height: auto; display: block; }
.opp-map { margin: 18px auto 6px; text-align: center; }
.opp-map img { width: 100%; max-width: 560px; height: auto; display: inline-block; }
.opp-map--globe img { max-width: 380px; }
.opp-globe-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 30px 0 6px; }
.opp-port-name { font-family: 'Noto Sans', sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #2b2f7c; line-height: 1.05; margin: 0; }
.opp-photo { margin: 0 0 22px; }
.opp-photo img { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 10px; display: block; }
.opp-desc { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 22px; }

/* Key statistics bar */
.opp-stats-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 0 0 12px; }
.opp-stats { display: flex; flex-wrap: wrap; gap: 40px; background: #8e3f8f; padding: 24px 30px; }
.opp-stat b { font-family: 'Noto Sans', sans-serif; font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.opp-stat b span { font-size: 18px; font-weight: 700; }
.opp-stat em { display: block; font-style: normal; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: rgba(255,255,255,.9); margin-top: 5px; }
.oopphotolast{
    margin-top: 20px;
}
/* Highlights */
.opp-hl-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 30px 0 14px; }
.opp-hl-group { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 18px 0 12px; }
.opp-hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 30px; }
.opp-hl-item { border-top: 1.5px solid #cfd8ea; padding-top: 10px; }
.opp-hl-item h5 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #00a5e4; margin: 0 0 6px; }
.opp-hl-item p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; margin: 0 0 6px; }
.opp-hl-wide { grid-column: 1 / -1; border-top: none; }
.opp-hl-list { list-style: none; margin: 0; padding: 0; }
.opp-hl-list li { position: relative; padding: 0 0 0 18px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; }
.opp-hl-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--brand-purple); }
.opp-hl-list strong { font-weight: 700; color: #1a1a1a; }

/* Callout box */
.opp-callouts { border: 1px solid #d3bfe0; padding: 16px 20px; margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; }
.opp-callout h5 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #00a5e4; margin: 0 0 5px; padding-left: 16px; position: relative; }
.opp-callout h5::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 2px; background: #00a5e4; }
.opp-callout p { font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #444; margin: 0; padding-left: 16px; }

/* Awards */
.opp-awards { margin-top: 26px; }
.opp-awards-h { display: flex; align-items: center; gap: 12px; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #43408e; margin: 0 0 14px; }
.opp-awards-h svg { color: #3b8fd4; flex: none; }
.opp-awards-box { border: 1px solid #d3bfe0; box-shadow: 4px 5px 0 rgba(142,39,143,.06); padding: 18px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 30px; }
.opp-award { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; }
.opp-award b { color: #1a1a1a; }

@media (max-width: 991px) {
    .opp-intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .opp-intro-left .opp-map img { max-width: 470px; }
}
@media (max-width: 991px) {
    .opp-netstats, .opp-coast { grid-template-columns: repeat(2, 1fr); }
    .opp-hl-grid, .opp-awards-box { grid-template-columns: repeat(2, 1fr); }
    .opp-callouts { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .opp-netstats, .opp-coast, .opp-hl-grid, .opp-awards-box { grid-template-columns: 1fr; }
    .opp-stats { gap: 20px; }
}

/* Operational Performance — Logistics / Marine */
.opp-asset { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 32px; margin: 6px 0 8px; }
.opp-asset-item b { font-family: 'Noto Sans', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.05; display: block; width: fit-content;
    /* azure -> navy gradient text */
    background: linear-gradient(90deg, #00a0dc 0%, #1b4f9c 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; }
.opp-asset-item b span { font-size: 16px; font-weight: 700; }
.opp-asset-item em { display: block; font-style: normal; font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #444; margin-top: 7px; }
.opp-asset-item em::before { content: ""; display: inline-block; width: 14px; height: 3px; background: var(--brand-purple); vertical-align: middle; margin: -2px 8px 0 0; }
.opp-secgrid {
     /* display: grid; grid-template-columns: 1fr 1fr; gap: 34px; */
      margin-top: 8px; }
.opp-sec-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #444; margin: 26px 0 12px; }

.opp-vessel { margin: 20px 0 4px; }
.opp-vessel span { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #444; display: block; }
.opp-vessel b { font-family: 'Noto Sans', sans-serif; font-size: 48px; font-weight: 800; color: #43408e; line-height: 1; }
.opp-drg-callout { border: 1px solid #9cc6e8; box-shadow: 4px 5px 0 rgba(59,143,212,.08); padding: 20px 26px; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.55; color: #333; margin-top: 14px; }
/* Phase expansion callout */
.opp-phase { margin: 22px 0 6px; }
.opp-phase-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #4c3d8f; margin: 0 0 14px; }
.opp-phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.opp-phase-grid p { margin: 0; padding-bottom: 14px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #444; border-bottom: 2px solid #b9a8e0; }
.opp-phase-grid p:last-child { padding-left: 34px;  }
@media (max-width: 991px) {
    .opp-asset { grid-template-columns: repeat(2, 1fr); }
    .opp-secgrid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
    .opp-asset { grid-template-columns: 1fr; }
    .opp-phase-grid { grid-template-columns: 1fr; gap: 14px; }
    .opp-phase-grid p:last-child { padding-left: 0; border-left: none; }
}

/* ==========================================================================
   ESG OVERVIEW — Our ESG Approach (.esg-*)  — generated page: our-esg-approach.html
   ========================================================================== */
.esg-hero { background: linear-gradient(135deg, #f2ecf7 0%, #eef5fb 100%); }
.esg-hero .abt-hero-text { position: relative; }
.esg-hero-bird { width: 300px; max-width: 55%; opacity: .5; margin-top: 26px; }
/* lead paragraph sits full-width below the hero banner, on white (no tint) */
.esg-hero-intro { margin: 0 0 20px;}

.esg-body { background: #fff; padding: 40px 0 90px; }

.esg-subhead {
    font-family: 'Noto Sans', serif;
    font-size: clamp(24px, 2.5vw, 30px); font-weight: 700;
    color: #424089; line-height: 1.2;
    margin: 25px 0 16px; padding-top: 8px;
}
.esg-subhead:first-child { margin-top: 0; }
.esg-p { font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 16px; }
.esg-h3 { font-family: 'Noto Sans', serif; font-size: 21px; font-weight: 700; color: #424089; margin: 30px 0 12px; }
.esg-h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 18px 0 6px; }
.esg-list { margin: 0 0 16px; padding-left: 0; list-style: none; }
.esg-list li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 16px; line-height: 1.7; color: #444; }
.esg-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; background: #2f9e63; border-radius: 2px; }
.esg-note { font-size: 13px; color: #666; line-height: 1.6; margin: 4px 0; }

/* governance: text + pyramid */
.esg-gov { display: grid; grid-template-columns: 1fr 440px; gap: 44px; align-items: center; background: #f4faf7; border-radius: 14px; padding: 30px 34px; margin: 8px 0 26px; }
.esg-gov-text p { font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 8px; }
.esg-pyramid svg { width: 100%; height: auto; }
.esg-py-t { font-family: 'Noto Sans', sans-serif; font-size: 12.5px; fill: #234; font-weight: 500; }

/* committee flow + quote */
.esg-gov2 { display: grid; grid-template-columns: 440px 1fr; gap: 44px; align-items: center; margin: 4px 0 10px; }
.esg-cflow { display: grid; grid-template-columns: 1fr 34px 1fr; grid-template-rows: auto 28px auto; align-items: center; justify-items: stretch; gap: 6px; }
.esg-cbox { border: 1px solid #d7e7df; border-bottom: 3px solid #2c6864; background: #eef6ef; border-radius: 3px; box-shadow: 2px 3px 6px rgba(0,0,0,.07); padding: 16px 12px; text-align: center; font-size: 16px; line-height: 1.35; color: #2f4f4a; font-weight: 500; min-height: 84px; display: flex; align-items: center; justify-content: center; }
.esg-carrow { color: #2c6864; text-align: center; font-size: 22px; }
.esg-carrow--top { grid-column: 2; grid-row: 1; }
.esg-carrow--left { grid-column: 1; grid-row: 2; }
.esg-carrow--right { grid-column: 3; grid-row: 2; }
.esg-carrow--bot { grid-column: 2; grid-row: 3; }
.esg-cflow .esg-cbox:nth-child(1) { grid-column: 1; grid-row: 1; }
.esg-cflow .esg-cbox:nth-child(3) { grid-column: 3; grid-row: 1; }
.esg-cflow .esg-cbox:nth-child(6) { grid-column: 1; grid-row: 3; }
.esg-cflow .esg-cbox:nth-child(8) { grid-column: 3; grid-row: 3; }
.esg-quote { font-family: 'Noto Sans', serif; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.4; color: #2f9e63; border: 0; margin: 0; padding: 0 0 0 18px; border-left: 3px solid #2f9e63; font-weight: 600; }
.esg-quote--full {font-family: 'Noto Sans', serif; margin: 34px 0; padding: 0 0 0 40px; border-left: 0; position: relative; }
.esg-quote--full::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 26px; height: 3px; background: #2f9e63; }

/* the process band + oversight grid */
.esg-process { margin: 10px 0 20px; }
.esg-process-band { background: #2f7d6b; color: #fff; text-align: center; font-weight: 700; font-size: 16px; padding: 11px; border-radius: 4px 4px 0 0; }
.esg-process-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #dbe8e2; border-top: 0; position: relative; }
.esg-process-body p { font-size: 16px;; line-height: 1.6; color: #444; margin: 0; padding: 20px 46px 20px 22px; }
.esg-process-body p:first-of-type { border-right: 1px solid #dbe8e2; }
.esg-process-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #2f9e63; font-size: 24px; background: #fff; padding: 0 4px; }

.esg-oversight { display: grid; gap: 20px; margin: 6px 0 10px; }
.esg-ov-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 20px; align-items: stretch; }
.esg-ov-lbl { background: #c7e1ce; border-radius: 3px; box-shadow: 3px 3px 6px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px 18px; font-weight: 700; font-size: 16px; line-height: 1.3; color: #2c6864; }
.esg-ov-cell { background: #eaf4ec; border-bottom: 3px solid #2c6864; box-shadow: 2px 3px 6px rgba(0,0,0,.06); padding: 18px 20px; font-size: 16px; line-height: 1.55; color: #33403b; }
.esg-ov-cell ul { margin: 0; padding-left: 0; list-style: none; }
.esg-ov-cell ul li { position: relative; padding-left: 18px; margin-bottom: 7px; }
.esg-ov-cell ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #2c6864; }
.esg-ov-cell p { margin: 0 0 6px; }
.esg-ov-cell h5, .esg-ov-full h5 { font-size: 16px; font-weight: 700; letter-spacing: .3px; color: #1a3a35; margin: 0 0 6px; }
.esg-ov-full {font-family: 'Noto Sans', serif; background: #eaf4ec; border-bottom: 3px solid #2c6864; box-shadow: 2px 3px 6px rgba(0,0,0,.06); padding: 18px 20px; font-size: 16px; line-height: 1.55; color: #33403b; }
.esg-ov-full p { margin: 0; }

/* policy cards */
.esg-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 16px 0 26px; }
.esg-pcard { border: 1px solid #e6e6e6; border-radius: 10px; padding: 22px 22px 24px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.04); display: flex; flex-direction: column; }
.esg-pcard-title { font-family: 'Noto Sans', serif; font-size: 18px; font-weight: 700; color: #0f7b6c; margin: 0 0 10px; line-height: 1.25; }
.esg-pcard-desc { font-size: 16px; line-height: 1.55; color: #444; margin: 0 0 16px; }
.esg-pcard-lbl { display: block; font-size: 16px; font-weight: 700; color: #2f9e63; margin: 8px 0 8px; }
.esg-stk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.esg-stk { display: inline-flex; align-items: center; justify-content: center; }
.esg-stk img { width: 34px; height: 34px; object-fit: contain; display: block; }
.esg-bcode-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.esg-bcode { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border: 1.5px solid #2f9e63; border-radius: 4px; color: #16594c; font-size: 13px; font-weight: 700; }

/* legends */
.esg-legend { background: #eaf4ec; border-bottom: 3px solid #2c6864; box-shadow: 2px 3px 6px rgba(0,0,0,.06); border-radius: 3px; padding: 22px 26px; }
.esg-legend h4 {font-family: 'Noto Sans', serif; font-size: 16px; font-weight: 700; color: #1a3a35; margin: 0 0 16px; }
.esg-legend ul { list-style: none; margin: 0; padding: 0; }
/* Stakeholder Groups legend fills the empty last cell of the policy-cards grid */
.esg-legend--stk { padding: 22px 24px; }
.esg-legend-stk { display: grid; grid-template-columns: 1fr; gap: 4px; }
/* Board Committee legend spans full width below the cards */
.esg-legend--com { margin: 24px 0 30px; }
.esg-legend-com { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 40px; }
.esg-legend-stk li, .esg-legend-com li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #333; margin-bottom: 6px; }
.esg-legend-stk .esg-stk img { width: 30px; height: 30px; }
.esg-legend-com li { line-height: 1.35; }

/* figures */
.esg-figure { margin: 10px 0 30px; }
.esg-figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.esg-figure--wide img { max-height: 420px; object-fit: cover; }

/* environmental policy coverage boxes */
.esg-covbox-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 24px 0; background: #eaf4ec; padding: 34px 30px; border-radius: 3px; }
.esg-covbox { background: #fff; border-bottom: 3px solid #2c6864; box-shadow: 4px 5px 9px rgba(0,0,0,.10); border-radius: 2px; min-height: 236px; display: flex; flex-direction: column; }
.esg-covbox-h { align-self: flex-start; background: #4fae71; color: #fff; font-weight: 700; font-size: 16px; padding: 14px 18px; line-height: 1.3; margin: 0 30px 18px 0; }
.esg-covbox-b { padding: 0 18px 20px; font-size: 16px; line-height: 1.55; color: #444; }
.esg-covbox-big { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: #0f7b6c; }

/* cert blocks */
.esg-certs { display: grid; gap: 4px; margin: 18px 0 26px; }
.esg-cert { border-bottom: 1px solid #e6e6e6; padding: 14px 0 16px; }
.esg-cert h4 { font-family: 'Noto Sans', serif; font-size: 19px; font-weight: 700; color: #2f9e63; margin: 0 0 6px; }
.esg-cert p { font-size: 16px; line-height: 1.6; color: #444; margin: 0; }
.esg-cert p::before { content: ""; display: inline-block; width: 16px; height: 4px; background: #2f9e63; vertical-align: middle; margin: -2px 10px 0 0; }

/* gensuite callout */
.esg-callout { border: 1px solid #2c6864; border-radius: 2px; background: #fff; box-shadow: 7px 8px 0 0 #dcefe6; padding: 28px 32px; margin: 30px 0 40px; }
.esg-callout h3 { font-family: 'Noto Sans', serif; font-size: 21px; font-weight: 700; color: #2c6864; margin: 0 0 12px; }
.esg-callout p { font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 12px; }
.esg-callout ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.esg-callout li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: #444; }
.esg-callout li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; background: #2c6864; }
.esg-callout.esegcallcolrgren li,.esg-callout.esegcallcolrgren p{
    color: #2c6864;
}
/* non-compliance table */
.esg-nc-wrap { overflow-x: auto; margin: 12px 0 10px; }
.esg-nc { width: 100%; border-collapse: collapse; min-width: 720px; }
.esg-nc th, .esg-nc td { padding: 13px 16px; font-size: 16px; text-align: center; border-bottom: 1px solid #e6e6e6; color: #333; }
.esg-nc thead th { font-weight: 700; color: #1a1a1a; border-bottom: 2px solid #2f7d6b; }
.esg-nc .esg-nc-lbl { text-align: left; font-weight: 600; color: #1a1a1a; }
.esg-nc .esg-nc-hl { background: #eef6f2; font-weight: 600; }
.esg-nc thead .esg-nc-hl { background: #2f7d6b; color: #fff; border-radius: 4px 4px 0 0; }

/* 2030 target tables */
.esg-ttable-wrap { overflow-x: auto; margin: 18px 0 24px; }
.esg-ttable { width: 100%; border-collapse: collapse; min-width: 720px; }
.esg-tt-band th { background: #2f7d6b; color: #fff; text-align: left; font-size: 16px; font-weight: 700; padding: 12px 16px; vertical-align: middle; }
.esg-tt-band .esg-tt-cap { width: 42%; }
.esg-tt-band th:last-child { text-align: left; }
.esg-tt-sdg { margin-top: 8px; }
.esg-tt-caprow td { background: #eaf3ef; padding: 10px 16px; font-size: 16px; font-weight: 700; color: #16594c; border-bottom: 1px solid #dbe8e2; }
.esg-tt-cap2 { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.esg-cap { display: inline-flex; align-items: center; gap: 8px; }
.esg-cap img { width: 30px; height: 30px; object-fit: contain; }
.esg-tt-head th { background: #f4faf7; text-align: left; font-size: 16px; font-weight: 700; color: #16594c; padding: 11px 16px; border-bottom: 2px solid #2f7d6b; vertical-align: bottom; }
.esg-tt-head th:not(:first-child) { text-align: center; width: 15%; }
.esg-ttable tbody td { padding: 10px 16px; font-size: 16px; color: #333; border-bottom: 1px solid #ececec; text-align: center; }
.esg-ttable tbody td.esg-ind { text-align: left; color: #1a1a1a; }
.esg-ttable tbody tr:nth-child(even) td { background: #fafcfb; }

/* sdg tiles */
.esg-sdg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.esg-sdg { display: inline-flex; }
.esg-sdg img { width: 54px; height: 54px; display: block; }

/* frameworks list */
.esg-frameworks { display: grid; gap: 0; margin-top: 12px; }
.esg-fw-row { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center; padding: 20px 0; border-bottom: 1px solid #ececec; }
.esg-fw-logo { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.esg-fw-logo img { max-width: 150px; max-height: 90px; width: auto; height: auto; }
.esg-fw-text { font-family: 'Noto Sans', serif; font-size: 18px; font-weight: 700; color: #424089; line-height: 1.3; text-align: center; }
.esg-fw-list { margin: 0; padding-left: 0; list-style: none; }
.esg-fw-list li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 16px;; line-height: 1.6; color: #444; }
.esg-fw-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; background: #2f9e63; border-radius: 2px; }

/* responsive */
@media (max-width: 991px) {
    .esg-gov, .esg-gov2 { grid-template-columns: 1fr; gap: 26px; }
    .esg-pyramid { max-width: 440px; margin: 0 auto; }
    .esg-pcards { grid-template-columns: repeat(2, 1fr); }
    .esg-ov-row { grid-template-columns: 160px 1fr 1fr; }
    .esg-legend-com { grid-template-columns: 1fr; }
    .esg-covbox-row { grid-template-columns: 1fr; }
    .esg-hero-bird { display: none; }
}
@media (max-width: 600px) {
    .esg-pcards { grid-template-columns: 1fr; }
    .esg-ov-row { grid-template-columns: 1fr; }
    .esg-process-body { grid-template-columns: 1fr; }
    .esg-process-body p:first-of-type { border-right: 0; border-bottom: 1px solid #dbe8e2; }
    .esg-process-arrow { transform: translate(-50%, -50%) rotate(-90deg); }
    .esg-legend-stk { grid-template-columns: 1fr; }
    .esg-fw-row { grid-template-columns: 1fr; gap: 12px; text-align: center; }
    .esg-fw-list { text-align: left; }
}

/* ==========================================================================
   ENVIRONMENT — Climate Change Report (.ecc-*)  — 8-page chapter, generated
   ========================================================================== */
.ecc-hero { height: 100vh; height: 100dvh; background: #2c6864; overflow: hidden; display: flex; flex-direction: column; }
.ecc-hero--sub { height: auto; }
.ecc-hero .container { padding-top: 130px; padding-bottom: 24px; flex: 0 0 auto; }
.ecc-hero--sub .container { padding-bottom: 40px; }
.ecc-eyebrow { display: block; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #a9d6c6; margin-bottom: 14px; }
.ecc-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.08; color: #d8efe6; margin: 0; max-width: 720px; }
.ecc-subtitle { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #bfe3d7; margin: 18px 0 0; max-width: 620px; }
.ecc-hero-figure { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ecc-hero-illus { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; display: block; }
@media (max-width: 991px) { .ecc-hero .container { padding-top: 110px; } }

/* sub-nav */
.ecc-nav { background: #fff; border-bottom: 1px solid #e2ece7; position: sticky; top: 92px; z-index: 40; transition: top .4s ease; }
/* When the floating header slides away (scroll down), the sticky sub-nav
   moves up to the very top; when the header slides back in (scroll up) it
   drops below it so the two never overlap. */
body.hdr-hidden .ecc-nav, body.hdr-hidden .csr-nav { top: 0; }
.ecc-nav-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; }
.ecc-nav-link { flex: 0 0 auto; padding: 9px 16px; border-radius: 40px; font-size: 16px; font-weight: 600; color: #33403b; white-space: nowrap; transition: background .2s, color .2s; }
.ecc-nav-link:hover { background: #eaf4ec; color: #16594c; text-decoration: none; }
.ecc-nav-link.is-active { background: #2c6864; color: #fff; }

/* body */
.ecc-body { background: #fff; padding: 40px 0 90px; }
.ecc-p { font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 16px; }
.ecc-p strong { color: #1a3a35; }
.ecc-subhead { font-family: 'Noto Sans', serif; font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; color: #424089; margin: 44px 0 14px; }
.ecc-list { margin: 0 0 16px; padding-left: 0; list-style: none; }
.ecc-list li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 16px; line-height: 1.7; color: #444; }
.ecc-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; background: #2f9e63; }
.ecc-note { font-size: 13px; color: #666; margin: 4px 0; }

/* dark-teal quote panel with bird + quotation mark */
.ecc-quotepanel { position: relative; background: #2c6864; border-radius: 8px; padding: 40px 44px; margin: 34px 0; overflow: hidden; }
.ecc-quotepanel-bird { position: absolute; right: 20px; bottom: 10px; width: 300px; max-width: 45%; opacity: .5; }
.ecc-quotepanel-mark { width: 52px; height: auto; margin-bottom: 14px; display: block; }
.ecc-quotepanel p { position: relative; font-family: 'Noto Sans', serif; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 600; color: #fff; margin: 0;  }

/* TCFD four-pillar disclosures diagram */
.ecc-tcfd { margin: 30px 0 10px; }
.ecc-tcfd-band { background: #2f7d6b; color: #fff; font-weight: 700; text-align: center; font-size: 16px; padding: 12px 16px; border-radius: 4px; }
.ecc-tcfd-img { display: block; width: 100%; max-width: 820px; height: auto; margin: 18px auto 0; }

/* green pull-quote */
.ecc-quote { font-family: 'Noto Sans', serif; font-size: clamp(19px, 2vw, 25px); line-height: 1.42; color: #2f9e63; border: 0; margin: 30px 0; padding: 0 0 0 40px; position: relative; font-weight: 600;  }
.ecc-quote::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 26px; height: 3px; background: #2f9e63; }

/* governance oversight panel */
.ecc-oversight { background: #eef6f2; border-radius: 12px; padding: 26px 30px; margin: 26px 0; }
.ecc-oversight-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #424089; margin: 0 0 8px; }
.ecc-oversight > p { font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 18px; }
.ecc-committee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ecc-committee { background: #fff; border-bottom: 3px solid #2c6864; box-shadow: 2px 3px 6px rgba(0,0,0,.06); border-radius: 3px; overflow: hidden; }
.ecc-committee-h { background: #c7e1ce; color: #16594c; font-weight: 700; font-size: 16px;; padding: 12px 16px; }
.ecc-committee-b { padding: 14px 16px 18px; font-size: 16px; line-height: 1.6; color: #444; }

/* climate incentives — stacked infographic (Role / Incentive Plan / Climate-Related KPIs) */
.ecc-inc-wrap { background: #e8f2ea; border-radius: 10px; padding: 32px 34px; margin: 24px 0; }
.ecc-inc-block { margin-bottom: 30px; }
.ecc-inc-block:last-child { margin-bottom: 0; }
.ecc-inc-head { text-align: center; margin-bottom: 18px; }
.ecc-inc-head img { display: block; width: 56px; height: 56px; margin: 0 auto 6px; }
.ecc-inc-head h4 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; color: #2c6864; margin: 0; }
/* Role: separated icon cards */
.ecc-inc-cards { display: grid; gap: 18px; }
.ecc-inc-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ecc-inc-card { background: #fff; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 8px rgba(0,0,0,.08); padding: 22px 18px; text-align: center; }
.ecc-inc-card img { display: block; width: 46px; height: 46px; margin: 0 auto 12px; }
.ecc-inc-card span { display: block; font-size: 16px; line-height: 1.45; color: #33403b; }
/* Incentive Plan / KPIs: continuous divided bar */
.ecc-inc-bar { display: grid; background: #fff; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 8px rgba(0,0,0,.06); }
.ecc-inc-bar--3 { grid-template-columns: repeat(3, 1fr); }
.ecc-inc-bar--4 { grid-template-columns: repeat(4, 1fr); }
.ecc-inc-bar > div { padding: 22px 22px; text-align: center; font-size: 16px; line-height: 1.5; color: #33403b; border-left: 1px solid #d3e3d9; }
.ecc-inc-bar > div:first-child { border-left: none; }
@media (max-width: 700px) {
\t.ecc-inc-cards--3, .ecc-inc-bar--3, .ecc-inc-bar--4 { grid-template-columns: 1fr; }
\t.ecc-inc-bar > div { border-left: none; border-top: 1px solid #d3e3d9; }
\t.ecc-inc-bar > div:first-child { border-top: none; }
}

/* chart placeholder + generic in-progress */
.ecc-chart-ph { border: 2px dashed #9fc9b8; border-radius: 8px; background: #f4faf7; color: #16594c; font-weight: 600; text-align: center; padding: 48px 20px; margin: 20px 0; }
.ecc-ph { border: 2px dashed #cdd8d3; border-radius: 8px; padding: 40px; text-align: center; color: #666; }

@media (max-width: 767px) {
    .ecc-committee-grid { grid-template-columns: 1fr; }
    .ecc-quotepanel-bird { display: none; }
}

/* ECC — strategy & shared content components */
.ecc-h3 { font-family: 'Noto Sans', serif; font-size: 20px; font-weight: 700; color: #424089; margin: 26px 0 10px; }
.ecc-table-wrap { overflow-x: auto; margin: 20px 0 24px; }
.ecc-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.ecc-table thead th { background: #2f7d6b; color: #fff; text-align: left; font-size: 16px; font-weight: 700; padding: 12px 16px; }
.ecc-table tbody td { padding: 11px 16px; font-size: 16px; color: #444; border-bottom: 1px solid #e6e6e6; }
.ecc-table tbody tr:nth-child(even) td { background: #f6faf8; }
.ecc-table tbody td:first-child { font-weight: 600; color: #1a3a35; }
.ecc-feas { display: inline-block; padding: 2px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.ecc-feas--high { background: #d6efdf; color: #1c7a45; }
.ecc-feas--medium { background: #fdeecf; color: #a9761a; }
.ecc-feas--low { background: #fbe0dd; color: #b23a2c; }
.ecc-feature { background: #eef6f2; border: 1px solid #d7e8df; border-radius: 8px; padding: 30px 34px; margin: 30px 0; }
.ecc-feature h3 { font-family: 'Noto Sans', serif; font-size: 21px; font-weight: 700; color: #424089; margin: 0 0 12px; }
.ecc-feature h4 { font-family: 'Noto Sans', serif; font-size: 16px; font-weight: 700; color: #1a3a35; margin: 18px 0 8px; }
.ecc-feature p { font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 8px; }
.ecc-feature ul { margin: 0; padding-left: 0; list-style: none; }
.ecc-feature li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: #444; }
.ecc-feature li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; background: #2f9e63; }
.ecc-infobox { background: #fff; border: 1px solid #cfe3da; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 6px rgba(0,0,0,.05); padding: 22px 26px; margin: 22px 0; }
.ecc-infobox h4 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #1a3a35; margin: 0 0 12px; }
.ecc-infobox ul { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 34px; }
.ecc-infobox li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 16px;; line-height: 1.55; color: #444; break-inside: avoid; }
.ecc-infobox li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: #2f9e63; }
@media (max-width: 600px) { .ecc-infobox ul { columns: 1; } }

/* ECC — risk management: scenario/methodology cards, port-adaptation table, transition-risk register */
.ecc-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 24px; }
.ecc-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.ecc-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
/* plain variant — white cards with soft green shadow (methodology / assumptions) */
.ecc-cardgrid--plain .ecc-card { background: #fff; border: 1px solid #e0ede6; border-radius: 6px; box-shadow: 4px 6px 15px rgba(0,177,107,.18); color: #33403b; }
.ecc-cardgrid--plain .ecc-card strong { display: inline; font-family: 'Noto Sans', Arial, sans-serif; font-size: inherit; font-weight: 700; color: #1a3a35; margin: 0; }
.ecc-card { background: #eef6f2; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 6px rgba(0,0,0,.05); padding: 18px 20px; font-size: 16px; line-height: 1.55; color: #33403b; }
.ecc-card strong { display: block; font-family: 'Playfair Display', serif; font-size: 18px; color: #2c6864; margin-bottom: 6px; }
.ecc-card span { display: block; font-size: 13px; color: #555; }
@media (max-width: 767px) { .ecc-cardgrid--3, .ecc-cardgrid--2 { grid-template-columns: 1fr; } }

/* titled callout box — white with green border + soft green shadow (Climate Scenario Analysis, Transparency in Approach) */
.ecc-callout { background: #fff; border: 1px solid #5cbd8b; border-radius: 8px; padding: 22px 26px; margin: 24px 0; box-shadow: 5px 6px 16px rgba(0,177,107,.20); }
.ecc-callout h4 { font-size: 18px; font-weight: 700; color: #2f9e63; margin: 0 0 10px; }
.ecc-callout p { font-size: 16px;; line-height: 1.6; color: #33403b; margin: 0; }

/* climate scenarios — large typographic headings, no box */
.ecc-scenarios { margin: 26px 0 10px; }
.ecc-scenario { padding: 14px 0; border-bottom: 1px solid #e3ece6; }
.ecc-scenario:last-child { border-bottom: none; }
.ecc-scenario h4 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 30px; line-height: 1.1; color: #2f9e63; margin: 0 0 4px; }
.ecc-scenario p { font-size: 13px; color: #555; margin: 0; }

/* port adaptation table */
.ecc-padapt-wrap { overflow-x: auto; margin: 20px 0 30px; }
.ecc-padapt { width: 100%; border-collapse: collapse; min-width: 900px; }
.ecc-padapt thead th { background: #4fae71; color: #fff; text-align: left; font-size: 16px; font-weight: 700; padding: 10px 14px; border: 1px solid #cfe3da; }
.ecc-padapt thead .ecc-padapt-plan { text-align: center; background: #3f9c62; }
.ecc-padapt thead th.ecc-padapt-port { vertical-align: middle; }
.ecc-padapt tbody td { padding: 14px 14px; font-size: 13px; line-height: 1.5; color: #444; border: 1px solid #e0ebe5; vertical-align: top; background: #f6faf8; }
.ecc-padapt tbody td.ecc-padapt-port { width: 130px; font-weight: 700; color: #16594c; background: #eef6f2; font-size: 16px; }
.ecc-padapt ul { margin: 0; padding-left: 0; list-style: none; }
.ecc-padapt li { position: relative; padding-left: 16px; margin-bottom: 7px; }
.ecc-padapt li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: #2f9e63; }

/* transition-risk register cards */
.ecc-trisk-list { display: grid; gap: 20px; margin: 18px 0 10px; }
.ecc-trisk { display: grid; grid-template-columns: 250px 1fr; gap: 0; border: 1px solid #dbe8e2; border-radius: 6px; overflow: hidden; }
.ecc-trisk-side { background: #eef6f2; padding: 20px 22px; }
.ecc-trisk-cat { display: inline-block; padding: 4px 14px; border-radius: 3px; font-size: 12.5px; font-weight: 700; color: #fff; background: #4fae71; margin-bottom: 14px; }
.ecc-trisk-risklbl, .ecc-trisk-driverlbl { font-size: 12.5px; font-weight: 700; color: #16594c; margin-top: 6px; }
.ecc-trisk-risk { font-size: 16px; font-weight: 600; color: #1a3a35; margin: 4px 0 12px; line-height: 1.4; }
.ecc-trisk-driver { font-size: 16px; color: #444; margin: 4px 0 0; }
.ecc-trisk-body { display: grid; grid-template-columns: repeat(3, 1fr); }
.ecc-trisk-col { padding: 18px 20px; border-left: 1px solid #e6e6e6; }
.ecc-trisk-h { display: block; font-size: 13px; font-weight: 700; color: #16594c; background: #eaf4ec; padding: 6px 10px; border-radius: 3px; margin-bottom: 12px; }
.ecc-trisk-col ul { margin: 0; padding-left: 0; list-style: none; }
.ecc-trisk-col li { position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: #444; }
.ecc-trisk-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: #2f9e63; }
@media (max-width: 900px) {
    .ecc-trisk { grid-template-columns: 1fr; }
    .ecc-trisk-body { grid-template-columns: 1fr; }
    .ecc-trisk-col { border-left: 0; border-top: 1px solid #e6e6e6; }
}

/* ECC — "This approach considers" 5-card row */
/* "This approach considers" — green-bracket framed cells (rebuilt from env-strategy.svg) */
.ecc-considers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 22px 0 28px; }
.ecc-considers > div { border: 1px solid #b8e2cd; border-bottom: 3px solid #00b16b; border-radius: 3px; padding: 16px 16px 18px; font-size: 16px; line-height: 1.5; color: #33403b; background: #fff; }
@media (max-width: 991px) { .ecc-considers { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .ecc-considers { grid-template-columns: 1fr; } }

/* driver box — green header bar + green-framed cells (Drivers of Improvement) */
.ecc-drivers { margin: 26px 0 30px; }
.ecc-drivers-head { background: #4fae71; color: #fff; font-weight: 700; font-size: 16px; text-align: center; padding: 13px 22px; border-radius: 6px; box-shadow: 2px 3px 8px rgba(0,0,0,.10); }
.ecc-drivers-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.ecc-drivers-cells > div { border: 1px solid #bfe3ce; border-radius: 3px; padding: 30px 18px; text-align: center; font-size: 16px; line-height: 1.5; color: #33403b; }
@media (max-width: 767px) { .ecc-drivers-cells { grid-template-columns: 1fr; gap: 14px; } }

/* init box — green tint container, title, white cards with teal bottom bar (Key initiatives) */
.ecc-initbox { background: #e8f2ea; border-radius: 8px; padding: 30px 32px; margin: 26px 0; }
.ecc-initbox-title { font-size: 18px; font-weight: 700; color: #1a3a35; margin: 0 0 22px; }
.ecc-initbox-intro { font-size: 16px;; line-height: 1.6; color: #33403b; margin: 0 0 22px; }
.ecc-initbox-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ecc-initbox-cards--2 { grid-template-columns: repeat(2, 1fr); }
.ecc-initbox-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) { .ecc-initbox-cards--4 { grid-template-columns: 1fr 1fr; } }

/* header cards — tint container, white cards with sage header bar + teal bottom bar */
.ecc-hcards { background: #e8f2ea; border-radius: 8px; padding: 30px 32px; margin: 24px 0; }
.ecc-hcards-title { text-align: center; font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0 0 22px; }
.ecc-hcards-grid { display: grid; gap: 24px; }
.ecc-hcards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ecc-hcards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ecc-hcard { background: #fff; border-bottom: 3px solid #2c6864; border-radius: 3px; box-shadow: 2px 3px 8px rgba(0,0,0,.08); overflow: hidden; }
.ecc-hcard-head { background: #c7e1ce; font-weight: 700; font-size: 16px; color: #1a3a35; padding: 13px 18px; }
.ecc-hcard-body { padding: 16px 18px 20px; font-size: 16px; line-height: 1.55; color: #33403b; }
@media (max-width: 767px) { .ecc-hcards-grid--2, .ecc-hcards-grid--3 { grid-template-columns: 1fr; } }

/* numbered hierarchy — tint container, centred title, 2x2 with bracketed green numbers + dividers */
.ecc-hier { background: #e8f2ea; border-radius: 8px; padding: 30px 34px; margin: 26px 0; }
.ecc-hier-title { text-align: center; font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0 0 18px; }
.ecc-hier-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ecc-hier-item { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; }
.ecc-hier-item:nth-child(1), .ecc-hier-item:nth-child(2) { border-bottom: 1px solid #bcdcc8; }
.ecc-hier-item:nth-child(odd) { border-right: 1px solid #bcdcc8; }
.ecc-hier-num { flex: none; font-family: 'Noto Sans', Arial, sans-serif; font-size: 30px; font-weight: 400; color: #4fae71; line-height: 1; padding: 2px 0 7px 9px; border-left: 2px solid #4fae71; border-bottom: 2px solid #4fae71; }
.ecc-hier-txt { font-size: 16px;; line-height: 1.5; color: #33403b; padding-top: 3px; }
.ecc-hier-txt strong { font-weight: 700; color: #1a3a35; }
@media (max-width: 767px) { .ecc-hier-grid { grid-template-columns: 1fr; } .ecc-hier-item:nth-child(odd) { border-right: none; } .ecc-hier-item:nth-child(3) { border-bottom: 1px solid #bcdcc8; } }

/* paragraph + big-number highlight row (water intensity target) */
.ecc-target-row { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: start; margin: 16px 0 26px; }
.ecc-target-row > p { margin: 0; }
.ecc-bignum { min-width: 190px; }
.ecc-bignum-pre, .ecc-bignum-post { display: block; font-size: 16px; color: #555; line-height: 1.4; }
.ecc-bignum-val { display: block; font-family: 'Noto Sans', Arial, sans-serif; font-size: 40px; font-weight: 700; color: #2f9e63; line-height: 1.1; margin: 3px 0; }
@media (max-width: 767px) { .ecc-target-row { grid-template-columns: 1fr; gap: 14px; } }
.ecc-initcard { background: #fff; border-bottom: 3px solid #2c6864; border-radius: 3px; box-shadow: 2px 3px 8px rgba(0,0,0,.07); padding: 22px; font-size: 16px;; line-height: 1.55; color: #33403b; }
.ecc-initcard strong { font-weight: 700; color: #1a3a35; }
@media (max-width: 767px) { .ecc-initbox-cards { grid-template-columns: 1fr; } }

/* ECC — strategy: green-tint boxes, 2-col list, scope-3 levers, feature grid */
.ecc-feature-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; margin-top: 8px; }
.ecc-feature-grid h4 { margin-top: 0; }
@media (max-width: 767px) { .ecc-feature-grid { grid-template-columns: 1fr; gap: 12px; } }

.ecc-greenbox { background: #eaf4ec; border-radius: 6px; padding: 24px 28px; margin: 20px 0; }
.ecc-greenbox h4 { font-family: 'Noto Sans', serif; font-size: 19px; font-weight: 700; color: #1a3a35; margin: 0 0 14px; }
.ecc-greenbox ul { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 40px; }
.ecc-greenbox li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 16px;; line-height: 1.55; color: #444; break-inside: avoid; }
.ecc-greenbox li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; background: #2f9e63; }
.ecc-greenbox-note { columns: 1; font-size: 16px; line-height: 1.6; color: #444; margin: 14px 0 ; }
@media (max-width: 600px) { .ecc-greenbox ul { columns: 1; } }

.ecc-collist { margin: 0 0 20px; padding-left: 0; list-style: none; columns: 2; column-gap: 40px; }
.ecc-collist li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 16px; line-height: 1.55; color: #444; break-inside: avoid; }
.ecc-collist li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: #2f9e63; }
@media (max-width: 600px) { .ecc-collist { columns: 1; } }

.ecc-levers { border: 1px solid #bcdccb; border-radius: 8px; padding: 22px 26px; margin: 20px 0; }
.ecc-levers ul { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 40px; }
.ecc-levers li { position: relative; padding-left: 18px; margin-bottom: 12px; font-size: 16px; line-height: 1.55; color: #444; break-inside: avoid; }
.ecc-levers li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #2f9e63; }
.ecc-levers strong { color: #2f9e63; font-weight: 700; }
@media (max-width: 767px) { .ecc-levers ul { columns: 1; } }

/* ECC — charts + net-zero callout (energy/water/wastewater/waste pages) */
.ecc-chart { margin: 6px 0 30px; text-align: left; }
.ecc-chart img { display: block; width: 100%; max-width: 50%; height: auto; margin: 0; }
@media (max-width: 900px) { .ecc-chart img { max-width: 100%; } }
/* two charts side by side */
.ecc-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; margin: 6px 0 30px; }
.ecc-chart-row .ecc-chart { margin: 6px 0 0; }
.ecc-chart-row .ecc-chart img { max-width: 100%; }
@media (max-width: 900px) { .ecc-chart-row { grid-template-columns: 1fr; gap: 20px; } }
.ecc-chart figcaption { font-size: 13px; color: #666; margin-top: 8px; }
.ecc-netzero { display: inline-block; background: #eaf4ec; border-radius: 8px; padding: 20px 34px; margin: 6px 0 20px; text-align: center; }
.ecc-netzero-big { display: block; font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: #4fae71; line-height: 1; }
.ecc-netzero-sub { display: block; font-size: 16px; color: #16594c; margin-top: 4px; }
.ecc-note { font-size: 13px; color: #666; margin: 4px 0 10px; }

/* ECC — big-number stat grid (Material-Wise Energy, waste disposal summary) */
.ecc-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; margin: 16px 0 26px; padding-top: 14px; border-top: 1px solid #d8e6df; }
.ecc-stat { display: flex; flex-direction: column; }
.ecc-stat-val { font-family: 'Noto Sans', Arial, sans-serif; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; color: #2f9e63; line-height: 1.05; }
.ecc-stat-lbl { font-size: 16px; color: #555; margin-top: 4px; }
@media (max-width: 767px) { .ecc-statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ecc-statgrid { grid-template-columns: 1fr; } }

/* ECC — definition cards (physical vs transition risks) */
.ecc-defcards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0 24px; }
.ecc-defcards > div { background: #fff; border: 1px solid #e0ede6; border-radius: 6px; box-shadow: 4px 6px 15px rgba(0,177,107,.18); padding: 24px 26px; font-size: 16px; line-height: 1.6; color: #33403b; }
@media (max-width: 767px) { .ecc-defcards { grid-template-columns: 1fr; } }

/* ECC — transition-risk score key + per-column impact square */
.ecc-sq { display: inline-block; width: 13px; height: 13px; border-radius: 2px; vertical-align: middle; }
.ecc-risklegend { margin: 6px 0 18px; }
.ecc-risklegend > strong { display: block; font-size: 16px; color: #1a3a35; margin-bottom: 10px; }
.ecc-risklegend > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ecc-risklegend-item { font-size: 13px; color: #333; display: inline-flex; align-items: center; gap: 7px; }
.ecc-trisk-impactlbl { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: #16594c; padding: 12px 20px 0; }
.ecc-trisk-impact { display: block; font-size: 12.5px; color: #555; margin-bottom: 10px; }

/* ================= BIODIVERSITY PAGE (.bio-*) ================= */
.bio-hero { position: relative; background: #2c6864; overflow: hidden; min-height: 100vh; }
.bio-hero-illus { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: calc(100vh - 310px); max-height: calc(100dvh - 310px); object-fit: contain; object-position: right bottom; display: block; z-index: 0; }
.bio-hero .container { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 60px; }
.bio-eyebrow { display: block; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #cfe7d8; margin-bottom: 14px; }
.bio-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 54px); font-weight: 700; line-height: 1.08; color: #7ed09b; margin: 0 0 26px; max-width: 780px; }
.bio-lead { font-size: 16px; line-height: 1.75; color: #33403b; margin: 0 0 40px; max-width: none; }
.bio-body { background: #fff; padding: 54px 0 48px; }
.bio-p { font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 16px; }
.bio-subhead { font-family: 'Noto Sans', serif; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; color: #424089; margin: 34px 0 14px; }
.bio-h3 { font-family: 'Noto Sans', serif; font-size: 20px; font-weight: 700; color: #424089; margin: 26px 0 10px; }
.bio-h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #424089; margin: 20px 0 8px; }

/* Key Highlights dashboard */
.bio-highlights {  padding-top: 26px; }
.bio-hl-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1a3a35; margin: 0 0 22px; }
.bio-hl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; margin-bottom: 40px; }
.bio-stat { border-top: 2px solid #d3e6da; padding-top: 12px; }
.bio-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: #2f9e63; line-height: 1; margin: 0 0 8px; }
.bio-stat-val span { font-size: .5em; font-weight: 700; color: #2f9e63; }
.bio-stat-lbl { font-size: 16px; line-height: 1.4; color: #444; margin: 0; }
.bio-stat-lbl::before { content: ""; display: inline-block; width: 16px; height: 4px; background: #2f9e63; vertical-align: middle; margin: -2px 10px 0 0; }
.bio-hl-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.bio-hl-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1a3a35; margin: 0 0 14px; }
.bio-hl-col .bio-hl-h + .bio-hl-h { margin-top: 22px; }
.bio-sdg + .bio-hl-h { margin-top: 24px; }
.bio-sdg { margin-bottom: 2px; }
/* material topics */
.bio-mt-list { display: flex; flex-direction: column; gap: 12px; }
.bio-mt { display: flex; align-items: center; gap: 12px; }
.bio-mt-code { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1.5px solid #424089; border-radius: 4px; font-weight: 700; font-size: 16px; color: #424089; }
.bio-mt-lbl { font-size: 16px; line-height: 1.35; color: #333; }
/* sdg */
.bio-sdg { display: flex; flex-wrap: wrap; gap: 8px; }
.bio-sdg img { width: 52px; height: 52px; display: block; }
.bio-gri { font-size: 16px; color: #333; margin: 4px 0 0; }
/* capitals */
.bio-caps { display: flex; flex-direction: column; gap: 16px; }
.bio-cap { display: flex; align-items: center; gap: 12px; }
.bio-cap img { width: 30px; height: 30px; flex: none; }
.bio-cap span { font-size: 16px; color: #333; }

/* full-width illustration banner */
.bio-banner { background: #2c6864; line-height: 0; }
.bio-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 991px) {
  .bio-hl-stats { grid-template-columns: repeat(2, 1fr); }
  .bio-hl-meta { grid-template-columns: 1fr; gap: 24px; }
}

/* biodiversity — policy cards (green header + numbered list) */
.bio-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 20px 0 30px; align-items: start; }
.bio-pcard { background: #fff; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 8px rgba(0,0,0,.08); overflow: hidden; }
.bio-pcard-head { background: #4fae71; color: #fff; font-weight: 700; font-size: 16px; padding: 12px 18px; }
.bio-pcard-body { margin: 0; padding: 16px 18px 18px 36px; font-size: 16px; line-height: 1.55; color: #33403b; }
.bio-pcard-body li { margin-bottom: 10px; }
.bio-pcard-body li:last-child { margin-bottom: 0; }
.bio-pcard-body strong { color: #1a3a35; }
/* two pull-quotes side by side */
.bio-quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin: 30px 0; }
.bio-quote-row .ecc-quote { margin: 0; }
/* key-elements card container title left-aligned + indigo */
.bio-hcards-title { text-align: left !important; color: #424089 !important; font-family: 'Noto Sans', serif; font-size: 20px; }
@media (max-width: 767px) { .bio-pcards { grid-template-columns: 1fr; } .bio-quote-row { grid-template-columns: 1fr; gap: 20px; } }

/* KPI table — highlight last (current FY) column */
.ecc-table--hllast thead th:last-child { background: #23554f; }
.ecc-table--hllast tbody td:last-child { background: #eef6f2; }

/* biodiversity — photo figure */
.bio-photo { margin: 26px 0; text-align: center; }
.bio-photo img { display: block; width: 100%;  height: auto; border-radius: 6px; margin: 0 auto; }
/* biodiversity — methodology step box (green tint container + vertical step cards) */
.bio-stepbox { background: #e8f2ea; border-radius: 8px; padding: 28px 30px; margin: 26px auto; max-width: 760px; }
.bio-stepbox-title { text-align: center; font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0 0 22px; }
.bio-step { display: flex; gap: 20px; align-items: flex-start; background: #fff; border-bottom: 3px solid #2c6864; border-radius: 4px; box-shadow: 2px 3px 8px rgba(0,0,0,.06); padding: 18px 22px; margin-bottom: 18px; }
.bio-step:last-child { margin-bottom: 0; }
.bio-step-n { flex: none; font-weight: 700; font-size: 16px; color: #2f9e63; min-width: 58px; padding-top: 1px; }
.bio-step-h { font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0; line-height: 1.4; }
.bio-step-body ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.bio-step-body li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.5; color: #444; margin-bottom: 5px; }
.bio-step-body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #2f9e63; }

/* biodiversity — Priority Ecosystem Services matrix */
.bio-mx-wrap { overflow-x: auto; margin: 18px 0 14px; }
.bio-mx { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 13px; }
.bio-mx thead th { background: #4fae71; color: #fff; font-weight: 700; padding: 9px 12px; text-align: center; border: 1px solid #43a267; }
.bio-mx thead th.bio-mx-cat, .bio-mx thead th.bio-mx-svc { text-align: left; vertical-align: middle; }
.bio-mx td { border: 1px solid #e2e2e2; padding: 10px 12px; vertical-align: middle; color: #333; }
.bio-mx-cat { font-weight: 700; color: #1a3a35; background: #f4faf6; white-space: nowrap; }
.bio-mx-svc { line-height: 1.35; }
.bio-mx-v { text-align: center; }
.bio-marks { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.bio-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; }
.bio-dot--high { background: #42408e; }
.bio-dot--medium { background: #00a5e4; }
.bio-dot--low { background: #975ea6; }
.bio-tri { display: inline-block; width: 0; height: 0; }
.bio-tri--pos { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #00b16b; }
.bio-tri--neg { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #8f1839; }
.bio-na { color: #888; font-size: 12px; }
.bio-mx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 10px 0 26px; font-size: 13px; color: #333; }
.bio-mx-lt { font-weight: 700; color: #1a3a35; }
.bio-lg { display: inline-flex; align-items: center; gap: 8px; }

/* matrix — "/" separator between multiple marks */
.bio-sep { color: #9aa; font-size: 12px; margin: 0 1px; }

/* biodiversity — footnote */
.bio-note { font-size: 13px; line-height: 1.5; color: #666; margin: 6px 0; }
.bio-note sup { font-weight: 700; }
/* grouped table — only the category cell is bold; sub-category/driver stay regular */
.bio-gt tbody td { vertical-align: top; }
.bio-gt tbody td:first-child { font-weight: 400; color: #444; }
.bio-gt tbody td.bio-gt-cat { font-weight: 700; color: #1a3a35; background: #f6faf8; white-space: nowrap; }
/* nature-related opportunities — green centred-header cards */
.bio-gcards { display: grid; gap: 22px; margin: 20px 0 26px; }
.bio-gcards--2 { grid-template-columns: repeat(2, 1fr); }
.bio-gcard { border: 1px solid #cfe3da; border-radius: 5px; overflow: hidden; background: #fff; }
.bio-gcard-head { background: #4fae71; color: #fff; font-weight: 700; font-size: 16px; text-align: center; padding: 11px 14px; }
.bio-gcard-body { padding: 16px 20px 20px; }
.bio-gcard-body p { margin: 0; font-size: 16px;; line-height: 1.6; color: #33403b; }
/* mitigation hierarchy — labelled sections */
.bio-mits { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; margin: 20px 0 26px; }
.bio-mit-hwrap { border-bottom: 1.5px solid #bcdcc8; margin-bottom: 12px; }
.bio-mit-head { display: inline-block; background: #e6f2ea; color: #2f9e63; font-weight: 700; font-size: 16px; padding: 6px 16px 9px; }
.bio-mit-p { font-size: 16px;; line-height: 1.6; color: #444; margin: 0 0 10px; }
.bio-mit-list { margin: 0; padding-left: 0; list-style: none; }
.bio-mit-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: #444; margin-bottom: 8px; }
.bio-mit-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #2f9e63; }
@media (max-width: 767px) { .bio-gcards--2, .bio-mits { grid-template-columns: 1fr; } }

/* biodiversity — callout box (metrics drivers) */
.bio-cbox { border: 1px solid #9fcdb4; border-radius: 6px; background: #fff; padding: 22px 26px; margin: 22px 0; max-width: 620px; }
.bio-cbox-h { font-size: 16px; font-weight: 600; color: #1a3a35; margin: 0 0 12px; }
.bio-cbox ul { margin: 0; padding-left: 0; list-style: none; }
.bio-cbox li { position: relative; padding-left: 20px; font-size: 16px;; line-height: 1.5; color: #444; margin-bottom: 9px; }
.bio-cbox li:last-child { margin-bottom: 0; }
.bio-cbox li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; background: #2f9e63; }

/* biodiversity — case-study card (green tab header + green border) */
.bio-case { position: relative; border: 1px solid #b3ddc5; border-radius: 8px; padding: 26px 28px 24px; margin: 34px 0; background: #fff; }
.bio-case-head { position: absolute; top: -17px; left: 22px; display: inline-block; background: #4fae71; color: #fff; font-weight: 700; font-size: 16px; padding: 9px 20px; border-radius: 5px; box-shadow: 2px 3px 6px rgba(0,0,0,.14); max-width: calc(100% - 44px); }
.bio-case-body { padding-top: 14px; }
.bio-case-body > .bio-p:first-child { margin-top: 0; }
.bio-case-body .ecc-quote { margin: 18px 0; }
/* Approach / Impact box */
.bio-ai { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; background: #eef6f2; border-radius: 6px; padding: 22px 26px; margin: 20px 0; }
.bio-ai-col:first-child { border-right: 1px solid #cfe3da; padding-right: 40px; }
.bio-ai-h { font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0 0 12px; }
.bio-ai-col ul { margin: 0; padding-left: 0; list-style: none; }
.bio-ai-col li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: #444; margin-bottom: 10px; }
.bio-ai-col li:last-child { margin-bottom: 0; }
.bio-ai-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #2f9e63; }
@media (max-width: 767px) { .bio-ai { grid-template-columns: 1fr; gap: 20px; } .bio-ai-col:first-child { border-right: none; padding-right: 0; } }

/* single-column approach box */
.bio-ai--one { grid-template-columns: 1fr; }
.bio-ai--one .bio-ai-col:first-child { border-right: none; padding-right: 0; }
/* Measures Taken — numbered tint cards (two columns, masonry flow) */
.bio-measures { columns: 2; column-gap: 40px; margin: 18px 0 26px; }
.bio-measure { break-inside: avoid; background: #fff; border: 1px solid #e0ede6; border-radius: 6px; box-shadow: 4px 6px 15px rgba(0,177,107,.18); padding: 18px 22px; margin-bottom: 24px; }
.bio-measure-head { margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; }
.bio-measure-n { color: #2f7dc9; font-weight: 700; font-size: 16px; flex: none; }
.bio-measure-t { color: #2f7dc9; font-weight: 700; font-size: 16px; line-height: 1.35; }
.bio-measure ul { margin: 0; padding-left: 0; list-style: none; }
.bio-measure li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: #444; margin-bottom: 8px; }
.bio-measure li:last-child { margin-bottom: 0; }
.bio-measure li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #2f9e63; }
@media (max-width: 767px) { .bio-measures { columns: 1; } }

/* impact sub-heading (Environmental and Ecological Outcomes) */
.bio-ai-sub { color: #2f7dc9; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
/* two-column layout (oil spill: key aspects | 7-point box) */
.bio-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin: 16px 0 24px; }
.bio-2col .bio-h4:first-child { margin-top: 0; }
/* numbered green box (7-Point Oil Spill Action Plan) */
.bio-numbox { background: #eef6f2; border-radius: 6px; padding: 24px 28px; }
.bio-numbox-h { text-align: center; font-weight: 700; font-size: 16px; color: #1a3a35; margin: 0 0 16px; }
.bio-numbox ol { margin: 0; padding-left: 20px; }
.bio-numbox li { font-size: 16px; line-height: 1.5; color: #444; margin-bottom: 12px; padding-left: 6px; }
.bio-numbox li:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .bio-2col { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================= */
/* ==================== HUMAN CAPITAL (.hc-*) ================== */
/* Blue palette: band #3678b4, cyan line-art #00b4d8, indigo #424089 */
/* ============================================================= */

/* ----- hero (blue full-bleed, SVG line-art at bottom) ----- */
.hc-hero { position: relative; background: #3678b4; overflow: hidden; min-height: 100vh; }

.hc-hero .container { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 60px; }
.hc-eyebrow { display: block; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #cfe8f6; margin-bottom: 14px; }
.hc-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 40px); font-weight: 700; line-height: 1.08; color: #9fd8f0; margin: 0 0 26px; max-width: 780px; }

/* ----- body ----- */
.hc-body { padding: 56px 0 70px; }
.hc-lead { font-size: 16px; line-height: 1.75; color: #33403b; margin: 0 0 40px; max-width: none; }
.hc-p { font-size: 15.5px; line-height: 1.75; color: #333; margin: 0 0 18px; }
.hc-subhead { font-family: 'Noto Sans', sans-serif; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; color: #424089; margin: 40px 0 18px; }
.hc-h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #424089; margin: 28px 0 12px; }
.hc-h4 { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #000; margin: 22px 0 10px; }

/* ----- Key Linkages box ----- */
.hc-links {  padding-top: 26px; margin-bottom: 8px; }
.hc-links-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1d3a5c; margin: 0 0 22px; }
.hc-links-grid { display: grid; grid-template-columns: 1.15fr 0.8fr 1fr; gap: 34px; align-items: start; }
.hc-links-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #444; margin: 0 0 14px; }
.hc-links-col .hc-mt-list + .hc-links-h,
.hc-links-col .hc-sdg + .hc-links-h { margin-top: 24px; }
/* material issues */
.hc-mt-list { display: flex; flex-direction: column; gap: 12px; }
.hc-mt { display: flex; align-items: center; gap: 12px; }
.hc-mt-code { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 30px; padding: 0 6px; border: 1.5px solid #424089; border-radius: 4px; font-weight: 700; font-size: 16px; color: #424089; }
.hc-mt-lbl { font-size: 16px; line-height: 1.35; color: #333; }
/* capitals */
.hc-caps { display: flex; flex-direction: column; gap: 16px; }
.hc-cap { display: flex; align-items: center; gap: 12px; }
.hc-cap img { width: 32px; height: 32px; flex: none; }
.hc-cap span { font-size: 16px; color: #333; }
/* gri */
.hc-gri { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-gri li { position: relative; padding-left: 16px; font-size: 16px;; color: #333; }
.hc-gri li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: #8f1f57; border-radius: 1px; color: #8E278F; }
/* sdg */
.hc-sdg { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px; }
.hc-sdg img { width: 62px; height: 62px; display: block; }

/* ----- blue callout panel ----- */
.hc-quotepanel { position: relative; background: #3678b4; border-radius: 8px; padding: 40px 44px; margin: 40px 0 6px; overflow: hidden; }
.hc-quotepanel-mark { width: 50px; height: auto; margin-bottom: 14px; display: block; }
.hc-quotepanel p { position: relative; font-family: 'Noto Sans', serif; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; font-weight: 600; color: #fff; margin: 0;  }

@media (max-width: 900px) { .hc-links-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .hc-links-grid { grid-template-columns: 1fr; } }

/* ---- HC screenshot 2: highlights stats, philosophy, workforce table ---- */
.hc-sectitle { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #44489D; margin: 58px 0 22px; }

/* stat grid (3 columns) */
.hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; margin: 0 0 8px; }
.hc-stat { }
.hc-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: #2b8fc9; line-height: 1; margin: 0 0 10px;
background: linear-gradient(
  180deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 400; }
.hc-stat-u { font-size: .5em; font-weight: 700; }
.hc-stat-lbl { font-size: 16px; line-height: 1.45; color: #444; margin: 0; }
.hc-stat--wide { grid-column: span 2; }
.hc-stat-delta { font-size: 12.5px; margin: 6px 0 0;  }
.hc-stat-delta.hc-up { color: #000; }
.hc-stat-delta.hc-up .hc-stat-arrow { color: #00bff3; }
.hc-stat-delta.hc-down { color: #c0392b; }
.hc-stat-arrow { font-size: 10px; }

/* people philosophy box */
.hc-phil { background: #e6f1fa; border-radius: 8px; padding: 34px 36px 40px; margin: 34px 0 6px; }
.hc-phil-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #44489D; text-align: center; margin: 0 0 26px; }
.hc-phil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.hc-vm { }
.hc-vm-head { background: #4fb2d4; color: #fff; text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 11px 14px; border-radius: 3px; }
.hc-vm-body { background: #fff; border: 1px solid #d4e6f2; border-top: none; padding: 22px 24px; margin: 0 10px; }
.hc-vm-body p { font-size: 16px;; line-height: 1.7; color: #333; margin: 0; }

/* workforce composition table */
.hc-wtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.hc-wtable th, .hc-wtable td { border: 1px solid #cfdce6; padding: 8px 10px; text-align: center; }
.hc-wtable thead th { background: #4fb2d4; color: #fff; font-weight: 700; font-size: 12.5px; }
.hc-wtable .hc-wt-lbl { text-align: left; }
.hc-wt-sec td {  font-weight: 700; text-align: left; }
.hc-wt-total td {  font-weight: 700; }
.hc-wt-grand td { font-weight: 700;  }
.hc-note { font-size: 13px;  margin: 12px 0 0; }

@media (max-width: 767px) {
  .hc-stats { grid-template-columns: 1fr 1fr; gap: 24px 22px; }
  .hc-phil-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .hc-stats { grid-template-columns: 1fr; } }

/* ---- HC screenshot 4: people strategy pillars, EVP, what sets us apart ---- */
.hc-photo { margin: 30px auto;  }
.hc-photo img { width: 100%; height: auto; display: block;  }

/* key pillars — cyan header bar + bordered body with blue bottom accent */
.hc-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; margin: 8px 0 4px; }
.hc-pillar { display: flex; flex-direction: column; box-shadow: 0 5px 16px rgba(28, 60, 92, 0.13); }
.hc-pillar-head { background: #4fb2d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; padding: 13px 18px; }
.hc-pillar-body { flex: 1; background: #eff6fb; border: none; border-bottom: 4px solid #3678b4; padding: 18px 22px 22px; margin: 0; }
.hc-pillar-body p { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }

/* shared blue pill header */
.hc-pill { display: block; width: max-content; max-width: 90%; margin: 0 auto; background: #3678b4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: center; padding: 10px 40px; border-radius: 4px; }

/* EVP block */
.hc-evp { background: #eef5fb; border-radius: 8px; padding: 26px 28px 34px; margin: 30px 0 6px; }
.hc-evp-pill { margin-top: 4px; }
.hc-evp-sub { text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #16324f; margin: 20px 0 26px; }
.hc-evp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hc-evp-item { text-align: center; padding: 0 10px; position: relative; }
.hc-evp-item + .hc-evp-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: #cfe0ee; }
.hc-evp-item img { width: 54px; height: 54px; display: block; margin: 0 auto 14px; }
.hc-evp-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 8px; }
.hc-evp-d { font-size: 13px; line-height: 1.45; color: #444; margin: 0; }

/* what sets us apart */
.hc-wsua { margin: 40px 0 6px; }
.hc-wsua-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 24px; margin-top: 26px; }
.hc-wsua-card { background: #e8f2fb; border-radius: 6px; padding: 20px 22px; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.14); }
.hc-wsua-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 10px; }
.hc-wsua-card p { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }

@media (max-width: 860px) {
  .hc-pillars { grid-template-columns: 1fr; }
  .hc-evp-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 8px; }
  .hc-evp-item:nth-child(3n+1)::before { display: none; }
  .hc-wsua-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .hc-evp-grid { grid-template-columns: 1fr 1fr; } .hc-evp-item:nth-child(odd)::before { display: none; } }

/* ---- HC screenshot 5: EVP-aligned panel + leadership & culture panel ---- */
.hc-evpa { background: #eef5fb; border-radius: 8px; padding: 14px 30px 36px; margin: 66px 0 6px; }
.hc-evpa-pill { margin: -32px auto 28px; }
.hc-evpa-block { background: #e8f2fb; border-radius: 6px; padding: 20px 26px 22px; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.14); margin-right: 12px; }
.hc-evpa-block + .hc-evpa-block { margin-top: 26px; }
.hc-evpa-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 8px; }
.hc-evpa-intro { font-size: 16px;; color: #333; margin: 0 0 10px; }
.hc-evpa-list { list-style: none; margin: 0; padding: 0; }
.hc-evpa-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: #333; margin-bottom: 8px; }
.hc-evpa-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: #8860a0; border-radius: 1px; }

/* leadership & culture panel */
.hc-lc { background: #eef5fb; border-radius: 8px; padding: 14px 30px 30px; margin: 66px 0 6px; }
.hc-lc-pill { margin: -32px auto 26px; }
.hc-lc-row { display: grid; grid-template-columns: 210px 1fr; gap: 24px; margin-bottom: 24px; align-items: stretch; }
.hc-lc-row:last-child { margin-bottom: 0; }
.hc-lc-cat { display: flex; align-items: center; background: #fff; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.14); border-radius: 4px; padding: 20px 22px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f6fb0; line-height: 1.3; }
.hc-lc-list { list-style: none; margin: 0; padding: 2px 18px; border-top: 1px solid #a3c8e6; border-right: 1px solid #a3c8e6; border-bottom: 1px solid #a3c8e6; }
.hc-lc-list li { font-size: 16px;; line-height: 1.5; color: #333; padding: 11px 0; border-bottom: 1px solid #cbdff0; }
.hc-lc-list li:last-child { border-bottom: none; }

@media (max-width: 700px) {
  .hc-lc-row { grid-template-columns: 1fr; gap: 10px; }
  .hc-lc-list { border-left: 1px solid #a3c8e6; }
}

/* ---- HRLR committee diagram (matches PDF): centered bracketed title,
       plain-bg categories with cyan dividers + arrow, white bulleted cards ---- */
.hrlr-lc { margin: 44px 0 10px; }
.hrlr-lc-title { display: flex; align-items: stretch; gap: 30px; margin: 0 0 40px; }
.hrlr-lc-br { flex: 1; position: relative; min-height: 66px; }
.hrlr-lc-br::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-top: 2px solid #a9cbe6; }
.hrlr-lc-br-l::before { border-left: 2px solid #a9cbe6; }
.hrlr-lc-br-r::before { border-right: 2px solid #a9cbe6; }
.hrlr-lc-h { flex: 0 1 auto; align-self: flex-start; max-width: 520px; text-align: center;
  font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 21px; color: #1d3a5c; line-height: 1.3;
  padding-bottom: 12px; border-bottom: 6px solid #4f8fc0; }

.hrlr-lc-body { }
.hrlr-lc .hc-lc-row { grid-template-columns: 210px 1fr; gap: 46px; margin-bottom: 22px; align-items: stretch; }
.hrlr-lc .hc-lc-cat { position: relative; background: linear-gradient(180deg, #eef6fb, #e4eef7);
  box-shadow: none; border-radius: 0; padding: 18px 22px; color: #23405c; font-size: 16px; }
.hrlr-lc .hc-lc-row:not(:last-child) .hc-lc-cat { border-bottom: 1px solid #7ec6e0; }
.hrlr-lc .hc-lc-cat::after { content: ""; position: absolute; right: -46px; top: 50%;
  transform: translateY(-50%); border: 10px solid transparent; border-left-color: #7ec6e0; }
.hrlr-lc .hc-lc-list { list-style: none; margin: 0; padding: 16px 24px; background: #fff; border: none;
  border-radius: 4px; box-shadow: 0 5px 16px rgba(28, 60, 92, 0.13); }
.hrlr-lc .hc-lc-list li { position: relative; padding: 7px 0 7px 20px; border-bottom: none;
  font-size: 16px; line-height: 1.55; color: #333; }
.hrlr-lc .hc-lc-list li::before { content: ""; position: absolute; left: 0; top: 12px;
  width: 7px; height: 7px; background: #8860a0; }

@media (max-width: 700px) {
  .hrlr-lc .hc-lc-row { grid-template-columns: 1fr; gap: 14px; }
  .hrlr-lc .hc-lc-cat::after { display: none; }
}

/* ---- HRLR escalation split (matches PDF): heading + intro left, bordered bullet box right ---- */
.hrlr-esc { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; margin: 30px 0; }
.hrlr-esc-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2c3e6b;
  line-height: 1.35; margin: 0 0 12px; }
.hrlr-esc-p { font-size: 16px; line-height: 1.65; color: #333; margin: 0; }
.hrlr-esc-box { border: 1px solid #bcd6ea; border-radius: 6px; padding: 22px 28px; }
.hrlr-esc-box ul { list-style: none; margin: 0; padding: 0; }
.hrlr-esc-box li { position: relative; padding: 8px 0 8px 20px; font-size: 16px; line-height: 1.6; color: #333; }
.hrlr-esc-box li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; background: #8860a0; }

@media (max-width: 820px) {
  .hrlr-esc { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- HC screenshot 6: strategic focus / vision enablers panels ---- */
.hc-focus { position: relative; border: 1px solid #bcd6ea; border-radius: 6px; padding: 40px 30px 30px; margin: 34px 0 6px; }
.hc-focus-pill { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); }
.hc-focus-grid { display: grid; gap: 0; }
.hc-focus-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hc-focus-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hc-focus-item { padding: 4px 22px; position: relative; }
.hc-focus-item:first-child { padding-left: 4px; }
.hc-focus-item + .hc-focus-item::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: #d7e6f2; }
.hc-focus-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f6fb0; line-height: 1.3; margin: 0 0 10px; }
.hc-focus-d { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }

/* strong lead line + read-more */
.hc-strong { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 12px; }
.hc-readmore { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #2f6fb0; font-weight: 600; margin: 4px 0 18px; }
.hc-readmore-ic { font-size: 18px; line-height: 1; }
.hc-readmore a { color: inherit; text-decoration: none; }
.hc-readmore a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .hc-focus-grid--3, .hc-focus-grid--4 { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .hc-focus-item:nth-child(2n+1)::before { display: none; }
}
@media (max-width: 480px) {
  .hc-focus-grid--3, .hc-focus-grid--4 { grid-template-columns: 1fr; }
  .hc-focus-item::before { display: none !important; }
}

/* ---- HC screenshot 7: flow diagrams, blue callout, blue subheads, lists ---- */
.hc-flow { margin: 30px 0 6px; }
.hc-flow-stages { display: flex; align-items: flex-start; gap: 0; }
.hc-flow-box { flex: 1; padding: 0 10px; }
.hc-flow-head { background: #dbe8f2; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; padding: 11px 15px; border-radius: 4px; box-shadow: 0 2px 7px rgba(28, 60, 92, 0.12); margin-bottom: 16px; }
.hc-flow-list { list-style: none; margin: 0; padding: 0; }
.hc-flow-list li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.5; color: #333; margin-bottom: 9px; }
.hc-flow-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: #4fb2d4; border-radius: 1px; }
.hc-flow-arrow { flex: 0 0 auto; color: #4fb2d4; font-size: 18px; margin-top: 8px; }

.hc-oc { margin-top: 20px; }
.hc-oc-label { background: #4fb2d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; text-align: center; padding: 9px; border-radius: 4px 4px 0 0; }
.hc-oc-grid { display: flex; border: 1px solid #dbe8f2; border-top: none; }
.hc-oc-item { flex: 1; text-align: center; padding: 16px 18px; font-size: 16px; line-height: 1.4; color: #333; }
.hc-oc-item + .hc-oc-item { border-left: 1px solid #e2ecf4; }

/* blue highlight (Linking HR strategy...) — no box, blue feature text */
.hc-bluecallout { margin: 34px 0 10px; }
.hc-bluecallout-h { font-family: 'Noto Sans', serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; background: linear-gradient(90deg, #22c1e8, #2f6fb0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; position: relative; padding-left: 48px; margin: 0 0 16px; }
.hc-bluecallout-h::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 36px; height: 3px; background: #4fb2d4; border-radius: 2px; }
.hc-bluecallout p { background: linear-gradient(90deg, #22c1e8, #2f6fb0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 16px; line-height: 1.75; margin: 0; max-width: none; }

/* blue subhead + bullet list */
.hc-bluehead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #00A5E4; margin: 22px 0 10px; }
.hc-ul { list-style: none; margin: 0 0 16px; padding: 0; }
.hc-ul li { position: relative; padding-left: 18px; font-size: 16px;; line-height: 1.6; color: #333; margin-bottom: 8px; }
.hc-ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #8E278F; border-radius: 1px; }

@media (max-width: 767px) {
  .hc-flow-stages { flex-direction: column; }
  .hc-flow-box { padding: 0 0 8px; }
  .hc-flow-arrow { transform: rotate(90deg); margin: 4px auto 12px; }
  .hc-oc-grid { flex-direction: column; }
  .hc-oc-item + .hc-oc-item { border-left: none; border-top: 1px solid #e2ecf4; }
}

/* inline outcomes box (flow diagram 3rd column) */
.hc-flow-oc { flex: 1; padding: 0 10px; }
.hc-flow-oc-head { background: #4fb2d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; text-align: center; padding: 11px 15px; border-radius: 4px 4px 0 0; }
.hc-flow-oc-list { list-style: none; margin: 0; padding: 0; border: 1px solid #dbe8f2; border-top: none; }
.hc-flow-oc-list li { text-align: center; padding: 13px 14px; font-size: 16px; line-height: 1.4; color: #333; border-bottom: 1px solid #e2ecf4; }
.hc-flow-oc-list li:last-child { border-bottom: none; }
@media (max-width: 767px) { .hc-flow-oc { padding: 0 0 8px; } }

/* ---- HC screenshot 8: domicile box, simple tables, just transition ---- */
.hc-domicile { border: 1px solid #bcd6ea; border-radius: 8px; padding: 24px 28px; margin: 30px 0; max-width: 420px; }
.hc-domicile-title { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 14px; }
.hc-domicile-stat + .hc-domicile-stat { margin-top: 20px; }
.hc-domicile-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 40px; color: #2b8fc9; line-height: 1; margin: 0 0 8px; }
.hc-domicile-lbl { font-size: 16px; line-height: 1.45; color: #444; margin: 0 0 4px; }
/* Domicile box (left) + hiring tables (right) */
.hc-domicile-row { display: flex; gap: 36px; align-items: flex-start; margin: 30px 0; flex-wrap: wrap; }
.hc-domicile-row .hc-domicile { margin: 0; flex: 0 0 auto; align-self: stretch; }
.hc-domicile-tables { flex: 1 1 460px; min-width: 0; }
.hc-domicile-tables .hc-h4:first-child { margin-top: 0; }

/* simple FY tables */
.hc-stable { width: 100%; border-collapse: collapse; font-size: 16px; }
.hc-stable th, .hc-stable td { border: 1px solid #cfdce6; padding: 11px 14px; text-align: right; }
.hc-stable thead th { background: #4fb2d4; color: #fff; font-weight: 700; }
.hc-stable th:first-child, .hc-stable td:first-child { text-align: left; }
.hc-stable tbody td:first-child { color: #333;     font-weight: 700; }
.ohs-ltable tbody td:first-child { color: #333;     font-weight: 400; }
.hc-stable--hllast th:last-child { background: #3f9fc4; }
.hc-stable--hllast td:last-child { background: #eef5fb;  }

/* just transition panel */
.hc-jt { border: 1px solid #bcd6ea; border-radius: 8px; padding: 28px 30px; margin: 30px 0 6px; }
.hc-jt-title { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 22px; }
.hc-jt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.hc-jt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hc-jt-head { background: #dbe8f2; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; padding: 10px 15px; border-radius: 4px; box-shadow: 0 2px 7px rgba(28, 60, 92, 0.12); margin-bottom: 12px; }
.hc-jt-body { font-size: 16px; line-height: 1.55; color: #333; margin: 0; }
.hc-jt-highlight { background: #e8f2fb; border-radius: 6px; padding: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.14); }
.hc-jt-highlight p { text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 600; font-size: 16px;; line-height: 1.55; color: #1d3a5c; margin: 0; }

@media (max-width: 767px) {
  .hc-jt-grid { grid-template-columns: 1fr; }
  .hc-jt-cards { grid-template-columns: 1fr; }
}

/* ---- HC screenshot 9: info panels, learning philosophy boxes, big highlight ---- */
.hc-ip { border: 1px solid #bcd6ea; border-radius: 8px; padding: 26px 28px 8px; margin: 30px 0; }
.hc-ip-head { display: inline-block; background: #dbe8f2; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; padding: 12px 20px; border-radius: 4px; box-shadow: 0 3px 8px rgba(28, 60, 92, 0.12); margin: -40px 0 24px; }
.hc-ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.hc-ip-item { padding: 4px 0 16px; margin-bottom: 16px; border-bottom: 1px solid #dbe8f2; }
.hc-ip-item p { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }
.hc-ip-item strong { color: #1d3a5c; }

/* learning philosophy boxes */
.hc-philgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 12px 0 6px; }
.hc-philbox { background: #fff; border-radius: 6px; padding: 20px 22px; font-size: 16px; line-height: 1.55; color: #1d3a5c; box-shadow: 0 4px 14px rgba(28, 60, 92, 0.14); }

/* big blue highlight (no heading) */
.hc-bighl { margin: 30px 0; position: relative; padding-left: 48px; }
.hc-bighl::before { content: ""; position: absolute; left: 0; top: 18px; width: 36px; height: 3px; background: #4fb2d4; border-radius: 2px; }
.hc-bighl p { background: linear-gradient(
  90deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; font-family: 'Noto Sans', serif; font-weight: 600; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.55; margin: 0; 
padding-left: 10px;}

@media (max-width: 767px) {
  .hc-ip-grid { grid-template-columns: 1fr; }
  .hc-philgrid { grid-template-columns: 1fr; }
}

/* ---- HC screenshot 10: section tab header bars + italic h4 ---- */
.hc-sectab { display: flex; align-items: center; margin: 48px 0 24px; }
.hc-sectab-label { flex: 0 0 auto; background: #dbe8f2; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 12px 24px; border-radius: 4px; box-shadow: 0 3px 8px rgba(28, 60, 92, 0.12); }
.hc-sectab-line { flex: 1; height: 1px; background: #bcd6ea; }
.hc-h4 em { font-style: italic; }

/* ---- HC screenshot 11: training highlights panel ---- */
.hc-th { position: relative; border: 1px solid #bcd6ea; border-radius: 8px; padding: 104px 32px 34px; margin: 48px 0 6px; }
.hc-th-big { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: #e8f2fb; border-radius: 8px; box-shadow: 0 6px 18px rgba(28, 60, 92, 0.16); padding: 16px 44px; text-align: center; }
.hc-th-bigval { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); color: #2b8fc9; line-height: 1; margin: 0 0 6px; }
.hc-th-biglbl { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0; }
.hc-th-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 30px; }
.hc-th-item { padding: 0 6px 4px; }
.hc-th-item:nth-child(-n+3) { border-bottom: 1px solid #e2ecf4; padding-bottom: 22px; }
.hc-th-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(26px, 2.6vw, 32px); color: #2b8fc9; line-height: 1; margin: 0 0 10px; }
.hc-th-lbl { font-size: 16px; line-height: 1.45; color: #444; margin: 0; }

@media (max-width: 767px) {
  .hc-th-grid { grid-template-columns: 1fr 1fr; }
  .hc-th-item:nth-child(-n+3) { border-bottom: none; padding-bottom: 4px; }
  .hc-th-big { padding: 14px 24px; }
}

/* ---- HC screenshot 12: pill panels, big stat, group tables ---- */
.hc-panel { position: relative; border: 1px solid #bcd6ea; border-radius: 8px; padding: 40px 30px 24px; margin: 44px 0; }
.hc-panel-pill { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); background: #4fb2d4; }
.hc-panel .hc-bluehead:first-of-type { margin-top: 6px; }

.hc-bigstat { margin: 34px 0; }
.hc-bigstat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(36px, 4vw, 52px); color: #2b8fc9; line-height: 1; margin: 0 0 8px; }
.hc-bigstat-lbl { font-size: 16px;; line-height: 1.5; color: #444; margin: 0; max-width: 440px; }

/* two-level-header group tables */
.hc-gtable { width: 100%; border-collapse: collapse; font-size: 16px; }
.hc-gtable th, .hc-gtable td { border: 1px solid #cfdce6; padding: 11px 14px; text-align: center; }
.hc-gtable thead th { background: #4fb2d4; color: #fff; font-weight: 700; font-size: 13px; }
.hc-gtable thead th.hc-gt-lbl { background: #fff; }
.hc-gtable .hc-gt-lbl { text-align: left; }
.hc-gtable tbody td.hc-gt-lbl { color: #333; }
.hc-gtable .hc-gt-total td { font-weight: 700; background: #eef5fb; }
.hc-h4-unit { float: right; font-weight: 400; font-size: 13px; color: #555; }

/* ---- HC screenshot 13: DEI approach panel + bordered highlight ---- */
.hc-dei { position: relative; border: 1px solid #bcd6ea; border-radius: 6px; padding: 40px 30px 30px; margin: 40px 0 6px; }
.hc-dei-pill { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); }
.hc-dei-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hc-dei-col { padding: 4px 24px; position: relative; }
.hc-dei-col:first-child { padding-left: 4px; }
.hc-dei-col + .hc-dei-col::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: #d7e6f2; }
.hc-dei-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #000; line-height: 1.3; margin: 0 0 14px; }
.hc-dei-item { font-size: 16px; line-height: 1.5; color: #333; margin: 0 0 14px; }

.hc-bighl--box { border: 1px solid #bcd6ea; border-radius: 8px; padding: 30px 36px 30px 60px; }
.hc-bighl--box::before { left: 24px; top: 46px; }

@media (max-width: 860px) {
  .hc-dei-grid { grid-template-columns: 1fr; gap: 22px 0; }
  .hc-dei-col { padding: 0; }
  .hc-dei-col + .hc-dei-col::before { display: none; }
}

/* ---- HC screenshot 15: model cards (bullets), hl-column table, bordered callout, panel dark subhead ---- */
.hc-pillar-ul { list-style: none; margin: 0; padding: 0; }
.hc-pillar-ul li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.55; color: #333; margin-bottom: 10px; }
.hc-pillar-ul li:last-child { margin-bottom: 0; }
.hc-pillar-ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #8860a0; border-radius: 1px; }
.hc-stable th.hc-hl { background: #3f9fc4; }
.hc-stable td.hc-hl { background: #eef5fb; }
.hc-bluecallout--box { border: 1px solid #bcd6ea; border-radius: 8px; padding: 28px 32px; }
.hc-panel-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 20px 0 6px; }
.hc-panel .hc-panel-h:first-of-type { margin-top: 6px; }

/* ---- HC screenshot 16: AI/analytics talent-management panel ---- */
.hc-ai { position: relative; background: #eef5fb; border-radius: 8px; padding: 40px 32px 20px; margin: 44px 0 6px; }
.hc-ai-pill { position: absolute; top: -19px; left: 26px; background: #4fb2d4; text-align: left; }
.hc-ai-intro { font-size: 16px; line-height: 1.7; color: #333; margin: 6px 0 26px; }
.hc-ai-row { display: grid; grid-template-columns: 200px auto 1fr; gap: 22px; align-items: center; padding: 20px 0; border-top: 1px solid #d3e3f0; }
.hc-ai-row:first-of-type { border-top: none; }
.hc-ai-cat { background: #fff; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.12); border-radius: 4px; padding: 18px 20px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; line-height: 1.3; text-align: center; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.hc-ai-arrow { color: #4fb2d4; font-size: 16px; }
.hc-ai-list { list-style: none; margin: 0; padding: 0; }
.hc-ai-list li { position: relative; padding-left: 18px; font-size: 16px;; line-height: 1.5; color: #333; margin-bottom: 9px; }
.hc-ai-list li:last-child { margin-bottom: 0; }
.hc-ai-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: #8860a0; border-radius: 1px; }

@media (max-width: 767px) {
  .hc-ai-row { grid-template-columns: 1fr; gap: 10px; }
  .hc-ai-arrow { display: none; }
}

/* ---- HC: Rewards card panels (white item cards in a light-blue container) ---- */
.hc-cardpanel { position: relative; background: #ebf4f8; border-radius: 8px; padding: 42px 26px 26px; margin: 44px 0; }
.hc-cardpanel-pill { position: absolute; top: -19px; left: 26px; background: #4fb2d4; text-align: left; }
.hc-cardpanel-card { background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.13); padding: 18px 22px; margin-bottom: 20px; }
.hc-cardpanel-card:last-child { margin-bottom: 0; }
.hc-cardpanel-card .hc-panel-h { margin-top: 0; }
.hc-cp-item { position: relative; padding-left: 18px; margin: 0; font-size: 16px;; line-height: 1.55; color: #333; }
.hc-cp-item::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: #8860a0; border-radius: 1px; }
.hc-cp-item strong { color: #1d3a5c; }
.hc-cp-text { font-size: 16px; line-height: 1.55; color: #333; margin: 0; }

/* ============================================================= */
/* ======= HUMAN RIGHTS & LABOUR RELATIONS (.hrlr-*) =========== */
/* Reuses the .hc-* blue design system; .hrlr-* = net-new only.  */
/* ============================================================= */

/* ---- opener: Key Highlights 3-column block ---- */
.hrlr-hl { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 40px;  padding-top: 26px; margin-top: 8px; }
.hrlr-hl-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1d3a5c; margin: 0 0 20px; }
.hrlr-hl-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1d3a5c; margin: 26px 0 14px; }
.hrlr-hl-col > *:first-child { margin-top: 0; }

/* dashed-bullet list (cyan em-dash, blue text) */
.hrlr-dashlist { list-style: none; margin: 0; padding: 0; }
.hrlr-dashlist li { position: relative; padding-left: 22px; font-size: 16px;; line-height: 1.5; color: #2f6fb0; font-weight: 600; margin-bottom: 18px; }
.hrlr-dashlist li::before { content: "\2014"; position: absolute; left: 0; top: -1px; color: #4fb2d4; font-weight: 700; }

/* 57% / 75% stats */
.hrlr-stats { display: flex; flex-direction: column; gap: 22px; margin-bottom: 8px; }
.hrlr-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); color: #2b8fc9; line-height: 1; margin: 0 0 8px; }
.hrlr-stat-lbl { font-size: 16px; line-height: 1.45; color: #444; margin: 0; }
.hrlr-stat-lbl::before { content: ""; display: inline-block; width: 16px; height: 4px; background: #2b8fc9; vertical-align: middle; margin: -2px 10px 0 0; }

/* GRI linkage grid (3 columns) */
.hrlr-gri { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 20px; justify-content: start; }
.hrlr-gri span { font-size: 16px;; color: #333; }


@media (max-width: 860px) { .hrlr-hl { grid-template-columns: 1fr; gap: 30px; } }

/* ==================== OCCUPATIONAL HEALTH & SAFETY (.ohs-*) ==================== */
/* ---- OHS screenshot 1: opener key-highlights (two stat columns + sidebar) ---- */
.ohs-hl { display: grid; grid-template-columns: 2fr 0.85fr; gap: 48px;  padding-top: 26px; margin-top: 8px; }
.ohs-hl-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1d3a5c; margin: 0 0 22px; }
.ohs-hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ohs-hl-col > *:first-child { margin-top: 0; }
.ohs-hl-stat { margin: 0 0 26px; }
.ohs-hl-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); background: linear-gradient(
  90deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; line-height: 1; margin: 0 0 8px; }
.ohs-hl-slbl, .ohs-hl-id { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.5; color: #444; margin: 0; }
.ohs-hl-slbl::before, .ohs-hl-id::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #4fb2d4; font-weight: 700; }
.ohs-hl-item { margin: 0 0 22px; }
.ohs-hl-ih { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f92d1; margin: 0 0 7px; }
.ohs-hl-side > *:first-child { margin-top: 0; }
.ohs-hl-h { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1d3a5c; margin: 26px 0 14px; }

@media (max-width: 860px) {
  .ohs-hl { grid-template-columns: 1fr; gap: 32px; }
  .ohs-hl-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- OHS screenshot 2: policy intro, ribbon flags, SMS box, focus areas, enablers ---- */
.ohs-link { color: #2f6fb0; text-decoration: none; word-break: break-word; }
.ohs-link:hover { text-decoration: underline; }

/* ribbon flag cards */
.ohs-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 30px 0 34px; align-items: start; }
.ohs-flag-head { position: relative; display: block; background: linear-gradient(115deg, #a3cadf 0%, #59aed2 100%); color: #14364f; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: center; padding: 13px 18px; box-shadow: 0 3px 7px rgba(28, 60, 92, 0.16); }
.ohs-flag-head::before { content: ""; position: absolute; left: 0; bottom: -13px; border-top: 13px solid #377eb2; border-right: 20px solid transparent; }
.ohs-flag-body { background: linear-gradient(180deg, #f4f8fc, #ffffff); box-shadow: 0 6px 16px rgba(28, 60, 92, 0.10); padding: 24px 22px 26px; margin-top: 12px; font-size: 16px; line-height: 1.5; color: #333; }

.ohs-sms { margin: 0 0 20px; }
.ohs-flag-wide { max-width: 320px; margin: 0 auto; }
.ohs-sms-box { background: linear-gradient(180deg, #f4f8fc, #ffffff); box-shadow: 0 6px 16px rgba(28, 60, 92, 0.10); padding: 22px 30px 28px; margin-top: 12px; }
.ohs-sms-intro { text-align: center; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 18px; }
.ohs-sms-list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; columns: 2; column-gap: 40px; }
.ohs-sms-list li { position: relative; padding: 6px 0 6px 20px; font-size: 16px;; line-height: 1.5; color: #333; break-inside: avoid; }
.ohs-sms-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; background: #8860a0; }

/* OHS Focus Areas box */
.ohs-focus { position: relative; border: 1px solid #bcd6ea; border-radius: 8px; padding: 42px 30px 30px; margin: 34px 0 10px; }
.ohs-focus-pill { position: absolute; top: -21px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #dbe9f6, #c4dcef); color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 11px 34px; border-radius: 6px; box-shadow: 0 4px 10px rgba(28, 60, 92, 0.14); white-space: nowrap; }
.ohs-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.ohs-focus-cell { font-size: 16px;; line-height: 1.6; color: #333; }
.ohs-focus-cell + .ohs-focus-cell { border-left: 1px solid #cfe0ee; padding-left: 34px; }

/* Key Enablers list */
.ohs-enablers { margin: 22px 0 10px; }
.ohs-enabler { display: grid; grid-template-columns: 270px 1fr; gap: 36px; align-items: center; padding: 6px 0 10px; margin-bottom: 20px; }
.ohs-enabler-lbl { background: #eaf4f8; box-shadow: 0 4px 11px rgba(28, 60, 92, 0.13); border-radius: 4px; padding: 24px 20px; text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; line-height: 1.35; }
.ohs-enabler-desc { position: relative; font-size: 16px;; line-height: 1.6; color: #333; padding-bottom: 20px; }
.ohs-enabler-desc::after { content: ""; position: absolute; left: 0; right: 8px; bottom: 0; height: 6px; background: linear-gradient(180deg, #c3c7cb, #f2f3f5); border-radius: 2px; }

@media (max-width: 860px) {
  .ohs-flags { grid-template-columns: 1fr; gap: 26px; }
  .ohs-sms-list { columns: 1; }
  .ohs-focus-grid { grid-template-columns: 1fr; gap: 22px; }
  .ohs-focus-cell + .ohs-focus-cell { border-left: none; padding-left: 0; }
  .ohs-enabler { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- OHS screenshot 3: Suraksha Samwaad callout, roadmap cards ---- */
.ohs-callout { border: 1px solid #9fcbe6; border-radius: 6px; padding: 22px 26px; margin: 40px 0 30px; }
.ohs-callout-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #097AB8; margin: 0 0 10px; }
.ohs-callout-p { font-size: 16px; line-height: 1.55; color:  #00B4D8; margin: 0; }

.ohs-roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 22px; margin: 20px 0 10px; }
.ohs-rc { display: flex; flex-direction: column; }
.ohs-rc-head { background: #e8f2fb; color: #2f6fb0; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; line-height: 1.3; padding: 13px 14px; }
.ohs-rc-body { flex: 1; font-size: 16px; line-height: 1.55; color: #333; padding: 15px 14px 18px; border-left: 1px solid #cfe0ee; border-bottom: 1px solid #cfe0ee; }

@media (max-width: 980px) { .ohs-roadmap { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ohs-roadmap { grid-template-columns: repeat(2, 1fr); } }

/* ---- OHS screenshot 4: 5C model, big cyan emphasis, councils box, pyramid ---- */
.ohs-5c { position: relative; background: #eaf4f8; border-radius: 8px; padding: 44px 30px 30px; margin: 34px 0 30px; }
.ohs-5c-pill { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: #6195c3; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 11px 30px; border-radius: 4px; box-shadow: 0 4px 10px rgba(28, 60, 92, 0.18); white-space: nowrap; }
.ohs-5c-row { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: stretch; margin-bottom: 16px; }
.ohs-5c-row:last-child { margin-bottom: 0; }
.ohs-5c-lbl { display: flex; align-items: center; background: #fff; border: 1px solid #cfe2f0; border-radius: 4px; padding: 18px 22px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #2f6fb0; }
.ohs-5c-desc { background: #fff; border: 1px solid #cfe2f0; border-radius: 4px; padding: 16px 20px; font-size: 16px;; line-height: 1.55; color: #333; }

.ohs-councils { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #bcd6ea; border-radius: 8px; margin: 24px 0 30px; overflow: hidden; }
.ohs-council { padding: 22px 26px; }
.ohs-council:nth-child(odd) { border-right: 1px solid #d6e4f0; }
.ohs-council:nth-child(-n+2) { border-bottom: 1px solid #d6e4f0; }
.ohs-council-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f92d1; margin: 0 0 9px; }
.ohs-council-p { font-size: 16px;; line-height: 1.55; color: #333; margin: 0; }

.ohs-pyr { margin: 30px auto 10px; max-width: 780px; }
.ohs-pyr img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .ohs-5c-row { grid-template-columns: 1fr; gap: 10px; }
  .ohs-councils { grid-template-columns: 1fr; }
  .ohs-council:nth-child(odd) { border-right: none; }
  .ohs-council:nth-child(-n+3) { border-bottom: 1px solid #d6e4f0; }
}

/* ---- OHS screenshot 5: Safety 1.0 to 2.0 journey (grouped numbered lists over ship photo) ---- */
.ohs-journey { position: relative; margin: 44px 0 10px; padding: 34px 30px 150px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #e9f3fb 0%, #dcecf7 45%, rgba(220,236,247,0) 100%), #e9f3fb; }
.ohs-journey::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0;
  background: url(../images/ohs-journey-ship.jpg) center bottom/cover no-repeat; }
.ohs-journey-title { position: relative; z-index: 1; font-family: 'Noto Sans', serif; font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); letter-spacing: 0.01em; color: #2f5aa0; margin: 0 0 30px; }
.ohs-journey-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.ohs-jcol { display: flex; flex-direction: column; gap: 22px; }
.ohs-jgroup { background: rgba(255, 255, 255, 0.9); border-radius: 6px; padding: 20px 20px 8px; box-shadow: 0 4px 14px rgba(28, 60, 92, 0.10); }
.ohs-jhead { position: relative; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 15.5px; color: #3a5aa0; line-height: 1.3; margin: 0 0 14px; padding-left: 20px; }
.ohs-jhead::before { content: ""; position: absolute; left: 0; top: 4px; border-left: 9px solid #8860a0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ohs-jlist { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ohs-jlist li { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 9px 0; border-bottom: 1px solid #d7b9e0; font-size: 16px; line-height: 1.4; color: #333; }
.ohs-jlist li:last-child { border-bottom: none; }
.ohs-jnum { font-weight: 400; color: #333; }
.ohs-jtxt { }

@media (max-width: 980px) { .ohs-journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ohs-journey-grid { grid-template-columns: 1fr; } .ohs-journey::after { height: 30%; } }

/* OHS tables: left-align body cells (top-aligned), all headers centred like the PDF */
.ohs-ltable td { text-align: left; vertical-align: top; }
.ohs-ltable thead th, .ohs-ltable thead th:first-child { text-align: center; }

/* ---- OHS screenshot 6: Saksham / Samwaad initiative blocks (L-shaped cyan frame) ---- */
.ohs-initiative { position: relative; border-left: 2px solid #7ec8e6; border-bottom: 2px solid #7ec8e6;
  padding: 4px 0 30px 42px; margin: 34px 0; }
.ohs-initiative .hc-p:last-child { margin-bottom: 0; }
.ohs-barhead { position: relative; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.02em; color: #2f92d1; margin: 6px 0 16px; }
.ohs-barhead::before { content: ""; position: absolute; left: -22px; top: 3px; bottom: 3px; width: 4px; background: #2f92d1; border-radius: 2px; }

/* ---- OHS screenshot 7: process-safety initiatives, awards panel, hazard box, column grids ---- */
.ohs-psi { margin: 40px 0 26px; }
.ohs-psi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; }
.ohs-psi-card { background: #fff; border: 1px solid #d3e2ef; border-radius: 4px; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.08); padding: 18px 18px 20px; }
.ohs-psi-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #23405c; margin: 0 0 10px; line-height: 1.3; }
.ohs-psi-p { font-size: 16px; line-height: 1.55; color: #333; margin: 0; }

.ohs-awards { display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: center; background: #eaf4fb; border-radius: 8px; padding: 24px 30px; margin: 0 0 30px; }
.ohs-aw-card { background: #fff; border: 1px solid #d3e2ef; border-radius: 4px; box-shadow: 0 3px 10px rgba(28, 60, 92, 0.08); padding: 16px 18px; }
.ohs-aw-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #23405c; margin: 0 0 8px; }
.ohs-aw-p { font-size: 16px; line-height: 1.5; color: #333; margin: 0; }
.ohs-aw-logo img { width: 150px; height: auto; display: block; }

.ohs-hazbox { border: 1px solid #bcd6ea; border-radius: 8px; padding: 24px 28px; margin: 30px 0; }
.ohs-hazbox-lead { font-size: 16px; line-height: 1.6; color: #333; margin: 0 0 18px; }
.ohs-hazbox-list { list-style: none; margin: 0; padding: 0; }
.ohs-hazbox-list li { position: relative; padding-left: 22px; margin: 0 0 18px; font-weight: 700; font-size: 15.5px; line-height: 1.5; background: linear-gradient(
  90deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; }
.ohs-hazbox-list li:last-child { margin-bottom: 0; }
.ohs-hazbox-list li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #2f92d1; -webkit-text-fill-color: #2f92d1; }

.ohs-colgrid { display: grid; gap: 24px 28px; margin: 22px 0 10px; }
.ohs-colgrid-3 { grid-template-columns: repeat(3, 1fr); }
.ohs-colgrid-4 { grid-template-columns: repeat(4, 1fr); }
.ohs-cg-item { border-left: 2px solid #7ec8e6; padding: 3px 0 3px 16px; font-size: 16px; line-height: 1.55; color: #333; }

@media (max-width: 980px) {
  .ohs-psi-grid { grid-template-columns: repeat(2, 1fr); }
  .ohs-awards { grid-template-columns: 1fr 1fr; }
  .ohs-aw-logo { grid-column: 1 / -1; text-align: center; }
  .ohs-aw-logo img { margin: 0 auto; }
  .ohs-colgrid-3, .ohs-colgrid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ohs-psi-grid, .ohs-awards, .ohs-colgrid-3, .ohs-colgrid-4 { grid-template-columns: 1fr; }
}

/* ---- OHS screenshot 8: oil-spill key-elements grid, CBRN mock-drill ---- */
.ohs-keyelem { background: #eaf4fb; border-radius: 8px; padding: 26px; margin: 20px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; }
.ohs-ke-card { display: grid; grid-template-columns: 156px 1fr; background: #fff; border: 1px solid #d3e2ef; border-radius: 4px; box-shadow: 0 3px 10px rgba(28, 60, 92, 0.08); overflow: hidden; }
.ohs-ke-left { background: #eef6fc; padding: 16px 16px 12px; display: flex; flex-direction: column; }
.ohs-ke-title { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; color: #2f6fb0; margin: 0; line-height: 1.25; }
.ohs-ke-num { margin-top: auto; padding-top: 16px; font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: #b6d6ec; }
.ohs-ke-desc { padding: 16px 18px; font-size: 16px; line-height: 1.5; color: #333; }

/* CBRN mock-drill: whole section framed by an L-shaped cyan rule (left + bottom) */
.ohs-cbrn { position: relative; border-left: 3px solid #4fb2d4; border-bottom: 3px solid #4fb2d4; padding: 6px 0 34px 34px; margin: 34px 0 10px; }
.ohs-cbrn .hc-photo:last-child { margin-bottom: 0; }
.ohs-mocktitle { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; letter-spacing: 0.01em; color: #2f92d1; line-height: 1.18; margin: 6px 0 20px; }
.ohs-statblock { margin: 26px 0; }
.ohs-statblock .ohs-hl-val { font-size: clamp(34px, 3.6vw, 46px); background: linear-gradient(
  90deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 400px;}

@media (max-width: 700px) { .ohs-keyelem { grid-template-columns: 1fr; } }

/* ---- OHS screenshot 9: nested sub-bullets, cross-ref link, AGPL callout box ---- */
.ohs-subul { list-style: none; margin: 8px 0 2px; padding: 0; }
.ohs-subul li { position: relative; padding-left: 18px; margin: 4px 0; font-size: 16px; line-height: 1.5; color: #333; }
.ohs-subul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: #8860a0; }
.ohs-xref { color: #8860a0; text-decoration: none; font-weight: 600; }
.ohs-xref:hover { text-decoration: underline; }

.ohs-agpl {  margin: 28px 0 18px; padding: 22px 26px; border: 1px solid #6cc6e8; border-radius: 4px; box-shadow: 0 12px 26px rgba(0,180,216,.20); }
.ohs-agpl-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f6fb0; margin: 0 0 12px; }
.ohs-agpl-p { font-size: 16px;; line-height: 1.7; color: #00B4D8; margin: 0; }

/* ---- OHS screenshot 11: incidents table, person-hours stats, chart grid ---- */
.ohs-inctable td:first-child { width: 40%; }
.ohs-inc-desc p { margin: 0 0 12px; }
.ohs-inc-desc p:last-child { margin-bottom: 0; }
.ohs-inc-actions { list-style: none; margin: 0; padding: 0; }
.ohs-inc-actions li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.ohs-inc-actions li:last-child { margin-bottom: 0; }
.ohs-inc-actions li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; background: #8860a0; }

.ohs-phours { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 20px 0 34px; }
.ohs-ph-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); background: linear-gradient(
  90deg,
  #00B1D6 0%,
  #109FCC 45%,
  #0585BD 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 400px; line-height: 1; margin: 0 0 8px; }
.ohs-ph-val span { font-weight: 700; font-size: 0.6em; }
.ohs-ph-lbl { position: relative; padding-left: 22px; font-size: 16px; color: #444; margin: 0; }
.ohs-ph-lbl::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #4fb2d4; font-weight: 700; }

.ohs-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 44px; margin: 20px 0 10px; }
.ohs-chart-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #23405c; margin: 0 0 14px; }
.ohs-chart img { width: 100%; max-width: 430px; height: auto; display: block; }

@media (max-width: 820px) {
  .ohs-phours, .ohs-charts { grid-template-columns: 1fr; }
  .ohs-inctable td:first-child { width: auto; }
}

/* ---- OHS screenshot 10: 6-step contractor flow diagram ---- */
.ohs-flow6 { background: #eaf4fb; border-radius: 8px; padding: 26px 30px 34px; margin: 34px 0 24px; }
.ohs-flow6-ribbon { text-align: center; margin-bottom: 30px; }
.ohs-flow6-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.ohs-fbox { background: #fff; border: 1px solid #d3e2ef; border-radius: 4px; box-shadow: 0 3px 8px rgba(28, 60, 92, 0.08); padding: 15px 16px; font-size: 16px; line-height: 1.4; color: #23405c; min-height: 68px; display: flex; align-items: center; }
.ohs-farrow { color: #8860a0; font-size: 18px; text-align: center; line-height: 1; }
.ohs-flow6-down { margin: 8px 0; }
.ohs-fdown { color: #8860a0; font-size: 18px; text-align: center; }

@media (max-width: 700px) {
  .ohs-flow6-grid { grid-template-columns: 1fr; }
  .ohs-farrow { transform: rotate(90deg); }
  .ohs-flow6-down { display: none; }
}

/* ---- HRLR screenshot 2: key-elements box, policy links, strategy pillars ---- */
.hrlr-kebox { border: 1px solid #bcd6ea; border-radius: 8px; padding: 26px 30px 30px; margin: 30px 0; }
.hrlr-kebox-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 8px; }
.hrlr-kebox-intro { font-size: 16px;; line-height: 1.6; color: #333; margin: 0 0 20px; }
.hrlr-ke-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 20px; }
.hrlr-ke-item { aspect-ratio: 401 / 282; background: url(../images/key-elements-of-human-rights-guidelines.svg) center/contain no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20%; }
.hrlr-ke-item span { font-size: 16px; font-weight: 600; line-height: 1.3; color: #1d3a5c; }

/* policy links (external-link icon) */
.hrlr-plinks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin: 6px 0 4px; max-width: 820px; }
.hrlr-plink { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: #9c2a8f; text-decoration: none; font-weight: 600; }
.hrlr-plink:hover { text-decoration: underline; }
.hrlr-plink-ic { color: #9c2a8f; font-size: 16px; margin-top: 2px; flex: none; }

/* strategy pillars (5 cards: blue header + light body) */
.hrlr-spillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 8px 0 6px; }
.hrlr-spillar { display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.12); }
.hrlr-spillar-head { background: #4fb2d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; padding: 13px 15px; }
.hrlr-spillar-body { flex: 1; background: #eaf3fa; padding: 16px 16px 20px; font-size: 16px; line-height: 1.55; color: #333; }

@media (max-width: 860px) {
  .hrlr-ke-grid { grid-template-columns: repeat(2, 1fr); }
  .hrlr-plinks { grid-template-columns: 1fr; }
  .hrlr-spillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .hrlr-ke-grid { grid-template-columns: 1fr; } .hrlr-spillars { grid-template-columns: 1fr; } }


/* ---- HRLR screenshot 3: due-diligence panel + section tab ---- */
.hrlr-dd { background: #dbeaf6; border-radius: 8px; padding: 24px 26px 12px; margin: 30px 0; }
.hrlr-dd-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; text-align: center; margin: 4px 0 20px; }
.hrlr-dd-card { background: #f2f8fc; border-radius: 4px; box-shadow: 0 2px 8px rgba(28, 60, 92, 0.1); padding: 13px 18px; margin-bottom: 14px; position: relative; }
.hrlr-dd-card::before { content: ""; position: absolute; left: 8px; top: 19px; width: 6px; height: 6px; background: #4fb2d4; border-radius: 1px; }
.hrlr-dd-card p { margin: 0; padding-left: 12px; font-size: 16px; line-height: 1.5; color: #333; }
.hrlr-dd-card strong { color: #1d3a5c; }

.hrlr-ddtab { display: flex; align-items: flex-start; margin: 44px 0 20px; }
.hrlr-ddtab > span { display: inline-block; background: linear-gradient(180deg, #eef6fc, #dbeaf6); border-bottom: 3px solid #4fb2d4; border-radius: 4px 4px 0 0; box-shadow: 0 4px 10px rgba(28, 60, 92, 0.12); padding: 12px 22px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #097AB8; }
.hrlr-ddtab::after { content: ""; flex: 1; height: 26px; border-top: 1px solid #9fd0e4; border-right: 1px solid #9fd0e4; margin-top: 2px; }

/* ---- HRLR screenshot 4: salient risk chips ---- */
.hrlr-riskchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; margin: 20px 0 8px; }
.hrlr-riskchip { background: #eaf3fa; border-radius: 5px; box-shadow: 0 4px 12px rgba(28, 60, 92, 0.13); padding: 22px 18px; text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 600; font-size: 16px; color: #1d3a5c; }
@media (max-width: 860px) { .hrlr-riskchips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hrlr-riskchips { grid-template-columns: 1fr; } }

/* ---- HRLR screenshots 5-7: mitigation & remediation table ---- */
.hrlr-mtable { border: 1px solid #cfdce6; font-size: 16px; }
.hrlr-mt-head { display: grid; grid-template-columns: 200px 1fr 1.5fr; background: #3678b4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 13px; }
.hrlr-mt-head > div { padding: 12px 16px; }
.hrlr-mt-head > div + div { border-left: 1px solid #5a90c4; }
.hrlr-mt-row { display: grid; grid-template-columns: 200px 1fr 1.5fr; border-top: 1px solid #cfdce6; }
.hrlr-mt-stake { background: #eaf3fa; padding: 18px 16px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; display: flex; align-items: center; }
.hrlr-mt-issues { padding: 18px 16px; border-left: 1px solid #cfdce6; line-height: 1.55; color: #333; display: flex; align-items: center; }
.hrlr-mt-measures { padding: 14px 16px; border-left: 1px solid #cfdce6; }
.hrlr-mt-measures ul { list-style: none; margin: 0; padding: 0; }
.hrlr-mt-measures li { position: relative; padding-left: 16px; line-height: 1.5; color: #333; margin: 6px 0; }
.hrlr-mt-measures li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #4fb2d4; border-radius: 1px; }

@media (max-width: 767px) {
  .hrlr-mt-head { display: none; }
  .hrlr-mt-row { grid-template-columns: 1fr; }
  .hrlr-mt-issues, .hrlr-mt-measures { border-left: none; border-top: 1px solid #e2ecf4; }
}

/* ==================== CORPORATE SOCIAL RESPONSIBILITY (.csr-*) ==================== */
/* ---- CSR screenshot 1: opener Key Linkages panel + CSR Philosophy ---- */
.csr-linkages { display: grid; grid-template-columns: 1.7fr 1.15fr; gap: 48px;  padding-top: 26px; margin-top: 8px; }
.csr-lk-title { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #1d3a5c; margin: 0 0 20px; }
.csr-lk-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; }
.csr-lk-sub { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1d3a5c; margin: 22px 0 14px; }
.csr-lk-col > *:first-child { margin-top: 0; }
.csr-sdg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 392px; }
.csr-sdg img { width: 100%; height: auto; }
.csr-cap img { width: 54px; height: 54px; display: block; }
.csr-gri { font-size: 16px; color: #333; margin: 0; }
.csr-lk-phil > *:first-child { margin-top: 0; }
.csr-lk-phil .hc-bluehead { margin-bottom: 12px; }

@media (max-width: 900px) {
  .csr-linkages { grid-template-columns: 1fr; gap: 32px; }
  .csr-lk-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .csr-lk-cols { grid-template-columns: 1fr; } }

/* ---- CSR screenshot 2: tenets, foundation link, vision/mission, expand panel, impact charts ---- */
.csr-tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 22px 0 34px; }
.csr-tenet { aspect-ratio: 401 / 200; background: url(../images/key-elements-of-human-rights-guidelines.svg) center/contain no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 22%; }
.csr-tenet span { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; line-height: 1.3; }

.csr-flink { display: inline-flex; align-items: flex-start; gap: 10px; margin: 6px 0 30px; text-decoration: none; color: #2f6fb0; font-size: 16px; line-height: 1.5; }
.csr-flink i { color: #4fb2d4; margin-top: 2px; }
.csr-flink:hover span { text-decoration: underline; }

.csr-vm-expand { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin: 30px 0; }
.csr-vm { background: #e7eef8; border-radius: 8px; padding: 28px 30px; }
.csr-vm-h { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(26px, 3vw, 36px); color: #2f6fb0; margin: 0 0 12px; }
.csr-vm-h:nth-of-type(2) { margin-top: 26px; }
.csr-vm-p { font-size: 16px;; line-height: 1.6; color: #333; margin: 0; }

.csr-expand { background: linear-gradient(160deg, #2f7fc0 0%, #2769a8 100%); color: #fff; border-radius: 8px; padding: 30px 32px; }
.csr-expand-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); color: #fff; margin: 0 0 18px; line-height: 1.12; }
.csr-expand-sub { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 14px; }
.csr-expand-list { list-style: none; margin: 0; padding: 0; }
.csr-expand-list li { position: relative; padding: 0 0 14px 0; font-size: 16px; line-height: 1.5; color: #eaf3fb; border-bottom: 1px solid rgba(255, 255, 255, 0.22); margin-bottom: 14px; }
.csr-expand-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.csr-expand-list strong { color: #fff; }

.csr-impact { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin: 20px 0 34px; align-items: start; }
.csr-chart-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #23405c; margin: 0 0 16px; }
.csr-chart-unit { font-weight: 400; font-size: 13px; color: #666; }
.csr-chartimg { margin: 0; }
.csr-chartimg img { width: 100%; max-width: 400px; height: auto; display: block; }
.csr-chart-note { font-size: 12.5px; color: #666; margin: 4px 0 0; }
.csr-pct { margin: 24px 0 0; }
.csr-pct-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); color: #2b8fc9; line-height: 1; margin: 0 0 8px; }
.csr-pct-lbl { position: relative; padding-left: 16px; font-size: 16px; color: #444; margin: 0; }
.csr-pct-lbl::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #4fb2d4; font-weight: 700; }

@media (max-width: 820px) {
  .csr-tenets { grid-template-columns: 1fr; gap: 14px; }
  .csr-tenet { aspect-ratio: 401 / 130; padding: 0 30%; }
  .csr-vm-expand, .csr-impact { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- CSR screenshot 3: focus-areas table, policy link ---- */
.csr-ftable { width: 100%; border-collapse: collapse; font-size: 16px; }
.csr-ftable thead th { text-align: left; vertical-align: bottom; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; padding: 10px 12px; border-top: 2px solid #92278f; border-bottom: 2px solid #92278f; }
.csr-ftable thead th span { font-weight: 400; font-size: 12px; color: #666; }
.csr-ftable td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid #e0d2e4; line-height: 1.5; color: #333; }
.csr-ftable tbody tr:last-child td { border-bottom: 2px solid #92278f; }
.csr-ft-area { font-weight: 700; color: #1d3a5c; }
.csr-ft-num { white-space: nowrap; }
.csr-ft-sdg { display: flex; flex-wrap: wrap; gap: 5px; }
.csr-ft-sdg img { width: 34px; height: 34px; }

.csr-policylink { font-size: 16px; color: #333; margin: 6px 0 20px; }
.csr-policylink i { color: #4fb2d4; margin-right: 4px; }
.csr-policylink a { color: #8860a0; text-decoration: underline; }

@media (max-width: 820px) {
  .ecc-table-wrap { overflow-x: auto; }
  .csr-ftable { min-width: 640px; }
}

/* ---- CSR screenshot 5: engagement 2x2 tab panel, stakeholder flow diagram ---- */
.csr-engpanel { background: #eef5fb; border-radius: 8px; padding: 30px; margin: 30px 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.csr-engbox .hrlr-ddtab.csr-engtab { margin: 0 0 16px; }
.csr-engbox .hc-ul { margin: 0; }

.csr-flow5 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px 44px; margin: 24px 0 10px;
  grid-template-areas: "b1 b1 b2" "b5 b4 b3"; align-items: stretch; }
.csr-fbox { position: relative; border: 1px solid #bcd6ea; border-radius: 6px; padding: 18px 20px; }
.csr-fbox-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 15.5px; color: #1d3a5c; margin: 0 0 12px; }
.csr-fbox-ul { list-style: none; margin: 0 0 12px; padding: 0; }
.csr-fbox-ul li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 16px; line-height: 1.45; color: #333; }
.csr-fbox-ul li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; background: #8860a0; }
.csr-fbox-stake { font-size: 13px; line-height: 1.45; color: #444; margin: 0; }
.csr-fbox-stake strong { color: #1d3a5c; }
.csr-fbox.arr-right::after, .csr-fbox.arr-left::after, .csr-fbox.arr-down::after { content: ""; position: absolute; border: 10px solid transparent; }
.csr-fbox.arr-right::after { right: -30px; top: 50%; transform: translateY(-50%); border-left-color: #8860a0; }
.csr-fbox.arr-left::after { left: -30px; top: 50%; transform: translateY(-50%); border-right-color: #8860a0; }
.csr-fbox.arr-down::after { bottom: -30px; left: 50%; transform: translateX(-50%); border-top-color: #8860a0; }

@media (max-width: 900px) {
  .csr-engpanel { grid-template-columns: 1fr; }
  .csr-flow5 { grid-template-columns: 1fr; grid-template-areas: "b1" "b2" "b3" "b4" "b5"; gap: 34px; }
  .csr-fbox.arr-right::after, .csr-fbox.arr-left::after { left: 50%; right: auto; top: auto; bottom: -24px; transform: translateX(-50%); border: 9px solid transparent; border-top-color: #8860a0; }
  .csr-fbox.arr-down::after { bottom: -24px; }
}

/* ---- CSR screenshot 6: education hero, stat grids, student donut vizzes ---- */
.csr-edu { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: stretch; margin: 26px 0 34px; }
.csr-edu-photo { position: relative; margin: 0; }
.csr-edu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csr-edu-panel { position: relative; background: #e7eef8; padding: 36px 34px 36px 52px; margin-left: -40px; display: flex; flex-direction: column; justify-content: center; }
.csr-edu-tab { display: inline-block; align-self: flex-start; background: #2f7fc0; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; padding: 9px 22px; margin-bottom: 20px; box-shadow: 0 3px 8px rgba(28, 60, 92, 0.2); }
.csr-edu-panel p { font-size: 16px;; line-height: 1.6; color: #333; margin: 0 0 14px; }
.csr-edu-panel p:last-child { margin-bottom: 0; }
.csr-edu-list { list-style: none; margin: 4px 0 0; padding: 0; }
.csr-edu-list li { position: relative; padding-left: 18px; font-size: 16px;; line-height: 1.55; color: #333; margin-bottom: 12px; }
.csr-edu-list li:last-child { margin-bottom: 0; }
.csr-edu-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: #2f7fc0; }
.csr-edu-list strong { color: #1d3a5c; }

.csr-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; margin: 18px 0 24px; }
.csr-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); color: #2b8fc9; line-height: 1.05; margin: 0 0 8px; }
.csr-stat-lbl { position: relative; padding-left: 15px; font-size: 16px; line-height: 1.45; color: #444; margin: 0; }
.csr-stat-lbl::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #4fb2d4; font-weight: 700; }
.csr-stat-unit { font-size: 0.5em; font-weight: 700; }
.csr-impcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; margin: 10px 0 30px; align-items: start; }
.csr-impcol-h { display: inline-block; background: #4fb2d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 6px 14px; margin: 0 0 20px; }
.csr-impcol .csr-stat { margin-bottom: 22px; }
.csr-impcol .csr-stat:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .csr-impcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .csr-impcols { grid-template-columns: 1fr; } }
.csr-medal { color: #2b8fc9; font-weight: 800; }

.csr-khhead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #000; margin: 8px 0 6px; }
.csr-students-block { margin: 10px 0 26px; }
.csr-students-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 10px; }
.csr-studentsimg { margin: 0; }
.csr-studentsimg img { width: 100%; height: auto; display: block; }
.csr-schoolhero { display: grid; grid-template-columns: 1fr 0.92fr; gap: 36px; align-items: start; margin: 22px 0 16px; }
.csr-schoolhero-txt .hc-bluehead, .csr-schoolhero-txt .hc-subhead { margin-top: 0; }
.csr-schoolhero-txt .hc-p { margin-bottom: 0; }
.csr-schoolhero-photo { margin: 6px 0 0; }
.csr-schoolhero-photo img { width: 100%; height: auto; display: block; }
.csr-stat-lbl strong { color: #1d3a5c; font-weight: 700; }
.csr-progphoto { float: right; width: 42%; max-width: 400px; margin: 6px 0 18px 36px; }
.csr-progphoto img { width: 100%; height: auto; display: block; }
.csr-clear { clear: both; }
.csr-socblock { display: flex; gap: 34px; align-items: flex-start; margin: 30px 0; }
.csr-socphoto { flex: 0 0 340px; max-width: 340px; margin: 4px 0 0; }
.csr-socphoto img { width: 100%; height: auto; display: block; }
.csr-socbody { flex: 1 1 auto; min-width: 0; }
.csr-socbody .csr-soc { margin-top: 0; }
@media (max-width: 820px) { .csr-socblock { flex-direction: column; } .csr-socphoto { flex-basis: auto; max-width: 360px; } }
.csr-photor { float: right; width: 46%; max-width: 480px; margin: 6px 0 18px 36px; }
.csr-photor img { width: 100%; height: auto; display: block; }
@media (max-width: 820px) { .csr-photor { float: none; width: auto; max-width: 520px; margin: 20px auto 24px; } }
.csr-oi { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; margin: 20px 0 30px; }
.csr-oi-cell .csr-khhead { margin: 0 0 10px; }
.csr-oi-cell .csr-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); color: #2b8fc9; line-height: 1.05; margin: 0 0 8px; }
.csr-actable { width: 100%; border-collapse: collapse; margin: 8px 0 30px; font-family: 'Noto Sans', sans-serif; }
.csr-actable thead th { background: #4fb2d4; color: #fff; font-weight: 700; font-size: 16px; text-align: left; padding: 11px 18px; }
.csr-actable tbody td { font-size: 16px; color: #333; padding: 12px 18px; border-bottom: 1px solid #dbe6ef; vertical-align: middle; }
.csr-actable .csr-actable-b { text-align: left; white-space: nowrap; }
.csr-actable tbody .csr-actable-b { font-weight: 700; color: #1d3a5c; }
.csr-htable { width: 100%; border-collapse: collapse; margin: 12px 0 26px; font-family: 'Noto Sans', sans-serif; }
.csr-htable thead th { background: #4fb2d4; color: #fff; font-weight: 700; font-size: 16px; text-align: right; padding: 10px 16px; }
.csr-htable thead th:first-child { background: transparent; }
.csr-htable tbody th { text-align: left; font-weight: 700; font-size: 16px; color: #1d3a5c; padding: 11px 16px; border-bottom: 1px solid #dbe6ef; }
.csr-htable tbody td { text-align: right; font-size: 16px; color: #333; padding: 11px 16px; border-bottom: 1px solid #dbe6ef; }
.csr-soc { border-left: 6px solid #4fb2d4; padding: 4px 0 4px 18px; margin: 30px 0 18px; line-height: 1.15; }
.csr-soc span { display: block; font-family: 'Noto Sans', serif; font-weight: 700; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: 0.02em; text-transform: uppercase; }
.csr-soc-l1 { color: #23405c; }
.csr-soc-l2 { color: #4fb2d4; }
/* Employee Volunteering two-panel */
.csr-evpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 22px 0 30px; align-items: start; }
.csr-evpanel-h { background: #3678b4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 12px 20px; }
.csr-evpanel-b { background: #eaf3fb; padding: 22px 22px 10px; }
.csr-ev-intro { font-size: 16px; line-height: 1.5; color: #333; margin: 0 0 18px; }
.csr-evlist { list-style: none; margin: 0; padding: 0 0 0 14px; }
.csr-evlist li { position: relative; background: #fff; padding: 14px 16px; margin-bottom: 14px; font-size: 16px; line-height: 1.5; color: #333; box-shadow: 0 1px 4px rgba(28, 60, 92, 0.08); }
.csr-evlist li::before { content: "\25B6"; position: absolute; left: -13px; top: 15px; color: #8860a0; font-size: 10px; }
.csr-evlist strong { color: #1d3a5c; }
@media (max-width: 820px) { .csr-evpanels { grid-template-columns: 1fr; } }
/* --- CSR chapter sub-nav (blue/purple, mirrors .ecc-nav) --- */
.csr-nav { background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 92px; z-index: 40; transition: top .4s ease; }
.csr-nav-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; }
.csr-nav-link { flex: 0 0 auto; padding: 9px 16px; border-radius: 40px; font-size: 16px; font-weight: 600; color: #33403b; white-space: nowrap; transition: background .2s, color .2s; }
.csr-nav-link:hover { background: #eef5fb; color: #2f6fb0; text-decoration: none; }
.csr-nav-link.is-active { background: #424089; color: #fff; }
/* --- compact hero for CSR sub-pages --- */
.hc-hero--sub { min-height: 0; }
.hc-hero--sub .container { padding-top: 120px; padding-bottom: 46px; }
.hc-hero--sub .hc-title { margin-bottom: 0; }
/* --- placeholder body for not-yet-built sub-pages --- */
.csr-stub { border: 1px dashed #c5d5e2; background: #f6f9fc; border-radius: 8px; padding: 46px 40px; margin: 30px 0; text-align: center; }
.csr-stub-eyebrow { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #4fb2d4; margin: 0 0 10px; }
.csr-stub-text { font-size: 15.5px; color: #444; margin: 0; }

@media (max-width: 820px) {
  .csr-schoolhero { grid-template-columns: 1fr; gap: 20px; }
  .csr-edu { grid-template-columns: 1fr; }
  .csr-edu-panel { margin-left: 0; padding: 30px 26px; }
  .csr-statgrid { grid-template-columns: repeat(2, 1fr); }
  .csr-oi { grid-template-columns: 1fr; gap: 22px; }
  .csr-progphoto { float: none; width: auto; max-width: 420px; margin: 20px auto 26px; }
}
@media (max-width: 520px) { .csr-statgrid { grid-template-columns: 1fr; } }

/* ============================ Responsible Procurement (.rp-*) ============================ */
.rp-hero { min-height: 0; }
.rp-hero .container { padding-top: 130px; padding-bottom: 44px; }
.rp-hero-figure { position: relative; }
.rp-hero-illus { display: block; width: 100%; height: auto; transform: scaleX(-1); }
.rp-hero-quotebox { position: absolute; left: 35.5%; top: 28%; width: 22%; max-width: 320px; }
.rp-hero-qmark { display: block; width: 34px; height: auto; margin-bottom: 16px; }
.rp-hero-quote { margin: 0; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); line-height: 1.3; }
.rp-lead { font-size: 16px; line-height: 1.75; color: #333; max-width: 900px; margin: 6px 0 32px; }
@media (max-width: 820px) { .rp-hero-quotebox { position: static; width: auto; max-width: none; padding: 18px 24px 26px; } }
.rp-body { background: #fff; }
.rp-linkages { margin: 42px 0 20px; }
.rp-lk-title { font-family: 'Noto Sans', sans-serif; font-size: 20px; font-weight: 700; color: #2f6fb0; margin: 0 0 22px; }
.rp-lk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; align-items: start; }
.rp-lk-sub { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #1d3a5c; margin: 0 0 14px; }
.rp-lk-col > .rp-lk-sub:not(:first-child) { margin-top: 30px; }
.rp-linkages .hc-mt-code { border-color: #2f6fb0; color: #2f6fb0; }
.rp-lk-list { list-style: none; margin: 0; padding: 0; }
.rp-lk-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: #333; margin-bottom: 10px; }
.rp-lk-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: #92278f; }
.rp-cap-list { display: flex; flex-direction: column; gap: 16px; }
.rp-cap { display: flex; align-items: center; gap: 12px; }
.rp-cap img { width: 38px; height: 38px; flex: none; }
.rp-cap span { font-size: 16px; line-height: 1.35; color: #333; }
.rp-sdg { display: flex; gap: 8px; }
.rp-sdg img { width: 62px; height: 62px; }
.rp-gri { display: flex; flex-direction: column; gap: 4px; font-size: 16px; font-weight: 600; color: #333; }
@media (max-width: 820px) { .rp-lk-grid { grid-template-columns: 1fr 1fr; } .rp-hero-quote { position: static; width: auto; transform: none; padding: 18px 20px 24px; } }
@media (max-width: 520px) { .rp-lk-grid { grid-template-columns: 1fr; } }

/* --------- Responsible Procurement screenshot 2 --------- */
.rp-blk-h { font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight: 700; color: #23405c; margin: 0 0 16px; }
.rp-callout {     margin: 28px 0 18px;
    padding: 22px 26px;
    border: 1px solid #6cc6e8;
    border-radius: 4px;
    box-shadow: 0 12px 26px rgba(0, 180, 216, .20); }
.rp-callout-h { font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2f6fb0;
    margin: 0 0 12px;}
.rp-callout p {     font-size: 16px;
    line-height: 1.7;
    color: #00B4D8;
    margin: 0; }
.rp-callout p:last-child { margin-bottom: 0; }
.rp-khl { margin: 6px 0 28px; }
.rp-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 34px; }
.rp-stat-val { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); color: #2b8fc9; line-height: 1.05; margin: 0 0 6px; }
.rp-stat-lbl { font-size: 16px; line-height: 1.4; color: #444; margin: 0; }
.rp-localbars { background: #eef4fb; border-radius: 6px; padding: 22px 26px; margin: 6px 0 34px; max-width: 560px; }
.rp-localimg { margin: 0; }
.rp-localimg img { width: 100%; height: auto; display: block; }
.rp-bar-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 14px; margin-bottom: 16px; }
.rp-bar-row:last-child { margin-bottom: 0; }
.rp-bar-lbl { font-size: 16px; color: #33435a; text-align: right; line-height: 1.25; }
.rp-bar-track { background: #d7deef; height: 22px; }
.rp-bar-fill { height: 100%; background: #9fb0da; }
.rp-bar-val { font-size: 16px; font-weight: 700; color: #23405c; }
.rp-pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 20px 0 18px; align-items: start; }
.rp-pp-h { background: #2fa6d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: center; padding: 12px 18px; }
.rp-pp-b { background: #eaf4fb; padding: 22px 24px; }
.rp-pp-b ul { list-style: none; margin: 0; padding: 0; }
.rp-pp-b li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: #333; margin-bottom: 14px; }
.rp-pp-b li:last-child { margin-bottom: 0; }
.rp-pp-b li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: #92278f; }
.rp-readmore { font-size: 16px; color: #444; margin: 8px 0 0; }
.rp-readmore i { color: #92278f; margin-right: 6px; }
.rp-readmore a { color: #92278f; text-decoration: none; }
.rp-readmore a:hover { text-decoration: underline; }
.rp-comps { display: grid; grid-template-columns: repeat(4, 1fr); background: #eaf4fb; border-radius: 6px; padding: 20px 10px; margin: 20px 0 34px; }
.rp-comp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 22px 16px; border-right: 1px solid #d3e4f1; }
.rp-comp:nth-child(4n) { border-right: none; }
.rp-comp:nth-child(-n+4) { border-bottom: 1px solid #d3e4f1; }
.rp-comp img { width: 50px; height: 50px; }
.rp-comp span { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 700; color: #2f6fb0; line-height: 1.3; }
.rp-flow { display: flex; gap: 32px; align-items: stretch; margin: 20px 0 30px; }
.rp-flow-step { flex: 1; position: relative; display: flex; flex-direction: column; border: 1px solid #cfe0ef; }
.rp-flow-step:not(:last-child)::after { content: "\25B6"; position: absolute; right: -24px; top: 24px; color: #2f6fb0; font-size: 16px; }
.rp-flow-h { background: #2fa6d4; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 12px 14px; line-height: 1.25; }
.rp-flow-step p { font-size: 16px; line-height: 1.5; color: #333; margin: 0; padding: 16px 14px; }
@media (max-width: 900px) {
  .rp-statgrid { grid-template-columns: repeat(2, 1fr); }
  .rp-pp-grid { grid-template-columns: 1fr; }
  .rp-comps { grid-template-columns: repeat(2, 1fr); }
  .rp-comp { border-right: none !important; border-bottom: 1px solid #d3e4f1; }
  .rp-flow { flex-direction: column; gap: 26px; }
  .rp-flow-step:not(:last-child)::after { content: "\25BC"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
}

/* --------- Responsible Procurement screenshot 3 --------- */
.rp-note { background: #fff; border: 1px solid #29abe2; border-radius: 6px; padding: 24px 28px; margin: 20px 0 26px; box-shadow: 0 12px 26px rgba(0,160,224,.20); }
.rp-note p { font-size: 16px; line-height: 1.55; color: #1c8fd4; font-weight: 600; margin: 0; }
.rp-esg { display: grid; grid-template-columns: 40px 1fr; gap: 18px; margin: 20px 0 26px; }
.rp-esg-label { background: #2f8fd0; display: flex; align-items: center; justify-content: center; }
.rp-esg-label span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; }
.rp-esg-rows { display: flex; flex-direction: column; gap: 18px; }
.rp-esg-row { display: grid; grid-template-columns: 178px 22px 1fr; align-items: stretch; gap: 8px; }
.rp-esg-icon { display: flex; align-items: center; justify-content: center; padding: 26px 20px; }
.rp-esg-icon img { width: 100%; height: auto; }
.rp-esg-env img { max-width: 132px; }
.rp-esg-soc img { max-width: 82px; }
.rp-esg-gov img { max-width: 122px; }
.rp-esg-env { background: #4a9d5b; }
.rp-esg-soc { background: #2f9fd0; }
.rp-esg-gov { background: #e8823a; }
.rp-esg-arrow { align-self: center; color: #2f6fb0; font-size: 16px; text-align: center; }
.rp-esg-box { background: #eef4fb; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.rp-esg-box p { font-size: 16px; line-height: 1.55; color: #333; margin: 0 0 14px; }
.rp-esg-box p:last-child { margin-bottom: 0; }
.rp-esg-box strong { color: #1d3a5c; }
.rp-crit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cfe0ef; margin: 18px 0 22px; }
.rp-crit { text-align: center; padding: 24px 16px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f6fb0; line-height: 1.35; border-bottom: 1px solid #cfe0ef; border-right: 1px solid #cfe0ef; }
.rp-crit:nth-child(4n) { border-right: none; }
.rp-gradetable { width: 100%; border-collapse: collapse; margin: 16px 0 30px; max-width: 660px; }
.rp-gradetable thead th { background: #d7e6f4; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: left; padding: 11px 18px; border-bottom: 2px solid #2f6fb0; }
.rp-gradetable tbody td { font-size: 16px; color: #333; padding: 11px 18px; border-bottom: 1px solid #dbe6ef; }
.rp-gradetable tbody tr:last-child td { border-bottom: 2px solid #2f6fb0; }
/* ----- RP screenshot 4 (Project SETU / Digital Platform) -----
   Tab motif (matches PDF): icon+title with a thick steel-blue bar underneath;
   a thinner cyan line steps up to the right and frames the box (open on the left,
   paragraph text flush-left; icon sticks up above the frame). */
.rp-setu-panel { background: #e7f1fa; padding: 8px 32px 30px; margin: 8px 0 30px; }
.rp-setu-panel .hc-subhead { margin-top: 24px; }
.rp-setu-panel .hc-quotepanel { margin-bottom: 6px; }
.rp-setu-icon { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; }
.rp-setu-title { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #1d3a5c; line-height: 1.2; }
.rp-setu { margin: 30px 0 36px; }
.rp-setu-card { position: relative; padding-top: 48px; margin-bottom: 30px; }
.rp-setu-head { position: absolute; top: 0; left: 0; z-index: 2; height: 48px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 12px; background: #fff; padding: 0 22px 0 0;
  border-bottom: 5px solid #6398c8; }
.rp-setu-box { border: 2px solid #56afd6; border-left: none; padding: 16px 28px 18px 0; }
.rp-setu-box p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #333; margin: 0 0 10px; }
.rp-setu-box p:last-child { margin-bottom: 0; }
.rp-setu-ul { list-style: none; margin: 6px 0 0; padding: 0; }
.rp-setu-ul li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 8px; }
.rp-setu-ul li:last-child { margin-bottom: 0; }
.rp-setu-ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: #8860a0; }
.rp-iconhead { display: flex; align-items: flex-end; margin: 14px 0 20px; }
.rp-ih-tab { display: flex; align-items: center; gap: 12px; height: 48px; box-sizing: border-box;
  padding: 0 22px 0 0; border-bottom: 5px solid #6398c8; }
.rp-iconhead::after { content: ""; flex: 1 1 auto; height: 2px; background: #56afd6; margin-bottom: 6px; }
.rp-dp { background: #e7f1fa; padding: 24px 30px 28px; margin: 4px 0 30px; }
.rp-dp > p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #333; margin: 0 0 12px; }
.rp-dp-lead { margin-top: 18px !important; }
.rp-dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfe0ef; margin: 4px 0 6px; }
.rp-dp-item { padding: 22px 28px; border-bottom: 1px solid #cfe0ef; border-right: 1px solid #cfe0ef; }
.rp-dp-item:nth-child(3n+1) { padding-left: 0; }
.rp-dp-item:nth-child(3n) { border-right: none; padding-right: 0; }
.rp-dp-item:nth-child(n+4) { border-bottom: none; }
.rp-dp-item p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #333; margin: 0; }
.rp-dp-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1d3a5c; margin: 0 0 8px; }
.rp-dp-vc { border-top: 1px solid #cfe0ef; padding-top: 22px; margin-top: 10px; }
.rp-dp-vc p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #333; margin: 0; }

/* ----- RP screenshot 5 (dash statement / risk table / photo card / eval boxes) ----- */
.rp-leadstat { position: relative; font-family: 'Noto Sans', serif; font-weight: 700; font-size: 26px;
  line-height: 1.4; color: #00a0dc; margin: 16px 0 28px; padding-left: 34px; }
.rp-leadstat::before { content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 3px; background: #2b8fc9; }
/* lead text (left) + risk table (right) */
.rp-leadrow { display: flex; gap: 40px; align-items: flex-start; margin: 20px 0 32px; flex-wrap: wrap; }
.rp-leadrow .rp-leadstat { flex: 0 0 490px; margin: 0; }
.rp-leadrow .rp-risktable { flex: 1 1 480px; margin: 0; }

.rp-risktable { border-collapse: collapse; width: 100%; max-width: 640px; margin: 4px 0 32px; }
.rp-risktable thead th { background: #dbeaf6; color: #1d3a5c; font-family: 'Noto Sans', sans-serif; font-weight: 700;
  font-size: 16px; text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 2px solid #4a90c8; }
.rp-risktable tbody td { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; padding: 13px 18px; border-bottom: 1px solid #e2ebf3; }
.rp-risktable tbody td:first-child { font-weight: 600; color: #1d3a5c; }
.rp-risktable tbody tr:last-child td { border-bottom: 2px solid #4a90c8; }

.rp-photocard { position: relative; display: flex; align-items: flex-end; margin: 0 0 38px; }
.rp-pc-img { flex: 0 0 auto; max-width: 600px; }
.rp-pc-img img { display: block; width: 100%; height: auto; }
.rp-pc-card { position: relative; z-index: 2; flex: 1 1 auto; margin: 0 0 44px -80px; background: #fff;
  box-shadow: 0 8px 26px rgba(20, 50, 80, .16); padding: 26px 30px; }
.rp-pc-h { font-family: 'Noto Sans', serif; font-weight: 600; font-size: 22px; line-height: 1.3; color: #2b8fc9; margin: 0 0 14px; }
.rp-pc-card p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #333; margin: 0; }

.rp-evalblk { position: relative; padding-top: 40px; margin-bottom: 30px; }
.rp-tab-blue { position: absolute; top: 0; left: 0; z-index: 2; height: 40px; box-sizing: border-box;
  display: inline-flex; align-items: center; background: #fff; padding: 0 22px 0 0; border-bottom: 5px solid #6398c8; }
.rp-tab-blue span { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f6fb0; }
.rp-eval-box { border: 2px solid #56afd6; border-left: none; padding: 20px 30px 24px 0; }
.rp-eval-box > p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.65; color: #333; margin: 0 0 16px; }
.rp-evl { display: grid; grid-template-columns: 1fr 1fr; }
.rp-evl-item { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #333; padding: 12px 0 9px; border-bottom: 1px solid #bcd9ec; }
.rp-evl-item:nth-child(odd) { padding-right: 26px; }
.rp-evl-item:nth-child(even) { padding-left: 26px; border-left: 1px solid #bcd9ec; }
.rp-evl-stats { display: grid; grid-template-columns: 1fr 1fr; row-gap: 26px; margin-top: 22px; }
.rp-evl-stat:nth-child(odd) { padding-right: 26px; }
.rp-evl-stat:nth-child(even) { padding-left: 26px; }
.rp-evl-num { display: block; font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; color: #2b8fc9; margin-bottom: 8px; }
.rp-evl-lbl { display: block; font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.45; color: #555; }

/* ----- RP screenshot 6 (Supplier Development Initiatives boxes) ----- */
.rp-init-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 28px; }
.rp-init-row3 { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rp-widephoto { margin: 8px 0 34px; }
.rp-widephoto img { display: block; width: 100%; height: auto; }
.rp-initbox { border-top: 2px solid #56afd6; border-right: 2px solid #56afd6; padding: 20px 24px 22px 0; margin-bottom: 28px; }
.rp-init-head { display: flex; gap: 10px; margin-bottom: 14px; }
.rp-init-bar { flex: 0 0 5px; align-self: stretch; background: #2f6fb0; }
.rp-init-title { margin: 0; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25;
  color: #00bff3; text-transform: uppercase; }
.rp-init-name { color: #2f6fb0; }
.rp-init-list { list-style: none; margin: 0; padding: 0; }
.rp-init-list li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;;
  line-height: 1.6; color: #333; margin-bottom: 14px; }
.rp-init-list li:last-child { margin-bottom: 0; }
.rp-init-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #2f92d1; }

@media (max-width: 900px) {
  .rp-esg-row { grid-template-columns: 120px 18px 1fr; }
  .rp-init-row, .rp-init-row3 { grid-template-columns: 1fr; gap: 0; }
  .rp-crit-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-crit:nth-child(4n) { border-right: 1px solid #cfe0ef; }
  .rp-crit:nth-child(2n) { border-right: none; }
  .rp-dp-grid { grid-template-columns: 1fr; }
  .rp-dp-item { border-right: none !important; padding-left: 0; padding-right: 0; }
  .rp-dp-item:nth-child(n+4) { border-bottom: 1px solid #cfe0ef; }
  .rp-dp-item:last-child { border-bottom: none; }
  .rp-setu-box { padding-left: 0; }
  .rp-leadstat { font-size: 21px; }
  .rp-photocard { flex-direction: column; align-items: stretch; }
  .rp-pc-img { max-width: none; }
  .rp-pc-card { margin: -40px 16px 0; }
  .rp-evl, .rp-evl-stats { grid-template-columns: 1fr; }
  .rp-evl-item:nth-child(even) { border-left: none; padding-left: 0; }
  .rp-evl-item:nth-child(odd) { padding-right: 0; }
  .rp-evl-stat:nth-child(even) { padding-left: 0; margin-top: 16px; }
}

/* ============================================================= GOVERNANCE (.gov-*)
   Orange palette: primary #e47e3a, terracotta #a85930, cream #fcefe2 */
.gov-hero { min-height: auto; background: #fdeee1; overflow: hidden; display: flex; flex-direction: column;
padding-top: 110px; }
.gov-hero .container { padding-top: 130px; padding-bottom: 40px; }
.gov-eyebrow { display: block; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1a1a1a; margin-bottom: 14px; }
.gov-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(32px, 4vw, 40px); line-height: 1.08; color: #f47721; margin: 0; max-width: 470px; }
.gov-lead { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.75; color: #40382f; margin: 30px 0 4px; max-width: none; }
.gov-body { background: #fff; }

/* ----- Key Highlights panel ----- */
.gov-hl { display: grid; grid-template-columns: 1.7fr 1fr; gap: 46px; margin: 40px 0 44px; align-items: start; }
.gov-hl-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #1a1a1a; margin: 0 0 18px; }
.gov-hl-main .gov-hl-h { margin-top: 0; }
.gov-hl-main .gov-caps ~ .gov-hl-h, .gov-hl-main > .gov-hl-h:nth-of-type(2) { margin-top: 30px; }
.gov-hl-side .gov-hl-h { margin-top: 30px; }
.gov-hl-side > .gov-hl-h:first-child { margin-top: 0; }
.gov-hl-side > .gov-hl-h:nth-of-type(2) { margin-top: 96px; }  /* align "SDG Alignment" with "Capitals Impacted" */

.gov-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
.gov-stat { display: flex; flex-direction: column; }
.gov-stat-lbl { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: #e47e3a; padding-bottom: 8px; border-bottom: 1px solid #e6cdb5; }
.gov-stat-sub { font-family: 'Noto Sans', sans-serif; font-size: 12.5px; color: #8a7a68; margin-top: 5px; }
.gov-stat-val { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; margin-top: 9px; }

.gov-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.gov-cap { display: flex; align-items: center; gap: 12px; }
.gov-cap img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.gov-cap span { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; line-height: 1.3; }

.gov-mts { display: flex; flex-direction: column; gap: 12px; }
.gov-mt { display: flex; align-items: center; gap: 12px; }
.gov-mt-code { flex: 0 0 auto; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 12px; color: #e47e3a; background: transparent; border: 1px solid #e47e3a; border-radius: 3px; padding: 3px 8px; }
.gov-mt-lbl { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; }

.gov-sdg { display: flex; flex-wrap: wrap; gap: 8px; }
.gov-sdg img { width: 58px; height: 58px; }
.gov-gri { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }

/* ----- hero illustration band (on the banner) + overlaid quote ----- */
.gov-hero-figure { position: relative; flex: 0 0 auto; margin: auto 0 0; overflow: hidden; }
.gov-hero-illus { display: block; width: 100%; height: auto; }

/* ----- screenshot 2: philosophy tenets (design-team badge SVG), committees, org chart ----- */
.gov-tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 40px; }
.gov-tenet { position: relative; aspect-ratio: 541 / 434; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 6% 20%; box-sizing: border-box;
  background: url("../images/governance-philosophy-badge.svg") center center / contain no-repeat; }
.gov-tenet-in { max-width: 100%; }
.gov-tenet-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #222; margin: 0 0 7px; }
.gov-tenet-in p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.4; color: #40382f; margin: 0; }

/* floated photos (text flows beside) */
.gov-float-right { float: right; width: 46%; max-width: 480px; margin: 6px 0 22px 36px; }
.gov-float-left { float: left; width: 46%; max-width: 480px; margin: 6px 36px 22px 0; }
.gov-float-left img, .gov-float-right img { display: block; width: 100%; max-width: none; height: auto; }
.gov-clear { clear: both; }
.gov-hub-fig { margin: 30px 0 8px; }
.gov-hub-fig img { display: block; width: 100%; height: auto; }

.gov-comms { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin: 20px 0 40px; }
.gov-comm-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; margin: 0 0 8px; }
.gov-comm p { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.55; color: #40382f; margin: 0; }

.gov-org { margin: 20px 0 40px; background: #fcecdd; padding: 32px; }
.gov-org-head { background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: center; padding: 12px 18px; }
.gov-org-box { display: grid; border: 1px solid #e6d3c0; border-top: none; box-shadow: 0 6px 16px rgba(120, 70, 30, .08); }
.gov-org-r3 { grid-template-columns: repeat(3, 1fr); }
.gov-org-r4 { grid-template-columns: repeat(4, 1fr); }
.gov-org-cell { padding: 26px 20px; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.4; color: #40382f; border-right: 1px solid #ecdccb; }
.gov-org-box > .gov-org-cell:last-child { border-right: none; }
.gov-org-arrow { text-align: center; color: #e47e3a; font-size: 16px; line-height: 1; margin: 8px 0; }
.gov-org-single { border: 1px solid #e6d3c0; box-shadow: 0 6px 16px rgba(120, 70, 30, .08); text-align: center; padding: 16px; font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; max-width: 420px; margin: 0 auto; }

/* ----- screenshot 3: stat groups, election methodology, lead lists ----- */
.gov-h4 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #1c1c2b; margin: 26px 0 12px; }
.gov-pill { display: inline-block; background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; padding: 8px 20px; }
.gov-pill-center { display: block; text-align: center; }
.gov-sg { margin: 0 0 34px; }
.gov-sg-grid { display: grid; gap: 28px 34px; margin-top: 22px; }
.gov-sg-4 { grid-template-columns: repeat(4, 1fr); }
.gov-sg-3 { grid-template-columns: repeat(3, 1fr); }
.gov-sg-2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.gov-nstat .gov-num { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: #e47e3a; margin: 0; }
.gov-num-note { font-size: 16px; font-weight: 700; margin-left: 6px; }
.gov-num-dash { display: block; width: 22px; height: 3px; background: #e47e3a; margin: 10px 0 9px; }
.gov-num-lbl { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.4; color: #40382f; margin: 0; }
.gov-lstat .gov-lstat-lbl { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: #e47e3a; margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid #e6cdb5; }
.gov-lstat .gov-lstat-val { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; margin: 0; }

.gov-ll { list-style: none; margin: 4px 0 8px; padding: 0; }
.gov-ll li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin-bottom: 12px; }
.gov-ll li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #444; }
.gov-ll li strong { color: #1c1c2b; }

.gov-elect { margin: 14px 0 36px; }
.gov-elect-box { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; border: 1px solid #e6d3c0; border-top: none; box-shadow: 0 6px 16px rgba(120, 70, 30, .08); padding: 30px 34px; }
.gov-elect-item { display: flex; gap: 16px; align-items: flex-start; }
.gov-elect-n { flex: 0 0 auto; font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 22px; color: #e47e3a; border-left: 2px solid #e47e3a; border-bottom: 2px solid #e47e3a; padding: 2px 0 6px 8px; line-height: 1; }
.gov-elect-item p { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.5; color: #40382f; margin: 4px 0 0; }

/* ----- screenshot 4: policies, plain bullets, mega stat, orange quote ----- */
.gov-bluehead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f92d1; margin: 22px 0 12px; }
.gov-ul { list-style: none; margin: 4px 0 14px; padding: 0; }
.gov-ul li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin-bottom: 10px; }
.gov-ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #444; }
.gov-mega { margin: 26px 0 30px; }
.gov-mega-num { font-family: 'Noto Sans', serif; font-weight: 800; font-size: 56px; line-height: 1; color: #e47e3a; margin: 0; }
.gov-mega .gov-num-dash { width: 26px; height: 3px; margin: 14px 0 10px; }
.gov-mega-lbl { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; margin: 0; max-width: 360px; }
.gov-quotepanel { position: relative; background: #a85930; border-radius: 8px; padding: 40px 44px; margin: 34px 0 10px; overflow: hidden; }
.gov-quotepanel-mark { width: 50px; height: auto; margin-bottom: 14px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.gov-quotepanel p { position: relative; font-family: 'Noto Sans', serif; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 600; color: #fff; margin: 0;}
.gov-oquote { display: flex; gap: 16px; margin: 30px 0 12px; }
.gov-oquote-dash { flex: 0 0 26px; height: 3px; background: #e47e3a; margin-top: 18px; }
.gov-oquote p { font-family: 'Noto Sans', serif; font-weight: 600; font-size: clamp(19px, 2vw, 25px); line-height: 1.42; color: #e47e3a; margin: 0; }
a.goveratagcolorblck{
    color: #000;
    font-weight: 600;
}
/* ----- screenshot 5: photo, reporting-process box, breaches table ----- */
.gov-photo { margin: 8px 0 34px; }
.gov-photo img { display: block; width: 100%; max-width: 860px; height: auto; }
.gov-proc { margin: 14px 0 36px; }
.gov-proc-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; border: 1px solid #e6d3c0; border-top: none; box-shadow: 0 6px 16px rgba(120, 70, 30, .08); padding: 32px 36px; }
.gov-proc-item { display: flex; gap: 16px; align-items: flex-start; }
.gov-proc-n { flex: 0 0 auto; font-family: 'Noto Sans', sans-serif; font-weight: 800; font-size: 22px; color: #e47e3a; border-left: 2px solid #e47e3a; border-bottom: 2px solid #e47e3a; padding: 2px 0 6px 8px; line-height: 1; }
.gov-proc-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #e47e3a; margin: 0 0 7px; }
.gov-proc-body p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }

.gov-btable { width: 100%; border-collapse: collapse; margin: 16px 0 22px; }
.gov-btable thead th { background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: left; padding: 13px 20px; }
.gov-btable thead th:last-child { text-align: center; }
.gov-btable tbody td { font-family: 'Noto Sans', sans-serif; font-size: 16px;; color: #40382f; padding: 13px 20px; border-bottom: 1px solid #ecdccb; }
.gov-btable tbody td:last-child { text-align: center; }
.gov-btable tbody tr:last-child td { border-bottom: 2px solid #e47e3a; }

/* ----- screenshot 6: cream band, policy-advocacy hub ----- */
.gov-cream { background: #fcefe2; width: 100vw; margin-left: calc(50% - 50vw); padding: 44px calc(50vw - 50%) 48px; box-sizing: border-box; }
.gov-cream > *:first-child { margin-top: 0; }
.gov-hub { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 30px; margin: 30px 0 8px; }
.gov-hub-item { background: #fff; padding: 18px 20px; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(120, 70, 30, .07); }
.gov-hub-col:last-child .gov-hub-item, .gov-hub-item:last-child { margin-bottom: 0; }
.gov-hub-t { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #e47e3a; margin: 0 0 8px; }
.gov-hub-item p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #40382f; margin: 0; }
.gov-hub-mid { display: flex; justify-content: center; }
.gov-hub-circle { width: 210px; height: 210px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(120, 70, 30, .12); display: flex; align-items: center; justify-content: center; text-align: center; padding: 22px; box-sizing: border-box; }
.gov-hub-circle span { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; color: #1c1c2b; }

/* ----- screenshot 7: association/principle logo cards ----- */
.gov-lcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; margin: 20px 0 34px; }
.gov-lc-logo { height: 54px; display: flex; align-items: center; margin-bottom: 14px; }
.gov-lc-logo img { max-height: 54px; max-width: 180px; width: auto; object-fit: contain; }
.gov-lc-name { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: #2f92d1; margin: 0 0 8px; }
.gov-lc p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }
.gov-note { font-family: 'Noto Sans', sans-serif; font-size: 16px; font-style: italic; line-height: 1.55; color: #7a6a58; margin: 18px 0 30px; max-width: 640px; }
.gov-split { display: flex; align-items: flex-start; gap: 44px; margin: 24px 0 34px; }
.gov-split-img { flex: 0 0 36%; max-width: 400px; }
.gov-split-img img { display: block; width: 100%; height: auto; }
.gov-split-body { flex: 1 1 auto; min-width: 0; }
.gov-split-body > .hc-subhead:first-child { margin-top: 0; }
.gov-split-body .gov-lcgrid { grid-template-columns: repeat(2, 1fr); gap: 28px 34px; }
.gov-photo-portrait { margin: 8px 0 20px; }
.gov-photo-portrait img { display: block; width: 100%; max-width: 420px; height: auto; }

@media (max-width: 900px) {
  .gov-title { font-size: 36px; }
  .gov-hl { grid-template-columns: 1fr; gap: 34px; }
  .gov-hl-side > .gov-hl-h:nth-of-type(2) { margin-top: 30px; }
  .gov-stats { gap: 20px 24px; }
  .gov-hero-quote { position: static; transform: none; width: auto; max-width: none; background: #a85930; padding: 22px 18px 26px; }
  .gov-hero-quote p { font-size: 18px; }
  .gov-float-left, .gov-float-right { float: none; width: 100%; max-width: 100%; margin: 8px 0 22px; }
  .gov-tenets { grid-template-columns: 1fr; gap: 24px; }
  .gov-comms { grid-template-columns: 1fr; gap: 22px; }
  .gov-org-r3, .gov-org-r4 { grid-template-columns: 1fr; }
  .gov-org-cell { border-right: none; border-bottom: 1px solid #ecdccb; }
  .gov-sg-4 { grid-template-columns: repeat(2, 1fr); }
  .gov-sg-3 { grid-template-columns: repeat(2, 1fr); }
  .gov-elect-box { grid-template-columns: 1fr; }
  .gov-oquote p { font-size: 18px; }
  .gov-proc-box { grid-template-columns: 1fr; }
  .gov-hub { grid-template-columns: 1fr; gap: 0; }
  .gov-hub-mid { order: -1; margin-bottom: 22px; }
  .gov-lcgrid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

/* ============================================================= DIGITALISATION & CYBERSECURITY (.dc-*)
   Orange palette (shared with Governance): primary #e47e3a, terracotta #a85930, cream #fcefe2 */
.dc-hero { min-height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 110px;
     background: #a85930; 
     }
.dc-hero .container { padding-top: 130px; padding-bottom: 24px; flex: 0 0 auto; }
.dc-eyebrow { display: block; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #ecc7a9; margin-bottom: 14px; }
.dc-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; color: #f8e9dc; margin: 0;
padding-bottom: 40px;  }
.dc-hero-figure { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dc-hero-illus { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.dc-body { background: #fff;
padding-top: 0; }
.dc-lead { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.75; color: #40382f; margin: 0 0 18px; max-width: none; }
.dc-body > .container > .dc-lead:first-child { margin-top: 34px; }

/* ----- opener: two info boxes + Key Highlights + sidebar ----- */
.dc-hl { display: grid; grid-template-columns: 1.7fr 1fr; gap: 46px; margin: 32px 0 10px; }
.dc-hl-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #1c1c2b; margin: 30px 0 18px; }
.dc-hl-main > .dc-hl-h:first-of-type { margin-top: 34px; }
.dc-hl-side > .dc-hl-h:first-child { margin-top: 0; }

.dc-boxes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.dc-boxes-arrow { color: #e47e3a; font-size: 20px; line-height: 1; }
.dc-infobox { border: 1px solid #e6cdb5; align-self: stretch; }
.dc-infobox-h { background: #fcefe2; color: #e47e3a; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; padding: 10px 16px; border-bottom: 1px solid #e6cdb5; }
.dc-infobox-ul { list-style: none; margin: 0; padding: 14px 16px; }
.dc-infobox-ul li { position: relative; padding-left: 16px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #40382f; margin-bottom: 9px; }
.dc-infobox-ul li:last-child { margin-bottom: 0; }
.dc-infobox-ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: #e47e3a; }

.dc-khl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; }
.dc-khl li { position: relative; padding-left: 22px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; color: #e47e3a; }
.dc-khl li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 2px; background: #e47e3a; }

.dc-mts { display: flex; flex-direction: column; gap: 12px; }
.dc-mt { display: flex; align-items: center; gap: 12px; }
.dc-mt-code { flex: 0 0 auto; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 12px; color: #e47e3a; border: 1px solid #e47e3a; border-radius: 3px; padding: 3px 8px; }
.dc-mt-lbl { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; }

.dc-caps { display: flex; flex-direction: column; gap: 16px; }
.dc-cap { display: flex; align-items: center; gap: 12px; }
.dc-cap img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.dc-cap span { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; line-height: 1.3; }

.dc-sdg { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-sdg img { width: 60px; height: 60px; }
.dc-gri { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }

/* ----- screenshot 2: black h4, bullet lists, smart-tech cards, platform diagram ----- */
.dc-h4 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; color: #1c1c2b; margin: 26px 0 12px; }
.dc-ul { list-style: none; margin: 4px 0 16px; padding: 0; }
.dc-ul li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin-bottom: 10px; }
.dc-ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #8860a0; }
.dc-ul li strong { color: #1c1c2b; }

.dc-smartbox { background: #fcefe2; padding: 28px 30px; margin: 26px 0 36px; }
.dc-smartbox-lead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; color: #1c1c2b; margin: 0 0 22px; }
.dc-techcards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dc-techcard { background: #fff; padding: 22px 24px; border-bottom: 3px solid #e47e3a; box-shadow: 0 4px 14px rgba(120, 70, 30, .06); }
.dc-techcard h4 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; margin: 0 0 12px; }
.dc-techcard p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0 0 12px; }
.dc-techcard p:last-child { margin-bottom: 0; }

.dc-platform { margin: 26px 0 40px; }
.dc-plat-nodes { display: flex; align-items: stretch; }
.dc-node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.dc-node-arrow { flex: 0 0 auto; align-self: flex-start; margin-top: 74px; color: #e47e3a; font-size: 16px; padding: 0 6px; }
.dc-node-top { border-top: 2px solid #e47e3a; border-left: 1px solid #f0dcc9; border-right: 1px solid #f0dcc9; padding: 16px 12px 20px; text-align: center; flex: 1 1 auto; }
.dc-node-icon { height: 42px; width: auto; display: inline-block; }
.dc-node-head span { display: block; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px solid #e6d3c0; }
.dc-node-logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-top: 18px; }
.dc-node-logos img { max-height: 30px; max-width: 118px; width: auto; object-fit: contain; }
.dc-node-cap { background: #fcefe2; margin-top: 14px; padding: 14px 10px; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.35; color: #40382f; flex: 0 0 auto; }
.dc-plat-conn { position: relative; height: 34px; }
.dc-plat-uman { height: 16px; margin: 0 9%; border: 1px solid #7a7a7a; border-top: none; }
.dc-plat-vdrop { position: absolute; left: 50%; margin-left: -0.5px; top: 16px; width: 1px; height: 18px; background: #7a7a7a; }
.dc-plat-mw { background: #fcefe2; padding: 26px 30px; }
.dc-plat-mw-title { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; text-align: center; margin: 0 0 20px; }
.dc-plat-cc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.dc-plat-cc-col { text-align: center; }
.dc-plat-cc-col h5 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; margin: 0 0 7px; }
.dc-plat-cc-col p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.4; color: #40382f; margin: 0; }
.dc-plat-cc-arrow { color: #e47e3a; font-size: 26px; line-height: 1; }

/* ----- screenshot 3: L-frame boxes, plum bullets, lead paras, Vizhinjam box ----- */
.dc-lframe { position: relative; margin: 8px 0 32px; padding: 0 24px 24px 0; border-right: 2px solid #e47e3a; border-bottom: 2px solid #e47e3a; }
.dc-lframe-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dc-lframe-h span { flex: 0 1 auto; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: #1c1c2b; }
.dc-lframe-h::after { content: ""; flex: 1 1 auto; height: 6px; background: #ef9a5c; margin-right: -24px; }
.dc-lframe-body > *:first-child { margin-top: 0; }
.dc-lf-sub { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; line-height: 1.45; color: #8a7a68; margin: 18px 0 10px; }
.dc-lf-p { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin: 0 0 14px; }
.dc-lf-p strong { color: #1c1c2b; }
.dc-lf-plain { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin: 0 0 12px; }
.dc-lf-note { font-family: 'Noto Sans', sans-serif; font-style: italic; font-size: 13px; line-height: 1.5; color: #8a7a68; margin: 6px 0 0; }

.dc-pul { list-style: none; margin: 4px 0 14px; padding: 0; }
.dc-pul li { position: relative; padding-left: 20px; font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin-bottom: 10px; }
.dc-pul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #8860a0; }
.dc-pul li strong { color: #1c1c2b; }

.dc-leadp { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; color: #1c1c2b; margin: 22px 0 12px; }

.dc-vizbox { border: 1.5px solid #e47e3a; box-shadow: 0 6px 18px rgba(120, 70, 30, .10); padding: 30px 34px; margin: 12px 0 30px; }
.dc-vizbox > *:first-child { margin-top: 0; }
.dc-orangehead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; color: #e47e3a; margin: 0 0 12px; }
.dc-vizintro { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #e47e3a; margin: 0 0 14px; }
.dc-vizintro strong { font-weight: 700; }
.dc-orangesub { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #e47e3a; margin: 22px 0 12px; }

/* ----- screenshot 4: roadmap, strategic command centre, customer-satisfaction columns ----- */
.dc-roadmap { margin: 24px 0 40px; }
.dc-rm-icons { display: flex; align-items: center; margin-bottom: 12px; }
.dc-rm-icons .cell { flex: 1 1 0; display: flex; justify-content: center; }
.dc-rm-icons .arr { flex: 0 0 30px; text-align: center; color: #e47e3a; font-size: 16px; }
.dc-rm-icon { height: 44px; width: auto; }
.dc-rm-cols { display: flex; align-items: stretch; }
.dc-rm-cols .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.dc-rm-cols .gap { flex: 0 0 30px; }
.dc-rm-head { background: #e47e3a; color: #fff; text-align: center; padding: 12px 10px; }
.dc-rm-yr { display: block; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; }
.dc-rm-sub { display: block; font-family: 'Noto Sans', sans-serif; font-size: 16px; margin-top: 2px; }
.dc-rm-body { background: #fcefe2; padding: 18px 16px; flex: 1 1 auto; }
.dc-rm-body > *:first-child { margin-top: 0; }
.dc-rm-body .dc-pul li { font-size: 16px; }
.dc-rm-sublbl { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px;; line-height: 1.35; color: #1c1c2b; margin: 18px 0 8px; }
.dc-rm-plain { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; margin: 12px 0 0; }

.dc-scc { margin: 20px 0 44px; }
.dc-scc-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.dc-scc-bar { flex: 0 0 5px; align-self: stretch; background: #e47e3a; }
.dc-scc-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.22; color: #e47e3a; text-transform: uppercase; margin: 0; }
.dc-scc-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 38px; align-items: start; }
.dc-scc-right { min-width: 0; }
.dc-scc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.dc-scc-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-scc-flow { background: #fcefe2; padding: 26px 22px; display: flex; align-items: center; gap: 12px; }
.dc-flow-arrow { flex: 0 0 auto; color: #e47e3a; font-size: 16px; }
.dc-flowbox { flex: 1 1 0; min-width: 0; align-self: center; background: #fdf6f0; box-shadow: 0 5px 16px rgba(120, 70, 30, .10); }
.dc-flowbox-apps { flex: 1.35 1 0; }
.dc-flowbox-users { flex: 0.82 1 0; }
.dc-flowbox-h { background: #e47e3a; color: #fff; text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; padding: 10px 12px; }
.dc-applist { padding: 8px 0; }
.dc-applist span { display: block; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.3; color: #40382f; padding: 11px 12px; margin: 0 18px; border-bottom: 1px solid #e88a4a; }
.dc-applist span:last-child { border-bottom: none; }
.dc-store-icons { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 12px; }
.dc-store-icons img { width: 64px; height: auto; }
.dc-users-icon { display: flex; justify-content: center; padding: 26px 12px; }
.dc-users-icon img { width: 64px; height: auto; }

.dc-custsat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 20px 0 40px; align-items: start; }
.dc-cs-head { border-bottom: 1.5px solid #e47e3a; margin: 0 0 8px; }
.dc-cs-col > .dc-cs-head:not(:first-child) { margin-top: 26px; }
.dc-cs-pill { display: inline-block; background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; padding: 8px 18px; position: relative; top: 1px; }
.dc-cs-item h5 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; color: #1c1c2b; margin: 18px 0 8px; }
.dc-cs-item p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }

/* ----- screenshot 5: CVP cards, orange box, survey-topics, results table ----- */
.dc-cvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 24px 0 22px; align-items: stretch; }
.dc-cvp-card { border: 1px solid #ead9c7; box-shadow: 0 8px 20px rgba(120, 70, 30, .10); padding: 16px 16px 24px; }
.dc-cvp-h { background: #e47e3a; color: #fff; text-align: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; padding: 12px 14px; }
.dc-cvp-card p { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; margin: 22px 0 0; padding: 0 6px; }

.dc-orangebox { border: 1.5px solid #e47e3a; box-shadow: 0 6px 18px rgba(120, 70, 30, .10); padding: 30px 34px; margin: 12px 0 30px; }
.dc-ob-h { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 20px; color: #e47e3a; margin: 0 0 14px; }
.dc-orangebox p { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #e47e3a; margin: 0 0 14px; }
.dc-orangebox p:last-child { margin-bottom: 0; }

.dc-topics { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 32px; }
.dc-topic-row { display: grid; grid-template-columns: 0.42fr 1fr; gap: 26px; align-items: stretch; }
.dc-topic-cat { background: #fcefe2; box-shadow: 0 5px 14px rgba(120, 70, 30, .08); padding: 20px 22px; display: flex; align-items: center; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; color: #1c1c2b; }
.dc-topic-find { display: flex; align-items: center; border-bottom: 1px solid #e2d5c6; padding-bottom: 16px; }
.dc-topic-find .dc-pul { margin: 0; }
.dc-topic-find .dc-pul li:last-child { margin-bottom: 0; }

.dc-rtable { width: 100%; border-collapse: collapse; margin: 14px 0 28px; }
.dc-rtable th { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1c1c2b; text-align: right; padding: 13px 18px; border-top: 2px solid #e47e3a; border-bottom: 1px solid #e6cdb5; }
.dc-rtable th.hl { background: #e47e3a; color: #fff; }
.dc-rtable td { font-family: 'Noto Sans', sans-serif; font-size: 16px; color: #40382f; text-align: right; padding: 13px 18px; border-bottom: 1px solid #e6cdb5; }
.dc-rtable td:first-child { text-align: left; color: #1c1c2b; }
.dc-rtable td.hl { background: #fdeee0; }
.dc-rtable tbody tr:last-child td { border-bottom: 2px solid #e47e3a; }

/* ----- screenshot 6: governance L-frame grid, responsibilities grid, incident panel ----- */
.dc-link { color: #8860a0; word-break: break-word; }
.dc-govgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin: 8px 0 32px; }
.dc-govgrid-right { display: flex; flex-direction: column; gap: 30px; }
.dc-govgrid .dc-lframe { margin: 0; }
.dc-govgrid .dc-lframe-body .dc-pul { margin-bottom: 0; }

.dc-respgrid { background: #fcefe2; padding: 30px 34px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px 0 34px; }
.dc-resp-cell { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #40382f; padding: 0 22px 26px; border-right: 1px solid #e2b184; }
.dc-resp-cell:nth-child(4n+1) { padding-left: 0; }
.dc-resp-cell:nth-child(4n) { padding-right: 0; border-right: none; }
.dc-resp-cell:last-child { border-right: none; }
.dc-resp-cell:nth-child(-n+4) { border-bottom: 1px solid #e2b184; }
.dc-resp-cell:nth-child(n+5) { padding-top: 26px; padding-bottom: 0; }

.dc-incident { background: #fcefe2; padding: 40px 44px; margin: 24px 0 34px; }
.dc-incident > .hc-subhead:first-child { margin-top: 0; }
.dc-inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 8px; }
.dc-inc-left { display: flex; flex-direction: column; gap: 30px; }
.dc-inc-block { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.6; color: #40382f; padding: 0 18px 18px 0; border-right: 1px solid #e2cab0; border-bottom: 2px solid #e47e3a; }
.dc-inc-block strong { font-weight: 700; color: #1c1c2b; }

/* ----- screenshot 7: consequence flow, initiatives table ----- */
.dc-conseq { background: #fcefe2; padding: 30px 34px; display: flex; align-items: flex-start; gap: 18px; margin: 8px 0 30px; }
.dc-cq-cell { flex: 1 1 0; min-width: 0; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; padding-bottom: 18px; border-bottom: 3px solid #e47e3a; align-self: stretch; }
.dc-cq-cell:last-child { flex: 1.4 1 0; }
.dc-cq-arrow { flex: 0 0 auto; color: #e47e3a; font-size: 16px; margin-top: 34px; }

.dc-itable { width: 100%; border-collapse: collapse; margin: 14px 0 30px; }
.dc-itable thead th { background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: left; padding: 14px 20px; }
.dc-itable td { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid #e6cdb5; }
.dc-itable td:first-child { background: #fcefe2; font-weight: 700; color: #1c1c2b; width: 21%; }
.dc-itable th:first-child { width: 21%; }

/* ----- screenshot 8: PIA key-steps table ----- */
.dc-piatable { width: 100%; border-collapse: collapse; margin: 14px 0 30px; }
.dc-piatable thead th { background: #e47e3a; color: #fff; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: left; padding: 13px 20px; }
.dc-piatable td { font-family: 'Noto Sans', sans-serif; font-size: 16px;; line-height: 1.55; color: #40382f; vertical-align: top; padding: 14px 20px; border-bottom: 1px solid #e6cdb5; }
.dc-piatable td:first-child { font-weight: 700; color: #1c1c2b; width: 27%; background: #fcefe2; }
.dc-piatable tbody tr:last-child td { border-bottom: 2px solid #e47e3a; }

/* ----- screenshot 9: data-protection boxes ----- */
.dc-protectboxes { margin: 14px 0 26px; }
.dc-pb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 26px; }
.dc-pb-box { background: #fcefe2; border: 1px solid #f0e4d5; padding: 20px 22px; }
.dc-pb-box h5 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; color: #1c1c2b; margin: 0 0 12px; }
.dc-pb-box p { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.55; color: #40382f; margin: 0; }
.dc-ol { margin: 4px 0 18px; padding-left: 22px; }
.dc-ol li { font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #40382f; margin-bottom: 12px; padding-left: 6px; }
.dc-ol li strong { color: #1c1c2b; }
.dc-figure { margin: 8px 0 20px; }
.dc-figure img { width: 100%; height: auto; display: block; }

/* ----- shared: subheads, quote panels ----- */
.dc-bluehead { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 16px; color: #2f92d1; margin: 22px 0 12px; }
.dc-quotepanel { position: relative; background: #a85930; border-radius: 8px; padding: 40px 44px; margin: 30px 0 12px; overflow: hidden; }
.dc-quotepanel-mark { width: 50px; height: auto; margin-bottom: 14px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.dc-quotepanel p { font-family: 'Noto Sans', sans-serif; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 600; color: #fff; margin: 0; }
.dc-oquote { display: flex; gap: 16px; margin: 30px 0 12px; }
.dc-oquote-dash { flex: 0 0 26px; height: 3px; background: #e47e3a; margin-top: 18px; }
.dc-oquote p { font-family: 'Noto Sans', serif; font-weight: 600; font-size: clamp(19px, 2vw, 25px); line-height: 1.42; color: #e47e3a; margin: 0;  }

@media (max-width: 900px) {
  .dc-title { font-size: 36px; }
  .dc-hl { grid-template-columns: 1fr; gap: 32px; }
  .dc-boxes { grid-template-columns: 1fr; }
  .dc-boxes-arrow { transform: rotate(90deg); justify-self: center; }
  .dc-khl { grid-template-columns: 1fr; }
  .dc-oquote p { font-size: 18px; }
  .dc-techcards { grid-template-columns: 1fr; }
  .dc-plat-nodes { flex-direction: column; }
  .dc-node-arrow { align-self: center; margin: 8px 0; transform: rotate(90deg); }
  .dc-plat-cc { grid-template-columns: 1fr; gap: 14px; }
  .dc-plat-cc-arrow { transform: rotate(90deg); justify-self: center; }
  .dc-rm-icons { display: none; }
  .dc-rm-cols { flex-direction: column; }
  .dc-rm-cols .gap { display: none; }
  .dc-rm-cols .col { margin-bottom: 18px; }
  .dc-scc-grid { grid-template-columns: 1fr; gap: 24px; }
  .dc-scc-flow { flex-direction: column; align-items: stretch; }
  .dc-flow-arrow { align-self: center; transform: rotate(90deg); }
  .dc-custsat { grid-template-columns: 1fr; gap: 28px; }
  .dc-cvp { grid-template-columns: 1fr; gap: 20px; }
  .dc-topic-row { grid-template-columns: 1fr; gap: 12px; }
  .dc-rtable { display: block; overflow-x: auto; white-space: nowrap; }
  .dc-govgrid { grid-template-columns: 1fr; gap: 30px; }
  .dc-respgrid { grid-template-columns: 1fr 1fr; }
  .dc-resp-cell { border-right: none !important; padding: 0 0 20px !important; border-bottom: 1px solid #e2b184; }
  .dc-resp-cell:nth-child(odd) { padding-right: 18px !important; }
  .dc-inc-grid { grid-template-columns: 1fr; gap: 30px; }
  .dc-conseq { flex-direction: column; gap: 16px; }
  .dc-cq-arrow { align-self: center; margin: 0; transform: rotate(90deg); }
  .dc-itable { display: block; overflow-x: auto; }
  .dc-pb-row { grid-template-columns: 1fr; gap: 18px; }
}

.apsezdivpara{
    background-color: #615c9d;
    padding: 30px 20px;
    margin-top: 20px;
}
.apsezdivpara p{
    color: #fff;
    padding-bottom: 15px;
}
.apsezlastp{
    background-color: #615c9d;
    padding: 30px 20px;
    margin-top: 20px;
}
.apsezlastp p{
    color: #fff;
}
.apsezlastp .ail-closing-list li{
    color: #fff;
}
.apsezlastp .ail-closing-list li::before{
    background-color: #fff;
}
.blueheadingport{
    color: #00a5e4 ;
}
.kpi-sub.submrgn0{
    margin: 0 0 5px 0;
}
.oppsecblue{
    color: #43408e;
}
h3.opp-sec-h.oppdarkblue{
    color: #43408e;
    margin-top: 30px;
}
.hc-hero.occup{
        min-height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 110px;
}
h2.ohs-mocktitle span{
    color: #00B4D8;
}
section.hc-hero.human {
    min-height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 110px;
}
.pl-hero--ohs {
    background: #e0f0fa;
}
 .pl-hero--ohs.occhas h1.hc-title {
    color: #00bff3;
    max-width: 470px;
}
 .pl-hero--ohs.occhas span.hc-eyebrow {
    color: #1a1a1a;
}
.pl-hero--ohs.occhas .container{
    padding-top: 0;
}
.pl-hero--ohs.occhas .container .row{
    align-items: center;
}
.gov-hero-figure{
        align-items: self-start;
    justify-content: end;
    margin: 0;
    text-align: right;
    display: flex;
}

.gov-hero.pl-hero--ohs.occhas{
    background-color: #fdeee1;
}
h3.ecch3blck{
    color: #000;
}
.hcsectiteblck {
    color: #000;
}