/* ==========================================================================
   GNDx — Home page
   ========================================================================== */

:root {
    --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    --container:   1320px;
    --header-h:    76px;
    --radius:      6px;

    /* Brand blue is shared by both themes — it always carries white text. */
    --blue:        #1668e3;
    --blue-mid:    #2b86ff;
}

/* ---------------------------------------------------------- dark theme --
   The default. Also re-applied to photo-backed regions in every theme, so
   the hero and map panels keep light text over their dark imagery.          */

:root,
.theme-dark {
    --bg:          #050c17;
    --bg-section:  #06121f;
    --bg-header:   #040a12;

    --surface:     #0a1a2b;
    --surface-2:   #081726;
    --surface-3:   #071220;

    --text:        #ffffff;
    --text-soft:   #b6c5d6;
    --text-muted:  #93a5ba;
    --text-dim:    #8b9cb2;
    --text-nav:    #c9d5e3;
    --text-body:   #8fa2b8;

    --line:        rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .12);
    --line-hover:  rgba(255, 255, 255, .26);
    --fill-subtle: rgba(255, 255, 255, .04);
    --fill-hover:  rgba(255, 255, 255, .09);

    --blue-bright: #3d93ff;
    --icon:        #2f8bff;
    --eyebrow:     #3d8bf5;
    --accent-from: #2b86ff;
    --accent-to:   #4ea6ff;

    --dot-bg:      #ffffff;
    --dot-ink:     #0a1524;

    --cta-bg:      #060f1c;
    --cta-glow:    rgba(43, 134, 255, .16);

    --shadow-card: 0 18px 40px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* --------------------------------------------------------- light theme -- */

:root[data-theme="light"] {
    --bg:          #f3f6fa;
    --bg-section:  #e9eff7;
    --bg-header:   #ffffff;

    --surface:     #ffffff;
    --surface-2:   #f6f9fc;
    --surface-3:   #e6edf6;

    --text:        #0b1b2d;
    --text-soft:   #33455c;
    --text-muted:  #53667e;
    --text-dim:    #5f7189;
    --text-nav:    #33455c;
    --text-body:   #53667e;

    --line:        rgba(11, 27, 45, .10);
    --line-strong: rgba(11, 27, 45, .17);
    --line-hover:  rgba(11, 27, 45, .32);
    --fill-subtle: rgba(11, 27, 45, .035);
    --fill-hover:  rgba(11, 27, 45, .07);

    --blue-bright: #0f62d0;
    --icon:        #1668e3;
    --eyebrow:     #1263d4;
    --accent-from: #1263d4;
    --accent-to:   #2b86ff;

    --dot-bg:      #0b1b2d;
    --dot-ink:     #ffffff;

    --cta-bg:      #eef3fa;
    --cta-glow:    rgba(43, 134, 255, .14);

    --shadow-card: 0 14px 30px rgba(11, 27, 45, .10);

    color-scheme: light;
}

/* No-JS fallback: honour the OS setting until the toggle sets an
   explicit choice. Mirrors the palette above. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg:          #f3f6fa;
        --bg-section:  #e9eff7;
        --bg-header:   #ffffff;

        --surface:     #ffffff;
        --surface-2:   #f6f9fc;
        --surface-3:   #e6edf6;

        --text:        #0b1b2d;
        --text-soft:   #33455c;
        --text-muted:  #53667e;
        --text-dim:    #5f7189;
        --text-nav:    #33455c;
        --text-body:   #53667e;

        --line:        rgba(11, 27, 45, .10);
        --line-strong: rgba(11, 27, 45, .17);
        --line-hover:  rgba(11, 27, 45, .32);
        --fill-subtle: rgba(11, 27, 45, .035);
        --fill-hover:  rgba(11, 27, 45, .07);

        --blue-bright: #0f62d0;
        --icon:        #1668e3;
        --eyebrow:     #1263d4;
        --accent-from: #1263d4;
        --accent-to:   #2b86ff;

        --dot-bg:      #0b1b2d;
        --dot-ink:     #ffffff;

        --cta-bg:      #eef3fa;
        --cta-glow:    rgba(43, 134, 255, .14);

        --shadow-card: 0 14px 30px rgba(11, 27, 45, .10);

        color-scheme: light;
    }
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 0 0 6px 6px;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 3px;
}

/* -------------------------------------------------------------- layout -- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.accent {
    background: linear-gradient(92deg, var(--accent-from) 0%, var(--accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.eyebrow--dash::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-left: 12px;
    vertical-align: middle;
    background: var(--eyebrow);
}

.section-title {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.28;
}

.section-lead {
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- logo -- */
/* Pre-cropped transparent PNGs from app/tools/make-logos.php. The partial
   supplies both URLs as custom properties; only the applied one is fetched. */

.logo {
    display: block;
    background-image: var(--logo-on-dark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.logo--mark { aspect-ratio: 1535 / 390; }
.logo--full { aspect-ratio: 1535 / 483; }

/* Only the header and footer go light — the hero lockup sits on photography
   and keeps the white-ink artwork in both themes. */
:root[data-theme="light"] .site-header__brand .logo,
:root[data-theme="light"] .site-footer__brand .logo {
    background-image: var(--logo-on-light);
}

/* ------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px 8px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

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

.btn__dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.btn--sm {
    padding: 7px 8px 7px 18px;
    font-size: 12.5px;
}
.btn--sm .btn__dot { width: 22px; height: 22px; }

.btn--primary {
    background: linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(27, 114, 235, .32);
}
.btn--primary .btn__dot { background: rgba(255, 255, 255, .24); color: #fff; }
.btn--primary:hover { box-shadow: 0 14px 32px rgba(27, 114, 235, .45); }

.btn--outline {
    background: var(--fill-subtle);
    border-color: var(--line-strong);
    color: var(--text);
}
.btn--outline .btn__dot { background: var(--dot-bg); color: var(--dot-ink); }
.btn--outline:hover { background: var(--fill-hover); border-color: var(--line-hover); }

.btn--ghost {
    border-color: rgba(96, 165, 250, .45);
    color: var(--text);
}
.btn--ghost .btn__dot { background: rgba(59, 130, 246, .22); color: #d3e5ff; }
.btn--ghost:hover { border-color: var(--blue-mid); background: rgba(43, 134, 255, .12); }

/* -------------------------------------------------------------- header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-header);
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--header-h);
}

.site-header__brand { flex: 0 0 auto; }

.nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 44px;
}

.nav__link {
    position: relative;
    display: block;
    padding: 27px 0;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-nav);
    white-space: nowrap;
    transition: color .2s ease;
}

/* Seven items share the bar with the logo, theme toggle and CTA; just above
   the drawer breakpoint they need tighter spacing to stay on one line. */
@media (min-width: 1024px) and (max-width: 1180px) {
    .nav__list { gap: 24px; }
}

.nav__link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 21px;
    left: 0;
    height: 2px;
    background: var(--blue-bright);
    transform: scaleX(0);
    transition: transform .25s ease;
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active { color: var(--text); font-weight: 500; }
.nav__link.is-active::after { transform: scaleX(1); }

.site-header__cta { flex: 0 0 auto; }

.nav-toggle {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 8px;
    color: var(--text-nav);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------------------------------------------------------------- hero -- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
}

.hero__bg,
.hero__scrim,
.hero__stripes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__bg {
    z-index: -3;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__scrim {
    z-index: -2;
    background:
        linear-gradient(90deg,
            #050c17 0%,
            #050c17 27%,
            rgba(5, 12, 23, .93) 37%,
            rgba(5, 12, 23, .58) 47%,
            rgba(5, 12, 23, .2) 60%,
            rgba(5, 12, 23, 0) 74%),
        linear-gradient(180deg,
            rgba(5, 12, 23, .6) 0%,
            rgba(5, 12, 23, .1) 24%,
            rgba(5, 12, 23, .1) 56%,
            rgba(5, 12, 23, .85) 100%),
        rgba(5, 12, 23, .22);
}

.hero__stripes {
    z-index: -1;
    background: repeating-linear-gradient(60deg,
        rgba(45, 140, 255, 0) 0 62px,
        rgba(45, 140, 255, .75) 62px 86px,
        rgba(45, 140, 255, 0) 86px 128px);
    -webkit-mask-image: linear-gradient(236deg, #000 0%, rgba(0, 0, 0, .5) 11%, transparent 26%);
    mask-image: linear-gradient(236deg, #000 0%, rgba(0, 0, 0, .5) 11%, transparent 26%);
}

.hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 470px;
    padding-block: 72px;
}

.hero__content { width: 100%; max-width: 540px; }

.hero__title {
    margin: 14px 0 22px;
    font-family: var(--font-head);
    font-size: clamp(2.1rem, 3.5vw, 3.35rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.5px;
}

.hero__line { display: block; }

.hero__lead {
    max-width: min(458px, 100%);
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.72;
    color: var(--text-soft);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.hero__brand {
    align-self: flex-start;
    flex: 0 0 auto;
    margin-top: -18px;
}

/* ------------------------------------------------------------ services -- */

.services {
    position: relative;
    background: var(--bg-section);
    padding-block: 64px;
}

.services__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
}

.services__intro .section-title {
    margin: 16px 0 14px;
    font-size: 26px;
}

.services__intro .section-lead { max-width: min(30ch, 100%); font-size: 12.8px; }

.services__intro .btn { margin-top: 24px; }

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

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 216px;
    padding: 24px 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: var(--shadow-card);
}

.service-card__icon {
    display: block;
    margin-bottom: 22px;
    color: var(--icon);
}

.service-card__title {
    margin-bottom: 11px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.service-card__text {
    margin-bottom: 18px;
    font-size: 12.4px;
    line-height: 1.66;
    color: var(--text-body);
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 500;
    color: var(--blue-bright);
}

.service-card__link .icon { transition: transform .2s ease; }
.service-card__link:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------- about -- */

.about {
    display: grid;
    grid-template-columns: 24% 32% 44%;
    background: var(--bg);
}

.about__media {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    background: var(--surface-3);
}

.about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keeps the jacket's GNDx badge inside the crop at this panel's aspect. */
    object-position: 35% center;
}

.about__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 13, 24, .18) 0%, rgba(5, 13, 24, 0) 45%, rgba(5, 13, 24, .55) 100%);
}

/* Shown until a photo is dropped at resources/images/about-team.jpg. */
.about__media--placeholder {
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(120% 70% at 22% 14%, rgba(43, 134, 255, .18) 0%, rgba(3, 7, 12, 0) 58%),
        linear-gradient(160deg, var(--surface-3) 0%, #03070c 72%);
}

.about__media--placeholder::after { display: none; }

.about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 62px 54px;
}

.about__content .section-title {
    margin: 16px 0;
    font-size: 26px;
}

.about__line { display: block; }

.about__content .section-lead {
    max-width: min(46ch, 100%);
    font-size: 13px;
}

.about__content .section-lead + .section-lead { margin-top: 14px; }

.about__content .btn { margin-top: 24px; }

.about__stats {
    position: relative;
    display: grid;
    place-items: center;
    padding: 42px 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about__stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #050d18 0%,
        rgba(5, 13, 24, .86) 18%,
        rgba(5, 13, 24, .5) 48%,
        rgba(5, 13, 24, .32) 100%);
}

.stat-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 22px;
}

.stat:nth-child(odd)    { border-right: 1px solid var(--fill-hover); }
.stat:nth-child(-n + 2) { border-bottom: 1px solid var(--fill-hover); }

.stat__icon { flex: 0 0 auto; color: var(--icon); }

.stat__value {
    font-family: var(--font-head);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
}

.stat__label {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* -------------------------------------------------------------- footer -- */

.site-footer {
    background: var(--bg-header);
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    padding-block: 12px;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-footer__tagline {
    font-size: 12px;
    color: var(--text-muted);
}

.site-footer__meta {
    display: flex;
    align-items: center;
    gap: 36px;
}

.socials {
    display: flex;
    align-items: center;
    gap: 16px;
}

.socials a {
    display: grid;
    place-items: center;
    color: var(--text-nav);
    transition: color .2s ease, transform .2s ease;
}

.socials a:hover { color: var(--blue-bright); transform: translateY(-2px); }

.site-footer__copy {
    font-size: 11.5px;
    color: var(--text-dim);
}

/* -------------------------------------------------------------- reveal -- */

.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--delay, 0ms);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1240px) {
    .services__inner { grid-template-columns: 240px 1fr; gap: 40px; }
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about { grid-template-columns: 22% 36% 42%; }
    .about__content { padding: 52px 38px; }
    .about__stats { padding: 30px; }

    .stat { gap: 12px; padding: 20px 14px; }
    .stat__value { font-size: 22px; }
    .stat__label { font-size: 11px; }
}

