/* =========================================================
   OMASCED-SABIA
   Main stylesheet
========================================================= */


/* =========================================================
   1. VARIABLES
========================================================= */

:root {

    --sabia-blue: #002244;
    --sabia-blue-light: #0b3a66;
    --sabia-green: #4ca635;
    --sabia-red: #ad0032;

    --linkedin-blue: #0a66c2;
    --linkedin-blue-dark: #084f99;

    --white: #ffffff;

    --background-light: #f5f7f9;
    --background-soft: #fafbfd;

    --text-main: #1f2937;
    --text-soft: #5b6470;

    --border: #dfe5eb;

    --shadow-soft:
        0 8px 25px rgba(0, 34, 68, 0.08);

    --shadow-card:
        0 12px 32px rgba(0, 34, 68, 0.12);

    --max-width: 1380px;
    --content-width: 1180px;

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;
}


/* =========================================================
   2. RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text-main);
    background: var(--white);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   3. BASIC TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    color: var(--sabia-blue);

    line-height: 1.15;

    font-weight: 700;
}

h1 {
    font-size: clamp(2.6rem, 5vw, 5rem);
}

h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

h3 {
    font-size: 1.25rem;
}

p + p {
    margin-top: 1rem;
}

.section-label {

    margin-bottom: 0.75rem;

    color: var(--sabia-green);

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   4. HEADER
========================================================= */

.site-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding:
        1rem
        max(2rem, calc((100vw - var(--max-width)) / 2));

    background: rgba(255, 255, 255, 0.98);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(12px);
}

.header-brand {
    flex-shrink: 0;
}

.brand-link {
    display: flex;
    align-items: center;
}

.brand-logo {
    width: 230px;
    height: auto;
}


/* =========================================================
   5. MAIN NAVIGATION
========================================================= */

.main-nav {

    display: flex;
    align-items: center;

    gap: 1.6rem;

    font-size: 0.95rem;
    font-weight: 600;
}

.main-nav > a,
.nav-dropdown > a {

    position: relative;

    padding: 0.7rem 0;

    color: var(--sabia-blue);

    white-space: nowrap;
}

.main-nav > a::after,
.nav-dropdown > a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0.35rem;

    width: 0;
    height: 2px;

    background: var(--sabia-green);

    transition: width 0.2s ease;
}

.main-nav > a:hover::after,
.main-nav > a.active::after,
.nav-dropdown > a:hover::after,
.nav-dropdown > a.active::after {
    width: 100%;
}

.main-nav > a:hover,
.main-nav > a.active,
.nav-dropdown > a:hover,
.nav-dropdown > a.active {
    color: var(--sabia-green);
}


/* =========================================================
   6. DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}

.dropdown-menu {

    position: absolute;

    top: calc(100% + 0.45rem);
    left: -1rem;

    min-width: 220px;

    display: none;

    padding: 0.6rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-small);

    box-shadow: var(--shadow-card);
}

.nav-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {

    display: block;

    padding: 0.75rem 0.9rem;

    color: var(--sabia-blue);

    border-radius: 6px;
}

.dropdown-menu a:hover {

    color: var(--sabia-green);

    background: var(--background-light);
}


/* =========================================================
   7. BUTTONS
========================================================= */

.button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    min-height: 48px;

    padding: 0.8rem 1.3rem;

    border-radius: var(--radius-small);

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {

    color: var(--white);

    background: var(--sabia-green);

    border: 1px solid var(--sabia-green);
}

.button-primary:hover {
    background: #3d8a2c;
}

.button-secondary {

    color: var(--sabia-blue);

    background: transparent;

    border: 1px solid var(--sabia-blue);
}

.button-secondary:hover {

    color: var(--white);

    background: var(--sabia-blue);
}

.button-linkedin {

    color: var(--white);

    background: var(--linkedin-blue);

    border: 1px solid var(--linkedin-blue);
}

.button-linkedin:hover {

    background: var(--linkedin-blue-dark);

    border-color: var(--linkedin-blue-dark);
}


/* =========================================================
   8. HOME HERO
========================================================= */

.hero {

    width: min(var(--max-width), calc(100% - 4rem));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 4rem;

    min-height: 680px;

    padding: 5rem 0;
}

.hero-content {
    max-width: 720px;
}

