:root {
    /* Color Tokens from JSON */
    --primary-color: #FF671D; /* Orange from Title Section */
    --black: #000000;
    --white: #FFFFFF;
    --gray-light: #F5F5F5;
    --footer-bg: #000000;
    
    /* Typography */
    --font-family: 'Lato', sans-serif;
    --font-size-base: 16px;
    --font-size-h1: 70px;
    --font-size-h2: 18px;
    --font-size-large: 34px;
    
    /* Layout */
    --container-padding: 80px;
    --max-width: 1440px;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--black);
    line-height: 1.5;
    background-color: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

a.uline:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

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

/* Navbar */
.navbar {
    height: 90px;
    width: 100%;
    background-color: var(--primary-color);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-container {
    width: 100%;
    max-width: var(--max-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.menu-items {
    display: flex;
    gap: 26px;
}

.nav-link {
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 4px;
}

.nav-link.active {
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
    text-underline-offset: 4px;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 12px;
    margin-left: 20px;
}

.language-selector::before {
    content: '';
    display: block;
    width: 1px;
    height: 32px;
    background-color: var(--white);
    margin-right: 10px;
}

.lang-inactive {
    opacity: 0.5;
}

.lang-active:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.user-link {
    display: block;
    width: 15px;
    height: 16px;
    margin-left: 110px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.user-link:hover {
    opacity: 0.7;
}

.logo {
    display: block;
    width: 140px;
    height: 42px;
    background-image: url("data:image/svg+xml,%3Csvg width='140' height='42' viewBox='0 0 140 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2002_512)'%3E%3Cpath d='M38.0421 22.2942C37.9713 22.2836 33.6187 21.5929 33.6187 21.5929C33.6187 21.5929 33.6169 21.5929 33.6151 21.5929C33.5797 21.5894 33.5443 21.5841 33.5107 21.577C33.5107 21.577 33.5089 21.577 33.5071 21.577C33.0414 21.4778 32.6926 21.0653 32.6926 20.5712C32.6926 20.125 32.9777 19.746 33.3761 19.6026L33.3885 19.599L33.4416 19.5813C33.4416 19.5813 35.756 18.8323 35.8534 18.8022C36.3882 18.6287 36.6804 18.0532 36.5068 17.5184C36.3333 16.9836 35.7578 16.6914 35.223 16.865C35.138 16.8933 32.0002 17.9133 32.0002 17.9133L31.9878 17.9168C31.9878 17.9168 31.9701 17.9221 31.9612 17.9257H31.9595C31.9595 17.9257 31.9524 17.9292 31.9488 17.931H31.9418L31.9347 17.9345L27.9911 19.2166L27.9734 19.2219L27.9911 19.2042L30.9466 16.2487L34.9521 12.2432C35.3505 11.8465 35.3505 11.2002 34.9521 10.8036C34.5554 10.4069 33.9091 10.4069 33.5107 10.8036L29.0642 15.25C29.0448 15.273 29.0235 15.2943 29.0005 15.3137C28.8942 15.4058 28.7543 15.4625 28.6021 15.4625C28.2727 15.4625 28.0035 15.2022 27.9911 14.8746C27.9911 14.8675 27.9911 14.8587 27.9911 14.8498C27.9911 14.8409 27.9911 14.8339 27.9911 14.825V1.0182C27.9911 0.455092 27.5343 0 26.9729 0C26.4116 0 25.9547 0.456862 25.9547 1.0182C25.9547 1.15986 25.9547 1.4184 25.9547 1.4184V18.5224L25.8998 18.4144L25.6041 17.8318L17.3611 1.66277C17.1061 1.16163 16.4934 0.961536 15.9923 1.2183C15.4912 1.47329 15.2911 2.08776 15.5461 2.58889L21.7651 14.7949C21.7863 14.8321 21.8058 14.8693 21.8217 14.9082C21.8731 15.0304 21.9014 15.1632 21.9014 15.3049C21.9014 15.8645 21.4463 16.3196 20.8867 16.3196C20.6778 16.3196 20.4848 16.2576 20.3236 16.1496C20.3236 16.1496 20.3219 16.1478 20.3201 16.1478L20.2705 16.1106C20.2705 16.1106 7.01973 6.47753 6.979 6.44743C6.52391 6.11629 5.88643 6.21723 5.55529 6.67232C5.22416 7.12741 5.32509 7.76489 5.78018 8.09426C5.81206 8.11905 18.3545 17.2297 18.3545 17.2297C18.3811 17.2457 18.4059 17.2634 18.4307 17.2811C18.4501 17.2953 18.4679 17.3094 18.4873 17.3254C18.7016 17.5077 18.8362 17.7804 18.8362 18.0833C18.8362 18.5649 18.4944 18.9669 18.0376 19.0607C17.972 19.0749 17.9047 19.0802 17.8375 19.0802C17.8321 19.0802 17.8286 19.0802 17.8233 19.0802C17.8003 19.0802 17.7773 19.0802 17.7542 19.0767C17.7436 19.0767 17.733 19.0749 17.7241 19.0731C17.7224 19.0731 17.7188 19.0731 17.717 19.0731C17.6993 19.0714 17.6816 19.0678 17.6657 19.0643C17.6568 19.0643 17.648 19.0625 17.6391 19.0607L3.96513 16.8951H3.96159L2.19434 16.6153C1.63832 16.5267 1.11771 16.9057 1.02917 17.4617C0.940628 18.0177 1.31958 18.5383 1.8756 18.6269L3.71191 18.9173L16.5235 20.9466L16.5997 20.959C16.5997 20.959 16.5997 20.959 16.6014 20.959C17.0548 21.0529 17.3965 21.4531 17.3965 21.9347C17.3965 22.3473 17.1468 22.6997 16.7892 22.852C16.7413 22.8715 16.6918 22.8874 16.6404 22.8998C16.6404 22.8998 0.754696 28.0616 0.706885 28.0776C0.172108 28.2511 -0.120072 28.8266 0.0534651 29.3614C0.227002 29.8962 0.802507 30.1883 1.33728 30.0148C1.41166 29.99 16.5076 25.0814 16.5076 25.0814C16.52 25.0779 16.5324 25.0725 16.5466 25.069C16.6404 25.0389 16.7431 25.023 16.8476 25.023C17.4054 25.023 17.8587 25.4763 17.8587 26.0341C17.8587 26.3103 17.7471 26.56 17.5683 26.7406C17.5648 26.7459 17.5594 26.7495 17.5541 26.7548L4.96562 39.3468C4.5672 39.7453 4.5672 40.3898 4.96562 40.7883C5.36228 41.1867 6.00861 41.1867 6.40527 40.7883L20.6778 26.5157L24.6656 22.5262C24.6656 22.5262 24.6674 22.5244 24.6691 22.5226C24.6975 22.4925 24.7293 22.4659 24.763 22.4429C24.7648 22.4429 24.7665 22.4394 24.7701 22.4376C24.7842 22.427 24.7966 22.4199 24.8108 22.4111C24.8143 22.4093 24.8179 22.4057 24.8232 22.404C24.8374 22.3951 24.8515 22.388 24.8675 22.3792C24.871 22.3792 24.8728 22.3756 24.8763 22.3756C24.9454 22.342 25.0198 22.319 25.0994 22.3083C25.1136 22.3066 25.1278 22.3048 25.1419 22.303C25.1614 22.3013 25.1809 22.2995 25.2022 22.2995C25.2269 22.2995 25.2517 22.2995 25.2765 22.303C25.3332 22.3083 25.3863 22.3207 25.4394 22.3384C25.443 22.3384 25.4447 22.3402 25.4483 22.342C25.4766 22.3508 25.5014 22.3632 25.528 22.3756C25.528 22.3756 25.528 22.3756 25.5297 22.3756C25.5545 22.388 25.5776 22.4004 25.5988 22.4146C25.6006 22.4146 25.6023 22.4164 25.6059 22.4181C25.7051 22.4819 25.7865 22.5687 25.8467 22.6696C25.8485 22.6731 25.8503 22.6749 25.852 22.6784C25.852 22.6784 25.852 22.6784 25.852 22.6802C25.9052 22.7758 25.9388 22.8856 25.9459 23.0025V23.0078L25.9476 23.0415C25.9476 23.0415 25.9476 23.045 25.9476 23.0468C25.9476 23.0468 25.9476 23.0503 25.9476 23.0521V37.314C25.9476 37.8771 26.4045 38.3322 26.9658 38.3322C27.5272 38.3322 27.9841 37.8753 27.9841 37.314V31.0914C27.9841 30.5478 28.4232 30.1087 28.9668 30.1087C29.3228 30.1087 29.6344 30.2981 29.8062 30.5832C29.8328 30.6257 29.8558 30.6718 29.8752 30.7196C29.8752 30.7196 32.0179 34.9252 32.0179 34.927C32.2729 35.4281 32.8874 35.6282 33.3885 35.3714C33.8896 35.1164 34.0897 34.502 33.833 34.0008C33.8294 33.9955 31.2954 29.0196 31.2954 29.0196L31.2689 28.9683L31.2653 28.9612C31.2033 28.8301 31.1697 28.6849 31.1697 28.5309C31.1697 27.9713 31.623 27.518 32.1826 27.518C32.388 27.518 32.5792 27.58 32.7404 27.6862C32.7599 27.6986 32.7776 27.7128 32.797 27.7269C32.797 27.7269 34.9822 29.3153 35.1416 29.4304C35.5967 29.7616 36.2341 29.6606 36.5653 29.2056C36.8964 28.7505 36.7955 28.113 36.3404 27.7836C36.2855 27.7429 33.3566 25.6162 33.3566 25.6162C33.323 25.5932 33.2893 25.5701 33.2574 25.5436C33.029 25.3541 32.8838 25.069 32.8838 24.7503C32.8838 24.1801 33.346 23.7179 33.9162 23.7179C33.9693 23.7179 34.0224 23.7214 34.0738 23.7303C34.0738 23.7303 37.6897 24.3022 37.7198 24.3076C38.2759 24.3961 38.7965 24.0172 38.885 23.4611C38.9735 22.9051 38.5946 22.3845 38.0386 22.2959' fill='white'/%3E%3Cpath d='M45.8333 27.387V13.697H57.7754V15.7688H48.1424V19.6451H56.8599V21.7169H48.1424V27.387H45.8333Z' fill='white'/%3E%3Cpath d='M59.0309 27.387V17.2953H61.2656V19.0802C61.572 18.5401 62.0412 18.1063 62.6734 17.7822C63.3056 17.4582 64.0617 17.2953 64.9418 17.2953H66.2876V19.3865H64.9612C62.4981 19.3865 61.2656 20.4366 61.2656 22.5368V27.387H59.0309Z' fill='white'/%3E%3Cpath d='M73.7337 25.5931C76.4324 25.5931 77.7818 24.5112 77.7818 22.3473C77.7818 20.1834 76.4324 19.1015 73.7337 19.1015C71.0351 19.1015 69.7052 20.1834 69.7052 22.3473C69.7052 24.5112 71.0475 25.5931 73.7337 25.5931ZM76.5599 27.1638C75.7454 27.4277 74.8033 27.5605 73.7337 27.5605C72.6642 27.5605 71.7221 27.4294 70.9076 27.1691C70.093 26.9088 69.436 26.5405 68.9367 26.0659C68.4373 25.5914 68.0637 25.0424 67.814 24.4191C67.5661 23.7958 67.4421 23.1052 67.4421 22.3473C67.4421 21.5894 67.5714 20.9094 67.8282 20.2843C68.0867 19.661 68.4657 19.1103 68.9686 18.6322C69.4715 18.1541 70.1284 17.784 70.9394 17.5201C71.7505 17.2563 72.6819 17.1235 73.732 17.1235C74.782 17.1235 75.7223 17.2563 76.5351 17.5201C77.3461 17.784 78.0049 18.1559 78.5113 18.6322C79.0178 19.1103 79.3985 19.6592 79.6517 20.2843C79.9067 20.9077 80.0342 21.5965 80.0342 22.3473C80.0342 23.0981 79.9085 23.7852 79.657 24.4103C79.4056 25.0336 79.0302 25.5825 78.5308 26.0571C78.0314 26.5317 77.3745 26.9 76.5599 27.1638Z' fill='white'/%3E%3Cpath d='M99.6934 27.387C97.3188 27.387 96.1324 26.3847 96.1324 24.3802V19.1953H93.802V17.2953H96.1696V14.6214H98.3565V17.2953H101.785V19.1953H98.3565V24.1216C98.3565 24.5732 98.4928 24.9043 98.7673 25.115C99.0418 25.3258 99.4933 25.4302 100.124 25.4302H101.843V27.387H99.6952H99.6934Z' fill='white'/%3E%3Cpath d='M103.538 17.2953H105.762V27.387H103.538V17.2953ZM103.538 13.1906H105.753V15.5971H103.538V13.1906Z' fill='white'/%3E%3Cpath d='M116.943 21.4212C116.923 20.727 116.597 20.1533 115.963 19.6982C115.329 19.2431 114.412 19.0165 113.21 19.0165C112.008 19.0165 111.048 19.2449 110.408 19.7035C109.769 20.1621 109.396 20.7341 109.288 21.4229H116.944L116.943 21.4212ZM113.249 27.5587C112.243 27.5587 111.336 27.4259 110.527 27.1585C109.72 26.8911 109.054 26.5228 108.531 26.05C108.009 25.579 107.611 25.0283 107.333 24.3979C107.056 23.7675 106.917 23.0839 106.917 22.3455C106.917 21.6071 107.046 20.9271 107.303 20.302C107.561 19.6787 107.94 19.128 108.443 18.6499C108.946 18.1718 109.603 17.7982 110.414 17.5272C111.225 17.2563 112.156 17.1217 113.206 17.1217C114.168 17.1217 115.034 17.2492 115.804 17.5042C116.574 17.7592 117.208 18.1116 117.709 18.5631C118.209 19.0147 118.591 19.5406 118.855 20.1391C119.119 20.7377 119.252 21.3875 119.252 22.087V23.022H109.256C109.268 23.8312 109.619 24.4758 110.306 24.961C110.993 25.4444 111.974 25.687 113.247 25.687C114.157 25.687 114.933 25.5595 115.572 25.3045C116.211 25.0495 116.629 24.7184 116.828 24.3111H119.062C118.866 25.2408 118.212 26.0146 117.106 26.6308C115.999 27.2488 114.711 27.5569 113.249 27.5569' fill='white'/%3E%3Cpath d='M120.408 27.387V17.2953H122.643V19.0802C122.949 18.5401 123.418 18.1063 124.051 17.7822C124.683 17.4582 125.439 17.2953 126.319 17.2953H127.665V19.3865H126.338C123.875 19.3865 122.643 20.4366 122.643 22.5368V27.387H120.408Z' fill='white'/%3E%3Cpath d='M134.567 27.5587C132.779 27.5587 131.391 27.2488 130.404 26.6273C129.418 26.0075 128.888 25.1398 128.819 24.026H131.043C131.164 24.644 131.506 25.069 132.071 25.301C132.634 25.5329 133.498 25.6498 134.663 25.6498C135.669 25.6498 136.432 25.5453 136.954 25.3346C137.477 25.1239 137.737 24.8317 137.737 24.4563C137.737 24.1765 137.572 23.9499 137.245 23.7781C136.917 23.6063 136.356 23.4664 135.559 23.3584L132.905 23.0237C131.746 22.8838 130.854 22.5793 130.227 22.1118C129.6 21.6443 129.287 21.0086 129.287 20.2064C129.287 19.2838 129.74 18.5383 130.647 17.9717C131.553 17.405 132.809 17.1217 134.413 17.1217C136.15 17.1217 137.468 17.4227 138.366 18.0248C139.263 18.6269 139.711 19.4326 139.711 20.4455H137.516C137.464 19.955 137.169 19.5778 136.629 19.3139C136.087 19.0501 135.307 18.9173 134.289 18.9173C133.399 18.9173 132.712 19.0182 132.232 19.2183C131.752 19.4184 131.511 19.7035 131.511 20.0736C131.511 20.3534 131.654 20.5765 131.941 20.7412C132.228 20.9059 132.699 21.0316 133.354 21.1131L136.076 21.4566C138.691 21.8196 140 22.7811 140 24.3394C140 25.0212 139.756 25.6073 139.271 26.1014C138.784 26.5954 138.135 26.9602 137.328 27.1992C136.52 27.4383 135.6 27.5569 134.569 27.5569' fill='white'/%3E%3Cpath d='M81.1904 27.387V17.2952H83.4252V18.6039C84.2645 17.6175 85.6528 17.1235 87.5883 17.1235C89.1926 17.1235 90.4357 17.4599 91.3211 18.1346C92.2065 18.8093 92.6474 19.723 92.6474 20.874V27.3852H90.4233V21.4176C90.4233 20.6916 90.1488 20.1303 89.5981 19.7319C89.0474 19.3334 88.1957 19.1351 87.0446 19.1351C85.8936 19.1351 85.0012 19.3635 84.3708 19.8186C83.7404 20.2737 83.4252 20.9378 83.4252 21.809V27.3852H81.1904V27.387Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2002_512'%3E%3Crect width='140' height='41.0857' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
}

/* Utility Classes for Responsive Display */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: flex !important;
}

/* Header / Hero */
.header {
    position: relative;
    height: 710px;
    width: 100%;
    overflow: hidden;
    color: var(--white);
    background-color: var(--primary-color);
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 0 1000px 1000px 0;
    overflow: hidden;
}

.bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 46%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 1000px 1000px 0;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* Slight overlay for readability */
}

.header-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 105px var(--container-padding);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.slogan {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: var(--font-size-h1);
    line-height: 1.2;
}

.news-preview {
    max-width: 413px;
}

.news-date {
    font-size: 16px;
    line-height: 22px;
    display: block;
    margin-bottom: 14px;
}

.news-description {
    font-size: 34px;
    line-height: 44px;
    margin-bottom: 40px;
    display: block;
}

/* News Rotator */
.news-item {
    display: none;
    animation: fadeEffect 0.5s ease-in-out;
}

.news-item.active {
    display: block;
}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Buttons */
.btn {
    padding: 15px 30px;
    font-family: var(--font-family);
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn:hover {
    padding: 15px 40px;
}

.btn-white {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.btn-black {
    background-color: transparent;
    color: var(--black);
    border-color: var(--black);
}

.btn-black:hover {
    background-color: transparent;
    color: var(--black);
}

.btn-black-outline {
    background-color: transparent;
    color: var(--black);
    border-color: var(--black);
}

.btn-black-outline:hover {
    background-color: rgba(255, 103, 29, 0.05);
    color: var(--primary-color);
}

/* Dots */
.dots {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    justify-content: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.3;
    cursor: pointer;
}

.dot.active {
    opacity: 1;
}

/* Main Content */
.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 105px var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.section-header {
    margin-bottom: 20px;
}

.section-header.bigbottom {
    margin-bottom: 50px;
}

.section-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.large-text {
    font-size: var(--font-size-large);
    line-height: 44px;
    margin-bottom: 46px;
}

.separator {
    height: 1px;
    background-color: rgba(0,0,0,0.75);
    margin-top: 46px;
    width: 100%;
}

/* Mission Section */
.mission .section-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mission .large-text {
    align-self: stretch;
}

/* What We Do Section */
.what-we-do-section {
    display: flex;
    gap: 128px; /* JSON itemSpacing */
    align-items: flex-start;
}

.what-we-do-text {
    flex: 0 0 305px; /* JSON fixed width */
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.what-we-do-text .section-header,
.what-we-do-text .large-text {
    margin-bottom: 0;
}

/* Cards */
.cards-container {
    flex: 1;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.card-image a {
    display: block;
}

.card-image img {
    width: 100%;
    height: 487px;
    object-fit: cover;
    border-radius: 0;
    transition: border-radius 0.3s ease;
}

.card:hover .card-image img {
    border-radius: 20px;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 15px;
}

.card-content h3 {
    font-size: 34px;
    font-weight: 400;
}

.card-content p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 32px;
}

/* Footer */
.footer-wrapper {
    background-color: var(--primary-color);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    padding-top: 75px; /* Height of the orange strip */
}

.footer {
    background-color: var(--footer-bg);
    color: var(--white);
    padding: 60px 80px 40px;
    border-radius: 50px 50px 0 0;
    position: relative;
    overflow: hidden;
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-brand h2 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
}

.footer-separator {
    height: 1px;
    background-color: var(--white);
    margin-bottom: 40px;
}

.footer-links-top {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 48px;
    margin-bottom: 40px;
}

.footer-links-bottom {
    display: flex;
    gap: 48px;
    flex-grow: 1;
}

.footer-column h4 {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.footer-column ul li {
    margin-bottom: 13px;
}

.footer-column ul li a {
    font-size: 16px;
    font-weight: 400;
}

.footer-separator-secondary {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5); /* Vector 7 opacity 0.5 */
    margin-bottom: 40px;
    width: 100%;
}

.footer-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 100px;
}

.footer-vector {
    position: absolute;
    right: 297px;
    bottom: 0;
    width: 341px;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.social-icon {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2002_282)'%3E%3Cpath d='M12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0ZM12 5.838C8.597 5.838 5.838 8.597 5.838 12C5.838 15.403 8.597 18.163 12 18.163C15.403 18.163 18.162 15.404 18.162 12C18.162 8.597 15.403 5.838 12 5.838ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM18.406 4.155C17.61 4.155 16.965 4.8 16.965 5.595C16.965 6.39 17.61 7.035 18.406 7.035C19.201 7.035 19.845 6.39 19.845 5.595C19.845 4.8 19.201 4.155 18.406 4.155Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2002_282'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.icon-youtube {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.615 3.18388C16.011 2.93788 7.984 2.93888 4.385 3.18388C0.488 3.44988 0.029 5.80388 0 11.9999C0.029 18.1849 0.484 20.5489 4.385 20.8159C7.985 21.0609 16.011 21.0619 19.615 20.8159C23.512 20.5499 23.971 18.1959 24 11.9999C23.971 5.81488 23.516 3.45088 19.615 3.18388ZM9 15.9999V7.99988L17 11.9929L9 15.9999Z' fill='white'/%3E%3C/svg%3E");
}

.icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2002_286)'%3E%3Cpath d='M19 0H5C2.239 0 0 2.239 0 5V19C0 21.761 2.239 24 5 24H19C21.762 24 24 21.761 24 19V5C24 2.239 21.762 0 19 0ZM8 19H5V8H8V19ZM6.5 6.732C5.534 6.732 4.75 5.942 4.75 4.968C4.75 3.994 5.534 3.204 6.5 3.204C7.466 3.204 8.25 3.994 8.25 4.968C8.25 5.942 7.467 6.732 6.5 6.732ZM20 19H17V13.396C17 10.028 13 10.283 13 13.396V19H10V8H13V9.765C14.396 7.179 20 6.988 20 12.241V19Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2002_286'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.footer-copyright {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

/* Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-200 {
    transition-delay: 0.2s;
}

/* --- About Page Styles --- */

/* About Hero */
.about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: auto;
    background-color: var(--primary-color);
    overflow: hidden;
}

.about-hero-image-wrapper {
    width: 50%;
    height: 100%;
    min-height: auto;
    position: relative;
}

.about-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 500px 500px 0;
    display: block;
}

.about-hero-text {
    width: 50%;
    padding: 0 var(--container-padding);
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 46px;
    max-width: 720px;
}

.text-white {
    color: var(--white);
}

.hero-description {
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
}

/* Values Section */
.values .section-body {
    align-items: flex-start;
}

/* Big Image Section */
.big-image-section {
    width: 100%;
    margin-bottom: 50px;
}

.big-image-wrapper {
    position: relative;
    width: 100%;
}

.full-width-image {
    width: 100%;
    height: auto;
    display: block;
}

.polygon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86px solid rgba(192, 189, 189, 0.8); /* Approx color from JSON */
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Leadership Section */
.leadership-body {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.leadership-sidebar {
    flex: 0 0 250px;
}

.leadership-content {
    flex: 1;
}

.leadership-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.leadership-item {
    display: flex;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    justify-content: space-between;
    transition: padding 0.3s ease;
}

.leadership-item.active {
    padding: 45px 0;
}

.leadership-item:first-child {
    border-top: 1px solid rgba(0,0,0,0.1);
}

.dot-indicator {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCC;
    display: block;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.leadership-item.active .dot-indicator {
    background-color: transparent;
    border-color: var(--black);
}

.leadership-name {
    font-size: 16px;
    font-weight: 600;
    color: #CCC;
    transition: color 0.3s ease;
}

.leadership-item.active .leadership-name {
    color: var(--black);
}

/* Team Section */
.team-grid {
    display: none; /* Hidden by default */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@keyframes fadeInGrid {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.team-grid.active {
    display: grid;
    animation: fadeInGrid 0.4s ease-out forwards;
}

/* Mobile Accordion Header (Hidden on Desktop) */
.team-grid-header {
    display: none;
    padding: 20px 0;
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
}

.member-image img {
    width: 100%;
    height: 305px;
    object-fit: cover;
}

.member-name {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
}

.member-role {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--black);
    letter-spacing: 0.5px;
}

.member-bio {
    font-size: 16px;
    line-height: 22px;
}

/* Research Page Styles */

/* Research Header */
.research-header {
    height: auto;
    min-height: 496px;
    background-color: var(--primary-color);
    display: flex;
    align-items: flex-start;
    padding-top: 105px;
    border-radius: 0 0 320px 0;
}

.research-header .header-content {
    justify-content: flex-start;
    padding-top: 0;
}

.hero-text-block {
    max-width: 955px;
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.research-hero-text {
    max-width: 1440px;
}

/* Research Main Layout overrides */
.research-main {
    padding: 0;
    max-width: 100%;
    gap: 52px;
}

.content-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-bottom: 100px;
}

.separator-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

/* Split Section (Investigators / Fellows) */
.split-section {
    display: flex;
    gap: 0;
    align-items: center;
    width: 100%;
}

.split-section.reverse {
    flex-direction: row-reverse;
}

.split-content {
    flex: 1;
}

.split-content.text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 46px;
    padding: 80px;
    padding-bottom:0;
}

.split-content.image-column {
    flex: 1;
}

.split-content.image-column img {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
}

.text-block p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
}

/* Grid Layouts (Researchers / Institutions) */
.grid-container {
    display: grid;
    gap: 20px;
}

.grid-container.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.grid-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.item-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.item-title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
}

.item-subtitle {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    margin-bottom: 20px;
}

.item-text {
    font-size: 16px;
    line-height: 22px;
}

/* Institutions specific */
.institutions-section {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.institutions-section .large-text {
    font-size: 38px;
    line-height: 46px;
}

.grid-item.text-only .item-title {
    font-size: 18px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* Institutions Slider */
.institutions-slider-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    position: relative;
}

.institutions-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.institutions-slider-container:hover::after {
    opacity: 0;
}

.institutions-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    padding-bottom: 10px; /* Ensure content isn't cut off */
}

.institutions-track::-webkit-scrollbar {
    display: none; /* WebKit */
}

.slider-item {
    flex: 0 0 305px; /* Fixed width from JSON */
    min-width: 305px;
}

.institutions-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    position: relative;
}

.custom-scrollbar {
    flex-grow: 1;
    height: 1px;
    background-color: #000;
    position: relative;
}

.scrollbar-progress {
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    background-color: var(--primary-color);
    width: 25%; /* Initial width, JS will update */
    transition: width 0.1s linear, left 0.1s linear;
}

.slider-nav-buttons {
    display: flex;
    gap: 10px;
}

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #000;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.slider-btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg);
}