@media (max-width: 1023px) {
    .nav-toggle { display: grid; }

    .site-header__cta { display: none; }

    .nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        padding: 12px 24px 24px;
        background: var(--bg-header);
        border-bottom: 1px solid var(--line);
    }

    .nav.is-open { display: block; }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav__link { padding: 13px 0; }
    .nav__link::after { right: auto; bottom: 8px; width: 26px; }

    .hero__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 34px;
        min-height: 0;
        padding-block: 56px;
    }

    .hero__brand { order: -1; align-self: flex-start; margin-top: 0; }
    .hero__brand .logo { width: 230px !important; }

    .hero__scrim {
        background:
            linear-gradient(90deg, rgba(5, 12, 23, .96) 0%, rgba(5, 12, 23, .78) 55%, rgba(5, 12, 23, .5) 100%),
            linear-gradient(180deg, rgba(5, 12, 23, .5) 0%, rgba(5, 12, 23, 0) 30%, rgba(5, 12, 23, .85) 100%);
    }

    .services__inner { grid-template-columns: 1fr; gap: 36px; }
    .services__intro .section-title { max-width: 18ch; }

    .about { grid-template-columns: 1fr; }
    .about__media { min-height: 260px; }
    .about__content { padding: 48px 24px; }
    .about__stats { padding: 24px; }
}

@media (max-width: 719px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-block: 24px;
    }

    .site-footer__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

@media (max-width: 519px) {
    .container { padding-inline: 18px; }

    .service-grid { grid-template-columns: 1fr; }
    .service-card { min-height: 0; }

    .stat-grid { grid-template-columns: 1fr; }
    .stat { padding: 20px 4px; }
    .stat:nth-child(odd) { border-right: 0; }
    .stat:nth-child(-n + 3) { border-bottom: 1px solid var(--fill-hover); }

    .hero__actions { gap: 12px; }
    .btn { font-size: 12.5px; padding-left: 18px; }

    .site-header__brand .logo { width: 120px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Inner pages — about / services / projects / careers / contact
   ========================================================================== */

/* ----------------------------------------------------------- page hero -- */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
}

/* Inner-page titles run wider than the home hero's text block, so the image is
   pushed back further before it reaches them. */
.page-hero .hero__scrim {
    background:
        linear-gradient(90deg,
            #050c17 0%,
            rgba(5, 12, 23, .97) 36%,
            rgba(5, 12, 23, .82) 56%,
            rgba(5, 12, 23, .55) 76%,
            rgba(5, 12, 23, .42) 100%),
        linear-gradient(180deg,
            rgba(5, 12, 23, .5) 0%,
            rgba(5, 12, 23, .12) 38%,
            rgba(5, 12, 23, .8) 100%);
}

.page-hero__inner {
    position: relative;
    padding-block: 66px 70px;
}

.page-hero__title {
    max-width: min(720px, 100%);
    margin: 14px 0 18px;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 2.9vw, 2.75rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.4px;
}

.page-hero__lead {
    max-width: min(560px, 100%);
    font-size: 15px;
    line-height: 1.72;
    color: var(--text-soft);
}

/* ------------------------------------------------------ generic layout -- */

.section { padding-block: 64px; }
.section--alt { background: var(--bg-section); }

.section-head {
    max-width: min(640px, 100%);
    margin-bottom: 40px;
}

.section-head .section-title { margin-top: 14px; }

.section-title--lg { font-size: 28px; }

.empty-state {
    padding: 28px 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ------------------------------------------------- feature cards (4-up) -- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.feature-card {
    padding: 26px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: var(--shadow-card);
}

.feature-card__icon {
    display: block;
    margin-bottom: 20px;
    color: var(--icon);
}

.feature-card__title {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
}

.feature-card__text {
    font-size: 12.8px;
    line-height: 1.68;
    color: var(--text-body);
}

/* -------------------------------------------------- service detail rows -- */

.detail-list { display: grid; gap: 16px; }

.detail-card {
    display: grid;
    grid-template-columns: 84px 1fr 300px;
    gap: 32px;
    align-items: start;
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    scroll-margin-top: calc(var(--header-h) + 16px);
    transition: border-color .25s ease;
}

.detail-card:hover { border-color: rgba(59, 130, 246, .42); }

.detail-card__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-card__icon { color: var(--icon); }

.detail-card__index {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--line-hover);
}

.detail-card__title {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
}

.detail-card__text {
    font-size: 13.4px;
    line-height: 1.72;
    color: var(--text-muted);
}

.detail-card__points {
    display: grid;
    gap: 10px;
    align-content: start;
}

.detail-card__points li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.6px;
    line-height: 1.5;
    color: var(--text-soft);
}

.detail-card__points .icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--blue-bright);
}

/* --------------------------------------------------------------- steps -- */

.step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.step {
    padding: 26px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.step__number {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: rgba(61, 147, 255, .34);
}

.step__title {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
}

.step__text {
    font-size: 12.6px;
    line-height: 1.68;
    color: var(--text-body);
}

/* ------------------------------------------------------------ projects -- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.filter {
    padding: 8px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--fill-subtle);
    font-family: var(--font-head);
    font-size: 12.5px;
    color: var(--text-nav);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.filter:hover { color: var(--text); border-color: var(--line-hover); }

.filter.is-active {
    background: linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 100%);
    border-color: transparent;
    color: #fff;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: var(--shadow-card);
}

.project-card__sector {
    margin-bottom: 14px;
    font-family: var(--font-head);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue-bright);
}

.project-card__title {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
}

.project-card__text {
    margin-bottom: 20px;
    font-size: 12.8px;
    line-height: 1.68;
    color: var(--text-body);
}

.project-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 11.5px;
    color: var(--text-dim);
}

.project-card__meta .icon { color: var(--blue-bright); }

/* ---------------------------------------------------------------- jobs -- */

.job-list { display: grid; gap: 12px; }

.job {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 26px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: border-color .25s ease;
}

.job:hover { border-color: rgba(59, 130, 246, .45); }

.job__title {
    margin-bottom: 6px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
}

.job__text {
    max-width: 62ch;
    font-size: 12.6px;
    line-height: 1.6;
    color: var(--text-body);
}

.job__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(59, 130, 246, .3);
    border-radius: 999px;
    background: rgba(43, 134, 255, .14);
    font-size: 11px;
    color: #bcd7ff;
    white-space: nowrap;
}

.tag--muted {
    border-color: var(--line-strong);
    background: var(--fill-subtle);
    color: var(--text-muted);
}

/* ----------------------------------------------------------------- cta -- */

.cta {
    position: relative;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(90% 160% at 10% 0%, var(--cta-glow) 0%, transparent 62%),
        var(--cta-bg);
}

.cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-block: 48px;
}

.cta__copy { max-width: min(620px, 100%); }

.cta .section-title {
    margin-bottom: 10px;
    font-size: 24px;
}

/* ------------------------------------------------------------- contact -- */

/* No form on this page, so it is a single centred column: what we do, the two
   ways to reach us, then the reference details under them. */
.contact {
    display: grid;
    justify-items: center;
    gap: 40px;
}

.contact__intro {
    max-width: 620px;
    text-align: center;
}

.contact__intro .section-title {
    margin: 14px 0 16px;
    font-size: clamp(23px, 3vw, 29px);
}

/* ------------------------------------------------------ the two routes in -- */

.contact__actions {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .contact__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The whole tile is the link — a mail or tel target the size of a card is far
   easier to hit on a phone than an address set in body copy. */
.reach-card {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 2);
    background: var(--surface-2);
}

.reach-card a {
    display: grid;
    gap: 4px;
    padding: 26px 24px;
    color: inherit;
}

.reach-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border: 1px solid rgba(59, 130, 246, .26);
    border-radius: 12px;
    background: rgba(43, 134, 255, .12);
    color: var(--blue-bright);
}

.reach-card__label {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.reach-card__value {
    font-family: var(--font-head);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    overflow-wrap: anywhere;
}

.reach-card__note {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-body);
}

.reach-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue-bright);
}

.reach-card__cta .icon { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.reach-card a:hover .reach-card__cta .icon { transform: translateX(4px); }

/* ------------------------------------------------------ office and hours -- */

.contact__facts {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .contact__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact__facts li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact__socials {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.contact__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(59, 130, 246, .26);
    border-radius: 10px;
    background: rgba(43, 134, 255, .12);
    color: var(--blue-bright);
}

.contact__label {
    margin-bottom: 5px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.contact__value {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-soft);
}

.contact__value a { transition: color .2s ease; }
.contact__value a:hover { color: var(--blue-bright); }

.socials--lg { gap: 10px; }

.socials--lg a {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--fill-subtle);
}

.socials--lg a:hover { border-color: rgba(59, 130, 246, .45); }

/* --------------------------------------------------- responsive (pages) -- */

@media (max-width: 1100px) {
    .feature-grid,
    .step-grid,
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .detail-card { grid-template-columns: 72px 1fr; gap: 24px; }
    .detail-card__points { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }

    .contact { gap: 34px; }
}

@media (max-width: 719px) {
    .section { padding-block: 48px; }

    .feature-grid,
    .step-grid,
    .project-grid { grid-template-columns: 1fr; }

    .detail-card { grid-template-columns: 1fr; gap: 20px; }
    .detail-card__head { flex-direction: row; align-items: center; justify-content: space-between; }
    .detail-card__points { grid-template-columns: 1fr; }

    .job { grid-template-columns: 1fr; gap: 16px; justify-items: start; }


    .cta__inner { flex-direction: column; align-items: flex-start; padding-block: 40px; }

    .page-hero__inner { padding-block: 46px 50px; }
}

/* ==========================================================================
   Pagination, result counts, footer navigation
   ========================================================================== */

/* <picture> must not introduce a box of its own around the cropped logo. */
.logo picture { display: contents; }

.link {
    color: var(--blue-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.result-count {
    margin-bottom: 22px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.result-count strong {
    font-weight: 600;
    color: var(--text-soft);
}

/* Filters are links now, so they carry the anchor reset as well. */
.filter {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* -------------------------------------------------------- pagination -- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.pagination__step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--fill-subtle);
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.pagination__step:hover {
    border-color: rgba(59, 130, 246, .5);
    background: rgba(43, 134, 255, .12);
}

.pagination__step.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.pagination__prev-icon { transform: rotate(180deg); }

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pagination__page {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-head);
    font-size: 12.5px;
    color: var(--text-muted);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.pagination__page:hover {
    border-color: var(--line-strong);
    background: var(--fill-hover);
    color: var(--text);
}

.pagination__page.is-current {
    background: linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 100%);
    color: #fff;
    font-weight: 600;
}

.pagination__gap {
    padding: 0 4px;
    color: var(--text-dim);
}

/* ------------------------------------------------------- footer nav -- */

.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.site-footer__nav a {
    font-size: 12px;
    color: var(--text-muted);
    transition: color .2s ease;
}

.site-footer__nav a:hover { color: var(--blue-bright); }

@media (max-width: 1023px) {
    .site-footer__inner { flex-wrap: wrap; }
    .site-footer__nav { order: 3; width: 100%; }
}

@media (max-width: 719px) {
    .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .pagination__step { justify-content: center; }
    .pagination__pages { order: -1; justify-content: center; }

    .site-footer__nav ul { gap: 14px 18px; }
}

/* ==========================================================================
   Vision, mission and the engineering team
   ========================================================================== */

.vision-mission {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: start;
}

.vision__text {
    margin-top: 18px;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-soft);
}

.mission__list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.mission__item {
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 2px solid rgba(59, 130, 246, .5);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(90deg, rgba(43, 134, 255, .07) 0%, rgba(10, 26, 43, 0) 70%);
    transition: border-left-color .25s ease, background-color .25s ease;
}

.mission__item:hover { border-left-color: var(--blue-mid); }

.mission__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* The initial is the word's first letter, scaled up rather than repeated. */
.mission__letter {
    font-family: var(--font-head);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(92deg, var(--accent-from) 0%, var(--accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------------------------------------------------- team -- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: var(--shadow-card);
}

.team-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border: 1px solid rgba(59, 130, 246, .26);
    border-radius: 10px;
    background: rgba(43, 134, 255, .12);
    color: var(--blue-bright);
}

.team-card__name {
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
}

.team-card__creds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.team-card__creds .tag {
    padding: 4px 10px;
    font-size: 10.5px;
    letter-spacing: .02em;
}

.team-card__email {
    margin-top: auto;
    font-size: 12.5px;
    color: var(--blue-bright);
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.team-card__email:hover { color: #7ab8ff; text-decoration: underline; }

/* ---------------------------------------------------------- credentials -- */
/* The team section, presented by credential. Five cards on a six-column
   track: three across, then the last two widen to fill the second row. */

.section-head .section-lead { margin-top: 14px; }

.cred-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.cred-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.cred-card:nth-child(4),
.cred-card:nth-child(5) { grid-column: span 3; }

.cred-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: var(--shadow-card);
}

.cred-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.cred-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(59, 130, 246, .26);
    border-radius: 10px;
    background: rgba(43, 134, 255, .12);
    color: var(--blue-bright);
}

.cred-card__code {
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 100%);
    box-shadow: 0 6px 16px rgba(27, 114, 235, .28);
}

.cred-card__title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.cred-card__text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
}

.cred-card__facts {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.cred-card__facts dt {
    font-family: var(--font-head);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.cred-card__facts dd {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-soft);
}

.cred-card__count {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12px;
    color: var(--blue-bright);
}

@media (max-width: 1100px) {
    .vision-mission { grid-template-columns: 1fr; gap: 40px; }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Two across; the fifth card spans the last row on its own. */
    .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cred-card,
    .cred-card:nth-child(4) { grid-column: span 1; }
    .cred-card:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
    .team-grid { grid-template-columns: 1fr; }
    .cred-grid { grid-template-columns: 1fr; }
    .cred-card:nth-child(5) { grid-column: auto; }
    .vision__text { font-size: 17px; }
}

/* Longer stat labels ("Luzon, Visayas, Mindanao, and Abroad!") need to wrap
   inside their grid cell rather than push against the row divider. */
.stat__body { min-width: 0; }
.stat__label { line-height: 1.45; }

/* ==========================================================================
   Theme plumbing
   ========================================================================== */

/* Regions backed by the night-city and map photography keep light-on-dark
   treatment in every theme — re-declaring the dark tokens locally means their
   children inherit them without any per-element overrides. */
.hero,
.page-hero,
.about__media,
.about__stats {
    /* `color` inherits as a computed value, so descendants that do not set it
       would keep the light theme's dark ink. Re-declaring it here makes the
       whole subtree resolve against the dark tokens below. */
    color: var(--text);

    --bg:          #050c17;
    --surface:     #0a1a2b;
    --surface-2:   #081726;
    --surface-3:   #071220;

    --text:        #ffffff;
    --text-soft:   #b6c5d6;
    --text-muted:  #93a5ba;
    --text-dim:    #8b9cb2;
    --text-nav:    #c9d5e3;
    --text-body:   #8fa2b8;

    --line:        rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .12);
    --line-hover:  rgba(255, 255, 255, .26);
    --fill-subtle: rgba(255, 255, 255, .04);
    --fill-hover:  rgba(255, 255, 255, .09);

    --blue-bright: #3d93ff;
    --icon:        #2f8bff;
    --eyebrow:     #3d8bf5;
    --accent-from: #2b86ff;
    --accent-to:   #4ea6ff;

    --dot-bg:      #ffffff;
    --dot-ink:     #0a1524;

    color-scheme: dark;
}

/* --------------------------------------------------------- theme toggle -- */

.theme-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--fill-subtle);
    color: var(--text-nav);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: rgba(59, 130, 246, .5);
    background: rgba(43, 134, 255, .12);
}

