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

:root {
    --brand-primary: #00b2ff;
    --brand-secondary: #0050bd;
    --brand-dark: #000132;
    --text-primary: #1a1b1f;
    --text-secondary: #5d6c7b;

    /* #f0f8ff at Jamie's request, replacing the warm tone matched to the Cocoa
       Intelligence Brief. The other two move with it: they are the page colour's
       lighter and darker companions, so leaving them warm would read as the
       wrong temperature against a cool page. Raised surfaces (feature, contact
       and team cards) go to white, which separates cleanly from a page this
       light; --bg-muted carries the footer and the video panels' text half, and
       is set light enough for --text-secondary to clear 4.5:1 on it, which the
       previous warm value did not (it managed 4.21:1 in the footer). */
    --bg-page: #f0f8ff;
    --bg-page-rgb: 240, 248, 255;
    --bg-raised: #ffffff;
    --bg-muted: #e3edf9;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navigation */
/* The scrolled state used to be an inline style set by scripts.js, which meant
   this colour lived in two files and would drift. JS now only toggles a class. */
.navbar.scrolled {
    background: rgba(var(--bg-page-rgb), 0.98);
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(var(--bg-page-rgb), 0.95);
    backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    position: relative; /* anchor mobile dropdown */
}

.logo {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Logo image replacement */
.logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--brand-primary);
}

/* Mobile nav toggle (hamburger) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
}

.nav-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 178, 255, 0.2);
    border-radius: 6px;
}

.nav-toggle-box {
    position: relative;
    width: 24px;
    height: 18px;
    display: inline-block;
}

.nav-toggle-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 8px; }
.nav-toggle-bar:nth-child(3) { bottom: 0; }

/* Animate to X when open */
.navbar.open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.navbar.open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile layout */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-page);
        display: none;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        z-index: 999;
    }
    .navbar.open .nav-links { display: flex; }
    .nav-links li { border-top: 1px solid rgba(0,0,0,0.06); }
    .nav-links li:first-child { border-top: 0; }
    .nav-links a { padding: 0.875rem 1.25rem; display: block; }
}

/* Section banner (for Know Your Crop) */
.section-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3.5rem 1.5rem;
    margin-bottom: 2rem;
    background-size: cover;
    background-position: center;
}

.section-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
}

.section-banner .section-title,
.section-banner .section-subtitle {
    color: #ffffff;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.section-banner .section-title {
    margin-bottom: 0.5rem;
}

/* Specific banner background for the crop section */
.crop-banner {
    background-image: url('assets/images/cocoa_plantation.jpg');
    background-image: image-set(
        url('assets/images/cocoa_plantation.webp') type('image/webp'),
        url('assets/images/cocoa_plantation.jpg') type('image/jpeg')
    );
    background-color: #2d5016; /* fallback color while loading */
}

/* Specific banner background for the supply chain section */
.supply-banner {
    /* Ensure full cover rendering and no repeat */
    background: url('assets/images/cocoa_trees.jpg') center / cover no-repeat;
    background: image-set(
        url('assets/images/cocoa_trees.webp') type('image/webp'),
        url('assets/images/cocoa_trees.jpg') type('image/jpeg')
    ) center / cover no-repeat;
    background-color: #3d4f2e; /* fallback color while loading */
}

/* Slightly lighter overlay so image shows through more */
.supply-banner::after {
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
}


/* Split banner layout for farmers section on large screens */
.farmers-split-banner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    min-height: 340px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.farmers-banner-image {
    background: url('assets/images/scout_infield.jpg') center / cover no-repeat;
    background: image-set(
        url('assets/images/scout_infield.webp') type('image/webp'),
        url('assets/images/scout_infield.jpg') type('image/jpeg')
    ) center / cover no-repeat;
    background-color: #4a5a3c; /* fallback color while loading */
    min-height: 360px;
}

.farmers-banner-content {
    background: linear-gradient(135deg, rgba(0, 178, 255, 0.95) 0%, rgba(0, 80, 189, 0.95) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.75rem 2rem;
}

.farmers-banner-content .section-title,
.farmers-banner-content .section-subtitle {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.farmers-banner-content .section-title {
    margin-bottom: 0.5rem;
}

/* Mission text inside the Farmers banner */
.farmers-banner-content .mission-inline {
    margin-top: 0.75rem;
    text-align: center;
    max-width: 700px;
}

.farmers-banner-content .mission-label {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    font-size: 1.2rem; /* slightly larger than text */
}

.farmers-banner-content .mission-provenance {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.9rem 0 0;
    max-width: 700px;
    text-align: center;
    opacity: 0.92;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.farmers-banner-content .mission-text {
    color: #ffffff;
    font-weight: 500;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    font-size: 1.05rem;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .farmers-split-banner {
        grid-template-columns: 1fr;
    }

    .farmers-banner-image {
        min-height: 300px;
    }

    .farmers-banner-content {
        min-height: 180px;
    }
}


/* Split media panel for the two explainer videos, following the Supporting
   Farmers banner's shape. The text half uses the muted ground rather than the
   blue gradient, so three identical blue panels do not stack up down the page.
   Height is led by the video's own aspect ratio, not a min-height floor, which
   is what left dead space in the farmers banner. */
.media-split {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 0;
    align-items: stretch;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--bg-muted);
}

/* Mirrored so the two panels do not read as a repeat. The columns mirror along
   with the order, otherwise the reordered video lands in the narrow column. */
.media-split-reverse {
    grid-template-columns: 35fr 65fr;
}

.media-split-reverse .media-split-video {
    order: 2;
}

.media-split-video {
    background: #0a141d;
    display: flex;
}

.media-video {
    display: block;
    width: 100%;
    height: auto;
    align-self: center;
}

.media-split-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.media-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 0.6rem;
}

.media-split-content .section-title {
    font-size: 1.75rem;
    text-align: left;
    margin-bottom: 0.85rem;
}

.media-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
    text-wrap: pretty;
}