.slider-btn:hover::after {
    border-color: #fff;
}

.prev-btn::after {
    transform: rotate(135deg);
    margin-left: 5px;
}

.next-btn::after {
    transform: rotate(-45deg);
    margin-right: 5px;
}

/* --- Talent Management Page Styles --- */

/* Card Specifics for Talent Page */
.card-link-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--black);
    margin-top: auto; /* Push to bottom if flex column */
}

.card-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--black);
    width: 100%;
    transition: padding 0.3s ease;
    cursor: pointer;
}

.card-link-item:hover {
    padding: 30px 0;
}

.link-label {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.1px;
}

.link-arrow {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
}

.card-link-item:hover .link-arrow {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='%23FF671D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Centers Section (Split Layout) */
.centers-container {
    display: flex;
    gap: 0;
    align-items: stretch;
    border-bottom: 0.5px solid var(--black);
    position: relative;
}

.centers-sidebar {
    flex: 0 0 355px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.centers-divider-horizontal {
    width: 100%;
    height: 0.5px;
    background-color: var(--black);
    margin-bottom: 0;
}

.centers-divider-vertical {
    width: 0.5px;
    background-color: var(--black);
    margin: 0;
    margin-right: 64px;
    align-self: stretch;
    flex-shrink: 0;
}

.centers-map {
    flex: 1;
    height: auto;
    background-color: var(--gray-light);
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 470px;
}

/* Dropdown Design */
.filter-dropdown {
    width: calc(100% - 50px);
    margin-bottom: 20px;
    position: relative;
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid var(--black);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    cursor: pointer;
}

.dropdown-arrow {
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dropdown-body {
    display: none;
}

.filter-dropdown.open .dropdown-body {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--white);
    margin-top: 10px;
    border: 1px solid var(--black);
    border-radius: 30px;
    padding: 20px;
}

.dropdown-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dropdown-list li {
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.dropdown-list li.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.centers-text-list {
    display: flex;
    flex-direction: column;
    gap: 46px;
    height: 470px;
    overflow-y: auto;
    padding-right: 20px;
}

/* Custom Scrollbar for Text List */
.centers-text-list::-webkit-scrollbar {
    width: 4px;
}

.centers-text-list::-webkit-scrollbar-track {
    background: transparent;
}

.centers-text-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.text-item p {
    font-size: 16px;
    line-height: 22px;
}

/* --- Member Detail Modal --- */
/* Replaced by Worker Popup */

/* --- Worker Popup (CMF Style) --- */
#worker-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none; /* Toggled by JS */
    align-items: center;
    justify-content: center;
}

#worker-popup-wrapper {
    width: 100%;
    max-width: 900px;
    padding: 20px;
    box-sizing: border-box;
}

.worker-popup {
    background-color: var(--white);
    position: relative;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 20px;
    overflow: hidden;
}

.worker-popup-close-outer {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
    font-size: 30px; /* Fallback for × */
    line-height: 1;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.worker-popup-inner {
    display: flex;
    background-color: var(--white);
    max-height: 85vh; /* Limit height on desktop for internal scroll */
    padding: 40px;
    gap: 40px;
}

.worker-popup-img {
    width: 300px;
    flex-shrink: 0;
    object-fit: cover;
    align-self: flex-start; /* Prevents stretching on desktop */
}

.worker-popup-text {
    flex: 1;
    padding: 0;
    padding-right: 20px;
    overflow-y: auto; /* Makes text scrollable independently */
    max-height: 400px;
}

.worker-popup-name {
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--black);
    line-height: 1.2;
}

.worker-popup-place {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.worker-popup-role {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--black);
}

.worker-popup-edu {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 20px;
}

.worker-popup-school {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--black);
}