.theme-toggle__moon { display: none; }

:root[data-theme="light"] .theme-toggle__sun  { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* --------------------------------------------- light-mode fine tuning -- */

:root[data-theme="light"] body { background: var(--bg); }

:root[data-theme="light"] .site-header {
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(11, 27, 45, .04);
}

/* Cards read as raised on light, recessed on dark. */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .project-card,
:root[data-theme="light"] .team-card,
:root[data-theme="light"] .step,
:root[data-theme="light"] .job,
:root[data-theme="light"] .detail-card,
:root[data-theme="light"] .reach-card {
    box-shadow: 0 1px 2px rgba(11, 27, 45, .06);
}

:root[data-theme="light"] .mission__item {
    background: linear-gradient(90deg, rgba(43, 134, 255, .08) 0%, rgba(255, 255, 255, 0) 70%);
}

:root[data-theme="light"] .tag {
    background: rgba(43, 134, 255, .10);
    border-color: rgba(22, 104, 227, .28);
    color: #14509e;
}

:root[data-theme="light"] .tag--muted {
    background: var(--fill-subtle);
    border-color: var(--line-strong);
    color: var(--text-muted);
}

:root[data-theme="light"] .contact__icon,
:root[data-theme="light"] .team-card__icon {
    background: rgba(43, 134, 255, .10);
    border-color: rgba(22, 104, 227, .24);
}

:root[data-theme="light"] .step__number { color: rgba(22, 104, 227, .34); }
:root[data-theme="light"] .detail-card__index { color: rgba(11, 27, 45, .28); }

@media (max-width: 1023px) {
    .theme-toggle { margin-left: auto; }
    .nav-toggle { margin-left: 8px; }
}

/* The tagline's accented "X" is 12px, so it needs full text contrast rather
   than the display gradient, whose light stop only reaches 3.5:1 on white. */
.site-footer__tagline .accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--blue-bright);
}

/* ==========================================================================
   Error pages — one template, every status code
   ========================================================================== */

.error-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--text);

    /* Sits on the night-city photograph, so it keeps dark-theme ink. */
    --text:        #ffffff;
    --text-soft:   #b6c5d6;
    --text-muted:  #93a5ba;
    --text-nav:    #c9d5e3;
    --line-strong: rgba(255, 255, 255, .12);
    --line-hover:  rgba(255, 255, 255, .26);
    --fill-subtle: rgba(255, 255, 255, .04);
    --fill-hover:  rgba(255, 255, 255, .09);
    --eyebrow:     #3d8bf5;
    --blue-bright: #3d93ff;
    --dot-bg:      #ffffff;
    --dot-ink:     #0a1524;

    color-scheme: dark;
}

.error-page__inner {
    position: relative;
    max-width: min(640px, 100%);
    padding-block: 84px 92px;
}

/* Oversized watermark behind the copy. */
.error-page__code {
    position: absolute;
    top: 30px;
    right: 24px;
    z-index: -1;
    font-family: var(--font-head);
    font-size: clamp(7rem, 17vw, 14rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .05);
    user-select: none;
}

.error-page__title {
    margin: 14px 0 16px;
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.4px;
}

.error-page__message {
    max-width: min(520px, 100%);
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.72;
    color: var(--text-soft);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.error-page__links-label {
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.error-page__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.error-page__links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--fill-subtle);
    font-family: var(--font-head);
    font-size: 12.5px;
    color: var(--text-nav);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.error-page__links a:hover {
    color: var(--text);
    border-color: rgba(59, 130, 246, .5);
    background: rgba(43, 134, 255, .12);
}

.error-page__links .icon { transition: transform .2s ease; }
.error-page__links a:hover .icon { transform: translateX(3px); }

@media (max-width: 719px) {
    .error-page__inner { padding-block: 56px 64px; }
    .error-page__code { top: 14px; right: 8px; }
}

/* ==========================================================================
   DEPTH, GLOW & MOTION
   --------------------------------------------------------------------------
   Everything below is additive. It layers atmosphere (aurora fields, grid
   texture, film grain), material (bevels, glass, gradient rims) and light
   (cursor spotlights, sweeps, pulses) on top of the flat base above.

   Three rules govern the whole layer:
     1. Only `transform`, `opacity` and `filter` are animated, so every effect
        stays on the compositor.
     2. Every glow is a token, re-declared per theme — light mode gets roughly
        a third of the intensity so it reads as daylight, not neon.
     3. `prefers-reduced-motion` switches the layer to its static end state.
   ========================================================================== */

/* Registered so the conic rim light can be tweened. Browsers without
   @property simply hold the initial angle and the rim stays still. */
@property --beam {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Reveal offsets. Registered as non-inheriting so a component inside a
   revealing wrapper keeps its own resting transform, and typed so they can be
   transitioned rather than snapped. */
@property --rv-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rv-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rv-s { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ------------------------------------------------------------- tokens -- */

:root,
.theme-dark {
    --glow-core:    rgba(43, 134, 255, .55);
    --glow-mid:     rgba(61, 147, 255, .26);
    --glow-soft:    rgba(43, 134, 255, .13);
    --glow-faint:   rgba(43, 134, 255, .055);

    --rim:          rgba(61, 147, 255, .42);
    --rim-hot:      rgba(120, 190, 255, .85);

    /* Top-edge bevel: a highlight on dark, a true white lip on light. */
    --bevel:        rgba(255, 255, 255, .11);
    --bevel-hot:    rgba(160, 205, 255, .55);

    --spot:         rgba(70, 155, 255, .18);
    --grid:         rgba(122, 176, 255, .05);

    --aurora-a:     rgba(37, 120, 255, .20);
    --aurora-b:     rgba(0, 194, 255, .11);
    --aurora-c:     rgba(116, 84, 255, .13);

    --glass:        rgba(4, 10, 18, .68);
    --glass-panel:  rgba(6, 14, 25, .86);
    --glass-line:   rgba(120, 175, 255, .16);

    --shadow-lift:  0 28px 64px -20px rgba(0, 0, 0, .8);
    --grain:        .04;
}

:root[data-theme="light"] {
    --glow-core:    rgba(22, 104, 227, .30);
    --glow-mid:     rgba(22, 104, 227, .15);
    --glow-soft:    rgba(22, 104, 227, .085);
    --glow-faint:   rgba(22, 104, 227, .04);

    --rim:          rgba(22, 104, 227, .30);
    --rim-hot:      rgba(22, 104, 227, .7);

    --bevel:        rgba(255, 255, 255, .95);
    --bevel-hot:    rgba(255, 255, 255, 1);

    --spot:         rgba(22, 104, 227, .085);
    --grid:         rgba(22, 104, 227, .045);

    --aurora-a:     rgba(22, 104, 227, .10);
    --aurora-b:     rgba(0, 170, 255, .06);
    --aurora-c:     rgba(116, 84, 255, .055);

    --glass:        rgba(255, 255, 255, .7);
    --glass-panel:  rgba(255, 255, 255, .92);
    --glass-line:   rgba(22, 104, 227, .14);

    --shadow-lift:  0 24px 48px -22px rgba(11, 27, 45, .4);
    --grain:        .018;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --glow-core:    rgba(22, 104, 227, .30);
        --glow-mid:     rgba(22, 104, 227, .15);
        --glow-soft:    rgba(22, 104, 227, .085);
        --glow-faint:   rgba(22, 104, 227, .04);

        --rim:          rgba(22, 104, 227, .30);
        --rim-hot:      rgba(22, 104, 227, .7);

        --bevel:        rgba(255, 255, 255, .95);
        --bevel-hot:    rgba(255, 255, 255, 1);

        --spot:         rgba(22, 104, 227, .085);
        --grid:         rgba(22, 104, 227, .045);

        --aurora-a:     rgba(22, 104, 227, .10);
        --aurora-b:     rgba(0, 170, 255, .06);
        --aurora-c:     rgba(116, 84, 255, .055);

        --glass:        rgba(255, 255, 255, .7);
        --glass-panel:  rgba(255, 255, 255, .92);
        --glass-line:   rgba(22, 104, 227, .14);

        --shadow-lift:  0 24px 48px -22px rgba(11, 27, 45, .4);
        --grain:        .018;
    }
}

/* Photo-backed regions stay night-lit in every theme, so they keep the dark
   glow tokens too — mirrors the block that re-declares their colour ramp. */
.hero,
.page-hero,
.about__media,
.about__stats,
.error-page {
    --glow-core:  rgba(43, 134, 255, .55);
    --glow-mid:   rgba(61, 147, 255, .26);
    --glow-soft:  rgba(43, 134, 255, .13);
    --glow-faint: rgba(43, 134, 255, .055);
    --rim:        rgba(61, 147, 255, .42);
    --rim-hot:    rgba(120, 190, 255, .85);
    --bevel:      rgba(255, 255, 255, .11);
    --bevel-hot:  rgba(160, 205, 255, .55);
    --spot:       rgba(70, 155, 255, .18);
    --grid:       rgba(122, 176, 255, .05);
    --aurora-a:   rgba(37, 120, 255, .20);
    --aurora-b:   rgba(0, 194, 255, .11);
    --aurora-c:   rgba(116, 84, 255, .13);
}

/* ==========================================================================
   1 — ATMOSPHERE
   ========================================================================== */

/* Film grain. A single fixed tile at 4% keeps large flat fills from banding
   and gives the dark surfaces something to catch the light on. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections become their own stacking context so the ambient layer can sit
   behind the content without a z-index on every child. */
.section,
.services,
.cta,
.about__content {
    position: relative;
    isolation: isolate;
}

.section > .container,
.services > .container,
.cta > .container,
.about__content > * {
    position: relative;
    z-index: 1;
}

/* Aurora field: two slow, counter-drifting colour masses. Pure radial
   gradients rather than blurred blobs — same softness, no filter cost. */
.section::before,
.services::before,
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(64% 58% at 12% 0%,   var(--aurora-a) 0%, transparent 62%),
        radial-gradient(52% 62% at 88% 12%,  var(--aurora-b) 0%, transparent 60%),
        radial-gradient(70% 70% at 62% 100%, var(--aurora-c) 0%, transparent 64%);
    animation: aurora-drift 26s ease-in-out infinite alternate;
}

/* Engineering grid: a faint 64px lattice, radially masked so it dissolves
   before it reaches the edges and never reads as a table. */
.section::after,
.services::after,
.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
    mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
}

