/* =========================================================================
   BlueAquila - main stylesheet
   -------------------------------------------------------------------------
   Plain CSS3, no build step. Loaded once from <head> (see partials/head.php).
   The Content-Security-Policy blocks inline styles and external assets, so
   everything the site needs visually lives in this file.

   Contents:
     1.  Design tokens
     2.  Reset & base elements
     3.  Layout primitives (container, section rhythm)
     4.  Buttons & links
     5.  Site header / primary navigation
     6.  Site footer
     7.  Flash messages
     8.  Homepage - hero
     9.  Homepage - value strip
     10. Homepage - services
     11. Homepage - why BlueAquila
     12. Homepage - process
     13. Homepage - AI & automation feature
     14. Homepage - selected work
     15. Homepage - closing CTA
     16. Placeholder pages (scaffold)
     17. Security honeypot (functional, do not remove)
     18. Responsive
     19. Reduced motion

   Phase 3 - premium interaction layer (additive, all decorative):
     20. Hero background + entrance
     21. Scroll reveal
     22. Service card interactions
     23. Process motion
     24. AI & automation visual
     25. CTA arrow
     26. Off-screen animation pause
     27. Reduced motion (Phase 3 + 4)

   Phase 4 - premium hero system visual + refinements:
     28. Hero headline
     29. Navigation hover indicator
     30. Hero system visual: structure + depth layers
     31. Background layer
     32. Midground: connections, particles, nodes, core
     33. Foreground: floating interface cards
     34. Hero visual: entrance + card drift
     35. Hero visual: mobile simplification
   ========================================================================= */

/* 1. Design tokens ------------------------------------------------------- */
:root {
    --bg: #ffffff;
    --surface: #f2f6fe;          /* very light cool blue */
    --surface-2: #e7f0fe;
    --ink: #0b1220;              /* deep navy / blue-black - headings, key UI */
    --ink-soft: #3f4e6b;         /* dark cool gray - body copy */
    --line: #d7e1f4;             /* cool hairline */
    --line-strong: #c1d1ec;      /* card / structural borders */

    --brand: #1560db;            /* confident saturated blue - buttons, links */
    --brand-strong: #0c3fa8;     /* button hover / pressed */
    --brand-wash: #e8f1ff;       /* light blue fill - icon chips, ghost hover */
    --electric: #2f7bff;         /* bright blue - animation highlights only */
    --accent: #14b8d4;           /* aqua - used extremely sparingly */

    --navy: #0b1220;
    --navy-soft: #1a2b48;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 2px 6px rgba(16, 42, 110, .07);
    --shadow-md: 0 12px 32px -12px rgba(16, 42, 110, .2);
    --shadow-blue: 0 16px 40px -18px rgba(21, 96, 219, .3);   /* premium blue-tinted lift */

    --container: 1120px;
    --pad-x: clamp(1.15rem, 4vw, 2rem);
    --section-y: clamp(3rem, 6vw, 5rem);
    --header-h: 4.5rem;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Reset & base ------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* keep in-page anchors / scroll restoration clear of the sticky header */
    scroll-padding-top: calc(var(--header-h) + 0.5rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    /* predominantly white, with two very faint cool light fields for depth */
    background-color: var(--bg);
    background-image:
        radial-gradient(64rem 44rem at 88% -8%, rgba(21, 96, 219, .05), transparent 60%),
        radial-gradient(52rem 40rem at 2% 18%, rgba(20, 184, 212, .035), transparent 55%);
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;              /* fewer orphan words in headings */
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1rem; text-wrap: pretty; }   /* avoid single-word last lines */

a {
    color: var(--brand);
    text-decoration-color: color-mix(in srgb, var(--brand) 38%, transparent);
    text-underline-offset: 3px;
}

a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

svg { display: block; }

.icon {
    width: 1.4em;
    height: 1.4em;
    flex: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* 3. Layout primitives ------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.section {
    padding-block: var(--section-y);
}

.section__head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__intro {
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin-bottom: 0;
}

.eyebrow {
    margin: 0 0 .9rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}

.eyebrow--on-wash { color: var(--brand-strong); }

/* 4. Buttons & links ------------------------------------------------- */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .72rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn--primary {
    background: var(--brand);
    box-shadow: 0 3px 10px rgba(21, 96, 219, .25), 0 1px 2px rgba(11, 18, 32, .08);
}
.btn--primary:hover {
    background: var(--brand-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line-strong));
}
.btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-wash);
    box-shadow: 0 2px 10px rgba(21, 96, 219, .12);
}

.btn--ghost-on-dark {
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.btn--ghost-on-dark:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn--lg { min-height: 52px; padding: .9rem 1.7rem; font-size: 1.03rem; }
.btn--sm { min-height: 40px; padding: .48rem 1.05rem; font-size: .89rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    text-decoration: none;
}
.link-arrow:hover { color: var(--brand); }

/* 5. Site header / navigation --------------------------------------- */
/* V5 composition fix: the V4 layout paired one flex `justify-content:
   space-between` with only two anchors (brand, and a nav+CTA bundle), which
   dumps ALL leftover width into a single gap - and because the bundle
   starts with nav, that gap read as a huge void between the brand and
   "Services". A true three-column grid fixes this at the root: brand, nav
   and CTA are each their own column, so the leftover width is split into
   two controlled gaps (brand<->nav and nav<->CTA) instead of one lopsided
   one. The middle column is `auto`, sized to the nav's own content, so nav
   never stretches or gets shoved off-centre by how wide the CTA happens to
   be. Background stays the V4 solid, cool light-blue surface - unchanged. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--surface) 62%, var(--bg));
    border-bottom: 1px solid var(--line);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-header--scrolled {
    background: var(--surface);
    border-bottom-color: var(--line-strong);
    box-shadow: 0 10px 22px -20px rgba(16, 42, 110, .35);
}
.site-header__inner {
    display: grid;
    /* minmax() floors on the outer columns stop the brand/CTA from ever
       being squeezed narrower than their own content - if the viewport is
       genuinely too tight for that, the row overflows visibly (or the
       1200px mobile breakpoint has already taken over) rather than
       silently wrapping the CTA's text onto a second line. */
    grid-template-columns: minmax(9rem, 1fr) auto minmax(11rem, 1fr);
    align-items: center;
    gap: 1rem;
    max-width: 1180px;
    min-height: var(--header-h);
    padding-block: .5rem;
}

/* --- brand: left column, the anchor of the system --- */
.site-header__brand {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 750;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}
.site-header__mark { display: inline-flex; width: 26px; height: 26px; }
.site-header__mark svg { width: 100%; height: 100%; }
.site-header__mark rect { fill: var(--brand); transition: fill .15s ease; }
.site-header__brand:hover .site-header__mark rect { fill: var(--brand-strong); }
.site-header__name { line-height: 1; }

/* --- primary nav: centre column, sized to its own content - calm by
   default, one clear active cue, no underline/pill --- */
.site-nav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
}
.site-nav__list {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 1.1vw, 1.05rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* JS-injected sliding highlight (see main.js) - a fine-pointer-only
   progressive enhancement. Sits behind the link text and glides smoothly
   to whichever item is hovered/focused, then fades away; a plain colour
   change on the link itself is still the baseline for touch and no-JS. */
.site-nav__highlight {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1),
                width .32s cubic-bezier(.22, .61, .36, 1),
                height .32s cubic-bezier(.22, .61, .36, 1),
                opacity .2s ease;
}
.site-nav__link {
    position: relative;
    display: inline-flex;
    padding: .42rem .6rem;
    color: var(--ink-soft);
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--ink); }
/* Active page: colour + weight only - no bar, no pill, no glow. */
.site-nav__link[aria-current="page"] { color: var(--brand-strong); font-weight: 700; }

/* --- CTA: right column, a compact rounded rectangle, not a pill --- */
.site-header__cta,
.site-nav__cta {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    gap: .4rem;
    min-height: 40px;
    padding: .6rem 1rem .6rem 1.15rem;
    border-radius: var(--radius-sm);
    font-size: .89rem;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(21, 96, 219, .22);
}
.site-header__cta {
    grid-column: 3;
    justify-self: end;
}
.site-header__cta:hover,
.site-nav__cta:hover {
    background: var(--brand-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(21, 96, 219, .38);
}
.site-nav__cta { display: none; }

/* --- secondary "View Full Pricing" link: mobile-menu only, deliberately
   quieter than the primary five items - never a sixth nav item --- */
.site-nav__pricing { display: none; }

/* --- menu button (injected by main.js): same right column as the CTA -
   only one of the two is ever visible at a given width --- */
.nav-toggle {
    display: none;
    grid-column: 3;
    justify-self: end;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible,
.is-nav-open .nav-toggle { border-color: var(--line-strong); background: var(--surface); }
.nav-toggle__icon { position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle__icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle__icon span:first-child { top: 1px; }
.nav-toggle__icon span:last-child { bottom: 1px; }
.is-nav-open .nav-toggle__icon span:first-child { transform: translateY(4px) rotate(45deg); }
.is-nav-open .nav-toggle__icon span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* --- scrim behind the mobile panel (injected by main.js) --- */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(11, 18, 32, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility 0s .24s;
}
.nav-scrim.is-visible { opacity: 1; visibility: visible; transition: opacity .24s ease; }

/* --- 1201-1400px: the grid already self-tightens (1fr columns shrink with
   the viewport); only the nav's own internal spacing needs a nudge --- */
@media (min-width: 1201px) and (max-width: 1400px) {
    .site-nav__list { gap: clamp(.6rem, 1.2vw, 1rem); }
    .site-nav__link { font-size: .89rem; }
}

/* --- <=1200px: navigation becomes a full-width drop panel. Raised from
   the previous 980px cutoff when a sixth item (Digital Marketing) was
   added to the primary nav - six items plus a longer label no longer
   reliably fit the full desktop treatment down to 1024px, so that width
   (an explicit QA checkpoint) now gets the proven mobile panel instead of
   a cramped/overflowing desktop bar. --- */
@media (max-width: 1200px) {
    .site-header {
        --header-h: 3.85rem;
        background: var(--surface);
    }
    /* the centre grid column is empty at this width (nav is off-canvas,
       cta is hidden) - collapse its gap so brand and Menu sit flush at the
       two true edges instead of leaving a phantom middle gap */
    .site-header__inner { gap: 0; }
    .site-header__cta { display: none; }
    .js .nav-toggle { display: inline-flex; }

    .js .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: block;
        flex: none;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        /* same soft top-right wash used by every page hero - the open
           panel reads as part of the same system, not a generic dropdown */
        background:
            radial-gradient(34rem 18rem at 100% -12%, var(--brand-wash), transparent 62%),
            var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 26px 44px -24px rgba(11, 18, 32, .3);
        padding: 1.25rem var(--pad-x) 2rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .22s ease,
                    transform .28s cubic-bezier(.22, .61, .36, 1),
                    visibility 0s .3s;
    }
    .js .site-nav--open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
    }
    .js .site-nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
    .js .site-nav__link {
        display: block;
        padding: 1rem .9rem;
        margin-inline: -.9rem;
        border-radius: var(--radius-sm);
        font-size: 1.08rem;
        font-weight: 500;
        color: var(--ink);
        transition: background-color .14s ease, color .14s ease;
    }
    .js .site-nav__link:hover,
    .js .site-nav__link:focus-visible { background: var(--surface); }
    .js .site-nav__link[aria-current="page"] {
        color: var(--brand-strong);
        font-weight: 650;
        background: var(--brand-wash);
    }
    .js .site-nav__cta {
        display: inline-flex;
        width: 100%;
        margin-top: 1.5rem;
        min-height: 50px;
        font-size: 1rem;
    }
    /* Secondary action - visibly quieter than the CTA above it, and never
       styled like a sixth primary nav row. */
    .js .site-nav__pricing {
        display: block;
        margin-top: .9rem;
        text-align: center;
        color: var(--ink-soft);
        font-size: .85rem;
        font-weight: 500;
        text-decoration: none;
    }
    .js .site-nav__pricing:hover,
    .js .site-nav__pricing:focus-visible { color: var(--brand-strong); }

    html.nav-open,
    html.nav-open body { overflow: hidden; }
}

/* --- mobile menu: rows cascade in on open, a small premium touch on top
   of the panel's own fade/slide. Scoped to mobile + no-preference only, so
   nothing here can leave content stuck invisible for reduced-motion users
   or at desktop widths where .site-nav--open is never applied. --- */
@media (max-width: 1200px) and (prefers-reduced-motion: no-preference) {
    .js .site-nav--open .site-nav__item { animation: navRowIn .34s cubic-bezier(.22, .61, .36, 1) both; }
    .js .site-nav--open .site-nav__item:nth-child(1) { animation-delay: .05s; }
    .js .site-nav--open .site-nav__item:nth-child(2) { animation-delay: .09s; }
    .js .site-nav--open .site-nav__item:nth-child(3) { animation-delay: .13s; }
    .js .site-nav--open .site-nav__item:nth-child(4) { animation-delay: .17s; }
    .js .site-nav--open .site-nav__item:nth-child(5) { animation-delay: .21s; }
    .js .site-nav--open .site-nav__cta {
        animation: navRowIn .34s cubic-bezier(.22, .61, .36, 1) both;
        animation-delay: .24s;
    }
    .js .site-nav--open .site-nav__pricing {
        animation: navRowIn .34s cubic-bezier(.22, .61, .36, 1) both;
        animation-delay: .28s;
    }
}
@keyframes navRowIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* 6. Site footer --------------------------------------------------- */
.site-footer {
    background: var(--navy);
    color: #b9c6dd;
    padding-block: clamp(3rem, 7vw, 5rem) 0;
    font-size: .95rem;
}
.site-footer__inner { padding-bottom: 1.75rem; }

.site-footer__statement {
    max-width: 26ch;
    margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
    color: #fff;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    padding-bottom: clamp(2.25rem, 4.5vw, 3rem);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__col > p { margin: 0; color: #98a7c2; line-height: 1.6; }

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
    color: #fff;
    font-weight: 750;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.site-footer__mark { display: inline-flex; width: 24px; height: 24px; }
.site-footer__mark svg { width: 100%; height: 100%; }
.site-footer__mark rect { fill: #fff; }

.site-footer__heading {
    margin: 0 0 1rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer__col li a {
    color: #b9c6dd;
    text-decoration: none;
    transition: color .14s ease;
}
.site-footer__col li a:hover,
.site-footer__col li a:focus-visible { color: #fff; }

.site-footer__col--cta > p { margin: 0 0 1.25rem; color: #98a7c2; }
.site-footer__col--cta .btn { width: fit-content; }

.site-footer__bottom {
    padding-top: 1.75rem;
    color: #8496b4;
    font-size: .85rem;
}
.site-footer__bottom p { margin: 0; }

@media (max-width: 900px) {
    /* order: brand -> CTA -> Services -> Company */
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
    .site-footer__grid > :nth-child(1) { order: 1; grid-column: 1 / -1; }  /* brand */
    .site-footer__grid > :nth-child(4) { order: 2; grid-column: 1 / -1; }  /* CTA */
    .site-footer__grid > :nth-child(2) { order: 3; }                       /* Services */
    .site-footer__grid > :nth-child(3) { order: 4; }                       /* Company */
}
@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__statement { max-width: 22ch; }
}

/* 7. Flash messages --------------------------------------------- */
.alert {
    max-width: var(--container);
    margin: 1.25rem auto 0;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: .95rem;
}
.alert--success { background: #ecfaf1; border-color: #b8e6c8; color: #10502e; }
.alert--error { background: #fdecec; border-color: #f2c2c2; color: #7a1f1f; }


/* =========================================================================
   HOMEPAGE (V4) - signature digital-system experience
   -------------------------------------------------------------------------
   Contents:
     8.  Hero: shell + atmospheric background
     9.  Hero: copy
     10. Hero: the "digital engine" visual
     11. What we build (editorial chapters - no cards)
     12. From website to system (the signature progression)
     13. Services (featured product preview + supporting rows)
     14. Process + Automation light band
     15. How we work (calm execution line)
     16. Automation + AI (workflow-intelligence visual)
     17. Selected work (one featured preview + two supporting)
     18. Final CTA (the visual conclusion)
     19. Scaffold pages / honeypot / button arrow / eyebrow rule
     20. Shared decorative keyframes
     21. Scroll reveal
     22. Responsive
     23. Off-screen pause + reduced motion
   Motion is limited to transform / opacity / offset-distance / stroke-dashoffset
   / background-position. Everything decorative is switched off in section 23.
   ========================================================================= */

/* 8. Hero: shell + atmospheric background ---------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3rem, 6vw, 5.25rem);
}
.hero > .container { position: relative; z-index: 1; }

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* barely-there technical grid, faded toward the copy side */
    background-image:
        linear-gradient(to right, rgba(21, 96, 219, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(21, 96, 219, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 90% at 78% 6%, #000 20%, transparent 76%);
    mask-image: radial-gradient(120% 90% at 78% 6%, #000 20%, transparent 76%);
}
/* one large soft blue field sitting behind the engine */
.hero__field {
    position: absolute;
    right: -8%;
    top: -20%;
    width: 46rem;
    max-width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 96, 219, .13), rgba(47, 123, 255, .06) 42%, transparent 70%);
    filter: blur(6px);
}
.hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    opacity: .6;
    pointer-events: none;
}
.hero__glow--1 {
    width: 34rem; height: 34rem;
    right: -10rem; top: -14rem;
    background: radial-gradient(circle, rgba(21, 96, 219, .2), transparent 70%);
    animation: glowDrift 26s ease-in-out infinite alternate;
}
.hero__glow--2 {
    width: 22rem; height: 22rem;
    left: 40%; bottom: -14rem;
    background: radial-gradient(circle, rgba(20, 184, 212, .1), transparent 70%);
    animation: glowDrift 32s ease-in-out -8s infinite alternate;
}
@keyframes glowDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-14px, 16px, 0) scale(1.07); }
}

/* 9. Hero: copy --------------------------------------------------- */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.hero__kicker {
    margin: 0 0 1.35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
}
.hero__title {
    max-width: 17ch;
    margin-bottom: 1.15rem;
    font-size: clamp(2.2rem, 5.4vw, 3.7rem);
    letter-spacing: -0.02em;
}
.hero__title-accent {
    color: var(--brand-strong);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.hero__lead {
    max-width: 42ch;
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--ink-soft);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.9rem;
}
.hero__art {
    position: relative;
    justify-self: center;
    width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .hero__kicker  { animation: heroIn .7s .05s both cubic-bezier(.22, .61, .36, 1); }
    .hero__title   { animation: heroIn .8s .12s both cubic-bezier(.22, .61, .36, 1); }
    .hero__lead    { animation: heroIn .7s .28s both cubic-bezier(.22, .61, .36, 1); }
    .hero__actions { animation: heroIn .7s .40s both cubic-bezier(.22, .61, .36, 1); }
    .hero__title-accent { animation: heroUnderlineIn .55s .9s both ease-out; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroUnderlineIn {
    from { text-decoration-color: transparent; }
    to   { text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); }
}

/* 10. Hero: the "digital engine" visual -------------------------- */
.engine {
    position: relative;
    width: 100%;
    max-width: 33rem;
    margin-inline: auto;
    aspect-ratio: 480 / 460;
}
.engine__layer {
    position: absolute;
    inset: 0;
    transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0);
    will-change: transform;
}
.engine-bg,
.engine-sys {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.engine-bg *,
.engine-sys * { transform-box: fill-box; transform-origin: center; }

/* --- background: one quiet field ring --- */
.engine-halo {
    stroke: color-mix(in srgb, var(--brand) 15%, var(--line-strong));
    stroke-width: 1.2;
    fill: none;
    opacity: .45;
}

/* --- midground: one primary orbit, one data wire, particles, nodes --- */
.engine-orbit { fill: none; }
.engine-orbit--primary {
    stroke: color-mix(in srgb, var(--brand) 38%, var(--line-strong));
    stroke-width: 1.4;
    stroke-dasharray: 3 8;
    opacity: .7;
}
.engine-wire {
    stroke: color-mix(in srgb, var(--brand) 50%, var(--line-strong));
    stroke-width: 1.7;
    stroke-linecap: round;
    fill: none;
    opacity: .9;
}
.engine-spark {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--electric) 62%, transparent));
}
.engine-spark--orbit-1 { offset-path: path("M90 210 A150 96 0 1 1 390 210 A150 96 0 1 1 90 210"); animation: engineFlow 12s linear infinite; }
.engine-spark--orbit-2 { offset-path: path("M90 210 A150 96 0 1 1 390 210 A150 96 0 1 1 90 210"); animation: engineFlow 12s linear -6s infinite; }
.engine-spark--in { offset-path: path("M44 96 C 116 118 156 150 196 186"); animation: engineFlowShort 5.5s ease-in-out 1s infinite; }
@keyframes engineFlow {
    0%   { offset-distance: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@keyframes engineFlowShort {
    0%   { offset-distance: 0%;   opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@supports not (offset-path: path("M0 0 L1 1")) {
    .engine-spark,
    .engine-graph__dot,
    .wf-signal { display: none; }
}

.engine-node {
    fill: #fff;
    stroke: var(--brand);
    stroke-width: 2;
    animation: nodePulse 5.5s ease-in-out infinite;
}
.engine-nodes circle:nth-child(2) { animation-delay: -1.8s; }
.engine-nodes circle:nth-child(3) { animation-delay: -3.6s; }
.engine-node--in { stroke: var(--brand-strong); }
.engine-node--out {
    stroke: var(--accent);
    stroke-width: 2.4;
    fill: color-mix(in srgb, var(--accent) 16%, #fff);
}

/* --- the core: the unmistakable focal point --- */
.engine-core {
    animation: engineBreathe 9s ease-in-out infinite;
    filter: drop-shadow(0 18px 44px rgba(16, 42, 110, .28));
}
.engine-core__ring { fill: none; }
.engine-core__ring--outer {
    stroke: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    stroke-width: 1.3;
    stroke-dasharray: 3 8;
    opacity: .8;
    animation: engineSpin 64s linear infinite;
}
.engine-core__ring--mid {
    stroke: var(--brand);
    stroke-width: 1.8;
    opacity: .55;
}
.engine-core__disc {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 26%, var(--line-strong));
    stroke-width: 1.4;
}
.engine-core__orbit {
    transform-box: view-box;
    transform-origin: 240px 210px;
    animation: engineSpin 22s linear infinite;
}
.engine-core__sat {
    fill: var(--electric);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--electric) 60%, transparent));
}
/* small abstract system-core symbol: a hub with three linked nodes */
.engine-core__link {
    stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong));
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
}
.engine-core__pt { fill: var(--brand); opacity: .8; }
.engine-core__hub {
    fill: var(--brand-strong);
    animation: softPulse 3.8s ease-in-out infinite;
}
.engine-core__label {
    fill: color-mix(in srgb, var(--brand) 42%, #9aa8c2);
    font: 700 8px/1 var(--font);
    letter-spacing: .28em;
    text-anchor: middle;
}
@keyframes engineSpin { to { rotate: 360deg; } }
@keyframes engineBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* --- foreground: three quiet, subordinate signals --- */
.engine-card {
    position: absolute;
    margin: 0;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: var(--ink);
}
.engine-card--activity {
    right: 1%;
    bottom: 3%;
    width: 12.5rem;
    padding: .6rem .7rem .5rem;
    box-shadow: 0 16px 34px -20px rgba(16, 42, 110, .3);
}
.engine-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}
.engine-card__title { font-weight: 700; font-size: .72rem; }
.engine-card__pill {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .1rem .38rem;
    border-radius: 999px;
    background: rgba(18, 161, 80, .13);
    color: #0f7a3d;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.engine-card__live {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #12a150;
    animation: softPulse 2s ease-in-out infinite;
}
.engine-graph { display: block; width: 100%; height: auto; overflow: visible; }
.engine-graph * { transform-box: fill-box; transform-origin: center; }
.engine-graph__grid { stroke: var(--line-strong); stroke-width: 1; opacity: .7; }
.engine-graph__line {
    stroke: var(--electric);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: engineDraw 1.1s 1.15s ease-out forwards;
}
@keyframes engineDraw { to { stroke-dashoffset: 0; } }
.engine-graph__dot {
    fill: var(--electric);
    offset-path: path("M6 44 C 30 40 38 16 60 20 C 84 24 92 40 116 32 C 140 25 152 8 170 12");
    opacity: 0;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--electric) 55%, transparent));
    animation: engineDot 6s 2.4s ease-in-out infinite;
}
@keyframes engineDot {
    0%   { offset-distance: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

.engine-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .34rem .6rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 650;
    color: var(--ink-soft);
    box-shadow: 0 10px 22px -16px rgba(16, 42, 110, .24);
}
.engine-chip__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #12a150;
    flex: none;
}
.engine-chip__dot--busy { background: var(--brand); animation: softPulse 2s ease-in-out infinite; }
.engine-chip--auto { left: 1%; top: 7%; }
.engine-chip--ai   { right: 3%; top: 29%; }

@media (prefers-reduced-motion: no-preference) {
    .engine { animation: engineIn 1s .3s both ease-out; }
    .engine-card--activity { opacity: 0; animation: engineCardIn .55s 1.5s both ease-out; }
    .engine-chip--auto { opacity: 0; animation: engineCardIn .5s 1.7s both ease-out; }
    .engine-chip--ai   { opacity: 0; animation: engineCardIn .5s 1.85s both ease-out; }
}
@keyframes engineIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes engineCardIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* 11. What we build (editorial chapters) ------------------------- */
.build__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    list-style: none;
}
.build__row {
    padding: 0 clamp(1rem, 2.1vw, 1.9rem);
}
.build__row + .build__row { border-left: 1px solid var(--line); }
.build__row:first-child { padding-left: 0; }
.build__row:last-child { padding-right: 0; }
.build__index {
    display: block;
    font-size: clamp(2.5rem, 4.6vw, 3.7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: color-mix(in srgb, var(--brand) 30%, var(--surface-2));
    transition: color .3s ease;
}
.build__row:hover .build__index { color: var(--brand); }
.build__rule {
    display: block;
    width: 26px;
    height: 3px;
    margin: 1rem 0 1.15rem;
    border-radius: 3px;
    background: var(--line-strong);
    transition: width .4s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}
.build__row:hover .build__rule {
    width: 46px;
    background: linear-gradient(90deg, var(--brand), var(--electric));
}
.build__kicker {
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    transition: transform .3s ease;
}
.build__row:hover .build__kicker { transform: translateX(3px); }
.build__title { margin: 0 0 .55rem; font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.24; }
.build__desc { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }

/* 12. From website to system (signature progression) ------------ */
.chain {
    position: relative;
    isolation: isolate;
    background: var(--navy);
    color: #9fb0cd;
    overflow: hidden;
}
.chain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(130% 110% at 16% -10%, #000, transparent 70%);
    mask-image: radial-gradient(130% 110% at 16% -10%, #000, transparent 70%);
}
.chain::after {
    content: "";
    position: absolute;
    right: -14%;
    top: -30%;
    width: 40rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 123, 255, .14), transparent 62%);
    z-index: -1;
    pointer-events: none;
}
.chain__head h2 { color: #fff; max-width: 30ch; }
.chain .eyebrow { color: var(--electric); }
.chain .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }

