/* Brand: navy #02023b, purple #652d90, coral #ee4036. Font: Outfit (stand-in for Mundial).
   These are the defaults; theme.css (written by `node tooling/menu.mjs preview`) overrides them. */

:root {
    --navy: #02023b;
    --purple: #652d90;
    --coral: #ee4036;
    --coral-deep: #d0352c;
    --font-body: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --logo-height: 48px;
    --motion: none;
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --brand-gradient: linear-gradient(90deg, var(--purple) 0%, var(--coral) 58%, transparent 96%);
    --band-gradient: linear-gradient(90deg, var(--coral-deep), var(--purple));

    --bg: #ffffff;
    --bg-alt: #eae9f0;
    --surface: #ffffff;
    --text: #02023b;
    --text-muted: #3a3a5c;
    --eyebrow: #652d90;
    --link: #652d90;
    --link-hover: #02023b;
    --border: rgba(2,2,59,.12);
    --btn-bg: #02023b;
    --btn-text: #ffffff;
    --hero-glow: 0;
    --watermark-opacity: .7;
    --shadow: 0 10px 30px rgba(2,2,59,.06);
    --lift-shadow: 0 14px 30px rgba(2,2,59,.12);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #02023b;
    --bg-alt: #08084a;
    --surface: #10105a;
    --text: #ffffff;
    --text-muted: #c9c9e0;
    --eyebrow: #ff8a82;
    --link: #ff8a82;
    --link-hover: #ffffff;
    --border: rgba(255,255,255,.16);
    --btn-bg: #d0352c;
    --btn-text: #ffffff;
    --hero-glow: 1;
    --watermark-opacity: .12;
    --shadow: none;
    --lift-shadow: 0 14px 30px rgba(0,0,0,.35);

    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

/* Keeps the scrollbar's room on short pages too, so the centred header doesn't shift sideways between pages. */
html {
    scrollbar-gutter: stable;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
}

/* Optional page background image, set by theme.css (--bg-image, --bg-fit, --bg-inset, --bg-opacity). */
body::before {
    content: "";
    position: fixed;
    inset: var(--bg-inset, 0);
    z-index: -1;
    pointer-events: none;
    background: var(--bg-image, none) center / var(--bg-fit, contain) no-repeat;
    opacity: var(--bg-opacity, 0);
}

main {
    flex: 1 0 auto;
}

a {
    color: var(--link);
}

    a:hover {
        color: var(--link-hover);
    }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container-content {
    padding-top: 64px;
    padding-bottom: 96px;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg);
}

.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding-top: 20px;
    padding-bottom: 18px;
}

.logo {
    display: flex;
}

    .logo img {
        height: var(--logo-height);
        width: auto;
        display: block;
    }

.logo-dark {
    display: none !important;
}

:root[data-theme="dark"] .logo-light {
    display: none !important;
}

:root[data-theme="dark"] .logo-dark {
    display: block !important;
}

.header-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}

    nav a {
        font-weight: 500;
        text-decoration: none;
        color: var(--text);
        padding: 6px 0;
        border-bottom: 2px solid transparent;
    }

        nav a:hover {
            color: var(--link);
        }

        nav a.active {
            border-bottom-color: var(--coral);
        }

.brand-bar {
    height: 6px;
    background: var(--brand-gradient);
}

/* Pill toggles: sun / moon, and animations off / on */

.toggles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle {
    --knob: 36px; /* knob and icon size; the knob slides this far */
    --knob-inset: 4px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: var(--knob-inset);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-alt);
    cursor: pointer;
    font: inherit;
}

    .toggle span {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--knob);
        height: var(--knob);
        border-radius: 50%;
        color: var(--text-muted);
        transition: color .2s;
    }

    .toggle::before {
        content: "";
        position: absolute;
        top: var(--knob-inset);
        left: var(--knob-inset);
        width: var(--knob);
        height: var(--knob);
        border-radius: 50%;
        background: var(--surface);
        box-shadow: 0 1px 4px rgba(2,2,59,.2);
        transition: transform .25s ease;
    }

    .theme-toggle .sun {
        color: var(--coral-deep);
    }

:root[data-theme="dark"] .theme-toggle::before {
    transform: translateX(var(--knob));
    background: var(--purple);
}

:root[data-theme="dark"] .theme-toggle .sun {
    color: var(--text-muted);
}

:root[data-theme="dark"] .theme-toggle .moon {
    color: #ffffff;
}

/* Animations off (knob left) or on (knob right): on means data-motion is on <html>. */
.motion-toggle {
    display: none;
}

:root.show-motion-toggle .motion-toggle {
    display: inline-flex;
}

.motion-toggle .still {
    color: var(--text);
}

:root[data-motion] .motion-toggle::before {
    transform: translateX(var(--knob));
    background: var(--purple);
}

:root[data-motion] .motion-toggle .still {
    color: var(--text-muted);
}

:root[data-motion] .motion-toggle .moving {
    color: #ffffff;
}