.worker-popup-description {
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
}

.worker-popup-text .separator {
    width: 100%;
    height: 1px;
    background-color: var(--black);
    opacity: 0.2;
    margin: 20px 0;
}

/* Overriding previous modal styles if needed, or just comment out block: */
/* .modal-box.member-modal-box {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    /* Override generic modal-box styles */
    display: block; 
    align-items: initial;
    gap: initial;
    text-align: left;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--black);
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--black);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.modal-close-btn:hover {
    background-color: var(--black);
    color: var(--white);
    transform: rotate(90deg);
}

.member-modal-content {
    display: flex;
    gap: 40px;
}

.member-modal-image {
    flex: 0 0 300px;
}

.member-modal-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.member-modal-info {
    flex: 1;
}

.member-modal-info .member-name {
    font-size: 34px;
    margin-bottom: 10px;
}

.member-modal-info .member-role {
    margin-bottom: 30px;
}

.member-modal-info .member-bio {
    font-size: 14px;
    line-height: 22px;
}

.member-modal-info .member-bio p {
    margin-bottom: 1em;
}
.member-modal-info .member-bio p:last-child {
    margin-bottom: 0;
}

/* Responsive Breakpoints */

@media (max-width: 1280px) {

    .hero-description {
        font-size: 24px;
        line-height: 34px;
    }

    .split-content.text-column {
        flex: 1; /* Allow text to grow on smaller desktops */
    }
}

