/* Sustainability page sections — uses the site's tokens (light #f6feff, dark #101828, green #00a886, blue #01a3bc, purple #7473b6) */
.sus { color: #63656A; --sus-green: #00a886; --sus-blue: #01a3bc; --sus-purple: #7473b6; --sus-dark: #63656A; --sus-light: #f6feff; --sus-gray: #646a73; --sus-line: rgba(99, 101, 106, .18); }
.sus h1, .sus h2, .sus h3, .sus h4, .sus h5, .sus p, .sus li { color: inherit; }
.sus .light_bg { color: #63656A; }
.sus .dark_bg { background-color: #63656A; }
.sus-card, .sus-video { color: #f6feff; }
.sus h3 { max-width: none; }
.sus p { line-height: 160%; }

/* Shared heading block */
.sus-head { display: flex; flex-direction: column; gap: 1em; max-width: 62em; }
.sus-head--plain { margin-bottom: 2.2em; }
.sus-head--center { align-items: center; text-align: center; max-width: 60em; margin-inline: auto; }
.sus-head--center p { font-size: 1.222em; line-height: 1.9; text-wrap: balance; }
.sus-panel { padding: 5.556em; display: flex; flex-direction: column; gap: 3.3em; }

/* Intro */
.sus-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.sus-intro__media { position: relative; margin: 0; min-height: 38em; overflow: hidden; background: #1c2b1f; }
.sus-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.sus-intro:hover .sus-intro__media img { transform: scale(1.06); }
.sus-intro__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 30, 27, 0) 52%, rgba(24, 30, 27, .38) 72%, rgba(24, 30, 27, .74) 100%); pointer-events: none; }
.sus-intro__quote { position: absolute; z-index: 1; inset-inline: 3em; bottom: 2.6em; margin: 0; display: flex; align-items: center; gap: 1em; color: #fff; }
.sus-intro__quote p { margin: 0; color: #fff; font-size: 1.222em; line-height: 150%; font-weight: 500; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.sus-intro__quote cite { display: flex; align-items: center; gap: .8em; font-style: normal; font-size: .95em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.sus-intro__quote cite span { width: 2.4em; height: 2px; border-radius: 2px; background: var(--sus-green); }
.sus-intro__mark { flex: none; width: 2.6em; height: 2.6em; margin-top: .2em; border-radius: 50%; background: var(--sus-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .35em rgba(255, 255, 255, .18); }
.sus-intro__mark svg { width: 1.05em; height: auto; }
[dir="rtl"] .sus-intro__mark svg { transform: scaleX(-1); }
.sus-intro__text { padding: 5.556em; display: flex; flex-direction: column; justify-content: center; gap: 1.6em; }
.sus-intro__text p { font-size: 1.333em; }

/* ESG pillars */
.sus-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1.4em; }
.sus-pillar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2em; padding: 2.2em 1em; background: #fff; border: 1px solid var(--sus-line); border-radius: 1.6em; }
.sus-pillar__num { position: absolute; top: 1.4em; inset-inline-end: 1.6em; font-size: .9em; font-weight: 600; color: var(--sus-gray); letter-spacing: .08em; }
.sus-pillar__icon { width: 6.5em; height: 6.5em; object-fit: contain; }
.sus-pillar h4 { font-size: 1.1em; margin: 0; line-height: 130%; white-space: nowrap; }
html:not([dir="rtl"]) .sus-pillar h4 { font-size: .85em; letter-spacing: 0; }
.sus-pillar:nth-child(4n+1) h4 { color: var(--sus-blue); }
.sus-pillar:nth-child(4n+2) h4 { color: var(--sus-green); }
.sus-pillar:nth-child(4n+3) h4 { color: var(--sus-purple); }
.sus-pillar:nth-child(4n+4) h4 { color: #2e8fa3; }

/* Feature cards */
.sus-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.sus-card { display: flex; flex-direction: column; color: #f6feff; }
.sus-card--green { background: var(--sus-green); }
.sus-card--blue { background: var(--sus-blue); }
.sus-card--purple { background: var(--sus-purple); }
.sus-card--dark { background: var(--sus-dark); }
.sus-card__image { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.sus-card__body { padding: 3.3em; display: flex; flex-direction: column; gap: 1em; }
.sus-card__head { display: flex; align-items: center; gap: 1.1em; }
.sus-card__icon { flex: none; width: 3.9em; height: 3.9em; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.sus-card h4 { font-size: 1.889em; margin: 0; line-height: 125%; }
.sus-card p { font-size: 1.222em; opacity: .95; }

/* Image & text rows */
.sus-rows { display: flex; flex-direction: column; gap: 1.6em; }
.sus-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sus-row__text { padding: 5.556em; display: flex; flex-direction: column; gap: 1.2em; }
.sus-row__media { margin: 0; padding: 3.3em; display: flex; align-items: center; justify-content: center; background: #fff; height: 100%; }
.sus-row__media img { width: 100%; max-height: 34em; object-fit: contain; }
.sus-row--flip .sus-row__text { order: 2; }
.sus-row--wide { grid-template-columns: 1fr; }
.sus-row--wide .sus-row__text { padding-bottom: 2.2em; }
.sus-row--wide .sus-row__media { padding: 0 5.556em 5.556em; background: transparent; }
.sus-row--wide .sus-row__media img { max-height: none; }
.sus-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; color: inherit; border-radius: 1.2em; overflow: hidden; cursor: zoom-in; }
.sus-zoom__hint { position: absolute; inset-inline-end: 1em; bottom: 1em; padding: .5em 1em; border-radius: 10em; background: rgba(99, 101, 106, .9); color: #f6feff; font-size: .8em; }

/* Video */
.sus-video { padding: 5.556em; display: flex; flex-direction: column; gap: 3em; }
.sus-video .sus-head p { opacity: .85; }
.sus-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1.6em; overflow: hidden; background: #4f5155; }
.sus-video__frame iframe, .sus-video__play, .sus-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sus-video__play { padding: 0; background: #4f5155; cursor: pointer; }
.sus-video__play img { object-fit: cover; opacity: .85; transition: opacity .3s; }
.sus-video__play:hover img { opacity: 1; }
.sus-video__icon { position: absolute; top: 50%; left: 50%; width: 5.5em; height: 5.5em; margin: -2.75em 0 0 -2.75em; border-radius: 50%; background: var(--sus-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .6em rgba(0, 168, 134, .3); transition: transform .3s; }
.sus-video__play:hover .sus-video__icon { transform: scale(1.08); }
.sus-video__soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.333em; opacity: .7; }

/* Reports */
.sus-year { display: flex; flex-direction: column; gap: 1.4em; }
.sus-year + .sus-year { padding-top: 3em; border-top: 1px solid var(--sus-line); }
.sus-year__label { font-size: 2.222em; margin: 0; color: var(--sus-green); }
.sus-reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.sus-report { background: #fff; border: 1px solid var(--sus-line); border-radius: 1.6em; overflow: hidden; display: flex; flex-direction: column; }
.sus-report__cover { position: relative; display: block; padding: 0; border: 0; color: inherit; background: #e8eef0; aspect-ratio: 16 / 9; cursor: pointer; overflow: hidden; }
.sus-report__cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.sus-report__cover:hover img { transform: scale(1.04); }
.sus-report__badge { position: absolute; top: 1em; inset-inline-start: 1em; padding: .45em 1em; border-radius: 10em; background: rgba(99, 101, 106, .9); color: #f6feff; font-size: .85em; }
.sus-report__body { padding: 1.8em 2em 2em; display: flex; flex-direction: column; gap: 1.2em; }
.sus-report--soon .sus-report__cover { cursor: default; }
.sus-report--soon .sus-report__cover:hover img { transform: none; }
.sus-report__soon { display: inline-flex; align-items: center; gap: .6em; height: 3em; padding: 0 1.4em; border-radius: 10em; background: rgba(99, 101, 106, .1); color: var(--sus-dark); font-size: .95em; }
.sus-report__soon::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--sus-green); }
.sus-report h5 { font-size: 1.222em; margin: 0; font-weight: 600; line-height: 140%; }
.sus-report__actions { display: flex; flex-wrap: wrap; gap: .8em; }
.sus-btn { display: inline-flex; align-items: center; justify-content: center; height: 3em; padding: 0 1.6em; border-radius: 10em; border: 1px solid var(--sus-dark); background: transparent; color: var(--sus-dark); font: inherit; font-size: .95em; cursor: pointer; text-decoration: none; transition: background .3s, color .3s; }
.sus-btn:hover { background: var(--sus-dark); color: #f6feff; }
.sus-btn--primary { background: var(--sus-green); border-color: var(--sus-green); color: #fff; }
.sus-btn--primary:hover { background: #008f72; border-color: #008f72; }

/* ESG strategy table (four pillar cards, reproduced from the sustainability report) */
.sus-esg { --esg-cyan: #00bfde; --esg-green: #00a786; --esg-purple: #7573b5; --esg-teal: #036571; }
.sus-esg__panel { padding: 4.444em 2.8em; gap: 2.6em; }
.sus-esg__head { display: flex; flex-direction: column; gap: .7em; }
.sus-esg h3.sus-esg__title { color: #66cbb7; font-weight: 500; line-height: 1.1; }
.sus-esg__title span { display: inline; font-size: .5em; font-weight: 400; letter-spacing: 0; margin-inline-start: .3em; }
.sus-esg__key { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.4em; margin-top: .6em; font-size: .95em; }
.sus-esg__key strong { font-weight: 700; }
.sus-esg__dot { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; }
.sus-esg__dot::before { content: ""; width: 1em; height: 1em; border-radius: 50%; background: currentColor; }
.sus-esg__dot--environmental::before { background: #00a785; }
.sus-esg__dot--social::before { background: #7573b5; }
.sus-esg__dot--governance::before { background: #00bedd; }
.sus-esg__note { font-size: .95em; }
.sus-esg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4em; align-items: start; }
.sus-esg__card { --c: var(--esg-cyan); background: #fff; border: 1.5px solid var(--c); border-radius: 1em; overflow: hidden; font-size: .8em; line-height: 1.3; }
.sus-esg__card--green { --c: var(--esg-green); }
.sus-esg__card--purple { --c: var(--esg-purple); }
.sus-esg__card--teal { --c: var(--esg-teal); }
.sus-esg__card-head { display: flex; align-items: center; gap: .55em; padding: 1.1em .9em .9em; }
.sus-esg__card-head img { flex: none; width: 2.4em; height: 2.7em; object-fit: contain; }
.sus-esg__card h4 { margin: 0; color: var(--c); font-size: 1.2em; font-weight: 500; line-height: 1.12; letter-spacing: 0; white-space: nowrap; }
.sus-esg__topics { list-style: none; margin: 0; padding: 0 .9em 1em; display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: .7em .6em; }
.sus-esg__topics li { display: flex; align-items: center; gap: .5em; }
.sus-esg__topics img { flex: none; width: 2.8em; height: 2.8em; }
.sus-esg__topics span { font-weight: 300; line-height: 1.2; white-space: nowrap; }
.sus-esg__sdgs { display: flex; align-items: center; gap: .55em; padding: .75em .9em; border-top: 1px solid var(--c); }
.sus-esg__sdgs > span { flex: none; font-weight: 300; }
.sus-esg__sdgs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .14em; }
.sus-esg__sdgs li { width: 1.95em; height: 1.95em; border-radius: 50%; background: var(--sdg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95em; font-weight: 700; line-height: 1; }
.sus-esg__block { padding: .95em 1em 1.1em; border-top: 1px solid var(--c); }
.sus-esg__block h5 { margin: 0 0 .15em; font-size: 1em; font-weight: 700; line-height: 1.3; }
.sus-esg__vision h5 { margin-top: .75em; font-weight: 500; }
.sus-esg__bullets { list-style: none; margin: 0; padding: 0; }
.sus-esg__bullets li { position: relative; padding-inline-start: .75em; font-weight: 300; }
.sus-esg__bullets li::before { content: "\2022"; position: absolute; inset-inline-start: 0; }
.sus-esg__logos { display: flex; align-items: flex-end; gap: 1.8em; margin-bottom: .2em; }
.sus-esg__vision-logo { display: flex; flex-direction: column; gap: .35em; }
.sus-esg__vision-logo img { width: 4.6em; height: auto; }
.sus-esg__vision-logo span { font-size: 1.07em; color: #63656a; }
.sus-esg__sgi { width: 5.4em; height: auto; margin-bottom: .1em; }
[dir="rtl"] .sus-esg__sdgs { flex-direction: column; align-items: flex-start; gap: .45em; }
[dir="rtl"] .sus-esg__key strong { flex-basis: 100%; }
[dir="rtl"] .sus-esg__card h4 { font-size: 1.4em; font-weight: 700; white-space: normal; }
[dir="rtl"] .sus-esg__topics span { white-space: normal; }

@media (max-width: 1279px) {
    .sus-esg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; }
    .sus-esg__card h4, .sus-esg__topics span { white-space: normal; }
    .sus-esg__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
    .sus-esg__card { font-size: 1.05em; }
}
@media (max-width: 960px) {
    .sus-esg__card { font-size: 1.2em; }
}
@media (max-width: 640px) {
    .sus-esg__panel { padding: 2.2em 1.4em; }
    .sus-esg__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6em; }
    .sus-esg__card { font-size: 1.15em; }
    .sus-esg__key, .sus-esg__note { font-size: 1.1em; }
}

/* Lightbox & flipbook overlay */
.sus-overlay { position: fixed; inset: 0; z-index: 100000; height: 100vh; height: 100dvh; background: #0a0f19; display: flex; flex-direction: column; color: #f6feff; font-size: 16px; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; }
.sus-overlay__bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sus-overlay__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; opacity: .9; }
.sus-icon-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sus-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.sus-icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.sus-overlay__stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px 72px; overflow: hidden; }
.sus-overlay__host { display: flex; align-items: center; justify-content: center; }
.sus-overlay__book { flex: none; margin: 0 auto; }
.sus-overlay__status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: .8; pointer-events: none; }

/* Bottom toolbar: page arrows, zoom and page counter */
.sus-overlay__foot { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); }
.sus-overlay__foot, .sus-overlay__stage { direction: ltr; }
.sus-rtl .sus-overlay__counter, .sus-rtl .sus-overlay__hint { direction: rtl; }
.sus-overlay__tools { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.sus-overlay__tools .sus-icon-btn { border-color: transparent; min-width: 36px; height: 36px; padding: 0; }
.sus-overlay__zoomval { min-width: 3.2em; text-align: center; font-size: 13px; opacity: .85; font-variant-numeric: tabular-nums; }
.sus-overlay__sep { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, .18); }
.sus-overlay__counter { padding-inline-end: 12px; font-size: 14px; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sus-overlay__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; z-index: 3; }
.sus-flipbook .sus-overlay__nav { top: auto; bottom: calc(50vh - 24px); bottom: calc(50dvh - 24px); transform: none; position: fixed; }
.sus-overlay__nav--prev { left: 12px; }
.sus-overlay__nav--next { right: 12px; }
.sus-flipbook .sus-overlay__nav { background: rgba(10, 15, 25, .6); }

/* Zoom layer */
.sus-zoomer { position: absolute; inset: 0; z-index: 2; display: flex; overflow: auto; direction: ltr; background: #0a0f19; cursor: grab; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.sus-zoomer[hidden] { display: none; }
.sus-zoomer.is-dragging { cursor: grabbing; }
.sus-zoomer__inner { flex: none; margin: auto; display: flex; }
.sus-zoomer__page { flex: 1 1 0; min-width: 0; height: 100%; background: #fff; }
.sus-zoomer__page img, .sus-zoomer__page canvas { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sus-overlay__hint { position: absolute; left: 50%; bottom: 18px; z-index: 4; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(0, 168, 134, .92); color: #fff; font-size: 13px; line-height: 1.4; text-align: center; width: max-content; max-width: calc(100% - 32px); pointer-events: none; transition: opacity .5s; }
.sus-overlay__hint.is-hidden { opacity: 0; }

.sus-page { background: #fff; overflow: hidden; }
.sus-page img, .sus-page canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sus-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.sus-lock { overflow: hidden; }

/* Responsive */
@media (max-width: 960px) {
    .sus-panel, .sus-video, .sus-intro__text, .sus-row__text { padding: 3.3em; }
    .sus-intro, .sus-row { grid-template-columns: 1fr; }
    .sus-row--flip .sus-row__text { order: 0; }
    .sus-row__media { padding: 2.2em; }
    .sus-row--wide .sus-row__media { padding: 0 3.3em 3.3em; }
    .sus-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sus-pillar h4, html:not([dir="rtl"]) .sus-pillar h4 { font-size: 1.3em; white-space: normal; }
    .sus-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sus-panel, .sus-video, .sus-intro__text, .sus-row__text, .sus-card__body { padding: 2.2em; }
    .sus-intro__media { min-height: 26em; }
    .sus-intro__quote { inset-inline: 1.4em; bottom: 1.4em; gap: .8em; }
    .sus-intro__quote p { font-size: 1.1em; }
    .sus-intro__mark { width: 2.2em; height: 2.2em; }
    .sus-pillars, .sus-reports { grid-template-columns: 1fr; }
    .sus-row--wide .sus-row__media { padding: 0 1.6em 2.2em; }
    .sus-overlay__bar { gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
    .sus-overlay__title { font-size: 13px; }
    .sus-overlay__dl { padding: 0; }
    .sus-overlay__dl span { display: none; }
    .sus-overlay__stage { padding: 10px 6px; }
    .sus-overlay__foot { justify-content: space-between; gap: 6px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .sus-flipbook .sus-overlay__nav { position: static; transform: none; width: 44px; height: 44px; flex: none; background: rgba(255, 255, 255, .06); }
    .sus-overlay__tools { gap: 2px; }
    .sus-overlay__zoomval { display: none; }
    .sus-overlay__sep { margin: 0 2px; }
    .sus-overlay__counter { padding-inline-end: 10px; font-size: 13px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .sus-overlay__bar { padding-top: 6px; padding-bottom: 6px; }
    .sus-overlay__bar .sus-icon-btn { height: 34px; min-width: 34px; }
    .sus-overlay__stage { padding: 6px 64px; }
    .sus-overlay__foot { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
    .sus-overlay__tools .sus-icon-btn { height: 32px; min-width: 32px; }
}