.chain__track {
    list-style: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: clamp(2.75rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 2.75rem);
}
.chain__track::before,
.chain__track::after {
    content: "";
    position: absolute;
    left: 8.333%; top: 22px;
    height: 2px;
}
.chain__track::before { right: 8.333%; background: rgba(255, 255, 255, .12); }
.chain__track::after {
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--electric));
    box-shadow: 0 0 12px rgba(47, 123, 255, .45);
    transition: width 1.4s cubic-bezier(.22, .61, .36, 1);
}
.chain__track.is-active::after { width: 83.333%; }

.chain__stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    flex: 1;
    min-width: 0;
    padding-inline: .35rem;
    text-align: center;
}
.chain__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #101b30;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #7d8fb3;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.chain__tile svg { width: 22px; height: 22px; }
.chain__tile svg path,
.chain__tile svg rect { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chain__tile svg circle { fill: currentColor; stroke: none; }
.chain__track.is-active .chain__tile {
    color: #eaf1ff;
    border-color: color-mix(in srgb, var(--electric) 55%, transparent);
    background: color-mix(in srgb, var(--electric) 16%, #101b30);
    box-shadow: 0 0 0 4px rgba(47, 123, 255, .12);
}
.chain__track.is-active .chain__stage:nth-child(2) .chain__tile { transition-delay: .16s; }
.chain__track.is-active .chain__stage:nth-child(3) .chain__tile { transition-delay: .32s; }
.chain__track.is-active .chain__stage:nth-child(4) .chain__tile { transition-delay: .48s; }
.chain__track.is-active .chain__stage:nth-child(5) .chain__tile { transition-delay: .64s; }
.chain__track.is-active .chain__stage:nth-child(6) .chain__tile { transition-delay: .8s; }
.chain__text { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.chain__label { font-size: .95rem; font-weight: 650; color: #e4ebfa; }
.chain__note-sm { font-size: .78rem; line-height: 1.4; color: #8496b4; max-width: 16ch; }

.chain__spark {
    position: absolute;
    left: 8.333%; top: 18px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px 2px var(--electric);
    opacity: 0;
}
.chain__track.is-active .chain__spark {
    animation: chainSpark 2.6s cubic-bezier(.5, 0, .5, 1) 1.5s 2;
}
@keyframes chainSpark {
    0%   { left: 8.333%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: calc(91.667% - 9px); opacity: 0; }
}
.chain__note { max-width: 62ch; margin: 0; line-height: 1.75; }

/* 13. Services (featured preview + supporting rows) ------------- */
.svc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
}
.svc__featured {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff, var(--surface));
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc__featured:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
}
.svc__preview {
    display: block;
    margin-bottom: 1.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 40px -22px rgba(16, 42, 110, .32);
}
.svc__preview-bar {
    display: flex;
    gap: 5px;
    padding: 8px 11px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.svc__preview-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.svc__preview-body { display: grid; gap: 11px; padding: 13px; }
.svc__preview-nav { display: flex; align-items: center; gap: 9px; }
.svc__preview-nav > span { height: 6px; width: 32px; border-radius: 3px; background: var(--line-strong); }
.svc__preview-nav .svc__preview-cta { margin-left: auto; width: 50px; height: 17px; border-radius: 5px; background: var(--brand); }
.svc__preview-hero {
    display: grid;
    gap: 7px;
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-wash), #fff);
    border: 1px solid var(--line);
}
.svc__preview-h1 { height: 11px; width: 68%; border-radius: 3px; background: var(--brand-strong); }
.svc__preview-h2 { height: 7px; width: 48%; border-radius: 3px; background: var(--line-strong); }
.svc__preview-btn { height: 17px; width: 78px; border-radius: 5px; background: var(--brand); margin-top: 3px; }
.svc__preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.svc__preview-cards > span { height: 38px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.svc__f-meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.svc__num { font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--brand); }
.svc__f-tag {
    padding: .18rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.svc__f-title { margin: 0 0 .55rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.2; }
.svc__f-desc { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }
.svc__go { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-strong); font-weight: 700; }
.svc__arrow { display: inline-block; transition: transform .18s ease; }
.svc__featured:hover .svc__arrow { transform: translateX(4px); }

.svc__list { list-style: none; display: grid; }
.svc__item { border-top: 1px solid var(--line-strong); }
.svc__item:last-child { border-bottom: 1px solid var(--line-strong); }
.svc__item-link {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    padding: 1.35rem .2rem;
    text-decoration: none;
    color: var(--ink);
    transition: padding-left .22s ease;
}
.svc__item-link::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.svc__item-link:hover,
.svc__item-link:focus-visible { padding-left: .9rem; }
.svc__item-link:hover::before,
.svc__item-link:focus-visible::before { transform: scaleY(1); }
.svc__item .svc__num { padding-top: .12rem; }
.svc__item-body { display: grid; gap: .3rem; }
.svc__i-title { font-weight: 700; font-size: 1.06rem; }
.svc__i-desc { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.svc__item .svc__arrow { align-self: center; color: var(--brand); }
.svc__item-link:hover .svc__arrow,
.svc__item-link:focus-visible .svc__arrow { transform: translateX(4px); }

/* 14. Process + Automation light band -------------------------- */
.band {
    background: var(--surface);
    border-block: 1px solid var(--line);
}
.band .process,
.band .feature { background: transparent; }
.band .process { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.band .feature { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* 15. How we work (calm execution line) -----------------------
   Flex with gap:0 so the connecting line aligns exactly with the
   evenly-spaced checkpoints (markers sit at 1/8, 3/8, 5/8, 7/8). */
.steps {
    list-style: none;
    position: relative;
    display: flex;
    gap: 0;
}
.steps::before,
.steps::after {
    content: "";
    position: absolute;
    left: 12.5%; top: 13px;
    height: 1px;
}
.steps::before { right: 12.5%; background: var(--line-strong); }
.steps::after {
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--electric));
    transition: width 1.4s cubic-bezier(.22, .61, .36, 1);
}
.steps.is-active::after { width: 75%; }
.step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(.3rem, 1.2vw, .75rem);
    text-align: center;
}
.step__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-bottom: 1.15rem;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    transition: border-color .35s ease, box-shadow .35s ease;
}
.step__body { display: flex; flex-direction: column; align-items: center; }
.step__num { font-size: .72rem; font-weight: 700; color: var(--ink-soft); transition: color .35s ease; }
.steps.is-active .step:nth-child(2) .step__marker { transition-delay: .22s; }
.steps.is-active .step:nth-child(3) .step__marker { transition-delay: .44s; }
.steps.is-active .step:nth-child(4) .step__marker { transition-delay: .66s; }
.steps.is-active .step__marker {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-wash);
}
.steps.is-active .step__num { color: var(--brand-strong); }
.step__title {
    margin: 0 0 .4rem;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink);
}
.step__desc { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; max-width: 22ch; }

/* 16. Automation + AI (workflow-intelligence visual) ---------- */
@media (min-width: 961px) {
    .feature__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: clamp(1.75rem, 4vw, 3.25rem);
        align-items: center;
    }
}
/* stacked: keep the visual attached to - not detached from - the copy + CTA */
@media (max-width: 960px) {
    .feature__viz { margin-top: 2rem; }
}
.feature__body { max-width: 60rem; }
.feature__body > p { color: var(--ink-soft); max-width: 58ch; }
.feature__body > p:first-of-type { color: var(--ink); font-size: 1.08rem; }
.feature__points {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 1.6rem 0 1.9rem;
}
.feature__points li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    font-size: .98rem;
    color: var(--ink-soft);
}
.feature__points strong { color: var(--ink); }
.feature__ico {
    flex: none;
    position: relative;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line-strong));
}
.feature__ico::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px; height: 11px;
    border-radius: 3px;
    background: var(--brand);
}
.feature__points li:nth-child(2) .feature__ico::before { border-radius: 50%; }
.feature__points li:nth-child(3) .feature__ico::before { border-radius: 3px; background: var(--electric); }

.feature__viz { width: 100%; }
.feature__viz svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 330px;
    margin-inline: auto;
}
.feature__viz * { transform-box: fill-box; transform-origin: center; }
.wf-tag { fill: var(--ink-soft); font: 700 11px/1 var(--font); text-anchor: middle; }
.wf-tag--mid { fill: var(--brand-strong); }
.wf-wire { stroke: var(--line-strong); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.wf-wire--spine { stroke-width: 2; }
.wf-box { fill: #fff; stroke: var(--line-strong); stroke-width: 1.4; }
.wf-box--human { fill: var(--navy); stroke: var(--navy); }
.wf-glyph { fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-label { fill: var(--ink); font: 700 12px/1 var(--font); }
.wf-label--human { fill: #fff; }
.wf-sub { fill: #9fb2d2; font: 600 9px/1 var(--font); }
.wf-ai { fill: var(--brand); }
.wf-ai-ring { fill: none; stroke: var(--electric); stroke-width: 1.6; opacity: .6; animation: ring 3.8s ease-out infinite; }
.wf-person-head { fill: var(--accent); }
.wf-person-body { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.wf-stage--auto .wf-box { animation: wfActive 8s ease-in-out infinite; }
.wf-stage--ai .wf-box { animation: wfActive 8s ease-in-out 2s infinite; }
.wf-stage--ai .wf-ai { animation: wfPop 8s ease-in-out 2s infinite; }
@keyframes wfActive {
    0%, 26%, 100% { stroke: var(--line-strong); stroke-width: 1.4; }
    6%, 18%       { stroke: var(--electric); stroke-width: 2.2; }
}
@keyframes wfPop {
    0%, 26%, 100% { transform: scale(1); }
    12%           { transform: scale(1.16); }
}
.wf-signal {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--electric) 55%, transparent));
}
.wf-signal--task { offset-path: path("M150 34 C 150 52 150 56 150 74"); animation: wfMove 6s ease-in-out infinite; }
.wf-signal--data { offset-path: path("M150 128 V 158"); animation: wfMove 6s ease-in-out 2s infinite; }
.wf-signal--ai   { offset-path: path("M150 212 V 242"); animation: wfMove 6s ease-in-out 4s infinite; }
@keyframes wfMove {
    0%   { offset-distance: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* 17. Selected work (one featured + two supporting) ----------- */
.work__layout { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.work-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff, var(--surface));
}
.work-feature__body { display: flex; flex-direction: column; gap: .7rem; }
.work__support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
}
.work-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1rem 1.3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.work-card:hover,
.work-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
}
.work-feature { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* mini product screenshot */
.work-shot {
    display: block;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 38px -22px rgba(16, 42, 110, .3);
}
.work-shot__bar {
    display: flex;
    gap: 5px;
    padding: 7px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.work-shot__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.work-shot__view { aspect-ratio: 16 / 10; padding: 10px; overflow: hidden; }
.work-card .work-shot { margin-bottom: .35rem; }

/* store UI */
.ui-store { display: grid; grid-template-rows: auto auto 1fr; gap: 7px; height: 100%; }
.ui-store__nav { display: flex; align-items: center; gap: 6px; }
.ui-store__nav > span { height: 5px; width: 22px; border-radius: 3px; background: var(--line-strong); }
.ui-store__cart { margin-left: auto; width: 15px; height: 15px; border-radius: 4px; background: var(--brand); }
.ui-store__banner {
    border-radius: 6px;
    padding: 9px 10px;
    background: linear-gradient(120deg, var(--brand), var(--electric));
    display: grid;
    gap: 4px;
    align-content: center;
}
.ui-store__banner-t { height: 6px; width: 58%; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.ui-store__banner-b { height: 4px; width: 38%; border-radius: 2px; background: rgba(255, 255, 255, .6); }
.ui-store__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ui-card { display: grid; gap: 3px; align-content: start; }
.ui-card__img { height: 24px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.ui-card__t { height: 4px; width: 82%; border-radius: 2px; background: var(--line-strong); }
.ui-card__p { height: 4px; width: 44%; border-radius: 2px; background: var(--brand); }

/* app UI */
.ui-app { display: grid; grid-template-columns: 26% 1fr; gap: 7px; height: 100%; }
.ui-app__side {
    border-radius: 6px;
    background: var(--navy);
    padding: 7px;
    display: grid;
    gap: 5px;
    align-content: start;
}
.ui-app__side > span { height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.ui-app__side > span:first-child { background: var(--electric); width: 72%; }
.ui-app__main { display: grid; grid-template-rows: auto 1fr; gap: 7px; }
.ui-app__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-app__stats > span { height: 22px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.ui-app__stats > span:first-child { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.ui-app__rows { display: grid; gap: 5px; align-content: start; }
.ui-app__rows > span {
    position: relative;
    height: 10px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.ui-app__rows > span::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 4px;
    border-radius: 2px;
    background: var(--brand);
}

/* site + automation UI */
.ui-site { display: grid; grid-template-rows: auto auto auto 1fr; gap: 6px; height: 100%; }
.ui-site__nav { display: flex; align-items: center; gap: 6px; }
.ui-site__nav > span:first-child { width: 20px; height: 6px; border-radius: 2px; background: var(--brand); }
.ui-site__nav > span:last-child { margin-left: auto; width: 42px; height: 6px; border-radius: 2px; background: var(--line-strong); }
.ui-site__hero {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-wash), #fff);
    border: 1px solid var(--line);
}
.ui-site__hero > span:first-child { height: 7px; width: 64%; border-radius: 2px; background: var(--brand-strong); }
.ui-site__hero > span:last-child { height: 5px; width: 44%; border-radius: 2px; background: var(--line-strong); }
.ui-site__form {
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background: #fff;
}
.ui-site__field { height: 8px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.ui-site__send { height: 9px; width: 38%; border-radius: 3px; background: var(--brand); }
.ui-site__flow { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.ui-site__flow > span {
    position: relative;
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--brand);
}
.ui-site__flow > span + span::before {
    content: "";
    position: absolute;
    right: 100%; top: 50%;
    width: 8px; height: 1.5px;
    background: var(--brand);
}

.work-card__tag {
    align-self: flex-start;
    padding: .22rem .62rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.work-feature__body .work-card__tag { margin-bottom: .1rem; }
.work-card__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.work-feature__body .work-card__title { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.work-card__desc { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }
.work-feature__body .work-card__desc { font-size: .98rem; }
.work-card__link { margin-top: auto; padding-top: .5rem; font-size: .9rem; }
.work-card__link span { transition: transform .18s ease; display: inline-block; }
.work-card__link:hover span,
.work-feature:hover .work-card__link span { transform: translateX(4px); }

/* Real project screenshots: a committed .svg placeholder shows until a real
   .jpg (same base filename, from public/assets/img/portfolio/) is dropped
   in - no code change needed, same convention as the Portfolio page. */
.work-shot--relish-infotech .work-shot__view,
.work-shot--kerwal-energies .work-shot__view,
.work-shot--blue-okra .work-shot__view {
    padding: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}
.work-shot--relish-infotech .work-shot__view { background-image: url("../img/portfolio/relish-infotech.jpg"), url("../img/portfolio/relish-infotech.svg"); }
.work-shot--kerwal-energies .work-shot__view { background-image: url("../img/portfolio/kerwal-energies.jpg"), url("../img/portfolio/kerwal-energies.svg"); }
.work-shot--blue-okra .work-shot__view { background-image: url("../img/portfolio/blue-okra.jpg"), url("../img/portfolio/blue-okra.svg"); }

.work__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.work__more a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.work__more a span { display: inline-block; transition: transform .18s ease; }
.work__more a:hover span { transform: translateX(4px); }
.work__more a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* 18. Final CTA (visual conclusion) --------------------------- */
.closing__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #c7d3ea;
    border-radius: var(--radius);
    padding: clamp(2.75rem, 7vw, 4.75rem);
    text-align: center;
}
.closing__system {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: -1;
    pointer-events: none;
}
.closing__system svg { width: min(88%, 34rem); height: auto; opacity: .55; }
.closing__orbit { fill: none; stroke: rgba(47, 123, 255, .4); stroke-width: 1; stroke-dasharray: 3 7; animation: engineSpin 90s linear infinite; transform-box: fill-box; transform-origin: center; }
.closing__node { fill: var(--electric); opacity: .7; }
.closing__glow {
    position: absolute;
    left: 50%;
    top: -55%;
    width: 60%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 123, 255, .28), transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.closing__panel h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.closing__panel p { max-width: 52ch; margin-inline: auto; color: #b0c0dc; }
.closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
    margin-top: 1.9rem;
}

/* 19. Scaffold pages / honeypot / button arrow / eyebrow rule --- */
.page {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--section-y) var(--pad-x);
}
.page > p { color: var(--ink-soft); max-width: 60ch; }

/* Security honeypot - FUNCTIONAL, not cosmetic: the enquiry-form honeypot must
   stay in the DOM but invisible and out of the layout. Do not remove. */
.hp-field {
    position: absolute !important;
    left: -5000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.btn__arrow { display: inline-block; transition: transform .18s ease; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(3px); }

.eyebrow { display: flex; align-items: center; }
.eyebrow::before {
    content: "";
    flex: none;
    width: 26px;
    height: 2px;
    margin-right: .7rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* 20. Shared decorative keyframes ---------------------------- */
@keyframes nodePulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes ring {
    0%   { transform: scale(.5); opacity: .7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* 21. Scroll reveal ---------------------------------------- */
html.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
                transform .65s cubic-bezier(.22, .61, .36, 1);
}
html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

html.reveal-ready [data-reveal="group"] {
    opacity: 1;
    transform: none;
    transition: none;
}
html.reveal-ready [data-reveal="group"] > * {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
}
html.reveal-ready [data-reveal="group"].is-revealed > * { opacity: 1; transform: none; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(2) { transition-delay: .06s; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(3) { transition-delay: .12s; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(4) { transition-delay: .18s; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(5) { transition-delay: .24s; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(6) { transition-delay: .30s; }
html.reveal-ready [data-reveal="group"].is-revealed > *:nth-child(n+7) { transition-delay: .36s; }

/* Lighthouse-reported contrast fix (Accessibility V2), scoped to the three
   specific data-reveal="group" containers behind the 8 reported failures:
   .steps (How we work), .process .section__head (its eyebrow + h2), and
   .work__layout (Selected work). Every declared text colour involved
   already clears WCAG AA at full opacity (verified: ink-soft/surface
   7.71:1, brand/surface 5.20:1, brand-strong/brand-wash 8.05:1) - the
   reported failures happen because this shared reveal starts every group
   member at opacity:0, and an automated snapshot of this below-the-fold
   content taken before it scrolls into view (and its own
   IntersectionObserver reveal fires) measures the text blended toward its
   own background, which mathematically collapses contrast toward 1:1 as
   opacity drops. Rather than touching the shared rule above (used by
   every page), the floor is raised only for these three containers, to
   .95 - comfortably above the .917 worst case across the colours
   involved. The slide/scale motion is untouched; only the opacity range
   narrows from 0-1 to .95-1, so the reveal stays visible while
   guaranteeing AA contrast at every point in the transition, including
   before a real user has scrolled to it. */
html.reveal-ready .steps[data-reveal="group"]:not(.is-revealed) > *,
html.reveal-ready .process .section__head[data-reveal="group"]:not(.is-revealed) > *,
html.reveal-ready .work__layout[data-reveal="group"]:not(.is-revealed) > * {
    opacity: .95;
}

/* 22. Responsive ------------------------------------------- */
@media (max-width: 1180px) {
    .chain__note-sm { display: none; }
}

@media (max-width: 1040px) {
    .build__list { grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.75rem, 4vw, 3rem); }
    .build__row,
    .build__row + .build__row { padding: 1.35rem 0 0; border-left: 0; border-top: 2px solid var(--line-strong); }

    .svc__layout { grid-template-columns: 1fr; }
    .work-feature { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    /* stacked hero: message -> action -> visual, no wide gap before the engine */
    .hero__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
    .hero__body { max-width: 38rem; }
    .hero__art { max-width: 24rem; margin-inline: auto; }
    .hero__title { max-width: 18ch; }

    /* process becomes a vertical rail */
    .steps { flex-direction: column; }
    .steps::before { left: 13px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; }
    .steps::after { left: 13px; right: auto; top: 14px; width: 1px; height: 0; }
    .steps.is-active::after { width: 1px; height: calc(100% - 28px); transition: height 1.4s cubic-bezier(.22, .61, .36, 1); }
    .step {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 0 0 2.2rem;
        text-align: left;
    }
    .step:last-child { padding-bottom: 0; }
    .step__marker { flex: none; margin-bottom: 0; }
    .step__body { align-items: flex-start; }
    .step__desc { max-width: none; }

    /* website-to-system becomes a vertical progression */
    .chain__track { flex-direction: column; align-items: stretch; gap: 1.4rem; }
    .chain__track::before { left: 23px; right: auto; top: 23px; bottom: 23px; width: 2px; height: auto; }
    .chain__track::after { left: 23px; right: auto; top: 23px; width: 2px; height: 0; }
    .chain__track.is-active::after { width: 2px; height: calc(100% - 46px); transition: height 1.4s cubic-bezier(.22, .61, .36, 1); }
    .chain__stage { flex-direction: row; align-items: center; gap: 1rem; padding-inline: 0; text-align: left; }
    .chain__text { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .chain__note-sm { display: block; max-width: none; }
    .chain__spark { left: 19px; top: 18px; }
    .chain__track.is-active .chain__spark { animation: chainSparkV 2.6s cubic-bezier(.5, 0, .5, 1) 1.5s 2; }
}

@media (max-width: 820px) {
    .work__support { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .build__list { grid-template-columns: 1fr; }
    .hero__actions .btn,
    .closing__actions .btn { flex: 1 1 auto; }

    /* tighten the mobile hero vertically - message, action, visual */
    .hero { padding-block: 2rem 2.5rem; }
    .hero__kicker { margin-bottom: .9rem; }
    .hero__title { margin-bottom: .85rem; }
    .hero__lead { font-size: 1.02rem; }
    .hero__actions { margin-top: 1.4rem; gap: .65rem; }

    /* editorial numbers: strong marker, not dominant, on a single column */
    .build__list { gap: 1.75rem; }
    .build__row,
    .build__row + .build__row { padding-top: 1.1rem; }
    .build__index { font-size: 1.85rem; }
    .build__rule { margin: .7rem 0 .85rem; }
    .build__kicker { margin-bottom: .35rem; }
    .build__title { font-size: 1.15rem; }
}

@keyframes chainSparkV {
    0%   { top: 18px; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: calc(100% - 27px); opacity: 0; }
}

/* ---------------------------------------------------------------------
 * Dedicated compact hero-engine composition for the stacked hero (<=960px).
 *
 * One vertical stack, all centred:
 *     Automation pill
 *        v  (~24px)
 *     LARGE core + orbital rings + SYSTEM label   <- primary focal point
 *        v  (~24px breathing space)
 *     SMALL System Activity card                  <- clearly subordinate
 *
 * How it stays correct without magic numbers:
 *   - The core SVG is top-aligned (preserveAspectRatio="xMidYMin" in the
 *     markup) and nudged up 4% to trim the empty band above the orbit.
 *   - .engine is wider than before (the visual scales 1:1 with its width)
 *     but the aspect-ratio is tuned to the now-smaller card, so the SVG is
 *     always WIDTH-constrained: every SVG y maps to y*(W/480) px from the
 *     engine top. The orbit bottom always lands above the card, which is
 *     docked at bottom:4%.
 *   - overflow:hidden clips the trimmed SVG band and any stray filter bleed.
 *
 * The card can no longer intersect the core, inner ring, mid ring, outer
 * orbit or SYSTEM label at 375 / 390 / 430 / 600 / 768 / 960 (verified
 * gaps ~20-31px above and below the core at every width).
 * ------------------------------------------------------------------ */
@media (max-width: 960px) {
    /* engine ~+20% larger than before; the min() keeps >=0.75rem side margin */
    .engine {
        max-width: min(23rem, 100% - 1.5rem);
        aspect-ratio: 1 / 1.015;
        overflow: hidden;
    }
    .engine-chip--ai,
    .engine-halo,
    .engine-spark--orbit-2,
    .engine-spark--in,
    .engine-wire,
    .engine-nodes { display: none; }

    /* core SVG: top-aligned, pulled up to trim the empty viewBox top band */
    .engine-sys { top: -4%; bottom: auto; }

    /* Automation pill: centred header, sitting just above the enlarged core */
    .engine-chip--auto {
        left: 0; right: 0;
        margin-inline: auto;
        width: max-content;
        top: 6%;
    }

    /* System Activity card: centred, smaller footprint, docked clear of the core */
    .engine-card--activity {
        top: auto;
        bottom: 4%;
        left: 0; right: 0;
        margin-inline: auto;
        width: 65%;
        padding: .42rem .55rem .4rem;
    }
    .engine-card--activity .engine-card__head { margin-bottom: .22rem; }
}
@media (max-width: 400px) {
    .engine { max-width: min(20rem, 100% - 1.25rem); }
    .engine-card--activity { padding: .4rem .5rem .36rem; }
    .engine-card__title { font-size: .68rem; }
}

/* 23. Off-screen pause + reduced motion -------------------- */
.engine.is-paused *,
.hero__bg.is-paused,
.hero__bg.is-paused .hero__glow,
.feature__viz.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .hero__glow,
    .hero__kicker,
    .hero__title,
    .hero__lead,
    .hero__actions,
    .engine,
    .engine *,
    .feature__viz * {
        animation: none !important;
        transition: none !important;
    }
    .engine__layer { transform: none !important; }
    .engine-graph__line { stroke-dashoffset: 0 !important; }
    .engine-graph__dot,
    .engine-spark,
    .wf-signal,
    .chain__spark { opacity: 0 !important; }

    .btn:hover,
    .build__row:hover .build__index,
    .work-card:hover,
    .work-feature:hover,
    .svc__featured:hover { transform: none; }
    .work__more a:hover span { transform: none; }

    html.reveal-ready [data-reveal],
    html.reveal-ready [data-reveal="group"] > * {
        opacity: 1 !important;
        transform: none !important;
        transition-duration: 1ms !important;
    }

    /* progression lines: show the meaning even without motion */
    .chain__track::after { width: 83.333% !important; }
    .steps::after { width: 75% !important; }
    .chain__tile { color: #eaf1ff !important; border-color: color-mix(in srgb, var(--electric) 55%, transparent) !important; }
    .step__marker { border-color: var(--brand) !important; box-shadow: 0 0 0 4px var(--brand-wash) !important; }
    .step__num { color: var(--brand-strong) !important; }

    .btn:hover .btn__arrow,
    .btn:focus-visible .btn__arrow,
    .svc__arrow,
    .work-card__link span { transform: none !important; }
    .hero__title-accent { text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent) !important; }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
    .chain__track::after { width: 2px !important; height: calc(100% - 46px) !important; left: 23px !important; }
    .steps::after { width: 1px !important; height: calc(100% - 28px) !important; left: 13px !important; }
}


/* =========================================================================
   COMMERCIAL PAGES  (24)
   -------------------------------------------------------------------------
   Services, Website Packages, Pricing, About, AI & Automation, Portfolio and
   the enquiry form. Reuses the homepage design tokens, typography, buttons,
   eyebrow rule and the [data-reveal] scroll-reveal system - no new motion
   framework, no new colours.
   ========================================================================= */

/* 24.1 Page shell + hero ------------------------------------------------- */
.page-wrap { display: block; }

.page-hero {
    position: relative;
    background:
        radial-gradient(52rem 26rem at 82% -20%, var(--brand-wash), transparent 62%),
        var(--bg);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.5rem, 6vw, 4.25rem);
}
.page-hero--tight { padding-block: clamp(2rem, 4.5vw, 3rem); }
.page-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 3.1rem);
    letter-spacing: -0.02em;
    max-width: 22ch;
}
.page-hero__lead {
    margin: 0;
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.65;
}
.page-hero__lead strong { color: var(--ink); }
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.8rem;
}

/* light "wash" sections, matching the homepage band treatment */
.about-flow,
.ai-examples,
.tier-section {
    background: var(--surface);
    border-block: 1px solid var(--line);
}

/* 24.2 (retired) - the /services text-card grid was replaced by the visual
   showcase in section 25. The scoped-project tiers still use .tier-card below. */

/* 24.3 Tier cards (scoped "from" projects) --------------------------- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.tier-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tier-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
}
.tier-card__name { margin: 0 0 .3rem; font-size: 1.18rem; }
.tier-card__price {
    margin: 0 0 .7rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-strong);
    letter-spacing: -0.01em;
}
.tier-card__positioning { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.tier-card__list {
    list-style: none;
    margin: 0 0 .9rem;
    display: grid;
    gap: .35rem;
}
.tier-card__list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.5;
}
.tier-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.tier-card__note {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .85rem;
    line-height: 1.5;
}
.tier-card__cta { align-self: flex-start; margin-top: auto; font-size: .92rem; color: var(--brand-strong); }
.tier-card__cta span { display: inline-block; transition: transform .18s ease; }
.tier-card:hover .tier-card__cta span { transform: translateX(4px); }

/* 24.4 Flow (Discover -> Build -> Launch -> Grow) ------------------- */
.flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}
.flow__step {
    position: relative;
    padding-top: 1.25rem;
    border-top: 3px solid var(--line-strong);
}
.flow__num {
    display: block;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--brand) 30%, var(--surface-2));
}
.flow__title {
    margin: .8rem 0 .4rem;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
}
.flow__step p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }

/* 24.5 Package cards ------------------------------------------------- */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
    align-items: start;
}
.pkg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
}
.pkg-card--popular {
    border-color: var(--brand);
    box-shadow: var(--shadow-blue);
}
.pkg-card__badge {
    align-self: flex-start;
    margin: 0 0 .9rem;
    padding: .28rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pkg-card__name { margin: 0 0 .2rem; font-size: 1.2rem; }
.pkg-card__price {
    margin: 0 0 .5rem;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.pkg-card__positioning { margin: 0 0 .5rem; color: var(--brand-strong); font-weight: 650; font-size: .98rem; }
.pkg-card__summary { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.pkg-card__cta { width: 100%; }
.pkg-card__features {
    list-style: none;
    margin: 1.25rem 0 0;
    display: grid;
    gap: .5rem;
}
.pkg-card__features li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.5;
}
.pkg-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: 700;
}
.pkg-card__group {
    padding-left: 0 !important;
    margin-top: .3rem;
    color: var(--ink) !important;
    font-weight: 700;
}
.pkg-card__group::before { content: none !important; }
.pkg-card__timeline {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .9rem;
}
.pkg-card__timeline strong { color: var(--ink); }

/* 24.6 Comparison -------------------------------------------------- */
.cmp__title {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.cmp__scroll {
    overflow-x: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}
.cmp__scroll:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cmp__table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    font-size: .92rem;
}
.cmp__table th,
.cmp__table td {
    padding: .8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.cmp__table thead th {
    background: var(--surface);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--line-strong);
}
.cmp__table tbody th {
    font-weight: 600;
    color: var(--ink);
    width: 34%;
}
.cmp__table td { color: var(--ink-soft); }
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: none; }
.cmp__col--popular { background: var(--brand-wash); }
.cmp__yes { color: var(--brand); font-weight: 700; font-size: 1.05rem; }
.cmp__no { color: var(--line-strong); }

.cmp__cards { display: none; }
.cmp-card {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.cmp-card + .cmp-card { margin-top: 1rem; }
.cmp-card__name {
    margin: 0;
    padding: .9rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line-strong);
    font-size: 1.05rem;
}
.cmp-card__list { margin: 0; }
.cmp-card__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
}
.cmp-card__row:last-child { border-bottom: none; }
.cmp-card__row dt { color: var(--ink); font-weight: 600; font-size: .9rem; }
.cmp-card__row dd { margin: 0; text-align: right; color: var(--ink-soft); font-size: .9rem; }

/* 24.7 Pricing terms -------------------------------------------- */
.terms__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.25rem;
}
.terms__item {
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
}
.terms__k {
    margin: 0 0 .35rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}
.terms__item p:last-child { margin: 0; color: var(--ink); }
.terms__note {
    margin: 0;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.6;
}
.terms-section__more { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: .95rem; }

/* 24.8 FAQ ---------------------------------------------------- */
.faq { max-width: 46rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
    position: relative;
    display: block;
    padding: 1.1rem 2.5rem 1.1rem 0;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--brand);
    transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.faq__a { padding: 0 2.5rem 1.2rem 0; }
.faq__a p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* 24.9 Prose + misc lists ------------------------------------ */
.prose { max-width: 62rem; }
.prose p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; max-width: 62ch; }
.prose p strong { color: var(--ink); }
.prose__list {
    list-style: none;
    display: grid;
    gap: .7rem;
    margin: 0;
}
.prose__list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 62ch;
}
.prose__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--brand);
}
.prose__list li strong { color: var(--ink); }

.feature-list {
    list-style: none;
    display: grid;
    gap: .85rem;
    margin: 0;
    max-width: 46rem;
}
.feature-list li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}
.feature-list__mark {
    flex: none;
    margin-top: .35rem;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--brand);
}