.hero-project {

    margin-bottom: 1rem;

    color: var(--sabia-green);

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    font-size: 0.9rem;
}

.hero h1 {
    margin-bottom: 1.5rem;
}

.hero h1 span {

    display: block;

    color: var(--sabia-green);
}

.hero-description {

    max-width: 680px;

    font-size: 1.18rem;

    color: var(--text-soft);
}

.hero-buttons {

    display: flex;
    flex-wrap: wrap;

    gap: 0.9rem;

    margin-top: 2rem;
}

.hero-image {

    overflow: hidden;

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);
}

.hero-image img {

    width: 100%;

    min-height: 480px;

    object-fit: cover;
}


/* =========================================================
   9. HOME CARDS
========================================================= */

.home-sections {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

    padding: 5rem 0;
}

.home-card {

    min-height: 260px;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.home-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-card);
}

.card-icon {

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.2rem;

    color: var(--white);

    background: var(--sabia-blue);

    border-radius: 50%;

    font-size: 1.25rem;
    font-weight: 700;
}

.home-card h2 {

    margin-bottom: 0.8rem;

    font-size: 1.45rem;
}

.home-card p {

    margin-bottom: 1.5rem;

    color: var(--text-soft);
}

.home-card > a {

    margin-top: auto;

    color: var(--sabia-green);

    font-weight: 700;
}


/* =========================================================
   10. SECTION HEADER
========================================================= */

.section-header {

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 2.3rem;
}

.section-header > a {

    color: var(--sabia-green);

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   11. HOME NEWS
========================================================= */

.home-news,
.home-publications,
.home-demo {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    padding: 5rem 0;
}

.home-news {
    border-top: 1px solid var(--border);
}

.news-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;
}

.news-placeholder {

    padding: 1.8rem;

    background: var(--background-light);

    border-radius: var(--radius-medium);
}

.news-date {

    margin-bottom: 0.8rem;

    color: var(--sabia-green);

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.news-placeholder h3 {
    margin-bottom: 0.8rem;
}

.news-placeholder p:last-child {
    color: var(--text-soft);
}


/* =========================================================
   12. HOME PUBLICATIONS
========================================================= */

.home-publications {
    border-top: 1px solid var(--border);
}

.empty-content {

    padding: 2rem;

    color: var(--text-soft);

    background: var(--background-soft);

    border: 1px dashed var(--border);

    border-radius: var(--radius-medium);
}


/* =========================================================
   13. HOME DEMO
========================================================= */

.home-demo {

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 4rem;

    border-top: 1px solid var(--border);
}

.home-demo p {
    color: var(--text-soft);
}

.home-demo .button {
    margin-top: 1.5rem;
}

.demo-placeholder {

    min-height: 320px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    color: var(--sabia-blue);

    background: var(--background-light);

    border-radius: var(--radius-large);
}

.demo-placeholder span {
    font-size: 3rem;
}


/* =========================================================
   14. PAGE HERO
========================================================= */

.page-hero {

    background:
        linear-gradient(
            135deg,
            var(--background-light),
            var(--white)
        );

    border-bottom: 1px solid var(--border);
}

.page-hero-inner {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    padding: 5rem 0;
}

.page-hero-text {
    max-width: 900px;
}

.page-hero h1 {
    margin-bottom: 1.3rem;
}

.page-hero-text > p:not(.section-label):not(.project-reference) {

    max-width: 850px;

    color: var(--text-soft);

    font-size: 1.18rem;
}

.project-reference {

    display: inline-block;

    margin-top: 1.5rem;

    padding: 0.5rem 0.9rem;

    color: var(--sabia-blue);

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-small);

    font-weight: 700;
}


/* =========================================================
   15. GENERIC CONTENT SECTIONS
========================================================= */

.content-section {
    padding: 5rem 0;
}

.section-soft {
    background: var(--background-light);
}

.content-container {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;
}

.section-intro {

    max-width: 900px;

    margin-bottom: 2.4rem;

    color: var(--text-soft);

    font-size: 1.1rem;
}

.large-text {

    font-size: 1.25rem;

    color: var(--text-main);
}

.two-column-content {

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 3rem;
}

.two-column-content p {
    color: var(--text-soft);
}


/* =========================================================
   16. CHALLENGE GRID
========================================================= */

.challenge-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;
}