/* Tablet (1024px) */
@media (max-width: 1024px) {
    :root {
        --container-padding: 40px;
    }

    .navbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .menu-items {
        display: flex;
        gap: 18px;
    }

    .user-link {
        margin-left: 30px;
    }

    .what-we-do-section {
        flex-direction: column;
        gap: 60px;
    }

    .what-we-do-text {
        flex: auto;
        width: 100%;
    }

    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .centers-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .footer-links-top {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-bottom-section {
        flex-direction: column;
        gap: 70px;
    }

    /* About Page Tablet */
    .about-header {
        flex-direction: column-reverse;
        height: auto;
        min-height: auto;
    }
    
    .about-hero-image-wrapper, .about-hero-text {
        width: 100%;
    }

    .about-hero-image-wrapper {
        min-height: auto;
        aspect-ratio: 16/9;
    }

    .about-hero-img {
        border-radius: 0 500px 500px 0;
    }

    .about-hero-text {
        padding: 60px var(--container-padding);
        max-width: 100%;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .leadership-body {
        flex-direction: column;
        gap: 40px;
    }
    
    .leadership-sidebar {
        width: 100%;
        flex: auto;
    }

    .leadership-content {
        width: 100%;
    }

    .split-section {
        flex-direction: column;
        gap: 0;
    }
    
    .split-section.reverse {
        flex-direction: column;
    }

    .grid-container.four-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .leadership-content {
        width: 100%;
    }

    .centers-sidebar {
        width: 100%;
        flex: auto;
    }

    .centers-divider-vertical {
        display: none;
    }

    .filter-dropdown {
        width: 100%;
    }
    
}

/* Mobile (768px) */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --font-size-h1: 40px;
        --font-size-large: 20px;
    }

    .slogan {
        font-size: 30px;
    }

    .large-text {
        line-height: 30px;
    }

    /* Navbar Mobile */
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    .nav-toggle-label {
        display: block;
        width: 30px;
        height: 20px;
        margin-left:16px;
        position: relative;
        background-image: url("data:image/svg+xml,%3Csvg width='53' height='11' viewBox='0 0 53 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' width='13' height='1.5' fill='white'/%3E%3Crect x='20' y='4.5' width='13' height='1.5' fill='white'/%3E%3Crect x='20' y='9' width='13' height='1.5' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

    #nav-toggle:checked ~ .nav-toggle-label {
        background-image: url("data:image/svg+xml,%3Csvg width='53' height='14' viewBox='0 0 53 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='21.3806' y='0.475815' width='16.312' height='1.95258' transform='rotate(45 21.3806 0.475815)' fill='white'/%3E%3Crect x='32.915' y='1.8565' width='16.312' height='1.95258' transform='rotate(135 32.915 1.8565)' fill='white'/%3E%3C/svg%3E");
    }

    .nav-menu {
        position: absolute;
        top: 54px;
        left: 0;
        width: 100%;
        background: var(--primary-color);
        color: var(--white);
        flex-direction: column;
        padding: 20px 0;
        border-top: 1px solid var(--white);
        display: none; /* Hidden by default */
        gap: 0;
        height: calc(100vh - 54px);
        overflow-y: auto;
    }

    .user-link {
        margin-left: 0;
    }

    .language-selector {
        margin-left: auto;
        margin-right: 20px;
        position: relative;
    }

    .language-selector::before {
        display: none;
    }

    .language-selector::after {
        content: '';
        position: absolute;
        right: -21px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 32px;
        background-color: var(--white);
        opacity: 0.5;
    }

    #nav-toggle:checked ~ .nav-menu {
        display: flex;
    }

    .menu-items {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    .menu-items li {
        width: 100%;
    }

    .nav-link {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15px 20px;
    }

    .nav-link::after {
        content: '';
        display: block;
        width: 18px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H17M13 1L17 5L13 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .nav-link:hover {
        text-decoration: none;
        opacity: 0.8;
    }

    .nav-link.active {
        text-decoration: none;
    }

    /* Mobile User Section */
    .mobile-user-section {
        width: 100%;
        border-top: 1px solid var(--white);
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
    }

    .login-links {
        display: flex;
        gap: 5px;
        font-size: 14px;
        font-weight: 600;
    }

    /* Header Mobile */
    .header {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: var(--primary-color);
    }

    .navbar {
        height: 54px;
        padding: 0 16px;
    }
    
    .video-background {
        position: relative;
        height: 361px;
        order: 2;
        border-radius: 0 60px 0 0;
        flex-shrink: 0;
    }

    .glass-effect {
        display: none;
    }
    
    .header-content {
        display: contents;
    }

    .news-preview {
        position: relative;
        padding: 40px 30px;
        width: 100%;
        order: 3;
        background-color: var(--white);
        color: var(--black);
        max-width: 100%;
        min-height:300px;
    }

    .hero-text {
        position: static;
        order: 1;
        padding: 15px 16px;
        width: 100%;
    }

    .hero-text br {
        display: none;
    }

    .news-date {
        font-size: 12px;
        text-align: center;
        color: var(--black);
    }

    .news-description {
        font-size: 20px;
        line-height: 25px;
        text-align: center;
        color: var(--black);
    }

    .news-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .news-actions .btn-white {
        color: var(--black);
        border-color: var(--black);
    }

    .dots {
        display: none;
    }

    .mobile-nav-arrow {
        display: block;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 10;
    }

    .mobile-nav-prev {
        left: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 13L1 7L7 1' stroke='%23FF671D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .mobile-nav-next {
        right: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13L7 7L1 1' stroke='%23FF671D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Mobile Buttons in Main Content */
    .main-content .btn {
        width: 100%;
        background: transparent;
        border: 0;
        border-top: 1px solid rgba(0,0,0,0.2);
        border-bottom: 1px solid rgba(0,0,0,0.2);
        padding: 15px 0;
        color: var(--black);
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-radius: 0;
    }

    .main-content .btn:hover {
        padding: 15px 0;
        opacity: 0.7;
    }

    .main-content .btn::after {
        content: '';
        display: block;
        width: 18px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H17M13 1L17 5L13 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Body Mobile */
    .main-content {
        gap: 60px;
        padding-top:0;
    }

    .cards-container {
        grid-template-columns: 1fr; /* Stack cards */
    }

    .card-image img {
        height: 300px;
        border-radius: 0px;
    }

    /* Footer Mobile */
    .footer-wrapper {
        padding-top: 40px;
        border-radius: 30px 30px 0 0;
    }

    .footer {
        padding: 50px 30px;
        border-radius: 30px 30px 0 0;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .footer-separator, .footer-separator-secondary {
        display: none;
    }
    
    /* Main Nav (CMF) - Right Column */
    .footer-main-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-column: 2;
        grid-row: 2;
    }

    .footer-main-nav::before {
        content: 'CMF';
        color: var(--primary-color);
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    .footer-main-nav .footer-column h4 {
        color: var(--white);
        font-weight: 400;
        text-transform: none;
        margin: 0;
        font-size: 14px;
    }

    .footer-main-nav .footer-column ul {
        display: none;
    }

    .footer-links-bottom {
        display: contents;
    }

    /* Info Column - Left Column */
    .footer-info-col {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .footer-column h4 {
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    .footer-column ul li {
        margin-bottom: 10px;
    }

    .footer-column ul li a {
        font-size: 14px;
    }
    
    /* Contact Column - Full Width */
    .footer-contact-col {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 30px;
    }

    .footer-bottom-section {
        display: contents;
    }

    .footer-socials {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 20px;
    }

    .footer-vector {
        display: none;
    }

    .footer-copyright {
        grid-column: 1 / -1;
        grid-row: 5;
        text-align: left;
        margin-top: 20px;
    }

    /* About Page Mobile */
    .hero-description {
        font-size: 20px;
        line-height: 25px;
    }

    .team-grid {
        grid-template-columns: 1fr !important;
    }

    .about-header {
        margin-bottom:50px;
        flex-direction: column-reverse;
    }

    /* Mobile Accordion Logic */
    .leadership-sidebar {
        display: none; /* Hide sidebar tabs on mobile */
    }

    .team-grid-header {
        display: flex; /* Show accordion headers on mobile */
    }

    .toggle-icon::after {
        content: '+';
        font-size: 20px;
        font-weight: 400;
    }

    .team-grid-header.active .toggle-icon::after {
        content: '-';
    }

    .team-grid.active {
        margin-bottom: 20px;
        padding-top: 20px;
    }

    /* Worker Popup Mobile */
    #worker-popup-wrapper {
        height: 100%;
        padding: 0;
        max-width: 100%;
    }
    .worker-popup {
        height: 100%;
        overflow-y: auto; /* Entire popup scrolls on mobile */
        border-radius: 0;
    }
    .worker-popup-inner {
        flex-direction: column;
        max-height: none;
        padding: 0;
        gap: 0;
    }
    .worker-popup-img {
        width: 100%;
        height: auto;
    }
    .worker-popup-text {
        overflow: visible;
        padding: 30px 20px;
    }

    .modal-box.member-modal-box {
        padding: 40px 20px 20px;
    }
    .member-modal-content {
        flex-direction: column;
    }
    .member-modal-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    .member-modal-info .member-name {
        font-size: 24px;
    }

    .research-header {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0 0 100px 0;
    }

    .grid-container.four-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .split-content.text-column {
        padding: 40px 16px;
    }
    
    .split-content.image-column img {
        min-height: 300px;
    }

    .institutions-slider-container {
        max-width: 100%;
    }

    .centers-map {
        display: none;
    }

    .centers-text-list {
        height: 270px;
    }

    .centers-sidebar {
        gap: 15px;
    }

    .trainings-section {
        margin-top: 30px;
    }
}

@media (max-width: 520px) {
    .grid-container.four-col {
        grid-template-columns: 1fr;
    }
}

/* --- Publications Page Styles --- */

/* Filter Section */
.publications-filter-section {
    width: 100%;
    margin-top: 80px;
}

.filter-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    gap: 40px;
    flex: 1;
    flex-wrap: wrap;
}

.select-wrapper {
    position: relative;
    min-width: 100px;
    display: flex;
    flex-direction: column;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--black);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: #A9A9A9;
    padding: 0 8px;
    padding-right: 20px;
    height: 37px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.select-wrapper select:focus {
    outline: 1px solid var(--primary-color);
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.search-wrapper {
    position: relative;
    width: 400px;
    max-width: 100%;
}

.search-wrapper input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--black);
    background: transparent;
    font-family: var(--font-family);
    font-size: 14px;
    padding: 0 8px;
    padding-right: 30px;
    height: 37px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #A9A9A9;
}

.search-wrapper input:focus {
    outline: 1px solid var(--primary-color);
}

.search-wrapper input::placeholder {
    color: #A9A9A9;
}

.search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5.5' cy='5.5' r='4.5' stroke='black'/%3E%3Cpath d='M13 13L9 9' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.search-btn.clear {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M12.0128 0.707731L0.707031 12.0127' stroke='black' stroke-linecap='square'/%3E%3Cpath d='M12.428 12.0128L1.12305 0.707031' stroke='black' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Publications List */
.publications-list-section {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.publication-item {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 630px;
    margin:0 auto;
}

.publication-meta {
    display: flex;
    gap: 32px;
}

.tag {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.publication-title {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
}

.publication-excerpt {
    font-size: 16px;
    line-height: 22px;
}

.publication-actions {
    display: flex;
    gap: 40px;
    margin-top: 10px;
}

/* New Button Styles */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #e05510;
    border-color: #e05510;
}

.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

/* Publications Responsive */
@media (max-width: 1024px) {
    .filter-form {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-group {
        width: 100%;
        justify-content: space-between;
    }
    
    .search-wrapper {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .filter-group {
        flex-direction: column;
        gap: 20px;
    }
    
    .select-wrapper {
        width: 100%;
        border-bottom: 0;
        padding-bottom: 10px;
    }
    
    .select-wrapper select {
        width: 100%;
    }
    
    .publication-actions {
        flex-direction: column;
        gap: 15px;
    }

    .load-more-container {
        margin-top: -30px;
    }
    
    /* Restore desktop button look for publications page on mobile */
    .publication-actions .btn,
    .load-more-container .btn {
        width: 100%;
        text-align: center;
        border-radius: 100px;
        display: inline-block;
        padding: 15px 30px;
    }

    .publication-actions .btn:hover,
    .load-more-container .btn:hover {
        padding: 15px 30px;
    }

    .publication-actions .btn::after,
    .load-more-container .btn::after {
        display: none;
    }

    .publication-actions .btn-black-outline {
        border: 1px solid var(--black);
        background-color: transparent;
        color: var(--black);
    }

    .load-more-container .btn-primary {
        background-color: var(--primary-color);
        color: var(--white);
        border: 1px solid var(--primary-color);
    }
}

/* --- Accessibility Page Styles --- */

.accessibility-section {
    max-width: 844px; /* JSON absoluteBoundingBox width */
    margin: 0 auto;
    width: 100%;
}

.accessibility-section.faq-section-width {
    max-width: 900px; /* Adjusted for FAQ page based on JSON */
}

.accessibility-section .section-header {
    margin-bottom: 20px; /* JSON spacing between Title and Large Text */
}

.slim-article-body h1 {
    font-size: var(--font-size-large);
    line-height: 44px;
    margin-bottom: 20px; /* JSON spacing between Large Text and Paragraphs */
    font-weight: 400;
}

.slim-article-body p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
}

.slim-article-body p:last-child {
    margin-bottom: 0;
}

.slim-article-body ul {
    display: flex;
    flex-direction: column;
    gap: 18px; /* JSON itemSpacing */
    list-style: disc;
    padding-left: 20px;
}

.slim-article-body ul li {
    font-size: 16px;
    line-height: 22px;
    padding-left: 5px;
}

.table-wrapper {
    width: 100%;
    border: 0.5px solid var(--black);
    border-radius: 30px;
    padding: 20px;
    margin-top: 40px;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cookie-table th, .cookie-table td {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    line-height: 22px;
    width: 20%;
    word-wrap: break-word;
}

.cookie-table th {
    font-weight: 600;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #A9A9A9;
}

.cookie-table td {
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #A9A9A9;
}

.cookie-table tr:last-child td {
    border-bottom: none;
}

.numbered-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* JSON itemSpacing for list */
    margin-top: 40px;
    width: 100%;
}

.list-item {
    display: flex;
    flex-direction: column;
    gap: 27px; /* JSON itemSpacing inside item */
}

.list-content {
    display: flex;
    align-items: flex-start;
    gap: 42px; /* JSON itemSpacing between number and text - Fixed for all devices */
}

.list-number {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    padding-top: 5px; /* Visual alignment with text */
    flex-shrink: 0;
}

.list-text {
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
}

.list-separator {
    height: 0.5px;
    background-color: var(--black);
    width: 100%;
}

/* FAQ Styles */
.faq-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.faq-item {
    border: 1px solid var(--black);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 20px;
}

.faq-question {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.faq-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--black);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3e%3cpath d='M12.7456 6.87305L1.00016 6.87265' stroke='%23FF671D' stroke-width='2' stroke-linecap='square'/%3e%3cpath d='M6.87249 12.7455L6.87289 1.00004' stroke='%23FF671D' stroke-width='2' stroke-linecap='square'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

/* Active State */
.faq-item.active .faq-toggle-btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: rotate(45deg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3e%3cpath d='M12.7456 6.87305L1.00016 6.87265' stroke='white' stroke-width='2' stroke-linecap='square'/%3e%3cpath d='M6.87249 12.7455L6.87289 1.00004' stroke='white' stroke-width='2' stroke-linecap='square'/%3e%3c/svg%3e");
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-top 0.4s ease;
}

.faq-item.active .faq-body {
    margin-top: 20px;
}

.faq-body p {
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
    margin: 0;
}

@media (max-width: 768px) {

    .faq-question {
        font-size: 16px;
    }

    .faq-body p {
        font-size: 14px;
        line-height: 20px;
    }

    .accessibility-section {
        margin-top: 60px;
    }

    .slim-article-body h1 {
        margin-bottom: 40px;
        color: #000;
        font-family: 'Lato', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    .table-wrapper {
        padding: 10px;
        border-radius: 20px;
    }

    .cookie-table th, .cookie-table td {
        padding: 10px 2px;
        font-size: 12px;
    }

    .faq-item {
        padding: 20px;
        border-radius: 15px;
    }

    .faq-toggle-btn {
        width: 25px;
        height: 25px;
        background-size: 10px;
    }
}

/* --- Teachers Page Styles --- */

.teachers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px; /* JSON spacing between columns */
    row-gap: 60px; /* JSON spacing between rows */
    margin-top: 32px; /* Adjusting for section header margin */
}

.teacher-card {
    display: flex;
    flex-direction: column;
    gap: 39px; /* JSON spacing between video and text */
    border-bottom: 0.5px solid var(--black);
    padding-bottom: 50px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    width: 100%;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.teacher-content h2 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.teacher-role {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    margin-bottom: 20px;
}

.teacher-content p {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}

@media (max-width: 768px) {
    .teachers-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }
    .teacher-card {
        gap: 22px;
        padding-bottom: 35px;
    }
}

/* --- Article Page Styles --- */

.article-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.article-section .section-header {
    width: 100%;
    max-width: 954px; /* Matches article-layout width (414+128+412) */
}

.article-layout {
    display: flex;
    gap: 128px; /* JSON spacing */
    justify-content: center;
    align-items: flex-start;
}

.article-image-container {
    width: 414px; /* JSON width */
    flex-shrink: 0;
    position: sticky;
    top: 120px; /* Sticky offset */
}

.article-image-container img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.article-content-container {
    width: 412px; /* JSON width */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.article-date {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5px;
}

.article-title {
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
    margin-bottom: 40px;
}

.article-body p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .article-layout {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .article-image-container {
        width: 100%;
        position: static; /* Disable sticky on mobile/tablet */
    }

    .article-content-container {
        width: 100%;
    }

    .article-section .section-header {
        margin-top: 60px;
    }
}

/* --- Registration Page Styles --- */

.registration-container {
    display: flex;
    justify-content: space-between;
    gap: 80px; /* Calculated from JSON spacing */
    align-items: flex-start;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.registration-text {
    flex: 0 0 419px; /* JSON width */
}

.registration-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 34px;
    line-height: 44px;
    color: var(--black);
}

.registration-form-wrapper {
    flex: 0 0 517px; /* JSON width */
    max-width: 100%;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.form-label {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: var(--black);
}

.required-asterisk {
    color: #DB0000;
}

.form-control:disabled {
    color: #A9A9A9;
    background-color: transparent;
    border-color: var(--black);
    opacity: 1; /* Fix for iOS */
}

.form-control {
    width: 100%;
    height: 50px;
    border: 0.5px solid var(--black);
    border-radius: 8px;
    padding: 10px 15px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    background-color: transparent;
}

.form-control:focus {
    outline: 1px solid var(--primary-color);
    border-color: var(--primary-color);
}

.form-control::placeholder {
    color: #A9A9A9;
}

textarea.form-control {
    height: auto;
    min-height: 240px;
    padding-top: 15px;
    resize: vertical;
}

/* Checkboxes */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 10px;
}

.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 0.5px solid var(--black);
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.form-check-label {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--black);
    cursor: pointer;
}

.form-check-label a {
    text-decoration: underline;
}

.btn-block {
    width: 100%;
    margin-top: 10px;
}

.form-footer-links {
    text-align: center;
    margin-top: 10px;
}

.login-link {
    font-size: 13px;
    text-decoration: underline;
}

/* Info Icon & Tooltip */
.info-icon-wrapper {
    margin-top: 5px;
    position: relative;
    width: 20px;
    height: 20px;
}

.info-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_1201_10308)'%3E%3Cpath d='M8.99999 15.0005H11V9.00047H8.99999V15.0005ZM10.71 6.71047C10.9 6.52047 11 6.28047 11 6.00047C11 5.72047 10.9 5.48047 10.71 5.29047C10.52 5.10047 10.28 5.00047 9.99999 5.00047C9.71999 5.00047 9.47999 5.10047 9.28999 5.29047C9.09999 5.48047 8.99999 5.72047 8.99999 6.00047C8.99999 6.28047 9.09999 6.52047 9.28999 6.71047C9.47999 6.90047 9.71999 7.00047 9.99999 7.00047C10.28 7.00047 10.52 6.90047 10.71 6.71047ZM9.99999 20.0005C8.61999 20.0005 7.31999 19.7405 6.09999 19.2105C4.87999 18.6805 3.81999 17.9705 2.91999 17.0705C2.01999 16.1705 1.30999 15.1105 0.77999 13.8905C0.24999 12.6705 -0.0100098 11.3705 -0.0100098 9.99047C-0.0100098 8.61047 0.24999 7.31047 0.77999 6.09047C1.30999 4.87047 2.01999 3.81047 2.91999 2.91047C3.81999 2.01047 4.87999 1.30047 6.09999 0.770469C7.31999 0.240469 8.61999 -0.0195312 9.99999 -0.0195312C11.38 -0.0195312 12.68 0.240469 13.9 0.770469C15.12 1.30047 16.18 2.01047 17.08 2.91047C17.98 3.81047 18.69 4.87047 19.22 6.09047C19.75 7.31047 20.01 8.61047 20.01 9.99047C20.01 11.3705 19.75 12.6705 19.22 13.8905C18.69 15.1105 17.98 16.1705 17.08 17.0705C16.18 17.9705 15.12 18.6805 13.9 19.2105C12.68 19.7405 11.38 20.0005 9.99999 20.0005ZM9.99999 18.0005C12.23 18.0005 14.13 17.2205 15.68 15.6705C17.23 14.1205 18.01 12.2305 18.01 9.99047C18.01 7.75047 17.23 5.86047 15.68 4.31047C14.13 2.76047 12.24 1.98047 9.99999 1.98047C7.75999 1.98047 5.86999 2.76047 4.31999 4.31047C2.76999 5.86047 1.98999 7.75047 1.98999 9.99047C1.98999 12.2305 2.76999 14.1205 4.31999 15.6705C5.86999 17.2205 7.75999 18.0005 9.99999 18.0005Z' fill='%23A9A9A9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1201_10308'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    cursor: pointer;
    display: block;
}

.info-text {
    background-color: #A9A9A9;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 13px;
    line-height: 18px;
    color: #FFFFFF;
    display: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 12px;
    margin-top: 0;
    width: max-content;
    max-width: 200px;
    z-index: 100;
}

.info-text.active {
    display: block;
}

/* Error Messages */
.error-message {
    color: #DB0000;
    font-size: 13px;
    line-height: 18px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-message::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='%23DB0000'/%3E%3Cpath d='M10 5V11' stroke='%23DB0000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='1' fill='%23DB0000'/%3E%3C/svg%3E");
    background-size: contain;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .registration-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .registration-text, .registration-form-wrapper {
        flex: auto;
        width: 100%;
    }
}

/* Check & Submit Page Specifics */
.subsection-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 34px;
    line-height: 44px;
    color: var(--black);
    margin-bottom: 20px;
}

.confirmation-checkbox-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.uploaded-file-link-text {
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
    text-decoration: underline;
    display: block;
    margin-top: 5px;
}

/* Confirmation Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-box {
    background-color: var(--white);
    padding: 60px 40px;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

.modal-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: var(--black);
}

.modal-actions {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.modal-actions .btn {
    min-width: 140px;
}

.confirmation-row {
    width: calc(100% + 325px);
    margin-left: -325px;
}

@media (min-width: 769px) {
    .application-form.summary-form .form-label {
        min-height: 20px;
    }
}

/* --- Registration Finish Page Styles --- */

.confirmation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    padding: 60px 0;
}

.confirmation-content {
    display: flex;
    align-items: center;
    gap: 10px; /* JSON itemSpacing */
}

.icon-bubble {
    width: 50px;
    height: 50px;
    border: 1px solid var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirmation-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 34px;
    line-height: 44px;
    color: var(--black);
    margin: 0;
}

@media (max-width: 768px) {
    .confirmation-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .confirmation-text {
        font-size: 24px;
        line-height: 34px;
    }
}

@media (max-width: 768px) {
    /* Override for buttons that should keep desktop look on mobile */
    .main-content .btn.btn-keep-desktop {
        display: flex;
        height: auto;
        min-height: 40px;
        padding: 15px 30px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        border-radius: 100px;
        background: var(--primary-color);
        
        /* Resetting mobile overrides */
        width: 100%;
        border: 1px solid var(--primary-color);
        color: var(--white);
        gap: 0;
    }

    .main-content .btn.btn-keep-desktop.btn-black-outline {
        background: transparent;
        border: 1px solid var(--black);
        color: var(--black);
    }

    .main-content .btn.btn-keep-desktop::after {
        display: none;
    }
    
    .main-content .btn.btn-keep-desktop:hover {
        padding: 15px 30px;
    }
}

/* --- Application Page Styles --- */

.application-layout {
    display: flex;
    gap: 129px; /* Calculated from JSON spacing */
    align-items: flex-start;
}

.application-sidebar {
    flex: 0 0 196px;
    display: flex;
    flex-direction: column;
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 70px; /* Vertical spacing between menu items */
}

.sidebar-link {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--black);
    letter-spacing: 0.1px;
}

.sidebar-link.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.application-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0; /* Prevent flex overflow */
}

.mobile-step-header {
    display: none;
}

/* Steps Navigation */
.application-steps {
    display: flex;
    gap: 45px;
    border-bottom: 0.5px solid var(--black);
    padding-bottom: 20px;
    margin-bottom: 40px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.application-steps::-webkit-scrollbar {
    display: none; /* WebKit */
}

.step-item {
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--black);
    white-space: nowrap;
    position: relative;
    padding-bottom: 20px; /* Space for the active indicator */
    margin-bottom: -21px; /* Pull bottom border overlap */
}

.step-item.active {
    font-weight: 700;
}

.step-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}