/* 24.10 Closing CTA band (shared) --------------------------- */
.cta-band__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #c7d3ea;
    border-radius: var(--radius);
    padding: clamp(2.5rem, 7vw, 4rem);
    text-align: center;
}
.cta-band__glow {
    position: absolute;
    left: 50%;
    top: -55%;
    width: 60%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 123, 255, .28), transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.cta-band__panel h2 { color: #fff; max-width: 24ch; margin-inline: auto; }
.cta-band__panel p { max-width: 52ch; margin-inline: auto; color: #b0c0dc; }
.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
    margin-top: 1.7rem;
}

/* 24.11 (retired) - the enquiry form's own visual system moved to the
   dedicated "Start a Project" experience in section 29 (.con-*). */

/* 24.12 Responsive ------------------------------------- */
@media (max-width: 1040px) {
    .svc-list__grid { grid-template-columns: 1fr; }
    .tier-grid { grid-template-columns: 1fr; }
    .flow { grid-template-columns: repeat(2, 1fr); }
    .pkg-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 860px) {
    /* below this the 3-column table would need side-scrolling on a phone -
       switch to one readable card per package instead */
    .cmp__scroll { display: none; }
    .cmp__cards { display: block; }
}
@media (max-width: 620px) {
    .flow { grid-template-columns: 1fr; }
    .terms__grid { grid-template-columns: 1fr; }
    .page-hero__actions .btn { flex: 1 1 auto; }
    .cta-band__actions .btn { flex: 1 1 auto; }
}

/* 24.13 Reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .svc-card:hover,
    .tier-card:hover,
    .pkg-card:hover { transform: none; }
    .svc-card:hover .svc-card__cta span,
    .tier-card:hover .tier-card__cta span { transform: none; }
}



/* =========================================================================
   25. SERVICES PAGE - visual showcase (V2)
   -------------------------------------------------------------------------
   One coherent BlueAquila visual system across the hero and all five
   service previews: shared nodes, dashed connectors, electric/cyan signals,
   a faint technical grid + restrained glow behind each visual, one shadow
   language and one signal speed.

   Every selector is namespaced (.svc-page / .svc-hero / .svc-sys / .svc-show
   / .svc-viz / .svc-journey / .bw / .shop / .dash / .flowviz / .health /
   .svc-start / .svc-flow) and NONE touch the frozen homepage. The visual
   system tokens below are scoped to .svc-page only. Motion reuses the
   [data-reveal] / [data-process] hooks and the .svc-viz / .svc-hero__viz
   entries already in the main.js off-screen pause list.
   ========================================================================= */

/* 25.0 Scoped visual-system tokens (Services page only) ------------- */
.svc-page {
    --sv-node: var(--electric);
    --sv-line: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
    --sv-grid: rgba(21, 96, 219, .07);
    --sv-glow: rgba(47, 123, 255, .2);
    --sv-radius: 14px;
    --sv-shadow: 0 34px 66px -32px rgba(16, 42, 110, .34);
    --sv-signal-dur: 5s;
    --jrn-gap: clamp(1.15rem, 2.6vw, 1.65rem);   /* connector height: visual -> journey rail */
}

/* 25.1 Hero ----------------------------------------------------------- */
.svc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 3.5vw, 2.3rem);
    background: var(--bg);
}
.svc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 24rem at 88% -10%, var(--brand-wash), transparent 60%),
        linear-gradient(to bottom, rgba(21, 96, 219, .04) 1px, transparent 1px) 0 0 / 100% 46px;
    -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 80%);
    mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 80%);
}
.svc-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(1.5rem, 5vw, 3.75rem);
    align-items: center;
}
.svc-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 3.05rem);
    letter-spacing: -0.02em;
    max-width: 18ch;
}
.svc-hero__lead {
    margin: 0;
    max-width: 52ch;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.65;
}
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }

.svc-hero__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
.svc-hero__chips a {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink-soft);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.svc-hero__chips a:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-wash); }

/* 25.1b Hero "Digital Services System" diagram --------------------- */
.svc-hero__viz { justify-self: center; width: 100%; max-width: 27.5rem; }
.svc-sys { display: block; width: 100%; height: auto; overflow: visible; }
.svc-sys__core-ring,
.svc-sys__node circle { transform-box: fill-box; transform-origin: center; }

.svc-sys__orbit { fill: none; stroke: var(--sv-line); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: .5; }
.svc-sys__spoke { stroke: var(--sv-line); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }

.svc-sys__node circle {
    fill: #fff;
    stroke: var(--sv-node);
    stroke-width: 2;
    animation: svcNodePulse 5s ease-in-out infinite;
}
.svc-sys__node--io circle { fill: color-mix(in srgb, var(--sv-node) 14%, #fff); }
.svc-sys__node:nth-of-type(2) circle { animation-delay: -1.2s; }
.svc-sys__node:nth-of-type(3) circle { animation-delay: -2.5s; }
.svc-sys__node:nth-of-type(4) circle { animation-delay: -3.7s; }

.svc-sys__core-ring {
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.5;
    stroke-dasharray: 3 6;
    opacity: .5;
    animation: svcSysSpin 60s linear infinite;
}
.svc-sys__core-disc {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 14px rgba(16, 42, 110, .2));
}
/* abstract digital-system hub: an inner ring, three linked points and a
   quietly pulsing central node - no letter, logo or text. */
.svc-sys__core-inner { fill: none; stroke: color-mix(in srgb, var(--brand) 34%, var(--line-strong)); stroke-width: 1; opacity: .4; }
.svc-sys__core-link { fill: none; stroke: color-mix(in srgb, var(--brand) 44%, var(--line-strong)); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.svc-sys__core-pt { fill: var(--brand); opacity: .65; }
.svc-sys__core-hub { fill: var(--brand-strong); animation: svcHubPulse 3.8s ease-in-out infinite; }

.svc-sys__lbl {
    fill: var(--ink-soft);
    font: 700 9.5px/1 var(--font);
    letter-spacing: .06em;
    text-anchor: middle;
}

.svc-sys__sig { fill: var(--sv-node); opacity: 0; filter: drop-shadow(0 0 5px var(--sv-node)); }
.svc-sys__sig--in  { animation: svcSysIn 6s ease-in-out infinite; }
.svc-sys__sig--out { animation: svcSysOut 6s ease-in-out infinite; }
@keyframes svcSysIn {
    0% { transform: translate(60px, 150px); opacity: 0; }
    5% { opacity: 1; }
    36% { opacity: 1; transform: translate(190px, 150px); }
    41%, 100% { opacity: 0; transform: translate(190px, 150px); }
}
@keyframes svcSysOut {
    0%, 43% { opacity: 0; transform: translate(190px, 150px); }
    49% { opacity: 1; }
    80% { opacity: 1; transform: translate(320px, 150px); }
    85%, 100% { opacity: 0; transform: translate(320px, 150px); }
}
@keyframes svcSysSpin { to { rotate: 360deg; } }
@keyframes svcHubPulse { 0%, 100% { opacity: .9; } 50% { opacity: .5; } }
@keyframes svcNodePulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes svcPing { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(18, 161, 80, .4); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(18, 161, 80, 0); } }

/* 25.2 Showcase section shell -------------------------------------- */
.svc-show { position: relative; overflow: hidden; background: var(--bg); }
.svc-show--01,
.svc-show--03,
.svc-show--05 { background: var(--surface); border-block: 1px solid var(--line); }
.svc-show--04 { background: var(--navy); color: #c7d3ea; border-block: 1px solid var(--navy-soft); }

.svc-show__inner {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.22fr);
    grid-template-areas: "head media" "detail media";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.3rem;
    align-items: start;
}
.svc-show--flip .svc-show__inner {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .82fr);
    grid-template-areas: "media head" "media detail";
}
.svc-show__head   { grid-area: head; }
.svc-show__media  { grid-area: media; align-self: center; }
.svc-show__detail { grid-area: detail; }

.svc-show__num {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--brand) 26%, var(--surface-2));
}
.svc-show__title { margin: .5rem 0 .6rem; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.svc-show__desc { margin: 0; max-width: 40ch; color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; }

.svc-show__meta { display: grid; gap: 1.1rem; margin-bottom: 1.4rem; }
.svc-show__k {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}
.svc-show__mv { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; max-width: 42ch; }
.svc-show__chips-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}
.svc-show__chips-list li {
    padding: .34rem .72rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    color: var(--brand-strong);
    font-size: .82rem;
    font-weight: 600;
}
.svc-show__price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
}
.svc-show__price-k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.svc-show__price strong { color: var(--ink); font-size: 1.35rem; }
.svc-show__cta { align-self: flex-start; }
.svc-show__more { align-self: flex-start; margin-top: .9rem; }

/* dark section (04) overrides */
.svc-show--dark .svc-show__num { color: color-mix(in srgb, var(--electric) 42%, var(--navy-soft)); }
.svc-show--dark .svc-show__title { color: #fff; }
.svc-show--dark .svc-show__desc { color: #aebdd6; }
.svc-show--dark .svc-show__k { color: var(--electric); }
.svc-show--dark .svc-show__mv { color: #9fb0cd; }
.svc-show--dark .svc-show__chips-list li {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    color: #cdd9ee;
}
.svc-show--dark .svc-show__price { color: #9fb0cd; border-color: rgba(255, 255, 255, .14); }
.svc-show--dark .svc-show__price strong { color: #fff; }

/* 25.3 Visual shell + shared "system" backdrop ------------------- */
.svc-viz {
    position: relative;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
}
.svc-viz::before {
    content: "";
    position: absolute;
    inset: -6% -4%;
    z-index: 0;
    border-radius: 24px;
    background:
        radial-gradient(58% 48% at 50% 42%, var(--sv-glow), transparent 72%),
        linear-gradient(var(--sv-grid) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, var(--sv-grid) 1px, transparent 1px) 0 0 / 24px 24px;
    -webkit-mask-image: radial-gradient(74% 66% at 50% 46%, #000, transparent 82%);
    mask-image: radial-gradient(74% 66% at 50% 46%, #000, transparent 82%);
}
.svc-show--dark .svc-viz::before {
    background:
        radial-gradient(58% 48% at 50% 42%, rgba(47, 123, 255, .28), transparent 72%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px;
}
.svc-viz > * { position: relative; z-index: 1; }

.svc-viz__win {
    border: 1px solid var(--line-strong);
    border-radius: var(--sv-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sv-shadow);
}
.svc-show--dark .svc-viz__win { border-color: rgba(255, 255, 255, .12); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .55); }
.svc-viz__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .85rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.svc-viz__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.svc-viz__url {
    margin-left: .5rem;
    padding: .16rem .6rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-size: .68rem;
    color: var(--ink-soft);
}
.svc-viz__live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0f7a3d;
}
.svc-viz__ping { width: 6px; height: 6px; border-radius: 50%; background: #12a150; animation: svcPing 2.2s ease-in-out infinite; }
.svc-viz__screen { padding: 1.15rem; }
.svc-viz__cap { margin: .8rem 0 0; text-align: center; font-size: .74rem; color: var(--ink-soft); }
.svc-show--dark .svc-viz__cap { color: #8496b4; }
.svc-viz__demo {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .14rem .5rem;
    border-radius: var(--radius-pill);
    background: rgba(11, 18, 32, .62);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.svc-viz__tag {
    position: absolute;
    padding: .3rem .62rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line-strong));
    color: var(--brand-strong);
    font-size: .68rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.svc-viz__tag--a { top: 7%;  left: -4%; }
.svc-viz__tag--b { top: 44%; right: -4%; }
.svc-viz__tag--c { bottom: 5%; left: 3%; }

/* 25.3b Shared business-journey rail ---------------------------
   Reads as the process the visual above it produces: a dashed connector
   drops from the preview into the first step, then a signal travels the
   whole rail. Same dashed line, node and signal language as everywhere. */
.svc-journey {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: var(--jrn-gap);
    padding: 0 8px;
}
.svc-journey::before {
    content: "";
    position: absolute;
    left: 34px;
    right: 18px;
    top: 50%;
    height: 0;
    margin-top: -1px;
    border-top: 2px dashed var(--sv-line);
    opacity: .55;
}
.svc-journey::after {
    content: "";
    position: absolute;
    left: 33px;
    top: calc(-1 * var(--jrn-gap));
    width: 2px;
    height: calc(var(--jrn-gap) + 50%);
    background: repeating-linear-gradient(var(--sv-line) 0 3px, transparent 3px 7px);
    opacity: .5;
}
.svc-journey__node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .34rem .64rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--line-strong);
    font-size: .66rem;
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
}
.svc-journey__node--end {
    border-color: color-mix(in srgb, var(--brand) 48%, var(--line-strong));
    background: var(--brand-wash);
    color: var(--brand-strong);
}
.svc-journey__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sv-node);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-node) 16%, transparent);
}
.svc-journey__signal {
    position: absolute;
    left: 34px;
    top: 50%;
    z-index: 2;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--sv-node);
    box-shadow: 0 0 12px var(--sv-node);
    opacity: 0;
    animation: svcJourney var(--sv-signal-dur) cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes svcJourney {
    0%   { left: 34px; top: calc(-1 * var(--jrn-gap) - 3px); opacity: 0; }
    7%   { opacity: 1; }
    18%  { left: 34px; top: 50%; opacity: 1; }
    90%  { left: calc(100% - 26px); top: 50%; opacity: 1; }
    100% { left: calc(100% - 26px); top: 50%; opacity: 0; }
}

/* 25.4 Business Websites visual (.bw) ---------------------------- */
.bw { display: grid; gap: .8rem; }
.bw__nav { display: flex; align-items: center; gap: .5rem; }
.bw__logo { width: 28px; height: 10px; border-radius: 3px; background: var(--brand); }
.bw__link { width: 24px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.bw__navcta { margin-left: auto; width: 44px; height: 16px; border-radius: 5px; background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.bw__hero {
    display: grid;
    gap: .5rem;
    padding: 1.15rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-wash), #fff);
    border: 1px solid var(--line);
}
.bw__h1 { height: 11px; width: 78%; border-radius: 3px; background: var(--brand-strong); }
.bw__h1--2 { width: 52%; }
.bw__sub { height: 6px; width: 62%; border-radius: 3px; background: var(--line-strong); }
.bw__cta {
    align-self: start;
    margin-top: .3rem;
    padding: .38rem .8rem;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    animation: bwPulse 2.8s ease-in-out infinite;
}
.bw__blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.bw__block { height: 48px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.bw__foot { display: flex; align-items: center; gap: .5rem; }
.bw__pin { width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); }
.bw__meta { height: 6px; width: 42px; border-radius: 3px; background: var(--line-strong); }
@keyframes bwPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 96, 219, .35); } 50% { box-shadow: 0 0 0 6px rgba(21, 96, 219, 0); } }
html.reveal-ready .svc-show__media .bw__hero > * { opacity: 0; transform: translateY(7px); transition: opacity .45s ease, transform .45s ease; }
html.reveal-ready .svc-show__media.is-revealed .bw__hero > * { opacity: 1; transform: none; }
html.reveal-ready .svc-show__media.is-revealed .bw__hero > *:nth-child(2) { transition-delay: .08s; }
html.reveal-ready .svc-show__media.is-revealed .bw__hero > *:nth-child(3) { transition-delay: .16s; }
html.reveal-ready .svc-show__media.is-revealed .bw__hero > *:nth-child(4) { transition-delay: .24s; }