@media (max-width: 1000px) {
    .media-split,
    .media-split-reverse {
        grid-template-columns: 1fr;
    }

    /* Video first in both panels once stacked; the mirrored order only makes
       sense side by side. */
    .media-split-reverse .media-split-video {
        order: 0;
    }

    .media-split-content {
        padding: 2rem 1.5rem;
    }

    .media-split-content .section-title {
        font-size: 1.5rem;
    }
}

/* Causal DAG embed. The diagram is a self-contained page with its own dark
   ground, so it gets a framed panel rather than trying to blend in. Height comes
   from aspect-ratio matching the diagram's own 1200x800 viewBox, since any other
   ratio letterboxes it against that dark background. */
.dag-container {
    max-width: 1000px;
    margin: 2rem auto 2.5rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #0a141d;
}

.dag-container iframe {
    display: block;
    width: 100%;
    /* Matches the diagram's own viewBox (1200x800). The SVG is object-fit:
       contain, so any other ratio letterboxes it against its dark background,
       which is what showed as a bar down the side. */
    aspect-ratio: 1200 / 800;
    border: 0;
}

/* This section leads straight into the diagram, so it does not need the full
   heading rhythm the longer sections use. The default stack was a 2rem gap
   under the title plus 3rem under the lead paragraph. */
#insight .section-title {
    margin-bottom: 1rem;
}

#insight > .intro-text:first-of-type {
    margin-bottom: 1.75rem;
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 4.5rem 2rem 4rem;
    overflow: hidden;
}