/* A lit seam where one band meets the next — the single detail that most
   stops stacked full-width sections from reading as flat paper. */
.section,
.services,
.cta,
.site-footer {
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--glow-mid) 18%,
        var(--rim-hot) 50%,
        var(--glow-mid) 82%,
        transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
}

/* The gradient seam above is painted as a background, so each band has to
   restate its own fill underneath it. */
.section          { background-color: var(--bg); }
.section--alt     { background-color: var(--bg-section); }
.services         { background-color: var(--bg-section); }
.site-footer      { background-color: var(--bg-header); }

.cta {
    background-image:
        linear-gradient(90deg, transparent 0%, var(--glow-mid) 18%, var(--rim-hot) 50%, var(--glow-mid) 82%, transparent 100%),
        radial-gradient(90% 160% at 10% 0%, var(--cta-glow) 0%, transparent 62%);
    background-size: 100% 1px, 100% 100%;
    background-position: 0 0, 0 0;
    background-color: var(--cta-bg);
}

/* ==========================================================================
   2 — HEADER: glass, seam, scroll progress
   ========================================================================== */

/* No isolation and no filter here on purpose. `position: sticky` with a
   z-index already opens the stacking context this needs, and anything that
   would make the header a Backdrop Root — backdrop-filter, filter, opacity,
   isolation — would leave the mobile drawer nested inside it with an empty
   backdrop and no blur. The glass lives on ::before instead. */
.site-header {
    border-bottom-color: transparent;
    background: transparent;
    transition: box-shadow .35s ease;
}

/* The bar's own surface: a sibling of the nav, never an ancestor of it. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--bg-header);
    transition: background-color .3s ease;
}

/* Frosted only where it is actually supported — a translucent bar with no
   blur behind it would let body copy scroll through the nav. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header::before {
        background: var(--glass);
        -webkit-backdrop-filter: blur(16px) saturate(165%);
        backdrop-filter: blur(16px) saturate(165%);
    }
}

/* Lit underline. It brightens and widens once the page is scrolled, which is
   what signals the bar has detached from the hero. */
.site-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--glass-line) 12%,
        var(--rim-hot) 50%,
        var(--glass-line) 88%,
        transparent 100%);
    opacity: .5;
    transition: opacity .35s ease;
}

.site-header.is-stuck {
    box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .9), 0 1px 0 var(--glow-faint);
}
.site-header.is-stuck::after { opacity: 1; }

:root[data-theme="light"] .site-header.is-stuck {
    box-shadow: 0 14px 30px -20px rgba(11, 27, 45, .45);
}

/* Reading-progress rail, injected by main.js. Scales rather than resizes, so
   it updates on the compositor during scroll. */
.scroll-progress {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

.scroll-progress__bar {
    display: block;
    height: 100%;
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue-mid) 45%, #7ec2ff 100%);
    box-shadow: 0 0 12px var(--glow-core), 0 0 4px var(--rim-hot);
}

/* ------------------------------------------------------------ nav links -- */

.nav__link::after {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue-mid) 50%, #8ccbff 100%);
    box-shadow: 0 0 10px var(--glow-core);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}

/* Soft pool of light behind the label, so hover is felt before it is read. */
.nav__link::before {
    content: '';
    position: absolute;
    right: -14px;
    bottom: 12px;
    left: -14px;
    height: 26px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(60% 120% at 50% 100%, var(--glow-soft) 0%, transparent 72%);
    opacity: 0;
    transition: opacity .3s ease;
}

.nav__link:hover::before,
.nav__link.is-active::before { opacity: 1; }

.nav__link:hover { text-shadow: 0 0 18px var(--glow-mid); }

/* --------------------------------------------------------- theme toggle -- */

.theme-toggle {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease,
                transform .35s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, var(--glow-core) 0%, transparent 70%);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.4, .64, 1);
}

.theme-toggle:hover {
    transform: rotate(-22deg);
    box-shadow: 0 0 0 1px var(--rim), 0 8px 24px -8px var(--glow-core);
}
.theme-toggle:hover::before { opacity: .55; transform: scale(1); }

.theme-toggle .icon,
.theme-toggle svg { transition: transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.theme-toggle:hover svg { transform: scale(1.12); }

/* ------------------------------------------------------------ nav toggle -- */

.nav-toggle {
    transition: color .2s ease, background-color .25s ease, box-shadow .3s ease;
}

.nav-toggle:hover {
    color: var(--text);
    background: var(--fill-hover);
    box-shadow: 0 0 0 1px var(--rim), 0 6px 20px -8px var(--glow-core);
}

/* The mobile drawer gets the same glass treatment as the bar it drops from. */
@media (max-width: 1023px) {
    .nav {
        border-bottom-color: var(--glass-line);
        border-radius: 0 0 16px 16px;
    }

    /* Heavier than the bar above it: the drawer covers body copy, so it needs
       enough blur that nothing behind it stays legible. */
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .nav {
            background: var(--glass-panel);
            -webkit-backdrop-filter: blur(26px) saturate(185%);
            backdrop-filter: blur(26px) saturate(185%);
        }
    }

    .nav.is-open {
        animation: drawer-in .32s cubic-bezier(.22, 1, .36, 1) both;
        box-shadow:
            inset 0 1px 0 var(--bevel),
            0 28px 56px -24px rgba(0, 0, 0, .92);
    }

    /* Hairline between rows, fading out at both ends. */
    .nav.is-open .nav__list > li + li {
        background: linear-gradient(90deg, var(--glass-line) 0%, transparent 72%) 0 0 / 100% 1px no-repeat;
    }

    /* Each row arrives a beat after the one above it. */
    .nav.is-open .nav__list > li {
        animation: drawer-row .38s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--row, 0) * 45ms + 60ms);
    }

    .nav__list > li:nth-child(1) { --row: 0; }
    .nav__list > li:nth-child(2) { --row: 1; }
    .nav__list > li:nth-child(3) { --row: 2; }
    .nav__list > li:nth-child(4) { --row: 3; }
    .nav__list > li:nth-child(5) { --row: 4; }
    .nav__list > li:nth-child(6) { --row: 5; }
    .nav__list > li:nth-child(7) { --row: 6; }
}

/* ==========================================================================
   3 — HERO: parallax, aurora, light sweep, pointer spotlight
   ========================================================================== */

/* Re-stacked so the new light layers can slot between the photograph and the
   copy. Lower is further back. */
.hero__bg     { z-index: -5; }
.hero__scrim  { z-index: -4; }
.hero::before { z-index: -3; }
.hero__stripes,
.page-hero::before { z-index: -2; }
.hero::after,
.page-hero::after  { z-index: -1; }

/* Oversized so the pointer/scroll parallax never exposes an edge. */
.hero__bg,
.page-hero .hero__bg {
    inset: -4%;
    transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1.02);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* Diagonal light shafts already in the design — now they breathe instead of
   sitting still. Opacity only, so it stays composited. */
.hero__stripes {
    animation: shaft-breathe 9s ease-in-out infinite;
}

/* Drifting aurora behind the scrim. */
.hero::before,
.page-hero::before {
    content: '';
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(38% 46% at 18% 28%, rgba(37, 120, 255, .30) 0%, transparent 66%),
        radial-gradient(34% 40% at 74% 18%, rgba(0, 194, 255, .18) 0%, transparent 64%),
        radial-gradient(44% 48% at 52% 96%, rgba(116, 84, 255, .18) 0%, transparent 66%);
    animation: aurora-drift 24s ease-in-out infinite alternate;
}

/* Pointer spotlight. Sits above the shafts so the cursor feels like it is
   lighting the scene rather than the scene lighting the cursor. */
.hero::after,
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%),
        rgba(90, 170, 255, .16) 0%,
        rgba(60, 140, 255, .07) 34%,
        transparent 66%);
    opacity: 0;
    transition: opacity .5s ease;
}

.hero.is-pointing::after,
.page-hero.is-pointing::after { opacity: 1; }

/* A horizon line under the hero, so it lands on something rather than just
   stopping. */
.hero,
.page-hero { border-bottom: 1px solid transparent; }

.hero__inner::after,
.page-hero__inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--rim) 28%, var(--rim-hot) 50%, var(--rim) 72%, transparent 100%);
    opacity: .6;
}

/* --------------------------------------------------------- hero content -- */

/* Headline lines arrive one after another, lifting out of a blur. */
.js .hero__title .hero__line {
    display: block;
    opacity: 0;
    transform: translateY(24px);
    filter: blur(10px);
    animation: line-rise .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.js .hero__title .hero__line:nth-child(1) { animation-delay: .10s; }
.js .hero__title .hero__line:nth-child(2) { animation-delay: .22s; }
.js .hero__title .hero__line:nth-child(3) { animation-delay: .34s; }
.js .hero__title .hero__line:nth-child(4) { animation-delay: .46s; }

/* The gradient word carries a real light source. */
.accent {
    filter: drop-shadow(0 0 18px var(--glow-mid));
}

.hero__title .accent {
    filter: drop-shadow(0 0 26px rgba(61, 147, 255, .45));
    animation: accent-pulse 5.5s ease-in-out infinite;
}

.eyebrow { text-shadow: 0 0 22px var(--glow-mid); }

.eyebrow--dash::after {
    background: linear-gradient(90deg, var(--eyebrow) 0%, transparent 100%);
    box-shadow: 0 0 10px var(--glow-mid);
}

/* The hero lockup floats and carries a halo. */
.hero__brand .logo {
    filter: drop-shadow(0 0 40px rgba(43, 134, 255, .35));
    animation: float-y 7s ease-in-out infinite;
}

/* Wordmark sheen — a highlight that travels across the lockup on a long loop. */
.hero__brand {
    position: relative;
    isolation: isolate;
}

.hero__brand::after {
    content: '';
    position: absolute;
    inset: -8% -14%;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, .13) 48%,
        rgba(160, 205, 255, .22) 52%,
        transparent 62%);
    transform: translateX(-120%);
    animation: sheen-sweep 7s cubic-bezier(.5, 0, .2, 1) infinite;
}

/* ==========================================================================
   4 — BUTTONS: sheen, halo, magnetism, ripple
   ========================================================================== */

/* Hover lift, pointer magnetism and the click press all compose through
   custom properties, so they never overwrite one another. */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --lift: 0px;
    --mag-x: 0px;
    --mag-y: 0px;
    --press: 1;
    transform:
        translate3d(calc(var(--mag-x) + var(--rv-x)), calc(var(--lift) + var(--mag-y) + var(--rv-y)), 0)
        scale(calc(var(--press) * var(--rv-s)));
    transition: transform .28s cubic-bezier(.34, 1.4, .64, 1),
                background-color .25s ease, border-color .25s ease, box-shadow .3s ease;
}

.btn:hover  { --lift: -3px; }
.btn:active { --press: .97; }

/* Specular sweep. Parked off-canvas and fired by hover, not looping, so it
   reads as a response rather than as decoration. */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 36%,
        rgba(255, 255, 255, .16) 46%,
        rgba(255, 255, 255, .42) 50%,
        rgba(255, 255, 255, .16) 54%,
        transparent 64%);
    transform: translateX(-130%);
    opacity: 0;
}