/* 25.5 E-commerce visual (.shop) ------------------------------- */
.shop { display: grid; gap: .8rem; }
.shop__nav { display: flex; align-items: center; gap: .55rem; }
.shop__logo { width: 28px; height: 10px; border-radius: 3px; background: var(--brand); }
.shop__search { flex: 1; height: 14px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); }
.shop__cart { position: relative; width: 17px; height: 17px; border-radius: 5px; background: var(--brand); flex: none; }
.shop__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #04222a;
    font-size: .55rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.shop__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.shop__prod { display: grid; gap: .38rem; padding: .5rem; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.shop__img { height: 50px; border-radius: 7px; }
.shop__img--1 { background: linear-gradient(135deg, #cfe0ff, #7fa8ff); }
.shop__img--2 { background: linear-gradient(135deg, #d7f2f6, #86dce8); }
.shop__img--3 { background: linear-gradient(135deg, #e6ddff, #b3a0f0); }
.shop__img--4 { background: linear-gradient(135deg, #ffe6cf, #ffbf8a); }
.shop__row { display: flex; align-items: center; justify-content: space-between; }
.shop__price { font-size: .68rem; font-weight: 700; color: var(--ink); }
.shop__add { padding: .18rem .55rem; border-radius: 5px; background: var(--brand); color: #fff; font-size: .58rem; font-weight: 700; }
.shop__prod:first-child .shop__add { animation: bwPulse 2.8s ease-in-out infinite; }

/* 25.6 Dashboard visual (.dash) ------------------------------- */
.dash { display: grid; grid-template-columns: 30% 1fr; gap: .8rem; }
.dash__side { display: grid; gap: .45rem; align-content: start; padding: .6rem; border-radius: 9px; background: var(--navy); }
.dash__logo { width: 60%; height: 8px; border-radius: 3px; background: var(--electric); }
.dash__navi { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.dash__navi--on { background: rgba(255, 255, 255, .42); width: 82%; }
.dash__main { display: grid; gap: .65rem; min-width: 0; }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dash__kpi { display: grid; gap: .12rem; padding: .5rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.dash__kpi:first-child { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.dash__kpi small { font-size: .52rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.dash__kpi b { font-size: .86rem; color: var(--ink); }
.dash__chart { padding: .6rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.dash__chart svg { display: block; width: 100%; height: auto; }
.dash__grid { stroke: var(--line); stroke-width: 1; }
.dash__line {
    stroke: var(--electric);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}
.dash__dot { fill: var(--electric); }
html.reveal-ready .svc-show__media.is-revealed .dash__line { animation: dashDraw 1.2s .2s ease-out forwards; }
html:not(.reveal-ready) .dash__line { stroke-dashoffset: 0; }
@keyframes dashDraw { to { stroke-dashoffset: 0; } }
.dash__rows { display: grid; gap: .4rem; }
.dash__row { display: flex; align-items: center; gap: .5rem; }
.dash__bar { flex: 1; height: 8px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.dash__stat { padding: .12rem .45rem; border-radius: 4px; font-size: .56rem; font-weight: 700; background: var(--surface-2); color: var(--ink-soft); }
.dash__stat--ok { background: rgba(18, 161, 80, .14); color: #0f7a3d; }
.dash__stat--go { background: var(--brand-wash); color: var(--brand-strong); animation: svcPing 2.2s ease-in-out infinite; }

/* 25.7 AI & Automation visual (.flowviz) --------------------- */
.flowviz {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .6rem;
    padding: 1.4rem 1.15rem;
    border-radius: var(--sv-radius);
    background: linear-gradient(180deg, #0e1a30, #0a1120);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 34px 66px -30px rgba(0, 0, 0, .6);
}
.flowviz__inputs { display: flex; gap: .5rem; }
.flowviz__chip {
    padding: .32rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #cdd9ee;
    font-size: .68rem;
    font-weight: 600;
}
.flowviz__wires { width: 74%; height: 32px; }
.flowviz__wires path { stroke: rgba(120, 160, 230, .55); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.flowviz__stage {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    max-width: 16.5rem;
    padding: .72rem .95rem;
    border-radius: 12px;
    background: #101d34;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #eaf1ff;
    font-size: .86rem;
    font-weight: 650;
}
.flowviz__stage--human { background: var(--navy); border-color: color-mix(in srgb, var(--electric) 55%, transparent); }
.flowviz__label { flex: none; }
.flowviz__sub { margin-left: auto; font-size: .62rem; font-weight: 500; color: #8ea3c6; }
.flowviz__link { width: 2px; height: 20px; background: rgba(255, 255, 255, .18); }
.flowviz__ico {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--electric);
    box-shadow: 0 0 0 3px rgba(47, 123, 255, .16);
    flex: none;
}
.flowviz__ico--ai { border-radius: 50%; animation: aiPulse 2.4s ease-in-out infinite; }
.flowviz__ico--human { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); box-shadow: 0 0 0 3px rgba(20, 184, 212, .18); }
.flowviz__signal {
    position: absolute;
    left: 50%;
    top: 3.6rem;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--electric);
    box-shadow: 0 0 14px var(--electric);
    opacity: 0;
    animation: flowSignal 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes flowSignal {
    0% { top: 3.6rem; opacity: 0; }
    7% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% - 5.8rem); opacity: 0; }
}
@keyframes aiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 123, 255, .5); } 50% { box-shadow: 0 0 0 7px rgba(47, 123, 255, 0); } }
.flowviz__stage--auto  { animation: flowLit 8s ease-in-out infinite; }
.flowviz__stage--ai    { animation: flowLit 8s ease-in-out 2.6s infinite; }
.flowviz__stage--human { animation: flowLit 8s ease-in-out 5.2s infinite; }
@keyframes flowLit {
    0%, 24%, 100% { border-color: rgba(255, 255, 255, .14); box-shadow: none; }
    6%, 18% { border-color: var(--electric); box-shadow: 0 0 0 3px rgba(47, 123, 255, .16); }
}
.flowviz__log {
    list-style: none;
    margin: 1rem 0 0;
    width: 100%;
    max-width: 16.5rem;
    display: grid;
    gap: .36rem;
}
.flowviz__log li {
    position: relative;
    padding-left: 1.15rem;
    font-size: .7rem;
    color: #9fb0cd;
    opacity: .4;
    animation: flowLog 8s ease-in-out infinite;
}
.flowviz__log li::before { content: "\2713"; position: absolute; left: 0; color: var(--electric); font-weight: 700; }
.flowviz__log li:nth-child(2) { animation-delay: 2s; }
.flowviz__log li:nth-child(3) { animation-delay: 4s; }
.flowviz__log li:nth-child(4) { animation-delay: 6s; }
@keyframes flowLog { 0%, 8% { opacity: .4; } 14%, 94% { opacity: 1; } 100% { opacity: .4; } }

/* 25.8 Maintenance visual (.health) ------------------------- */
.health {
    padding: 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--sv-radius);
    background: #fff;
    box-shadow: var(--sv-shadow);
}
.health__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.health__title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.health__status { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #0f7a3d; }
.health__ping { width: 8px; height: 8px; border-radius: 50%; background: #12a150; animation: svcPing 2.4s ease-in-out infinite; }
.health__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.health__tile { position: relative; display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.health__tile small { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.health__tile b { font-size: .95rem; color: var(--ink); }
.health__ok { position: absolute; right: .65rem; top: .65rem; width: 7px; height: 7px; border-radius: 50%; background: #12a150; }
.health__pulse { display: block; width: 100%; height: 32px; margin-top: .9rem; }
.health__pulse path {
    stroke: var(--brand);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3 7;
    animation: healthFlow 1.4s linear infinite;
}
@keyframes healthFlow { to { stroke-dashoffset: -20; } }

/* 25.9 Choose your starting point --------------------------- */
.svc-start__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}
.svc-start__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-start__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
}
.svc-start__card--pop { border-color: var(--brand); box-shadow: var(--shadow-blue); }
.svc-start__badge {
    align-self: flex-start;
    margin-bottom: .35rem;
    padding: .22rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.svc-start__name { font-weight: 700; font-size: 1.05rem; }
.svc-start__price { font-size: clamp(1.55rem, 3vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.svc-start__for { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.svc-start__go { margin-top: auto; padding-top: .7rem; color: var(--brand-strong); font-weight: 700; font-size: .9rem; }
.svc-start__go span { display: inline-block; transition: transform .18s ease; }
.svc-start__card:hover .svc-start__go span { transform: translateX(4px); }
.svc-start__custom { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; text-align: center; color: var(--ink-soft); }

/* 25.10 Process (svc-flow) ---------------------------------- */
.svc-proc { background: var(--surface); border-block: 1px solid var(--line); }
.svc-flow {
    list-style: none;
    position: relative;
    display: flex;
    gap: 0;
}
.svc-flow::before,
.svc-flow::after { content: ""; position: absolute; left: 12.5%; top: 17px; height: 2px; }
.svc-flow::before { right: 12.5%; background: var(--line-strong); }
.svc-flow::after {
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--electric));
    transition: width 1.4s cubic-bezier(.22, .61, .36, 1);
}
.svc-flow.is-active::after { width: 75%; }
.svc-flow__step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 clamp(.3rem, 1.2vw, .75rem);
}
.svc-flow__marker {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--line-strong);
    transition: border-color .35s ease, background-color .35s ease;
}
.svc-flow__num { font-size: .78rem; font-weight: 700; color: var(--ink-soft); transition: color .35s ease; }
.svc-flow.is-active .svc-flow__step:nth-child(2) .svc-flow__marker { transition-delay: .22s; }
.svc-flow.is-active .svc-flow__step:nth-child(3) .svc-flow__marker { transition-delay: .44s; }
.svc-flow.is-active .svc-flow__step:nth-child(4) .svc-flow__marker { transition-delay: .66s; }
.svc-flow.is-active .svc-flow__marker { border-color: var(--brand); background: var(--brand); }
.svc-flow.is-active .svc-flow__num { color: #fff; }
.svc-flow__body { display: block; }
.svc-flow__title { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.svc-flow__step p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; max-width: 22ch; }

/* 25.11 Responsive ---------------------------------------- */
@media (max-width: 1040px) {
    .svc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
    .svc-show__inner,
    .svc-show--flip .svc-show__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "media" "detail";
        row-gap: clamp(1.5rem, 4vw, 2rem);
    }
    .svc-show__media { align-self: stretch; }
    .svc-viz { max-width: 32rem; }
    .svc-start__grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
@media (max-width: 820px) {
    .svc-flow { flex-direction: column; }
    .svc-flow::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
    .svc-flow::after { left: 17px; right: auto; top: 18px; width: 2px; height: 0; }
    .svc-flow.is-active::after { width: 2px; height: calc(100% - 36px); transition: height 1.4s cubic-bezier(.22, .61, .36, 1); }
    .svc-flow__step {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
        padding: 0 0 1.9rem;
    }
    .svc-flow__step:last-child { padding-bottom: 0; }
    .svc-flow__marker { flex: none; margin-bottom: 0; }
}
@media (max-width: 720px) {
    .svc-hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 2.75rem); }
    .svc-hero__viz { max-width: 20rem; }
    .svc-viz__tag--a { left: -1%; }
    .svc-viz__tag--b { right: -1%; }
}
@media (max-width: 480px) {
    .svc-viz { max-width: 100%; }
    .svc-viz::before { inset: -5% -2%; }
    .svc-viz__tag { font-size: .62rem; padding: .24rem .52rem; }
    .svc-viz__tag--a { top: 3%; left: 0; }
    .svc-viz__tag--b { top: 40%; right: 0; }
    .svc-viz__tag--c { bottom: 1%; left: 2%; }
    .svc-show__chips-list li { font-size: .78rem; }
    .svc-journey { gap: .3rem; padding: 0 4px; }
    .svc-journey__node { font-size: .58rem; padding: .28rem .46rem; gap: .28rem; }
    .svc-journey::before { left: 14px; right: 14px; }
    .flowviz__inputs { gap: .35rem; }
    .flowviz__chip { font-size: .62rem; padding: .28rem .55rem; }
}

/* 25.12 Reduced motion + offscreen pause ----------------- */
.svc-viz.is-paused *,
.svc-hero__viz.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .svc-sys__core-ring,
    .svc-sys__core-hub,
    .svc-sys__node circle,
    .svc-sys__sig,
    .svc-viz__ping,
    .bw__cta,
    .shop__prod .shop__add,
    .svc-journey__signal,
    .dash__stat--go,
    .flowviz__ico--ai,
    .flowviz__stage--auto,
    .flowviz__stage--ai,
    .flowviz__stage--human,
    .flowviz__signal,
    .flowviz__log li,
    .health__ping,
    .health__pulse path { animation: none !important; }
    .flowviz__log li { opacity: 1 !important; }
    .flowviz__signal,
    .svc-journey__signal,
    .svc-sys__sig { opacity: 0 !important; }
    .dash__line { stroke-dashoffset: 0 !important; }
    html.reveal-ready .svc-show__media .bw__hero > * { opacity: 1 !important; transform: none !important; }
    .svc-start__card:hover,
    .svc-hero__chips a:hover { transform: none; }
    .svc-start__card:hover .svc-start__go span { transform: none; }
}


/* =========================================================================
   26. WEBSITE PACKAGES PAGE - "Website Growth System"
   -------------------------------------------------------------------------
   A guided, conversion-focused experience for /website-packages. Every
   selector is namespaced .wgs-* and all visual-system tokens are scoped to
   .wgs-page - nothing here touches the frozen homepage or the Services page
   (section 25). Motion reuses the shared [data-reveal] / [data-chain] hooks
   and the .wgs-sys entry added to the main.js off-screen pause list.

   Commercial data (prices, features, timeframes, CTA targets, payment terms)
   is printed by the templates straight from config('catalog.*'); this file
   only styles it.
   ========================================================================= */

/* 26.0 Scoped visual-system tokens (Website Packages page only) --------- */
.wgs-page {
    --wgs-node: var(--electric);
    --wgs-line: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
    --wgs-grid: rgba(21, 96, 219, .06);
    --wgs-glow: rgba(47, 123, 255, .20);
    --wgs-focal-bg: color-mix(in srgb, var(--brand-wash) 84%, #fff);
    --wgs-radius: 16px;
    --wgs-shadow: 0 30px 60px -34px rgba(16, 42, 110, .32);
    --wgs-shadow-focal: 0 40px 80px -30px rgba(21, 96, 219, .40);
    --wgs-signal-dur: 6.5s;
}
.wgs-page section[id] { scroll-margin-top: clamp(4rem, 10vw, 6rem); }

/* 26.1 Hero ----------------------------------------------------------- */
.wgs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(1.75rem, 4vw, 2.75rem);
    background:
        radial-gradient(46rem 24rem at 88% -12%, var(--brand-wash), transparent 60%),
        var(--bg);
}
/* no rule at the hero -> system boundary: whitespace + the light surface
   of the next section carry the transition */
.wgs-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(1.5rem, 5vw, 3.25rem);
    align-items: center;
}
.wgs-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 3.05rem);
    letter-spacing: -0.02em;
    max-width: 20ch;
    text-wrap: balance;
}
.wgs-hero__lead {
    margin: 0;
    max-width: 54ch;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.65;
}
.wgs-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }

/* 26.1b Hero "Website Growth System" diagram - upward growth trajectory */
.wgs-hero__viz { position: relative; justify-self: center; width: 100%; max-width: 32rem; }
.wgs-hero__viz::before {
    content: "";
    position: absolute;
    inset: -9% -7%;
    z-index: 0;
    border-radius: 26px;
    background:
        radial-gradient(46% 42% at 46% 40%, var(--wgs-glow), transparent 72%),
        linear-gradient(var(--wgs-grid) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--wgs-grid) 1px, transparent 1px) 0 0 / 28px 28px;
    -webkit-mask-image: radial-gradient(74% 66% at 50% 46%, #000, transparent 84%);
    mask-image: radial-gradient(74% 66% at 50% 46%, #000, transparent 84%);
}
.wgs-sys { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.wgs-sys__dot { transform-box: fill-box; transform-origin: center; }

.wgs-sys__grid { stroke: var(--wgs-line); stroke-width: 1; stroke-dasharray: 2 8; opacity: .28; }
.wgs-sys__area-a { stop-color: var(--electric); stop-opacity: .16; }
.wgs-sys__area-b { stop-color: var(--electric); stop-opacity: 0; }
.wgs-sys__track {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}
.wgs-sys__chev { fill: none; stroke: var(--wgs-node); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.wgs-sys__halo { fill: none; stroke: var(--wgs-line); stroke-width: 1.2; opacity: .3; }
.wgs-sys__ring {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 32%, var(--line-strong));
    stroke-width: 1.6;
    filter: drop-shadow(0 6px 14px rgba(16, 42, 110, .16));
}
.wgs-sys__dot { fill: var(--brand); }
.wgs-sys__name { fill: var(--ink); font: 700 11px/1 var(--font); letter-spacing: .09em; text-anchor: middle; }
.wgs-sys__role { fill: var(--ink-soft); font: 600 9px/1 var(--font); letter-spacing: .02em; text-anchor: middle; }

.wgs-sys__stage--business .wgs-sys__ring {
    stroke: var(--brand);
    stroke-width: 2.4;
    filter: drop-shadow(0 0 12px var(--wgs-glow)) drop-shadow(0 8px 18px rgba(16, 42, 110, .2));
}
.wgs-sys__stage--business .wgs-sys__halo { stroke: var(--brand); opacity: .5; animation: wgsHalo 4.2s ease-in-out infinite; }
.wgs-sys__stage--business .wgs-sys__name { fill: var(--brand-strong); }
.wgs-sys__stage--business .wgs-sys__dot { fill: var(--brand-strong); animation: wgsPulse 3.6s ease-in-out infinite; }
.wgs-sys__flag-bg { fill: var(--brand); }
.wgs-sys__flag-t { fill: #fff; font: 700 7px/1 var(--font); letter-spacing: .12em; text-anchor: middle; }

.wgs-sys__signal {
    fill: var(--wgs-node);
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--wgs-node));
    animation: wgsSignal var(--wgs-signal-dur) cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes wgsSignal {
    0%   { transform: translate(88px, 250px);  opacity: 0; }
    6%   { opacity: 1; }
    26%  { transform: translate(150px, 214px); opacity: 1; }
    44%  { transform: translate(232px, 150px); opacity: 1; }
    54%  { transform: translate(232px, 150px); opacity: 1; }
    74%  { transform: translate(308px, 108px); opacity: 1; }
    92%  { transform: translate(380px, 80px);  opacity: 1; }
    100% { transform: translate(380px, 80px);  opacity: 0; }
}
@keyframes wgsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes wgsHalo { 0%, 100% { opacity: .5; } 50% { opacity: .18; } }

/* 26.2 Website Growth System - concise 3-stage explainer ---------- */
/* Light "lens" of surface colour with feathered top/bottom so it melts
   into the white sections above and below - no hard section rule. The
   hero is the primary growth visual; this stays deliberately quiet. */
.wgs-system {
    background: linear-gradient(180deg, var(--bg), var(--surface) 16%, var(--surface) 84%, var(--bg));
}
.wgs-stages {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    padding: 0;
}
.wgs-stage {
    position: relative;
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--line);
}
.wgs-stage--focal {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-wash) 55%, #fff);
}
.wgs-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-.75rem / 2 - 5px);
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--wgs-line);
    border-right: 2px solid var(--wgs-line);
}
.wgs-stage__n {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.wgs-stage--focal .wgs-stage__n { color: var(--brand-strong); }
.wgs-stage__d { font-size: .92rem; line-height: 1.4; color: var(--ink); }

/* 26.3 Three package experiences -------------------------------- */
.wgs-exps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
    align-items: stretch;
}
@media (min-width: 1041px) {
    .wgs-exp--focal { transform: translateY(-14px); }
}
.wgs-exp {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    background: #fff;
    box-shadow: var(--wgs-shadow);
}
/* progression connector: a small upward-right arrow in the gutter */
.wgs-exp + .wgs-exp::before {
    content: "";
    position: absolute;
    left: calc(-0.5 * clamp(1.25rem, 3vw, 1.75rem) - 11px);
    top: 3.4rem;
    width: 22px;
    height: 22px;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7bff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20c6 0 9-16 18-16'/%3E%3Cpath d='M15 4h6v6'/%3E%3C/svg%3E");
    opacity: .75;
    z-index: 2;
}
.wgs-exp--focal {
    border: 2px solid var(--brand);
    background: var(--wgs-focal-bg);
    box-shadow: var(--wgs-shadow-focal), 0 0 0 4px color-mix(in srgb, var(--brand) 9%, transparent);
}
.wgs-exp__badge {
    position: absolute;
    top: -.85rem;
    left: clamp(1.4rem, 3vw, 2rem);
    margin: 0;
    padding: .3rem .75rem;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}
.wgs-exp__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .55rem;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ink-soft);
}
.wgs-exp__num {
    display: inline-grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 .3rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .74rem;
    letter-spacing: 0;
    color: var(--ink);
}
.wgs-exp--focal .wgs-exp__num { background: #fff; border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); color: var(--brand-strong); }
.wgs-exp__stage {
    margin-left: auto;
    padding: .2rem .55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand-strong);
    font-size: .62rem;
    letter-spacing: .14em;
}
.wgs-exp__name { margin: .55rem 0 .1rem; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); }
.wgs-exp__headline {
    margin: 0 0 .5rem;
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;
}
.wgs-exp__price {
    margin: 0;
    font-size: clamp(1.85rem, 2.9vw, 2.3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.wgs-exp__price-note { margin: .3rem 0 0; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.wgs-exp__sub { margin: .55rem 0 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }

/* 26.3b Package previews - a labelled concept flow that carries the
   storytelling so the card text stays light. Sophistication rises:
   Starter = 3 plain nodes on a soft rail; Business = 5 nodes on a solid
   rail with one travelling signal; Growth = a branching system. */
.wgs-pv {
    margin: .85rem 0 .9rem;
    padding: .55rem .5rem .35rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.wgs-exp--focal .wgs-pv { border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); }
.wgs-pv--growth { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--brand-wash) 45%, #fff)); }
.wgs-pv__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wgs-pv__rail { stroke: var(--brand); stroke-width: 1.6; opacity: .85; fill: none; }
.wgs-pv__rail--soft { stroke: var(--wgs-line); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: .7; }
.wgs-pv__wire { stroke: var(--wgs-line); stroke-width: 1.5; fill: none; opacity: .85; }
.wgs-pv__stem { stroke: var(--wgs-line); stroke-width: 1.4; opacity: .7; }
.wgs-pv__dot { fill: var(--brand); opacity: .8; }
.wgs-pv__cell { fill: #fff; stroke: color-mix(in srgb, var(--brand) 28%, var(--line-strong)); stroke-width: 1.4; }
.wgs-pv--business .wgs-pv__cell { stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); }
.wgs-pv__hub { fill: var(--brand-wash); stroke: var(--brand); stroke-width: 1.5; }
.wgs-pv__mk { fill: none; stroke: color-mix(in srgb, var(--brand) 52%, var(--line-strong)); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wgs-pv__bar { fill: color-mix(in srgb, var(--brand) 40%, var(--line-strong)); }
.wgs-pv__lbl { fill: var(--ink-soft); font: 600 7.5px/1 var(--font); text-anchor: middle; letter-spacing: .01em; }
.wgs-exp--focal .wgs-pv__lbl { fill: var(--ink); }
.wgs-pv__sig {
    fill: var(--wgs-node);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--wgs-node));
    animation: wgsPvSig 6s ease-in-out infinite;
}
@keyframes wgsPvSig {
    0%   { transform: translate(26px, 52px); opacity: 0; }
    6%   { opacity: 1; }
    24%  { transform: translate(84px, 52px); opacity: 1; }
    44%  { transform: translate(142px, 52px); opacity: 1; }
    64%  { transform: translate(200px, 52px); opacity: 1; }
    88%  { transform: translate(258px, 52px); opacity: 1; }
    100% { transform: translate(258px, 52px); opacity: 0; }
}

.wgs-exp__cta { width: 100%; margin-top: auto; }
.wgs-exp__lead { margin: 1.1rem 0 .2rem; font-size: .82rem; font-weight: 700; color: var(--ink); }
.wgs-exp__highlights {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.wgs-exp__highlights { gap: .42rem; }
.wgs-exp__highlights li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.4;
}
.wgs-exp__highlights li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: 700;
}
.wgs-exp__more { margin-top: .9rem; }
.wgs-exp__more summary {
    cursor: pointer;
    padding: .35rem 0;
    font-size: .85rem;
    font-weight: 650;
    color: var(--brand-strong);
    list-style: none;
}
.wgs-exp__more summary::-webkit-details-marker { display: none; }
.wgs-exp__more summary::after { content: "  +"; white-space: pre; }
.wgs-exp__more[open] summary::after { content: "  \2212"; white-space: pre; }
.wgs-exp__more summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.wgs-exp__more ul {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}
.wgs-exp__more li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.45;
}
.wgs-exp__more li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: color-mix(in srgb, var(--brand) 55%, var(--line-strong));
    font-weight: 700;
}
.wgs-exp__more li.wgs-exp__feat-group { padding-left: 0; margin-top: .2rem; font-weight: 700; color: var(--ink); }
.wgs-exp__more li.wgs-exp__feat-group::before { content: none; }
.wgs-exp__timeframe {
    margin: .9rem 0 1.1rem;
    padding-top: .85rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    font-size: .88rem;
    color: var(--ink-soft);
}
.wgs-exp--focal .wgs-exp__timeframe { border-top-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.wgs-exp__timeframe strong { color: var(--ink); }

/* 26.4 Which package fits you? - goal -> recommendation ---------- */
.wgs-fit { background: linear-gradient(180deg, var(--bg), var(--surface) 16%, var(--surface) 84%, var(--bg)); }
.wgs-fit__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}
.wgs-fit__choice {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
}
.wgs-fit__choice--focal { border-color: var(--brand); box-shadow: var(--shadow-blue); }
.wgs-fit__tag {
    margin: 0 0 .6rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.wgs-fit__q { margin: 0 0 .55rem; font-size: 1.05rem; font-weight: 700; color: var(--ink); text-wrap: balance; }
.wgs-fit__a { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.wgs-fit__arrow {
    position: relative;
    align-self: flex-start;
    width: 2px;
    height: 30px;
    margin: .9rem 0 1rem 14px;
    background: linear-gradient(var(--wgs-line), var(--brand));
}
.wgs-fit__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wgs-line);
    transform: translateX(-50%);
}
.wgs-fit__arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: translate(-50%, 0) rotate(45deg);
}
.wgs-fit__rec {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    align-self: flex-start;
    margin: 0 0 1.15rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    color: var(--brand-strong);
}
.wgs-fit__choice--focal .wgs-fit__rec { background: color-mix(in srgb, var(--brand) 12%, #fff); border-color: var(--brand); }
.wgs-fit__rec-k { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.wgs-fit__rec strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.wgs-fit__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    align-self: flex-start;
    min-height: 44px;
    font-weight: 700;
    font-size: .92rem;
    color: var(--brand-strong);
    text-decoration: none;
}
.wgs-fit__cta span { display: inline-block; transition: transform .18s ease; }
.wgs-fit__cta:hover span { transform: translateX(4px); }
.wgs-fit__cta:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* 26.5 Detailed comparison ------------------------------------ */
.wgs-cmp__scroll {
    overflow-x: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    -webkit-overflow-scrolling: touch;
}
.wgs-cmp__scroll:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wgs-cmp__table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: .93rem;
}
.wgs-cmp__table th,
.wgs-cmp__table td {
    padding: .85rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    vertical-align: top;
}
.wgs-cmp__table thead th {
    background: var(--surface);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--line-strong);
    white-space: nowrap;
}
.wgs-cmp__table thead th.wgs-cmp__col--focal {
    box-shadow: inset 0 3px 0 var(--brand);
    border-bottom-color: color-mix(in srgb, var(--brand) 55%, var(--line-strong));
}
.wgs-cmp__table tbody th { font-weight: 650; color: var(--ink); width: 32%; }
.wgs-cmp__table td { color: var(--ink-soft); }
.wgs-cmp__group th {
    padding-top: .95rem;
    padding-bottom: .55rem;
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-strong);
    border-bottom: 1px solid var(--line-strong);
}
.wgs-cmp__meta th,
.wgs-cmp__meta td {
    background: color-mix(in srgb, var(--surface) 55%, #fff);
    font-weight: 650;
    color: var(--ink);
    border-bottom: none;
    border-top: 1px solid var(--line-strong);
}
.wgs-cmp__col--focal { background: var(--brand-wash); }
.wgs-cmp__meta td.wgs-cmp__col--focal { background: color-mix(in srgb, var(--brand-wash) 80%, #fff); }
.wgs-cmp__yes { color: var(--brand); font-weight: 700; font-size: 1.05rem; }
.wgs-cmp__no { color: var(--line-strong); }

.wgs-cmp__stack { display: none; }
.wgs-cmp__pk {
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    background: #fff;
    overflow: hidden;
}
.wgs-cmp__pk--focal { border-color: var(--brand); box-shadow: var(--shadow-blue); }
.wgs-cmp__pk-name {
    margin: 0;
    padding: .9rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line-strong);
    font-size: 1.05rem;
}
.wgs-cmp__pk--focal .wgs-cmp__pk-name { background: var(--brand-wash); }
.wgs-cmp__grp {
    margin: .5rem 0 0;
    padding: .5rem .85rem .15rem;
    border-left: 3px solid var(--brand);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.wgs-cmp__pk-name + .wgs-cmp__grp { margin-top: 0; }
.wgs-cmp__dl { margin: 0; padding: 0 1rem; }
.wgs-cmp__dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}
.wgs-cmp__dl > div:last-child { border-bottom: none; }
.wgs-cmp__dl dt { color: var(--ink); font-weight: 600; font-size: .88rem; }
.wgs-cmp__dl dd { margin: 0; text-align: right; color: var(--ink-soft); font-size: .88rem; }

/* 26.6 How pricing works ------------------------------------- */
/* a faint wash at the top edge instead of a rule at the section boundary */
.wgs-pricing { background: radial-gradient(60rem 22rem at 50% -14%, var(--brand-wash), transparent 60%), var(--bg); }
/* pull the dark final CTA up so it reads as connected to the custom-project
   block rather than floating after a large gap (scoped to this page - the
   shared cta-band component is untouched) */
.wgs-pricing { padding-bottom: clamp(2rem, 4vw, 2.75rem); }
.wgs-page .cta-band { padding-block-start: clamp(1.75rem, 3.5vw, 2.5rem); }
.wgs-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.wgs-trust__item {
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    background: #fff;
}
.wgs-trust__k {
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}
.wgs-trust__h { margin: 0 0 .45rem; font-size: 1.02rem; color: var(--ink); }
.wgs-trust__p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

/* process line: requirements -> ... -> handover (connected nodes) */
.wgs-proc {
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
    padding: 15px 0 0;
}
.wgs-proc::before,
.wgs-proc::after {
    content: "";
    position: absolute;
    left: 6%;
    top: 21px;
    height: 2px;
}
.wgs-proc::before { right: 6%; background: var(--line-strong); }
.wgs-proc::after {
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--electric));
    transition: width 1.6s cubic-bezier(.22, .61, .36, 1);
}
.wgs-proc.is-active::after { width: 88%; }
.wgs-proc li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 650;
    color: var(--ink-soft);
}
.wgs-proc__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line-strong);
    transition: border-color .35s ease, background-color .35s ease;
}
.wgs-proc.is-active .wgs-proc__dot { border-color: var(--brand); background: var(--brand); }
.wgs-proc.is-active li:nth-child(2) .wgs-proc__dot { transition-delay: .12s; }
.wgs-proc.is-active li:nth-child(3) .wgs-proc__dot { transition-delay: .24s; }
.wgs-proc.is-active li:nth-child(4) .wgs-proc__dot { transition-delay: .36s; }
.wgs-proc.is-active li:nth-child(5) .wgs-proc__dot { transition-delay: .48s; }
.wgs-proc.is-active li:nth-child(6) .wgs-proc__dot { transition-delay: .6s; }

.wgs-pay {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.25rem;
}
.wgs-pay__item {
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    background: #fff;
}
.wgs-pay__k {
    margin: 0 0 .35rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}