.challenge-card {

    padding: 1.8rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);
}

.challenge-card h3 {
    margin-bottom: 0.7rem;
}

.challenge-card p {
    color: var(--text-soft);
}


/* =========================================================
   17. OBJECTIVE HIGHLIGHT
========================================================= */

.objective-highlight {

    padding: 2.5rem;

    background: var(--sabia-blue);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);
}

.objective-highlight p {

    max-width: 1000px;

    color: var(--white);

    font-size: 1.18rem;
}


/* =========================================================
   18. OBJECTIVES / WORK PACKAGES / MILESTONES
========================================================= */

.objectives-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;
}

.objective-card {

    padding: 1.8rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-soft);
}

.objective-number {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 52px;
    height: 34px;

    margin-bottom: 1rem;

    padding: 0 0.75rem;

    color: var(--white);

    background: var(--sabia-green);

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 700;
}

.objective-card h3 {
    margin-bottom: 0.7rem;
}

.objective-card p {
    color: var(--text-soft);
}


/* =========================================================
   19. APPROACH GRID
========================================================= */

.approach-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;
}

.approach-card {

    padding: 1.8rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-soft);
}

.approach-icon {

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.2rem;

    color: var(--white);

    background: var(--sabia-blue);

    border-radius: 50%;

    font-size: 0.78rem;
    font-weight: 700;
}

.approach-card h3 {
    margin-bottom: 0.75rem;
}

.approach-card p {
    color: var(--text-soft);
}


/* =========================================================
   20. SUSTAINABILITY / EXPECTED OUTCOMES
========================================================= */

.sustainability-section {
    background: var(--sabia-blue);
}

.sustainability-section .section-label {
    color: #8fd37c;
}

.sustainability-section h2,
.sustainability-section .section-intro {
    color: var(--white);
}

.sustainability-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;
}

.sustainability-grid article {

    padding: 1.7rem;

    background: var(--white);

    border-radius: var(--radius-medium);
}

.sustainability-grid h3 {
    margin-bottom: 0.75rem;
}

.sustainability-grid p {
    color: var(--text-soft);
}


/* =========================================================
   21. SECTORS
========================================================= */

.sectors-grid {

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 1rem;
}

.sectors-grid > div {

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding: 1rem;

    text-align: center;

    color: var(--sabia-blue);

    background: var(--background-light);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);

    font-weight: 700;
}


/* =========================================================
   22. NEXT SECTION
========================================================= */

.project-next {

    padding: 4rem 0;

    background: var(--background-soft);

    border-top: 1px solid var(--border);
}

.project-next .content-container {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;
}

.project-next .content-container > div {
    max-width: 760px;
}

.project-next p {
    color: var(--text-soft);
}


/* =========================================================
   23. TEAM
========================================================= */

.team-hero-actions {
    margin-top: 1.8rem;
}


/* Principal Investigators */

.principal-investigators {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}


/* General team grids */

.team-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.6rem;
}

.team-grid-work {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* General team card */

.team-card {

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.team-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-card);
}


/* Principal Investigator card */

.team-card-principal {

    display: flex;

    align-items: stretch;

    min-height: 240px;

    max-height: 240px;
}


/* Principal Investigator image */

.team-card-principal .team-photo {

    flex: 0 0 160px;

    width: 160px;
    height: 240px;

    overflow: hidden;

    background: var(--background-light);
}

.team-card-principal .team-photo img {

    width: 160px;
    height: 240px;

    max-width: none;

    object-fit: cover;

    object-position: center top;

    display: block;
}


/* General Research Team image */

.team-grid .team-photo {

    width: 100%;
    height: 250px;

    overflow: hidden;

    background: var(--background-light);
}

.team-grid .team-photo img {

    width: 100%;
    height: 250px;

    max-width: none;

    object-fit: cover;

    object-position: center top;

    display: block;
}


/* Team information */

.team-info {
    padding: 1.4rem;
}

.team-card-principal .team-info {

    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1.5rem;
}

.team-info h3 {
    margin-bottom: 0.45rem;
}

.team-role {

    margin-bottom: 0.45rem;

    color: var(--sabia-green);

    font-size: 0.9rem;
    font-weight: 700;
}

.team-institution {

    margin-top: 0;
    margin-bottom: 0.8rem;

    color: var(--text-soft);

    font-size: 0.95rem;
}

