/* ============================================================
   MAGSOFT — WordPress / Elementor design system
   Only what Elementor's own controls cannot express:
   design tokens, glass/pill effects, masks, decorative text,
   custom cursor, and the light/dark theme mapping.
   Layout + spacing + typography are set on the widgets themselves,
   so they stay editable in Elementor.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
    --c-ink: #00091d;
    --c-navy: #061328;
    --c-panel: #101d33;
    --c-panel2: #172235;
    --c-line: #24334b;
    --c-mist: #aab4c2;
    --c-body-bg: #00091d;
    --c-body-fg: #ffffff;
    --c-shell: #07111e;
    /* Translucent shell — the off-canvas panel uses this so its
       backdrop-filter has something to blur through. Set on the
       widget's own background control, so it stays editable. */
    --c-shell-glass: rgba(7, 17, 30, .72);
    --c-brand: #3b74f2;
    --c-nav: rgba(255, 255, 255, .78);
    /* The pill must read as a surface ABOVE the page, not the same colour as
       it. rgba(0,9,29,.70) over a #00091d page is literally the page tinted —
       invisible, and a black shadow adds nothing on near-black. So the dark
       surface is lifted a few steps and the hairline strengthened. */
    --header-strip-bg: rgba(22, 34, 58, .70);
    --header-bar-bg: rgba(33, 48, 80, .78);
    --header-hairline: rgba(255, 255, 255, .18);
    --chip-bg: rgba(255, 255, 255, .05);
    --frost-bg: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    --frost-border: rgba(255, 255, 255, .18);
    /* Home cards — ported from home.html's <style> block (no Tailwind here) */
    --card-bg: #131c2e;
    --card-border: rgba(255, 255, 255, .06);
    --card-hover-bg: #1b2740;
    --card-hi-bg: #5b6675;
    --card-hi-hover-bg: #67717f;
    --card-accent-bg: linear-gradient(180deg, rgba(59,116,242,.20), rgba(59,116,242,.06));
    --card-accent-hover-bg: linear-gradient(180deg, rgba(59,116,242,.34), rgba(59,116,242,.12));
    --card-accent-border: rgba(120, 160, 255, .45);
    --plat-hover-bg: #16233d;
}

html[data-theme="light"] {
    --c-ink: #f7f8fa;
    --c-navy: #eef1f5;
    --c-panel: #ffffff;
    --c-panel2: #f0f3f7;
    --c-line: #d9dee6;
    --c-mist: #51607a;
    --c-body-bg: #f7f8fa;
    --c-body-fg: #0f172a;
    --c-shell: #eef1f5;
    --c-shell-glass: rgba(238, 241, 245, .78);
    --c-brand: #2556cc;
    --c-nav: #51607a;
    --header-strip-bg: rgba(233, 237, 242, .60);
    --header-bar-bg: rgba(247, 248, 250, .68);
    --header-hairline: rgba(15, 23, 42, .10);
    --chip-bg: rgba(15, 23, 42, .04);
}

body {
    background: var(--c-body-bg);
    color: var(--c-body-fg);
    /* clip, not hidden: still no horizontal scrollbar, but it does NOT create
       a scroll container, so `position: sticky` descendants (Platforms
       .svc-block stacking cards) keep working. */
    overflow-x: clip;
}

body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, textarea, select,
.elementor-widget-container, .elementor-heading-title {
    font-family: 'DM Sans', sans-serif;
}

/* ---------- 2. Header shell: pill at rest, full bar on scroll-up ---------- */
.site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9990;
    padding: 0 !important;
    transition: transform .34s ease;
    /* No will-change:transform here. It creates a backdrop root, which
       leaves .header-shell's backdrop-filter with nothing behind it to
       sample — the pill then renders as a flat fill instead of glass.
       The slide transition is smooth without it. */
}
.site-header.is-hidden { transform: translateY(-150%); }

.header-shell {
    margin: 14px auto 0 !important;
    width: min(1180px, calc(100% - 32px)) !important;
    border: 1px solid var(--header-hairline);
    border-radius: 999px;
    overflow: hidden;
    background: var(--header-bar-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    /* A black drop shadow is invisible on a near-black page, so the dark pill
       gets a top inset highlight to catch its edge instead. */
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .5),
                inset 0 1px 0 rgba(255, 255, 255, .10);
    padding: 0 !important;
    transition: width .34s ease, margin .34s ease, border-radius .34s ease, box-shadow .34s ease;
}
html[data-theme="light"] .header-shell { box-shadow: 0 12px 30px -16px rgba(15, 23, 42, .24); }

.site-header.is-full .header-shell {
    margin-top: 0 !important;
    width: 100% !important;
    border-radius: 0;
    border-width: 0 0 1px;
    box-shadow: none;
}

/* Top strip only exists in the expanded (scroll-up) state, desktop only */
.header-strip { display: none !important; background: var(--header-strip-bg); border-bottom: 1px solid var(--header-hairline); }
@media (min-width: 1024px) { .site-header.is-full .header-strip { display: flex !important; } }

.header-bar { max-width: 1620px; margin-inline: auto !important; width: 100%; }
/* Every direct child of the bar centres on the same axis as the logo */
.header-bar > .elementor-element { display: flex; align-items: center; }

/* Logo.
   Two real assets rather than a CSS filter — an invert()/hue-rotate() on the
   PNG wrecks the brand blue. magsoft-logo-dark.png is the same artwork with
   the black text recoloured white and #184098 left exactly as it is.
   Both files are cropped to their ink bounds so they centre optically. */
.brand-logo img { display: block; height: auto; }
.brand-logo { display: flex; align-items: center; }
/* Both selectors are (0,2,1) so they outrank the .header-bar centring
   rule below — a plain .logo-light{display:none} loses to it and you
   get both logos at once. Size lives on the widget's width control,
   never here, or it fights Elementor and stretches the artwork. */
html:not([data-theme="light"]) .logo-light { display: none; }
html[data-theme="light"] .logo-dark { display: none; }

/* Desktop-only nav; the off-canvas menu takes over below 1024px */
@media (max-width: 1023px) { .magsoft-nav { display: none !important; } }

/* ---- Header, small screens ----
   The logo width (220px) and the actions group width (330px) are Elementor
   settings with no responsive variant, so they hold at every size: together
   with the gap they need 574px inside a bar that is only 297px wide at 375px,
   which wrapped the pill onto two rows and doubled its height. Overridden
   here via the custom properties Elementor emits. */
@media (max-width: 1023px) {
    .header-bar .brand-logo img { width: 180px !important; }
    /* !important is required: Elementor writes --width on
       `.elementor-798 .elementor-element.elementor-element-hdracts` (0,3,0),
       which outranks any practical class selector here. */
    .header-bar .hdr-actions { --width: auto !important; }
}
@media (max-width: 767px) {
    /* Scoped to :not(.is-full) so the pill width and the full-bleed scroll-up
       width never compete — the two rules simply never both apply. */
    .site-header:not(.is-full) .header-shell {
        width: calc(100% - 24px) !important;
        margin-top: 10px !important;
    }
    html .site-header.is-full .header-shell {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* !important throughout: Elementor writes these same custom properties at
       (0,3,0) via .elementor-798 .elementor-element.elementor-element-hdrbar,
       so an unqualified .header-bar rule is ignored and the desktop 26/18
       padding and 24px gap survive into mobile. */
    .header-bar {
        --padding-top: 12px !important; --padding-bottom: 12px !important;
        /* symmetric, so the centre column of the scroll-up grid lands on the
           true page centre rather than 10px to its left */
        --padding-left: 16px !important; --padding-right: 16px !important;
        --gap: 10px 10px !important; --row-gap: 10px !important; --column-gap: 10px !important;
    }
    .header-bar .brand-logo img { width: 148px !important; }

    /* At rest the pill is narrow — measured, logo + CTA + toggle + menu wants
       334px inside a 320px bar — so it carries only the logo and the menu
       button. The theme toggle lives in the drawer (as the original HTML had
       it); the CTA returns below, in the scroll-up bar. */
    .header-bar .theme-toggle { display: none !important; }
    .header-bar .pill-outline { display: none; }

    /* Scrolled up, the bar deliberately becomes two tiers:
       tier 1 the logo, tier 2 the CTA + theme toggle + off-canvas button.
       Each direct child is forced to a full-width row rather than being left
       to wrap by accident, so the stack is predictable at any width. */
    .site-header.is-full .header-bar {
        --justify-content: flex-start !important;
        --align-items: flex-start !important;
        --row-gap: 12px !important;
    }
    .site-header.is-full .header-bar > .elementor-element { flex: 0 0 100% !important; }
    .site-header.is-full .header-bar .brand-logo img { width: 148px !important; }

    /* Second tier as a 1fr auto 1fr grid: CTA hard left, toggle at the exact
       centre of the page, off-canvas hard right. space-between would only
       equalise the gaps — it cannot centre the toggle, because the CTA is far
       wider than the two icon buttons. */
    /* `display` must be set directly: the container carries Elementor's
       `e-flex` class, which hard-sets display:flex and never reads --display. */
    .site-header.is-full .hdr-actions {
        --width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center;
        justify-content: stretch !important;
    }
    .site-header.is-full .hdr-actions > .pill-outline { justify-self: start; }
    .site-header.is-full .hdr-actions > .theme-toggle { justify-self: center; }
    .site-header.is-full .hdr-actions > .menu-btn     { justify-self: end; }
    .site-header.is-full .header-bar .pill-outline { display: block; }
    .site-header.is-full .header-bar .theme-toggle { display: flex !important; }

    /* The dot grid is centre-positioned in the base rule, so it scales with the
       button and needs no override here. */
    .menu-btn .elementor-button { width: 2.5rem; height: 2.5rem; }
    .theme-toggle { width: 2.5rem; height: 2.5rem; }

    /* Give the second tier room to breathe */
    .site-header.is-full .hdr-actions {
        --gap: 16px 16px !important;
        --column-gap: 16px !important;
    }
}

/* ---------- 3. Theme toggle (sun / moon swap) ---------- */
.theme-toggle {
    width: 2.75rem; height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--c-line);
    cursor: pointer;
    align-items: center; justify-content: center;
    padding: 0 !important;
    transition: border-color .2s ease, background-color .2s ease;
}
.theme-toggle:hover { border-color: var(--c-brand); background: rgba(59, 116, 242, .14); }
.theme-toggle .elementor-widget { width: auto; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="light"] .theme-toggle .icon-dark { display: block; }
html[data-theme="light"] .theme-toggle .icon-light { display: none; }

