/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/year-in-review-2024-2025/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: no-repeat url( '../../images/pages/year-in-review-2024-2025-report/icons/general-affairs.svg' ) center/contain; }
#navigation .icon-leaf:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/decarbonisation.svg' ); }
#navigation .icon-digitalisation:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/digitalisation.svg' ); }
#navigation .icon-finance:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/shipping-finance.svg' ); }
#navigation .icon-fuel:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/marine-fuels.svg' ); }
#navigation .icon-globe:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/international.svg' ); }
#navigation .icon-legal:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/legal.svg' ); }
#navigation .icon-services:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/services.svg' ); }
#navigation .icon-technical:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/technical.svg' ); }
#navigation .icon-young:after { background-image: url( '../../images/pages/year-in-review-2024-2025-report/icons/yeg.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: 41px 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 ul { padding: 0; margin: 0 0 35px; }
.tab li { background: url( '../../images/pages/year-in-review-2024-2025-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 25px; width: 68%; }
.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; 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; }

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

@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: #96b4bf; 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: 420px) {
	#navigation a { font-size: 11pt; }
}