.btn:hover::before {
    animation: sheen-pass .75s cubic-bezier(.4, 0, .2, 1);
}

.btn__dot {
    position: relative;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background-color .25s ease;
}

.btn:hover .btn__dot { transform: translateX(3px) rotate(45deg) scale(1.06); }
.btn:hover .btn__dot svg { animation: dot-nudge .5s cubic-bezier(.34, 1.4, .64, 1); }

/* ---------------------------------------------------------- primary CTA -- */

/* Layered shadow: a tight contact shadow, a mid halo and a wide bloom. Three
   distances is what separates a lit object from a coloured rectangle. */
.btn--primary {
    background:
        linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 55%, #4b9cff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .18),
        0 2px 6px rgba(9, 48, 104, .35),
        0 10px 26px -6px rgba(27, 114, 235, .5),
        0 0 34px -10px rgba(43, 134, 255, .7);
}

.btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -1px 0 rgba(0, 0, 0, .18),
        0 3px 8px rgba(9, 48, 104, .4),
        0 16px 34px -8px rgba(27, 114, 235, .62),
        0 0 52px -8px rgba(43, 134, 255, .85);
}

/* Slow internal bloom so the primary action stays alive on a still page. The
   outer halo is carried by the box-shadow above, which overflow never clips. */
.btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(70% 180% at 50% 120%, rgba(255, 255, 255, .34) 0%, transparent 70%);
    opacity: .45;
    animation: halo-breathe 4.5s ease-in-out infinite;
}

/* --------------------------------------------------- outline / ghost -- */

.btn--outline,
.btn--ghost {
    box-shadow: inset 0 1px 0 var(--bevel), 0 1px 2px rgba(0, 0, 0, .18);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .btn--outline,
    .btn--ghost {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

.btn--outline:hover {
    border-color: var(--rim);
    box-shadow:
        inset 0 1px 0 var(--bevel-hot),
        0 0 0 1px var(--glow-soft),
        0 14px 30px -14px var(--glow-core),
        0 0 30px -12px var(--glow-core);
}

.btn--ghost:hover {
    box-shadow:
        inset 0 1px 0 var(--bevel-hot),
        0 0 0 1px var(--glow-soft),
        0 14px 30px -14px var(--glow-core),
        0 0 36px -12px var(--glow-core);
}

/* On light the ghost dot was a pale blue disc carrying pale blue ink — the
   arrow disappeared into it. Give it the solid brand fill instead. */
:root[data-theme="light"] .btn--ghost .btn__dot {
    background: linear-gradient(95deg, var(--blue) 0%, var(--blue-mid) 100%);
    color: #fff;
}

:root[data-theme="light"] .btn--ghost {
    border-color: rgba(22, 104, 227, .35);
}

/* ---------------------------------------------------------------- ripple -- */

/* Spawned at the click point by main.js and removed when it finishes. */
.ripple {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-out .62s cubic-bezier(.22, 1, .36, 1) forwards;
}

:root[data-theme="light"] .btn--outline .ripple,
:root[data-theme="light"] .filter .ripple,
:root[data-theme="light"] .pagination__step .ripple {
    background: radial-gradient(circle, rgba(22, 104, 227, .28) 0%, rgba(22, 104, 227, 0) 70%);
}

/* ------------------------------------------------------ inline arrow CTA -- */

.service-card__link,
.team-card__email,
.contact__value a {
    position: relative;
}

.service-card__link::after {
    content: '';
    position: absolute;
    right: 21px;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--blue-bright), transparent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.service-card__link:hover::after { transform: scaleX(1); }
.service-card__link:hover { text-shadow: 0 0 16px var(--glow-mid); }

/* ==========================================================================
   5 — SURFACES: bevel, cursor spotlight, rim light, tilt
   --------------------------------------------------------------------------
   Every panel gets the same four-part build:
     · a lit top edge          (::after, always on)
     · a cursor spotlight      (::before, hover only, tracked by main.js)
     · a layered drop shadow   (contact + bloom)
     · an optional 3D tilt     (--rx / --ry, set by main.js)
   ========================================================================== */

.service-card,
.feature-card,
.project-card,
.team-card,
.step,
.job,
.detail-card,
.mission__item,
.reach-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --lift: 0px;
    --lift-x: 0px;
    transform: translate3d(calc(var(--lift-x) + var(--rv-x)), calc(var(--lift) + var(--rv-y)), 0) scale(var(--rv-s));
    box-shadow:
        inset 0 1px 0 var(--bevel),
        0 1px 2px rgba(0, 0, 0, .18),
        0 10px 24px -18px rgba(0, 0, 0, .7);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                border-color .3s ease,
                box-shadow .4s ease;
}

/* Cursor spotlight. `--mx`/`--my` default to the panel's top-centre so a
   keyboard focus or a touch tap still lights something sensible. */
.service-card::before,
.feature-card::before,
.project-card::before,
.team-card::before,
.step::before,
.job::before,
.detail-card::before,
.mission__item::before,
.reach-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
        var(--spot) 0%,
        var(--glow-faint) 38%,
        transparent 68%);
    opacity: 0;
    transition: opacity .38s ease;
}

.service-card:hover::before,
.service-card:focus-within::before,
.feature-card:hover::before,
.project-card:hover::before,
.team-card:hover::before,
.team-card:focus-within::before,
.step:hover::before,
.job:hover::before,
.job:focus-within::before,
.detail-card:hover::before,
.mission__item:hover::before,
.reach-card:hover::before { opacity: 1; }

/* Top rim light. Dim by default, hot and full-width under the cursor — the
   cheapest way to make a flat panel read as an edge catching a light source. */
.service-card::after,
.feature-card::after,
.project-card::after,
.team-card::after,
.step::after,
.job::after,
.detail-card::after,
.reach-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--rim) 22%,
        var(--rim-hot) 50%,
        var(--rim) 78%,
        transparent 100%);
    opacity: .35;
    transform: scaleX(.55);
    transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.service-card:hover::after,
.feature-card:hover::after,
.project-card:hover::after,
.team-card:hover::after,
.step:hover::after,
.job:hover::after,
.detail-card:hover::after,
.reach-card:hover::after { opacity: 1; transform: scaleX(1); }

/* ------------------------------------------------------------------ tilt -- */

/* Grid cards tilt toward the pointer; wide rows only lift, because a rotated
   full-width row reads as a glitch rather than as depth. */
.service-card,
.feature-card,
.project-card,
.team-card,
.step {
    --rx: 0deg;
    --ry: 0deg;
    transform:
        perspective(900px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translate3d(var(--rv-x), calc(var(--lift) + var(--rv-y)), 0)
        scale(var(--rv-s));
}

.service-card:hover,
.feature-card:hover,
.project-card:hover,
.team-card:hover,
.step:hover {
    --lift: -6px;
    border-color: var(--rim);
    box-shadow:
        inset 0 1px 0 var(--bevel-hot),
        0 2px 4px rgba(0, 0, 0, .25),
        var(--shadow-lift),
        0 0 46px -18px var(--glow-core);
}

.job:hover,
.detail-card:hover {
    --lift: -2px;
    border-color: var(--rim);
    box-shadow:
        inset 0 1px 0 var(--bevel-hot),
        0 2px 4px rgba(0, 0, 0, .25),
        var(--shadow-lift),
        0 0 40px -20px var(--glow-core);
}

/* --------------------------------------------------------- icon lighting -- */

.service-card__icon,
.feature-card__icon,
.detail-card__icon {
    position: relative;
    filter: drop-shadow(0 0 14px var(--glow-mid));
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), filter .4s ease;
}

.service-card:hover .service-card__icon,
.feature-card:hover .feature-card__icon,
.detail-card:hover .detail-card__icon {
    transform: translateY(-3px) scale(1.07);
    filter: drop-shadow(0 0 26px var(--glow-core));
}

/* Boxed icons get a lit inner bevel and a halo on hover. */
.contact__icon,
.team-card__icon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--bevel), 0 6px 18px -12px var(--glow-core);
    transition: transform .4s cubic-bezier(.34, 1.4, .64, 1), box-shadow .4s ease, border-color .3s ease;
}

.contact__icon::before,
.team-card__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 120%, var(--glow-core) 0%, transparent 72%);
    opacity: .35;
    transition: opacity .4s ease;
}

.contact__list li:hover .contact__icon,
.team-card:hover .team-card__icon {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--rim);
    box-shadow: inset 0 1px 0 var(--bevel-hot), 0 10px 26px -12px var(--glow-core), 0 0 26px -10px var(--glow-core);
}

.contact__list li:hover .contact__icon::before,
.team-card:hover .team-card__icon::before { opacity: .8; }

/* ------------------------------------------------------- numerals & rules -- */

/* The process numerals become light rather than grey type. */
.step__number {
    background: linear-gradient(160deg, var(--accent-to) 0%, var(--accent-from) 55%, transparent 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: .5;
    filter: drop-shadow(0 0 18px var(--glow-mid));
    transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1);
}

.step:hover .step__number { opacity: 1; transform: translateY(-2px); }

:root[data-theme="light"] .step__number { color: transparent; opacity: .62; }

.detail-card__index { transition: color .3s ease, text-shadow .3s ease; }

.detail-card:hover .detail-card__index {
    color: var(--blue-bright);
    text-shadow: 0 0 18px var(--glow-mid);
}

/* The mission rail lights up from its accent edge. */
.mission__item {
    box-shadow: inset 0 1px 0 var(--bevel);
    transition: border-left-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.mission__item:hover {
    --lift-x: 4px;
    border-left-color: var(--blue-mid);
    box-shadow: inset 0 1px 0 var(--bevel-hot), -6px 0 24px -14px var(--glow-core), 0 12px 28px -22px rgba(0, 0, 0, .7);
}

.mission__letter { filter: drop-shadow(0 0 16px var(--glow-mid)); }

/* --------------------------------------------------------------- project -- */

.project-card__sector { text-shadow: 0 0 16px var(--glow-mid); }

.project-card__meta .icon { filter: drop-shadow(0 0 8px var(--glow-mid)); }

/* ------------------------------------------------------------------ tags -- */

.tag {
    position: relative;
    box-shadow: inset 0 1px 0 var(--bevel);
    transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}

.job:hover .tag:not(.tag--muted),
.team-card:hover .tag:not(.tag--muted) {
    border-color: var(--rim);
    box-shadow: inset 0 1px 0 var(--bevel-hot), 0 0 18px -6px var(--glow-core);
}

/* ==========================================================================
   6 — STATS, FORMS, CONTROLS, FOOTER
   ========================================================================== */

/* ---------------------------------------------------------------- stats -- */

.stat-grid {
    isolation: isolate;
    border-radius: var(--radius);
}

.stat {
    position: relative;
    isolation: isolate;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

/* Each cell lights its own corner on hover, so the map panel reads as four
   instruments rather than one printed table. */
.stat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(70% 90% at 20% 50%, var(--glow-soft) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
}

.stat:hover { transform: translateY(-2px); }
.stat:hover::before { opacity: 1; }

.stat__icon {
    filter: drop-shadow(0 0 14px var(--glow-mid));
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), filter .4s ease;
}

.stat:hover .stat__icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 26px var(--glow-core));
}

/* drop-shadow, not text-shadow: with background-clip:text the fill IS the
   background, and a text-shadow would paint over the gradient. */
.stat__value {
    background: linear-gradient(180deg, #ffffff 0%, #bcd9ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(61, 147, 255, .38));
}

/* Counting numbers pulse once as they land. */
.stat__value.is-counting { animation: digit-flicker .9s ease-out; }

/* ------------------------------------------------- filters & pagination -- */

.filter,
.pagination__step,
.pagination__page,
.error-page__links a,
.socials--lg a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease,
                box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}

.filter:hover,
.pagination__step:hover,
.pagination__page:hover,
.error-page__links a:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--bevel-hot), 0 8px 20px -12px var(--glow-core), 0 0 24px -12px var(--glow-core);
}

.filter.is-active,
.pagination__page.is-current {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 6px 18px -8px rgba(27, 114, 235, .55),
        0 0 26px -10px var(--glow-core);
}

/* The active filter keeps a soft standing glow so the current view is
   obvious at a glance in a long row of pills. */
.filter.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(70% 160% at 50% 130%, rgba(255, 255, 255, .3) 0%, transparent 70%);
    opacity: .5;
    animation: halo-breathe 4.5s ease-in-out infinite;
}