/* Form Layout */
.application-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.form-actions-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: calc(100% + 325px);
    margin-left: -325px;
}

.form-actions-row .btn {
    width: 180px;
}

.input-year {
    width: 70px;
}

.select-wrapper .boxed-select {
    border: 0.5px solid var(--black);
    border-radius: 8px;
    padding: 10px 15px;
    padding-right: 30px;
    height: 50px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
    font-size: 16px;
}

.form-section-separator {
    height: 0.5px;
    background-color: var(--black);
    /* Extend width to cover sidebar area (196px sidebar + 129px gap = 325px) */
    width: calc(100% + 325px);
    margin-left: -325px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Application Page Responsive */
@media (max-width: 1024px) {
    .application-layout {
        flex-direction: column;
        gap: 30px;
    }

    .application-sidebar {
        width: 100%; /* Full width */
        flex: auto;
        overflow: hidden; /* Clip overflow */
        position: relative;
        margin-top: 65px;
    }

    .sidebar-nav {
        overflow-x: auto;
        padding-bottom: 20px; /* Hide scrollbar */
        margin-bottom: -20px;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-nav ul {
        flex-direction: row;
        gap: 10px;
        padding-right: 40px; /* Space for fade */
    }

    .sidebar-link {
        display: block;
        padding: 12px 30px;
        border: 1px solid #A9A9A9;
        border-radius: 100px;
        color: #A9A9A9;
        text-decoration: none;
        white-space: nowrap;
        font-size: 13px;
    }

    .sidebar-link.active {
        border-color: var(--black);
        color: var(--black);
        background-color: transparent;
        text-decoration: none;
    }

    .application-content {
        width: 100%;
        gap: 0px;
    }

    .form-section-separator {
        width: 100%;
        margin-left: 0;
    }

    .form-actions-row {
        width: 100%;
        margin-left: 0;
    }

    .confirmation-row {
        width: 100%;
        margin-left: 0;
    }

    .modal-actions {
        flex-direction: column;
    }
    .modal-actions .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .application-sidebar::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 60px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    .application-form {
        gap: 30px;
    }
    .form-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .form-actions-row {
        flex-direction: column;
    }
    
    .form-actions-row .btn {
        width: 100%;
    }

    .form-actions-row .btn.btn-primary {
        order: -1;
    }

    .form-section-separator {
        margin-top: 0px;
    }
    /*
    .input-year {
        width: 100%;
    }
    */

    /* Mobile Steps */
    .application-steps {
        border-bottom: 1px solid var(--black);
        gap: 0;
        justify-content: flex-start;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .step-text {
        display: none;
    }

    .step-item {
        margin-bottom: -10px;
        flex: 1;
        text-align: left;
    }

    .step-item:last-child {
        flex: 0;
        width: auto;
    }

    .mobile-step-header {
        display: block;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 30px;
        margin-top: 5px;
        color: var(--primary-color);
    }

    .form-label {
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    .application-form.fileupload-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 20px;
    }
    .application-form > .form-row,
    .application-form > .form-section-separator,
    .application-form > .form-actions-row {
        grid-column: 1 / -1;
    }
    .application-form > .form-section-separator {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Ensure labels have equal height to align inputs in the grid */
    .application-form .form-label.highlabel {
        min-height: 68px; /* Accommodates up to 3 lines of text */
        display: flex;
        align-items: flex-end; /* Align text to bottom to sit closer to input */
    }

    .file-upload-wrapper {
        margin-top: 20px;
    }
}

/* --- ERC / Grant Page Styles --- */

.intro-text {
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
    margin-bottom: 40px;
}

.section-header-text {
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 30px;
    margin-top: 10px;
}

#grant-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.grant-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.publication-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 60px;
}

.grant-duration-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top:30px;
}

.duration-inputs {
    display: flex;
    gap: 30px; /* JSON itemSpacing */
    width: 100%;
}

.date-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 155px; /* JSON width */
}

.date-separator {
    display: flex;
    align-self: flex-end;
    padding-bottom: 12px;
    font-weight: 700;
}

.sub-label {
    font-size: 13px;
    color: var(--black);
}

.date-input {
    height: 50px;
    text-align: left;
}

.add-grant-container {
    display: flex;
    gap: 20px;
}

.btn-add-grant, .btn-remove-grant {
    display: flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle.remove {
    background-color: #000;
}

.plus-icon::after {
    content: '+';
    font-size: 24px;
    color: var(--white);
    font-weight: 400;
}

.minus-icon::after {
    content: '-';
    font-size: 24px;
    color: var(--white);
    font-weight: 400;
}

.btn-text {
    font-size: 16px;
    color: var(--black);
}

@media (max-width: 768px) {
    .duration-inputs {
        flex-direction: column;
        gap: 20px;
    }
    
    .date-group {
        width: 100%;
    }

    .date-separator {
        display: none;
    }
}

/* --- Application Page - Documents Step --- */
.file-upload-wrapper {
    display: block;
    cursor: pointer;
}

.file-upload-box {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    gap: 40px;
    padding: 30px;
    border: 1px dashed #A9A9A9;
    border-radius: 10px;
    text-align: left;
    min-height: 145px;
    transition: background-color 0.3s ease;
}

.file-upload-wrapper:hover .file-upload-box,
.file-upload-box.drag-over {
    background-color: var(--gray-light);
}

.file-upload-input {
    display: none;
}

.file-upload-icon {
    width: 26px;
    height: 24px;
}

.file-upload-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    color: var(--black);
}

.file-upload-box .file-name {
    font-weight: 600;
    color: var(--primary-color);
    word-break: break-all;
    align-self: flex-start;
    text-align: left;
    width: 100%;
}

.file-upload-info {
    font-size: 13px;
    color: #A9A9A9;
    margin-top: 8px;
}

.file-download-link {
    display: block;
    text-decoration: underline;
    color: #A9A9A9;
    margin-top: 4px;
}

/* File Upload Error State */
.file-upload-box.error {
    border-color: #DB0000;
    color: #DB0000;
}

.file-upload-box.error .file-upload-text {
    color: #DB0000;
}

.file-upload-box.error .file-upload-icon path {
    stroke: #DB0000;
}

/* Full Screen Loader */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--gray-light);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    color: var(--black);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* File Upload Uploaded State */
.file-upload-box.uploaded {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 145px;
    gap: 20px;
    overflow: hidden; /* Ensure content does not overflow the box */
    width: 100%;
}