.toggle:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}

/* Type */

h1 {
    font-size: 2.75rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 600;
}

h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

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

/* Cards (inner pages) */

.card {
    background: var(--surface);
    color: var(--text);
    padding: 2.25rem;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

    .card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, var(--purple), var(--coral));
    }

    .card h2 {
        margin-top: 2rem;
    }

        .card h2:first-child {
            margin-top: 0;
        }

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 14px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 600;
    text-decoration: none;
}

    .btn:hover {
        color: var(--btn-text);
        filter: brightness(1.15);
    }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    min-height: 44px;
    font-weight: 600;
}

/* Home */

.hero {
    position: relative;
    overflow: hidden;
}

    /* Coral and purple glow behind the hero; --hero-glow sets its strength (0 = off). */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: var(--hero-glow, 0);
        background: radial-gradient(60% 80% at 85% 35%, color-mix(in srgb, var(--coral) 35%, transparent) 0%, transparent 60%),
                    radial-gradient(50% 70% at 60% 90%, color-mix(in srgb, var(--purple) 55%, transparent) 0%, transparent 65%);
    }

.hero-watermark {
    position: absolute;
    left: -140px;
    bottom: -180px;
    width: 520px;
    height: auto;
    opacity: var(--watermark-opacity);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 56px;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 104px;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

    .hero-copy h1 {
        font-size: 3.6rem;
        margin: 0;
    }

    .hero-copy p {
        margin: 0;
        font-size: 19px;
        line-height: 1.65;
        max-width: 540px;
    }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 6px;
}

.glow-panel {
    min-height: 440px;
    border-radius: 32px;
    overflow: hidden;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    /* The glow on its own, so the "glow" motion effect can move it over the navy. */
    --glow-layers: radial-gradient(55% 60% at 30% 70%, color-mix(in srgb, var(--coral) 85%, transparent) 0%, transparent 70%),
                   radial-gradient(50% 55% at 75% 35%, color-mix(in srgb, color-mix(in srgb, var(--purple), #ffffff 25%) 80%, transparent) 0%, transparent 70%),
                   radial-gradient(25% 25% at 45% 55%, rgba(255,220,230,.9) 0%, rgba(255,220,230,0) 70%);
    background: var(--glow-layers), var(--navy);
}

:root[data-theme="dark"] .glow-panel {
    border: 1px solid var(--border);
}

.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fact {
    background: color-mix(in srgb, var(--navy) 72%, transparent);
    border-radius: 18px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .fact strong {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.1;
    }

    .fact span {
        font-size: 15px;
        color: rgba(255,255,255,.85);
    }

.section {
    padding-top: 96px;
    padding-bottom: 96px;
}

.section-alt {
    background: var(--bg-alt);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 44px;
}

    .section-head h2 {
        margin: 12px 0 0;
        font-size: 2.6rem;
        font-weight: 700;
    }

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.service {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    padding: 38px 32px 32px;
    position: relative;
}

    .service::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, var(--purple), var(--coral));
    }

    .service .num {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .2em;
        color: var(--eyebrow);
    }

    .service h3 {
        font-size: 1.45rem;
        margin: 12px 0 10px;
    }

    .service p {
        margin: 0;
        color: var(--text-muted);
    }

.clients {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
    padding-top: 80px;
    padding-bottom: 80px;
}

    .clients h2 {
        margin: 0;
        max-width: 300px;
        line-height: 1.3;
    }

.client-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-muted);
}

.cta {
    background: var(--navy);
    color: #ffffff;
}

:root[data-theme="dark"] .cta {
    background: var(--bg-alt);
}

.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 80px;
    padding-bottom: 80px;
}

    .cta-inner h2 {
        margin: 0 0 8px;
        font-size: 2.3rem;
        font-weight: 700;
    }

    .cta-inner p {
        margin: 0;
        color: rgba(255,255,255,.85);
    }

    .cta-inner .btn {
        background: #ffffff;
        color: var(--navy);
    }

/* Footer: the letterhead band */

/* Transparent behind the band's rounded corner, so the page (and its background image) shows through. After a
   closing call-to-action the corner takes that band's colour instead, so the two join up. */
footer {
    flex: 0 0 auto;
    background: transparent;
}

body:has(main > .cta:last-child) footer {
    background: var(--navy);
}

:root[data-theme="dark"] body:has(main > .cta:last-child) footer {
    background: var(--bg-alt);
}

/* The arc is a quarter circle kept below the band's height (86px on desktop): a larger radius would be scaled down
   by the browser to the full height, losing the straight edge under the curve. */
.footer-band {
    border-top-left-radius: 70px;
    background: var(--band-gradient);
    color: #ffffff;
}

    .footer-band a {
        color: #ffffff;
    }

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 32px;
    padding-top: 20px;
    padding-bottom: 16px;
    font-size: 15px;
}

.footer-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