.pagination { border-top-color: transparent; background: linear-gradient(90deg, transparent, var(--glow-mid) 50%, transparent) 0 0 / 100% 1px no-repeat; }

.pagination__step .icon,
.error-page__links .icon { transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.pagination__step:hover .icon { transform: translateX(3px); }
.pagination__prev-icon { transform: rotate(180deg); }
.pagination__step:hover .pagination__prev-icon { transform: rotate(180deg) translateX(3px); }

/* --------------------------------------------------------------- footer -- */

.site-footer { position: relative; }

.site-footer__inner { position: relative; z-index: 1; }

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 200% at 50% 0%, var(--glow-faint) 0%, transparent 70%);
}

.socials a { position: relative; }

.socials a:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 12px var(--glow-core));
}

.socials--lg a:hover {
    border-color: var(--rim);
    background: var(--fill-hover);
    box-shadow: inset 0 1px 0 var(--bevel-hot), 0 10px 22px -12px var(--glow-core), 0 0 26px -10px var(--glow-core);
}

.site-footer__nav a { position: relative; }

.site-footer__nav a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--blue-bright), transparent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.site-footer__nav a:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------- error pages -- */

.error-page__code {
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(61, 147, 255, .12) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: float-y 9s ease-in-out infinite;
}

/* ==========================================================================
   7 — REVEAL CHOREOGRAPHY
   ========================================================================== */

/* Content does not just fade in — it resolves: out of a blur, up off the
   baseline and back to full size. Blur is what makes it read as focus
   rather than as opacity.

   The offset travels as --rv-x / --rv-y / --rv-s rather than as a literal
   transform, so a card that already owns a transform (lift, tilt, magnetism)
   adds the reveal to it instead of having it overwritten. */
.js .reveal {
    --rv-x: 0px;
    --rv-y: 22px;
    --rv-s: .985;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s));
    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1),
        --rv-x .75s cubic-bezier(.22, 1, .36, 1),
        --rv-y .75s cubic-bezier(.22, 1, .36, 1),
        --rv-s .75s cubic-bezier(.22, 1, .36, 1),
        filter .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--delay, 0ms);
}

.js .reveal.is-visible {
    --rv-x: 0px;
    --rv-y: 0px;
    --rv-s: 1;
    opacity: 1;
    filter: none;
}

/* Direction variants, applied by main.js from the element's context. */
.js .reveal--left  { --rv-x: -26px; --rv-y: 0px; --rv-s: .99; }
.js .reveal--right { --rv-x:  26px; --rv-y: 0px; --rv-s: .99; }
.js .reveal--scale { --rv-x: 0px;   --rv-y: 0px; --rv-s: .94; }

/* Components restate their own composed transform at the specificity of
   `.js .reveal.is-visible`, and win on source order. Without this, the
   reveal's resting state would flatten every hover lift and tilt on the page
   the moment the element scrolled in. */