.uploaded-file-link {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    color: var(--primary-color);
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.delete-file-btn {
    background: transparent;
    border: 1px solid var(--black);
    border-radius: 100px;
    padding: 8px 20px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    color: var(--black);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.delete-file-btn:hover {
    background-color: var(--black);
    color: var(--white);
}

@media (max-width: 768px) {
    .file-upload-box {
        gap: 20px;
        min-height: 130px;
    }
}

/* --- Application Status Page Styles --- */

.application-status .status-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 630px; /* Based on separator width in JSON */
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0; /* Calculated from JSON spacing (109px height - text height) / 2 */
    gap: 20px;
}

.status-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: var(--black);
}

.status-item.pending .status-text {
    color: #A9A9A9; /* Gray for pending items */
}

.status-separator {
    width: 100%;
    height: 0.5px;
    background-color: var(--black);
}

.status-icon {
    display: block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-checkmark {
    width: 16px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='%23FF671D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.application-status .icon-circle {
    width: 15px;
    height: 15px;
    border: 2px solid #A9A9A9;
    border-radius: 50%;
    background: transparent;
}

@media (max-width: 768px) {
    .application-status .status-list {
        max-width: 100%;
    }
    
    .status-text {
        font-size: 18px;
    }
    
    .status-item {
        padding: 20px 0;
    }
}

/* --- Account Settings Page Styles --- */

.account-settings-form .settings-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.account-settings-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #FF671D;
    text-transform: uppercase;
    margin-bottom: 20px;
}