.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 178, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    max-width: 1000px;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    animation: fadeInUp 1s ease-out;
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 80%;
    margin-inline: auto;
    margin-bottom: 2.25rem;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero .btn {
    padding: 1.15rem 2.75rem;
    font-size: 1.15rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 178, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(0, 178, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(0, 178, 255, 0.12);
    border-color: rgba(0, 178, 255, 0.5);
}

/* Content Sections */
/* On a landscape display there is room to read the headline as one statement
   rather than a three-line stack. Portrait and mobile keep the stack.

   The shape must be either three phrases on three lines or all three on one,
   never a 2/1 split. Hiding the breaks gives one line; nowrap keeps it there.
   The size is fixed rather than viewport-scaled, so the 1280px threshold is what
   guarantees the line fits: below that the stack is used instead. This block must
   stay after the base .hero rules above, since a media query adds no specificity
   and would otherwise be overridden. */
@media (orientation: landscape) and (min-width: 1280px) {
    .hero-content {
        max-width: min(1200px, 92vw);
    }

    .hero h1 {
        font-size: 2.75rem;
        white-space: nowrap;
    }

    .hero h1 .h1-break {
        display: none;
    }
}

.hero + .content-section {
    padding-top: 1rem;
}

.content-section {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    scroll-margin-top: calc(80px + 1rem); /* navbar height + 1rem offset */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.section-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    font-weight: 500;
}

.intro-text {
    /* Avoids leaving a single word alone on the last line. Progressive: falls
       back to normal wrapping where unsupported. */
    text-wrap: pretty;
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 3rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.center-text {
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--bg-raised);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
    background: var(--bg-raised);
    border-color: rgba(0, 178, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 178, 255, 0.12);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Links inside body copy. Previously unstyled, so a link in a paragraph
   rendered as default browser blue rather than anything on-brand. */
.intro-text a,
.content-section p a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness 0.15s ease;
}

.intro-text a:hover,
.content-section p a:hover {
    text-decoration-thickness: 2px;
}

.micro-cta {
    text-align: center;
    margin-top: 2rem;
}

.micro-cta a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.micro-cta a:hover {
    color: rgba(0, 80, 189, 0.75);
}


.mission-text {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.6;
}


/* CTA Section */
.cta-section {
    padding: 6rem 2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.cta-section p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

/* Footer */
.footer {
    background: var(--bg-muted);
    padding: 3rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
    margin-bottom: 1.75rem;
}

.footer-detail p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.footer-detail a {
    color: inherit;
    text-decoration: none;
}

.footer-detail a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.footer-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.footer-copyright p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

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

    .hero p {
        font-size: 1.1rem;
        max-width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }

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

}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

/* Contact page */
.contact-banner {
    margin-top: 4rem;
    background: url('assets/images/landscape.jpg') center / cover no-repeat;
    background: image-set(
        url('assets/images/landscape.webp') type('image/webp'),
        url('assets/images/landscape.jpg') type('image/jpeg')
    ) center / cover no-repeat;
    background-color: #2d5016; /* fallback color while loading */
}


.contact-card {
    background: var(--bg-raised);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.contact-card h3 {
    margin-bottom: 0.5rem;
}

.contact-form {
    margin-top: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: rgba(0, 178, 255, 0.6);
    box-shadow: 0 0 0 4px rgba(0, 178, 255, 0.12);
}

.field-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 1.25rem;
}

.form-note {
    margin-top: 1rem;
}

.form-status {
    margin-top: 1rem;
    font-weight: 600;
}

.hp { display: none; }

@media (max-width: 900px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Investor page */
.investor-banner {
    margin-top: 6rem;
    background: url('assets/images/cocoa_trees.jpg') center / cover no-repeat;
    background: image-set(
        url('assets/images/cocoa_trees.webp') type('image/webp'),
        url('assets/images/cocoa_trees.jpg') type('image/jpeg')
    ) center / cover no-repeat;
    background-color: #8b7355; /* fallback color while loading */
}

/* Supporter marquee. Sized by height rather than by grid cell so wordmarks of
   very different proportions all read at the same visual weight: SFC Capital is
   6.3:1, Leeds Angels is square. */
.logo-marquee {
    --logo-row-height: 88px;
    /* Caps the widest wordmarks. Absolute as well as relative: 30vw alone does
       not bite on a large monitor, where 30vw exceeds the logo's natural width. */
    --logo-max-width: min(30vw, 280px);
    height: var(--logo-row-height);
    overflow: hidden;
    /* Fade both edges so logos enter and leave rather than popping in. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-track {
    display: flex;
    width: max-content;
    /* scripts.js overrides the duration from the measured width, so the speed
       stays the same however many logos there are. */
    animation: logo-scroll var(--logo-scroll-duration, 45s) linear infinite;
    will-change: transform;
}

.logo-set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.logo-item picture {
    /* The image has to be a direct flex child of .logo-item. Left as a normal
       box, picture is an auto-height inline wrapper, and a percentage
       max-height on the image resolves against it, which means against an
       indefinite height, which resolves to none. The image then rendered at its
       intrinsic size and overflowed the strip. */
    display: contents;
}

.logo-item {
    /* A fixed-height slot per logo, so height and width can be capped
       independently. Without this the widest wordmark set the pace: SFC Capital
       is 6.3:1, so at a uniform height it ran to 350px and dominated the row
       while square marks sat at 56px. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--logo-row-height);
    margin: 0 1.75rem;
}

.logo-item img {
    /* 80% of the row, so every logo carries the same breathing room above and
       below. Four of the source files used to have heavy transparent padding
       baked in, which made them render tiny at a uniform height; those are
       trimmed, so this now produces a genuinely consistent size. */
    /* Absolute on both axes rather than percentages: nothing here depends on a
       containing block having a definite size, which is what broke before. */
    max-height: calc(var(--logo-row-height) * 0.8);
    max-width: var(--logo-max-width);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.15);
    opacity: 0.9;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Let someone stop it to actually read a logo. */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    /* Continuous motion is a genuine accessibility problem, so stop it. The row
       is then wider than the screen, so make it scrollable by hand instead. */
    .logo-track {
        animation: none;
    }

    .logo-marquee {
        overflow-x: auto;
    }
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* About page */
.about-banner {
    margin-top: 6rem;
    background: url('assets/images/canopy_birds_eye.jpg') center / cover no-repeat;
    background: image-set(
        url('assets/images/canopy_birds_eye.webp') type('image/webp'),
        url('assets/images/canopy_birds_eye.jpg') type('image/jpeg')
    ) center / cover no-repeat;
    background-color: #2d5016; /* fallback color while loading */
}


.mission-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
    text-align: center;
}

/* Team section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin: 3rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.team-card {
    background: var(--bg-raised);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 178, 255, 0.15);
    border-color: rgba(0, 178, 255, 0.3);
}

.team-image-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(0, 178, 255, 0.1);
    transition: all 0.3s ease;
}

.team-card:hover .team-image-wrapper {
    border-color: rgba(0, 178, 255, 0.4);
}

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

.team-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.team-role {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 0.75rem;
}

.team-tagline {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 500;
}

.team-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .mission-text {
        font-size: 1.1rem;
    }
}