/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/year-in-review-2025-2026/bg/main.webp' ) center bottom / cover; }
main.container { padding: 0 15px 100px; }
main > section:after { content: ' '; display: block; clear: both; }
main > section > div { float: right; width: 74%; box-sizing: border-box; padding: 27px 35px; box-shadow: -2px -4px 16px 1px rgba( 0, 0, 0, .06 ); background: #fff; }

/* Navigation */
#navigation { float: left; width: 26%; padding: 0; }
#navigation a { position: relative; display: block; transition: all .4s; cursor: pointer; padding: 10px 20px 10px 48px; background: #ebebeb; position: relative; cursor: pointer; }
#navigation a:before { display: none; }
#navigation a.active { box-shadow: -2px -4px 16px 1px rgba( 0, 0, 0, .06 ); background: #fff; }
#navigation a.active:before { content: ' '; display: block; position: absolute; top: 0; left: -4px; bottom: 0; width: 4px; border-left: 4px solid #0098ce; border-radius: 4px / 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#navigation a:after { content: ' '; display: block; position: absolute; left: 19px; top: 50%; transform: translateY( -50% ); width: 18px; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; background-size: contain; }
#navigation .icon-leaf:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/decarbonisation.svg' ); }
#navigation .icon-digitalisation:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/digitalisation.svg' ); }
#navigation .icon-fuel:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/marine-fuels.svg' ); }
#navigation .icon-legal:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/legal.svg' ); }
#navigation .icon-services:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/services.svg' ); }
#navigation .icon-technical:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/technical.svg' ); }
#navigation .icon-young:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/yeg.svg' ); }
#navigation .icon-human:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/human-capital-workgroup.svg' ); }
#navigation .icon-globe:after { background-image: url( '../../images/pages/year-in-review-2025-2026-report/icons/international.svg' ); }
#navigation em { font-style: normal; display: block; font-weight: 400; font-size: 10pt; margin: 3px 0 0; letter-spacing: -.25px; }

/* Content */
.tab h2 { font-size: clamp( 13pt, 2vw, 16pt ); color: #fff; background: #0f165f; width: max-content; max-width: 100%; position: relative; padding: 8px 16px; margin: 25px 0 25px 25px; }
.tab h2:before, .tab h2:after { content: ' '; display: block; position: absolute; top: 0; bottom: 0; left: -24px; width: 0; height: 0; border-bottom: 42px solid #0f165f; border-left: 24px solid transparent; }
.tab h2:after { left: auto; right: -24px; border-bottom: 0; border-top: 41px solid #0f165f; border-left: 0; border-right: 24px solid transparent; }
.tab h3 { margin: 0 0 12px; letter-spacing: -.25px; font-size: clamp( 12pt, 2vw, 16pt ); }
.tab ul { padding: 0; margin: 22px 0 35px; }
.tab li { background: url( '../../images/pages/year-in-review-2025-2026-report/icons/block.webp' ) no-repeat top right; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); border-radius: 10px; padding: 14px 80px 17px 20px; margin: 0 auto 17px; max-width: 530px; width: 100%; font-size: 11.5pt; letter-spacing: -.2px; line-height: 1.3; box-sizing: border-box; }
.tab li:before { display: none; }
.tab li h3 { display: block; font-size: clamp( 13pt, 2.5vw, 15pt ); margin: 0 0 10px; color: #0098ce; letter-spacing: 0; }
.tab p { line-height: 1.6; }
.tab li > *:last-child { margin-bottom: 0; }
.achievements { display: flex; flex-wrap: wrap; gap: 14px; }
.achievements > div { position: relative; margin: auto; width: 75%; background: linear-gradient( 139deg, #062ec5, #37cbff ); transition: background-position .3s ease; border-radius: 10px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .2 ); overflow: hidden; }
.achievements > div:before { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; z-index: 0; background: radial-gradient( circle at center, rgba( 255, 255, 255, .5 ), transparent 70% ); transform: skewX( -20deg ); }
.achievements > div:hover:before { animation: wave 2s ease-in-out infinite; }
.achievements h3 { position: relative; z-index: 1; margin: auto; color: #fff; cursor: pointer; font-size: 13pt; letter-spacing: 0; font-weight: 500; padding: 10px 20px 10px 40px; }
.achievements h3:before { content: ' '; display: block; width: 18px; position: absolute; left: 16px; top: 11px; aspect-ratio: 1; background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADSklEQVR4nO2aWU8UQRDH59n7/lQYUNAQCC8mHqB+AJVIlGD8DgYvRGJ4EBM5DMYFdtmuWocjGpAXJRxdC9F4vUOb6gU2srNsz0zPDA/7T+pldzPdv6nqrurqdZyqqqoqNk3mJ89gHi8Iwi4hsV9IGAdCV5uEMf0ZYRcQNEzQ9GlnPym9lD6elXhTSMgJCZtAqExM/1YiQB6uzyzOHEsUAAgegsS/ppMvD4V/BOGD2IGAoAUkrocFKDGJa1mJzZEDZL5nDguCXusApR56nlpPHYpsIQPhVNQQUDSXx7QOIQgWYoRQ2jMEC9Z2Nw6nmD2h/g8z+Dibnz0YGgQk9CQFAUXrC787JQ+h2FBiU/A8EcUWG9QkrgXKMzrZxTzZnvkXqvvz07Lfc3nj2xucbeOE6J1/qWoHGtTZgXPq0adubxAJv315hWunuCHq3tSrmtd12vaEoVybMQgXgLGF01yvqh0oQtRsWUf2XhmvoDBPfj6qWJueqNmy9sxdDqNy4bXpSvdU5bDK48V4IPp8Q8COQUPlsNIHn/0MgQok3DdYH9i/ryFIg7wy8ciE6aQ+LKXU8LcRY4ieucIWWwrRYQ5BOjmmKoIAwbQpxKV3l1XTYIsaXhyJxxO0Y1NWQLYhtifTONis3n4digtCGYGYhNatdHvJpNgzQx5hVj6cAkMoo9AyWexjyxPqymhbyeR2e6acJ+6kQ0CQ+WI32n73hhmMDoIMt19usJk+cGxlXF0ZbfWE8QonKxDE9ZaorwjCZ2Q/JQp75qqHZyKDkLBhVKKwdAfQx8MrwdiCAG0waQRRAIEbfgcoB2MXAhUSXjMG4cNLkIPVbpjbYbZY8lob8Mv96R51/Ih7sUEG0zDv26xDAJuETl8QOrx+wBEhgYIMmF7JWIcQEvKBm9zcULb6RsOArIpGJ4yExGdJQwDhYyesuCvObcvEICSgK90Djg3pJJlAExsIvli/ossuZ08Igmxsa0JCzvq1wra4K86XMDGE0xNr4bSXuKHMvdgIvEChdye/0tm/cA0durXKrVBOdq7frG1TPDi3MbkDyJWpj8lvcAEoCFsTBfASl9d8VuC3y6c4PpIW/zCAqcJn0Ckodx5X8aTnQ6qqqionCv0DadeB01zYLzAAAAAASUVORK5CYII=' ) center/cover; }
.achievements section { display: none; background: #fff; padding: 10px 20px 20px; position: relative; z-index: 2; }
.achievements section *:last-child { margin-bottom: 0; }
.achievements:after { display: none; }
@keyframes wave { 0% { left: -150%; } 100% { left: 100%; } }
.conclusion { display: flex ; flex-wrap: wrap; gap: 30px; align-items: start; }
.conclusion h2 { width: 100%; }
.conclusion figure { display: block; text-align: center; width: 170px; }
.conclusion figure img { border-radius: 50%; box-shadow: 3px 3px 10px 2px #87878794; display: block; margin: 0 auto 14px; aspect-ratio: 1; width: 110px; }
.conclusion figure em { display: block; font-weight: 700; font-size: 13pt; margin: 0 0 3px; font-style: normal; }
.conclusion figcaption { font-size: 9pt; }
.conclusion figure figcaption + img { margin: 24px auto 14px; }
.conclusion blockquote { position: relative; display: block; width: calc( 100% - 200px ); }
.conclusion blockquote:before, .conclusion blockquote:after { position: absolute; font-size: 52pt; line-height: .8; height: 32px; color: #363155; }
.conclusion blockquote:before { content: '\201C'; top: 0; left: 0; }
.conclusion blockquote:after { content: '\201D'; bottom: 0; right: 0; }
.conclusion p { font-style: italic; line-height: 2; }
.conclusion p:first-of-type:first-letter { font-size: 26pt; line-height: 1; padding: 0 0 0 30px; }

.achievements .blocks { display: flex; flex-wrap: nowrap; gap: 17px; max-width: 100%; margin: auto; }
.achievements .blocks div { text-align: left; padding: 30px 20px 30px; box-shadow: 0 0 10px #00000059; background: #FFF; border-radius: 12px; width: calc( ( 100% - 34px ) / 3 ); max-width: 100%; transition: all .4s; position: relative; z-index: 3; box-sizing: border-box; }
.achievements .blocks div:nth-of-type( 2 ) { z-index: 2; }
.achievements .blocks div:nth-of-type( 3 ) { z-index: 1; }
.achievements .blocks div:not( :last-of-type ):after { content: ' '; font-size: clamp( 35pt, 5vw, 35pt ); color: #fff; display: block; position: absolute; top: 50%; right: -28px; transform: translateY( -50% ); aspect-ratio: 1; width: clamp( 30px, 10vw, 40px ); background: no-repeat url( '../../images/pages/edp-programme/icons/arrow-right.webp' ) center/cover; z-index: 2; }
.achievements .blocks .appear:hover { margin: -10px 0; background: linear-gradient( 180deg, #176ec6 0%, #39c4f7 100% ); color: #fff; }
.achievements .blocks h4 { margin: 0 auto 5px; min-height: auto; width: max-content; max-width: 100%; background: linear-gradient( 110deg, #ff7802, #8500d3 ); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp( 14pt, 2.5vw, 16pt ); }
.achievements .blocks .appear:hover h3 { color: #fff; background: 0; -webkit-background-clip: unset; -webkit-text-fill-color: unset; }
.achievements .blocks ul { text-align: left; padding: 0; margin: 0 0 15px; }
.achievements .blocks li { padding: 0 0 0 30px; background: 0; box-shadow: none; border: 0; margin: 0; max-width: 100%; letter-spacing: inherit; font-size: inherit; line-height: inherit; list-style: disc; padding: 0; margin: 0 0 0 21px; }
.achievements .blocks li + li { margin: 14px 0 0 21px; }
.achievements .blocks li:before { content: ' '; background: no-repeat url( '../../images/pages/edp-programme/icons/check-mark.svg' ) center/cover; width: 21px; aspect-ratio: 1; top: 1px; }
.achievements .blocks li:has( > p ) { padding: 0; }
.achievements .blocks li:has( > p ):before { display: none; }
.achievements .blocks ol li:before { content: counter( list ); color: #fff; font-weight: 600; background: #0098ce; transition: all .4s; width: 20px; aspect-ratio: 1; border-radius: 50%; text-align: center; line-height: 19px; }
.achievements .blocks em { display: block; margin: 22px 0 10px; font-style: normal; font-size: clamp( 10pt, 2.5vw, 12pt ); line-height: 1.1; }
.achievements .blocks .appear:hover li:before { color: #fff; }

div[data-type="digitalisation"] .achievements > div { width: 100%; }

@media (max-width: 900px) {
	.achievements .blocks { flex-wrap: wrap; gap: 40px 20px; justify-content: center; }
	.achievements .blocks div { width: calc( ( 100% - 20px ) / 2 ); }
	.achievements .blocks div:not( :last-of-type ):after { display: none; }
}

@media (max-width: 800px) {
	.achievements h3 { font-size: 12pt; }

	.achievements { margin: 50px auto; }
	.achievements .blocks { flex-direction: column; align-items: center; }
    .achievements .blocks div { width: 100%; max-width: 400px; padding: 30px 25px 20px; }
	.achievements .blocks div:not( :last-of-type ):after { display: block; right: auto; left: 50%; transform: translateX( -50% ) rotate( 90deg ); top: auto; bottom: -41px; }
}

@media (max-width: 767px) {
	main > section > div, #navigation { width: 100%; float: none; }

	#navigation { position: relative; margin: 0 0 14px; }
	#navigation a { display: none; font-size: 12pt; }
	#navigation.active a { display: block; }
	#navigation:before { content: 'Menu'; display: block; border-radius: 12px; background: #21145f; color: #fff; box-shadow: -2px -4px 16px 1px rgba( 0, 0, 0, .06 ); padding: 10px; text-align: center; cursor: pointer; font-size: 12pt; }

	.tab { padding: 0; }
	.tab h2 { height: 38px; box-sizing: border-box; }
	.tab h2:before { border-bottom-width: 38px; }
	.tab h2:after { border-top-width: 38px; }
}

@media (max-width: 575px) {
	main.container { padding: 0 15px 40px; }
	main > section > div { padding: 15px 20px; }

	.conclusion { flex-direction: column; }
	.conclusion figure { margin: auto; }
	.conclusion blockquote { width: 100%; }
	.conclusion p { line-height: 1.6; }
}

@media (max-width: 500px) {
	.achievements h3 { font-size: 11pt; }
	.achievements > div { width: 86%; }
}

@media (max-width: 480px) {
	.achievements .blocks div:not( :last-of-type ):after { bottom: -38px; }
}

@media (max-width: 420px) {
	#navigation a { font-size: 11pt; }

	.tab h2 { padding: 8px 4px; }
}