.js .reveal:is(.service-card, .feature-card, .project-card, .team-card, .step) {
    transform:
        perspective(900px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translate3d(var(--rv-x), calc(var(--lift) + var(--rv-y)), 0)
        scale(var(--rv-s));
}

.js .reveal:is(.job, .detail-card, .mission__item, .reach-card) {
    transform: translate3d(calc(var(--lift-x) + var(--rv-x)), calc(var(--lift) + var(--rv-y)), 0) scale(var(--rv-s));
}

.js .reveal.btn {
    transform:
        translate3d(calc(var(--mag-x) + var(--rv-x)), calc(var(--lift) + var(--mag-y) + var(--rv-y)), 0)
        scale(calc(var(--press) * var(--rv-s)));
}

/* ==========================================================================
   8 — KEYFRAMES
   ========================================================================== */

@keyframes aurora-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

@keyframes shaft-breathe {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

@keyframes accent-pulse {
    0%, 100% { filter: drop-shadow(0 0 22px rgba(61, 147, 255, .35)); }
    50%      { filter: drop-shadow(0 0 40px rgba(61, 147, 255, .6)); }
}

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

@keyframes halo-breathe {
    0%, 100% { opacity: .35; }
    50%      { opacity: .7; }
}

@keyframes line-rise {
    from { opacity: 0; transform: translateY(24px); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes sheen-sweep {
    0%        { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@keyframes sheen-pass {
    from { transform: translateX(-130%); opacity: 1; }
    to   { transform: translateX(130%);  opacity: 1; }
}

@keyframes dot-nudge {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@keyframes ripple-out {
    from { transform: translate(-50%, -50%) scale(0);   opacity: .75; }
    to   { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

@keyframes digit-flicker {
    0%   { filter: drop-shadow(0 0 22px rgba(61, 147, 255, .38)); }
    40%  { filter: drop-shadow(0 0 34px rgba(120, 190, 255, .85)); }
    100% { filter: drop-shadow(0 0 22px rgba(61, 147, 255, .38)); }
}

@keyframes drawer-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes drawer-row {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes beam-spin {
    to { --beam: 360deg; }
}

/* ==========================================================================
   9 — TUNING: motion, pointer and small screens
   ========================================================================== */

/* Tilt and cursor spotlights are pointer affordances. On touch they cost
   paint for nothing, so the whole tracking layer is stood down. */
@media (hover: none) {
    .service-card,
    .feature-card,
    .project-card,
    .team-card,
    .step { transform: none; }

    .service-card::before,
    .feature-card::before,
    .project-card::before,
    .team-card::before,
    .step::before,
    .job::before,
    .detail-card::before,
    .mission__item::before { display: none; }

    .hero::after,
    .page-hero::after { display: none; }
}

/* Aurora and grid cost the most on phones and read the least. Keep the
   seams and the card lighting; drop the atmosphere. */
@media (max-width: 719px) {
    .section::before,
    .services::before,
    .cta::before { opacity: .6; }

    .section::after,
    .services::after,
    .cta::after { background-size: 44px 44px; opacity: .7; }

    .hero__brand::after { display: none; }
}

/* The base sheet already collapses durations; these add the two things it
   cannot express — infinite loops must stop, and anything that starts
   hidden must end visible. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-delay: 0ms !important;
    }

    .js .reveal,
    .js .reveal.is-visible,
    .js .hero__title .hero__line {
        --rv-x: 0px;
        --rv-y: 0px;
        --rv-s: 1;
        opacity: 1;
        filter: none;
    }

    .js .hero__title .hero__line { transform: none; }

    .hero__brand::after,
    .btn--primary::after,
    .filter.is-active::after { display: none; }

    .service-card,
    .feature-card,
    .project-card,
    .team-card,
    .step { --rx: 0deg !important; --ry: 0deg !important; }

    .hero__bg { transform: none !important; }
}

/* ==========================================================================
   10 — FINISHING
   ========================================================================== */

/* -------------------------------------------------- travelling rim light -- */

/* The contact form is the page's single conversion target, so it gets the one
   continuously-moving element on the site: a conic highlight orbiting its
   border. Drawn as a 1px ring by excluding the content box from the mask, so
   it is a rim rather than a glowing rectangle.

   This replaces the static top rim the other panels carry — see section 5. */


/* -------------------------------------------------------------- imagery -- */

/* The team photograph answers the pointer: a slow push-in plus a lit edge
   where it meets the copy column. */
.about__media {
    isolation: isolate;
    overflow: hidden;
}

.about__media img,
.about__media picture img {
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
    will-change: transform;
}

.about__media:hover img { transform: scale(1.05); }

.about__media::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--rim-hot) 50%, transparent 100%);
    opacity: .6;
}

/* The map panel keeps a lit inner divider between its four readings. */
.stat:nth-child(odd)    { border-right-color: var(--glow-soft); }
.stat:nth-child(-n + 2) { border-bottom-color: var(--glow-soft); }

/* ------------------------------------------------------------ type glow -- */

.vision__text { text-shadow: 0 0 40px var(--glow-faint); }

.section-title { text-wrap: balance; }

.link {
    text-decoration-color: var(--glow-mid);
    transition: color .25s ease, text-decoration-color .25s ease, text-shadow .25s ease;
}

.link:hover {
    text-decoration-color: currentColor;
    text-shadow: 0 0 16px var(--glow-mid);
}

.team-card__email:hover { text-shadow: 0 0 16px var(--glow-mid); }

/* ------------------------------------------------------------ brand mark -- */

.site-header__brand .logo,
.site-footer__brand .logo {
    transition: filter .4s ease, transform .4s cubic-bezier(.34, 1.4, .64, 1);
}

.site-header__brand:hover .logo,
.site-footer__brand:hover .logo {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 18px var(--glow-core));
}

/* ------------------------------------------------------------ skip link -- */

.skip-link {
    box-shadow: 0 10px 30px -10px var(--glow-core), 0 0 0 1px var(--rim-hot);
}

/* --------------------------------------------------------- focus visible -- */

/* The default ring is a flat outline; on a page built out of light it should
   glow like everything else. */
:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--glow-soft), 0 0 22px -4px var(--glow-core);
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    .about__media:hover img { transform: none; }
    .error-page__code { animation: none; }
}

/* ==========================================================================
   11 — MESH GRADIENTS & THE NODE NETWORK
   --------------------------------------------------------------------------
   Two additions that work together: a four-point mesh gradient replaces the
   three-point aurora so each band has its own colour temperature, and a
   canvas constellation is drawn on top of it by main.js.

   The network reads its own colours from --net-* on its host, so the hero
   (which re-declares the dark ramp over photography) stays night-lit in both
   themes without the script knowing anything about the theme.
   ========================================================================== */

/* ---------------------------------------------------------- mesh tokens -- */

:root,
.theme-dark {
    --mesh-1:   rgba(37, 120, 255, .22);   /* azure   — top left  */
    --mesh-2:   rgba(0, 194, 255, .14);    /* cyan    — top right */
    --mesh-3:   rgba(116, 84, 255, .17);   /* violet  — bottom    */
    --mesh-4:   rgba(0, 224, 200, .07);    /* teal    — centre    */

    --card-top: rgba(70, 150, 255, .10);
    --card-bot: rgba(4, 10, 20, .5);

    --net-node: 150, 215, 255;
    --net-link: 90, 175, 255;
    --net-add:  1;
}

:root[data-theme="light"] {
    --mesh-1:   rgba(22, 104, 227, .13);
    --mesh-2:   rgba(0, 170, 255, .10);
    --mesh-3:   rgba(124, 92, 255, .10);
    --mesh-4:   rgba(0, 200, 180, .06);

    --card-top: rgba(22, 104, 227, .05);
    --card-bot: rgba(11, 27, 45, .03);

    --net-node: 24, 96, 200;
    --net-link: 42, 118, 224;
    --net-add:  0;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --mesh-1:   rgba(22, 104, 227, .13);
        --mesh-2:   rgba(0, 170, 255, .10);
        --mesh-3:   rgba(124, 92, 255, .10);
        --mesh-4:   rgba(0, 200, 180, .06);

        --card-top: rgba(22, 104, 227, .05);
        --card-bot: rgba(11, 27, 45, .03);

        --net-node: 24, 96, 200;
        --net-link: 42, 118, 224;
        --net-add:  0;
    }
}

/* Photo-backed regions keep the night palette in every theme. */
.hero,
.page-hero,
.about__media,
.about__stats,
.error-page {
    --mesh-1:   rgba(37, 120, 255, .26);
    --mesh-2:   rgba(0, 194, 255, .16);
    --mesh-3:   rgba(116, 84, 255, .20);
    --mesh-4:   rgba(0, 224, 200, .08);

    --card-top: rgba(70, 150, 255, .10);
    --card-bot: rgba(4, 10, 20, .5);

    --net-node: 165, 225, 255;
    --net-link: 95, 180, 255;
    --net-add:  1;
}

/* ------------------------------------------------------ the mesh itself -- */

/* Four sources instead of three, placed at different corners and given
   different hues, so a page of stacked bands never repeats the same wash. */
.section::before,
.services::before,
.cta::before {
    background:
        radial-gradient(62% 56% at 8% -6%,   var(--mesh-1) 0%, transparent 62%),
        radial-gradient(50% 58% at 92% 4%,   var(--mesh-2) 0%, transparent 60%),
        radial-gradient(64% 66% at 70% 106%, var(--mesh-3) 0%, transparent 64%),
        radial-gradient(42% 46% at 34% 64%,  var(--mesh-4) 0%, transparent 62%);
    animation: aurora-drift 26s ease-in-out infinite alternate;
}

/* Alternating bands lean to opposite corners so consecutive sections read as
   different rooms rather than as one long gradient. */
.section--alt::before {
    background:
        radial-gradient(58% 54% at 94% -4%,  var(--mesh-1) 0%, transparent 62%),
        radial-gradient(52% 58% at 6% 8%,    var(--mesh-3) 0%, transparent 60%),
        radial-gradient(66% 64% at 28% 104%, var(--mesh-2) 0%, transparent 64%),
        radial-gradient(44% 48% at 66% 60%,  var(--mesh-4) 0%, transparent 62%);
    animation-direction: alternate-reverse;
}

/* The hero mesh sits over the photograph, so it runs hotter. */
.hero::before,
.page-hero::before {
    background:
        radial-gradient(40% 48% at 16% 26%, var(--mesh-1) 0%, transparent 66%),
        radial-gradient(36% 42% at 76% 14%, var(--mesh-2) 0%, transparent 64%),
        radial-gradient(46% 50% at 54% 98%, var(--mesh-3) 0%, transparent 66%),
        radial-gradient(34% 38% at 38% 62%, var(--mesh-4) 0%, transparent 62%);
}

/* The closing band gets the richest gradient on the page — it is the last
   thing read before the footer. */
.cta {
    background-image:
        linear-gradient(90deg, transparent 0%, var(--glow-mid) 18%, var(--rim-hot) 50%, var(--glow-mid) 82%, transparent 100%),
        radial-gradient(70% 180% at 8% 0%,   var(--mesh-1) 0%, transparent 62%),
        radial-gradient(60% 150% at 92% 110%, var(--mesh-3) 0%, transparent 60%),
        radial-gradient(90% 160% at 10% 0%,  var(--cta-glow) 0%, transparent 62%);
    background-size: 100% 1px, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat;
    background-color: var(--cta-bg);
}

/* The footer closes on a wash rather than a flat slab. */
.site-footer::before {
    background:
        radial-gradient(60% 200% at 50% 0%, var(--glow-faint) 0%, transparent 70%),
        radial-gradient(40% 160% at 8% 100%, var(--mesh-1) 0%, transparent 66%),
        radial-gradient(40% 160% at 92% 100%, var(--mesh-3) 0%, transparent 66%);
}

/* ------------------------------------------------------- lit card faces -- */

/* A cool highlight pooled at the top edge and a sink at the bottom. Cards
   stop being tinted rectangles and start reading as lit planes. */
.service-card,
.feature-card,
.project-card,
.team-card,
.step,
.job,
.detail-card,
.reach-card {
    background-image:
        radial-gradient(128% 84% at 50% -22%, var(--card-top) 0%, transparent 62%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 72%, var(--card-bot) 100%);
}

/* ------------------------------------------------------ gradient titles -- */

/* Large section headings pick up a vertical fade. Both stops are checked
   against their band: the darkest is 13:1 on dark, 8:1 on light. */
.section-title--lg {
    background: linear-gradient(180deg, #ffffff 0%, #c3d9f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

:root[data-theme="light"] .section-title--lg {
    background: linear-gradient(180deg, #0b1b2d 0%, #274b74 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .section-title--lg {
        background: linear-gradient(180deg, #0b1b2d 0%, #274b74 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ---------------------------------------------------- richer brand fills -- */

.btn--primary {
    background-image: linear-gradient(100deg,
        #0f5ad6 0%,
        var(--blue) 30%,
        var(--blue-mid) 66%,
        #5aa6ff 100%);
}

.filter.is-active,
.pagination__page.is-current {
    background-image: linear-gradient(100deg, #0f5ad6 0%, var(--blue) 38%, var(--blue-mid) 100%);
}

.tag:not(.tag--muted) {
    background-image: linear-gradient(140deg, rgba(43, 134, 255, .2) 0%, rgba(116, 84, 255, .12) 100%);
}

/* ==========================================================================
   12 — NODE NETWORK CANVAS
   ========================================================================== */

/* Injected by main.js into each host. It is decoration with no semantics, so
   it is aria-hidden and never takes the pointer — the host keeps receiving
   the pointermove the network is drawn from. */
.node-net {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease;
}

.node-net.is-live { opacity: 1; }

/* Over photography the constellation is the point, so it runs at full
   strength and sits above the light shafts. */
.hero > .node-net,
.page-hero > .node-net { z-index: -1; }

/* Inside a content band it is texture, not subject — pushed behind the grid
   overlay and well behind the copy. */
.section > .node-net,
.services > .node-net,
.cta > .node-net { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
    .node-net { transition: none; }
}

/* ------------------------------------------------- protecting the copy -- */

/* The constellation runs at full strength across the photograph but is
   thinned to ~40% over the headline column. A mask rather than a lower global
   opacity, so the effect stays strong exactly where there is nothing to read.
   Partial-alpha stops dim rather than erase. */
.hero > .node-net {
    -webkit-mask-image: radial-gradient(56% 72% at 19% 54%,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .70) 46%,
        #000 78%);
    mask-image: radial-gradient(56% 72% at 19% 54%,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .70) 46%,
        #000 78%);
}

/* Inner-page titles run wider and sit higher, so their shield does too. */
.page-hero > .node-net {
    -webkit-mask-image: radial-gradient(64% 86% at 28% 42%,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .72) 50%,
        #000 82%);
    mask-image: radial-gradient(64% 86% at 28% 42%,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .72) 50%,
        #000 82%);
}

/* Stacked, the copy fills the width and there is no column left to shield —
   so the whole layer steps back instead. */
@media (max-width: 1023px) {
    .hero > .node-net,
    .page-hero > .node-net {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero > .node-net.is-live,
    .page-hero > .node-net.is-live { opacity: .5; }

    .section > .node-net.is-live,
    .services > .node-net.is-live,
    .cta > .node-net.is-live { opacity: .6; }
}

/* ==========================================================================
   13 — MOBILE DRAWER SCRIM
   --------------------------------------------------------------------------
   A frosted panel only reads as frosted if there is something behind it worth
   blurring. The scrim blurs and dims the page under the open drawer, which is
   also what stops the constellation and the body copy from competing with the
   menu labels.

   It is appended to <body> by main.js rather than nested in the header, for
   two reasons: a fixed layer inside the sticky header would be clipped to the
   header's stacking context, and anything inside .site-header would land in
   the drawer's own backdrop root and cancel its blur.
   ========================================================================== */

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;            /* under the header (50), over everything else */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(3, 8, 16, .5);
    transition: opacity .32s ease, visibility .32s;
}

:root[data-theme="light"] .nav-scrim { background: rgba(11, 27, 45, .28); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nav-scrim {
        background: rgba(3, 8, 16, .34);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
    }

    :root[data-theme="light"] .nav-scrim { background: rgba(11, 27, 45, .16); }
}

.nav-scrim.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;   /* tapping the page closes the menu */
}

/* The page must not scroll under an open drawer. overflow-y only, so the
   body keeps the overflow-x: hidden it relies on. */
body.nav-is-open { overflow-y: hidden; }

/* Desktop restores the inline nav, so the scrim can never apply. */
@media (min-width: 1024px) {
    .nav-scrim { display: none; }
    body.nav-is-open { overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-scrim { transition: opacity .001ms, visibility .001ms; }
}

/* ==========================================================================
   14 — SYSTEMS CAROUSEL: paired glass cards, 3D flip, full-size lightbox
   --------------------------------------------------------------------------
   One card per system, each carrying both of its screenshots: the interface
   on the front, the capability map on the back. Three layers of state:

     · the track     — translated by whole slides, one system at a time
     · the card      — rotateY(180deg) on .is-flipped, faces stacked in a
                       single grid cell so the pane keeps a stable height
     · the lightbox  — a fixed overlay showing either image at full size

   The markup renders complete and ordered with JavaScript off; main.js adds
   the `is-carousel` class that collapses the stack into a single-slide track,
   so nothing here hides content a no-JS visitor would otherwise get.
   ========================================================================== */

.systems {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 72px;
    background: var(--bg-section);
}

/* The home page runs this straight after the services block, which is already
   --bg-section; without the swap the two would read as one long band. */
.systems--plain { background: var(--bg); }

/* Aurora wash behind the stage — the same field the hero uses, pulled to the
   centre so the glass has something coloured to refract. */
.systems__glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 560px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48% 62% at 22% 30%, var(--aurora-a) 0%, transparent 70%),
        radial-gradient(42% 55% at 78% 22%, var(--aurora-b) 0%, transparent 72%),
        radial-gradient(52% 58% at 52% 78%, var(--aurora-c) 0%, transparent 70%);
    filter: blur(14px);
}

.systems__intro {
    max-width: min(660px, 100%);
    margin-bottom: 36px;
}

.systems__intro .section-title {
    margin-top: 14px;
    font-size: clamp(24px, 3.4vw, 32px);
}

.systems__intro .section-lead { margin-top: 14px; }

/* ---------------------------------------------------------- what we build -- */
/* Stated apart from the three systems below, so the carousel reads as
   examples of the work rather than the whole of what can be commissioned. */

.systems__platforms {
    display: grid;
    gap: 14px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

@media (min-width: 760px) {
    .systems__platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.platform {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--radius) * 2);
    background: var(--fill-subtle);
}

.platform__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--icon);
    background: var(--glow-faint);
    box-shadow: inset 0 0 0 1px var(--glass-line);
}

.platform__name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.platform__text {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.66;
    color: var(--text-body);
}

/* --------------------------------------------------------------- stage -- */

.systems__stage { position: relative; }

/* No-JS / pre-upgrade: a plain stack. Both faces of every card are visible
   and in reading order, which is the correct fallback for a flip card. */
.systems__track {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Upgraded: one slide wide, the rest carried off-canvas by the track. */
.is-carousel .systems__track {
    display: flex;
    gap: 0;
    transform: translate3d(calc(var(--slide, 0) * -100%), 0, 0);
    transition: transform .72s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.is-carousel .system-slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* Only the live slide takes the pointer, so an off-screen neighbour can never
   swallow a click meant for the card in view, or catch a Tab. The delay holds
   it on screen until the slide it is leaving on has finished travelling.
   Nothing below re-declares `visibility: visible` on a descendant: that would
   override this by inheritance and leak a strip of the next card into the
   viewport's padding. Coming back, dropping the rule restores it at once. */
.is-carousel .system-slide[aria-hidden="true"] {
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear .72s;
}

/* The viewport clips the track; the padding keeps each card's bloom shadow
   from being sliced off at the edges. */
.is-carousel .systems__viewport {
    overflow: hidden;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-block: 12px;
}

/* ----------------------------------------------------------- flip card -- */

/* A full-bleed 16:9 slide at the container's full width would stand 700px
   tall and push the controls off the fold. Capping the card is what keeps the
   proportions of a slide rather than a billboard; the track still moves by
   whole slides, so the carousel's arithmetic is untouched. */
.system-card {
    max-width: 980px;
    margin-inline: auto;
}

/* Un-upgraded, the two faces are simply stacked and both are readable: there
   is no flip to reveal the back one, so nothing may turn it away from the
   viewer or leave its buttons tabbable behind a face nobody can see. Every
   rule that builds the flip is therefore scoped to .is-carousel. */
.system-card__pane {
    display: grid;
    gap: 28px;
}

.is-carousel .system-card {
    perspective: 2200px;
    perspective-origin: 50% 42%;
}

.is-carousel .system-card__pane {
    gap: 0;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform .9s cubic-bezier(.62, .02, .34, 1);
}

.is-carousel .system-card.is-flipped .system-card__pane { transform: rotateY(180deg); }

/* Once upgraded, both faces occupy the same grid cell, so the pane is as tall
   as the taller of the two and the height never jumps mid-flip. */
.is-carousel .system-card__face {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.is-carousel .system-card__face--back { transform: rotateY(180deg); }

/* Every control on a card drives something that only exists once JS has run —
   the flip, and the lightbox. Un-upgraded they are hidden or made inert, so
   the stack never offers a button that cannot do anything. */
.system-card__flip { display: none; }
.is-carousel .system-card__flip { display: block; }

.system-card__expand { display: none; }
.is-carousel .system-card__expand { display: grid; }

.system-card__zoom-badge { display: none; }
.is-carousel .system-card__zoom-badge { display: grid; }

.system-card__zoom { cursor: default; }
.is-carousel .system-card__zoom { cursor: zoom-in; }

/* The shell both faces share. Layout is not part of it: the slide is a bled
   screenshot with a caption plate over it, the details face is a grid. */
.system-card__face {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--radius) * 2.5);
    background: var(--glass-panel);
    box-shadow:
        inset 0 1px 0 var(--bevel),
        0 1px 2px rgba(0, 0, 0, .18),
        var(--shadow-lift);
}

/* Rows hug their content and the block centres in what is left. The pane is
   as tall as the taller face — the slide — so a greedy 1fr row here would
   bank all that slack and strand the flip button at the very bottom. */
.system-card__face--back {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: 18px;
}

/* The frost only goes on where it is supported — the fallback above is a
   near-opaque panel, which the back face needs to hide the front anyway. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .system-card__face {
        background: var(--glass);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter: blur(22px) saturate(180%);
    }
}

/* Top rim light, matching every other panel on the site. */
.system-card__face::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--rim) 22%,
        var(--rim-hot) 50%,
        var(--rim) 78%,
        transparent 100%);
    opacity: .4;
    transform: scaleX(.6);
    transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.system-card:hover .system-card__face::after {
    opacity: .9;
    transform: scaleX(1);
}

/* Cursor spotlight — main.js tracks --mx / --my on the card. */
.system-card__face::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
        var(--spot) 0%,
        var(--glow-faint) 40%,
        transparent 70%);
    opacity: 0;
    transition: opacity .38s ease;
}

.system-card:hover .system-card__face::before,
.system-card:focus-within .system-card__face::before { opacity: 1; }

/* Landscape details: the paired capability map leads, the copy sits beside it. */
@media (min-width: 900px) {
    .system-card__face--back {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
        grid-template-rows: auto auto;
        column-gap: 26px;
        row-gap: 18px;
        padding: 24px;
    }

    .system-card__face--back .system-card__shot {
        grid-row: 1 / 3;
        align-self: center;
    }

    .system-card__face--back .system-card__body { align-self: center; }
}

/* ------------------------------------------------------------ the slide -- */
/* The front face carries no prose: the screenshot bleeds to the card's edges
   and a plate names the system over it. Clicking anywhere is what brings the
   details up, so the whole face reads as one target. */

.is-carousel .system-card__face--front { cursor: pointer; }

.system-card__face--front .system-card__shot,
.system-card__face--front picture {
    display: block;
    margin: 0;
}

.system-card__face--front img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

/* Gradient, not a flat bar: the plate has to stay legible over whichever
   screenshot sits under it, light UI or dark. */
.system-card__scrim {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 52%;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(2, 7, 14, .97) 0%,
        rgba(2, 7, 14, .93) 22%,
        rgba(2, 7, 14, .62) 52%,
        rgba(2, 7, 14, .22) 78%,
        transparent 100%);
}

.system-card__plate {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px clamp(16px, 2.4vw, 26px);
}

/* The plate sits on its own dark gradient in both themes, so its text keeps
   the light ramp rather than following the page. */
.system-card__plate .system-card__kind { color: #7fb4ff; }
.system-card__plate .system-card__title { color: #fff; }

.system-card__plate .system-card__abbr {
    border-color: rgba(255, 255, 255, .28);
    color: #cfe0f5;
    background: rgba(255, 255, 255, .1);
}

/* Full size, from the slide. A control of its own because the slide's own
   click is spoken for. */
.system-card__expand {
    position: absolute;
    top: 14px;
    right: 14px;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 16, 28, .5);
    cursor: zoom-in;
    /* Visible at rest, not hover-revealed: a touch device never hovers, and
       this is the only route to the full-size screen from the slide. */
    opacity: .72;
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1),
                background .3s ease, border-color .3s ease;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .system-card__expand {
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

.system-card:hover .system-card__expand { opacity: 1; }

.system-card__expand:hover,
.system-card__expand:focus-visible {
    opacity: 1;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(8, 16, 28, .78);
    transform: scale(1.06);
}

/* The slide's own flip control, parked opposite the plate. */
.system-card__flip--on-slide {
    position: absolute;
    right: clamp(16px, 2.4vw, 26px);
    bottom: 20px;
    margin-top: 0;
}

.system-card__flip--on-slide span {
    border-color: rgba(255, 255, 255, .26);
    color: #fff;
    background: rgba(8, 16, 28, .55);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .system-card__flip--on-slide span {
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

.system-card__flip--on-slide:hover span,
.system-card__flip--on-slide:focus-visible span {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(8, 16, 28, .8);
    color: #fff;
}

/* On a phone the slide is only ~180px tall, and a plate laid over it covers
   most of the screenshot and runs into the flip control. Below this width the
   plate drops out of the image and sits under it in normal flow, which also
   returns its text to the theme's own colours. */
@media (max-width: 719px) {
    /* Narrow, the details face runs far taller than the slide. Sharing one
       grid cell would then give the slide the details face's height and leave
       a few hundred pixels of void under the screenshot, so here the faces
       swap outright instead of turning — each is its own height, and there is
       no half-turn to hide anything through. */
    .is-carousel .system-card__pane {
        display: block;
        transform-style: flat;
    }

    .is-carousel .system-card.is-flipped .system-card__pane { transform: none; }

    .is-carousel .system-card__face {
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
    }

    .is-carousel .system-card__face--back { transform: none; }

    .is-carousel .system-card:not(.is-flipped) .system-card__face--back,
    .is-carousel .system-card.is-flipped .system-card__face--front {
        display: none;
    }

    .system-card__face--front { padding-bottom: 16px; }

    .system-card__scrim { display: none; }

    .system-card__plate {
        position: static;
        padding: 15px 16px 0;
    }

    .system-card__plate .system-card__kind { color: var(--eyebrow); }
    .system-card__plate .system-card__title { color: var(--text); }

    .system-card__plate .system-card__abbr {
        border-color: var(--glass-line);
        color: var(--blue-bright);
        background: var(--fill-subtle);
    }

    .system-card__flip--on-slide {
        position: static;
        width: fit-content;
        margin: 14px 0 0 16px;
    }

    .system-card__flip--on-slide span,
    .system-card__flip--on-slide:hover span,
    .system-card__flip--on-slide:focus-visible span {
        border-color: var(--glass-line);
        color: var(--blue-bright);
        background: var(--fill-subtle);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ------------------------------------------------------- details screen -- */

.system-card__shot {
    margin: 0;
    min-width: 0;
}

/* The screenshot itself is the zoom target. */
.system-card__zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: calc(var(--radius) * 1.6);
    background: var(--surface-3);
    transition: border-color .3s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.system-card__zoom img,
.system-card__zoom picture {
    display: block;
    width: 100%;
}

.system-card__zoom img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.system-card__zoom:hover,
.system-card__zoom:focus-visible {
    border-color: var(--line-hover);
    box-shadow: 0 0 0 1px var(--rim), 0 18px 40px -22px var(--glow-core);
    transform: translateY(-2px);
}

/* Expand affordance, revealed on hover so it never sits over the screenshot
   at rest. Decorative — the button already carries the label. */
.system-card__zoom-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--dot-ink);
    background: var(--dot-bg);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: scale(.82);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.system-card__zoom:hover .system-card__zoom-badge,
.system-card__zoom:focus-visible .system-card__zoom-badge {
    opacity: 1;
    transform: scale(1);
}

.system-card__caption {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---------------------------------------------------------------- copy -- */

.system-card__body { min-width: 0; }

.system-card__kind {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.system-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    font-family: var(--font-head);
    font-size: clamp(19px, 2.1vw, 23px);
    font-weight: 700;
    line-height: 1.24;
    color: var(--text);
}

.system-card__abbr {
    padding: 3px 9px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-bright);
    background: var(--fill-subtle);
}

.system-card__text {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-body);
}

/* The second paragraph explains the capability map beside it, so it steps
   back from the sentence that says what the system is. */
.system-card__text--soft {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-dim);
}

/* ------------------------------------------------------- metrics, tags -- */

.system-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.system-card__metrics li {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-subtle);
}

.system-card__metric-value {
    display: block;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.system-card__metric-label {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--text-dim);
}

.system-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.system-card__tags li {
    padding: 5px 11px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--text-soft);
    background: var(--fill-subtle);
}

/* --------------------------------------------------------- flip button -- */

.system-card__flip {
    justify-self: start;
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--blue-bright);
    cursor: pointer;
}

/* The details face lays its flip out as a grid item; the slide's is absolutely
   positioned over the screenshot and must keep out of this. */
@media (min-width: 900px) {
    .system-card__face--back .system-card__flip {
        grid-column: 2;
        margin-top: 0;
    }
}

.system-card__flip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    background: var(--fill-subtle);
    transition: border-color .3s ease, background .3s ease, color .3s ease;
}

.system-card__flip:hover span,
.system-card__flip:focus-visible span {
    border-color: var(--line-hover);
    background: var(--fill-hover);
    color: var(--text);
}

.system-card__flip .icon { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }

.system-card__flip:hover .icon { transform: rotate(180deg); }

/* A hidden face must not be reachable by Tab — backface-visibility hides it
   visually but leaves its buttons in the focus order. The delay is half the
   turn, so the outgoing face is taken out exactly as it swings edge-on.
   The incoming face simply stops matching and comes back immediately, which
   is what lets main.js move focus to it the moment the flip starts. */
.is-carousel .system-card:not(.is-flipped) .system-card__face--back,
.is-carousel .system-card.is-flipped .system-card__face--front {
    visibility: hidden;
    transition: visibility 0s linear .45s;
}

/* ------------------------------------------------------------ controls -- */

.systems__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.systems__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--glass-line);
    border-radius: 50%;
    color: var(--text-soft);
    background: var(--glass);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease,
                transform .4s cubic-bezier(.22, 1, .36, 1);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .systems__arrow {
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter: blur(14px) saturate(160%);
    }
}