@media (min-width: 769px) {
    .account-settings-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 20px;
        align-items: start;
    }

    .account-settings-form > .form-section-separator,
    .account-settings-form > .form-actions-row {
        grid-column: 1 / -1;
    }
    
    .account-settings-form > .form-section-separator {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* --- News & Events Page Styles --- */

.news-list-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-card {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.news-card:nth-child(even) {
    flex-direction: row-reverse;
}

.news-card-content {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Default: Image Right, Content Left -> Text aligns to right side of content (near image) */
.news-card:nth-child(odd) .news-card-content {
    justify-content: flex-end;
}

.news-card:nth-child(odd) .news-card-text-wrapper {
    margin-right: 120px;
}

/* Reverse: Image Left, Content Right -> Text aligns to left side of content (near image) */
.news-card:nth-child(even) .news-card-content {
    justify-content: flex-start;
}

.news-card:nth-child(even) .news-card-text-wrapper {
    margin-left: 120px;
}

.news-card-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    align-items: flex-start;
    max-width: 420px;
    width: 100%;
}

.news-card-text-wrapper .news-date {
    margin-bottom: 0px;
}

.news-card-image {
    flex: 1;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    border-radius: 0;
}

.news-title {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.main-content.research-main .news-card .news-description {
    font-size: 16px;
    line-height: 22px;
    margin: 0 0 20px 0;
}

/* Simulate hover state for the first button as per design request */
.btn-black-outline.hover-state {
    background-color: rgba(255, 103, 29, 0.05);
    color: var(--primary-color);
}

.events-section {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.event-content {
    max-width: 630px; /* Width from JSON */
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.main-content.research-main .load-more-container {
    margin-top: 45px;
    margin-left: 15px;
    margin-right: 15px;
}

@media (max-width: 1280px) {
    .news-card:nth-child(odd) .news-card-text-wrapper {
        margin-right: 80px;
        padding-left: 30px;
    }
    .news-card:nth-child(even) .news-card-text-wrapper {
        margin-left: 80px;
        padding-left: 0;
        padding-right: 30px;
    }

    .news-card .news-description {
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 1024px) {
    .news-card:nth-child(odd) .news-card-text-wrapper {
        margin-right: 40px;
    }
    .news-card:nth-child(even) .news-card-text-wrapper {
        margin-left: 40px;
    }

    .news-card .news-description {
        -webkit-line-clamp: 6;
    }
}

@media (max-width: 768px) {
    .news-card, 
    .news-card:nth-child(even) {
        flex-direction: column;
    }
    .news-card:nth-child(odd) .news-card-text-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    .news-card:nth-child(even) .news-card-text-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .events-section .news-description, .main-content.research-main .news-card .news-description {
        text-align: left;
    }

    .main-content.research-main .news-card .news-title {
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px; 
    }

    .news-card .news-description {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .news-card-image {
        width: 100%;
        order: -1; /* Image on top */
    }

    .news-card-content {
        width: 100%;
        flex: auto;
        justify-content: center !important;
    }

    .news-card-text-wrapper {
        padding: 40px 16px;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
    }

    .main-content.research-main .load-more-container {
        margin-top: -30px;
    }
    
    .event-content {
        max-width: 100%;
    }
}

/* --- Load More Animation --- */

.news-card.hidden {
    display: none;
}

.news-card.fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 404 Page Styles --- */

.error-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
}

.error-visuals {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 60px; /* Space between graphic and separator */
}

.error-title {
    font-family: var(--font-family);
    font-weight: 900; /* ExtraBold fallback */
    font-size: 70px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
    z-index: 2;
    position: relative;
    letter-spacing: 0.1em;
}

.error-graphic {
    margin-top: -35px; /* Overlap with 404 text based on JSON coordinates */
    z-index: 1;
    max-width: 100%;
    height: auto;
}

.error-separator {
    width: 100%;
    height: 1px;
    background-color: var(--black);
    margin-bottom: 40px;
}

.error-description {
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
    max-width: 480px;
    margin-bottom: 40px;
}

.btn-error-home {
    letter-spacing: 0.1em;
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 768px) {
    .error-page-wrapper {
        margin-top: 40px;
    }
}