.team-description {

    margin-top: 0;

    color: var(--text-soft);

    font-size: 0.95rem;
}


/* =========================================================
   24. LINKEDIN
========================================================= */

.linkedin-section {

    padding: 4rem 0;

    background: var(--sabia-blue);
}

.linkedin-content {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 3rem;
}

.linkedin-section .section-label {
    color: #8fd37c;
}

.linkedin-section h2 {

    color: var(--white);

    margin-bottom: 1rem;
}

.linkedin-section p {

    max-width: 760px;

    color: rgba(255, 255, 255, 0.86);
}

.linkedin-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.65rem;

    padding: 0.8rem 1.2rem;

    color: var(--white);

    background: var(--linkedin-blue);

    border-radius: var(--radius-small);

    font-weight: 700;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.linkedin-button:hover {

    background: var(--linkedin-blue-dark);

    transform: translateY(-2px);
}

.linkedin-button-large {
    padding: 1rem 1.4rem;
}

.linkedin-icon {

    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--linkedin-blue);

    background: var(--white);

    border-radius: 4px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 0.75rem;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   25. FOOTER
========================================================= */

.site-footer {

    color: rgba(255, 255, 255, 0.82);

    background: #00172e;
}

.footer-main {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr;

    gap: 4rem;

    padding: 4rem 0 3rem;
}

.footer-project {
    max-width: 520px;
}

.footer-sabia-logo {

    width: 250px;

    margin-bottom: 1.2rem;
}

.footer-project p {
    color: rgba(255, 255, 255, 0.72);
}

.footer-links {

    display: flex;
    flex-direction: column;

    gap: 0.65rem;
}

.footer-links h3 {

    margin-bottom: 0.4rem;

    color: var(--white);

    font-size: 1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.72);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-linkedin {

    display: inline-flex;
    align-items: center;

    gap: 0.55rem;

    margin-top: 1.2rem;

    color: var(--white);

    font-weight: 700;
}

.footer-linkedin:hover {
    color: #b5d9ff;
}


/* =========================================================
   26. FUNDING
========================================================= */