.wgs-pay__v { margin: 0; color: var(--ink); }
.wgs-note {
    margin: 0;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.6;
}
.wgs-custom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .85rem 1.5rem;
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.15rem, 3vw, 1.6rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--wgs-radius);
    background: linear-gradient(120deg, var(--surface), #fff);
}
.wgs-custom__t { grid-column: 1 / -1; margin: 0; font-weight: 700; color: var(--ink); }
.wgs-custom__cols { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.wgs-custom__col { position: relative; }
.wgs-custom__col--alt { padding-left: 1.85rem; }
.wgs-custom__col--alt::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: .05rem;
    bottom: .05rem;
    width: 1px;
    background: var(--line-strong);
}
.wgs-custom__k { margin: 0 0 .15rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.wgs-custom__v { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.wgs-custom__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    font-weight: 700;
    color: var(--brand-strong);
    white-space: nowrap;
}
.wgs-custom__link span { display: inline-block; transition: transform .18s ease; }
.wgs-custom__link:hover span { transform: translateX(4px); }

/* 26.7 Responsive ------------------------------------------- */
@media (max-width: 1040px) {
    .wgs-hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 2.75rem); }
    .wgs-hero__viz { max-width: 27rem; }
    .wgs-exps { grid-template-columns: 1fr; max-width: 33rem; margin-inline: auto; }
    .wgs-exp + .wgs-exp::before { display: none; }
    .wgs-exp--focal { transform: none; }
    .wgs-exp__badge { left: clamp(1.4rem, 5vw, 2rem); }
    .wgs-fit__grid { grid-template-columns: 1fr; max-width: 33rem; margin-inline: auto; }
    .wgs-trust { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .wgs-cmp__scroll { display: none; }
    .wgs-cmp__stack { display: grid; gap: 1rem; }
}
@media (max-width: 680px) {
    .wgs-proc { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 0 7px; }
    .wgs-proc::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
    .wgs-proc::after { left: 7px; right: auto; top: 6px; width: 2px; height: 0; }
    .wgs-proc.is-active::after { width: 2px; height: calc(100% - 12px); transition: height 1.6s cubic-bezier(.22, .61, .36, 1); }
    .wgs-proc li { flex: none; flex-direction: row; align-items: center; gap: .8rem; text-align: left; padding: .5rem 0; }
    .wgs-proc__dot { flex: none; margin-left: -6px; }
}
@media (max-width: 640px) {
    .wgs-stages { flex-direction: column; }
    .wgs-stage:not(:last-child)::after {
        right: auto;
        left: 1.05rem;
        top: auto;
        bottom: calc(-.75rem / 2 - 4px);
        transform: rotate(135deg);
    }
}
@media (max-width: 620px) {
    .wgs-hero__actions .btn { flex: 1 1 auto; }
    .wgs-pay { grid-template-columns: 1fr; }
    .wgs-custom { grid-template-columns: 1fr; }
    .wgs-custom__col--alt { padding-left: 0; }
    .wgs-custom__col--alt::before { display: none; }
    .wgs-custom__link { white-space: normal; }
}
@media (max-width: 560px) {
    .wgs-sys__role,
    .wgs-sys__chev { display: none; }
}
@media (max-width: 480px) {
    .wgs-hero__viz { max-width: 20.5rem; }
    .wgs-exp__stage { margin-left: 0; }
}

/* 26.8 Off-screen pause + reduced motion -------------------- */
.wgs-sys.is-paused *,
.wgs-pv.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .wgs-sys__signal,
    .wgs-sys__stage--business .wgs-sys__halo,
    .wgs-sys__stage--business .wgs-sys__dot,
    .wgs-pv__sig { animation: none !important; }
    .wgs-sys__signal,
    .wgs-pv__sig { opacity: 0 !important; }
    .wgs-proc::after { transition: none; }
    .wgs-fit__cta:hover span,
    .wgs-custom__link:hover span { transform: none; }
}


/* =========================================================================
   27. PORTFOLIO PAGE - "Selected work" (V3)
   -------------------------------------------------------------------------
   A digital-product showcase of real, live BlueAquila websites, built to
   the same visual level as the homepage and Services page: layered depth,
   a navy dark moment, a faint technical grid, restrained blue glow, browser
   geometry, connected nodes and one travelling signal per system.

   Every selector is namespaced .pf-* and the visual-system tokens are
   scoped to .pf-page - nothing here touches the frozen homepage, Services
   (section 25) or Website Packages (section 26). Motion reuses the shared
   [data-reveal] / [data-chain] / [data-process] hooks and the .pf-hv entry
   in the main.js off-screen pause list.

   Screenshots load from public/assets/img/portfolio/<slug>.jpg layered over
   a committed <slug>.svg placeholder - a real screenshot needs no code
   change.
   ========================================================================= */

.pf-page {
    --pf-line: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    --pf-grid: rgba(21, 96, 219, .05);
    --pf-grid-dark: rgba(255, 255, 255, .04);
    --pf-glow: rgba(47, 123, 255, .18);
    --pf-radius: 18px;
    --pf-shadow: 0 40px 80px -34px rgba(16, 42, 110, .40);
    --pf-shadow-dark: 0 44px 90px -34px rgba(0, 0, 0, .60);
    --pf-signal: 5.5s;
}
.pf-page section[id] { scroll-margin-top: clamp(4rem, 10vw, 6rem); }

/* ---- 27.1 Hero -------------------------------------------------- */
.pf-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2rem, 4vw, 3rem);
}
.pf-hero > .container { position: relative; z-index: 1; }
.pf-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pf-hero__grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--pf-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pf-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 90% at 80% 4%, #000 18%, transparent 74%);
    mask-image: radial-gradient(120% 90% at 80% 4%, #000 18%, transparent 74%);
}
.pf-hero__glow { position: absolute; border-radius: 50%; filter: blur(56px); pointer-events: none; }
.pf-hero__glow--1 {
    width: 34rem; height: 34rem; right: -11rem; top: -13rem;
    background: radial-gradient(circle, rgba(21, 96, 219, .20), transparent 70%);
    animation: pfGlowDrift 28s ease-in-out infinite alternate;
}
.pf-hero__glow--2 {
    width: 22rem; height: 22rem; left: 44%; bottom: -13rem;
    background: radial-gradient(circle, rgba(20, 184, 212, .10), transparent 70%);
    animation: pfGlowDrift 34s ease-in-out -9s infinite alternate;
}
@keyframes pfGlowDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-16px, 18px, 0) scale(1.06); }
}
.pf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.pf-hero__title {
    margin: 0 0 1.15rem;
    font-size: clamp(2.15rem, 5.2vw, 3.55rem);
    letter-spacing: -0.02em;
    line-height: 1.06;
}
.pf-hero__accent {
    color: var(--brand-strong);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.pf-hero__lead {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-soft);
}
.pf-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* 27.1b Hero visual */
.pf-hero__viz { position: relative; justify-self: center; width: 100%; max-width: 35rem; }
.pf-hero__stage { position: relative; }
.pf-hv__field {
    position: absolute;
    inset: -18% -12%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 62% 44%, rgba(21, 96, 219, .13), rgba(47, 123, 255, .05) 44%, transparent 72%);
    filter: blur(8px);
}
.pf-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }

.pf-hv__aura {
    fill: none;
    stroke: color-mix(in srgb, var(--brand) 30%, transparent);
    stroke-width: 1;
    stroke-dasharray: 3 8;
    opacity: .5;
    transform-box: fill-box;
    transform-origin: center;
    animation: pfSpin 80s linear infinite;
}
.pf-hv__orbit-e { fill: none; stroke: var(--pf-line); stroke-width: 1; stroke-dasharray: 2 9; opacity: .35; }
.pf-hv__panel-back {
    fill: color-mix(in srgb, var(--brand-wash) 60%, #fff);
    stroke: var(--line);
    stroke-width: 1;
    opacity: .7;
}
.pf-hv__wire { fill: none; stroke: var(--pf-line); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .8; }

.pf-hv__win { fill: var(--navy); stroke: var(--navy-soft); stroke-width: 1; filter: drop-shadow(0 24px 44px rgba(16, 42, 110, .34)); }
.pf-hv__chrome { fill: #111e34; }
.pf-hv__cdot { fill: #33415c; }
.pf-hv__addr { fill: rgba(255, 255, 255, .06); }
.pf-hv__addr-t { fill: #7f93b6; font: 500 8px/1 var(--font); }
.pf-hv__ring { fill: none; stroke: var(--electric); }
.pf-hv__ring--o {
    stroke-width: 1;
    stroke-dasharray: 3 6;
    opacity: .45;
    transform-box: fill-box;
    transform-origin: center;
    animation: pfSpin 44s linear infinite reverse;
}
.pf-hv__ring--m { stroke-width: 1; opacity: .3; }
.pf-hv__disc { fill: #16233c; stroke: color-mix(in srgb, var(--electric) 40%, transparent); stroke-width: 1; }
.pf-hv__orbit { transform-box: view-box; transform-origin: 353px 212px; animation: pfSpin 12s linear infinite; }
.pf-hv__sat { fill: var(--electric); }
.pf-hv__link { stroke: color-mix(in srgb, var(--electric) 60%, #4a5b7d); stroke-width: 1; stroke-linecap: round; }
.pf-hv__pt { fill: var(--electric); opacity: .8; }
.pf-hv__hub { fill: #eaf1ff; animation: pfHubPulse 3.4s ease-in-out infinite; }
.pf-hv__pulse {
    fill: none;
    stroke: var(--electric);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 3 5;
    opacity: .7;
    animation: pfDash 1.6s linear infinite;
}
.pf-hv__label { fill: var(--ink-soft); font: 700 9px/1 var(--font); letter-spacing: .16em; text-anchor: middle; }

.pf-hv__node-box { fill: #fff; stroke: var(--line-strong); stroke-width: 1.2; filter: drop-shadow(0 8px 16px rgba(16, 42, 110, .12)); }
.pf-hv__node-t { fill: var(--ink); font: 650 9px/1 var(--font); letter-spacing: .01em; }
.pf-hv__live { fill: #29b866; animation: pfLiveDot 2.4s ease-in-out infinite; }
.pf-hv__nodes .pf-hv__node:nth-child(2) .pf-hv__live { animation-delay: -.8s; }
.pf-hv__nodes .pf-hv__node:nth-child(3) .pf-hv__live { animation-delay: -1.6s; }

.pf-hv__sig { fill: var(--electric); opacity: 0; filter: drop-shadow(0 0 5px var(--electric)); transform-box: fill-box; transform-origin: center; }
.pf-hv__sig--1 { offset-path: path("M152 91 C 178 96 184 134 210 152"); animation: pfSig var(--pf-signal) ease-in-out infinite; }
.pf-hv__sig--2 { offset-path: path("M142 227 C 168 224 186 214 210 210"); animation: pfSig var(--pf-signal) ease-in-out -1.8s infinite; }
.pf-hv__sig--3 { offset-path: path("M152 363 C 178 356 186 300 210 268"); animation: pfSig var(--pf-signal) ease-in-out -3.6s infinite; }
@supports not (offset-path: path("M0 0 L1 1")) { .pf-hv__sig { display: none; } }

@keyframes pfSpin { to { rotate: 360deg; } }
@keyframes pfHubPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pfDash { to { stroke-dashoffset: -16; } }
@keyframes pfLiveDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes pfSig { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 27.2 Work system (blue / light) -------------------------- */
.pf-work {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg), var(--surface) 22%, var(--surface) 78%, var(--bg));
}
.pf-work__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--pf-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(120% 100% at 14% 0%, #000, transparent 68%);
    mask-image: radial-gradient(120% 100% at 14% 0%, #000, transparent 68%);
}
.pf-track {
    list-style: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: clamp(2rem, 5vw, 3.25rem) 0 0;
    padding: 0;
}
.pf-track::before,
.pf-track::after { content: ""; position: absolute; left: 12.5%; top: 23px; height: 2px; }
.pf-track::before { right: 12.5%; background: var(--line-strong); }
.pf-track::after {
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--electric));
    box-shadow: 0 0 12px rgba(47, 123, 255, .4);
    transition: width 1.5s cubic-bezier(.22, .61, .36, 1);
}
.pf-track.is-active::after { width: 75%; }
.pf-track__stage {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding-inline: .4rem;
    text-align: center;
}
.pf-track__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line-strong);
    color: color-mix(in srgb, var(--brand) 45%, var(--line-strong));
    box-shadow: var(--shadow-sm);
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.pf-track__tile svg { width: 22px; height: 22px; }
.pf-track__tile svg path,
.pf-track__tile svg rect { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-track__tile svg circle { fill: currentColor; stroke: none; }
.pf-track.is-active .pf-track__tile {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(21, 96, 219, .12);
}
.pf-track.is-active .pf-track__stage:nth-child(2) .pf-track__tile { transition-delay: .16s; }
.pf-track.is-active .pf-track__stage:nth-child(3) .pf-track__tile { transition-delay: .32s; }
.pf-track.is-active .pf-track__stage:nth-child(4) .pf-track__tile { transition-delay: .48s; }
.pf-track__text { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pf-track__label { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pf-track__note { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); max-width: 18ch; }
.pf-track__spark {
    position: absolute;
    left: 12.5%;
    top: 19px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px 2px var(--electric);
    opacity: 0;
}
.pf-track.is-active .pf-track__spark { animation: pfTrackSpark 2.6s cubic-bezier(.5, 0, .5, 1) 1.4s 2; }
@keyframes pfTrackSpark {
    0% { left: 12.5%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: calc(87.5% - 9px); opacity: 0; }
}

/* ---- 27.3 Project - shared shell ----------------------------- */
.pf-project { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.pf-project__frame { position: relative; }
.pf-project__depth {
    position: absolute;
    inset: 8% -4% -10% 6%;
    z-index: 0;
    border-radius: var(--pf-radius);
    background: linear-gradient(150deg, var(--brand-wash), color-mix(in srgb, var(--electric) 12%, #fff));
    border: 1px solid var(--line);
    opacity: .7;
}
.pf-project__meta { position: relative; z-index: 1; }
.pf-project__num {
    margin: 0 0 .3rem;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--brand) 20%, var(--surface-2));
}
.pf-project__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 1rem; margin-bottom: .9rem; }
.pf-project__name { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; }
.pf-project__cat {
    margin: 0;
    padding: .32rem .75rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    color: var(--brand-strong);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pf-project__summary { margin: 0 0 1rem; max-width: 48ch; color: var(--ink); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65; }
.pf-project__role { margin: 0 0 1.5rem; font-size: .82rem; letter-spacing: .02em; color: var(--ink-soft); }
.pf-project__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.pf-project__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, #29b866 10%, #fff);
    border: 1px solid color-mix(in srgb, #29b866 30%, var(--line));
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1f7a49;
}
.pf-project__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #29b866; animation: pfLiveDot 2.4s ease-in-out infinite; }
.pf-project__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    font-weight: 700;
    font-size: .98rem;
    color: var(--brand-strong);
    text-decoration: none;
}
.pf-project__link-ico { display: inline-block; transition: transform .2s ease; }
.pf-project__link:hover .pf-project__link-ico { transform: translate(3px, -3px); }
.pf-project__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.pf-shot {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: var(--pf-radius);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #fff;
    box-shadow: var(--pf-shadow);
}
.pf-shot__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .95rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.pf-shot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.pf-shot__addr {
    margin-left: .55rem;
    padding: .2rem .7rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56%;
}
.pf-shot__live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1f7a49;
}
.pf-shot__ping { width: 6px; height: 6px; border-radius: 50%; background: #29b866; animation: pfLiveDot 2.4s ease-in-out infinite; }
.pf-shot__view {
    display: block;
    aspect-ratio: 16 / 10;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}
.pf-shot--relish-infotech .pf-shot__view { background-image: url("../img/portfolio/relish-infotech.jpg"), url("../img/portfolio/relish-infotech.svg"); }
.pf-shot--kerwal-energies .pf-shot__view { background-image: url("../img/portfolio/kerwal-energies.jpg"), url("../img/portfolio/kerwal-energies.svg"); }
.pf-shot--blue-okra .pf-shot__view { background-image: url("../img/portfolio/blue-okra.jpg"), url("../img/portfolio/blue-okra.svg"); }

@media (hover: hover) and (pointer: fine) {
    .pf-shot { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease; }
    .pf-project:hover .pf-shot {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
        box-shadow: 0 50px 92px -32px rgba(16, 42, 110, .48);
    }
}

/* featured variant */
.pf-project--featured { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
.pf-project--featured .pf-project__meta { order: -1; }

/* dark variant */
.pf-project--dark { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pf-project--dark .pf-project__depth {
    background: linear-gradient(150deg, rgba(47, 123, 255, .18), rgba(47, 123, 255, .02));
    border-color: rgba(255, 255, 255, .08);
    opacity: 1;
}
.pf-project--dark .pf-shot { border-color: rgba(255, 255, 255, .12); background: #0d1626; box-shadow: var(--pf-shadow-dark); }
.pf-project--dark .pf-shot__bar { background: #10192b; border-bottom-color: rgba(255, 255, 255, .06); }
.pf-project--dark .pf-shot__dot { background: #33415c; }
.pf-project--dark .pf-shot__addr { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); color: #8ea3c6; }
.pf-project--dark .pf-shot__live { color: #58c98a; }
.pf-project--dark .pf-shot__ping { background: #3fbf77; }
.pf-project--dark .pf-shot__view { background-color: #0d1626; }
.pf-project--dark .pf-project__num { color: color-mix(in srgb, var(--electric) 42%, var(--navy-soft)); }
.pf-project--dark .pf-project__name { color: #fff; }
.pf-project--dark .pf-project__cat { background: rgba(47, 123, 255, .12); border-color: rgba(47, 123, 255, .40); color: #bcd3ff; }
.pf-project--dark .pf-project__summary { color: #b6c4dc; }
.pf-project--dark .pf-project__role { color: #8496b4; }
.pf-project--dark .pf-project__badge { background: rgba(41, 184, 102, .12); border-color: rgba(41, 184, 102, .40); color: #6fe0a0; }
.pf-project--dark .pf-project__link { color: #7fb0ff; }

/* wide variant */
.pf-project--wide { grid-template-columns: 1fr; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
.pf-project--wide .pf-shot__view { aspect-ratio: 2 / 1; }
.pf-project--wide .pf-project__depth { inset: 10% -3% -8% 4%; }
@media (min-width: 861px) {
    .pf-project--wide .pf-project__meta {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: clamp(2rem, 5vw, 4rem);
        row-gap: .2rem;
        align-items: start;
    }
    .pf-project--wide .pf-project__num { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
    .pf-project--wide .pf-project__head,
    .pf-project--wide .pf-project__summary,
    .pf-project--wide .pf-project__role,
    .pf-project--wide .pf-project__foot { grid-column: 2; }
}

/* section backgrounds around the projects */
.pf-featured { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff, var(--surface)); }
.pf-featured__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50rem 26rem at 82% 0%, var(--pf-glow), transparent 62%),
        linear-gradient(var(--pf-grid) 1px, transparent 1px) 0 0 / 50px 50px,
        linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px) 0 0 / 50px 50px;
    -webkit-mask-image: radial-gradient(130% 90% at 78% 0%, #000 25%, transparent 78%);
    mask-image: radial-gradient(130% 90% at 78% 0%, #000 25%, transparent 78%);
}
.pf-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #9fb0cd;
}
.pf-dark__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 26rem at 14% -8%, rgba(47, 123, 255, .16), transparent 60%),
        linear-gradient(var(--pf-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, var(--pf-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(130% 110% at 12% -10%, #000, transparent 72%);
    mask-image: radial-gradient(130% 110% at 12% -10%, #000, transparent 72%);
}
.pf-dark .eyebrow { color: var(--electric); }
.pf-dark .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }
.pf-dark .section__head h2 { color: #fff; }
.pf-dark .section__intro { color: #9fb0cd; }
.pf-wide { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), #fff 42%); }

/* ---- 27.4 How we build (blue / light) ------------------------ */
.pf-process-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg), var(--surface) 20%, var(--surface) 80%, var(--bg));
}
.pf-process-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 24rem at 50% -12%, var(--pf-glow), transparent 62%),
        linear-gradient(var(--pf-grid) 1px, transparent 1px) 0 0 / 52px 52px,
        linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px) 0 0 / 52px 52px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 76%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 76%);
}
.pf-build {
    list-style: none;
    position: relative;
    display: flex;
    gap: 0;
    margin-top: clamp(2rem, 5vw, 3rem);
}
.pf-build__step {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 clamp(.3rem, 1.2vw, .75rem);
}
/* each node connects only to the NEXT node with its own short segment - never
   one continuous rail spanning all five stations. Clear gaps flank every
   marker (60% of the step width is drawn, 20% either side is empty). */
.pf-build__step:not(:last-child)::before,
.pf-build__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 70%;
    right: -30%;
    top: 19px;
    height: 2px;
}
.pf-build__step:not(:last-child)::before { background: var(--line-strong); }
.pf-build__step:not(:last-child)::after {
    background: linear-gradient(90deg, var(--brand), var(--electric));
    box-shadow: 0 0 10px rgba(47, 123, 255, .4);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.pf-build.is-active .pf-build__step:not(:last-child)::after { opacity: 1; transform: scaleX(1); }
.pf-build.is-active .pf-build__step:nth-child(2)::after { transition-delay: .16s; }
.pf-build.is-active .pf-build__step:nth-child(3)::after { transition-delay: .32s; }
.pf-build.is-active .pf-build__step:nth-child(4)::after { transition-delay: .48s; }
.pf-build__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line-strong);
    box-shadow: var(--shadow-sm);
    transition: border-color .35s ease, background-color .35s ease;
}
.pf-build__num { font-size: .8rem; font-weight: 700; color: var(--ink-soft); transition: color .35s ease; }
.pf-build.is-active .pf-build__marker { border-color: var(--brand); background: var(--brand); }
.pf-build.is-active .pf-build__num { color: #fff; }
.pf-build.is-active .pf-build__step:nth-child(2) .pf-build__marker { transition-delay: .16s; }
.pf-build.is-active .pf-build__step:nth-child(3) .pf-build__marker { transition-delay: .32s; }
.pf-build.is-active .pf-build__step:nth-child(4) .pf-build__marker { transition-delay: .48s; }
.pf-build.is-active .pf-build__step:nth-child(5) .pf-build__marker { transition-delay: .64s; }
.pf-build__body { display: block; }
.pf-build__step-title { margin: 0 0 .4rem; font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pf-build__step p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; max-width: 22ch; margin-inline: auto; }

/* ---- 27.5 Capabilities - "beyond the website" architecture --- */
/* light section; the drama is a single navy blueprint panel so it stays
   distinct from the full-navy CTA that follows. */
.pf-arch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    padding: clamp(1.6rem, 4vw, 3rem);
    border-radius: clamp(18px, 2.4vw, 28px);
    background: var(--navy);
    color: #9fb0cd;
    box-shadow: var(--pf-shadow);
}
.pf-arch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(47, 123, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 123, 255, .10) 1px, transparent 1px),
        linear-gradient(rgba(47, 123, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 123, 255, .045) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    -webkit-mask-image: radial-gradient(120% 100% at 22% 0%, #000, transparent 78%);
    mask-image: radial-gradient(120% 100% at 22% 0%, #000, transparent 78%);
}
.pf-arch__glow {
    position: absolute;
    z-index: 0;
    right: -12%;
    top: -34%;
    width: 34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 123, 255, .22), transparent 62%);
    pointer-events: none;
}
.pf-arch__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.pf-arch__viz { position: relative; }
.pf-arch-svg { display: block; width: 100%; height: auto; overflow: visible; }

.pf-arch__conn { fill: none; stroke: rgba(47, 123, 255, .30); stroke-width: 1.4; stroke-dasharray: 3 5; animation: pfDash 2.4s linear infinite; }
.pf-arch.is-paused * { animation-play-state: paused; }
.pf-arch__conn--spine { stroke: var(--electric); stroke-width: 2; stroke-dasharray: 4 5; opacity: .8; }
.pf-arch__arc { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; stroke-dasharray: 2 7; }
.pf-arch__node > rect { fill: #101d33; stroke: rgba(47, 123, 255, .5); stroke-width: 1.3; transition: fill .3s ease, stroke .3s ease, filter .3s ease; }
.pf-arch__node > text { fill: #c9d7f2; font: 700 8px/1 var(--font); letter-spacing: .07em; text-anchor: middle; }
.pf-arch__node--web > rect { fill: var(--brand); stroke: var(--electric); }
.pf-arch__node--web > text { fill: #fff; }
.pf-arch__biz > circle:nth-of-type(2) { fill: #16233c; stroke: var(--electric); stroke-width: 1.6; }
.pf-arch__biz > text { fill: #eaf1ff; font: 700 7.5px/1 var(--font); letter-spacing: .1em; text-anchor: middle; }
.pf-arch__biz-ring {
    fill: none;
    stroke: var(--electric);
    stroke-width: 1;
    opacity: .4;
    transform-box: fill-box;
    transform-origin: center;
    animation: pfArchRing 4.2s ease-in-out infinite;
}
.pf-arch__hub { fill: #eaf1ff; animation: pfHubPulse 3.4s ease-in-out infinite; }
.pf-arch__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M118 182 H180");
    animation: pfSig 5s ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .pf-arch__sig { display: none; } }
@keyframes pfArchRing { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.18); opacity: .12; } }

/* hover a capability -> illuminate its node + connection (progressive :has) */
.pf-arch__inner:has([data-cap="web"]:hover) .pf-arch__node--web > rect,
.pf-arch__inner:has([data-cap="shop"]:hover) .pf-arch__node--shop > rect,
.pf-arch__inner:has([data-cap="app"]:hover) .pf-arch__node--app > rect,
.pf-arch__inner:has([data-cap="ai"]:hover) .pf-arch__node--ai > rect,
.pf-arch__inner:has([data-cap="ops"]:hover) .pf-arch__node--ops > rect {
    fill: #1b3b6b;
    stroke: var(--electric);
    filter: drop-shadow(0 0 8px rgba(47, 123, 255, .5));
}
.pf-arch__inner:has([data-cap="web"]:hover) .pf-arch__conn--web,
.pf-arch__inner:has([data-cap="shop"]:hover) .pf-arch__conn--shop,
.pf-arch__inner:has([data-cap="app"]:hover) .pf-arch__conn--app,
.pf-arch__inner:has([data-cap="ai"]:hover) .pf-arch__conn--ai,
.pf-arch__inner:has([data-cap="ops"]:hover) .pf-arch__conn--ops {
    stroke: var(--electric);
    stroke-width: 2.2;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(47, 123, 255, .6));
}

.pf-arch__panel { position: relative; z-index: 1; }
.pf-arch__list { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 0; }
.pf-arch__cap {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.pf-arch__cap:hover {
    border-color: color-mix(in srgb, var(--electric) 55%, transparent);
    background: rgba(47, 123, 255, .09);
    transform: translateX(3px);
}
.pf-arch__cap-label { font-size: .95rem; font-weight: 650; color: #eaf1ff; letter-spacing: -0.01em; }
.pf-arch__cap-tag { font-size: .76rem; color: #8496b4; }
.pf-arch__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- 27.6 Final CTA spacing on this page ------------------- */
.pf-page .cta-band { padding-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ---- 27.7 Responsive ------------------------------------- */
@media (max-width: 1024px) {
    .pf-hero__grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 7vw, 3rem); }
    .pf-hero__viz { max-width: 30rem; }
    .pf-project--featured,
    .pf-project--dark { grid-template-columns: 1fr; }
    .pf-project--featured .pf-project__meta { order: 0; }
    .pf-project--featured .pf-project__frame,
    .pf-project--dark .pf-project__frame { order: -1; }
    .pf-project--wide .pf-project__meta { display: block; }
    .pf-arch__inner { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
    .pf-arch__viz { max-width: 30rem; margin-inline: auto; width: 100%; }
    .pf-arch__panel { max-width: 34rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 860px) {
    .pf-project { gap: 1.5rem; }
    .pf-project__depth { display: none; }
    .pf-build { flex-direction: column; }
    .pf-build__step { flex: none; flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; padding: 0 0 2rem; }
    .pf-build__step:last-child { padding-bottom: 0; }
    .pf-build__marker { flex: none; margin-bottom: 0; }
    .pf-build__step p { margin-inline: 0; max-width: none; }
    /* vertical connection between each node and the next - a short, own
       segment per step, not a single rail spanning the whole list */
    .pf-build__step:not(:last-child)::before,
    .pf-build__step:not(:last-child)::after {
        left: 19px;
        right: auto;
        top: 46px;
        bottom: 6px;
        width: 2px;
        height: auto;
    }
    .pf-build__step:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
    .pf-build.is-active .pf-build__step:not(:last-child)::after { transform: scaleY(1); }
}
@media (max-width: 760px) {
    /* mobile: drop the radial diagram, present the list as a vertical
       connected architecture with clear hierarchy */
    .pf-arch { padding: clamp(1.35rem, 5vw, 2rem); }
    .pf-arch__viz { display: none; }
    .pf-arch__list { padding-left: 1.4rem; position: relative; }
    .pf-arch__list::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 1.1rem;
        bottom: 1.1rem;
        width: 2px;
        background: linear-gradient(var(--electric), rgba(47, 123, 255, .18));
    }
    .pf-arch__cap { position: relative; }
    .pf-arch__cap::before {
        content: "";
        position: absolute;
        left: calc(-1.4rem + 2px);
        top: 1.05rem;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--navy);
        border: 2px solid var(--electric);
    }
    .pf-arch__cap:first-child::before { background: var(--electric); }
    .pf-arch__cap:hover { transform: none; }
}
@media (max-width: 720px) {
    .pf-track { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 8px; }
    .pf-track::before { left: 8px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
    .pf-track::after { left: 8px; right: auto; top: 8px; width: 2px; height: 0; }
    .pf-track.is-active::after { width: 2px; height: calc(100% - 16px); transition: height 1.5s cubic-bezier(.22, .61, .36, 1); }
    .pf-track__stage { flex: none; flex-direction: row; align-items: center; gap: 1rem; text-align: left; padding: .6rem 0; width: 100%; }
    .pf-track__tile { flex: none; margin-left: -8px; width: 42px; height: 42px; }
    .pf-track__text { align-items: flex-start; }
    .pf-track__note { max-width: none; }
    .pf-track__spark { display: none; }
}
@media (max-width: 620px) {
    .pf-hero__actions .btn { flex: 1 1 auto; }
    .pf-project--wide .pf-shot__view { aspect-ratio: 16 / 10; }
    .pf-project__num { font-size: clamp(2.2rem, 12vw, 3rem); }
}
@media (max-width: 480px) {
    .pf-hero__viz { max-width: 22rem; }
    .pf-arch__cta .btn { flex: 1 1 auto; }
}

/* ---- 27.8 Off-screen pause + reduced motion -------------- */
.pf-hv.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .pf-hero__glow--1,
    .pf-hero__glow--2,
    .pf-hv__aura,
    .pf-hv__ring--o,
    .pf-hv__orbit,
    .pf-hv__hub,
    .pf-hv__pulse,
    .pf-hv__live,
    .pf-hv__sig,
    .pf-shot__ping,
    .pf-project__badge-dot,
    .pf-arch__conn,
    .pf-arch__biz-ring,
    .pf-arch__hub,
    .pf-arch__sig { animation: none !important; }
    .pf-hv__sig,
    .pf-arch__sig { opacity: 0 !important; }
    .pf-track::after,
    .pf-build__step::after { transition: none; }
    .pf-track__spark { display: none !important; }
    .pf-project:hover .pf-shot { transform: none; }
    .pf-project__link:hover .pf-project__link-ico { transform: none; }
    .pf-arch__cap:hover { transform: none; }
}


/* =========================================================================
   28. ABOUT PAGE - "Built for what comes next"
   -------------------------------------------------------------------------
   Who BlueAquila is, how it thinks, and why a business would work with it -
   built to the same visual level as the Homepage, Services, Website
   Packages and Portfolio pages, reusing their design language (technical
   grid, restrained blue glow, connected nodes, one dark navy moment,
   segmented process connectors) without copying any of their sections.

   Every selector is namespaced .abt-* and the visual-system tokens are
   scoped to .abt-page - nothing here touches the frozen Homepage, Services
   (section 25), Website Packages (section 26) or Portfolio (section 27).
   Motion reuses the shared [data-reveal] / [data-process] hooks and the
   .abt-hv / .abt-arch entries in the main.js off-screen pause list.
   ========================================================================= */

.abt-page {
    --abt-line: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    --abt-grid: rgba(21, 96, 219, .05);
    --abt-grid-dark: rgba(255, 255, 255, .04);
    --abt-glow: rgba(47, 123, 255, .18);
    --abt-radius: 18px;
    --abt-signal: 6s;
}
.abt-page section[id] { scroll-margin-top: clamp(4rem, 10vw, 6rem); }

/* Scoped-only eyebrow treatment: the shared .eyebrow::before bar (a short
   decorative rule, used site-wide) reads as an unwanted rail on this
   page's more editorial composition. Overridden here to a small dot
   instead (same technique already used on the AI & Automation page) - the
   shared rule and every other page are untouched. */
.abt-page .eyebrow::before {
    width: 6px;
    height: 6px;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--brand);
}
.abt-page .eyebrow--on-wash::before { background: var(--brand-strong); }

/* ---- 28.1 Hero -------------------------------------------------- */
.abt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
    padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.5rem, 5vw, 4rem);
}
.abt-hero > .container { position: relative; z-index: 1; }
.abt-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--abt-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--abt-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 90% at 82% 4%, #000 18%, transparent 74%);
    mask-image: radial-gradient(120% 90% at 82% 4%, #000 18%, transparent 74%);
}
/* The visual is deliberately the larger half - a major architecture, not
   a diagram squeezed into an equal-width column. */
.abt-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.abt-hero__title {
    margin: 0 0 1.15rem;
    font-size: clamp(2.2rem, 5.3vw, 3.6rem);
    letter-spacing: -0.02em;
    line-height: 1.06;
    max-width: 16ch;
}
.abt-hero__lead {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-soft);
}
.abt-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* 28.1b Hero visual (V3) - a major system-architecture anchor. Stretches
   to fill its (now larger) grid column instead of sitting centred inside
   a fixed, much-narrower box - the direct fix for "diagram too small,
   surrounded by unused whitespace". Distinct from every other hero
   diagram on the site (radial engine / orbital hub / node-graph). */
.abt-hero__viz { position: relative; justify-self: stretch; width: 100%; max-width: 30rem; margin-inline: auto; }
.abt-hero__stage { position: relative; }
.abt-hv__field {
    position: absolute;
    inset: -6% -18%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 42%, rgba(21, 96, 219, .13), rgba(47, 123, 255, .05) 46%, transparent 74%);
    filter: blur(8px);
}
.abt-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.abt-hv__box {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 28%, var(--line-strong));
    stroke-width: 1.5;
    filter: drop-shadow(0 8px 18px rgba(16, 42, 110, .13));
}
.abt-hv__glyph { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.abt-hv__node--ai .abt-hv__box { stroke: var(--brand); stroke-width: 2.2; }
.abt-hv__node--ai .abt-hv__glyph { stroke: var(--brand-strong); stroke-width: 1.7; }
.abt-hv__ai-glow { fill: rgba(47, 123, 255, .22); filter: blur(10px); }
.abt-hv__label { fill: var(--ink-soft); font: 650 15px/1 var(--font); letter-spacing: .01em; text-anchor: middle; }
.abt-hv__node--ai ~ .abt-hv__label { fill: var(--ink); font-weight: 700; font-size: 17px; }
.abt-hv__conn { stroke: var(--abt-line); stroke-width: 2.2; stroke-dasharray: 3 6; opacity: .7; fill: none; }
.abt-hv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M300 70 V230 C 300 275 190 290 108 420 C 108 465 220 490 300 610 V800");
    animation: abtHeroSig var(--abt-signal) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .abt-hv__sig { display: none; } }
@keyframes abtHeroSig { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 28.2 The idea - the page's first dark beat, right after the hero
   (dark reinforces this as one of BlueAquila's strongest ideas, and
   breaks what would otherwise be two light sections in a row) -------- */
.abt-idea {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #9fb0cd;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.abt-idea__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 26rem at 84% -10%, rgba(47, 123, 255, .16), transparent 60%),
        linear-gradient(var(--abt-grid-dark) 1px, transparent 1px) 0 0 / 52px 52px,
        linear-gradient(90deg, var(--abt-grid-dark) 1px, transparent 1px) 0 0 / 52px 52px;
    -webkit-mask-image: radial-gradient(120% 100% at 84% 0%, #000, transparent 68%);
    mask-image: radial-gradient(120% 100% at 84% 0%, #000, transparent 68%);
}
.abt-idea .eyebrow { color: var(--electric); }
.abt-idea .eyebrow::before { background: var(--electric); }
.abt-idea__statement {
    max-width: 26ch;
    margin: 0 0 1.1rem;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}
.abt-idea__body { margin: 0; max-width: 58ch; color: #9fb0cd; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.7; }
.abt-idea__viz-wrap { margin-top: clamp(2rem, 5vw, 3.25rem); width: 100%; }

.abt-iv { position: relative; }
.abt-iv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.abt-iv__wire { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1.4; stroke-dasharray: 3 6; opacity: .8; }
.abt-iv__ring { fill: none; stroke: var(--electric); stroke-width: 1.2; opacity: .4; }
.abt-iv__box { fill: #101b30; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; }
.abt-iv__glyph { fill: none; stroke: #bcd3ff; stroke-width: 1.6; stroke-linecap: round; }
.abt-iv__sat-ring { fill: #101b30; stroke: rgba(255, 255, 255, .2); stroke-width: 1.4; }
.abt-iv__sat-dot { fill: var(--electric); }
.abt-iv__label { fill: #9fb0cd; font: 650 14px/1 var(--font); }
.abt-iv__label--core { fill: #fff; font-weight: 700; text-anchor: middle; }
.abt-iv__sig { fill: var(--electric); opacity: 0; filter: drop-shadow(0 0 4px var(--electric)); transform-box: fill-box; transform-origin: center; animation: abtIdeaSig 6s ease-in-out infinite; }
.abt-iv__sig--0 { offset-path: path("M210 160 C 380 160 430 94 620 40"); animation-delay: 0s; }
.abt-iv__sig--1 { offset-path: path("M210 160 C 380 160 430 138 620 120"); animation-delay: -1.5s; }
.abt-iv__sig--2 { offset-path: path("M210 160 C 380 160 430 182 620 200"); animation-delay: -3s; }
.abt-iv__sig--3 { offset-path: path("M210 160 C 380 160 430 226 620 280"); animation-delay: -4.5s; }
@supports not (offset-path: path("M0 0 L1 1")) { .abt-iv__sig { display: none; } }
@keyframes abtIdeaSig { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 28.3 How we think - a large editorial field, not four cards -- */
.abt-principles-section { background: var(--bg); }
.abt-principles {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4rem);
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
    margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
    padding: 0;
}
.abt-principles__item { max-width: 50ch; }
.abt-principles__item:nth-child(2),
.abt-principles__item:nth-child(4) { margin-top: clamp(1rem, 3vw, 2rem); }
.abt-principles__idx {
    display: block;
    margin-bottom: .65rem;
    font: 700 .8rem/1 var(--font);
    letter-spacing: .1em;
    color: color-mix(in srgb, var(--brand) 55%, var(--line-strong));
}
.abt-principles__title { margin: 0 0 .55rem; font-size: clamp(1.2rem, 2.1vw, 1.55rem); letter-spacing: -0.01em; line-height: 1.25; }
.abt-principles__desc { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }

/* ---- 28.4 From service to system - the strongest visual, dark ---- */
.abt-progression-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #9fb0cd;
}
.abt-progression-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48rem 26rem at 18% -10%, rgba(47, 123, 255, .16), transparent 60%),
        linear-gradient(var(--abt-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, var(--abt-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(130% 110% at 14% -10%, #000, transparent 72%);
    mask-image: radial-gradient(130% 110% at 14% -10%, #000, transparent 72%);
}
.abt-progression-section .eyebrow { color: var(--electric); }
.abt-progression-section .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }
.abt-progression-section .section__head h2 { color: #fff; max-width: 30ch; }
.abt-progression-section .section__intro { color: #9fb0cd; }

/* A branching architecture: a centred vertical spine that splits into two
   parallel boxes (Data / Workflow) and converges again - not a horizontal
   rail with circular icons. Works unchanged from mobile to desktop, so no
   breakpoint-specific layout override is needed below. */
.abt-progress {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.25rem, 5vw, 3rem);
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;
    padding: 0;
}
.abt-progress__stage,
.abt-progress__branch { position: relative; }
.abt-progress__stage:not(:first-child)::before,
.abt-progress__branch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * clamp(2.25rem, 5vw, 3rem));
    width: 2px;
    height: clamp(2.25rem, 5vw, 3rem);
    background: rgba(255, 255, 255, .16);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.abt-progress.is-active .abt-progress__stage:not(:first-child)::before,
.abt-progress.is-active .abt-progress__branch::before { transform: translateX(-50%) scaleY(1); }
/* the branch's own fork/join svg already fills the gap above and below
   it, so the stage that immediately follows a branch skips the plain
   connector to avoid drawing two lines in the same gap. */
.abt-progress__branch + .abt-progress__stage::before { display: none; }

.abt-progress__stage,
.abt-progress__branch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-width: 15rem;
    padding: 1.4rem 2.1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--abt-radius);
    background: #101b30;
    text-align: center;
    transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.abt-progress.is-active .abt-progress__stage,
.abt-progress.is-active .abt-progress__branch-item {
    border-color: color-mix(in srgb, var(--electric) 45%, transparent);
    background: color-mix(in srgb, var(--electric) 10%, #101b30);
    box-shadow: 0 0 0 4px rgba(47, 123, 255, .1);
}
.abt-progress__idx { font: 700 .78rem/1 var(--font); letter-spacing: .1em; color: #7d8fb3; }
.abt-progress.is-active .abt-progress__idx { color: #9fc0ff; }
.abt-progress__label { font-size: 1.15rem; font-weight: 650; color: #e4ebfa; }

.abt-progress__branch { display: flex; flex-direction: column; align-items: center; }
.abt-progress__fork,
.abt-progress__join { display: block; width: 13.5rem; max-width: 60vw; height: 2.75rem; overflow: visible; }
.abt-progress__fork path,
.abt-progress__join path {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    transition: stroke-dashoffset .6s cubic-bezier(.22, .61, .36, 1), stroke .4s ease;
}
.abt-progress.is-active .abt-progress__fork path,
.abt-progress.is-active .abt-progress__join path { stroke-dashoffset: 0; stroke: color-mix(in srgb, var(--electric) 55%, transparent); }
.abt-progress__branch-row { display: flex; gap: clamp(1rem, 3vw, 1.75rem); flex-wrap: wrap; justify-content: center; }

/* the final stage is a direction, not a claim - kept visually open/dashed */
.abt-progress__stage--open { border-style: dashed; background: transparent; }
.abt-progress.is-active .abt-progress__stage--open {
    border-color: rgba(47, 123, 255, .55);
    background: transparent;
    box-shadow: none;
}
.abt-progress.is-active .abt-progress__stage--open .abt-progress__label { color: #9fc0ff; }

/* ---- 28.5 What we build - architecture, not cards (light) -------- */
.abt-architecture-section { background: var(--bg); padding-block: clamp(2.5rem, 5vw, 4rem); }
.abt-arch { position: relative; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.abt-arch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.abt-arch__wire { fill: none; stroke: var(--abt-line); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .75; }
.abt-arch__wire--base { opacity: .5; }
.abt-arch__biz rect { fill: var(--navy); stroke: var(--navy-soft); stroke-width: 1; }
.abt-arch__biz text { fill: #fff; font: 700 11px/1 var(--font); letter-spacing: .08em; text-anchor: middle; }
.abt-arch__core-ring {
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.4;
    stroke-dasharray: 3 6;
    opacity: .55;
    transform-box: fill-box;
    transform-origin: center;
    animation: abtArchSpin 60s linear infinite;
}
.abt-arch__core-disc { fill: #fff; stroke: color-mix(in srgb, var(--brand) 30%, var(--line-strong)); stroke-width: 1.4; filter: drop-shadow(0 6px 14px rgba(16, 42, 110, .16)); }
.abt-arch__core-link { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); stroke-width: 1.3; stroke-linecap: round; }
.abt-arch__core-pt { fill: var(--brand); opacity: .75; }
.abt-arch__core-hub { fill: var(--brand-strong); animation: abtHubPulse 3.6s ease-in-out infinite; }
.abt-arch__core-label { fill: var(--ink-soft); font: 700 10px/1 var(--font); letter-spacing: .14em; text-anchor: middle; }
.abt-arch__node rect { fill: #fff; stroke: color-mix(in srgb, var(--brand) 26%, var(--line-strong)); stroke-width: 1.4; filter: drop-shadow(0 8px 16px rgba(16, 42, 110, .10)); }
.abt-arch__node text { fill: var(--ink); font: 700 9.5px/1 var(--font); letter-spacing: .03em; text-anchor: middle; }
.abt-arch__base { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; }
.abt-arch__base-label { fill: var(--brand-strong); font: 700 10px/1 var(--font); letter-spacing: .14em; text-anchor: middle; }
.abt-arch__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M340 38 V100 C 340 130 90 130 90 160");
    animation: abtArchSig 5.5s ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .abt-arch__sig { display: none; } }
@keyframes abtArchSpin { to { rotate: 360deg; } }
@keyframes abtHubPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes abtArchSig { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 28.6 The BlueAquila approach - an alternating dark spine, not a
   horizontal rail of diamonds. A fixed centre column of numbered markers
   runs down the section; the title/description alternate left and right
   of it, one step per row - the same "system moving through states" idea
   as the Progression section above, deliberately built differently (a
   vertical zigzag instead of a branch) so the two dark sections don't
   repeat the same visual grammar. Paired with Progression as the page's
   second dark beat (light -> light -> light -> DARK -> light -> DARK ->
   light -> dark CTA). ---- */
.abt-approach-section { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.abt-approach-section .eyebrow { color: var(--electric); }
.abt-approach-section .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }
.abt-approach-section .section__head h2 { color: #fff; max-width: 34ch; }
.abt-approach {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 2.75rem);
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;
    padding: 0;
}
.abt-approach__step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    column-gap: clamp(1.25rem, 4vw, 2.5rem);
}
.abt-approach__step:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * clamp(2rem, 5vw, 2.75rem));
    width: 2px;
    height: clamp(2rem, 5vw, 2.75rem);
    background: rgba(255, 255, 255, .14);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.abt-approach.is-active .abt-approach__step:not(:first-child)::before { transform: translateX(-50%) scaleY(1); }
.abt-approach__marker {
    grid-column: 2;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: none;
    border-radius: 50%;
    background: #101b30;
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .86rem;
    font-weight: 700;
    color: #7d8fb3;
    transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.abt-approach.is-active .abt-approach__marker {
    border-color: color-mix(in srgb, var(--electric) 55%, transparent);
    background: color-mix(in srgb, var(--electric) 16%, #101b30);
    color: #eaf1ff;
}
.abt-approach__step:nth-child(odd) .abt-approach__body { grid-column: 1; text-align: right; }
.abt-approach__step:nth-child(even) .abt-approach__body { grid-column: 3; text-align: left; }
.abt-approach__title { margin: 0 0 .4rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 700; color: #fff; }
.abt-approach__step p { margin: 0; color: #9fb0cd; font-size: .95rem; line-height: 1.6; }

/* ---- 28.7 Real work - one featured project, evidence not a grid --- */
.abt-work-section { background: var(--bg); }
.abt-work__featured { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.abt-work__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.abt-work__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.abt-work__more a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.abt-work__more a span { display: inline-block; transition: transform .18s ease; }
.abt-work__more a:hover span { transform: translateX(4px); }
.abt-work__more a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---- 28.8 Final CTA spacing on this page ------------------------- */
.abt-page .cta-band { padding-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ---- 28.9 Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
    .abt-hero__grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 7vw, 3rem); }
    .abt-hero__viz { margin-inline: auto; }
    .abt-principles { grid-template-columns: 1fr; max-width: 34rem; }
    .abt-principles__item:nth-child(2),
    .abt-principles__item:nth-child(4) { margin-top: 0; }
}
@media (max-width: 640px) {
    /* Approach: the desktop zigzag (marker centred, text alternating left/
       right) narrows to a plain left-aligned column - marker then text,
       every row the same, still linked by the same vertical connector. */
    .abt-approach__step { grid-template-columns: auto 1fr; column-gap: 1rem; }
    .abt-approach__marker { grid-column: 1; }
    .abt-approach__step:nth-child(odd) .abt-approach__body,
    .abt-approach__step:nth-child(even) .abt-approach__body { grid-column: 2; text-align: left; }
    .abt-approach__step:not(:first-child)::before { left: 1.55rem; }
}
@media (max-width: 900px) {
    .abt-work__pair { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.5rem); }
}
@media (max-width: 620px) {
    .abt-hero__actions .btn { flex: 1 1 auto; }
    /* keep these two wide diagrams' labels legible rather than shrinking
       past reading size - a deliberate, scoped horizontal scroll (same
       pattern as the Website Packages comparison table), not page
       overflow. Both are decorative (aria-hidden); nothing here is
       otherwise-inaccessible content. */
    .abt-arch-svg { min-width: 620px; }
    .abt-arch { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
    .abt-iv-svg { min-width: 640px; }
    .abt-iv { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
}
/* ---- 28.10 Off-screen pause + reduced motion ---------------------- */
.abt-hv.is-paused *,
.abt-iv.is-paused *,
.abt-arch.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .abt-hv__sig,
    .abt-iv__sig,
    .abt-arch__core-ring,
    .abt-arch__core-hub,
    .abt-arch__sig { animation: none !important; }
    .abt-hv__sig,
    .abt-iv__sig,
    .abt-arch__sig { opacity: 0 !important; }
    .abt-progress__stage::before,
    .abt-progress__fork path,
    .abt-progress__join path,
    .abt-approach__step::before { transition: none; }
    .abt-work__more a:hover span { transform: none; }
}

/* =========================================================================
   CONTACT / START A PROJECT  (29)
   -------------------------------------------------------------------------
   The enquiry form's own premium experience: a compact "project intake"
   hero visual, a fieldset-grouped form (Project / Scope / Contact) with
   native radio buttons styled as pills, and a page-scoped success state.
   Distinct from every other page's diagram, and from the retired plain
   enquiry-form layout (section 24.11).

   Every selector is namespaced .con-* and the visual-system tokens are
   scoped to .con-page - nothing here touches the frozen Homepage, Services
   (25), Website Packages (26), Portfolio (27) or About (28), and .page-hero
   (shared with /pricing and /ai-solutions) is left untouched. The shared
   .alert flash message (layouts/default.php) is also untouched; the success
   panel below is a separate, page-scoped element. Motion reuses the shared
   [data-reveal] hooks and the .con-iv entry in the main.js off-screen pause
   list. The honeypot's .hp-field rule (section 19) is unchanged.
   ========================================================================= */

.con-page {
    --con-line: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    --con-glow: rgba(47, 123, 255, .16);
    --con-signal: 5.5s;
}

/* The shared .alert--success banner (layouts/default.php, section 7) is
   left completely unmodified - it still renders on every other page's
   flash exactly as before. Here it would sit directly above the richer,
   page-scoped .con-done panel that already restates the same confirmation
   with a next action; :has() hides only that one duplicate instance, and
   degrades safely to both banners showing if a browser lacks :has(). */
.alert--success:has(+ .page-wrap .con-done) { display: none; }

/* ---- 29.1 Hero -------------------------------------------------------- */
.con-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 3.75rem); border-bottom: 1px solid var(--line); }
.con-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 24rem at 86% -10%, var(--con-glow), transparent 60%),
        var(--bg);
}
.con-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.con-hero__title { margin: 0 0 1rem; font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.02em; line-height: 1.08; max-width: 18ch; }
.con-hero__lead { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.65; }
.con-hero__viz { position: relative; justify-self: center; width: 100%; max-width: 15rem; }

/* ---- 29.1b Hero visual - a compact 4-stage intake pipeline, distinct
   from the Homepage engine, Services orbital, Website Packages growth
   line, Portfolio node-graphs and About's vertical system stack. */
.con-iv { position: relative; }
.con-iv__field {
    position: absolute;
    inset: -10% -60%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 40%, rgba(21, 96, 219, .12), rgba(47, 123, 255, .05) 46%, transparent 74%);
    filter: blur(8px);
}
.con-iv__svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.con-iv__box {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 28%, var(--line-strong));
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 14px rgba(16, 42, 110, .12));
}
.con-iv__glyph { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.con-iv__node--build .con-iv__box { stroke: var(--brand); stroke-width: 2; }
.con-iv__node--build .con-iv__glyph { stroke: var(--brand-strong); }
.con-iv__label { fill: var(--ink-soft); font: 650 11px/1 var(--font); letter-spacing: .01em; }
.con-iv__node--build ~ .con-iv__label { fill: var(--ink); font-weight: 700; }
.con-iv__conn { stroke: var(--con-line); stroke-width: 2; stroke-dasharray: 3 5; opacity: .7; }
.con-iv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M46 34 V334");
    animation: conHeroSig var(--con-signal, 5.5s) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .con-iv__sig { display: none; } }
@keyframes conHeroSig { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 29.2 Project starter ---------------------------------------- */
.con-starter { background: var(--surface); border-bottom: 1px solid var(--line); }
.con-starter__grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.con-starter__aside { position: sticky; top: clamp(1.5rem, 4vw, 2.5rem); }
.con-starter__aside-title { margin: 0 0 1rem; font-size: 1.15rem; }
.con-starter__steps { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: con-step; }
.con-starter__steps li {
    position: relative;
    padding-left: 2.3rem;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.55;
    counter-increment: con-step;
}
.con-starter__steps li::before {
    content: counter(con-step);
    position: absolute;
    left: 0;
    top: -.05rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-wash);
    color: var(--brand);
    font-weight: 700;
    font-size: .78rem;
}
.con-starter__k { margin: 0 0 .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.con-starter__contacts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .4rem; font-size: .95rem; }
.con-starter__contacts a { font-weight: 600; }
.con-starter__note { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }

/* ---- 29.3 Form ----------------------------------------------------- */
.con-form { max-width: 42rem; }
.con-group { border: 0; margin: 0 0 clamp(1.5rem, 3vw, 2.1rem); padding: 0; }
.con-group:last-of-type { margin-bottom: 0; }
.con-group__legend {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--line);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink);
}
.con-group__k { color: var(--brand); font-variant-numeric: tabular-nums; }
.con-field { margin-bottom: 1.15rem; }
.con-field:last-child { margin-bottom: 0; }
.con-field--compact { max-width: 24rem; }
.con-field__label { display: block; margin-bottom: .5rem; font-weight: 650; font-size: .92rem; color: var(--ink); }
.con-field__opt { font-weight: 400; color: var(--ink-soft); font-size: .85em; }
.con-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.15rem; }
.con-row .con-field { margin-bottom: 0; }

.con-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    width: 100%;
    min-height: 46px;
    padding: .65rem .85rem;
    font: inherit;
    font-size: 16px; /* >=16px stops iOS zooming on focus */
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.con-form select { min-height: 46px; }
.con-form textarea { min-height: 9rem; line-height: 1.6; resize: vertical; }
.con-form :is(input, select, textarea):focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
/* 65% previously computed to ~3.4:1 against the form's white background -
   below the 4.5:1 WCAG AA minimum for normal text. Raised to 85%, which
   keeps placeholder text visibly muted/lighter than real input text
   (still not full-strength var(--ink-soft)) while clearing ~5.5:1. */
.con-form ::placeholder { color: color-mix(in srgb, var(--ink-soft) 85%, transparent); }

/* Radio-pill selectors (service type, budget, timeline). Real <input
   type="radio"> elements, laid transparently over their <label> so click,
   tab and arrow-key behaviour is entirely native; only the paint is custom. */
.con-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.con-pill { position: relative; display: inline-flex; }
.con-pill__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.con-pill label {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .7rem 1.15rem .7rem 2.35rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.con-pill label::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 50%;
    width: 14px;
    height: 14px;
    translate: 0 -50%;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.con-pill:hover label { border-color: var(--brand); }
.con-pill__input:checked + label { border-color: var(--brand); background: var(--brand); color: #fff; }
.con-pill__input:checked + label::before { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--brand); }
.con-pill__input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }
.con-pills--sm .con-pill label { padding: .55rem 1rem .55rem 2rem; font-size: .88rem; }
.con-pills--sm .con-pill label::before { left: .7rem; width: 12px; height: 12px; }

.con-submit { margin-top: 1.8rem; }
.con-submit__note { margin: .9rem 0 0; color: var(--ink-soft); font-size: .85rem; }

/* ---- 29.4 Success state --------------------------------------------- */
.con-done { position: relative; overflow: hidden; min-height: 56vh; display: flex; align-items: center; padding-block: clamp(3.5rem, 9vw, 6rem); }
.con-done__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50rem 30rem at 50% -10%, var(--con-glow), transparent 60%), var(--bg);
}
.con-done__panel { max-width: 34rem; margin-inline: auto; text-align: center; }
.con-done__panel .eyebrow { justify-content: center; }
.con-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--brand-wash);
}
.con-done__mark svg { width: 2rem; height: 2rem; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.con-done__title { margin: 0 0 .85rem; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.02em; }
.con-done__lead { margin: 0 0 2rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.con-done__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---- 29.5 Responsive ------------------------------------------------- */
@media (max-width: 1080px) {
    .con-hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.75rem); }
    .con-hero__viz { order: -1; max-width: 11rem; margin-inline: auto; }
    .con-starter__grid { grid-template-columns: 1fr; }
    .con-starter__aside { position: static; order: 2; }
}
@media (max-width: 620px) {
    .con-row { grid-template-columns: 1fr; }
    .con-submit .btn { width: 100%; }
    .con-done__actions .btn { flex: 1 1 auto; }
}

/* ---- 29.6 Off-screen pause + reduced motion ------------------------- */
.con-iv.is-paused * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .con-iv__sig { animation: none !important; opacity: 0 !important; }
}

/* =========================================================================
   GLOBAL FLOATING WHATSAPP BUTTON  (30)
   -------------------------------------------------------------------------
   Site-wide contact affordance, rendered once from layouts/default.php via
   partials/whatsapp-button.php - present on every page without being
   duplicated per template. A solid WhatsApp-green circular button
   (.whatsapp-float) with a pure white handset icon and a continuous
   expanding-ring pulse: .wa-ping is a real child element (not a
   pseudo-element) - a same-size, same-colour disc that scales up to 1.7x
   and fades, the classic "ping" notification effect, given a negative
   z-index so it stays behind the icon and only the ring beyond the
   button's own silhouette is ever visible. No tooltip. No JavaScript is
   used anywhere in this component.
   ========================================================================= */
.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    border: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 2px 6px rgba(11, 18, 32, .15);
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(37, 211, 102, .55), 0 2px 8px rgba(11, 18, 32, .18);
}
.whatsapp-float:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}
.whatsapp-float__icon { width: 30px; height: 30px; display: block; fill: #fff; }

/* Ping pulse - a real child element, not ::before. Same size/colour as
   the button at rest (invisible, exactly covered by it); as it scales up
   and fades, the growing ring becomes visible around the button. */
.wa-ping {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: #25d366;
    animation: wa-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes wa-pulse {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.7); }
}

@media (max-width: 600px) {
    .whatsapp-float { width: 52px; height: 52px; right: 1.1rem; bottom: 1.1rem; }
    .whatsapp-float__icon { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float { transition: none; }
    .whatsapp-float:hover { transform: none; }
    .wa-ping { animation: none; }
}


/* =========================================================================
   AI & AUTOMATION FLAGSHIP PAGE  (31)  -  V2 re-art-direction
   -------------------------------------------------------------------------
   V2 replaces the V1 card-grid composition with one continuous system:
   a large branching hero diagram, two shared "orbit" radial selectors
   (build-your-system / what-can-be-automated) built from real radio
   inputs + labels (keyboard accessible, no JavaScript), a before/after
   flow comparison instead of four small cards, and enlarged dark-mode
   diagrams for the AI-assistant and automation/AI/human sections. Every
   selector is namespaced .ba-ai-* and scoped to .ba-ai-page - nothing
   here touches the frozen Homepage, Services (25), Website Packages
   (26), Portfolio (27), About (28), Contact (29) or the WhatsApp
   button (30). Dark sections reuse the same navy surface already
   established for the Homepage's closing panel (var(--navy), #c7d3ea
   body copy, #fff headings) rather than a new palette.
   ========================================================================= */
.ba-ai-page {
    --ba-ai-line: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    --ba-ai-line-dark: rgba(120, 170, 255, .35);
    --ba-ai-glow: rgba(47, 123, 255, .16);
    --ba-ai-signal: 7s;
}

/* Scoped-only eyebrow treatment: the shared .eyebrow::before bar (a short
   decorative rule, used site-wide) reads as one repeated element too many
   on this page's denser, more technical layout. Overridden here to a
   single dot instead - the shared rule/other pages are untouched. */
.ba-ai-page .eyebrow::before {
    width: 6px;
    height: 6px;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--brand);
}
.ba-ai-page .eyebrow--on-wash::before { background: var(--brand-strong); }

/* ---- 31.1 Hero -------------------------------------------------------- */
.ba-ai-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line); }
.ba-ai-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 34rem at 82% 10%, var(--ba-ai-glow), transparent 60%),
        var(--bg);
}
.ba-ai-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.ba-ai-hero__copy { max-width: 34rem; }
.ba-ai-hero__title { margin: 0 0 1.1rem; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.02em; line-height: 1.08; max-width: 16ch; }
.ba-ai-hero__lead { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.65; }
.ba-ai-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.ba-ai-hero__viz { position: relative; width: 100%; max-width: 21rem; margin-inline: auto; }

/* Hero system - a large branching architecture (business -> input -> data
   -> workflow + automation -> intelligence -> ai). Field/glow give it
   depth; the offset-path signals give it a sense of "processing". */
.ba-ai-hero-sys { position: relative; width: 100%; }
.ba-ai-hero-sys__field {
    position: absolute;
    inset: -8% -30%;
    z-index: 0;
    border-radius: 46%;
    background: radial-gradient(circle at 50% 20%, rgba(47, 123, 255, .16), rgba(47, 123, 255, .04) 46%, transparent 74%);
    filter: blur(14px);
}
.ba-ai-hero-sys__svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.ba-ai-hero-sys__wire { fill: none; stroke: var(--ba-ai-line); stroke-width: 2; stroke-dasharray: 3 6; opacity: .8; }
.ba-ai-hero-sys__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: 0; transition: opacity .3s ease, stroke .3s ease; }
.ba-ai-hero-sys__box {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
    stroke-width: 1.6;
    filter: drop-shadow(0 10px 18px rgba(16, 42, 110, .14));
    transition: stroke .3s ease, filter .3s ease;
}
.ba-ai-hero-sys__glyph { fill: none; stroke: color-mix(in srgb, var(--brand) 60%, var(--line-strong)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ba-ai-hero-sys__node--ai .ba-ai-hero-sys__box,
.ba-ai-hero-sys__node--action .ba-ai-hero-sys__box { stroke: var(--brand); stroke-width: 2.2; }
.ba-ai-hero-sys__node--ai .ba-ai-hero-sys__glyph,
.ba-ai-hero-sys__node--action .ba-ai-hero-sys__glyph { stroke: var(--brand-strong); }
.ba-ai-hero-sys__node--action .ba-ai-hero-sys__box { fill: var(--brand-wash); }
.ba-ai-hero-sys__label { fill: var(--ink-soft); font: 700 12px/1 var(--font); letter-spacing: .06em; }
.ba-ai-hero-sys__label--ai { fill: var(--ink); }
.ba-ai-hero-sys__node { cursor: pointer; outline: none; }
.ba-ai-hero-sys__node:hover .ba-ai-hero-sys__box,
.ba-ai-hero-sys__node:focus-visible .ba-ai-hero-sys__box { stroke: var(--brand); filter: drop-shadow(0 14px 24px rgba(16, 42, 110, .22)); }
.ba-ai-hero-sys__node:hover .ba-ai-hero-sys__ring,
.ba-ai-hero-sys__node:focus-visible .ba-ai-hero-sys__ring { opacity: 1; stroke: var(--brand); }
.ba-ai-hero-sys__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    animation: baAiHeroSig var(--ba-ai-signal) ease-in-out infinite;
}
.ba-ai-hero-sys__sig--a { offset-path: path("M180 566 V366 C180 300 96 300 96 250 C96 190 150 160 180 142 V-52"); }
.ba-ai-hero-sys__sig--b { offset-path: path("M180 566 V366 C180 300 264 300 264 250 C264 190 210 160 180 142 V-52"); animation-delay: calc(var(--ba-ai-signal) / -2); }
@supports not (offset-path: path("M0 0 L1 1")) { .ba-ai-hero-sys__sig { display: none; } }
@keyframes baAiHeroSig { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 31.2 Problem: before/after comparison (no cards) ------------------ */
.ba-ai-problem { background: var(--surface); border-bottom: 1px solid var(--line); }
.ba-ai-problem .ba-ai-flow__badge {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ba-ai-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.ba-ai-flow__title { margin: 0 0 1.25rem; font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; }
.ba-ai-flow--manual .ba-ai-flow__title { color: var(--ink-soft); }
.ba-ai-flow--auto .ba-ai-flow__title { color: var(--brand); }
.ba-ai-flow__steps { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ba-ai-flow__steps li { display: flex; flex-direction: column; align-items: flex-start; }
.ba-ai-flow__steps li span:first-child {
    padding: .9rem 1.15rem;
    width: 100%;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .02em;
}
.ba-ai-flow--manual .ba-ai-flow__steps li span:first-child {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 60%, #fff);
    color: var(--ink-soft);
}
.ba-ai-flow--auto .ba-ai-flow__steps li span:first-child {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.ba-ai-flow__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-block: .35rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: #fff;
    font-size: .82rem;
    line-height: 1;
    color: var(--ink-soft);
}
.ba-ai-flow--auto .ba-ai-flow__arrow { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); }
.ba-ai-flow__tags { margin: 0; font-size: .82rem; letter-spacing: .02em; color: var(--ink-soft); }
.ba-ai-flow--auto .ba-ai-flow__tags { color: var(--brand-strong); font-weight: 650; }
.ba-ai-compare__pivot { display: flex; align-items: center; justify-content: center; }
.ba-ai-compare__pivot-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(160deg, #fff, var(--surface));
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-blue);
    color: var(--brand);
    font-size: 1.4rem;
    line-height: 1;
}

/* ---- 31.3 The core idea (dark, enlarged) -------------------------------- */
.ba-ai-idea-section { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #c7d3ea; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.ba-ai-idea-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120, 170, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
}
/* Side-by-side, not stacked-and-centered: this is what lets the diagram
   actually use the section's width instead of sitting as a narrow
   column in a sea of dark space. */
.ba-ai-idea__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.ba-ai-idea__head { margin-bottom: 0; }
.ba-ai-idea-section h2 { color: #fff; margin: 0 0 1.1rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.02em; line-height: 1.14; }
.ba-ai-idea__body { margin: 0; max-width: 40ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.7; color: #b0c0dc; }
.ba-ai-idea__viz-wrap { width: 100%; max-width: 15.5rem; margin-inline: auto; }

.ba-ai-idea-stage { position: relative; }
.ba-ai-idea__field {
    position: absolute;
    inset: -10% -50%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 42%, rgba(47, 123, 255, .22), rgba(47, 123, 255, .06) 46%, transparent 74%);
    filter: blur(10px);
}
.ba-ai-idea-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.ba-ai-idea-hv__box { fill: rgba(26, 43, 72, .7); stroke: var(--ba-ai-line-dark); stroke-width: 1.4; opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.ba-ai-idea-hv__glyph { fill: none; stroke: rgba(200, 220, 255, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .5s ease .1s; }
.ba-ai-idea-hv__node--ai .ba-ai-idea-hv__box { stroke: var(--electric); stroke-width: 2; }
.ba-ai-idea-hv__node--ai .ba-ai-idea-hv__glyph { stroke: #fff; }
.ba-ai-idea-hv__label { fill: #93a6cc; font: 650 12px/1 var(--font); letter-spacing: .01em; opacity: 0; transition: opacity .5s ease .15s; }
.ba-ai-idea-hv__label--ai { fill: #fff; font-weight: 700; }
.ba-ai-idea-hv__conn { stroke: var(--ba-ai-line-dark); stroke-width: 2; stroke-dasharray: 3 5; opacity: 0; transition: opacity .5s ease; }
/* Progressive "layer activates" reveal - each node/label/connector fades
   and settles in sequence as the section scrolls into view. */
[data-reveal].is-revealed .ba-ai-idea-hv__box,
.is-revealed .ba-ai-idea-hv__box { opacity: 1; transform: scale(1); }
[data-reveal].is-revealed .ba-ai-idea-hv__glyph,
.is-revealed .ba-ai-idea-hv__glyph,
[data-reveal].is-revealed .ba-ai-idea-hv__label,
.is-revealed .ba-ai-idea-hv__label,
[data-reveal].is-revealed .ba-ai-idea-hv__conn,
.is-revealed .ba-ai-idea-hv__conn { opacity: 1; }
.ba-ai-idea-hv__node:nth-of-type(1) .ba-ai-idea-hv__box,
.ba-ai-idea-hv__node:nth-of-type(1) .ba-ai-idea-hv__glyph { transition-delay: .05s; }
.ba-ai-idea-hv__node:nth-of-type(2) .ba-ai-idea-hv__box,
.ba-ai-idea-hv__node:nth-of-type(2) .ba-ai-idea-hv__glyph { transition-delay: .2s; }
.ba-ai-idea-hv__node:nth-of-type(3) .ba-ai-idea-hv__box,
.ba-ai-idea-hv__node:nth-of-type(3) .ba-ai-idea-hv__glyph { transition-delay: .35s; }
.ba-ai-idea-hv__node:nth-of-type(4) .ba-ai-idea-hv__box,
.ba-ai-idea-hv__node:nth-of-type(4) .ba-ai-idea-hv__glyph { transition-delay: .5s; }
.ba-ai-idea-hv__node:nth-of-type(5) .ba-ai-idea-hv__box,
.ba-ai-idea-hv__node:nth-of-type(5) .ba-ai-idea-hv__glyph { transition-delay: .65s; }
.ba-ai-idea-hv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M52 34 V426");
    animation: baAiIdeaSig var(--ba-ai-signal) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .ba-ai-idea-hv__sig { display: none; } }
@keyframes baAiIdeaSig { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

.ba-ai-build-section { background: var(--bg); border-bottom: 1px solid var(--line); }
.ba-ai-modules-section { background: var(--bg); border-bottom: 1px solid var(--line); }

/* ---- 31.4 Shared hub-and-spoke system (build-your-system / one-engine) --
   Replaces the earlier circular "orbit" entirely - a large rectangular
   hub with asymmetric spokes and (build only) a connected downstream
   pipeline, not a circle. Every wire is hand-placed in the PHP partial
   to terminate at the hub's or a downstream node's rectangular edge, so
   no connector ever crosses text by construction (not by opacity/blur
   tricks). The six real inputs are absolutely-positioned <label>s over
   an aria-hidden decorative SVG, sharing its exact coordinate space
   (percentages of the same 640x560 viewBox), so their position is exact
   rather than approximated. */
.ba-ai-hub { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
/* Real text naming the hub/engine, present for assistive tech at every
   width (the SVG it otherwise duplicates is aria-hidden decoration) -
   visually hidden at desktop widths where the diagram's own on-canvas
   label already shows it, shown normally once that diagram is hidden
   below the mobile breakpoint. */
.ba-ai-hub__core-label-mobile {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
.ba-ai-hub__architecture { position: relative; width: min(100%, 44rem); margin-inline: auto; aspect-ratio: 640 / 560; }
/* "Modules" instance has no downstream pipeline, so it only ever draws
   into the top part of the shared 640x560 coordinate space - crop the
   box to that used region (paired with preserveAspectRatio="slice" on
   the SVG) instead of reserving the full height as dead space. */
.ba-ai-hub--modules .ba-ai-hub__architecture { aspect-ratio: 640 / 400; }
.ba-ai-hub__stage { position: absolute; inset: 0; }
.ba-ai-hub__svg { display: block; width: 100%; height: 100%; }
.ba-ai-hub__wire { fill: none; stroke: var(--ba-ai-line); stroke-width: 2; opacity: .55; transition: opacity .25s ease, stroke .25s ease; }
.ba-ai-hub__spine { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.ba-ai-hub__core { fill: #fff; stroke: var(--brand); stroke-width: 2.5; filter: drop-shadow(0 14px 28px rgba(16, 42, 110, .18)); }
.ba-ai-hub__core-label { fill: var(--ink); font: 700 16px/1 var(--font); letter-spacing: .01em; }
.ba-ai-hub__node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.6; transition: fill .3s ease, stroke .3s ease; }
.ba-ai-hub__node--ai { stroke: var(--brand); fill: var(--brand-wash); }
.ba-ai-hub__node--action { stroke: var(--brand); fill: #fff; stroke-width: 2; }
.ba-ai-hub__node-label { fill: var(--ink-soft); font: 650 12.5px/1 var(--font); letter-spacing: .03em; }
.ba-ai-hub__node-label--ai,
.ba-ai-hub__node-label--action { fill: var(--ink); font-weight: 800; }

/* Real, keyboard-focusable inputs positioned exactly over their SVG
   counterpart, using the same coordinate space as percentages. */
.ba-ai-hub__inputs { position: absolute; inset: 0; }
.ba-ai-hub__input {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .95rem;
    min-width: 7.25rem;
    min-height: 2.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    font-weight: 650;
    font-size: .82rem;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ba-ai-hub__input:hover { border-color: var(--brand); transform: translate(-50%, -50%) translateY(-2px); }
.ba-ai-hub__input--0 { left: 87.5%; top: 14.3%; }
.ba-ai-hub__input--1 { left: 50%;   top: 5.4%; }
.ba-ai-hub__input--2 { left: 11.7%; top: 14.3%; }
.ba-ai-hub__input--3 { left: 9.4%;  top: 39.3%; }
.ba-ai-hub__input--4 { left: 89.8%; top: 39.3%; }
.ba-ai-hub__input--5 { left: 31.3%; top: 57.1%; }
/* Same spoke coordinates re-expressed against the shorter 400-unit
   "modules" crop above, so the labels still land exactly on their
   wire endpoints instead of drifting toward the (now cropped-away)
   bottom of the box. */
.ba-ai-hub--modules .ba-ai-hub__input--0 { top: 20%; }
.ba-ai-hub--modules .ba-ai-hub__input--1 { top: 7.5%; }
.ba-ai-hub--modules .ba-ai-hub__input--2 { top: 20%; }
.ba-ai-hub--modules .ba-ai-hub__input--3 { top: 55%; }
.ba-ai-hub--modules .ba-ai-hub__input--4 { top: 55%; }
.ba-ai-hub--modules .ba-ai-hub__input--5 { top: 80%; }

/* Active spoke + input highlighting - one explicit rule per id, matching
   the same pattern proven safe on the previous orbit component. */
#ba-ai-src-0:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--0,
#ba-ai-src-1:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--1,
#ba-ai-src-2:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--2,
#ba-ai-src-3:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--3,
#ba-ai-src-4:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--4,
#ba-ai-src-5:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--5,
#ba-ai-cat-0:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--0,
#ba-ai-cat-1:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--1,
#ba-ai-cat-2:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--2,
#ba-ai-cat-3:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--3,
#ba-ai-cat-4:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--4,
#ba-ai-cat-5:checked ~ .ba-ai-hub__architecture .ba-ai-hub__wire--5 {
    stroke: var(--brand);
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(47, 123, 255, .5));
}
#ba-ai-src-0:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--0,
#ba-ai-src-1:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--1,
#ba-ai-src-2:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--2,
#ba-ai-src-3:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--3,
#ba-ai-src-4:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--4,
#ba-ai-src-5:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--5,
#ba-ai-cat-0:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--0,
#ba-ai-cat-1:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--1,
#ba-ai-cat-2:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--2,
#ba-ai-cat-3:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--3,
#ba-ai-cat-4:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--4,
#ba-ai-cat-5:checked ~ .ba-ai-hub__architecture .ba-ai-hub__input--5 {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-blue);
}
/* Downstream pipeline (build only) illuminates whenever any source is
   selected - one always is, by default. */
.ba-ai-hub--build:has(.ba-ai-hub__radio:checked) .ba-ai-hub__node {
    stroke: var(--brand);
}
.ba-ai-hub--build:has(.ba-ai-hub__radio:checked) .ba-ai-hub__spine {
    stroke: var(--brand);
    opacity: .8;
}

/* Keyboard focus - matched by id, same reasoning as the checked-state
   rules (the radio and its label are not in an ancestor/descendant
   relationship CSS can otherwise bridge). */
#ba-ai-src-0:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--0,
#ba-ai-src-1:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--1,
#ba-ai-src-2:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--2,
#ba-ai-src-3:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--3,
#ba-ai-src-4:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--4,
#ba-ai-src-5:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--5,
#ba-ai-cat-0:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--0,
#ba-ai-cat-1:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--1,
#ba-ai-cat-2:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--2,
#ba-ai-cat-3:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--3,
#ba-ai-cat-4:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--4,
#ba-ai-cat-5:focus-visible ~ .ba-ai-hub__architecture .ba-ai-hub__input--5 {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* Notes (build) + panels (modules) - one shown at a time. */
.ba-ai-hub__notes,
.ba-ai-hub__panels { max-width: 34rem; margin: 1.75rem auto 0; text-align: center; min-height: 4rem; }
.ba-ai-hub__note,
.ba-ai-hub__panel { display: none; }
.ba-ai-hub__note { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.ba-ai-hub__note strong { color: var(--ink); }
.ba-ai-hub__panel h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.ba-ai-hub__panel p { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.ba-ai-hub__panel-flow { font-size: .85rem !important; font-weight: 700; color: var(--brand) !important; }
#ba-ai-src-0:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--0,
#ba-ai-src-1:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--1,
#ba-ai-src-2:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--2,
#ba-ai-src-3:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--3,
#ba-ai-src-4:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--4,
#ba-ai-src-5:checked ~ .ba-ai-hub__notes .ba-ai-hub__note--5 { display: block; }
#ba-ai-cat-0:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--0,
#ba-ai-cat-1:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--1,
#ba-ai-cat-2:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--2,
#ba-ai-cat-3:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--3,
#ba-ai-cat-4:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--4,
#ba-ai-cat-5:checked ~ .ba-ai-hub__panels .ba-ai-hub__panel--5 { display: block; }

/* ---- 31.5 AI assistants (dark, enlarged) --------------------------------- */
.ba-ai-asst-section { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #c7d3ea; padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.ba-ai-asst-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50rem 30rem at 50% -10%, rgba(47, 123, 255, .18), transparent 62%);
}
.ba-ai-asst__head { max-width: 40rem; margin-inline: auto; text-align: center; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.ba-ai-asst-section h2 { color: #fff; margin: 0 0 1.1rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.02em; line-height: 1.14; }
.ba-ai-asst__body { margin: 0 auto; max-width: 50ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.7; color: #b0c0dc; }
.ba-ai-asst__viz-wrap { width: 100%; max-width: 19rem; margin-inline: auto; }

.ba-ai-asst-stage { position: relative; }
.ba-ai-asst__field {
    position: absolute;
    inset: -10% -25%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 35%, rgba(47, 123, 255, .24), rgba(47, 123, 255, .05) 46%, transparent 74%);
    filter: blur(12px);
}
.ba-ai-asst-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.ba-ai-asst-hv__box { fill: rgba(26, 43, 72, .7); stroke: var(--ba-ai-line-dark); stroke-width: 1.4; }
.ba-ai-asst-hv__box--ai { stroke: var(--electric); stroke-width: 2.4; fill: rgba(47, 123, 255, .16); }
.ba-ai-asst-hv__glyph { fill: none; stroke: rgba(200, 220, 255, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba-ai-asst-hv__node--ai .ba-ai-asst-hv__glyph { stroke: #fff; }
.ba-ai-asst-hv__wire { fill: none; stroke: var(--ba-ai-line-dark); stroke-width: 1.6; stroke-dasharray: 3 6; opacity: .8; }
.ba-ai-asst-hv__conn { stroke: var(--ba-ai-line-dark); stroke-width: 2; stroke-dasharray: 3 5; opacity: .8; }
.ba-ai-asst-hv__label { fill: #93a6cc; font: 650 12px/1 var(--font); }
.ba-ai-asst-hv__label--ai { fill: #fff; font-weight: 700; }
.ba-ai-asst-hv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M160 46 V90");
    animation: baAiAsstSig var(--ba-ai-signal) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .ba-ai-asst-hv__sig { display: none; } }
@keyframes baAiAsstSig { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 31.6 Automation -> AI -> Human (dark, enlarged) ---------------------- */
.ba-ai-dec-section { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #c7d3ea; padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.ba-ai-dec-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50rem 34rem at 50% 110%, rgba(47, 123, 255, .18), transparent 62%);
}
.ba-ai-dec__head { max-width: 40rem; margin-inline: auto; text-align: center; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.ba-ai-dec-section h2 { color: #fff; margin: 0 0 1.1rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.02em; line-height: 1.14; }
.ba-ai-dec__body { margin: 0 auto; max-width: 50ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.7; color: #b0c0dc; }
.ba-ai-dec__viz-wrap { width: 100%; max-width: 17rem; margin-inline: auto; }

.ba-ai-dec-stage { position: relative; }
.ba-ai-dec__field {
    position: absolute;
    inset: -8% -40%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 55%, rgba(47, 123, 255, .2), rgba(47, 123, 255, .05) 46%, transparent 74%);
    filter: blur(12px);
}
.ba-ai-dec-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.ba-ai-dec-hv__box { fill: rgba(26, 43, 72, .7); stroke: var(--ba-ai-line-dark); stroke-width: 1.4; }
.ba-ai-dec-hv__box--ai { stroke: var(--electric); stroke-width: 2.2; fill: rgba(47, 123, 255, .16); }
.ba-ai-dec-hv__box--human { stroke: var(--accent); }
.ba-ai-dec-hv__box--action { stroke: #fff; stroke-width: 2; fill: rgba(255, 255, 255, .08); }
.ba-ai-dec-hv__glyph { fill: none; stroke: rgba(200, 220, 255, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba-ai-dec-hv__glyph--sm { stroke-width: 1.4; }
.ba-ai-dec-hv__node--ai .ba-ai-dec-hv__glyph { stroke: #fff; }
.ba-ai-dec-hv__glyph-person { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.ba-ai-dec-hv__wire { fill: none; stroke: var(--ba-ai-line-dark); stroke-width: 1.6; opacity: .85; }
.ba-ai-dec-hv__wire--auto { stroke: color-mix(in srgb, var(--brand) 60%, var(--ba-ai-line-dark)); }
.ba-ai-dec-hv__wire--human { stroke: color-mix(in srgb, var(--accent) 60%, var(--ba-ai-line-dark)); }
.ba-ai-dec-hv__conn { stroke: var(--ba-ai-line-dark); stroke-width: 2; stroke-dasharray: 3 5; opacity: .8; }
.ba-ai-dec-hv__conn--sm { stroke-width: 1.6; }
.ba-ai-dec-hv__label { fill: #93a6cc; font: 650 11px/1 var(--font); }
.ba-ai-dec-hv__label--ai,
.ba-ai-dec-hv__label--action { fill: #fff; font-weight: 700; }
.ba-ai-dec-hv__label--sm { font-size: 10px; }

/* ---- 31.7 Start with one process: transformation, not a rail ------------- */
.ba-ai-onramp-section { background: var(--bg); border-bottom: 1px solid var(--line); }
.ba-ai-onramp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}
.ba-ai-onramp__k { margin: 0 0 .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ba-ai-onramp__after .ba-ai-onramp__k { color: var(--brand); }
.ba-ai-onramp__scatter { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ba-ai-onramp__scatter li {
    padding: .85rem 1.1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 55%, #fff);
    box-shadow: 0 3px 8px rgba(16, 42, 110, .07);
    color: var(--ink-soft);
    font-size: .98rem;
    transform: rotate(var(--ba-ai-tilt, 0deg));
}
.ba-ai-onramp__scatter li:nth-child(1) { --ba-ai-tilt: -1.4deg; margin-left: 0; }
.ba-ai-onramp__scatter li:nth-child(2) { --ba-ai-tilt: .9deg; margin-left: 1rem; }
.ba-ai-onramp__scatter li:nth-child(3) { --ba-ai-tilt: -.6deg; margin-left: .3rem; }

.ba-ai-onramp__transform { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.ba-ai-onramp__transform-ring {
    position: relative;
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    background: var(--brand-wash);
    border: 4px solid var(--brand-wash);
    border-top-color: var(--brand);
    border-right-color: var(--electric);
    animation: baAiOnrampSpin 2.4s linear infinite;
}
.ba-ai-onramp__transform-ring::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ba-ai-glow), transparent 70%);
    z-index: -1;
}
.ba-ai-onramp__transform-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.9rem;
    height: 1.9rem;
    animation: baAiOnrampSpin 2.4s linear infinite reverse;
}
.ba-ai-onramp__transform-icon path {
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes baAiOnrampSpin { to { transform: rotate(360deg); } }
.ba-ai-onramp__transform span { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }

.ba-ai-onramp__system { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ba-ai-onramp__node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .95rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-weight: 650;
    font-size: .98rem;
    text-align: center;
}
.ba-ai-onramp__node--action { border-color: var(--brand); background: var(--brand-wash); margin-top: .9rem; }
.ba-ai-onramp__branch { position: relative; display: flex; gap: .8rem; margin-block: .9rem; }
.ba-ai-onramp__branch .ba-ai-onramp__node { flex: 1 1 0; width: auto; }
.ba-ai-onramp__node--sm { font-size: .92rem; padding: .8rem 1rem; }
.ba-ai-onramp__node--ai { border-color: var(--brand); color: var(--brand-strong); }
/* Small local connector ticks either side of the branch only - short,
   never crossing any node's own text. */
.ba-ai-onramp__branch::before,
.ba-ai-onramp__node--action::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -.9rem;
    width: 1.5px;
    height: .9rem;
    background: var(--ba-ai-line);
}
.ba-ai-onramp__node--ai { border-color: var(--brand); color: var(--brand-strong); }

/* ---- 31.8 The BlueAquila approach: staggered assembly, no rail ------------ */
.ba-ai-approach-section { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--surface), #fff 65%); }
.ba-ai-approach-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--ba-ai-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ba-ai-line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0;
    transition: opacity 1s ease .2s;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 60%, #000, transparent 75%);
    mask-image: radial-gradient(90% 70% at 50% 60%, #000, transparent 75%);
}
.ba-ai-approach-section:has([data-reveal].is-revealed) .ba-ai-approach-section__bg { opacity: .5; }
.ba-ai-cascade {
    list-style: none;
    position: relative;
    margin: clamp(1.75rem, 4vw, 2.25rem) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.4rem);
    max-width: 46rem;
}
.ba-ai-cascade__step {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    align-items: baseline;
    column-gap: 1rem;
    margin-left: calc(var(--ba-ai-i, 0) * clamp(.75rem, 2.5vw, 1.75rem));
    opacity: .55;
    transform: scale(.97);
    transform-origin: left center;
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: calc(var(--ba-ai-i, 0) * .08s);
}
html.reveal-ready .is-revealed .ba-ai-cascade__step { opacity: 1; transform: none; }
.ba-ai-cascade__step::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    margin-top: .4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}
.ba-ai-cascade__marker { grid-column: 2; font-size: .74rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ba-ai-cascade__title { grid-column: 2; margin: .15rem 0 .3rem; font-size: 1.05rem; }
.ba-ai-cascade__step p { grid-column: 2; margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; max-width: 34ch; }

/* ---- 31.9 Custom systems (dark, architecture backdrop) -------------------- */
.ba-ai-custom { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #c7d3ea; padding-block: clamp(4rem, 9vw, 6.5rem); }
.ba-ai-custom__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50rem 30rem at 85% 20%, rgba(47, 123, 255, .18), transparent 65%),
        linear-gradient(rgba(120, 170, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 255, .05) 1px, transparent 1px);
    background-size: 100% 100%, 56px 56px, 56px 56px;
}
.ba-ai-custom__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.ba-ai-custom h2 { color: #fff; margin: 0 0 1.1rem; font-size: clamp(1.8rem, 4.2vw, 2.6rem); letter-spacing: -.02em; line-height: 1.18; max-width: 18ch; }
.ba-ai-custom__body { margin: 0 0 1.5rem; max-width: 48ch; color: #b0c0dc; font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.7; }
.ba-ai-custom__link { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px; transition: border-color .2s ease, gap .2s ease; }
.ba-ai-custom__link:hover,
.ba-ai-custom__link:focus-visible { border-color: #fff; gap: .6rem; }
.ba-ai-custom__viz { width: 100%; max-width: 16rem; margin-inline: auto; }
.ba-ai-custom-hv__rail { stroke: var(--ba-ai-glow); stroke-width: 44; stroke-linecap: round; opacity: .5; filter: blur(3px); }
.ba-ai-custom-hv__conn { stroke: var(--ba-ai-line-dark); stroke-width: 2; stroke-dasharray: 3 5; opacity: .7; }
/* The offset "depth" slab behind each layer gives the stack real
   thickness - a layered system, not a column of flat pills. */
.ba-ai-custom-hv__depth { fill: rgba(11, 18, 32, .55); stroke: none; }
.ba-ai-custom-hv__box { fill: rgba(26, 43, 72, .92); stroke: var(--ba-ai-line-dark); stroke-width: 1.4; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); }
.ba-ai-custom-hv__box--ai { stroke: var(--electric); stroke-width: 2.2; fill: rgba(47, 123, 255, .22); }
.ba-ai-custom-hv__label { fill: #93a6cc; font: 700 14px/1 var(--font); letter-spacing: .05em; }
.ba-ai-custom-hv__label--ai { fill: #fff; font-weight: 800; }

/* ---- 31.10 Final CTA (dark) ----------------------------------------------- */
.ba-ai-final { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #c7d3ea; padding-block: clamp(4rem, 9vw, 6.5rem); }
.ba-ai-final__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(46rem 26rem at 50% -10%, rgba(47, 123, 255, .26), transparent 65%);
}
/* No decorative line/rail here by design - the closing panel is just the
   ambient radial glow above plus the heading/copy/buttons; it should
   breathe rather than restate the page's own diagram again. */
.ba-ai-final__panel { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; text-align: center; }
.ba-ai-final h2 { color: #fff; margin: 0 0 1rem; font-size: clamp(1.8rem, 4.4vw, 2.6rem); letter-spacing: -.02em; line-height: 1.16; }
.ba-ai-final p { margin: 0 0 2rem; color: #b0c0dc; font-size: 1.05rem; line-height: 1.65; }
.ba-ai-final__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---- 31.11 Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
    .ba-ai-hero__grid { grid-template-columns: 1fr; }
    .ba-ai-hero__copy { max-width: none; text-align: center; margin-inline: auto; }
    .ba-ai-hero__lead { margin-inline: auto; }
    .ba-ai-hero__actions { justify-content: center; }
    .ba-ai-hero__viz { max-width: 18rem; margin-inline: auto; }
    .ba-ai-asst__viz-wrap,
    .ba-ai-dec__viz-wrap { max-width: 15rem; }
    .ba-ai-custom__grid { grid-template-columns: 1fr; text-align: center; }
    .ba-ai-custom__body { margin-inline: auto; }
    .ba-ai-custom__viz { max-width: 13rem; margin-inline: auto; }
}
@media (max-width: 860px) {
    .ba-ai-compare { grid-template-columns: 1fr; }
    .ba-ai-compare__pivot { transform: rotate(90deg); margin-block: .25rem; }
}
@media (max-width: 620px) {
    .ba-ai-hero__actions .btn,
    .ba-ai-final__actions .btn { flex: 1 1 auto; }

    /* Hub-and-spoke simplifies to a vertical architecture on mobile: the
       decorative wire/hub SVG is hidden (its relationships are restated
       as plain reading order instead) and the six inputs become a
       normal, non-overlapping vertical list - no tiny crowded diagram. */
    .ba-ai-hub__architecture,
    .ba-ai-hub--modules .ba-ai-hub__architecture { aspect-ratio: auto; width: 100%; }
    .ba-ai-hub__stage { display: none; }
    .ba-ai-hub__inputs { position: static; display: grid; gap: .6rem; }
    .ba-ai-hub__input { position: static; transform: none; width: 100%; }
    .ba-ai-hub__input:hover { transform: none; }
    .ba-ai-hub__core-label-mobile {
        position: static;
        width: auto; height: auto;
        margin: 0 0 1rem;
        padding: .9rem 1.1rem;
        clip: auto;
        clip-path: none;
        overflow: visible;
        white-space: normal;
        display: block;
        border-radius: var(--radius-sm);
        border: 2px solid var(--brand);
        background: var(--brand-wash);
        color: var(--ink);
        font-weight: 800;
        text-align: center;
    }

    .ba-ai-onramp { grid-template-columns: 1fr; text-align: center; }
    .ba-ai-onramp__transform { flex-direction: row; justify-content: center; }
    .ba-ai-onramp__scatter li { transform: none; margin-left: 0 !important; }

    .ba-ai-cascade__step { margin-left: 0 !important; }
}

/* ---- 31.12 Off-screen pause + reduced motion ------------------------------ */
.ba-ai-hero-sys__svg.is-paused *,
.ba-ai-idea-hv.is-paused *,
.ba-ai-asst-hv.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .ba-ai-hero-sys__sig,
    .ba-ai-idea-hv__sig,
    .ba-ai-asst-hv__sig { animation: none !important; opacity: 0 !important; }
    .ba-ai-idea-hv__box,
    .ba-ai-idea-hv__glyph,
    .ba-ai-idea-hv__label,
    .ba-ai-idea-hv__conn { transition: none; opacity: 1; transform: none; }
    .ba-ai-approach-section__bg,
    .ba-ai-hub__wire,
    .ba-ai-hub__input,
    .ba-ai-hub__node,
    .ba-ai-custom__link { transition: none; }
    .ba-ai-approach-section__bg { opacity: .5; }
    .ba-ai-onramp__transform-ring,
    .ba-ai-onramp__transform-icon { animation: none; }
}

/* =========================================================================
   GLOBAL AI ASSISTANT  (32)
   -------------------------------------------------------------------------
   BlueAquila AI floating launcher + chat panel, rendered once from
   layouts/default.php via partials/ai-assistant.php - present on every
   page. Bottom-LEFT, mirroring (and never overlapping) the existing
   bottom-right WhatsApp button (section 30). Namespaced .ba-chat-* -
   distinct from the AI & Automation service page's .ba-ai-* content
   classes (section 31) so the two are never confused.

   Phase 1 is conversation-only: no new page layout, no changes to any
   frozen page's own design - just this global widget.
   ========================================================================= */

.ba-chat__launcher {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(155deg, var(--brand), var(--navy) 130%);
    color: #fff;
    box-shadow: 0 10px 26px -6px rgba(21, 96, 219, .55), 0 2px 8px rgba(11, 18, 32, .25);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.ba-chat__launcher:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px -6px rgba(21, 96, 219, .6), 0 2px 10px rgba(11, 18, 32, .3);
}
.ba-chat__launcher:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--brand-wash);
}
.ba-chat__launcher[aria-expanded="true"] { background: var(--navy); }
.ba-chat__launcher-icon { width: 26px; height: 26px; }

.ba-chat__scrim {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(11, 18, 32, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.ba-chat__scrim.is-open { opacity: 1; }
.ba-chat__scrim[hidden] { display: none; }

.ba-chat__panel {
    position: fixed;
    left: 1.5rem;
    bottom: 5.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100vw - 3rem));
    height: clamp(26rem, 62vh, 33rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom left;
    transition: opacity .22s ease, transform .22s ease;
}
.ba-chat__panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.ba-chat__panel[hidden] { display: none; }

.ba-chat__head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    background: var(--navy);
    color: #fff;
}
.ba-chat__title { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.ba-chat__subtitle { margin: .2rem 0 0; font-size: .8rem; color: #9fb0cd; }
.ba-chat__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #cfdcf5;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.ba-chat__close svg { width: 14px; height: 14px; }
.ba-chat__close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ba-chat__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ba-chat__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--surface);
}

.ba-chat__empty { display: flex; flex-direction: column; gap: .9rem; }
.ba-chat__empty[hidden] { display: none; }
.ba-chat__greeting { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.ba-chat__quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.ba-chat__chip {
    padding: .5rem .85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.ba-chat__chip:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-wash); }
.ba-chat__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ba-chat__msg { max-width: 86%; padding: .65rem .9rem; border-radius: var(--radius-sm); font-size: .92rem; line-height: 1.55; }
.ba-chat__msg p { margin: 0 0 .5rem; }
.ba-chat__msg p:last-child { margin-bottom: 0; }
.ba-chat__msg ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.ba-chat__msg ul:last-child { margin-bottom: 0; }
.ba-chat__msg--user {
    align-self: flex-end;
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ba-chat__msg--assistant {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}
.ba-chat__msg--pending { color: var(--ink-soft); font-style: italic; animation: baChatPulse 1.4s ease-in-out infinite; }
.ba-chat__msg--error { border-color: var(--line-strong); color: var(--ink-soft); }
@keyframes baChatPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.ba-chat__form {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--line);
    background: #fff;
}
.ba-chat__input {
    flex: 1 1 auto;
    resize: none;
    max-height: 120px;
    padding: .6rem .8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface);
}
.ba-chat__input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.ba-chat__send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}
.ba-chat__send svg { width: 18px; height: 18px; }
.ba-chat__send:hover { background: var(--brand-strong); }
.ba-chat__send:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ba-chat__send:disabled,
.ba-chat__input:disabled { opacity: .6; cursor: default; }

@media (max-width: 600px) {
    .ba-chat__launcher { width: 52px; height: 52px; left: 1.1rem; bottom: 1.1rem; }
    .ba-chat__launcher-icon { width: 23px; height: 23px; }
    .ba-chat__panel {
        inset: .6rem;
        left: .6rem;
        bottom: .6rem;
        width: auto;
        height: auto;
        transform: translateY(16px) scale(.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ba-chat__launcher,
    .ba-chat__launcher:hover,
    .ba-chat__panel,
    .ba-chat__scrim,
    .ba-chat__chip,
    .ba-chat__close,
    .ba-chat__send { transition: none; }
    .ba-chat__launcher:hover { transform: none; }
    .ba-chat__msg--pending { animation: none; }
}

/* =========================================================================
   DIGITAL MARKETING PAGE  (33)
   -------------------------------------------------------------------------
   A new, conceptual-first service page - no claimed sub-services, no
   invented results. Visual language matches the rest of the site: a
   funnel hero diagram, a large dark layered "system" architecture (the
   page's primary visual anchor), and two compact horizontal chains for
   the lighter bridge sections - never cards, pills or decorative rails.

   Every selector is namespaced .dm-* and scoped to .dm-page - touches no
   other page's selectors. Shared components reused as-is: .btn*,
   .eyebrow, .section/.container, [data-reveal], cta-band.
   ========================================================================= */
.dm-page {
    --dm-line: color-mix(in srgb, var(--brand) 40%, var(--line-strong));
    --dm-grid: rgba(21, 96, 219, .05);
    --dm-grid-dark: rgba(255, 255, 255, .04);
    --dm-signal: 6.5s;
}

/* ---- 33.1 Hero ------------------------------------------------------ */
.dm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2rem, 4vw, 3rem);
}
.dm-hero > .container { position: relative; z-index: 1; }
.dm-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--dm-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--dm-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 90% at 82% 4%, #000 18%, transparent 74%);
    mask-image: radial-gradient(120% 90% at 82% 4%, #000 18%, transparent 74%);
}
.dm-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.dm-hero__title {
    margin: 0 0 1.15rem;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    max-width: 18ch;
}
.dm-hero__lead {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-soft);
}
.dm-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* Hero visual: a straight vertical funnel (Audience -> ... -> Business) -
   deliberately not a branch, since a funnel is the honest shape here. */
.dm-hero__viz { position: relative; justify-self: center; width: 100%; max-width: 17rem; }
.dm-hero__stage { position: relative; }
.dm-hv__field {
    position: absolute;
    inset: -8% -60%;
    z-index: 0;
    border-radius: 40%;
    background: radial-gradient(circle at 50% 42%, rgba(21, 96, 219, .13), rgba(47, 123, 255, .05) 46%, transparent 74%);
    filter: blur(8px);
}
.dm-hv { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.dm-hv__box {
    fill: #fff;
    stroke: color-mix(in srgb, var(--brand) 28%, var(--line-strong));
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 14px rgba(16, 42, 110, .12));
}
.dm-hv__glyph { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dm-hv__node--end .dm-hv__box { stroke: var(--brand); stroke-width: 2; }
.dm-hv__node--end .dm-hv__glyph { stroke: var(--brand-strong); }
.dm-hv__label { fill: var(--ink-soft); font: 650 11px/1 var(--font); letter-spacing: .01em; }
.dm-hv__node--end ~ .dm-hv__label { fill: var(--ink); font-weight: 700; }
.dm-hv__conn { stroke: var(--dm-line); stroke-width: 2; stroke-dasharray: 3 5; opacity: .7; fill: none; }
.dm-hv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M60 40 V520");
    animation: dmHeroSig var(--dm-signal) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .dm-hv__sig { display: none; } }
@keyframes dmHeroSig { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 33.2 Why digital marketing (light editorial statement) --------- */
.dm-why { background: var(--bg); }
.dm-why__statement {
    max-width: 24ch;
    margin: 0 0 1.1rem;
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.dm-why__body { margin: 0; max-width: 58ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.7; }

/* ---- 33.3 Marketing, connected - the page's largest visual (dark) --- */
.dm-system-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #9fb0cd;
}
.dm-system-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48rem 26rem at 82% -10%, rgba(47, 123, 255, .16), transparent 60%),
        linear-gradient(var(--dm-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, var(--dm-grid-dark) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(130% 110% at 86% -10%, #000, transparent 72%);
    mask-image: radial-gradient(130% 110% at 86% -10%, #000, transparent 72%);
}
.dm-system-section .eyebrow { color: var(--electric); }
.dm-system-section .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }
.dm-system-section .section__head h2 { color: #fff; max-width: 30ch; }
.dm-system-section .section__intro { color: #9fb0cd; }

.dm-sv { position: relative; margin-top: clamp(2rem, 5vw, 3rem); }
.dm-sv-svg { display: block; width: 100%; height: auto; overflow: visible; max-width: 40rem; margin-inline: auto; }
.dm-sv__conn { stroke: rgba(255, 255, 255, .18); stroke-width: 2; fill: none; }
.dm-sv__depth { fill: rgba(0, 0, 0, .28); }
.dm-sv__box { fill: #101b30; stroke: rgba(255, 255, 255, .18); stroke-width: 1.4; }
.dm-sv__box--ai { fill: color-mix(in srgb, var(--electric) 18%, #101b30); stroke: var(--electric); stroke-width: 1.8; }
.dm-sv__label { fill: #cdd8ef; font: 700 12px/1 var(--font); letter-spacing: .06em; text-anchor: middle; }
.dm-sv__label--ai { fill: #fff; }
.dm-sv__sig {
    fill: var(--electric);
    opacity: 0;
    filter: drop-shadow(0 0 5px var(--electric));
    transform-box: fill-box;
    transform-origin: center;
    offset-path: path("M210 40 V508");
    animation: dmSysSig var(--dm-signal) ease-in-out infinite;
}
@supports not (offset-path: path("M0 0 L1 1")) { .dm-sv__sig { display: none; } }
@keyframes dmSysSig { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---- 33.4 Digital presence (light) ----------------------------------- */
.dm-presence { background: var(--surface); border-block: 1px solid var(--line); }

/* Shared compact horizontal chain - reused by Digital Presence (light)
   and the Marketing + AI & Automation bridge (dark, overridden below).
   Not a rail: each node is a real, separately-bordered box; the arrows
   between them are content glyphs, not a spanning decorative line. */
.dm-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.dm-chain--wrap { row-gap: 1.1rem; }
.dm-chain__node {
    padding: .85rem 1.3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    font-weight: 650;
    font-size: .95rem;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.dm-chain__arrow { flex: none; color: var(--ink-soft); font-size: 1.1rem; }
.dm-chain__node--ai { border-color: var(--brand); color: var(--brand-strong); }

.dm-presence__link { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
.dm-presence__link a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.dm-presence__link a span { display: inline-block; transition: transform .18s ease; }
.dm-presence__link a:hover span { transform: translateX(4px); }

/* ---- 33.5 Marketing + AI & Automation (dark bridge) ------------------ */
.dm-bridge-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #9fb0cd;
}
.dm-bridge-section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(44rem 24rem at 12% 110%, rgba(47, 123, 255, .14), transparent 60%);
}
.dm-bridge-section .eyebrow { color: var(--electric); }
.dm-bridge-section .eyebrow::before { background: linear-gradient(90deg, var(--electric), var(--accent)); }
.dm-bridge-section .section__head h2 { color: #fff; max-width: 32ch; }
.dm-bridge-section .section__intro { color: #9fb0cd; }
.dm-bridge-section .dm-chain__node {
    background: #101b30;
    border-color: rgba(255, 255, 255, .18);
    color: #e4ebfa;
    box-shadow: none;
}
.dm-bridge-section .dm-chain__arrow { color: #7d8fb3; }
.dm-bridge-section .dm-chain__node--ai {
    border-color: var(--electric);
    background: color-mix(in srgb, var(--electric) 16%, #101b30);
    color: #fff;
}
.dm-bridge__link { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }

/* ---- 33.6 What BlueAquila can build - conceptual areas, not cards ---- */
.dm-build { background: var(--bg); }
.dm-areas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(2rem, 5vw, 3.5rem);
    row-gap: clamp(2rem, 4vw, 2.75rem);
    margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
    padding: 0;
}
.dm-areas__item { max-width: 32ch; }
.dm-areas__title { margin: 0 0 .5rem; font-size: 1.1rem; letter-spacing: -0.005em; }
.dm-areas__desc { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* ---- 33.7 Real work - restrained, not a portfolio duplicate ---------- */
.dm-work { background: var(--bg); }
.dm-work__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
    padding: 0;
}
.dm-work__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dm-work__item a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.dm-work__item a:hover { color: var(--brand-strong); }
.dm-work__ico { font-size: .85em; color: var(--ink-soft); }
.dm-work__cat { color: var(--ink-soft); font-size: .9rem; }
.dm-work__more { margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0; }
.dm-work__more a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.dm-work__more a span { display: inline-block; transition: transform .18s ease; }
.dm-work__more a:hover span { transform: translateX(4px); }

/* ---- 33.8 Final CTA spacing on this page ----------------------------- */
.dm-page .cta-band { padding-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ---- 33.9 Responsive -------------------------------------------------- */
@media (max-width: 1080px) {
    .dm-hero__grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 7vw, 3rem); }
    .dm-hero__viz { margin-inline: auto; }
}
@media (max-width: 900px) {
    .dm-areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .dm-hero__actions .btn { flex: 1 1 auto; }
    .dm-areas { grid-template-columns: 1fr; }
    .dm-chain { flex-direction: column; align-items: flex-start; }
    .dm-chain__arrow { margin-left: 1.3rem; transform: rotate(90deg); }
}

/* ---- 33.10 Off-screen pause + reduced motion -------------------------- */
.dm-hv.is-paused *,
.dm-sv.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .dm-hv__sig,
    .dm-sv__sig { animation: none !important; opacity: 0 !important; }
    .dm-presence__link a:hover span,
    .dm-work__more a:hover span { transform: none; }
}