/*
      One motif: the drop. A square with one sharp corner and three round ones.
      It runs the page at four scales: the cropped giant in the hero, the portraits,
      the buttons and the bullets. Flat colour only: no gradients, shadows or rules.
    */
    .public-landing-body {
        --lp-ground: #0a2a57;
        --lp-blue: #1763d1;          /* the one bright blue: primary actions only */
        --lp-deep: #0f3f8a;          /* calm field for the demo band */
        --lp-mute: #3a6fb8;          /* bullets and portrait ground */
        --lp-sky: #9fe4ff;           /* labels on navy, from the old hero */
        --lp-paper: #f4f8fc;
        --lp-tint: #e3eefb;
        --lp-ink: #0b1b2e;
        --lp-soft: #3d5169;
        --lp-amber: #ffc107;
        --lp-pad: clamp(1rem, 4vw, 3rem);
        --lp-drop: 0 50% 50% 50%;
        --lp-btn: 0 999px 999px 999px;
        --lp-tile: 0 18px 18px 18px;
        background: var(--lp-paper);
    }

    /* Dark theme: the paper sections, ink and tints swap; the navy hero, deep band and team field already suit it */
    html[data-bs-theme="dark"] .public-landing-body {
        --lp-paper: #0a1423;
        --lp-tint: #13233e;
        --lp-ink: #e8eef7;
        --lp-soft: #b4c2d6;
        --lp-mute: #5b93dc;
        background: var(--lp-paper);
    }

    html[data-bs-theme="dark"] .landing-page .section-heading,
    html[data-bs-theme="dark"] .landing-page .capability-item h3,
    html[data-bs-theme="dark"] .landing-footer-cta h2,
    html[data-bs-theme="dark"] .landing-page .section-intro {
        color: var(--lp-ink);
    }

    /* theme.css still styles the old card classes for dark; keep this page's flat fields instead */
    html[data-bs-theme="dark"] .landing-page .team-card {
        background: transparent;
        border: 0;
    }

    html[data-bs-theme="dark"] .landing-page .capability-item {
        background: var(--lp-tint);
        border: 0;
    }

    html[data-bs-theme="dark"] .landing-page .landing-footer-cta {
        background: var(--lp-paper);
        border: 0;
    }

    html[data-bs-theme="dark"] .landing-page .team-photo {
        background: var(--lp-mute);
        border: 0;
    }

    html[data-bs-theme="dark"] .landing-page .capability-item ul,
    html[data-bs-theme="dark"] .landing-page .landing-footer-cta p {
        color: var(--lp-soft);
    }

    html[data-bs-theme="dark"] .landing-page .team-card p {
        color: rgba(255, 255, 255, 0.9);
    }

    html[data-bs-theme="dark"] .landing-page .btn-solid {
        background: #2f7bf0;
    }

    /* The bar itself (flat, themed, drop-corner links) is shared: see theme.css and base.html */
    .public-landing-body .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
    }

    .public-landing-body .navbar-brand img {
        height: 46px;
        margin-right: 0 !important;
    }

    .public-landing-body .navbar-brand .navbar-wordmark {
        font-size: 1.7rem;
        font-weight: 600;
        line-height: 1;
        margin: 0;
    }

    @media (max-width: 991px) {
        .public-landing-body .navbar-brand .navbar-wordmark {
            font-size: 1.35rem;
        }
    }

    /* style.css reserves 190px under the page for Droppy; the last section already ends clear of him, so no extra blank band */
    .public-landing-body.droppy-guide-floating .landing-page {
        padding-bottom: 0;
    }

    /* Footer: flat, no shadow at rest */
    .public-landing-body .footer {
        box-shadow: none;
    }

    /* Cookie notice: a compact flat note at the bottom-left, so it stops covering the centre of the page */
    .public-landing-body #cookieNotice {
        left: 1rem !important;
        bottom: 1rem !important;
        transform: none !important;
        width: min(400px, calc(100% - 2rem)) !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    /* Phones: lift Droppy above the cookie note while it is showing, so the two never overlap */
    @media (max-width: 575px) {
        .public-landing-body:has(#cookieNotice:not(.d-none)) .droppy-guide {
            bottom: 112px;
        }
    }

    .public-landing-body .main-container {
        max-width: none;
        width: 100%;
        padding: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .landing-page {
        color: var(--lp-ink);
        overflow: hidden;
    }

    .landing-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 var(--lp-pad);
    }

    /* ---------- Buttons: the drop's corner, one shape everywhere ---------- */
    .landing-page .btn {
        border-radius: var(--lp-btn);
        border: 0;
        font-weight: 700;
        padding: 0.8rem 1.4rem;
        transition: transform 0.16s ease, background-color 0.16s ease;
    }

    .landing-page .btn,
    .landing-page .btn:focus,
    .landing-page .btn:focus-visible {
        box-shadow: none;
        animation: none;
    }

    .landing-page .btn:focus-visible {
        outline: 3px solid var(--lp-amber);
        outline-offset: 3px;
    }

    .landing-page .btn:active {
        transform: scale(0.97);
    }

    .landing-page .btn-demo,
    .landing-page .btn-demo:hover,
    .landing-page .btn-demo:focus,
    .landing-page .btn-demo:active,
    html[data-bs-theme="dark"] .landing-page .btn-demo {
        background: var(--lp-amber);
        color: #1a2433 !important;
    }

    .landing-page .btn-demo:hover {
        background: #ffd03b;
    }

    .landing-page .btn-solid {
        background: var(--lp-blue);
        color: #ffffff;
    }

    .landing-page .btn-solid:hover,
    .landing-page .btn-solid:focus {
        background: #114fa8;
        color: #ffffff;
    }

    .landing-page .btn-onblue {
        background: #ffffff;
        color: var(--lp-ground);
    }

    .landing-page .btn-onblue:hover,
    .landing-page .btn-onblue:focus {
        background: var(--lp-tint);
        color: var(--lp-ground);
    }

    .landing-link {
        color: #ffffff;
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.3em;
    }

    .landing-link:hover,
    .landing-link:focus {
        color: var(--lp-amber);
    }

    /* ---------- Hero: the original soft blue water field ---------- */
    .landing-hero {
        position: relative;
        /* one screen exactly: viewport minus the bar (--lp-nav is measured by the script below) */
        min-height: calc(100vh - var(--lp-nav, 78px));
        min-height: calc(100svh - var(--lp-nav, 78px));
        display: flex;
        align-items: center;
        isolation: isolate;
        color: #ffffff;
        background:
            linear-gradient(105deg, rgba(8, 37, 75, 0.92), rgba(9, 83, 171, 0.74)),
            #0c4f9f;
    }

    .landing-hero-logo-mark {
        position: absolute;
        right: clamp(-5rem, 6vw, 8%);
        top: 50%;
        z-index: 0;
        width: min(38vw, 520px);
        max-width: 58%;
        height: auto;
        opacity: 0.22;
        transform: translateY(-50%);
        transform-origin: center;
        animation: hero-logo-rotate 150s linear infinite;
        pointer-events: none;
        user-select: none;
        filter:
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.6));
    }

    .landing-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(circle at 18% 26%, rgba(159, 228, 255, 0.22) 0 2px, transparent 3px 100%),
            radial-gradient(circle at 78% 34%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px 100%),
            radial-gradient(circle at 38% 76%, rgba(159, 228, 255, 0.16) 0 2px, transparent 3px 100%);
        opacity: 0.9;
        transform: translate3d(0, 0, 0);
        animation: hero-water-drift 18s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .landing-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        height: 90px;
        background: linear-gradient(180deg, rgba(244, 248, 252, 0), var(--lp-paper));
        pointer-events: none;
    }

    @keyframes hero-water-drift {
        0% {
            background-position: 0 0, 0 0, 0 0;
            transform: scale(1);
        }
        100% {
            background-position: 26px -18px, -22px 18px, 18px 24px;
            transform: scale(1.02);
        }
    }

    @keyframes hero-logo-rotate {
        from {
            transform: translateY(-50%) rotate(0deg);
        }
        to {
            transform: translateY(-50%) rotate(360deg);
        }
    }

    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 1040px;
        /* everything below scales with the shorter of the screen's height and width */
        padding: clamp(0.8rem, 3vh, 2.5rem) 0 clamp(1.4rem, 5vh, 3.5rem);
        color: #ffffff;
    }

    .landing-eyebrow {
        color: #9fe4ff;
        font-size: clamp(1rem, min(2.8vh, 5.2vw), 1.6rem);
        font-weight: 800;
        letter-spacing: 0.12em;
        margin-bottom: clamp(0.3rem, 1.2vh, 0.85rem);
    }

    .landing-title {
        font-size: clamp(2rem, min(9vh, 5vw), 5rem);
        font-weight: 600;
        letter-spacing: normal;
        line-height: 1.02;
        margin-bottom: clamp(0.4rem, 1.6vh, 1.15rem);
    }

    .landing-copy {
        color: rgba(255, 255, 255, 0.86);
        font-size: clamp(0.8rem, min(2.1vh, 3.8vw), 1.13rem);
        line-height: 1.6;
        max-width: 1000px;
        margin: 0;
    }

    .landing-actions {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(0.4rem, 1.2vh, 0.8rem);
        margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
    }

    .landing-hero .landing-actions .btn {
        border-radius: 999px;
        font-weight: 700;
        font-size: clamp(0.82rem, 2vh, 1rem);
        padding: clamp(0.4rem, 1.2vh, 0.68rem) clamp(0.8rem, 2.4vh, 1.15rem);
    }

    .landing-hero .landing-actions .btn-outline-light {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.62);
        color: #ffffff;
    }

    .landing-hero .landing-actions .btn-outline-light:hover {
        background: #ffffff;
        color: var(--lp-ground);
    }

    .landing-hero .landing-actions .btn-light {
        background: #ffffff;
        color: #0d6efd;
    }

    .landing-trust {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 1.4vh, 0.9rem);
        align-items: center;
        margin-top: clamp(0.8rem, 2.8vh, 2rem);
        color: rgba(255, 255, 255, 0.78);
    }

    .landing-trust.landing-trust-secondary {
        margin-top: 0.3rem;
    }

    .landing-trust .logos {
        display: contents;
    }

    .landing-trust img {
        height: clamp(34px, 6.2vh, 54px);
        width: auto;
        object-fit: contain;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        padding: 0.35rem;
    }

    .landing-trust span {
        font-size: clamp(0.8rem, 2vh, 1rem);
    }

    /* ---------- Statement ---------- */
    .landing-section {
        padding: clamp(4rem, 9vw, 8rem) 0;
    }

    .section-heading {
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.04;
        margin: 0;
    }

    .about-split {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 2.5rem 1.5rem;
        align-items: start;
    }

    .about-split .section-heading {
        grid-column: 1 / -1;
        max-width: 18ch;
    }

    .about-split > div {
        grid-column: 6 / -1;
    }

    .about-split p {
        font-size: 1.25rem;
        line-height: 1.55;
        max-width: 56ch;
        margin: 0 0 1.4rem;
    }

    .about-split p:last-child {
        margin-bottom: 0;
        font-weight: 700;
    }

    /* ---------- Demo band: the one full-width field ---------- */
    .landing-demo-banner {
        background: var(--lp-deep);
        color: #ffffff;
        padding: clamp(3.5rem, 7vw, 6rem) 0;
    }

    .landing-demo-banner .landing-inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 2rem;
        align-items: end;
    }

    .landing-demo-banner h2 {
        font-size: clamp(2.4rem, 5.6vw, 5rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 0.98;
        margin: 0;
    }

    .landing-demo-banner p {
        font-size: 1.25rem;
        line-height: 1.5;
        max-width: 38ch;
        margin: 0 0 1.4rem;
    }

    /* ---------- What we do: type and drop bullets, no cards ---------- */
    .capability-list {
        margin-top: clamp(2.5rem, 5vw, 4rem);
    }

    .capability-item {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 1rem clamp(2rem, 6vw, 6rem);
        padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.6rem);
        background: var(--lp-tint);
        margin-bottom: 0.6rem;
    }

    .capability-item h3 {
        font-size: clamp(1.8rem, 3.2vw, 2.8rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin: 0;
    }

    .capability-item ul {
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: 56ch;
    }

    .capability-item li {
        position: relative;
        font-size: 1.125rem;
        line-height: 1.5;
        padding-left: 1.6rem;
    }

    .capability-item li + li {
        margin-top: 0.8rem;
    }

    /* the drop, at text size */
    .capability-item li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.42em;
        width: 0.8rem;
        height: 0.8rem;
        background: var(--lp-mute);
        border-radius: var(--lp-drop);
        transform: rotate(-45deg);
    }

    /* ---------- Team: portraits cut to the drop ---------- */
    .team-section {
        background: var(--lp-ground);
        color: #ffffff;
    }

    .team-section .section-intro {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.125rem;
        line-height: 1.55;
        max-width: 62ch;
        margin: 1.2rem 0 0;
    }

    .team-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 clamp(1rem, 2.2vw, 2rem);
        margin-top: clamp(2.5rem, 5vw, 4rem);
    }

    /* each card spans six shared rows (photo, name, title, roles, description, links) so every member lines up */
    .team-card {
        display: grid;
        grid-row: span 6;
        grid-template-rows: subgrid;
        row-gap: 0;
        padding-bottom: 2.5rem;
    }

    .team-card-body {
        display: contents;
    }

    .team-roles {
        margin-bottom: 0.2rem;
    }

    .team-photo {
        aspect-ratio: 1 / 1;
        width: 100%;
        background: var(--lp-mute);
        border-radius: var(--lp-drop);
        overflow: hidden;
    }

    .team-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transition: transform 0.5s ease;
    }

    .team-card:hover .team-photo img {
        transform: scale(1.05);
    }


    .team-card h3 {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 1.2rem 0 0.5rem;
    }

    .team-current-role {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0.7rem;
    }

    .team-role {
        color: var(--lp-sky);
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.2rem;
    }

    .team-card p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
        line-height: 1.5;
        margin: 0.6rem 0 0;
    }

    .team-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.2rem;
        padding-top: 0.9rem;
    }

    .team-link {
        display: inline-block;
        padding: 0.4rem 0;   /* 24px tall links were hard to tap on a phone */
        color: #ffffff;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.3em;
    }

    .team-link:hover,
    .team-link:focus {
        color: var(--lp-amber);
    }

    /* ---------- Close ---------- */
    .landing-footer-cta {
        background: var(--lp-paper);
        padding: clamp(4rem, 8vw, 7rem) 0;
    }

    .landing-footer-cta .landing-inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 1.5rem 2rem;
        align-items: end;
    }

    .landing-footer-cta h2 {
        font-size: clamp(2.2rem, 5vw, 4.4rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 1;
        margin: 0;
    }

    .landing-footer-cta p {
        font-size: 1.25rem;
        line-height: 1.5;
        max-width: 34ch;
        margin: 0 0 1.4rem;
    }

    /* ---------- Entrances: parts of each section, once, content stays if script fails ---------- */
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: calc(var(--i, 0) * 80ms);
    }

    .js-reveal [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }

    /* ---------- Tablet and phone ---------- */
    @media (max-width: 991px) {
        .landing-hero-logo-mark {
            right: -84px;
            top: 28%;
            width: 250px;
            max-width: none;
        }

        .hero-content {
            max-width: 100%;
        }

        .landing-eyebrow {
            letter-spacing: 0.08em;
            overflow-wrap: anywhere;
        }

        .landing-copy {
            max-width: 100%;
        }

        .landing-trust {
            align-items: flex-start;
        }

        .landing-trust span {
            flex-basis: 100%;
            line-height: 1.4;
        }

        .about-split > div {
            grid-column: 1 / -1;
        }

        .landing-demo-banner .landing-inner,
        .capability-item,
        .landing-footer-cta .landing-inner {
            grid-template-columns: 1fr;
        }

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

    @media (max-width: 575px) {
        .landing-hero-logo-mark {
            right: -96px;
            top: 25%;
            width: 210px;
        }

        .about-split p,
        .landing-demo-banner p,
        .landing-footer-cta p {
            font-size: 1.125rem;
        }

        /* phones: the same hero content, set tighter so it still fits one screen */
        .landing-hero .landing-actions .btn {
            flex: 1 1 auto;
            justify-content: center;
            min-width: 6.5rem;
            padding: 0.4rem 0.7rem;
        }

        .landing-copy {
            font-size: clamp(0.75rem, min(1.9vh, 3.4vw), 1rem);
            line-height: 1.42;
        }

        .landing-title {
            font-size: clamp(1.8rem, min(6.4vh, 9vw), 2.6rem);
            margin-bottom: 0.3rem;
        }

        .landing-eyebrow {
            font-size: clamp(0.85rem, min(2.4vh, 4.6vw), 1.1rem);
            margin-bottom: 0.2rem;
        }

        .hero-content {
            padding: 0.7rem 0 1.2rem;
        }

        .landing-trust {
            gap: 0.4rem 0.6rem;
            margin-top: 0.7rem;
        }

        .landing-trust.landing-trust-secondary {
            margin-top: 0.3rem;
        }

        .landing-trust img {
            height: clamp(26px, 4.6vh, 38px);
            padding: 0.25rem;
        }

        .landing-trust span {
            font-size: clamp(0.72rem, 1.7vh, 0.85rem);
            flex: 1 1 0;
            min-width: 0;
        }

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

    @media (prefers-reduced-motion: reduce) {
        .landing-hero::before,
        .landing-hero-logo-mark {
            animation: none;
        }

        .js-reveal [data-reveal] {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .team-photo img {
            transition: none;
        }
    }