/* ---------- 4. Dot-grid menu button, morphing to an X when open ---------- */
.menu-btn .elementor-button {
    position: relative;
    width: 2.75rem; height: 2.75rem;
    border-radius: 12px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block;
    transition: background-color .2s ease;
}
.menu-btn .elementor-button:hover { background: var(--chip-bg) !important; }
/* Keep the label as the accessible name, but out of sight */
.menu-btn .elementor-button-content-wrapper {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.menu-btn .elementor-button::before,
.menu-btn .elementor-button::after {
    content: "";
    position: absolute; inset: 0;
    transition: opacity .25s ease, transform .36s cubic-bezier(.5, 1.5, .4, 1);
}
/* 2x2 dot grid drawn with radial gradients. Positioned from the CENTRE, not
   from the edges: edge insets stop working the moment the button changes size
   (at 36px a 13px inset put the dots 10px apart and they read as one blob). */
.menu-btn .elementor-button::before {
    background-image:
        radial-gradient(circle 3px at calc(50% - 6px) calc(50% - 6px), currentColor 99%, transparent 100%),
        radial-gradient(circle 3px at calc(50% + 6px) calc(50% - 6px), currentColor 99%, transparent 100%),
        radial-gradient(circle 3px at calc(50% - 6px) calc(50% + 6px), currentColor 99%, transparent 100%),
        radial-gradient(circle 3px at calc(50% + 6px) calc(50% + 6px), currentColor 99%, transparent 100%);
    color: var(--c-body-fg);
}
/* X state */
.menu-btn.is-open .elementor-button::before { opacity: 0; }
.menu-btn .elementor-button::after {
    opacity: 0;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size: 21px 2px, 21px 2px;
    background-position: center, center;
    background-repeat: no-repeat;
    color: var(--c-body-fg);
}
.menu-btn.is-open .elementor-button::after { opacity: 1; }

/* ---------- 5. Canonical pill buttons ---------- */
html[data-theme] .pill .elementor-button,
html[data-theme] a.pill,
html[data-theme] .cm-links .elementor-button {
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #00091d !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
html[data-theme] .pill .elementor-button:hover,
html[data-theme] a.pill:hover,
html[data-theme] .cm-links .elementor-button:hover {
    background: var(--c-brand) !important;
    color: #ffffff !important;
    border-color: var(--c-brand) !important;
    transform: translateY(-2px);
}
/* Outline variant used for the header's "Jump to Form" */
html[data-theme] .pill-outline .elementor-button {
    background: transparent !important;
    color: var(--c-body-fg) !important;
    border: 1px solid var(--c-line) !important;
}
html[data-theme] .keep-dark .pill-outline .elementor-button {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .3) !important;
}
html[data-theme] .pill-outline .elementor-button:hover,
html[data-theme] .keep-dark .pill-outline .elementor-button:hover {
    background: var(--c-brand) !important;
    color: #fff !important;
    border-color: var(--c-brand) !important;
}

/* ---------- 6. Frosted glass panel + form fields ---------- */
.frost-panel {
    background: var(--frost-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--frost-border);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.frost-panel .elementor-field-group input,
.frost-panel .elementor-field-group textarea,
.frost-panel .elementor-field-group select {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    color: #fff !important;
    min-height: 3rem;
    transition: border-color .2s ease, background-color .2s ease;
}
.frost-panel .elementor-field-group textarea { min-height: 8rem; }
.frost-panel .elementor-field-group input::placeholder,
.frost-panel .elementor-field-group textarea::placeholder { color: rgba(255, 255, 255, .55); }
.frost-panel .elementor-field-group input:focus,
.frost-panel .elementor-field-group textarea:focus,
.frost-panel .elementor-field-group select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .5) !important;
    background: rgba(255, 255, 255, .12) !important;
}
.frost-panel .elementor-field-group select option { color: #00091d; }

/* Submit button: match the "Email Magsoft" pill exactly. Without nowrap the
   label breaks onto a second line and the pill inflates into a blob. */
.frost-panel .elementor-button[type="submit"],
.frost-panel button[type="submit"] {
    white-space: nowrap;
    width: auto;
    min-height: 0;
    border-radius: 999px !important;
    padding: 15px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* ---------- 7. Off-canvas menu — frosted, matching the header ---------- */
/* __main blurs the page behind the panel; __content carries the
   translucent tint on top of it (that colour stays editable on the
   widget's own background control). Blurring only __content fails
   once Elementor transforms __main for the slide animation. */
.magsoft-offcanvas .e-off-canvas__main {
    border-left: 1px solid var(--header-hairline);
    box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    backdrop-filter: saturate(160%) blur(20px);
}
/* Full viewport height, and the panel itself scrolls when the
   content is taller than the screen — never the page behind it. */
.magsoft-offcanvas .e-off-canvas { height: 100%; }
.magsoft-offcanvas .e-off-canvas__content {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
@media (max-width: 600px) {
    .magsoft-offcanvas .e-off-canvas__main { width: 100% !important; }
}

/* Close button, top-right. Sticky rather than absolute: the panel
   body scrolls, and an absolute button would scroll out of reach. */
.oc-close {
    position: sticky !important;
    top: 0;
    align-self: flex-end;
    z-index: 3;
    width: auto !important;
}
.oc-close .elementor-icon {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: 999px;
    transition: background-color .2s ease, transform .2s ease;
}
.oc-close .elementor-icon:hover { background: var(--chip-bg); transform: rotate(90deg); }

/* Dotted nav list — a ring with a dot inside, as in the reference */
.oc-nav .elementor-icon-list-item { transition: transform .25s ease; }
.oc-nav .elementor-icon-list-item:hover { transform: translateX(5px); }
.oc-nav .elementor-icon-list-icon {
    width: 2.6rem; height: 2.6rem;
    flex: 0 0 2.6rem;
    display: grid !important;
    place-items: center;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    transition: border-color .2s ease, background-color .2s ease;
}
.oc-nav .elementor-icon-list-item:hover .elementor-icon-list-icon {
    border-color: var(--c-brand);
    background: rgba(59, 116, 242, .12);
}

/* ---------- 8. Decorative type: eyebrow + ghost wordmarks ---------- */
.eyebrow .elementor-heading-title {
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-brand);
}
.keep-dark .eyebrow .elementor-heading-title { color: #6f9bff; }

/* Page-title ghost word (inner pages) */
.page-head { position: relative; overflow: hidden; }
.page-head-word .elementor-heading-title {
    text-transform: uppercase;
    white-space: nowrap;
    font-size: clamp(64px, 13.5vw, 190px);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.05em;
    color: rgba(255, 255, 255, .055);
}
html[data-theme="light"] .page-head-word .elementor-heading-title { color: rgba(15, 23, 42, .05); }
.page-head-word {
    position: absolute !important;
    right: -.02em; top: 50%;
    margin-top: -.4em;
    z-index: 0;
    pointer-events: none; user-select: none;
    width: auto !important;
}
@media (max-width: 640px) { .page-head-word .elementor-heading-title { font-size: 22vw; } }

/* Column restacking. Elementor containers have no responsive width
   control, so override the --width variable it emits. */
@media (max-width: 1300px) { .footer-shell .ft-col { --width: 46%; } }
@media (max-width: 640px)  { .footer-shell .ft-col { --width: 100%; } }
/* !important, or Elementor's (0,3,0) per-element --width keeps the desktop
   38%/56% widths on phones — which is why the form panel stayed lean. */
@media (max-width: 900px)  { .mg-col { --width: 100% !important; } }
@media (max-width: 1024px) { .mg-col-wide { --width: 100% !important; } }

/* Responsive type and section padding.
   Elementor registers no _mobile variant for container `padding` or for
   `typography_font_size` in this build (unlike e.g. button_width), so
   those belong here rather than on the widgets. Containers expose their
   padding as --padding-* custom properties, which these override. */
/* All !important — Elementor sets these same --padding-* properties per
   element at (0,3,0), so unqualified class rules here are ignored and the
   desktop padding survives onto phones (56px each side inside a 412px screen
   left the form panel at 63% width). */
@media (max-width: 767px) {
    /* !important or Elementor's per-widget font-size (54px, at (0,3,1)) wins
       and the page title stays desktop-sized on phones — six wrapped lines,
       which then drags the ghost page-name word right through the headline.
       32px matches the reference's text-[32px] mobile size. */
    .page-head .h-display .elementor-heading-title {
        font-size: 32px !important;
        line-height: 1.12 !important;
    }
    .h-display .elementor-heading-title { font-size: 30px !important; }
    /* Extra-faint on phones so any residual overlap with the headline reads
       as texture rather than competing text. */
    .page-head-word .elementor-heading-title { color: rgba(255, 255, 255, .035) !important; }
    html[data-theme="light"] .page-head-word .elementor-heading-title { color: rgba(15, 23, 42, .032) !important; }
    .page-head {
        --padding-top: 120px !important; --padding-bottom: 44px !important;
        --padding-left: 18px !important; --padding-right: 18px !important;
    }
    .ct-form-band {
        --padding-top: 28px !important; --padding-bottom: 28px !important;
        --padding-left: 18px !important; --padding-right: 18px !important;
    }
    .frost-panel {
        --padding-top: 20px !important; --padding-bottom: 20px !important;
        --padding-left: 18px !important; --padding-right: 18px !important;
    }
    .tech-band {
        --padding-top: 40px !important; --padding-bottom: 40px !important;
        --padding-left: 22px !important; --padding-right: 22px !important;
    }
    /* Section wrappers: trim the 20px side gutters too */
    .contact-map, .ct-chips-section { --padding-left: 16px !important; --padding-right: 16px !important; }
}

/* Form fields sit two-up on desktop, one-up on phones */
@media (max-width: 640px) {
    .frost-panel .elementor-field-group { width: 100% !important; }
}

/* Footer ghost wordmark */
.footer-shell { position: relative; overflow: hidden; }
.footer-wordmark {
    position: absolute !important;
    left: 0; bottom: -4vw;
    width: 100% !important;
    z-index: 0;
    pointer-events: none; user-select: none;
}
.footer-wordmark .elementor-heading-title {
    text-align: center;
    white-space: nowrap;
    font-size: 20vw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .035);
}
/* The revolving globe stands in for this O, so hide the glyph — but with
   `color: transparent`, not display/visibility. The letter must keep its
   layout box: magsoft.js measures it to size and place the globe. */
.footer-wordmark .wm-o { color: transparent; }
html[data-theme="light"] .footer-wordmark .elementor-heading-title { color: rgba(15, 23, 42, .05); }

/* ---------- 9. Revolving globe (native video widget) ---------- */
/* NB: Elementor puts our class on the widget WRAPPER, never on <video> itself. */
.elementor-widget-video.footer-globe {
    position: absolute !important;
    z-index: 1;
    /* Size is a pre-paint fallback only. magsoft.js measures the wordmark's
       cap height and writes exact width/height inline — so no !important
       here, or the inline values lose and the globe never matches S and F. */
    width: clamp(150px, 14vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: .85;
    pointer-events: none !important;
    user-select: none;
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
    mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
}
.elementor-widget-video.footer-globe .elementor-widget-container,
.elementor-widget-video.footer-globe .elementor-wrapper,
.elementor-widget-video.footer-globe .e-hosted-video,
.elementor-widget-video.footer-globe video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    padding: 0 !important;
}
/* Recolour the globe from its native cyan to Magsoft blue.
   Source footage measures hue 175.5; --c-brand #3b74f2 is hue 221.3.
   CSS hue-rotate is a matrix approximation, not a true HSL rotation —
   it under-rotates, so +56deg (not +46) lands on 220.5. Verified by
   sampling the tinted frame in-browser. saturate() restores the
   vividness the rotation costs, without flattening the globe's shading. */
.elementor-widget-video.footer-globe video {
    filter: hue-rotate(56deg) saturate(1.45);
}
.elementor-widget-video.footer-globe .elementor-custom-embed-play,
.elementor-widget-video.footer-globe .elementor-custom-embed-image-overlay { display: none !important; }
.elementor-widget-video.footer-globe video::-webkit-media-controls { display: none !important; }

/* ---------- 10. Dark bands that stay dark in light mode ---------- */
.tech-band {
    background-color: #0a1526;
    background-image:
        radial-gradient(1100px 420px at 12% -20%, rgba(59, 116, 242, .24), transparent 62%),
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: auto, 62px 62px, 62px 62px;
}
html[data-theme="light"] .keep-dark .elementor-heading-title,
html[data-theme="light"] .keep-dark p,
html[data-theme="light"] .keep-dark .elementor-widget-text-editor { color: #fff !important; }

/* ---------- 11. Map info card ---------- */
.contact-map { position: relative; }
.contact-map-card {
    position: absolute !important;
    z-index: 2;
    left: clamp(1rem, 4vw, 3rem);
    top: clamp(1rem, 4vw, 2.5rem);
    max-width: 340px;
    border-radius: 16px;
    background: rgba(9, 17, 33, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .32);
}
html[data-theme="light"] .contact-map-card {
    background: rgba(255, 255, 255, .94);
    border-color: var(--c-line);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
}
.contact-map .elementor-widget-google_maps iframe { filter: grayscale(1) contrast(1.05) brightness(.98); }
/* Below the float breakpoint the card drops under the map and centres,
   rather than stretching to the right edge of the viewport. */
@media (max-width: 860px) {
    .contact-map-card {
        position: static !important;
        max-width: 560px;
        width: auto;
        margin: 18px auto !important;
    }
}

/* ---------- 12. Chips ---------- */
/* Centred and evenly spaced on every screen size */
.ct-chips .elementor-icon-list-items {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
}
.ct-chips .elementor-icon-list-item {
    border: 1px solid var(--c-line);
    border-radius: 999px;
    padding: 11px 22px !important;
    margin: 0 !important;
    background: var(--chip-bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ct-chips .elementor-icon-list-item:hover {
    background: rgba(59, 116, 242, .14);
    border-color: rgba(59, 116, 242, .55);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -12px rgba(59, 116, 242, .55);
}
.ct-chips .elementor-icon-list-item a,
.ct-chips .elementor-icon-list-item span { white-space: nowrap; }
/* The eyebrow above the chips centres with them */
.ct-chips-head .elementor-heading-title { text-align: center; }

/* ---------- 13. Custom cursor ---------- */
.cursor-dot {
    position: fixed; left: 0; top: 0; z-index: 10001;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%; background: var(--c-brand);
    pointer-events: none; transform: translate3d(-60px, -60px, 0);
    transition: opacity .18s ease;
}
.cursor-ring {
    position: fixed; left: 0; top: 0; z-index: 10000;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border: 1.5px solid var(--c-brand); border-radius: 50%;
    pointer-events: none; opacity: .5;
    transform: translate3d(-60px, -60px, 0);
    transition: width .2s ease, height .2s ease, margin .2s ease, opacity .2s ease, background-color .2s ease;
}
.cursor-ring.is-hot { width: 50px; height: 50px; margin: -25px 0 0 -25px; opacity: .95; background-color: rgba(59, 116, 242, .14); }
.cursor-dot.is-hot { opacity: .35; }
@media (max-width: 767px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- 14. Back-to-top with scroll progress ring ---------- */
/* Qi Addons injects its own <a id="qodef-back-to-top"> into wp_footer
   unconditionally — there is no plugin setting for it — which put a
   second, plain-arrow button on the page next to ours. */
#qodef-back-to-top { display: none !important; }
.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 9995;
    display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: 999px;
    border: 1px solid var(--header-hairline);
    background: var(--header-bar-bg);
    color: var(--c-body-fg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    cursor: pointer;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top .tt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .tt-ring-track { stroke: rgba(255, 255, 255, .16); fill: none; }
.to-top .tt-ring-bar { stroke: var(--c-brand); stroke-linecap: round; fill: none; transition: stroke-dashoffset .12s linear; }
.to-top .tt-inner { display: grid; place-items: center; line-height: 1; }
.to-top .tt-pct { font-size: 8.5px; font-weight: 800; margin-top: 2px; }

/* Light mode needs opaque fill and a darker track — the translucent
   header tokens vanish against a near-white page, which reads as a
   bare arrow with no ring or percentage at all. */
html[data-theme="light"] .to-top {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .14);
    box-shadow: 0 10px 26px -10px rgba(15, 23, 42, .28);
}
html[data-theme="light"] .to-top .tt-ring-track { stroke: rgba(15, 23, 42, .14); }

/* ---------- 15. Floating section-index badge ---------- */
.sec-badge {
    position: fixed; right: 20px; top: 50%; z-index: 9994;
    display: grid; gap: 3px; padding: 11px 17px 12px;
    border: 0; border-radius: 15px; cursor: pointer;
    background: var(--c-brand); color: #fff; text-align: left;
    box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none;
    transform: translateY(-50%) translateX(calc(100% + 26px));
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, filter .2s ease;
}
.sec-badge.is-on { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.sec-badge:hover { filter: brightness(1.12); }
.sec-badge .sb-num { font-size: 11px; font-weight: 800; letter-spacing: .16em; opacity: .82; }
.sec-badge .sb-name { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sec-badge .sb-swap { transition: opacity .18s ease; }
.sec-badge.is-swapping .sb-swap { opacity: 0; }
/* Kept on small screens too, just tighter — it is a useful jump target, and
   it sits against the right edge where it clears the content column. */
@media (max-width: 1024px) {
    .sec-badge { right: 12px; padding: 8px 13px 9px; border-radius: 12px; gap: 2px; }
    .sec-badge .sb-num { font-size: 9px; letter-spacing: .12em; }
    .sec-badge .sb-name { font-size: 12px; }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .cursor-ring, .cursor-dot { display: none; }
    .site-header, .header-shell { transition: none !important; }
    .elementor-widget-video.footer-globe video { display: none; }
}

/* ---------- 16b. 404 page ----------
   A standalone split screen: photo left, panel right, no site chrome.
   The reference has neither header nor footer, so both are hidden on the
   404 body class rather than by using a different template. */
body.error404 .site-header,
body.error404 .footer-shell,
body.error404 .to-top,
body.error404 .sec-badge { display: none !important; }

.wrap-404 { min-height: 100vh; min-height: 100svh; }
.err-panel { min-height: 100vh; min-height: 100svh; }

/* The brand blue nought in "404" */
.err-num .elementor-heading-title {
    font-size: clamp(84px, 11vw, 190px);
    line-height: .88;
    font-weight: 700;
    letter-spacing: -.045em;
}
.err-num b { color: var(--c-brand); font-weight: 700; }

/* Fixed toggle, since the header that normally carries one is hidden here */
.err-toggle {
    position: fixed !important;
    top: clamp(1rem, 3vw, 1.75rem);
    right: clamp(1rem, 3vw, 1.75rem);
    z-index: 30;
}

@media (max-width: 900px) {
    .err-image { display: none !important; }
    .err-panel {
        --width: 100% !important;
        --padding-left: 28px !important; --padding-right: 28px !important;
    }
    /* The reference clamps this to ~26px on a narrow screen; the widget's own
       font size has no mobile variant on this install, so it lands here. */
    .err-title .elementor-heading-title { font-size: 27px !important; }
}

/* ---------- 17. FAQ page ---------- */
/* Ported from the static faq.html, whose look came from Tailwind utilities
   plus a page-local <style>. Neither exists here, so every value below is
   the literal computed equivalent. Scoped to .faq-* — nothing outside the
   FAQ page can match these selectors. */

/* Section band. The hairline between bands is the static page's border-t. */
.faq-sec { border-top: 1px solid var(--c-line); }

/* Two columns at 1.05fr / .95fr with a 64px gutter (lg:gap-16), matching
   lg:grid-cols-[1.05fr_.95fr]. Elementor containers are flex; grid is the
   only way to get real fr ratios, and children become grid items cleanly. */
@media (min-width: 1024px) {
    /* A *boxed* Elementor container wraps its children in .e-con-inner, so
       `display:grid` on .faq-grid itself yields a grid of exactly one item —
       that wrapper — and the two columns stay stacked inside it. The grid has
       to go on whichever element actually holds the children: .e-con-inner
       when boxed, the container itself when set to full width. */
    .faq-grid > .e-con-inner,
    .faq-grid.e-con-full {
        display: grid !important;
        grid-template-columns: 1.05fr .95fr;
        gap: 64px;
        align-items: start;
    }
    /* Sections 02 and 04 put the picture on the left (lg:order-1/2). DOM order
       stays text-then-image so the reading order is right on phones. */
    .faq-grid--rev > .e-con-inner,
    .faq-grid--rev.e-con-full { grid-template-columns: .95fr 1.05fr; }
    .faq-grid--rev .faq-col { order: 2; }
    .faq-grid--rev .faq-fig { order: 1; }
}
/* Below lg the two columns simply stack: text, then picture. */
@media (max-width: 1023px) {
    .faq-col, .faq-fig { --width: 100% !important; }
}

/* Kicker row: brand-blue number + eyebrow, 16px apart (gap-4). */
.faq-kicker { --width: 100%; }
.faq-num .elementor-heading-title {
    font-size: 14px; font-weight: 900; color: var(--c-brand); line-height: 1;
}

.faq-h2 .elementor-heading-title {
    font-size: 30px; font-weight: 600; line-height: 1.25; color: var(--c-body-fg);
}

/* ---- The accordion itself (Elementor nested-accordion = real details/summary,
   the same primitive the static page used) ---- */
.faq-acc .e-n-accordion { display: block; }
.faq-acc .e-n-accordion-item {
    border-bottom: 1px solid var(--c-line);
    background: none;
    border-radius: 0;
}
.faq-acc .e-n-accordion-item-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; cursor: pointer;
    padding: 20px 0;                     /* py-5 */
    border: 0; background: none;
    font-size: 18px; font-weight: 700;   /* md:text-lg, font-bold */
    color: var(--c-body-fg);
    list-style: none;
}
.faq-acc .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.faq-acc .e-n-accordion-item-title::marker { content: ""; }
.faq-acc .e-n-accordion-item-title-header,
.faq-acc .e-n-accordion-item-title-header > * {
    font-size: inherit; font-weight: inherit; color: inherit;
    margin: 0; line-height: 1.4;
}
/* Both states carry the same plus glyph; open rotates it 45° into an x,
   exactly as group-open:rotate-45 did on the static page. */
.faq-acc .e-n-accordion-item-title-icon {
    flex: 0 0 auto; color: var(--c-brand);
}
.faq-acc .e-n-accordion-item-title-icon svg,
.faq-acc .e-n-accordion-item-title-icon i {
    width: 20px; height: 20px; font-size: 20px; fill: currentColor;
    transition: transform .3s ease;
}
.faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon i {
    transform: rotate(45deg);
}
/* Answer body */
.faq-acc .e-n-accordion-item > .e-con { padding: 0 0 20px; }
.faq-acc .faq-a .elementor-widget-container > * ,
.faq-acc .faq-a p {
    margin: 0; max-width: 820px;
    font-size: 14px; line-height: 1.75; color: var(--c-mist);
}
.faq-acc .faq-a a { color: var(--c-body-fg); font-weight: 700; text-decoration: underline; }

/* ---- Side picture ----
   Locked to the accordion's COLLAPSED height (magsoft.js sets --faq-h), so
   opening a question never resizes the picture or moves the section. */
@media (min-width: 1024px) {
    .faq-fig {
        align-self: start; position: relative; overflow: hidden;
        height: var(--faq-h, 560px);
    }
    /* The image WIDGET's wrapper is the real containing block — without this
       the absolutely-positioned img sizes against a 0-height box. */
    .faq-fig .elementor-widget-image,
    .faq-fig .elementor-widget-image .elementor-widget-container {
        position: absolute !important; inset: 0 !important;
        width: 100% !important; height: 100% !important;
    }
    .faq-fig .elementor-widget-image img {
        width: 100% !important; height: 100% !important;
        object-fit: cover; object-position: center; display: block;
    }
}
@media (max-width: 1023px) {
    .faq-fig .elementor-widget-image img { width: 100%; height: auto; display: block; }
}

/* Phones: the same trimming the other sections get. */
@media (max-width: 767px) {
    .faq-h2 .elementor-heading-title { font-size: 24px; }
    .faq-acc .e-n-accordion-item-title { font-size: 16px; gap: 16px; }
    .faq-sec {
        --padding-top: 56px !important; --padding-bottom: 56px !important;
        --padding-left: 18px !important; --padding-right: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-acc .e-n-accordion-item-title-icon svg,
    .faq-acc .e-n-accordion-item-title-icon i { transition: none; }
}

/* The static h1 carried max-w-[18ch]; Elementor has no max-width control on
   a heading, so it lives here. Same declaration, same wrap. */
.faq-title .elementor-heading-title { max-width: 18ch; }

/* ============================================================
   18. HOME PAGE
   Ported from home.html's <style> block. Every rule is an effect
   Elementor's own controls cannot express (grids, hover states,
   gradients, the marquee) or an override of an Elementor-set
   property — which is why so many carry !important.
   ============================================================ */
html[data-theme="light"] {
    --card-bg: #ffffff;
    --card-border: rgba(15, 23, 42, .09);
    --card-hover-bg: #eef3ff;
    --card-hi-bg: #d3d9e2;
    --card-hi-hover-bg: #c7cfda;
    --card-accent-bg: linear-gradient(180deg, rgba(37,86,204,.10), rgba(37,86,204,.02));
    --card-accent-hover-bg: linear-gradient(180deg, rgba(37,86,204,.18), rgba(37,86,204,.06));
    --card-accent-border: rgba(37, 86, 204, .35);
    --plat-hover-bg: #f1f5ff;
}

/* ---- S3 What We Build ---- */
/* The card row. .wwb-grid is a full-width container (children are direct),
   so display goes on it directly — Elementor's e-flex class hard-sets
   display:flex and never reads --display. */
.wwb-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 1024px) { .wwb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wwb-grid { grid-template-columns: 1fr; } }

.wwb-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    display: flex !important;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.wwb-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent-border);
    background: var(--card-hover-bg);
}
.wwb-card-hi { background: var(--card-hi-bg); }
.wwb-card-hi:hover { background: var(--card-hi-hover-bg); }
/* Alternate cards ride 64px lower on desktop, as the reference staggers them */
@media (min-width: 1025px) { .wwb-card-hi { margin-top: 64px; } }

/* The CTA sits at the card foot regardless of body length */
.wwb-card .card-cta { margin-top: auto !important; align-self: flex-start; }
.card-ico { transition: transform .25s ease; display: inline-flex; }
.wwb-card:hover .card-ico { transform: scale(1.08); }

/* GovTech accent band */
.wwb-accent {
    background: var(--card-accent-bg);
    border: 1px solid var(--card-accent-border);
    border-radius: 10px;
    transition: background .25s ease;
}
.wwb-accent:hover { background: var(--card-accent-hover-bg); }
@media (max-width: 900px) {
    .wwb-accent-l { --width: 100% !important; }
}

/* ---- S4 Who We Serve — chip marquee ---- */
.mq-viewport {
    overflow-x: clip;
    overflow-y: visible;
    padding-block: 10px;
    max-width: 1620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* flex:0 0 auto is the fix — as a flex item of .mq-viewport the track would
   otherwise shrink to the viewport width and the -50% loop would break.
   gap:0 on the track + padding-right on each group is the reference trick:
   each group carries its own trailing space, so translateX(-50%) lands
   exactly one group along and the loop is seamless. */
.mq-track {
    flex: 0 0 auto !important;
    width: max-content !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    animation: mg-marquee 38s linear infinite;
    animation-direction: reverse;
}
.mq-viewport:hover .mq-track { animation-play-state: paused; }
@keyframes mg-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mq-chips {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 16px !important;
}
.mq-chips .elementor-icon-list-items {
    flex-wrap: nowrap !important;
    gap: 16px !important;
}
.mq-chips .elementor-icon-list-item {
    white-space: nowrap;
    border: 1px solid var(--card-border);
    background: var(--chip-bg);
    border-radius: 999px;
    padding: 12px 24px !important;
    margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ---- S8 Honest facts ---- */
.hf-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 768px) { .hf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hf-grid { grid-template-columns: 1fr; } }
.hf-col { text-align: center; }
.hf-fact .elementor-counter-number-wrapper,
.hf-fact .elementor-counter-title { justify-content: center; text-align: center; }

/* ---- S9 How We Work ---- */
.hw-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) { .hw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hw-grid { grid-template-columns: 1fr; } }

/* ---- Section life: Who We Serve + How We Work ---- */
/* thin connector line behind the four step numbers, drawn on reveal */
.hw-grid { position: relative; }
@media (min-width: 901px) {
    .hw-grid::before {
        content: "";
        position: absolute;
        top: 0;
        left: 2px;
        right: 2px;
        height: 1px;
        background: var(--c-brand);
        opacity: .28;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1s cubic-bezier(.16, 1, .3, 1);
    }
    html.mg-anim .hw-grid.mg-rv-in::before,
    html.mg-anim .hw-grid:has(.hw-step.mg-rv-in)::before { transform: scaleX(1); }
}
.hw-step {
    position: relative;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-top-color .3s ease;
}
@media (hover: hover) {
    .hw-step:hover {
        transform: translateY(-4px);
        border-top-color: var(--c-brand) !important;
    }
}

/* Who We Serve chips — gentle lift only */
.mq-chips .elementor-icon-list-item {
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s ease;
}
@media (hover: hover) {
    .mq-viewport:hover .mq-track { animation-play-state: paused; }
    .mq-chips .elementor-icon-list-item:hover {
        transform: translateY(-3px);
        border-color: var(--c-brand) !important;
    }
}

/* Scroll-reveal — JS tags blocks .mg-rv, then .mg-rv-in when they enter.
   Gated by html.mg-anim (JS adds it) so a no-JS page shows everything. */
html.mg-anim .mg-rv {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
}
html.mg-anim .mg-rv.mg-rv-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.mg-anim .mg-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hw-grid::before { transform: scaleX(1) !important; transition: none !important; }
}

/* ---- S1 Hero ---- */
.s1-frame {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.s1-content { position: relative; }
.s1-eyebrow .elementor-heading-title {
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #8fb3ff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
/* Outline CTA sits on a photo — its border/text must be white, not the
   dark --c-line the base .pill-outline uses. */
html[data-theme] .s1-outline .elementor-button {
    border-color: rgba(255, 255, 255, .65) !important;
    color: #fff !important;
}
/* The wordmark, with the globe standing in for its O. Absolute, hugging
   the frame's lower edge, behind the content. */
.hero-wordmark {
    position: absolute !important;
    left: 0; right: 0;
    bottom: -0.06em;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    width: 100% !important;
}
.hero-wordmark { will-change: transform; }
.hero-wordmark .elementor-heading-title {
    text-align: center;
    white-space: nowrap;
    font-size: clamp(72px, 15vw, 200px);
    font-weight: 800;
    line-height: .76;
    letter-spacing: -.08em;
    /* See-through wordmark — one knob, .40. Raise toward .85 for more solid,
       drop toward .20 for fainter. Declared again below at higher specificity
       because .s1-frame carries keep-dark, and the light-theme keep-dark rule
       (html[data-theme=light] .keep-dark .elementor-heading-title{color:#fff
       !important}) otherwise strips the alpha and paints it solid white. */
    color: rgba(255, 255, 255, .40);
}
html[data-theme] .keep-dark .hero-wordmark .elementor-heading-title,
html[data-theme="light"] .keep-dark .hero-wordmark .elementor-heading-title,
.hero-wordmark .elementor-heading-title {
    color: rgba(255, 255, 255, .40) !important;
}
.hero-wordmark .wm-o,
html[data-theme] .keep-dark .hero-wordmark .wm-o,
html[data-theme="light"] .keep-dark .hero-wordmark .wm-o { color: transparent !important; }
/* Match home.html's .hero-image tint — a light left-to-right gradient, not a
   flat dark veil — so the buildings read through the 85% wordmark. */
.s1-frame::before {
    background: linear-gradient(90deg, rgba(5, 12, 24, .80), rgba(5, 12, 24, .40) 46%, rgba(5, 12, 24, .34)) !important;
}
.elementor-widget-video.hero-globe { will-change: transform; }

/* Hero globe — the same treatment as the footer globe. Sized and placed
   by magsoft.js measuring the .wm-o glyph. */
.elementor-widget-video.hero-globe {
    position: absolute !important;
    z-index: 2;
    width: clamp(120px, 12vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: .85;
    pointer-events: none !important;
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
    mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
}
.elementor-widget-video.hero-globe .elementor-widget-container,
.elementor-widget-video.hero-globe .elementor-wrapper,
.elementor-widget-video.hero-globe .e-hosted-video,
.elementor-widget-video.hero-globe video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    padding: 0 !important;
}
.elementor-widget-video.hero-globe video { filter: hue-rotate(56deg) saturate(1.45); }
.elementor-widget-video.hero-globe .elementor-custom-embed-play,
.elementor-widget-video.hero-globe .elementor-custom-embed-image-overlay { display: none !important; }

/* ---- S2 / S6 photos ---- */
.home-fig { overflow: hidden; border-radius: 6px; }
.home-fig img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 6px;
}
/* Image parallax: keep the scaled/translated <img> clipped to its frame.
   JS writes the transform inline (must stay un-!important here).
   NB: plat-media / home-fig / ab-why-main come from _css_classes, so the
   class sits ON the image widget — clip the widget itself, not a
   descendant. Getting this wrong let the 1.1x overscale spill out of the
   card and land on the heading below it. */
.ab-imgband, .home-fig, .home-fig-tall, .ab-team-photo, .plat-shot,
.elementor-widget-image.plat-media,
.elementor-widget-image.home-fig,
.elementor-widget-image.ab-why-main,
.ab-why-main .elementor-widget-container,
.plat-media .elementor-widget-container { overflow: hidden !important; }
.ab-why-main img, .ab-team-photo img, .home-fig img, .home-fig-tall img,
.plat-media img, .plat-shot img, .ab-imgband img { will-change: transform; }
.home-fig-tall img { height: 560px; }
@media (max-width: 1024px) { .home-fig img { height: 360px; } .home-fig-tall img { height: 420px; } }
@media (max-width: 600px)  { .home-fig img, .home-fig-tall img { height: 260px; } }

/* ---- S5 Featured Platforms ---- */
.plat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
    margin-top: 64px !important;
}
@media (max-width: 700px) { .plat-grid { margin-top: 44px !important; } }
@media (max-width: 1024px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .plat-grid { grid-template-columns: 1fr; } }
.plat-card {
    display: flex !important;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 2px solid var(--c-brand);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.plat-card:hover {
    transform: translateY(-5px);
    background: var(--plat-hover-bg);
    box-shadow: 0 18px 44px rgba(59, 116, 242, .14);
}
/* equal-height cards: the text container fills the card, chips pin to the bottom */
.plat-card > .e-con { flex: 1 1 auto !important; }
.plat-card .plat-chips { margin-top: auto !important; padding-top: 18px !important; }
.plat-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
    background: #0a1526;
}
.plat-list ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
}
html[data-theme="light"] .plat-list ul { color: #334155; }
.plat-list li { position: relative; padding-left: 16px; }
.plat-list li::before { content: "•"; position: absolute; left: 0; color: var(--c-brand); }
.plat-chips .elementor-icon-list-items { flex-wrap: wrap !important; gap: 8px !important; }
.plat-chips .elementor-icon-list-item {
    border: 1px solid var(--card-border);
    background: var(--chip-bg);
    border-radius: 999px;
    padding: 6px 14px !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* ---- S6 sub-points ---- */
.s6-subs { row-gap: 28px !important; }
@media (max-width: 480px) { .s6-sub { --width: 100% !important; } }

/* ---- S12 Final CTA (video background) ---- */
.s12-cta { position: relative !important; }
.s12-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: #00091d url('https://magsoftcorp.com/wp-content/uploads/2026/09/home-cta-poster.jpg') center / cover no-repeat;
}
.s12-bg .elementor-widget-container,
.s12-bg .elementor-wrapper,
.s12-bg .e-hosted-video,
.s12-bg video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    padding: 0 !important;
}
.s12-bg .elementor-custom-embed-play,
.s12-bg .elementor-custom-embed-image-overlay { display: none !important; }
.s12-veil {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.s12-inner { position: relative; z-index: 3; }

/* ---- Vidscroll capsule (scroll-scaling video) — ported from home.html ---- */
.vidscroll { position: relative; min-height: 124vh; }
.vidscroll-sticky {
    position: sticky !important;
    top: 0;
    height: 78vh;
    min-height: 540px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.elementor-widget-video.vidscroll-media {
    position: relative;
    z-index: 1;
    width: min(680px, 74vw);
    aspect-ratio: 16 / 9;
    border-radius: 90px;
    overflow: hidden;
    transform: scale(.3);
    transform-origin: center center;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
    will-change: transform, border-radius;
    margin: 0 !important;
}
.elementor-widget-video.vidscroll-media .elementor-widget-container,
.elementor-widget-video.vidscroll-media .elementor-wrapper,
.elementor-widget-video.vidscroll-media .e-hosted-video,
.elementor-widget-video.vidscroll-media video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    padding: 0 !important;
    display: block;
}
.elementor-widget-video.vidscroll-media .elementor-custom-embed-play,
.elementor-widget-video.vidscroll-media .elementor-custom-embed-image-overlay { display: none !important; }
.elementor-widget.vidscroll-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 2;
    will-change: opacity, right, left;
}
.elementor-widget.vidscroll-label.is-left  { right: calc(50% + 140px); }
.elementor-widget.vidscroll-label.is-right { left: calc(50% + 140px); }
.elementor-widget.vidscroll-label.is-left .elementor-heading-title  { text-align: right; }
.elementor-widget.vidscroll-label.is-right .elementor-heading-title { text-align: left; }
.elementor-widget.vs-top {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 4;
    width: auto !important;
    will-change: top;
}
.vs-top .elementor-widget-container > p { white-space: nowrap; margin: 0; }
.vs-top .vs-tag {
    display: inline-block;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--c-brand);
    color: #fff;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vs-top a { color: var(--c-body-fg); }
.elementor-widget.vs-headline {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 4;
    width: auto !important;
    will-change: bottom;
}
.vs-headline .elementor-heading-title { white-space: nowrap; }
@media (max-width: 1024px) { .elementor-widget.vidscroll-label { display: none; } }
@media (max-width: 720px) {
    .vs-top .elementor-widget-container > p,
    .vs-headline .elementor-heading-title { white-space: normal; width: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
    .vidscroll { min-height: 0; }
    .vidscroll-sticky { position: static !important; height: auto; min-height: 0; padding: 5rem 1rem; }
    .elementor-widget-video.vidscroll-media { transform: none; border-radius: 24px; width: min(1100px, 92vw); }
    .elementor-widget.vs-top, .elementor-widget.vs-headline { position: static; transform: none; margin-top: 1.5rem; }
}

/* ---- S7 word marquee + pointer image-trail — ported from home.html ---- */
.mq-word-viewport {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-word-viewport,
.mq-word-viewport > .e-con-inner {
    overflow: hidden !important;
}
.mq-word-track,
.mq-word-track .elementor-widget-container {
    overflow: visible !important;
}
/* JS rebuilds the <p> into .mqw-term / .mqw-sep flex items (see magsoft.js),
   so this survives any text re-edit in the Elementor editor. */
.mq-word-track > p,
.mq-word-track .elementor-widget-container > p {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    animation: mg-marquee 36s linear infinite !important;
    animation-direction: reverse !important;
    will-change: transform;
}
.mq-word-viewport:hover .mq-word-track > p,
.mq-word-viewport:hover .mq-word-track .elementor-widget-container > p {
    animation-play-state: paused !important;
}
.mq-word-track .mqw-term,
.mq-word-track .mqw-sep {
    flex: 0 0 auto !important;
    display: inline-block !important;
    font-size: clamp(34px, 5.4vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: rgba(15, 23, 42, .58);
}
.mq-word-track .mqw-term { padding: 0 22px !important; }
.mq-word-track .mqw-sep { opacity: .5; }
html[data-theme="dark"] .mq-word-track .mqw-term,
html[data-theme="dark"] .mq-word-track .mqw-sep { color: rgba(255, 255, 255, .32); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mq-word-track .mqw-term,
    html:not([data-theme="light"]) .mq-word-track .mqw-sep { color: rgba(255, 255, 255, .32); }
}
/* fallback while JS has not yet run: keep it a single faint nowrap line */
.mq-word-track > p:not([data-mq-built]) {
    color: rgba(15, 23, 42, .58);
    font-size: clamp(34px, 5.4vw, 58px) !important;
    font-weight: 700 !important;
}
.trail-images {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    z-index: 5;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.elementor-widget-image.trail-img {
    position: absolute;
    width: 152px;
    height: 140px;
    margin: -70px 0 0 -76px;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transform: scale(.5) rotate(-5deg);
    transition: opacity .5s ease, transform .5s ease;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .42);
}
.elementor-widget-image.trail-img.is-in {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: opacity .16s ease, transform .32s cubic-bezier(.2, .7, .2, 1);
}
.elementor-widget-image.trail-img .elementor-widget-container,
.elementor-widget-image.trail-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .mq-word-track > p,
    .mq-word-track .elementor-widget-container > p { animation: none !important; }
    .trail-images { display: none !important; }
}

/* ---- Home section padding on phones ---- */
@media (max-width: 767px) {
    .home-sec {
        --padding-top: 64px !important; --padding-bottom: 64px !important;
        --padding-left: 18px !important; --padding-right: 18px !important;
    }
    .home-sec .h-display .elementor-heading-title { font-size: 28px !important; }
    .s1-h1 .elementor-heading-title { font-size: 34px !important; }
    .s1-frame {
        --padding-top: 96px !important; --padding-bottom: 40px !important;
        --padding-left: 20px !important; --padding-right: 20px !important;
        --min-height: 560px !important;
    }
    .s1-content { --width: 100% !important; }
    /* S10 tech band + S11 form band: trim the generous side padding on phones */
    .home-sec .tech-band,
    .home-sec .ct-form-band {
        --padding-left: 22px !important; --padding-right: 22px !important;
        --padding-top: 40px !important; --padding-bottom: 40px !important;
    }
    .s12-cta { --padding-top: 80px !important; --padding-bottom: 80px !important; }
}

/* ============================================================
   19. ABOUT PAGE (post 883)
   ============================================================ */

/* --- S2 Welcome + Mission/Vision --- */
.ab-welcome { position: relative; overflow: hidden; }
/* faint concentric decoration rings behind the welcome grid */
.ab-welcome::before, .ab-welcome::after {
    content: ""; position: absolute; left: 62%; top: 44%;
    aspect-ratio: 1; border-radius: 999px; pointer-events: none;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, .06);
}
.ab-welcome::before { width: min(560px, 62vw); }
.ab-welcome::after  { width: min(880px, 96vw); border-color: rgba(255, 255, 255, .035); }
html[data-theme="light"] .ab-welcome::before,
html[data-theme="light"] .ab-welcome::after { border-color: rgba(15, 23, 42, .06); }
.ab-welcome-grid {
    display: grid !important;
    gap: 3rem !important;
    align-items: start !important;
    max-width: 1620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 980px) {
    .ab-welcome-grid { grid-template-columns: 1fr 1fr !important; gap: 5rem !important; }
}
.ab-welcome-body {
    border-left: 1px solid var(--c-line);
    padding-left: 2.25rem !important;
}
@media (max-width: 979px) {
    .ab-welcome-body { border-left: 0; padding-left: 0 !important; }
}
.ab-welcome-btns { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }

/* Mission / Vision arrow slider — ported from about.html .ab-mv */
.ab-mv { position: relative; border-top: 1px solid var(--c-line); padding-top: 1.75rem !important; }
.ab-mv-track {
    display: flex !important; flex-wrap: nowrap !important;
    overflow: hidden !important;
}
.ab-mv-panel {
    flex: 0 0 100% !important; min-width: 100% !important;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.ab-mv-nav {
    display: flex !important; gap: 1.6rem !important; align-items: center !important;
    margin-top: 1.75rem !important;
}
.ab-mv-nav [data-dir] {
    color: var(--c-mist);
    padding: .5rem 0 !important;
    transition: color .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.ab-mv-nav [data-dir] .elementor-icon-wrapper,
.ab-mv-nav [data-dir] .elementor-icon {
    display: block !important; width: auto !important; height: auto !important;
    background: none !important; border: 0 !important; text-align: left !important;
}
.ab-mv-nav [data-dir] svg {
    display: block !important; overflow: visible;
    width: 42px !important; height: 16px !important;
    color: currentColor;
}
.ab-mv-nav [data-dir]:hover { color: var(--c-brand); }
.ab-mv-nav [data-dir="1"]:hover { transform: translateX(7px); }
.ab-mv-nav [data-dir="-1"]:hover { transform: translateX(-7px); }
.ab-mv-nav [data-dir].is-off { opacity: .28; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ab-mv-nav [data-dir="1"] svg  { animation: mgArrowR 3.4s ease-in-out infinite; }
    .ab-mv-nav [data-dir="-1"] svg { animation: mgArrowL 3.4s ease-in-out infinite; }
    .ab-mv-nav [data-dir]:hover svg { animation-play-state: paused; }
}
@keyframes mgArrowR { 0%,80%,100% { transform: translateX(0); } 87% { transform: translateX(4px); } 93% { transform: translateX(1px); } }
@keyframes mgArrowL { 0%,80%,100% { transform: translateX(0); } 87% { transform: translateX(-4px); } 93% { transform: translateX(-1px); } }

/* Lenis smooth scroll — site-wide */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* --- S3 Full-width image band --- */
.ab-imgband { position: relative; overflow: hidden; line-height: 0; }
.ab-imgband img {
    width: 100% !important;
    height: clamp(260px, 40vw, 520px) !important;
    object-fit: cover !important;
    display: block;
    transform: scale(1.16);
    will-change: transform;
}
.ab-imgband::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,13,28,.15), rgba(6,13,28,.45));
}

/* --- S4 Timeline (dark band) --- */
.ab-darkband { background: linear-gradient(180deg, #0b1728 0%, #081120 100%) !important; }
.ab-time {
    display: grid !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255,255,255,.14);
    max-width: 1620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 720px)  { .ab-time { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1100px) { .ab-time { grid-template-columns: repeat(4, 1fr) !important; } }
.ab-time-item {
    position: relative;
    padding: 2.5rem 1.75rem 0 0 !important;
    transition: transform .3s ease;
}
.ab-time-item::before {
    content: ""; position: absolute; left: 0; top: -6px;
    width: 11px; height: 11px; border-radius: 999px;
    background: var(--c-brand); box-shadow: 0 0 0 4px rgba(59,116,242,.22);
}
@media (min-width: 720px) {
    .ab-time-item { border-left: 1px solid rgba(255,255,255,.14); padding-left: 1.75rem !important; }
}
.ab-time-item:hover { transform: translateY(-4px); }

/* --- S5 Why choose Magsoft --- */
.ab-why-top {
    display: grid !important;
    gap: 3rem !important;
    align-items: center !important;
    max-width: 1620px !important;
    margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 980px) {
    .ab-why-top { grid-template-columns: 1fr 1.05fr !important; gap: 4.5rem !important; }
}
.ab-why-media { position: relative; padding: 0 0 3.5rem 3.5rem !important; }
.ab-why-media .ab-why-main img {
    width: 100% !important; aspect-ratio: 4 / 3.4 !important;
    object-fit: cover !important; border-radius: 14px; display: block;
}
.ab-why-media .ab-why-inset {
    position: absolute !important; left: 0; bottom: 0; width: 48% !important; z-index: 2;
}
.ab-why-media .ab-why-inset img {
    aspect-ratio: 1 !important; object-fit: cover !important;
    border-radius: 12px; border: 4px solid var(--c-ink);
    box-shadow: 0 24px 50px rgba(0,0,0,.28); display: block; width: 100%;
}
.ab-bars { display: grid !important; gap: 1.5rem !important; }
.ab-bars .elementor-widget-container { position: relative; }
.ab-bars .elementor-title {
    color: var(--c-body-fg) !important;
    font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 13px;
    margin-bottom: 8px;
}
.ab-bars .elementor-progress-wrapper {
    background: var(--c-line) !important;
    border-radius: 999px !important; height: 6px !important; overflow: visible !important;
}
.ab-bars .elementor-progress-bar {
    background: linear-gradient(90deg, var(--c-brand), #6ea0ff) !important;
    border-radius: 999px !important; height: 6px !important;
    display: flex; align-items: center;
}
.ab-bars .elementor-progress-text { display: none !important; }
.ab-bars .elementor-progress-percentage {
    position: absolute !important; right: 0; top: 0;
    color: var(--c-mist) !important; background: transparent !important;
    font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 13px;
    padding: 0 !important; margin: 0 !important; line-height: 1;
}

.ab-feat {
    display: grid !important; gap: 1px !important;
    background: var(--c-line); border: 1px solid var(--c-line);
    border-radius: 16px; overflow: hidden;
    max-width: 1620px !important; margin: 4rem auto 0 !important;
}
@media (min-width: 640px)  { .ab-feat { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .ab-feat { grid-template-columns: repeat(3, 1fr) !important; } }
.ab-feat-item { position: relative; background: var(--c-panel) !important; }
.ab-feat-item::before {
    content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
    background: var(--c-brand); transition: width .3s ease; z-index: 2;
}
.ab-feat-item:hover { background: var(--c-panel2) !important; }
.ab-feat-item:hover::before { width: 100%; }
.ab-feat-ico { text-align: left !important; }
.ab-feat-ico .elementor-icon-wrapper { text-align: left !important; }
.ab-feat-ico .elementor-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 3rem !important; height: 3rem !important; border-radius: 999px !important;
    background: rgba(59,116,242,.12) !important; border: 1px solid rgba(59,116,242,.32) !important;
    color: var(--c-brand) !important;
}
.ab-feat-ico .elementor-icon i,
.ab-feat-ico .elementor-icon svg { width: 1.25rem !important; height: 1.25rem !important; font-size: 1.25rem !important; fill: var(--c-brand) !important; }

/* counter / stat icon badge (S5) — matches about.html .ab-c-ico */
.ab-c-ico { text-align: center !important; }
.ab-c-ico .elementor-icon-wrapper { text-align: center !important; }
.ab-c-ico .elementor-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 2.75rem !important; height: 2.75rem !important; border-radius: 999px !important;
    background: rgba(59,116,242,.1) !important; border: 1px solid rgba(59,116,242,.3) !important;
    color: var(--c-brand) !important; margin-bottom: 1.1rem;
}
.ab-c-ico .elementor-icon i,
.ab-c-ico .elementor-icon svg { width: 1.15rem !important; height: 1.15rem !important; font-size: 1.15rem !important; fill: var(--c-brand) !important; }

.ab-counters {
    display: grid !important; gap: 1px !important;
    background: var(--c-line); border: 1px solid var(--c-line);
    border-radius: 16px; overflow: hidden;
    max-width: 1620px !important; margin: 4rem auto 0 !important;
}
@media (min-width: 560px)  { .ab-counters { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .ab-counters { grid-template-columns: repeat(4, 1fr) !important; } }
.ab-counters > * { background: var(--c-panel) !important; }
.ab-counters > *:hover { background: var(--c-panel2) !important; }
.ab-counter .elementor-counter-number-wrapper { justify-content: center; }
.ab-counter .elementor-counter-title { text-align: center; }

/* --- S6 Team (dark band) --- */
.ab-team-band {
    display: grid !important; gap: 1.75rem !important;
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 860px) { .ab-team-band { grid-template-columns: 1fr auto !important; align-items: end !important; } }
.ab-team-btns { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.ab-team-checks {
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 2rem !important; margin: 2.5rem auto 0 !important;
    max-width: 1620px !important;
}
.ab-team-checks .elementor-icon-list-items {
    display: grid !important; gap: 1rem !important;
}
@media (min-width: 720px)  { .ab-team-checks .elementor-icon-list-items { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1080px) { .ab-team-checks .elementor-icon-list-items { grid-template-columns: repeat(4, 1fr) !important; } }
.ab-team-photo { position: relative; line-height: 0; margin-top: 4rem !important; }
.ab-team-photo img { width: 100% !important; height: clamp(280px, 42vw, 560px) !important; object-fit: cover !important; }
.ab-team-cap {
    position: absolute !important; left: 50% !important; bottom: 26px !important;
    transform: translateX(-50%) !important; z-index: 2; width: auto !important;
}
.ab-team-cap .elementor-heading-title {
    display: inline-block;
    padding: .6rem 1.4rem; border-radius: 999px; line-height: 1;
    background: rgba(9,17,33,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff;
}

/* --- S7 Recognised by the best --- */
.ab-rec-head {
    display: grid !important; gap: 1.5rem !important; align-items: end !important;
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 900px) { .ab-rec-head { grid-template-columns: 1.1fr .9fr !important; gap: 4rem !important; } }
.ab-logos {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important; background: var(--c-line); border: 1px solid var(--c-line);
    border-radius: 16px; overflow: hidden;
    max-width: 1620px !important; margin: 3.5rem auto 0 !important;
}
@media (min-width: 560px)  { .ab-logos { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1000px) { .ab-logos { grid-template-columns: repeat(6, 1fr) !important; } }
.ab-logos .elementor-widget-image {
    background: var(--c-panel);
    display: grid !important; place-items: center;
    padding: clamp(1.5rem, 3vw, 2.75rem) !important;
    margin: 0 !important;
}
.ab-logos .elementor-widget-image img {
    max-height: 34px !important; max-width: 128px !important; width: auto !important;
    object-fit: contain; transition: opacity .25s ease, filter .25s ease;
}
.ab-logos .elementor-widget-image:hover img { opacity: .45; filter: grayscale(1); }

/* --- S8 Closing CTA --- */
.ab-cta {
    position: relative; overflow: hidden; border-radius: 4px;
    background: linear-gradient(120deg, #0c1a30 0%, #0a1424 55%) !important;
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
.ab-cta::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("https://magsoftcorp.com/wp-content/uploads/2026/09/architecture-infra.jpg") right center / cover no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 40%, #000 96%);
            mask: linear-gradient(90deg, transparent 40%, #000 96%);
    opacity: .5;
}
.ab-cta > .e-con-inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .ab-time-item, .ab-feat-item, .ab-feat-item::before, .ab-logos img { transition: none !important; }
}

/* ============================================================
   20. JUSTIFIED BODY PROSE — site-wide, every breakpoint
   NB: on this build the text-editor <p> is a DIRECT child of
   .elementor-widget-text-editor (no .elementor-widget-container).
   ============================================================ */
main .elementor-widget-text-editor > p,
main .elementor-widget-text-editor .elementor-widget-container > p,
main .elementor-widget-text-editor > .elementor-widget-container,
main .elementor-widget-text-editor {
    text-align: justify !important;
    text-align-last: left !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-break: normal;
}
/* Short blurbs, labels, centred leads and the marquee stay unjustified */
main .mq-word-track,
main .mq-word-track > p,
main .ab-feat-item .elementor-widget-text-editor,
main .ab-feat-item .elementor-widget-text-editor > p,
main .hw-step .elementor-widget-text-editor,
main .hw-step .elementor-widget-text-editor > p,
main .wwb-card .elementor-widget-text-editor,
main .wwb-card .elementor-widget-text-editor > p,
main .plat-list,
main .plat-list > p,
main #who-we-serve .elementor-widget-text-editor,
main #who-we-serve .elementor-widget-text-editor > p {
    text-align: left !important;
    text-align-last: auto !important;
}

/* ============================================================
   21. SOLUTIONS PAGE  (ported from solutions.html)
   ============================================================ */

/* --- S2 Intro --- */
.sol-intro .elementor-widget-container > p,
.sol-intro > p {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* --- S3 Feature image (parallax; JS writes the transform inline) --- */
.sol-feature { overflow: hidden; border-radius: 18px; }
.sol-feature img {
    width: 100% !important;
    height: clamp(260px, 32vw, 460px) !important;
    object-fit: cover !important;
    display: block;
    transform: scale(1.18);
    will-change: transform;
}

/* --- S4 How Magsoft helps --- */
.sol-help-head {
    display: grid !important;
    gap: 1.25rem !important;
    align-items: end !important;
    max-width: 1620px !important;
    margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 900px) {
    .sol-help-head { grid-template-columns: 1fr .9fr !important; gap: 3rem !important; }
}
.sol-help-head .h-display .elementor-heading-title { max-width: 16ch; }
.sol-help-note .elementor-widget-container > p,
.sol-help-note > p { font-size: .9rem !important; line-height: 1.7 !important; color: var(--c-mist) !important; text-align: left !important; }

.sol-help-list { margin-top: 2.75rem !important; border-top: 1px solid var(--c-line); }
.sol-help-list .elementor-icon-list-items {
    display: grid !important; gap: 0 !important;
}
@media (min-width: 720px)  { .sol-help-list .elementor-icon-list-items { grid-template-columns: repeat(2, 1fr) !important; column-gap: 3rem !important; } }
@media (min-width: 1080px) { .sol-help-list .elementor-icon-list-items { grid-template-columns: repeat(3, 1fr) !important; } }
.sol-help-list .elementor-icon-list-item { margin: 0 !important; border-bottom: 1px solid var(--c-line); padding: 0 !important; }
.sol-help-list .elementor-icon-list-item > a {
    display: flex !important; align-items: center !important; gap: .5rem !important;
    padding: 1.25rem 0 !important;
    font-size: .95rem; font-weight: 600; color: var(--c-body-fg) !important;
    transition: color .2s ease, padding-left .25s ease;
}
.sol-help-list .elementor-icon-list-text::before {
    content: "\203A"; color: var(--c-brand); font-weight: 700; margin-right: .6rem;
}
.sol-help-list .elementor-icon-list-item:hover > a { color: var(--c-brand) !important; padding-left: .6rem !important; }
.sol-help-list .elementor-icon-list-icon { display: none !important; }

/* --- S5 Experience --- */
.sol-help2 {
    display: grid !important; gap: 2.5rem !important; align-items: start !important;
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 960px) { .sol-help2 { grid-template-columns: .82fr 1.18fr !important; gap: 4rem !important; } }
.sol-mask {
    position: relative !important; overflow: hidden !important; border-radius: 14px;
    aspect-ratio: 10 / 7 !important;      /* SOL-How-We-Help.jpeg is 1500x1050 */
    align-self: start !important; height: auto !important; min-height: 0 !important;
}
.sol-mask > .elementor-widget-image { position: absolute !important; inset: 0 !important; margin: 0 !important; }
.sol-mask .elementor-widget-image .elementor-widget-container { position: absolute; inset: 0; height: 100%; }
.sol-mask img { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.sol-mask::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(112deg, transparent 38%, rgba(255,255,255,.16) 38.5%, rgba(255,255,255,.055) 41%, rgba(255,255,255,.055) 59%, transparent 59.6%),
        linear-gradient(112deg, transparent 72%, rgba(110,150,255,.14) 74%, rgba(110,150,255,0) 83%);
}
html[data-theme="light"] .sol-mask::after {
    background:
        linear-gradient(112deg, transparent 38%, rgba(255,255,255,.34) 38.5%, rgba(255,255,255,.12) 41%, rgba(255,255,255,.12) 59%, transparent 59.6%),
        linear-gradient(112deg, transparent 72%, rgba(59,116,242,.14) 74%, rgba(59,116,242,0) 83%);
}
/* Frosted-glass facet cluster — verbatim from solutions.html.
   The six <i> tiles are injected by magsoft.js (pure decoration, no widgets). */
.sol-facets {
    position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 10px;
    grid-template-columns: repeat(3, clamp(58px, 8vw, 104px));
    grid-auto-rows: clamp(58px, 8vw, 104px);
}
.sol-facets::before {
    content: ""; position: absolute; inset: -22%; z-index: -1;
    background: radial-gradient(60% 60% at 50% 55%, rgba(8,14,28,.42), rgba(8,14,28,0) 72%);
}
.sol-facets i {
    display: block; background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(6,12,26,.3);
    -webkit-backdrop-filter: blur(7px) saturate(1.25); backdrop-filter: blur(7px) saturate(1.25);
}
.sol-facets i:nth-child(2) { background: rgba(59,116,242,.36); border-color: rgba(125,163,255,.65); }
.sol-facets i:nth-child(3) { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sol-facets i:nth-child(4) { clip-path: polygon(0 0, 100% 0, 0 100%); }
.sol-facets i:nth-child(6) { background: rgba(59,116,242,.24); }
/* placement: experience portrait — tucked into the lower-right, inside the frame */
.sol-help2 .sol-facets {
    right: 5%; bottom: 5%;
    grid-template-columns: repeat(3, clamp(44px, 5.5vw, 74px));
    grid-auto-rows: clamp(44px, 5.5vw, 74px);
}
/* placement: band figure — straddles the seam with the card on the left */
.sol-band-figure .sol-facets { left: -8%; top: 50%; transform: translateY(-52%); }
@media (max-width: 640px) {
    .sol-band-figure .sol-facets { left: auto; right: 5%; grid-template-columns: repeat(3, 42px); grid-auto-rows: 42px; }
    .sol-help2 .sol-facets { grid-template-columns: repeat(3, 38px); grid-auto-rows: 38px; }
}
.sol-check .elementor-icon-list-items { display: grid !important; gap: .8rem !important; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); }
.sol-check .elementor-icon-list-item { margin: 0 !important; align-items: flex-start !important; }
.sol-check .elementor-icon-list-text { font-size: .88rem; line-height: 1.5; color: var(--c-body-fg) !important; text-align: left; }
.sol-check .elementor-icon-list-icon { color: var(--c-brand) !important; }
.sol-check .elementor-icon-list-icon svg { width: .95rem !important; height: .95rem !important; fill: var(--c-brand) !important; }

/* --- S6 Dark band --- */
.sol-band {
    display: grid !important; gap: 0 !important; align-items: stretch !important;
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 960px) { .sol-band { grid-template-columns: .92fr 1.08fr !important; } }
.sol-band-card {
    position: relative;
    padding: clamp(2.25rem, 5vw, 4.25rem) !important;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(59,116,242,.16), transparent 60%),
        linear-gradient(158deg, #12213e 0%, #0b1728 64%) !important;
}
.sol-band-card .elementor-widget-icon { color: #fff; }
.sol-band-card .elementor-widget-icon .elementor-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 3.5rem !important; height: 3.5rem !important; border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; background: transparent !important;
}
.sol-band-card .elementor-widget-icon svg { width: 1.4rem !important; height: 1.4rem !important; fill: none !important; stroke: currentColor; color: #fff; }
.sol-band-num {
    display: flex !important; align-items: baseline !important; gap: clamp(1rem, 2.5vw, 2rem) !important;
    margin-top: clamp(2rem, 5vw, 3.5rem) !important; padding-bottom: 1.75rem !important;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.sol-band-num .sol-stat .elementor-heading-title { font-size: clamp(52px, 7vw, 84px) !important; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: #fff !important; }
.sol-band-num .sol-stat-lbl .elementor-heading-title { font-size: 11px !important; font-weight: 800; letter-spacing: .16em; line-height: 1.7; text-transform: uppercase; color: rgba(255,255,255,.5) !important; max-width: 15ch; }
.sol-band-card .h-display .elementor-heading-title { color: #fff !important; max-width: 15ch; }
.sol-band-card .elementor-widget-text-editor > p { color: rgba(255,255,255,.66) !important; max-width: 46ch; text-align: left !important; }
/* overflow VISIBLE per solutions.html — the facet cluster straddles the left seam */
.sol-band-figure { position: relative !important; overflow: visible !important; min-height: 480px !important; align-self: stretch !important; }
.sol-band-figure > .elementor-widget-image { position: absolute !important; inset: 0 !important; margin: 0 !important; }
.sol-band-figure .elementor-widget-image .elementor-widget-container { position: absolute; inset: 0; height: 100%; }
.sol-band-figure img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

.sol-4up {
    display: grid !important; gap: 0 !important;
    border-top: 1px solid var(--c-line); background: var(--c-panel);
    max-width: 1620px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 640px)  { .sol-4up { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1080px) { .sol-4up { grid-template-columns: repeat(4, 1fr) !important; } }
.sol-4up > .e-con {
    padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.25rem) !important;
    text-align: center; border-top: 1px solid var(--c-line);
}
@media (min-width: 640px) {
    .sol-4up > .e-con { border-top: 0; border-right: 1px solid var(--c-line); }
    .sol-4up > .e-con:nth-child(2n) { border-right: 0; }
    .sol-4up > .e-con:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}
@media (min-width: 1080px) {
    .sol-4up > .e-con { border-right: 1px solid var(--c-line); border-top: 0; }
    .sol-4up > .e-con:last-child { border-right: 0; }
}
.sol-4up .elementor-widget-icon { color: var(--c-brand); }
.sol-4up .elementor-widget-icon .elementor-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 3rem !important; height: 3rem !important; border-radius: 999px !important;
    background: rgba(59,116,242,.12) !important; border: 1px solid rgba(59,116,242,.35) !important; color: var(--c-brand) !important;
    margin-bottom: 1.25rem;
}
.sol-4up .elementor-widget-icon svg { width: 1.25rem !important; height: 1.25rem !important; fill: none !important; stroke: currentColor; }
html[data-theme="light"] .sol-4up .elementor-widget-icon .elementor-icon { background: #0b1728 !important; border-color: #0b1728 !important; color: #fff !important; }
.sol-4up .elementor-widget-text-editor > p { font-size: .9rem !important; line-height: 1.7 !important; color: var(--c-mist) !important; max-width: 30ch; margin: 0 auto !important; text-align: center !important; text-align-last: center !important; }
.sol-4up .elementor-widget-text-editor > p b { display: block; margin-bottom: .45rem; font-weight: 700; font-size: .95rem; color: var(--c-body-fg); }

/* --- S7 Work carousel (.lqstrip) --- */
.lqstrip {
    display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 14px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    padding: 0 clamp(1rem, 5vw, 4rem) !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.lqstrip::-webkit-scrollbar { display: none; }
.lqstrip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.lqstrip.is-drag .lq-item { pointer-events: none; }
.lq-item {
    position: relative !important;
    flex: 0 0 clamp(280px, 40vw, 440px) !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important; min-height: 0 !important;
    overflow: hidden !important; border-radius: .75rem; background: #0a1526;
    scroll-snap-align: center;
}
.lq-item > .elementor-widget-image { position: absolute !important; inset: 0 !important; margin: 0 !important; z-index: 0; }
.lq-item .elementor-widget-image .elementor-widget-container { position: absolute; inset: 0; height: 100%; }
.lq-item img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
    transform: scale(1.02); transition: transform .6s cubic-bezier(.16,1,.3,1), filter .3s ease;
    will-change: transform;
}
@media (hover: hover) {
    .lq-item:hover img { filter: url(#liquid); transform: scale(1.08); }
}
.lq-item::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,13,28,0) 42%, rgba(6,13,28,.72));
}
.lq-cap { position: absolute !important; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; z-index: 2; pointer-events: none; }
.lq-cap .lq-cat .elementor-heading-title { font-size: 10px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7) !important; }
.lq-cap .lq-ttl .elementor-heading-title { margin-top: .3rem; font-size: 1.05rem !important; font-weight: 700; line-height: 1.2; color: #fff !important; }
.lq-dots { display: flex !important; justify-content: center; gap: .5rem; margin-top: 2rem !important; }
.lq-dots button { width: 8px; height: 8px; border: 0; padding: 0; border-radius: 999px; background: var(--c-line); cursor: pointer; transition: background .2s ease, width .2s ease; }
.lq-dots button.is-on { background: var(--c-brand); width: 22px; }
/* .lq-foot spans the SAME width as .lqstrip (full-bleed with matching
   side padding) so the caption sits at the cards' left edge and the
   arrows at the cards' right edge. */
.lq-foot {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important;
    gap: 1.5rem !important;
    max-width: none !important; width: 100% !important;
    padding: 0 clamp(1rem, 5vw, 4rem) !important;
    margin-top: 1.5rem !important;
}
/* Elementor gives a row container's widget children --container-widget-flex-grow:1
   and gives child CONTAINERS width:100%. Left alone, .lq-nav fills the row (arrows
   at ITS left edge) and .lq-caption is squeezed until it wraps. Every property
   below therefore needs !important. */
.lq-caption {
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}
.lq-caption .elementor-widget-container > p,
.lq-caption > p { font-size: 12px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-mist) !important; text-align: left !important; transition: color .3s ease; margin: 0 !important; }
.lq-nav {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    gap: 1.6rem !important;
    align-items: center !important;
}
.lq-nav [data-dir] { color: var(--c-mist); padding: .5rem 0 !important; transition: color .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1); cursor: pointer; }
.lq-nav [data-dir] .elementor-icon-wrapper, .lq-nav [data-dir] .elementor-icon { display: block !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
.lq-nav [data-dir] svg { display: block !important; overflow: visible; width: 42px !important; height: 16px !important; color: currentColor; }
.lq-nav [data-dir]:hover { color: var(--c-brand); }
.lq-nav [data-dir="1"]:hover { transform: translateX(7px); }
.lq-nav [data-dir="-1"]:hover { transform: translateX(-7px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lq-nav [data-dir="1"] svg  { animation: mgArrowR 3.4s ease-in-out infinite; }
    .lq-nav [data-dir="-1"] svg { animation: mgArrowL 3.4s ease-in-out infinite; }
    .lq-nav [data-dir]:hover svg { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .lq-item img { filter: none !important; transition: none; } }

/* --- S8 Closing CTA --- */
.sol-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #0c1a30 0%, #0a1424 55%) !important;
}
.sol-cta::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('https://magsoftcorp.com/wp-content/uploads/2026/09/architecture-infra-1.jpg') right center / cover no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 42%, #000 96%);
            mask: linear-gradient(90deg, transparent 42%, #000 96%);
    opacity: .5;
}
.sol-cta > .e-con-inner { position: relative; z-index: 1; }

/* ============================================================
   22. PLATFORMS PAGE  (ported from platforms.html)
   ============================================================ */

/* --- S2 Intro --- */
.svc-intro { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; text-align: center; }
/* The 56x2 brand rule above the lead (platforms.html <span class="svc-rule">).
   Elementor's own .e-con::before is position:absolute — without overriding that
   the bar collapses out of flow and lands in the container's top-left corner. */
.svc-intro::before {
    content: "" !important; display: block !important; position: static !important;
    width: 56px !important; height: 2px !important; margin: 0 auto 2rem !important;
    flex: 0 0 auto !important; align-self: center !important;
    background: var(--c-brand) !important;
}
main .svc-intro .elementor-widget-text-editor,
main .svc-intro .elementor-widget-text-editor > p,
main .svc-intro > p { text-align: center !important; text-align-last: center !important; color: var(--c-mist) !important; }

/* --- S3 Triad --- */
.svc-triad {
    display: grid !important; gap: 0 !important;
    max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 820px) { .svc-triad { grid-template-columns: repeat(3, 1fr) !important; } }
.svc-triad > .e-con { padding: 2rem 1.75rem !important; text-align: center; }
@media (min-width: 820px) { .svc-triad > .e-con + .e-con { border-left: 1px solid var(--c-line); } }
@media (max-width: 819px)  { .svc-triad > .e-con + .e-con { border-top: 1px solid var(--c-line); } }
/* platforms.html: .svc-triad p { margin: .6rem auto 1rem; max-width: 28ch }
   inside a text-align:center article. The site-wide justify rule in §20 is
   (0,2,2) and outranks a bare .svc-triad selector — hence the `main` prefix. */
main .svc-triad .elementor-widget-text-editor,
main .svc-triad .elementor-widget-text-editor > p,
main .svc-triad > .e-con .elementor-widget-text-editor > p {
    text-align: center !important;
    text-align-last: center !important;
    max-width: 28ch !important;
    margin: .6rem auto 1rem !important;
    font-size: .85rem !important;
    line-height: 1.65 !important;
    color: var(--c-mist) !important;
}
/* margin-bottom needs !important: Elementor's own widget margin rules reset it,
   which collapsed the icon-to-heading gap to 0 (reference: 1.1rem). */
.svc-triad-ico { text-align: center !important; margin-bottom: 1.1rem !important; }
.svc-triad-ico .elementor-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 3.25rem !important; height: 3.25rem !important; border-radius: 999px !important;
    background: var(--c-panel) !important; border: 1px solid var(--c-line) !important; color: var(--c-brand) !important;
}
.svc-triad-ico .elementor-icon svg { width: 1.35rem !important; height: 1.35rem !important; fill: none !important; stroke: currentColor; }
.svc-triad-link .elementor-button {
    background: transparent !important; border: 0 !important; padding: 0 !important;
    font-size: .8rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand) !important;
}
.svc-triad-link .elementor-button:hover { transform: none !important; }

/* --- S4 Platform blocks (sticky stacking cards) --- */
.svc-blocks {
    position: relative;
    max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important;
    display: flex !important; flex-direction: column !important; gap: 4rem !important;
}
.svc-block {
    position: relative; overflow: hidden !important; border-radius: 18px;
    background: var(--c-panel2) !important; border: 1px solid var(--c-line);
    display: grid !important; gap: 0 !important;
}
@media (min-width: 900px) { .svc-block { grid-template-columns: .82fr 1.18fr !important; } }
.svc-block::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(59,116,242,.10), transparent 60%),
        repeating-linear-gradient(115deg, transparent 0 38px, rgba(59,116,242,.05) 38px 39px);
}
html[data-theme="light"] .svc-block::before {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(59,116,242,.08), transparent 60%),
        repeating-linear-gradient(115deg, transparent 0 38px, rgba(15,23,42,.035) 38px 39px);
}
.svc-block > .e-con { position: relative; z-index: 1; }
/* Each card MUST be its own stacking context. Without an explicit z-index a
   sticky element is z-index:auto and creates none, so the six inner columns
   (z-index:1 above) all land in .svc-blocks' context — painting every card
   background first, then every card's content in DOM order. The card sliding
   up then shows the previous card's image, badge and button straight through
   its own background. Ascending z-index also keeps the slip order correct. */
/* `contain: paint` is the hard guarantee: it makes it structurally impossible
   for ANY descendant of a card to paint outside that card's own box, whatever
   the cascade or the compositor does. overflow:hidden and border-radius do not
   promise this (they clip, but do not establish paint containment or a
   stacking context), which is why a previous card's image, badge and button
   could still surface inside the card sliding over it. Paired with the
   ascending z-index below, a later card now always fully covers an earlier one.
   will-change keeps each sticky card on its own compositor layer so the
   painted pixels track the sticky position during Lenis' smooth scroll instead
   of lagging a frame behind it. */
.svc-block { isolation: isolate; contain: paint; }
@media (min-width: 900px) {
    /* All cards park at the SAME top. The reference staggers them by 16px per
       card, which leaves a band at the bottom of the covering card where the
       previous one can show through — the overlap artefact chased for several
       rounds and never reproducible in layout. With an identical top and equal
       card heights, card N+1 covers card N exactly: there is no band left for
       anything to peek out of, whatever the compositor does. The ascending
       z-index and contain:paint above still hold the paint order. */
    /* THE actual cause of the "cards overlapping" artefact: the cards are not
       the same height (494 / 553 / 575 / 494 at 1440px). A shorter later card
       cannot hide a taller earlier one, so the earlier card's image, badge and
       button stayed visible below it. Paint order was never the problem.
       Grid with 1fr auto-rows equalises every row to the tallest card, so each
       card now covers the one before it exactly. */
    .svc-blocks {
        display: grid !important;
        grid-auto-rows: 1fr !important;
        align-items: stretch !important;
    }
    .svc-blocks > .svc-block {
        position: sticky; top: 96px;
        will-change: transform;
    }
    .svc-blocks > .svc-block:nth-child(1) { z-index: 1; }
    .svc-blocks > .svc-block:nth-child(2) { z-index: 2; }
    .svc-blocks > .svc-block:nth-child(3) { z-index: 3; }
    .svc-blocks > .svc-block:nth-child(4) { z-index: 4; }
    /* the tail gap lives on the container: as a margin on the last card it
       came out of that card's grid row, leaving it 6vh shorter than the
       rest and re-opening the very gap this grid closes */
    .svc-blocks { padding-bottom: 6vh !important; }
}
@media (prefers-reduced-motion: reduce) { .svc-blocks > .svc-block { position: static !important; } }
.svc-block-media { position: relative; min-height: 240px; padding: clamp(1.25rem, 2.4vw, 2rem) !important; }
.svc-block-media .elementor-widget-image { height: 100%; }
.svc-block-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px; display: block; min-height: 220px; }
.svc-badge {
    position: absolute !important; left: clamp(1.75rem, 3vw, 2.6rem); bottom: clamp(1.75rem, 3vw, 2.6rem); z-index: 2;
}
.svc-badge .elementor-heading-title {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--c-body-bg); border: 1px solid var(--c-line); color: var(--c-body-fg) !important;
    border-radius: 999px; padding: .5rem 1rem; font-size: .78rem !important; font-weight: 700;
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
}
.svc-badge .elementor-heading-title::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--c-brand); flex: none; }

/* ---- Live status indicator: a slow breathing dot + expanding halo ----
   Only badges carrying .is-live animate, so "In Development" stays static.
   2.4s ease-in-out reads as alive without pulling the eye off the copy. */
@keyframes mg-live-dot {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .45; transform: scale(.76); }
}
@keyframes mg-live-halo {
    0%   { box-shadow: 0 0 0 0 rgba(59, 116, 242, .50); }
    70%  { box-shadow: 0 0 0 6px rgba(59, 116, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 116, 242, 0); }
}
.svc-badge.is-live .elementor-heading-title::before {
    animation: mg-live-dot 2.4s ease-in-out infinite,
               mg-live-halo 2.4s ease-out infinite;
}
/* Home's featured-platform cards: the status chip is the last chip in each
   row. Give it the same dot so "Live" reads identically on both pages. */
.plat-chips .elementor-icon-list-item:last-child {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
}
.plat-chips .elementor-icon-list-item:last-child::before {
    content: ""; width: .4rem; height: .4rem; border-radius: 999px;
    background: var(--c-brand); flex: none;
    animation: mg-live-dot 2.4s ease-in-out infinite,
               mg-live-halo 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .svc-badge.is-live .elementor-heading-title::before,
    .plat-chips .elementor-icon-list-item:last-child::before {
        animation: none !important;
    }
}
.svc-block-body { padding: clamp(1.75rem, 3.4vw, 3rem) !important; }
/* post-927.css emits `.elementor-927 .elementor-element-<id> .elementor-icon-wrapper
   { text-align: center }` at (0,3,0) for every icon widget, which centred the
   circle in the 682px body column. The reference has it hard left, above the
   eyebrow — so the override has to land on the WRAPPER, not the widget. */
.svc-block-ico { text-align: left !important; margin-bottom: 1.1rem !important; }
.svc-block-ico .elementor-icon-wrapper { text-align: left !important; }
.svc-block-ico .elementor-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 3rem !important; height: 3rem !important; border-radius: 999px !important;
    background: var(--c-brand) !important; color: #fff !important;
}
.svc-block-ico .elementor-icon svg { width: 1.4rem !important; height: 1.4rem !important; fill: none !important; stroke: currentColor; }
.svc-block-eyebrow .elementor-heading-title { font-size: 11px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand) !important; }
.svc-block-body .h-display .elementor-heading-title { margin-top: .5rem; color: var(--c-body-fg) !important; }
/* Lead paragraph is ragged-right in platforms.html; `main` prefix so it beats
   the site-wide justify rule in §20 (which is (0,2,2)). */
main .svc-block-lead,
main .svc-block-lead > p,
main .svc-block-lead .elementor-widget-text-editor > p {
    margin-top: .9rem !important; font-size: .9rem !important; line-height: 1.7 !important;
    color: var(--c-mist) !important; max-width: 52ch;
    text-align: left !important; text-align-last: auto !important;
}
.svc-list .elementor-icon-list-items { display: grid !important; gap: .6rem .5rem !important; margin: 1.4rem 0 1.8rem !important; }
@media (min-width: 560px) { .svc-list .elementor-icon-list-items { grid-template-columns: 1fr 1fr !important; column-gap: 1.5rem !important; } }
.svc-list .elementor-icon-list-item { margin: 0 !important; align-items: flex-start !important; padding-left: 1.15rem; }
.svc-list .elementor-icon-list-icon { display: none !important; }
.svc-list .elementor-icon-list-text,
.svc-list .elementor-icon-list-item > .elementor-icon-list-text,
html[data-theme="light"] .svc-list .elementor-icon-list-text,
html[data-theme="dark"] .svc-list .elementor-icon-list-text { font-size: .84rem !important; line-height: 1.4 !important; color: var(--c-body-fg) !important; text-align: left; }
.svc-list .elementor-icon-list-text::before { content: "\203A"; position: absolute; left: -1.15rem; top: -.05rem; color: var(--c-brand); font-weight: 700; }
.svc-list .elementor-icon-list-item { position: relative; }
/* only ONE svc-list row is a link (the live public dashboard), so it needs to
   read as clickable — otherwise it is indistinguishable from the plain rows */
.svc-list .elementor-icon-list-item > a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--c-brand) !important;
    transition: color .2s ease;
}
.svc-list .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.svc-list .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
    color: var(--c-brand) !important;
}
.svc-btn .elementor-button {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.6rem !important;
    border-radius: 999px !important; background: var(--c-body-fg) !important; color: var(--c-body-bg) !important;
    font-size: .82rem !important; font-weight: 800;
}