@media (max-width: 760px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Logo and toggle share the top row; nav wraps underneath. */
    .site-header {
        position: static;
    }

    .header {
        gap: 12px;
    }

    .header-right {
        display: contents;
    }

    .logo img {
        height: calc(var(--logo-height) * .83);
    }

    /* Smaller toggles, so both fit beside the logo on a typical phone. */
    .toggles {
        order: 1;
        gap: 6px;
    }

    .toggle {
        --knob: 30px;
        --knob-inset: 3px;
    }

    nav {
        order: 2;
        width: 100%;
        gap: 4px 20px;
    }

    h1, .hero-copy h1 {
        font-size: 2.4rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 56px;
    }

    .glow-panel {
        min-height: 320px;
    }

    .footer-band {
        border-top-left-radius: 56px;
    }

    .footer-details {
        text-align: left;
    }
}

/* Motion. The theme switches each effect on (--motion in theme.css). theme.js copies the list to data-motion on <html>
   only for visitors who haven't asked their device to reduce motion; the theme lab sets it itself, so its preview
   plays the effects whatever this computer's setting. */

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes draw {
    from {
        transform: scaleX(0);
    }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(4%, -3%) scale(1.05);
    }

    100% {
        transform: translate(-3%, 2%) scale(1);
    }
}

/* hero: the hero copy and facts panel, or an inner page's heading and card, settle in on load. */
:root[data-motion~="hero"] :is(.hero-copy, .container-content) > *,
:root[data-motion~="hero"] .glow-panel {
    animation: rise .6s var(--ease-out) both;
}

:root[data-motion~="hero"] :is(.hero-copy, .container-content) > :nth-child(2) {
    animation-delay: 80ms;
}

:root[data-motion~="hero"] :is(.hero-copy, .container-content) > :nth-child(3) {
    animation-delay: 160ms;
}

:root[data-motion~="hero"] :is(.hero-copy, .container-content) > :nth-child(n+4) {
    animation-delay: 240ms;
}

:root[data-motion~="hero"] .glow-panel {
    animation-duration: .8s;
    animation-delay: 200ms;
}

/* bar: the brand bar under the header draws across on load. */
:root[data-motion~="bar"] .brand-bar {
    transform-origin: left;
    animation: draw .9s var(--ease-out) .15s both;
}

/* nav: the current-page underline also slides in under the hovered link, and out to the right. */
:root[data-motion~="nav"] nav a {
    position: relative;
    transition: color .22s var(--ease-out);
}

    :root[data-motion~="nav"] nav a.active {
        border-bottom-color: transparent;
    }

    :root[data-motion~="nav"] nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: var(--coral);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .22s var(--ease-out);
    }

    :root[data-motion~="nav"] nav a:is(:hover, :focus-visible, .active)::after {
        transform: scaleX(1);
        transform-origin: left;
    }

/* links: link colours and buttons ease to their hover state; arrows nudge forward. */
:root[data-motion~="links"] a {
    transition: color .2s var(--ease-out);
}

:root[data-motion~="links"] .btn {
    transition: filter .2s var(--ease-out);
}

:root[data-motion~="links"] .link-arrow .arrow {
    display: inline-block;
    transition: transform .2s var(--ease-out);
}

:root[data-motion~="links"] .link-arrow:is(:hover, :focus-visible) .arrow {
    transform: translateX(4px);
}

/* cards: service cards lift slightly and their gradient strip thickens. */
:root[data-motion~="cards"] .service {
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

    :root[data-motion~="cards"] .service::before {
        transition: height .25s var(--ease-out);
    }

    :root[data-motion~="cards"] .service:hover {
        transform: translateY(-3px);
        box-shadow: var(--lift-shadow);
    }

        :root[data-motion~="cards"] .service:hover::before {
            height: 8px;
        }

/* reveal: content below the fold fades up the first time it scrolls into view. theme.js adds .reveal, and .in
   once it is seen; anything already on screen gets .in first, so nothing visible ever hides. */
:root[data-motion~="reveal"] .reveal {
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

    :root[data-motion~="reveal"] .reveal:not(.in) {
        opacity: 0;
        transform: translateY(16px);
    }

/* pages: pages crossfade into each other. theme.js skips the transition when the theme leaves this off;
   browsers without cross-document view transitions change pages as before. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .22s;
}

/* theme: the sun/moon toggle fades the colours across. theme.js adds .theme-fading for the length of the fade. */
:root.theme-fading[data-motion~="theme"] *,
:root.theme-fading[data-motion~="theme"] *::before,
:root.theme-fading[data-motion~="theme"] *::after {
    transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out),
                opacity .35s var(--ease-out), transform .25s ease !important;
}

/* glow: the glow behind the home page facts drifts slowly. */
:root[data-motion~="glow"] .glow-panel {
    position: relative;
    isolation: isolate;
    background: var(--navy);
}

    :root[data-motion~="glow"] .glow-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--glow-layers);
        animation: drift 24s ease-in-out infinite alternate;
    }