/* ========================================================================
    1.  FOUNDATIONS
======================================================================== */
:root {
            --main-gold: #b29633;
            --dark-blue: #03233b;
            --light-blue: #0070ad;
            --main-purple: #9747FF;
            --super-light-blue: #8FD0F3;
            --tech-green: #56C2B7;
            --tech-green-light: rgba(86, 194, 183, 0.6);
            --reg-white: #FFFFFF;
            --reg-light-grey: #F0F0F0;
            --reg-black: #000000;
        }
        
        html {
            scroll-behavior: smooth;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            font-family: "Montserrat", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 16px;
        }

        /* Fill iOS safe-area zones with the dark-blue base colour —
           home page only. Works in tandem with viewport-fit=cover. */
        body.page-home {
            background-color: #03233b;
        }

        main {
            flex: 1;
        }






/* ========================================================================
    2.  CUSTOM FORMATS
======================================================================== */

        /* Custom Min-height */
        .mh-100 {
            min-height: 100%;
        }
        .min-h-md {
            min-height: 300px;
        }

        /* Custom Max-width */
        .mw-md {
            max-width: 160px;
        }
        .mw-1000 {
            max-width: 1000px;
        }
        .mw-900 {
            max-width: 900px;
        }
        .mw-800 {
            max-width: 800px;
        }

        /* Custom background-color */
        .bg-light-grey {
            background-color: var(--reg-light-grey);
        }
        .bg-light-blue {
            background-color: var(--light-blue);
        }
        .bg-dark-blue {
            background-color: var(--dark-blue);
        }
        .bg-tech-green {
            background-color: var(--tech-green);
        }
        .bg-purple {
            background-color: var(--main-purple);
        }
        .bg-gold {
            background-color: var(--main-gold);
        }
        .bg-gradient-tech-green-to-light-blue-progress-v {
            background: linear-gradient(rgba(86, 194, 183, 0.2), var(--tech-green), var(--light-blue), rgba(0, 112, 173, 0.2));
        }
        .bg-gradient-gold-to-dark-blue-progress-v {
            background: linear-gradient(rgba(178, 150, 51, 0.2), var(--main-gold), var(--main-gold), rgba(178, 150, 51, 0.2));
        }
        .bg-gradient-tech-green-to-light-blue-v {
            background: linear-gradient(var(--tech-green), var(--light-blue));
        }
        .bg-gradient-light-blue-to-dark-blue-v {
            background: linear-gradient(var(--light-blue), var(--dark-blue));
        }

        /* Custom border-radius */
        .border-custom-radius {
            border-radius: 32px;
        }

        .border-gold {
            border: var(--main-gold) thin solid;
        }
        .border-tech-green {
            border: var(--tech-green) thin solid;
        }
        .border-purple {
            border: var(--main-purple) thin solid;
        }

        /* Custom hover effect */
        .scale {
            transform: scale(1);
            transition: all 0.3s ease-out;
        }
        .scale:hover {
            transform: scale(1.1);
        }


        /* Custom Gap */
        .g-cust-30 {
            gap: 30px;
        }

        @media (max-width: 576px) {
            .g-cust-30 {
                gap: 15px !important;
            }
        }

        /* Gradient text utility */
        .gradient-text {
            background: linear-gradient(135deg, var(--light-blue) 0%, var(--tech-green) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent; /* fallback for unsupported browsers */
        }

        /* Custom text-color */
        .text-dark-blue {
            color: var(--dark-blue);
        }
        .text-light-blue {
            color: var(--light-blue);
        }
        .text-light-grey {
            color: var(--reg-light-grey);
        }
        .text-tech-green {
            color: var(--tech-green);
        }
        .text-gold {
            color: var(--main-gold);
        }
        .text-purple {
            color: var(--main-purple);
        }

        /* Custom font-size */
        .xxsmall {
            font-size: 0.65rem !important;
        }
        .xsmall {
            font-size: 0.75rem !important;
        }

        /* Custom Letter-spacing */
        .letter-spacing-min-4 {
            letter-spacing: -0.1rem;
        }
        .letter-spacing-min-5 {
            letter-spacing: -0.13rem;
        }
        .letter-spacing-min-2 {
            letter-spacing: -0.05rem;
        }
        .letter-spacing-max-1 {
            letter-spacing: 0.02rem;
        }
        .letter-spacing-max-2 {
            letter-spacing: 0.05rem;
        }

        /* Custom line-height */
        .line-height-3 {
            line-height: 1.75rem;
        }

        /* ── Enhance badges ───────────────────────────────────────────────
           Inline decorative word chips used as:
               <span class="enhance-systems">Systems</span>
           Font-size always inherits from the parent element so the badge
           sits naturally inside .lead, normal body copy, or .small text.
           The grid overlay is sized in em so it scales with the font.
           ─────────────────────────────────────────────────────────────── */
        .enhance-systems,
        .enhance-technology,
        .enhance-access {
            display: inline-block;
            padding: 0.12em 0.5em;
            border-radius: 0.4em;
            font-size: small;
            font-weight: 600;
            letter-spacing: 0.03rem;
            line-height: 1.5;
            white-space: nowrap;
            vertical-align: baseline;
            text-transform: uppercase;
        }

        /* SYSTEMS — purple background, white text */
        .enhance-systems {
            background-color: var(--main-purple);
            color: var(--reg-white);
            background-size: 0.42em 0.42em;
        }

        /* TECHNOLOGY — dark teal, ice-blue text, purple bottom accent */
        .enhance-technology {
            background-color: var(--tech-green);
            color: var(--reg-white);
            background-size: 0.42em 0.42em;
        }

        /* ACCESS — dark olive-charcoal, warm cream text */
        .enhance-access {
            background-color: var(--main-gold);
            color: var(--reg-white);
            background-size: 0.42em 0.42em;
        }





/* ========================================================================
    3.  Buttons & Links
======================================================================== */

        .btn-3cc-sm {
            width: auto;
            max-width: 250px;
            height: fit-content;
            padding:8px 17px;
            border: none;
            border-radius: 15px !important;
            font-size: 0.85rem;
            margin: 0;
            text-decoration: none;
        }
        .btn-3cc-bg-white-hollow {
            margin-bottom: 0;;
            border: transparent thin solid;
            background-color: rgba(0, 0, 0, 0.7);
            filter: drop-shadow(0px 10px 30px var(--light-blue));
            color: var(--reg-white);
            transition: all .3s ease-out;
            /* Promote to its own GPU compositing layer so iOS Safari renders
               the drop-shadow correctly on first paint, not just after a
               scroll-triggered recomposite. */
            will-change: filter;
        }
        .btn-3cc-bg-white-hollow:hover {
            margin-bottom: 5px;;
            border: var(--tech-green) thin solid;
            background-color: var(--tech-green);
            background-image: linear-gradient(to right, var(--light-blue) , var(--tech-green));
            color: var(--reg-white);
            transition: all .3s ease-out;
        }
        .btn-3cc-bg-dark-hollow {
            margin-bottom: 0;;
            border: transparent thin solid;
            background-color: rgba(255, 255, 255, 0.7);
            filter: drop-shadow(0px 10px 30px var(--light-blue));
            color: var(--dark-blue);
            transition: all .3s ease-out;
            will-change: filter; /* same GPU-layer fix as white-hollow above */
        }
        .btn-3cc-bg-dark-hollow:hover {
            margin-bottom: 5px;;
            border: var(--tech-green) thin solid;
            background-color: var(--tech-green);
            background-image: linear-gradient(to right, var(--light-blue) , var(--tech-green));
            color: var(--reg-white);
            transition: all .3s ease-out;
        }





/* ========================================================================
    4.  Navigation
======================================================================== */

        .navbar-brand img {
            width:170px; height:auto;
        }

        @media (max-width: 576px) {
            .navbar-brand img {
                width:125px; height:auto;
            }
        }

        /* Container for the items */
        .nav-grid {
            display: grid;
            /* This makes it responsive without media queries */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            list-style: none;
            padding: 0;
        }

        .nav-grid-item {
            list-style: none;
            transition: transform 0.3s ease;
        }

        .nav-grid-item:hover,
        .nav-grid-item.is-visible:hover {
            transform: translateY(-5px);
        }

        .nav-grid-link, .nav-grid-cta {
            text-decoration: none;
            color: white;
            display: flex;
            /*align-items: flex-start;*/
            align-items: center;
            gap: 1.5rem;
            padding: 1.5rem;
            border-radius: 12px;
            height: 100%;
        }
        @media (max-width: 576px) {
            .nav-grid {
                margin-top: 0;
                margin-bottom: 35px;
            }
            .nav-grid-link, .nav-grid-cta {
                padding: 1rem !important;
            }
        }
        .nav-grid-link {
            background: rgba(255, 255, 255, 0.05);
            filter: drop-shadow(0px 30px 30px var(--light-blue));
        }
        .nav-grid-cta {
            background: rgba(0, 0, 0, 0.7);
            filter: drop-shadow(0px 10px 30px var(--light-blue));
        }

        .nav-grid-link.active {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .nav-grid-cta.active {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Icon Styling
           Bootstrap Icons renders glyphs via ::before, so the gradient-text
           technique must target ::before — not <i> directly, which has no
           text content of its own. Applying color/fill transparency on <i>
           alone causes ::before to inherit it and become invisible. */
        .nav-icon i {
            font-size: 2rem;
            transition: all 0.3s ease-out;
        }
        .nav-icon i::before {
            background: linear-gradient(to right, var(--light-blue), var(--tech-green));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Text Styling */
        .nav-label {
            display: block;
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
        }

        .nav-description {
            font-size: 0.9rem;
            color: #aaa;
            margin: 0;
        }

        /* Modal Fade Animation Polish */
        .menu-overlay.fade .modal-dialog {
            transform: scale(1.05); /* Slight zoom out effect on entrance */
            transition: transform 0.3s ease-out;
        }
        .menu-overlay.show .modal-dialog {
            transform: scale(1);
        }




/* ========================================================================
    5.  Misc
======================================================================== */

        .hero {
            padding: 5rem 0;
            position: relative;
            overflow: hidden;
            background: rgba(3, 35, 59, 0.95); /* dark-blue base */
        }

        /* ── Gradient blob container ──────────────────────────────────────
           Clips all blobs to the hero bounds and sets overall 0.9 opacity. */
        .hero-gradients {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 1;
            opacity: 0.9;
            pointer-events: none;
            filter: blur(80px);      /* ONE blur pass on the container instead of 5 */
            will-change: filter;     /* ONE promoted GPU layer instead of 5          */
        }

        /* Base blob styles */
        .hero-g {
            position: absolute;
            border-radius: 50%;
            /* filter removed — handled by the container above */
        }

        /* Blob 1 — tech-green · large · orbits from top-left ──────────── */
        .hero-g1 {
            width:  820px; height: 820px;
            background: radial-gradient(circle at center, #56C2B7 0%, transparent 70%);
            top: -250px; left: -200px;
            transform-origin: calc(50% + 450px) 55%;
            animation: blobOrbit 21s linear infinite;
        }

        /* Blob 2 — light-blue · large · counter-orbits from top-right ─── */
        .hero-g2 {
            width:  760px; height: 760px;
            background: radial-gradient(circle at center, #0070AD 0%, transparent 70%);
            top: -180px; right: -180px;
            transform-origin: calc(50% - 380px) 65%;
            animation: blobOrbit 27s linear infinite reverse;
        }

        /* Blob 3 — super-light-blue · medium · drifts vertically ───────── */
        .hero-g3 {
            width:  620px; height: 620px;
            background: radial-gradient(circle at center, #8FD0F3 0%, transparent 70%);
            top: 30%; left: 20%;
            animation: blobDriftV 19s ease-in-out infinite;
        }

        /* Blob 4 — tech-green · medium · drifts horizontally ───────────── */
        .hero-g4 {
            width:  560px; height: 560px;
            background: radial-gradient(circle at center, #56C2B7 0%, transparent 70%);
            bottom: -150px; right: 10%;
            animation: blobDriftH 23s ease-in-out infinite;
        }

        /* Blob 5 — light-blue · smaller · slow counter-orbit, right side ─ */
        .hero-g5 {
            width:  460px; height: 460px;
            background: radial-gradient(circle at center, #0070AD 0%, transparent 70%);
            top: 25%; left: 50%;
            transform-origin: calc(50% - 280px) calc(50% + 180px);
            animation: blobOrbit 34s linear infinite;
        }

        /* Hero content above gradient blobs */
        .hero > .container {
            position: relative;
            z-index: 2;
        }

        /* Home-page nav floats above everything */
        header:not(.sticky-header) nav {
            position: relative;
            z-index: 1030;
        }

        /* ── Blob keyframes ───────────────────────────────────────────────
           blobOrbit: blob rotates around an offset transform-origin,
           tracing a circular orbital path — the offset is set per-element.
           blobDriftV / blobDriftH: simple back-and-forth on one axis,
           used for blobs without a rotation orbit. */

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

        @keyframes blobDriftV {
            0%   { transform: translateY(-40%); }
            50%  { transform: translateY( 40%); }
            100% { transform: translateY(-40%); }
        }

        @keyframes blobDriftH {
            0%   { transform: translateX(-45%) translateY(-8%); }
            50%  { transform: translateX( 45%) translateY( 8%); }
            100% { transform: translateX(-45%) translateY(-8%); }
        }

        @media (max-width: 576px) {
            .hero { padding: 2rem 0 !important; }
        }





/* ========================================================================
    6.  Sticky Header (inner pages only)
======================================================================== */

        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(255, 255, 255, 0.17);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0);
            backdrop-filter: blur(12.5px);
            -webkit-backdrop-filter: blur(12.5px);
            transition: box-shadow 0.3s ease;
        }

        .sticky-header.is-scrolled {
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

        /* Scroll progress bar — sits at the very top edge of the sticky header.
           Uses scaleX() instead of width so the animation is GPU-composited
           and never triggers a layout pass. */
        #scroll-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, var(--tech-green), var(--light-blue));
            transform: scaleX(0);
            transform-origin: left center;
            pointer-events: none;
            will-change: transform;
            z-index: 10;
        }




/* ========================================================================
    7.  Breadcrumbs
======================================================================== */

        .breadcrumb-bar {
            background-color: var(--reg-white);
            /*border-bottom: 1px solid rgba(0, 0, 0, 0.07);*/
            padding: 0.5rem 0;
        }

        .breadcrumb-bar .breadcrumb {
            font-size: 0.75rem;
            letter-spacing: 0.02rem;
            margin: 0;
        }

        .breadcrumb-bar .breadcrumb-item a {
            color: var(--light-blue);
            text-decoration: none;
        }

        .breadcrumb-bar .breadcrumb-item a:hover {
            text-decoration: underline;
        }

        .breadcrumb-bar .breadcrumb-item.active {
            color: var(--dark-blue);
            font-weight: 600;
        }

        .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
            color: #aaa;
        }




/* ========================================================================
    8.  Utilities
======================================================================== */





/* ========================================================================
    9.  Responsive
======================================================================== */

        /* Approach cards row: allow wrapping on smaller screens */
        .approach-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 1rem;
        }
        @media (min-width: 992px) {
            .approach-row {
                flex-wrap: nowrap;
                justify-content: space-between;
            }
        }

        /* Quote author avatar: wider column on small screens */
        @media (max-width: 767px) {
            .quote-avatar-col {
                flex: 0 0 auto;
                width: 100%;
            }
            .quote-body-col {
                flex: 0 0 auto;
                width: 100%;
            }
        }




/* ========================================================================
    10. Reveal Animations
======================================================================== */

        .reveal {
            opacity: 0;
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .reveal.reveal-up {
            transform: translateY(60px);
        }

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

        /* Stagger delays for card grids */
        .reveal[data-delay="100"] { transition-delay: 0.10s; }
        .reveal[data-delay="200"] { transition-delay: 0.20s; }
        .reveal[data-delay="300"] { transition-delay: 0.30s; }

        /* Respect user motion preferences */
        @media (prefers-reduced-motion: reduce) {
            .reveal {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }




/* ========================================================================
    11. Portfolio — Featured Cover & Category Pills
======================================================================== */

        /* ---- Featured cover image ------------------------------------ */
        .featured-cover {
            position: relative;
            height: 300px;
            overflow: hidden;   /* clips the zooming ::before to the rounded corners */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        /* Pseudo-element inherits the inline background-image and zooms on hover.
           Kept on z-index 0 so the overlay sits above it. */
        .featured-cover::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: inherit;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transform: scale(1);
            transition: transform 0.6s ease;
            z-index: 0;
        }

        .featured-cover:hover::before {
            transform: scale(1.07);
        }

        .featured-cover .custom-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease, background-color 0.4s ease;
            cursor: pointer;
            z-index: 1;         /* sits above the scaling ::before */
        }

        .featured-cover:hover .custom-overlay {
            background-color: rgba(0, 0, 0, 0.7);
            opacity: 1;
            pointer-events: auto;
        }

        .featured-cover-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--reg-white);
            text-decoration: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .featured-cover:hover .featured-cover-link {
            opacity: 1;
            transform: translateY(0);
        }

        .featured-cover-invest-top-left {
            top:10px; 
            left: 10px; 
            padding: 16px; 
            border-top-left-radius: 24px; 
            border-bottom-left-radius: 8px; 
            border-top-right-radius: 8px; 
            border-bottom-right-radius: 8px;
        }

        .featured-cover-invest-bottom-left {
            bottom:10px; 
            left: 10px; 
            padding: 16px; 
            border-bottom-left-radius: 24px; 
            border-top-left-radius: 8px; 
            border-top-right-radius: 8px; 
            border-bottom-right-radius: 8px;
        }


        /* ---- Category pills ----------------------------------------- */
        .shell-pill {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            gap: 4px;
            padding: 0.5em 0.75em;
            border-radius: 8px;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.03em;
        }
        .shell-pill .dot {
            width: 10px; 
            height: 10px; 
            border-radius: 5px;
        }

        .system-pill        { background: var(--dark-blue); }
        .technology-pill    { background: var(--light-blue); }
        .access-pill        { background: var(--tech-green); }
        .unconventional-pill{ background: var(--main-gold); }


        /* ---- Company grid: logo-box hover -------------------------------- */
        .company-logo-box {
            position: relative;
            overflow: hidden;
        }

        /* Zoom the logo image when a URL exists */
        .company-logo-box.has-url img {
            transition: transform 0.6s ease;
        }

        .company-logo-box.has-url:hover img {
            transform: scale(1.07);
        }

        /* Dark overlay — same fade pattern as the featured cover */
        .company-logo-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease, background-color 0.4s ease;
            z-index: 1;
        }

        .company-logo-box:hover .company-logo-overlay {
            background-color: rgba(3, 35, 59, 0.82);
            opacity: 1;
            pointer-events: auto;
        }

        /* Reuse the featured-cover-link slide-up for the visit link */
        .company-logo-box:hover .featured-cover-link {
            opacity: 1;
            transform: translateY(0);
        }

/* ========================================================================
   12. News Page
======================================================================== */

        /* ── Newsletter cover card ── */
        .nl-card {
            display: block;
            text-decoration: none;
            color: inherit;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 12px rgba(3, 35, 59, 0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .nl-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 14px 36px rgba(3, 35, 59, 0.14);
            color: inherit;
        }
        .nl-cover {
            width: 100%;
            aspect-ratio: 3 / 4;
            object-fit: cover;
            display: block;
        }
        .nl-cover-placeholder {
            width: 100%;
            aspect-ratio: 3 / 4;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            text-align: center;
            background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
            color: #fff;
        }
        .nl-caption {
            padding: 0.65rem 0.75rem 0.8rem;
        }

        /* ── Article card ── */
        .news-article-card {
            display: block;
            text-decoration: none;
            color: inherit;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 12px rgba(3, 35, 59, 0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .news-article-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(3, 35, 59, 0.13);
            color: inherit;
        }
        .news-article-thumb {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }
        .news-article-thumb-placeholder {
            width: 100%;
            aspect-ratio: 16 / 9;
            background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 60%, var(--tech-green) 100%);
        }

        /* ── Article filter buttons ── */
        .article-filter-btn {
            cursor: pointer;
            border: 1.5px solid rgba(3, 35, 59, 0.15);
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .article-filter-btn.active,
        .article-filter-btn:hover {
            background-color: var(--dark-blue) !important;
            color: #fff !important;
            border-color: var(--dark-blue) !important;
        }


/* ========================================================================
   14. Team Page
======================================================================== */

        .team-gp-photo {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-height: 400px;
            border-radius: 32px;
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
        }

        @media (min-width: 767px) {
            .team-gp-photo {
                min-height: 300px;
            }
        }


        .team-track-card {
            background: #fff;
            border-radius: 14px;
            padding: 0.75rem 1rem;
            box-shadow: 0 2px 10px rgba(3, 35, 59, 0.06);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .team-track-card:hover {
            box-shadow: 0 8px 24px rgba(3, 35, 59, 0.12);
            transform: translateY(-2px);
        }


        /* ── Member profile photo with hover overlay ── */
        .team-member-photo {
            position: relative;
            width: 100%;
            min-height: 260px;
            border-radius: 20px;
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            background-color: #e9eef2;   /* fallback when no image */
        }

        .team-member-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            background: rgba(3, 35, 59, 0.60);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            opacity: 0;
            transition: opacity 0.28s ease;
            border-radius: inherit;
        }

        .team-member-photo:hover .team-member-overlay,
        .team-gp-photo:hover .team-member-overlay {
            opacity: 1;
        }

        .team-social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: 1.5px solid rgba(255, 255, 255, 0.45);
            color: #fff;
            font-size: 1.15rem;
            text-decoration: none;
            transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }

        .team-social-btn:hover {
            background: rgba(255, 255, 255, 0.30);
            border-color: rgba(255, 255, 255, 0.75);
            color: #fff;
            transform: scale(1.12);
            text-decoration: none;
        }

        /* ── Category divider labels ── */
        .team-category-label {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--light-blue);
        }


/* ========================================================================
   15. Modals — Contact & Newsletter
======================================================================== */

        /* ── Footer CTA strip ── */
        .footer-cta-strip {
            background: #f7f9fb;
            border-top: 1px solid rgba(3, 35, 59, 0.07);
            border-bottom: 1px solid rgba(3, 35, 59, 0.07);
            padding: 1rem 0;
        }

        /* ── Shared modal shell ── */
        .modal-content {
            border-radius: 20px;
        }

        /* ── Contact modal form controls ── */
        #contactForm .form-control {
            border-radius: 10px;
            border-color: rgba(3, 35, 59, 0.15);
            font-size: 0.9rem;
        }
        #contactForm .form-control:focus {
            border-color: var(--light-blue);
            box-shadow: 0 0 0 0.2rem rgba(0, 112, 173, 0.15);
        }

        /* ── Newsletter modal gradient header ── */
        .nl-modal-header {
            background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
            border-radius: 20px 20px 0 0;
        }

        /* ── Newsletter body "card lift" over header ── */
        .nl-modal-body {
            margin-top: -1.25rem;
            background: #fff;
            border-radius: 0;
            position: relative;
        }

        /* ── Newsletter input + button group ── */
        #newsletterForm .form-control {
            border-radius: 10px 0 0 10px;
            border-color: rgba(3, 35, 59, 0.15);
            font-size: 0.9rem;
        }
        #newsletterForm .form-control:focus {
            border-color: var(--light-blue);
            box-shadow: 0 0 0 0.2rem rgba(0, 112, 173, 0.15);
        }

        .nl-submit-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0 1.25rem;
            background: var(--dark-blue);
            color: #fff;
            border: none;
            border-radius: 0 10px 10px 0;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
            white-space: nowrap;
        }
        .nl-submit-btn:hover {
            background: var(--light-blue);
        }
        .nl-submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }


/* ========================================================================
   Cookie Consent — vanilla-cookieconsent v3 overrides
   Matches the site's btn-3cc-sm / btn-3cc-bg-dark-hollow design language
======================================================================== */

#cc-main {
    --cc-font-family: "Montserrat", sans-serif;

    /* Modal chrome */
    --cc-bg:                    #ffffff;
    --cc-primary-color:         #03233b;
    --cc-secondary-color:       #6b7280;
    --cc-modal-border-radius:   15px;
    --cc-btn-border-radius:     15px;
    --cc-separator-border-color: #e5e7eb;

    /* Overlay */
    --cc-overlay-bg: rgba(3, 35, 59, 0.65);

    /* Primary button — mirrors btn-3cc-bg-dark-hollow (white bg / dark-blue text) */
    --cc-btn-primary-bg:              #03233b;
    --cc-btn-primary-color:           #ffffff;
    --cc-btn-primary-border-color:    transparent;
    --cc-btn-primary-hover-bg:        #56C2B7;
    --cc-btn-primary-hover-color:     #ffffff;
    --cc-btn-primary-hover-border-color: #56C2B7;

    /* Secondary button — subtle outline */
    --cc-btn-secondary-bg:            transparent;
    --cc-btn-secondary-color:         #03233b;
    --cc-btn-secondary-border-color:  rgba(3,35,59,0.3);
    --cc-btn-secondary-hover-bg:      rgba(3,35,59,0.06);
    --cc-btn-secondary-hover-color:   #03233b;
    --cc-btn-secondary-hover-border-color: #03233b;

    /* Toggle (analytics / functional switches) */
    --cc-toggle-on-bg:        #56C2B7;
    --cc-toggle-off-bg:       #d1d5db;
    --cc-toggle-readonly-bg:  #e5e7eb;

    /* Preferences modal inner blocks */
    --cc-cookie-category-block-bg:          #f8fafc;
    --cc-cookie-category-block-border:      #e5e7eb;
    --cc-cookie-category-block-hover-bg:    #f0f4f7;
    --cc-cookie-category-expanded-block-bg: #f8fafc;
    --cc-cookie-table-border:               #e5e7eb;

    /* Scrollbar */
    --cc-webkit-scrollbar-bg:       #e5e7eb;
    --cc-webkit-scrollbar-hover-bg: #d1d5db;
}

/* Button sizing — match btn-3cc-sm padding and font */
#cc-main .cm__btn,
#cc-main .pm__btn {
    padding: 8px 17px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}

/* "Manage preferences" link in consent modal — keep it subtle */
#cc-main .cm__btn--secondary {
    font-size: 0.8rem;
}