.footer-funding {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(320px, 570px) 1fr;

    align-items: center;

    gap: 3rem;

    padding: 2rem 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.funding-logos {

    display: flex;
    align-items: center;
}

.funding-logo-official,
.funding-logos img.funding-logo-official {

    width: 100%;
    max-width: 570px;

    height: auto;

    object-fit: contain;

    object-position: left center;
}

.funding-text {

    font-size: 0.88rem;

    color: rgba(255, 255, 255, 0.66);
}

.funding-text p + p {
    margin-top: 0.45rem;
}


/* =========================================================
   27. FOOTER BOTTOM
========================================================= */

.footer-bottom {

    width: min(var(--content-width), calc(100% - 4rem));

    margin: 0 auto;

    display: flex;
    justify-content: space-between;

    gap: 2rem;

    padding: 1.3rem 0 1.8rem;

    color: rgba(255, 255, 255, 0.55);

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    font-size: 0.85rem;
}


/* =========================================================
   28. RESPONSIVE - 1200
========================================================= */

@media (max-width: 1200px) {

    .site-header {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .main-nav {

        gap: 1.1rem;

        font-size: 0.9rem;
    }

    .brand-logo {
        width: 205px;
    }

    .hero {
        gap: 2.5rem;
    }

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

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

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


/* =========================================================
   29. RESPONSIVE - 950
========================================================= */

@media (max-width: 950px) {

    .site-header {

        position: relative;

        flex-direction: column;
        align-items: flex-start;

        gap: 0.6rem;
    }

    .main-nav {

        width: 100%;

        overflow-x: auto;

        padding-bottom: 0.4rem;
    }

    .dropdown-menu {
        position: fixed;
    }

    .hero {

        grid-template-columns: 1fr;

        min-height: auto;

        padding: 4rem 0;
    }

    .hero-image {
        max-width: 760px;
    }

    .hero-image img {
        min-height: 360px;
    }

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

    .news-grid {
        grid-template-columns: 1fr;
    }

    .home-demo {
        grid-template-columns: 1fr;
    }

    .two-column-content {

        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .objectives-grid {
        grid-template-columns: 1fr;
    }

    .challenge-grid {
        grid-template-columns: 1fr;
    }

    .principal-investigators {
        grid-template-columns: 1fr;
    }

    .team-card-principal {
        max-height: none;
        min-height: 240px;
    }

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

    .linkedin-content {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

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

    .footer-funding {
        grid-template-columns: 1fr;
    }

    .funding-logo-official,
    .funding-logos img.funding-logo-official {
        max-width: 600px;
    }
}


/* =========================================================
   30. RESPONSIVE - 650
========================================================= */

@media (max-width: 650px) {

    .site-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .brand-logo {
        width: 190px;
    }

    .main-nav {

        gap: 1rem;

        font-size: 0.85rem;
    }

    .hero,
    .home-sections,
    .home-news,
    .home-publications,
    .home-demo,
    .page-hero-inner,
    .content-container,
    .linkedin-content,
    .footer-main,
    .footer-funding,
    .footer-bottom {

        width: min(100% - 2rem, var(--content-width));
    }

    .hero {
        padding: 3rem 0;
    }

    .hero h1 {
        font-size: 2.45rem;
    }

    .hero-description {
        font-size: 1.05rem;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-image img {
        min-height: 260px;
    }

    .home-sections {
        grid-template-columns: 1fr;
    }

    .section-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 0.8rem;
    }

    .content-section {
        padding: 3.5rem 0;
    }

    .page-hero-inner {
        padding: 3.5rem 0;
    }

    .page-hero-text > p:not(.section-label):not(.project-reference) {
        font-size: 1.05rem;
    }

    .objective-highlight {
        padding: 1.7rem;
    }

    .objective-highlight p {
        font-size: 1.05rem;
    }

    .approach-grid {
        grid-template-columns: 1fr;
    }

    .sustainability-grid {
        grid-template-columns: 1fr;
    }

    .sectors-grid {
        grid-template-columns: 1fr;
    }

    .project-next .content-container {

        flex-direction: column;

        align-items: flex-start;
    }

    .team-grid,
    .team-grid-work {
        grid-template-columns: 1fr;
    }

    .team-card-principal {
        display: block;
        max-height: none;
    }

    .team-card-principal .team-photo {

        width: 100%;
        height: 280px;

        flex: none;
    }

    .team-card-principal .team-photo img {

        width: 100%;
        height: 280px;

        max-width: none;
    }

    .team-grid .team-photo {
        height: 280px;
    }

    .team-grid .team-photo img {
        height: 280px;
    }

    .linkedin-button,
    .linkedin-button-large {
        width: 100%;
    }

    .footer-main {

        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .footer-project {
        grid-column: auto;
    }

    .footer-funding {
        gap: 1.5rem;
    }

    .funding-logo-official,
    .funding-logos img.funding-logo-official {

        width: 100%;
        max-width: 100%;
    }

    .footer-bottom {

        flex-direction: column;

        gap: 0.4rem;
    }
}
/* =========================================================
   TOP INSTITUTIONAL FUNDING STRIP
========================================================= */
.top-funding { background: #fff; border-bottom: 1px solid #dfe5eb; }
.top-funding-inner { max-width: 1380px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.top-funding-logo { width: min(39%, 390px); height: auto; max-height: 92px; object-fit: contain; object-position: left center; flex-shrink: 0; }
.top-funding-text { color: #253548; font-size: .85rem; line-height: 1.45; }
.top-funding-text p { margin: 0; }
.top-funding-text p + p { margin-top: 5px; }
@media (max-width: 720px) {
  .top-funding-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 18px; }
  .top-funding-logo { width: min(100%, 350px); max-height: 75px; }
  .top-funding-text { font-size: .78rem; }
}

/* Keep SABIA identity visible beside the main navigation */
.site-header { flex-wrap: wrap; }
.header-brand { flex: 0 0 auto; min-width: 190px; }
.brand-link { display: inline-flex; }
.brand-logo { display: block; width: 230px; max-width: 100%; height: auto; opacity: 1; visibility: visible; }
.main-nav { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
@media (max-width: 1200px) { .brand-logo { width: 205px; } .main-nav { gap: 0.8rem; } }
@media (max-width: 950px) { .site-header { align-items: flex-start; } .main-nav { justify-content: flex-start; flex-wrap: nowrap; } }