/* --- S5 Dark step band --- */
.svc-steps { background: linear-gradient(160deg, #10203c, #0a1424) !important; }
.svc-steps-row {
    list-style: none; display: grid !important; gap: 2.5rem 1rem !important;
    max-width: 1320px !important; margin: 3.5rem auto 0 !important;
}
@media (min-width: 720px)  { .svc-steps-row { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .svc-steps-row { grid-template-columns: repeat(4, 1fr) !important; } }
.svc-steps-row > .e-con { position: relative; padding-top: 3.75rem !important; text-align: center; }
.svc-step-label .elementor-heading-title { font-size: 11px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5) !important; }
/* The dot must be positioned against the STEP CELL (which carries the 3.75rem
   padding-top it sits in), not against its own widget wrapper. Elementor gives
   every widget `position: relative`, so absolutely positioning the inner title
   anchored it to a zero-height wrapper sitting after the "Step 01" label —
   dropping the dot straight onto the h3. Position the wrapper itself. */
.svc-step-dot {
    position: absolute !important; top: 0 !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 2.6rem !important; height: 2.6rem !important; z-index: 2 !important;
}
.svc-step-dot .elementor-heading-title {
    position: static !important; transform: none !important;
    display: grid !important; place-items: center; width: 100% !important; height: 100% !important;
    border-radius: 999px;
    background: var(--c-brand); color: #fff !important; font-size: .9rem !important; font-weight: 800;
}
@media (min-width: 1024px) {
    .svc-steps-row > .e-con::after {
        content: ""; position: absolute; top: 1.3rem; left: 50%; width: 100%; height: 1px;
        background: rgba(255,255,255,.16); z-index: 0;
    }
    .svc-steps-row > .e-con:last-child::after { display: none; }
}
.svc-steps-row .h-display .elementor-heading-title { margin-top: 1rem; color: #fff !important; }
.svc-steps-row .elementor-widget-text-editor > p { margin: .6rem auto 0 !important; max-width: 26ch; font-size: .82rem !important; line-height: 1.6 !important; color: rgba(255,255,255,.68) !important; text-align: center !important; text-align-last: center !important; }

/* --- S6 Team Magsoft statement --- */
.svc-quote {
    display: grid !important; gap: 3rem !important; align-items: center !important;
    max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 900px) { .svc-quote { grid-template-columns: 1.05fr .95fr !important; gap: 4rem !important; } }
.svc-quote-body { position: relative; }
.svc-quote-body::before {
    content: ""; position: absolute; left: -2rem; bottom: -2rem; right: 40%; top: 30%; opacity: .4; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(59,116,242,.05) 40px 41px);
}
.svc-quote-body > * { position: relative; z-index: 1; }
/* --c-body-fg already IS white in dark and near-black in light, so it needs no
   theme branch. The previous pair hardcoded #fff and only corrected it under
   html:not([data-theme="light"]) — i.e. exactly backwards: in LIGHT theme the
   :not() failed and the quote stayed white on a light panel, invisible. */
.svc-quote blockquote .elementor-heading-title,
.svc-quote .svc-bq .elementor-heading-title,
html[data-theme="light"] .svc-quote .svc-bq .elementor-heading-title {
    font-size: clamp(20px, 2.4vw, 26px) !important; font-weight: 600;
    line-height: 1.5 !important; color: var(--c-body-fg) !important;
    /* the pull-quote is a heading widget, so the site-wide justify rule
       (which targets text-editor paragraphs) never reached it */
    text-align: justify !important;
    text-align-last: left !important;
    -webkit-hyphens: none !important; hyphens: none !important;
}
.svc-quote .svc-attr .elementor-heading-title { font-size: .875rem !important; font-weight: 700; color: var(--c-mist) !important; margin-top: 1.75rem; }
.svc-quote .plat-shot { overflow: hidden; border-radius: .9rem; }
.svc-quote .plat-shot img { width: 100% !important; aspect-ratio: 16 / 12; object-fit: cover !important; display: block; }

/* --- S7 Closing CTA --- */
.svc-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0c1a30 0%, #0a1424 55%) !important; }
.svc-cta::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 45%, rgba(59,116,242,.14)), url('https://magsoftcorp.com/wp-content/uploads/2026/09/strip-civic.jpg') right center / cover no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 40%, #000 92%);
            mask: linear-gradient(90deg, transparent 40%, #000 92%);
    opacity: .55;
}
.svc-cta > .e-con-inner { position: relative; z-index: 1; }

/* ============================================================
   23. TRICOLOUR POINTER BLOOM
   Canvas is painted in magsoft.js; everything visual is here so it can be
   retuned without touching the script. Blend mode rather than opacity
   alone: screen lifts colour out of the dark theme, multiply tints the
   light one, and in both cases the page text keeps its contrast because
   the canvas only ever shifts the ground beneath it.
   ============================================================ */
#mg-tricolour {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9;
    /* screen over the dark ground turns saffron and green into light rather
       than dulling them; the blur is what makes neighbouring bands bleed */
    filter: blur(36px) saturate(1.5);
    opacity: .72;
    mix-blend-mode: screen;
    contain: strict;
}
html[data-theme="light"] #mg-tricolour {
    /* multiply on a white page returns the source colour almost intact, so
       this is where the tricolour reads most literally. It was invisible
       before because alpha .17 x opacity .32 left about 5% ink on the page. */
    mix-blend-mode: multiply;
    filter: blur(40px) saturate(1.45);
    opacity: .6;
}
@media (prefers-reduced-motion: reduce), (hover: none), (max-width: 767px) {
    #mg-tricolour { display: none !important; }
}