.systems__arrow--prev .icon { transform: rotate(180deg); }

.systems__arrow:hover,
.systems__arrow:focus-visible {
    border-color: var(--line-hover);
    color: var(--text);
    background: var(--fill-hover);
}

.systems__arrow--prev:hover { transform: translateX(-2px); }
.systems__arrow--next:hover { transform: translateX(2px); }

.systems__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.systems__dots button {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    cursor: pointer;
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.systems__dots button:hover {
    color: var(--text);
    border-color: var(--line-hover);
}

.systems__dots button[aria-current="true"] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(92deg, var(--accent-from) 0%, var(--accent-to) 100%);
    box-shadow: 0 8px 22px -12px var(--glow-core);
}

.systems__hint {
    margin-top: 14px;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--text-dim);
}

/* ------------------------------------------------------------ lightbox -- */

.system-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    gap: 14px;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(2, 7, 14, .84);
    opacity: 0;
    visibility: hidden;
    cursor: zoom-out;
    transition: opacity .32s ease, visibility 0s linear .32s;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .system-lightbox {
        background: rgba(2, 7, 14, .68);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }
}

.system-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .32s ease, visibility 0s;
}

/* display: contents so the image and its caption become the grid's own two
   rows — the image gets all the free height, the caption only what it needs. */
.system-lightbox__figure {
    display: contents;
    margin: 0;
}

.system-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: 1px solid rgba(120, 175, 255, .22);
    border-radius: calc(var(--radius) * 1.6);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
    cursor: default;
    transform: scale(.965);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.system-lightbox.is-open img { transform: scale(1); }

.system-lightbox__caption {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    color: #cfe0f5;
}

.system-lightbox__close {
    position: absolute;
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.system-lightbox__close:hover,
.system-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .4);
    transform: rotate(90deg);
}

/* overflow-y only, so the body keeps the overflow-x: hidden it relies on. */
body.lightbox-is-open { overflow-y: hidden; }

/* -------------------------------------------------------- small screens -- */

@media (max-width: 899px) {
    .systems { padding-block: 56px; }

    .system-card__face { padding: 14px; }

    .system-card__body { margin-top: 16px; }

    .system-card__metrics { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); }

    .systems__dots button {
        padding: 7px 10px;
        letter-spacing: .08em;
    }
}

@media (max-width: 540px) {
    .systems__controls { gap: 8px; }
    .systems__dots button { font-size: 10px; }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    .is-carousel .systems__track,
    .system-card__pane,
    .system-lightbox,
    .system-lightbox img,
    .system-card__zoom,
    .system-card__flip .icon {
        transition-duration: .001ms;
    }

    .system-card__zoom:hover,
    .systems__arrow--prev:hover,
    .systems__arrow--next:hover { transform: none; }

    .system-card__flip:hover .icon { transform: none; }
    .system-lightbox__close:hover { transform: none; }
}