@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Black.eot');
    src: local('Roboto Black'), local('Roboto-Black'),
    url('/fonts/Roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Black.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Black.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Bold.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('/fonts/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Bold.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Medium.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('/fonts/Roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Medium.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Regular.eot');
    src: local('Roboto'), local('Roboto-Regular'),
    url('/fonts/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Regular.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Light.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
    url('/fonts/Roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Light.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Light.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Thin.eot');
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('/fonts/Roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Thin.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Thin.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* Universal "* { color }" reset removed: it set a colour on every element directly
   (specificity 0,0,0), beating inheritance — a footgun that made child elements
   ignore their parent's colour. The default text colour now lives on body (below)
   and inherits normally. */

a {
    text-decoration: none;
}

p {
    margin-bottom: 0;
    line-height: 120%;
    font-weight: 400;
}

strong {
    font-weight: 600;
}

body {
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #262731; /* was #121521; now matches the colour the removed universal reset gave every element, so no descendant text shifts */
    line-height: 120%;
}

h1 {
    line-height: 120%;
    font-weight: 500;
    color: #262731;
    font-size: 38px;
    margin-bottom: 30px;
}

h2 {
    font-size: 34px;
    margin-bottom: 30px;
    line-height: 120%;
}

.btn-main {
    padding: 15px 32px;
    border-radius: 12px;
    background: #BF1818;
    display: inline-block;
    transition: .3s;
    color: #ffffff;
    text-decoration: none;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
}
.overflow-clip {
    overflow:clip!important; ;
}
.btn-main img {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-top: -3px;
}

.btn-main:hover img {
    display: inline-block;
    cursor: pointer;
}

.btn-main:hover {
    background: #8F1010;
    color: #ffffff;
    display: inline-block;
    transition: .3s;
    cursor: pointer;
}

.btn-add {
    padding: 13px 25px;
    background: transparent;
    border: 1px solid rgba(195, 199, 205, 0.7);
    color: #606060;
    font-size: 16px;
    transition: .3s;
    display: inline-block;
    border-radius: 12px;
}

.btn-add:hover {
    background: #606060;
    border: 1px solid #606060;
    color: #ffffff;
    font-size: 16px;
}
.bg-white {
    background: #ffffff!important;
}

.bg-grey {
    background: #ECEEF1!important;
}

.menu-logo {
    max-width: 139px;
    transition: .3s;
}

.menu-logo:hover {
    transform: translateY(-3px);
}

/* ============================================================================
   STICKY OVERLAY HEADER (site-wide)
   The nav is fixed and overlays the top of every page. Two visual states:
   - SOLID (default, and any page once scrolled): translucent dark blurred bar.
   - TRANSPARENT: only on body.hero-dark pages while at the very top (the
     floating look over the dark hero). White logo + menu work in both states.
   Page flag: body.hero-dark is set (header.tpl) on full-bleed dark-hero pages.
   The .is-scrolled class is toggled by scripts (scrollY > 36).
   ============================================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* SOLID by default → non-hero-dark pages get the dark bar from the very top */
    background: rgba(8, 12, 22, 0.92);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.32);
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}

/* TRANSPARENT at the very top of dark-hero pages (current floating look).
   Roomier vertical padding here; the solid state compacts the bar. */
body.hero-dark .navbar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* SOLID once scrolled (applies on every page; on hero-dark it overrides the
   transparent state above — higher specificity via the extra class). Compact bar. */
.navbar.is-scrolled,
body.hero-dark .navbar.is-scrolled {
    background: rgba(8, 12, 22, 0.92);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.32);
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Non-hero-dark pages are solid from the top: keep the bar compact (same as the
   scrolled state) so the fixed-header height is consistent for clearance. */
body:not(.hero-dark) .navbar {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* THE PILL (≥992, defined in the media block below) renders IDENTICALLY in every
   header state — hero-dark at top, is-scrolled slim bar, and the non-hero pages.
   Only the bar's background/padding/shadow change between states, never the
   nav treatment. */

/* Fixed-header clearance for the inner & product hero headings: the nav left the
   flow, so the hero content rode up under the bar. Nudge the hero content down so
   the heading sits clearly below the (transparent, ~95px) header. The homepage
   hero is separately centred (.wrap-banner.main .banner-wrap) and is unaffected. */
body.hero-dark .banner-wrap {
    padding-top: 55px;
}

.offcanvas {
    background: #262731!important;
}

.navbar-toggler {
    border: none;
    background: rgba(64, 64, 64, 0.4);
    padding: 11px 15px 15px 15px;
    border-radius: 14px;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-image: url('/img/icons/icon-menu.svg');
}

.nav-item .nav-link {
    font-size: 16px;
    transition: .2s;
    color: #ffffff;
    font-weight: 400;
}

.nav-item  {
    position: relative;
}

.offcanvas-header {
    padding: 20px 20px 11px 20px;
    background: #262731;
}

.offcanvas-header .btn-close {
    position: relative;
    z-index: 1;
    background: rgba(64, 64, 64, 0.4) url('/img/icons/icon-close.svg') center center no-repeat;
    width: 13px;
    padding: 14px 16px 15px 16px;
    opacity: 1 !important;
    border-radius: 14px;
    margin-right: 0;
}

/* Top-level items (desktop): the same FILL grammar the panel items use,
   replacing the old underline hover. The links carry the chip geometry at
   rest (padding + 9px radius) so only the fill changes: hover/focus takes
   rgba(255,255,255,0.08); while a dropdown is OPEN, Bootstrap puts .show +
   aria-expanded="true" on its toggle, which holds the one-step-stronger
   0.12 fill until the panel closes — no JS involved. Reads on both header
   states (transparent hero top and the is-scrolled slim bar's pill). The
   mobile accordion (<992px) keeps its plain rows; Get Demo (.btn-main)
   keeps its own treatment. */
@media (min-width: 992px) {
    .nav-item .nav-link:not(.btn-main) {
        padding: 9px 14px;
        border-radius: 9px;
        transition: background .18s ease;
    }
    .nav-item .nav-link:not(.btn-main):hover,
    .nav-item .nav-link:not(.btn-main):focus-visible {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }
    .nav-item .nav-link:not(.btn-main).show,
    .nav-item .nav-link:not(.btn-main)[aria-expanded="true"] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
    }
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #ffffff;
}

.offcanvas-body {
    background: #303648;
     margin: 10px 20px 20px 20px;
    border-radius: 12px;

}
.offcanvas-body > div  {
    width: 100%;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.dropdown-toggle::after {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-left: 8px;
    vertical-align: -2px;
    background: url('/img/icons/icon-dropdown.svg') center center no-repeat !important;
    background-size: contain !important;
    border: none;
    transition: .3s;
}

.dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    background: transparent;
    border: 0;
}

.dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    font-weight: 400;
    color: #f4f6f9;
    text-align: inherit;
    text-decoration: none;
    white-space: normal;
    line-height: 1.35;
    background-color: transparent;
    border: 0;
    font-size: 14px;
}

/* Quiet interaction grammar — ONE hover/focus treatment for every panel link:
   neutral white-tint fill, text brightens to #fff. No red fills in panels. */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item.active,
.navbar-nav .dropdown-menu .dropdown-item:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

/* ===========================================================================
   UNIFIED NAV PANELS — one design system for ALL header dropdowns (Solutions
   mega, Company, Services). All open via the same Bootstrap data-bs-toggle
   dropdown mechanism.
   (1) ONE SKIN — every panel is the same near-black floating surface (#0b0f17,
       1px rgba-white border, deep shadow, 12px radius). No second panel colour.
   (2) ONE ITEM — every panel item (Company/Services link, module link, product
       entry, Overview/Explore) shares one box: 9px 12px padding, 9px radius,
       4px gap, full width; only the fill/text colour changes between states.
   (3) ONE TYPE SCALE — link items 14px/400 lh 1.35; product names 15px/600 with
       12px subs; eyebrows (.mega-col-label) 11px/700 uppercase #8a93a3. Panel
       text uses one grey ramp: #f4f6f9 primary, #8a93a3 muted.
   Base rules also style the mobile offcanvas accordion; the
   @media(min-width:992px) block adds the floating-panel skin and mega layout.
   =========================================================================== */
.solutions-mega { padding: 10px 8px; }
.mega-col-label { display: block; margin: 0 0 8px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a93a3; }
.mega-right-panel .mega-col-label { margin-top: 14px; }
/* Second left-column group (DEVELOPMENT): a thin divider above the eyebrow,
   in the same faint stroke as the column divider. */
.mega-col-label--dev { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ONE shared interactive box for EVERY panel item — Company/Services links,
   module links, product entries, Overview/Explore — identical width/padding/
   radius in every state, so rest, hover, and active are the same rectangle and
   only the fill changes; the 4px margin keeps neighbouring boxes separate. */
.navbar-nav .dropdown-menu .dropdown-item,
.mega-product,
.mega-overview {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 9px 12px;
    border-radius: 9px;
    background: transparent;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

/* .mega-product is a BUTTON (non-navigating panel viewer) — reset the UA
   button chrome so it renders exactly like the other shared-box items. */
.mega-product {
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Products — bright primary name, muted sublabel. */
.mega-product-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: #f4f6f9; transition: color .18s ease; }
.mega-product-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #8a93a3; }
.mega-product:hover,
.mega-product:focus-visible { background: rgba(255, 255, 255, 0.06); }
.mega-product:hover .mega-product-name { color: #ffffff; }
/* Active product: RED TEXT ONLY (#ef5350 on the entry name) — NO dot, NO
   fill, NO inset bar. The dot was retired (2026-07-04): rendered beside the
   two-line Custom Application Development name it kept reading as a stray
   list bullet / leaked marker (two reports in one day), and the hanging
   indent that served it went with it. Declared after the hover rule so the
   active name stays red under hover. */
.mega-product.is-active .mega-product-name { color: #ef5350; }

/* Module links — shared item type/geometry and the unified neutral hover. */

/* Overview / Explore — red TEXT accent (#ef5350) on a transparent rest
   background; hover takes the same neutral fill as every other item while the
   text stays red. Extra space below separates it from the module grid. */
.mega-overview { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #ef5350; }
.mega-overview:hover,
.mega-overview:focus-visible { color: #ef5350; background: rgba(255, 255, 255, 0.06); }
.mega-arrow { margin-left: 4px; }

@media (min-width: 992px) {
    /* ONE panel skin for every dropdown. Simple dropdowns (Company/Services)
       size to their content; the Solutions mega keeps its fixed two-zone width
       and overrides width/padding below (higher specificity). */
    .navbar-nav .dropdown-menu {
        width: max-content;
        min-width: 220px;
        max-width: min(340px, calc(100vw - 32px));
        padding: 14px 12px 16px;
        background: #0b0f17;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    }
    /* Solutions mega layout — a 3-track grid over the interleaved markup:
       label + product buttons fill column 1, column 2 is a 1px divider track
       (drawn by ::before), and the shown right panel occupies column 3 spanning
       all rows. The interleaved DOM (each product button directly followed by
       ITS panel) is what lets the same markup stack into the mobile
       per-product accordion below 992px. */
    .navbar-nav .solutions-mega.show {
        display: grid;
        grid-template-columns: 178px 1px minmax(0, 1fr);
        /* Rows 1-6: PRODUCTS label + three product buttons + the DEVELOPMENT
           label + the Custom Application Development viewer, all at content
           height. Row 7 (1fr) absorbs the right panel's extra height, so the
           buttons keep one stable position no matter which panel is tallest. */
        grid-template-rows: auto auto auto auto auto auto 1fr;
        column-gap: 26px;
        width: 580px;
        max-width: calc(100vw - 32px);
        padding: 22px 22px 24px;
    }
    .navbar-nav .solutions-mega.show::before {
        content: "";
        grid-column: 2;
        grid-row: 1 / span 7;
        width: 1px;
        background: rgba(255, 255, 255, 0.08);
    }
    .solutions-mega > .mega-col-label,
    .solutions-mega > .mega-product { grid-column: 1; }
    .solutions-mega > .mega-product:last-of-type { margin-bottom: 0; }
    /* All three panels stay in-flow (stacked on the same grid area) and swap
       via visibility, NOT display: the mega keeps ONE constant height (the
       tallest panel) so nothing shifts under the cursor while hovering
       products. Mobile keeps the base display:none accordion behaviour. */
    .solutions-mega .mega-right-panel {
        grid-column: 3;
        grid-row: 1 / span 7;
        display: block;
        visibility: hidden;
    }
    .solutions-mega .mega-right-panel.is-shown { visibility: visible; }
    .solutions-mega .mega-right-panel .mega-col-label { margin-top: 0; }
    .solutions-mega .mega-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: start; }
    .solutions-mega .mega-modgrid .dropdown-item { margin: 0; }
}

/* Solutions mega-menu — swappable right panel. Three panels (FMS modules /
   RTMS card / DCS card); exactly one carries .is-shown at a time. The server
   renders .is-shown + aria-expanded from $rightProduct (data-active is the
   single default), so the active panel shows without JS; scripts swap it on
   hover/focus/click. Below 992px the interleaved DOM becomes a per-product
   accordion: a tapped product's panel expands directly beneath it — including
   the RTMS/DCS cards, which are reachable on mobile there too. */
.mega-right-panel { display: none; }
.mega-right-panel.is-shown { display: block; }
/* RTMS/DCS minimal product card — matches the panel's type colours and rhythm. */
.mega-card-sub { display: block; margin: 5px 0 0; padding: 0 12px; font-size: 13px; line-height: 1.45; color: #8a93a3; }
.mega-card-explore { margin-top: 16px; }
@media (max-width: 991.98px) {
    /* Mobile accordion rhythm: an expanded panel gets a little air before the
       next product header. */
    .solutions-mega .mega-right-panel { margin: 2px 0 10px; }
}

.wrap {
    overflow:clip!important; ;
}
.wrap-banner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    position: relative;
}

.wrap-banner.banner-half-height {
    min-height: 80vh;
}

.banner {
    height: 100%;
    margin-top: 50px;
}

.banner h1 {
    font-weight: 500;
    color: #ffffff;
    font-size: 38px;
    line-height: 120%;
    margin-bottom: 30px;
}

.banner p {
    color: #F4F4F4;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}
.main {
    /* Phase 4: the static circuit-board image was replaced by the #hero-network
       canvas. Solid dark base so the hero is a clean dark panel before/without JS. */
    background-color: #080c16;
}

.explore {
    display: none;
}

.labels {
    position:absolute;
    top: 18px;
    left: 30px;
}

.text-block {
    margin-top: 80px;
    margin-bottom: 80px;
}

.text-block h2 {
    margin-bottom: 30px;
}

.text-block p {
    font-size: 16px;
    line-height: 120%;
    margin-bottom: 20px;
}

/* ===========================================================================
   Phase 4 — Homepage products section (homepage body, main.tpl). Three
   independent, purpose-built products as LIGHT SOFT-PANEL CARDS: each panel
   (.product-panel) is a faint #f7f8fa tile with a 1px #edeef1 border, 18px
   radius, generous padding and a soft lift shadow, pairing a text column
   (.pp-text — index, red #bf1818 eyebrow+icon, name with red dot, descriptor,
   red underline, copy, white chips, solid #bf1818 Explore button) with a
   screenshot column (.pp-shot) that carries the framed .browser-frame. Panels
   alternate sides (RTMS text left, FMS reversed via --rev, DCS text left);
   nothing is dark except the screenshot's own UI inside the frame. Below 900px
   each panel stacks to one column with the shot on top. A small #bf1818 "Our
   products" eyebrow sits above the heading. See .product-panel and the
   .browser-frame block below.
   =========================================================================== */
.products {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ffffff;
}

.products-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #bf1818;
}

.products-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    color: #262731;
}

.products-subline {
    margin: 0 0 36px;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.5;
    color: #606060;
}

/* ---------------------------------------------------------------------------
   Reusable browser-window frame — wraps a product screenshot (or a "coming
   soon" placeholder) in soft, floating browser chrome: rounded 1px-bordered
   container, a ~36px top bar with three grey dots and a centered address pill,
   then the screenshot area. On the homepage the RTMS frame holds the rotating
   .product-showcase; FMS/DCS hold a fixed-height "coming soon" placeholder.
   --------------------------------------------------------------------------- */
.browser-frame {
    box-sizing: border-box;
    border: 1px solid #d6dae1;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 18px 50px rgba(18, 21, 33, 0.10), 0 2px 6px rgba(18, 21, 33, 0.05);
}

.browser-frame-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
    background-color: #f0f2f5;
    border-bottom: 1px solid #d6dae1;
}

.browser-frame-dots {
    display: inline-flex;
    gap: 6px;
    justify-self: start;
}

.browser-frame-dots span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #c2c7d0;
}

.browser-frame-url {
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    padding: 4px 14px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #dfe3e9;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    color: #8a909c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-frame-screen {
    display: block;
    line-height: 0;
    background-color: #0b1018;
}

.browser-frame-screen img {
    display: block;
    width: 100%;
    height: auto;
}

.browser-frame-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 16 / 9;
    padding: 16px;
    box-sizing: border-box;
    background-color: #0b1018;
    text-align: center;
    line-height: 1.4;
}

.browser-frame-placeholder-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b96a8;
}

.browser-frame-placeholder-note {
    font-size: 12.5px;
    color: #5d6573;
}

/* Light soft-panel card — a faint tile holding a text column and a screenshot
   column side by side, alternating sides. Nothing here is dark; the only dark
   surface is the screenshot's own UI inside the .browser-frame. */
.product-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid #edeef1;
    border-radius: 18px;
    background-color: #f7f8fa;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05);
}

.product-panel + .product-panel {
    margin-top: 22px;
}

/* Reversed panel (FMS): shot left / text right. Source order stays
   pp-text -> pp-shot; order:-1 pulls the shot into the left (wider) column. */
.product-panel--rev {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}

.product-panel--rev .pp-shot {
    order: -1;
}

/* Text column — all of it sits on the light panel */
.pp-text {
    min-width: 0;
}

/* Product-card header hierarchy (shared across all three cards). Larger, soft-grey
   display index; bold enlarged name with dark "RETRO" + red ".CODE"; slightly larger
   descriptor; wider vertical rhythm so the text column fills more of the showcase height. */
.pp-index {
    display: block;
    margin: 0 0 26px;
    font-size: 2.85rem;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1;
    color: #ccd3db;
}

.pp-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: #bf1818;
}

.pp-eyebrow-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.pp-eyebrow-label {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.pp-name {
    margin: 0;
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.02;
    color: #101828;
}

/* RETRO stays dark; the dot + product code (.RTMS / .FMS / .DCS) are brand red. */
.pp-name .pn-dark {
    color: #101828;
}

.pp-name .pn-red {
    color: #bf1818;
}

.pp-descriptor {
    margin: 13px 0 30px;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.4;
    color: #667085;
}

/* Red accent-statement lede — replaces the old .pp-underline + the two .pp-desc
   paragraphs. A thin brand-red bar stretches the full height of the sentence beside
   it (align-items:stretch). Margins carry the rhythm the underline+description held. */
.product-lede {
    display: flex;
    align-items: stretch;
    gap: 18px;
    /* top gap now lives on .pp-descriptor (margin-bottom); bottom = lede→chips */
    margin: 0 0 30px;
}

.product-lede__bar {
    flex: 0 0 auto;
    width: 3px;
    border-radius: 3px;
    background: #bf1818;
}

.product-lede p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #283240;
}

@media (max-width: 600px) {
    /* Scale the enlarged header down so the stacked column isn't excessively tall
       and nothing overflows; margins reduced to ~two-thirds. RETRO dark / code red
       carry over from the base rules. */
    .pp-index {
        font-size: 2.1rem;
        margin-bottom: 18px;
    }

    .pp-name {
        font-size: 1.8rem;
    }

    .pp-descriptor {
        font-size: 1rem;
        margin-bottom: 22px;
    }

    .product-lede {
        gap: 14px;
        margin-bottom: 22px;
    }

    .product-lede p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .pp-chips {
        margin-bottom: 24px;
    }
}

.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.pp-chips li {
    padding: 4px 10px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #e4e7ec;
    color: #475467;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
}

.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 8px;
    background-color: #bf1818;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s ease, gap 0.25s ease;
}

.pp-btn-arrow {
    line-height: 1;
}

.pp-btn:hover {
    background-color: #a01414;
    gap: 10px;
}

.pp-btn:focus-visible {
    outline: 2px solid #bf1818;
    outline-offset: 3px;
}

/* Screenshot column — just holds the .browser-frame. The panel supplies the
   elevation, so trim the frame's big float shadow to avoid a doubled shadow. */
.pp-shot {
    min-width: 0;
}

.pp-shot .browser-frame {
    width: 100%;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* DCS "coming soon" placeholder fills a fixed 420px screen so its frame matches
   the RTMS/FMS .ps-stage height and the three cards stay aligned. (Raised to 420
   so the FMS Noon Reporting view's five vessel rows fit without clipping.) */
.pp-shot .browser-frame-screen {
    height: 420px;
}

.pp-shot .browser-frame-placeholder {
    height: 100%;
    aspect-ratio: auto;
}

/* ---------------------------------------------------------------------------
   Product-card showcases — consolidated styles for all three cards (RTMS / FMS /
   DCS). Inline SVG/HTML auto-rotating views inside each .browser-frame, cycled
   by /js/product-showcase-1.00.js (toggles .is-active on .ps-slide / .ps-dot).
   --------------------------------------------------------------------------- */
.product-showcase{position:relative}
.ps-stage{position:relative;height:474px;overflow:hidden;background:#fff}
.ps-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;padding:16px 20px;pointer-events:none;display:flex;flex-direction:column}
.ps-slide.is-active{opacity:1;pointer-events:auto}
.ps-head{display:flex;justify-content:space-between;align-items:flex-start;flex:0 0 auto}
.ps-gt{display:flex;align-items:center;gap:9px}
.ps-gt svg{width:18px;height:18px;stroke:#667085;fill:none;stroke-width:1.7}
.ps-gt b{font-size:13px;color:#101828;font-weight:700;display:block;line-height:1.25}
.ps-gt small{font-size:9.5px;color:#98a2b3}
.ps-chips{display:flex;gap:6px}
.ps-chip{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#475467;background:#f6f7f9;border:1px solid #eceef1;border-radius:20px;padding:4px 9px;white-space:nowrap}
.ps-chip i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.ps-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.ps-dots{display:flex;gap:6px;justify-content:center;margin-top:13px}
.ps-dot{width:8px;height:8px;border-radius:50%;background:#d6dbe1;cursor:pointer;transition:.3s;border:0;padding:0}
.ps-dot.is-active{background:#bf1818;width:20px;border-radius:4px}
.ps-kpis{display:flex;gap:8px;margin-bottom:12px}
.ps-kpi{flex:1;background:#f8f9fb;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
.ps-kpi b{display:block;font-size:14px;color:#101828;line-height:1.1}
.ps-kpi small{font-size:7.5px;color:#98a2b3;text-transform:uppercase;letter-spacing:.3px}
.ps-stats{display:flex;gap:8px;margin-bottom:11px}
.ps-stat{flex:1;background:#f8f9fb;border:1px solid #eef0f3;border-radius:8px;padding:7px 10px}
.ps-stat b{display:block;font-size:14px;color:#101828;line-height:1.1}
.ps-stat small{font-size:8px;color:#98a2b3;text-transform:uppercase;letter-spacing:.4px}
.ps-tbl{display:flex;flex-direction:column}
.ps-trow{display:grid;align-items:center;gap:7px;padding:8px 2px;border-bottom:1px solid #f1f3f5;font-size:10px;color:#475467}
.ps-trow.is-head{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:#98a2b3;border-bottom:1px solid #e9ecef;font-weight:600;padding:7px 2px}
.ps-trow--noms{grid-template-columns:1.25fr 1fr .85fr .7fr .85fr;padding:9px 2px}
.ps-trow--noon{grid-template-columns:1.2fr 1.05fr .56fr .56fr .36fr .72fr}
.ps-trow--reg{grid-template-columns:2fr .8fr .4fr 1fr .6fr;padding:7px 2px;color:#667085}
.ps-trow .ps-nm{color:#101828;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-doc b{font-size:10.5px;color:#101828;font-weight:600;display:block;font-family:ui-monospace,monospace}
.ps-doc small{font-size:9px;color:#98a2b3}
.ps-tp2{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#667085}
.ps-tp2 svg{width:12px;height:12px;stroke:#98a2b3;fill:none;stroke-width:1.6;flex:0 0 auto}
.ps-cii{display:inline-flex;width:16px;height:16px;border-radius:4px;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.ps-bdg{font-size:8.5px;font-weight:600;padding:3px 6px;border-radius:5px;text-align:center;white-space:nowrap;display:inline-block}
.ps-bdg.is-al{background:#dcfce7;color:#15803d}
.ps-bdg.is-su{background:#dbeafe;color:#1d4ed8}
.ps-bdg.is-ur{background:#fef3c7;color:#b45309}
.ps-bdg.is-od{background:#fee2e2;color:#b91c1c}
.ps-bdg.is-pd{background:#eef0f2;color:#5b636d}
.ps-bdg.is-cn{background:#d8eef2;color:#1d6373}
.ps-tankrow{display:flex;gap:7px;justify-content:space-between}
.ps-tank{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.ps-vessel{width:100%;max-width:48px;height:118px;border:1.5px solid #d6dbe1;border-radius:5px;position:relative;overflow:hidden;background:#fbfcfd}
.ps-fill{position:absolute;left:0;right:0;bottom:0}
.ps-tl{font-size:7.5px;color:#667085;font-weight:600}
.ps-tp{font-size:10px;color:#101828;font-weight:700;margin-top:-2px}
.ps-tkfoot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:12px;border-top:1px solid #f1f3f5}
.ps-legend2{display:flex;gap:13px}
.ps-lgi{display:flex;align-items:center;gap:5px;font-size:9px;color:#667085}
.ps-lgi i{width:8px;height:8px;border-radius:2px}
.ps-sums{display:flex;gap:16px}
.ps-sum b{font-size:13px;color:#101828}
.ps-sum small{font-size:8px;color:#98a2b3;text-transform:uppercase;letter-spacing:.3px;margin-left:4px}
.ps-dashrow{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ps-dcol{flex:1;min-width:0}
.ps-chartttl{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:#98a2b3;margin-bottom:9px;font-weight:600}
.ps-donutwrap{display:flex;align-items:center;gap:11px}
.ps-dlegend{display:flex;flex-direction:column;gap:6px}
.ps-dlg{display:flex;align-items:center;gap:6px;font-size:9px;color:#475467}
.ps-dlg i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.ps-dlg span{flex:1;white-space:nowrap}
.ps-dlg b{font-size:9px;color:#101828}
.ps-agebars{display:flex;align-items:flex-end;gap:8px;height:74px}
.ps-agecol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.ps-agebar{width:100%;border-radius:3px 3px 0 0;min-height:3px}
.ps-agelbl{font-size:7px;color:#98a2b3}
.ps-rings{display:flex;gap:10px;justify-content:space-between;margin-bottom:14px}
.ps-ring{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.ps-ringwrap{position:relative;width:52px;height:52px}
.ps-ringv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#101828}
.ps-ringl{font-size:7.5px;color:#98a2b3;text-transform:uppercase;letter-spacing:.3px;text-align:center}
.ps-alerts{display:flex;flex-direction:column;gap:8px}
.ps-alert{display:flex;align-items:center;gap:10px;padding:8px 11px;background:#f8f9fb;border:1px solid #eef0f3;border-radius:8px}
.ps-adot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ps-ainfo{flex:1;min-width:0}
.ps-ainfo b{font-size:10.5px;color:#101828;display:block;line-height:1.3}
.ps-ainfo small{font-size:8.5px;color:#98a2b3}
.ps-procharts{display:flex;gap:16px;align-items:flex-start}
.ps-pcol-l{flex:1.55;min-width:0}
.ps-pcol-r{flex:1;min-width:0}
.ps-chartbars{position:relative;display:flex;align-items:flex-end;gap:5px;height:92px}
.ps-vbar{flex:1;background:#1e3a5f;border-radius:2px 2px 0 0;min-height:4px}
.ps-target{position:absolute;left:0;right:0;border-top:1.5px dashed #ef5350}
.ps-stepper{display:flex;align-items:flex-start;margin:6px 0 18px}
.ps-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.ps-stepln{position:absolute;top:7px;left:50%;width:100%;height:2px;z-index:0}
.ps-stepdot{width:16px;height:16px;border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center;background:#fff}
.ps-steplbl{font-size:9px;color:#475467;margin-top:9px;text-align:center;font-weight:600}
.ps-stepst{font-size:7px;text-transform:uppercase;letter-spacing:.3px;margin-top:3px}
.ps-party{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid #f1f3f5}
.ps-pidx{font-size:9px;color:#b6bdc7;font-weight:700;width:14px;flex:0 0 auto}
.ps-av{width:25px;height:25px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ps-pinfo{flex:1;min-width:0}
.ps-pinfo b{font-size:11px;color:#101828;display:block;line-height:1.3}
.ps-pinfo small{font-size:9px;color:#98a2b3}
.ps-reviewrow{display:flex;gap:14px;align-items:stretch}
.ps-thumb{flex:0 0 auto;width:128px;background:#fbfcfd;border:1px solid #eceef1;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ps-rcards{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.ps-rcard{border:1px solid #eceef1;border-radius:8px;padding:9px 11px}
.ps-rch{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ps-rch b{font-size:10.5px;color:#101828}
.ps-rch small{font-size:8.5px;color:#98a2b3}
.ps-rcard p{font-size:9.5px;color:#475467;line-height:1.45;margin:0 0 7px}
.ps-rfoot{display:flex;align-items:center;gap:8px}
.ps-pin{font-size:8px;color:#2c5f73;font-weight:600}
@media (prefers-reduced-motion: reduce){.ps-slide{transition:none}}

/* Desktop: a touch more section breathing room */
@media (min-width: 992px) {
    .products {
        padding-top: 80px;
        padding-bottom: 70px;
    }
}

/* Below 900px: each panel stacks to one column. order:-1 forces the screenshot
   on top for EVERY panel (incl. the reversed FMS), text below. */
@media (max-width: 900px) {
    .product-panel,
    .product-panel--rev {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-shot {
        order: -1;
    }
}

.with-you {
    padding-top: 80px;
    padding-bottom: 80px;
}

.drop-header-item {
    background: #F6F7F9;
    padding: 20px 15px;
    border-radius: 16px;
    position: relative;
    transition: .3s;
    margin-top: 20px;
}

.with-you-item:first-child .drop-header-item{
    margin-top: 0;
}

.drop-header-item:last-child {
    margin-bottom: 0;
}

.drop-header-item:hover {
    background: #C3C7CD;
    cursor: pointer;
}

.drop-header-item.drop-active {
    background: #C3C7CD!important;
    margin-bottom: 0;
}

.drop-header-item:after {
    content: '';
    position: absolute;
    top:50%;
    right: 15px;
    width: 17px;
    height: 17px;
    background: url('/img/icons/icon-plus.svg') center no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

.drop-header-item.drop-active:after {
    width: 0;
    height: 0;
}

.drop-header-item span {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.drop-active-xs {
    display: block!important;
}

.drop-active-lg {
    display: none!important;
}

.with-you-drop-body {
    padding: 15px;
    border-radius: 16px;
    background: #F6F7F9;
}

.with-you-drop-body strong {
    color: #262731;
    font-size: 20px;
    display: block;
    margin-bottom: 15px;
}

.with-you-drop-body p {
    color: #606060;
    font-size: 16px;
    line-height: 120%;
}

.btn-learn-more {
    font-size: 16px;
    font-weight: 400;
    color: #606060;
    border: 1px solid rgba(195, 199, 205, 0.7);
    border-radius: 12px;
    padding: 10px 20px;
    transition: .3s;
    display: inline-block;
    margin-top: 30px;
}

.btn-learn-more:hover {
    color: #ffffff;
    border: 1px solid #606060;
    background: #606060;
}

.modernize {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
    background: #0a121c;
}

/* CTA designed-abstract background — replaces the former circuit-board image
   (the homepage hero already owns the circuit/line/network look). Inline SVG
   (navy angular planes + a single warm red glow) and a dark gradient scrim are
   layered behind the .container content so the white copy stays legible. */
.cta-abstract {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

.cta-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #0a121c 26%, rgba(10, 18, 28, 0.85) 46%, rgba(10, 18, 28, 0.30) 72%, rgba(10, 18, 28, 0.55) 100%);
}

.modernize .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {
    .cta-scrim {
        background: linear-gradient(180deg, rgba(10, 18, 28, 0.78), rgba(10, 18, 28, 0.55));
    }
}

.modernize h2 {
   color: #FFFFFF;
}

.modernize p {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 120%;
}

.modernize .btn-main {
    margin-top: 20px;
}

/* ===========================================================================
   Phase 4 — Homepage text sections: who-we-serve (industries strip),
   value (built for control), why-retrotech (differentiation). Text-forward,
   no image assets; light sections matching the site type scale and rhythm.
   Brand red #ef5350 used only as a thin top-accent on each item.
   .experience-title is the heading added to the reframed stats section.
   =========================================================================== */

/* --- Who we serve --- */
.who-we-serve {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #F6F7F9;
}

.serve-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    box-sizing: border-box;
}

.serve-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.serve-item h3 {
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 10px;
    color: #262731;
}

.serve-item p {
    font-size: 16px;
    line-height: 140%;
    color: #606060;
    margin-bottom: 0;
}

.serve-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    color: #ef5350;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: gap .3s ease;
}

.serve-link-arrow {
    color: #ef5350;
    transition: transform .3s ease;
}

.serve-link:hover .serve-link-arrow {
    transform: translateX(4px);
}

/* --- Built for control, not complexity --- */
.value {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ffffff;
}

.value-intro {
    max-width: 760px;
    margin: 0 0 38px;
    font-size: 18px;
    line-height: 140%;
    color: #606060;
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    box-sizing: border-box;
}

.value-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.value-item h3 {
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 12px;
    color: #262731;
}

.value-item p {
    font-size: 16px;
    line-height: 150%;
    color: #606060;
    margin-bottom: 0;
}

/* --- Why Retrotech --- */
.why-retrotech {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #F6F7F9;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    box-sizing: border-box;
}

.why-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.why-item h3 {
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 12px;
    color: #262731;
}

.why-item p {
    font-size: 16px;
    line-height: 150%;
    color: #606060;
    margin-bottom: 0;
}

/* Responsive grids: serve/value 1 -> 3 (>=768); why 1 -> 2 (>=600) -> 4 (>=992) */
@media (min-width: 600px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .serve-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .value-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Heading added to the reframed stats section ("Backed by real experience") */
.experience-title {
    text-align: center;
    margin-bottom: 40px;
}

.experience {
    padding-top: 80px;
    padding-bottom: 80px;
}

.experience img {
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}

.experience-item {
    margin-top: 40px;
}

.experience-item strong {
    display: block;
    font-size: 55px;
    color: #BF1818;
    margin-bottom: 12px;
    line-height: 100%;
    font-weight: bold;
    text-align: center;
}

.experience-item span {
    display: block;
    font-size: 16px;
    color: #262731;
    line-height: 100%;
    font-weight: 300;
    text-align: center;
}

footer {
    background: #F6F7F9;
    padding-top: 70px;
    color: #262731;
    padding-bottom: 60px;
}

.footer-logo {
    display: block;
    transition: .3s;
    margin-bottom: 28px;
}

.footer-logo:hover {
   transform: translateY(-3px);
}

.footer-logo img {
    max-width: 255px;
}

.footer-bottom {
    padding-bottom: 5px;
    margin-top: 10px;
    padding-top: 5px;
}

.footer-bottom > div {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-menu ul {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-menu ul li {
    list-style: none;
    margin-bottom: 10px;
}

.footer-menu ul li strong {
    display: block;
    margin-bottom: 20px;
    font-weight: 400;
    color: #262731;
    font-size: 19px;
}

.footer-menu a {
    color: rgba(38, 39, 49, 0.7);
    padding-top: 10px;
    padding-bottom: 10px;
    transition: .3s;
    font-weight: 400;
    font-size: 16px;
}

.footer-menu a:hover {
    color: #BF1818;
}

footer .follow a {
    display: inline-block;
    transition: .3s;
    margin-right: 10px;
}

footer .follow a:last-child {
   margin-right: 0;
}

footer .follow a:hover {
    transform: translateY(-3px);
}

.footer-menu-bottom  {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom .footer-menu ul {
    margin-bottom: 0;
    margin-top: 10px;
}

.footer-bottom .footer-menu ul li {
    margin-right: 10px;
    display: inline-block;
}

.footer-developer span {
    font-weight: 300;
    color: rgba(244, 241, 233, .5);
    font-size: 13px;
}

.footer-developer span a {
    transition: .3s;
    display: inline-block;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 10px;
}

.footer-developer span a:hover {
    transition: .3s;
    transform: translateY(-3px);
}

.footer-menu .btn-main {
    padding: 10px 30px;
    margin-top: 1px;
}

.footer-menu .btn-main:hover {
    color: #ffffff;
}

.footer-menu p {
    font-size: 13px;
    font-weight: 300;
    margin-top: 10px;
}

.footer-phone a {
    font-weight: 500;
}

.footer-menu-bottom {
    padding-top: 0;
    padding-bottom: 5px;
}

.footer-menu-bottom span {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: #262731;
    margin-bottom: 5px;
}

.footer-menu-bottom a {
    display: block;
    font-size: 13px;
    color: #262731;
    font-weight: 300;
    transition: .3s;
    margin-bottom: 5px;
}

.footer-menu-bottom a:hover {
    color: #BF1818;
}

.footer-social a {
    display: inline-block;
    padding: 10px 10px;
    color: #262731;
    font-weight: 500;
    transition: .12s;
}

.footer-social a:hover {
      filter: invert(18%) sepia(75%) saturate(3573%) hue-rotate(345deg) brightness(75%) contrast(104%);

}

.footer-social a:first-child {
    padding-left: 0;
}

.dev a {
    display: block;
    vertical-align:middle;
    margin-left: 5px;
}

.dev span {
    display: inline-block;
    vertical-align:middle;
}

@media(min-width: 768px) {

    h1 {
        font-size: 30px;
    }

    .banner p {
        font-size: 20px;
        margin-top: 10px;
    }

    .explore {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .explore span {
        color:#ffffff;
        display: block;
        font-size: 16px;
    }

    .explore span:before {
        content: '';
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 25px;
        border-radius: 2px;
        background: linear-gradient(171deg, #ededed, #bf1818);
        background-size: 400% 400%;

        -webkit-animation: AnimationName 5s ease infinite;
        -moz-animation: AnimationName 5s ease infinite;
        animation: AnimationName 5s ease infinite;
    }

    @-webkit-keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    @-moz-keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    @keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    .text-block p {
        margin-top: 0;
        font-size: 20px;
        margin-bottom: 30px;
        padding-top: 12px;
        line-height: 120%;
        font-weight: 400;
    }

    .drop-header-item {
        margin-top: 0;
    }

    .drop-active-xs {
        display: none!important;
    }

    .drop-active-lg {
        display: block!important;
    }

    .modernize h2 {
        margin-bottom: 0;
    }


    .footer-menu-bottom a {
        margin-bottom: 0;
    }

    .footer-menu-bottom {
        padding-top: 10px;
    }

    .footer-menu a {
        font-size: 14px;
    }

    .footer-bottom .footer-menu ul li {
        display: block;
    }

    .dev a {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -3px;
    }

    .dev a:hover {
        transform: translateY(-3px);
    }

}

@media(min-width: 992px) {

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 44px;
        line-height: 120%;
    }

    .offcanvas {
        background: transparent!important;
        background-size: unset;
    }
    .offcanvas-body {
        background: transparent;
    }

    .offcanvas-body > div  {
        width: auto;
    }

    .navbar-nav {
        background: rgba(64, 64, 64, 0.4);
        border-radius: 16px;
        padding: 5px 5px 5px 10px;
    }

    .nav-item .nav-link {
        font-size: 16px;
        margin-right: 15px;
        border-top: none;
        font-weight: 400;
    }

    .offcanvas-body {
        background: transparent;
        margin: 0;
        border-radius: 12px;
    }

    .offcanvas-body .navbar-nav .btn-main {
        margin: 0;
        padding: 15px 20px;
        font-weight: 500;
    }

    .nav-item .nav-link:last-child {
        border-bottom:none;
    }

    .navbar-nav .dropdown-menu {
        border-radius: 12px;
        top: 55px;
    }

    .btn-main {
        font-size: 16px;
        border: none;
    }

    .banner h1 {
        font-size: 50px;
    }

    .footer-bottom .footer-menu ul li {
        display: inline-block;
    }

    .dropdown-menu li:last-child .dropdown-item {
        margin-bottom: 0;
    }
    .nav-item:after  {
        content: '';
        position: absolute;
        top:50%;
        right: 5px;
        width: 0;
        height: 0;
        background: none;
        background-size: contain;
        transform: translateY(-50%);
    }

    .with-you-drop-body {
        padding: 25px;
    }

    .modernize p {
        width: 75%;
    }

    .footer-menu-bottom {
        margin-top: 10px;
    }

    .count-input input {
        width: 70px;
    }

    .footer-social a {
        padding: 10px 5px;
        font-size: 14px;
    }

}

@media(min-width: 1200px) {

    h2 {
        font-size: 54px;
        margin-bottom: 60px;
    }

    .banner-img {
        min-height: 700px;
    }

    .nav-item .nav-link {
        margin-right: 25px;
    }

    .menu-logo {
        max-width: 175px;
    }

    .text-block {
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .text-block p {
       font-size: 20px;
       width: 95%;
    }

    .with-you {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .with-you-drop-body strong {
        margin-bottom: 30px;
    }

    .modernize {
        padding-top: 150px;
        padding-bottom: 150px;
    }

    .experience {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .experience-item span {
        font-size: 20px;
    }

    footer {
        padding-bottom: 5px;
    }

    .footer-social a {
        padding: 10px 10px;
        font-size: 15px;
    }

}

@media(min-width: 1440px) {

    .nav-item .nav-link {
        margin-right: 25px;
    }

    .banner {
        margin-top: 70px;
    }

    .banner h1 {
        width: 85%;
        font-size: 60px;
    }

    .banner p {
        font-size: 20px;
        width: 100%;
    }

    .text-block p {
        width: 95%;
        margin-bottom: 0;
    }

    .modernize p {
        width: 71%;
        margin-top: 10px;
    }


    footer {
        padding-top: 80px;
    }

    .footer-menu a {
        font-size: 16px;
    }
}

@media(min-width: 1900px) {  }


/* About page: the old overview page (banner photo + story slider) was retired
   on 2026-07-04. The rebuilt page's hero lives in the .wrap-banner.about block
   (end of file); the old .about banner-photo rule, .our-story band, and the
   about-only #desktopCarousel rules were removed with it. */


#mobileCarousel .custom-indicators {
    position: absolute;
    top: 280px;
    bottom: auto;
    margin-bottom: 0;
}

#mobileCarousel .custom-indicators [data-bs-target] {
    width: 40px;
    height: 3px;
    background: #262731;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex: 1 0 0;
    border-radius: 25px;
    margin-left: 0;
    margin-right: 0;
}

#mobileCarousel .custom-indicators .active {
    opacity: 1 !important;
}

#mobileCarousel .custom-indicators {
    background: #B5B5B5;
    margin-left: 0;
    margin-right: 0;
    border-radius: 25px;
}

#mobileCarousel .carousel-indicators {
    border-radius: 16px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-left: 5px;
    left: 0;
}

#mobileCarousel .carousel-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
}

#mobileCarousel .carousel-item div {
    padding: 65px 5px 1px 5px;
    text-align: left;
    min-height: 220px;
}

.who-we-block.text-block p {
    margin-bottom: 30px;
}

.who-we-block img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

.how-we-think {
    background: url('/img/design/bg-how-we-think.jpg') center no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

.how-we-think h2 {
    color: #FFFFFF;
}

.how-we-think .how-we-think-block {
    margin-bottom: 20px;
}

.how-we-think .how-we-think-block:last-child {
    margin-bottom: 0;
}

.how-we-think .how-we-think-block > div {
    background: rgba(26, 50, 95, 0.50);
    backdrop-filter:  blur(10px);
    padding: 25px 15px;
    border-radius: 16px;
}

.how-we-think .how-we-think-block span {
    display: block;
    color: #BF1818;
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 100%;
}

.how-we-think .how-we-think-block h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
}

.how-we-think .how-we-think-block p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    margin-bottom:0 ;
    line-height: 120%;
}

.built-for-intelligence {
    padding-top: 80px;
    padding-bottom: 80px;
}

.built-for-intelligence h2 {
    line-height: 120%;
}

.built-for-intelligence img {
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}


@media (min-width: 768px) {

    .wrap-banner.banner-half-height {
        min-height: 60vh;
    }

    #mobileCarousel .carousel-indicators {
    margin-right: 30px;
    margin-left: 30px;
    }

    #mobileCarousel .carousel-item div {
        padding: 65px 50px 1px 50px;
        min-height: 180px;
    }

    .how-we-think .how-we-think-block {
        margin-bottom: 0;
    }

    .how-we-think .how-we-think-block > div {
        min-height: 100%;
    }
}

@media (min-width: 992px) {

    .who-we-block img {
        margin-top: 30px;
    }

    .who-we-block .animate-on-scroll {
        margin-top: 30px;
    }

     .who-we-block .animate-on-scroll img {
        margin-top: 0;
     }

}

@media (min-width: 1200px) {
    .how-we-think {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .built-for-intelligence {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .wrap-banner.banner-half-height {
        min-height: 60vh;
    }
}

@media(min-width: 1400px) {

   .banner-half-height {
        min-height: 65vh;
    }

    .who-we-block img {
        margin-top: 60px;
    }

    .how-we-think .how-we-think-block p {
        width: 90%;
    }

}

/*Industries page: the old banner-photo hero was retired on 2026-07-04 with
   the page rebuild — the new dark hero lives in the .wrap-banner.industries
   block at the end of this file. img-industries-banner.jpg is kept on disk
   per the keep-assets instruction but is no longer referenced. */

.text-block-icons {
    margin-top: 80px;
    margin-bottom: 80px;
}

.block-icons-item {
    margin-top: 20px;
}

.block-icons-item > div {
    background: #1A325F;
    border-radius: 16px;
    padding: 28px 20px;
}

.block-icons-item > div img {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

.block-icons-item > div h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color:#ffffff;
}

.block-icons-item > div p {
    font-size: 16px;
    font-weight: 400;
    color: #F4F4F4;
}

.fleet-operator {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #262731;
    background-size: cover;
}

.fleet-operator h2 {
    color: #ffffff;
}

.fleet-operator-text h3 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 16px;
    font-weight: 500;
}

.fleet-operator-text p {
    font-size: 16px;
    line-height: 120%;
    font-weight: 400;
    color: #F4F4F4;
}

.fleet-xs-block  {
   margin-bottom: 20px;
}

.fleet-xs-block:last-child  {
   margin-bottom: 0;
}

.fleet-xs-block > div {
    min-height: 120px;
    padding: 32px 22px;
    border-radius: 16px;
}


.fleet-block-1 > div {
    background: url('/img/design/img-fleet-1.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-2 > div {
    background: url('/img/design/img-fleet-2.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-3 > div{
    background: url('/img/design/img-fleet-3.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-4 > div{
    background: url('/img/design/img-fleet-4.jpg') center center no-repeat;
    background-size: cover;
}

/* The old industries page's key-sectors photo rows (and their parallax
   keyframes) were retired on 2026-07-04 with the page rebuild; a few inert
   .key-sectors rules remain inside shared media blocks further down (they
   target classes no template renders). img-key-sectors-*.jpg stay on disk
   per the keep-assets instruction. */

.fits-operation {
    padding-top: 100px;
    padding-bottom: 100px;
    background: url('/img/design/bg-feets-operation.jpg') center no-repeat;
    background-size: cover;
}

.fits-operation p {
    color:#ffffff;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 15px;
}

.fits-operation h2 {
    color:#ffffff;
    line-height: 120%;
}

#fleetCarousel .list-group {
    border-left: 2px solid #7e7b7b;
    border-radius: 0;
}

#fleetCarousel .list-group-item {
    background: transparent;
    transform: translateX(-2px);
    transition: .3s;
    border-radius: 0;
    border: none;
    height: 42px;
    font-weight: 400;
    padding:0;
    position: relative;
}

#fleetCarousel .list-group-item span {
    display: block;
    color: #0e2d67;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

#fleetCarousel .list-group-item.active-fleet {
    background: transparent !important;
}

#fleetCarousel .list-group-item.active-fleet:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 42px;
    width: 2px;
    border-radius: 90px;
    background: rgba(191, 24, 24, 0.80);
}

#fleetCarousel .list-group-item+.list-group-item.active-fleet {
    margin-top: 0;
    transform: translate(-2px,-3px);
}

#fleetCarousel .list-group-item.active-fleet span {
    color: #ffffff;
    line-height: 20px;
}

#fleetCarousel .carousel-item > div {
    padding: 20px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    min-height: 176px;
    margin-left: 10px;
    margin-right: 10px;
}

#fleetCarousel .carousel-item h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
}

#fleetCarousel .carousel-item p {
    color: #F4F4F4;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

@media(min-width: 768px) {

    .block-icons-item > div {
        min-height: 100%;
    }

    .block-icons-item > div h3 {
        font-size: 16px;
    }

    .block-icons-item > div p {
        font-size: 15px;
    }

    .fleet-operator {
        background: url('/img/design/img-fleet-operators.jpg') center no-repeat;
        background-size: cover;
        padding-top: 100px;
        padding-bottom: 100px;
    }



    .key-sectors-row:before {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.352718) 15.65%,
        rgba(0, 0, 0, 0.143033) 29.94%, rgba(0, 0, 0, 0) 44.34%, rgba(0, 0, 0, 0) 62.26%,
        rgba(0, 0, 0, 0.143) 74.84%, rgba(0, 0, 0, 0.352) 87.22%, rgba(0, 0, 0, 0.55) 100%);
    }

    .sector-2 {
        background-image: url('/img/design/img-key-sectors-2.jpg');
    }


    .fits-operation p {
        width: 80%;
        padding-top: 10px;
    }

}

@media(min-width: 992px) {


    .block-icons-item > div h3 {
        font-size: 20px;
    }

    .block-icons-item > div p {
        font-size: 16px;
    }

    .key-sectors-row .key-sectors-num span {
        font-size: 90px;
    }
    .fleet-operator {

        padding-top: 130px;
        padding-bottom: 130px;
    }

}

@media(min-width: 1200px) {

    .text-block-icons {
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .fleet-operator {

        padding-top: 230px;
        padding-bottom: 230px;
    }

    #fleetCarousel .list-group-item {
        height: 42px;
    }

    #fleetCarousel .list-group-item.active-fleet:before {
        height: 42px;
    }

    #fleetCarousel .carousel-item > div {
        padding: 20px 13px;
    }

    #fleetCarousel .carousel-item h3 {
        font-size: 28px;
    }

    #fleetCarousel .carousel-item p {
        font-size: 20px;
    }

    .key-sectors {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .key-sectors-row {
        background-size: 110% auto;
        background-position: center 40%;
        background-repeat: no-repeat;
    }

    .sector-1 {

    }

    .sector-2 {

    }

    .sector-3 {

    }

    .key-sectors-row {
        padding: 30px 35px;
        margin-bottom: 40px;
    }

    .sector-3 {
        margin-bottom: 0;
    }

    .fits-operation {
        padding-top: 140px;
        padding-bottom: 100px;
    }

    .fits-operation p {
        width: 89%;
    }

}

@media(min-width: 1400px) {

    .block-icons-item {
        margin-top: 60px;
    }

    .block-icons-item > div p {
        width: 98%;
    }

    .block-icons-item > div img {
        width: 30px;
        height: 30px;
    }

    #fleetCarousel .carousel-item > div {
        padding: 20px 25px;
    }

    .key-sectors-row {
       min-height: 600px;
    }

}


/*Partners Page: the old banner/become-partner photo heroes were retired on
   2026-07-04 with the page rebuild — the new dark hero lives in the
   .wrap-banner.partners block at the end of this file. bg-partners.jpg and
   bg-become-partner.jpg stay on disk, unreferenced. (.partners-text below is
   SHARED with the solutions page and stays.) */

.partners-text h2 {
    margin-bottom: 0;
    margin-top: 0;
}

/* (The old partners page's why-choose blocks — base and media rules — were
   removed here with the 2026-07-04 rebuild; bg-why-choose-us-list.jpg stays
   on disk, unreferenced.) */

/* (The old .ul red-square list block — base and media rules — was removed
   2026-07-04 with the Training & Implementation rebuild, its last renderer;
   one inert .retro-fms-financial-claims compound remains for the orphan-
   cleanup phase.) */

/*Resources page*/

.resources {
    background: url('/img/design/bg-resourses.jpg') center no-repeat;
    background-size: cover;
}

.resources-text .block-icons-item > div {
    background: #262731;
}

.resources-text .text-block {
    margin-top: 0;
}

.resources-text .text-block h2 {
    margin-bottom: 40px;
    line-height: 120%;
}

.resources-text.text-block-icons {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px;
    padding-bottom: 55px;
    background: rgba(195, 199, 205, 0.9);
}

.resources-text .block-icons-item {
    margin-top: 12px;
    margin-bottom: 12px;
}

.built-operations {
    padding-top: 80px;
    padding-bottom: 80px;
}

.built-operations-img {
    min-height: 300px;
    background: url('/img/design/img-built-operations.jpg') center center no-repeat;
    background-size: cover;
    margin-top: 30px;
    border-radius: 16px;
}

.built-operations-img p {
    margin-bottom: 15px;
    padding-left: 0;
    color: #ffffff;
    font-weight: 400;
    line-height: 120%;
}

.stay-informed {
    background: url('/img/design/img-stay-informed.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {

    .resources-text .block-icons-item {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .built-operations-img p {
        font-size: 20px;

    }

}

@media(min-width: 992px) {  }

@media(min-width: 1200px) {

    .resources-text.text-block-icons {
        padding-top: 120px;
        padding-bottom: 90px;
    }

    .built-operations {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .built-operations-img {
        min-height: 500px;
        background-size: 110% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        margin-top: 60px;
    }

}

@media(min-width: 1400px) {  }


/*Data Migration page: the old photo-hero and icon-text sections were retired
   on 2026-07-04 with the page rebuild — the new dark hero lives in the
   .wrap-banner.data-migration block at the end of this file. Two inert
   .data-migration-text rules remain in shared media blocks below (no template
   renders the class); bg-data-migration.jpg stays on disk, unreferenced.
   (.what-data was retired 2026-07-04 with the Training & Implementation
   rebuild — the last page that rendered it.) */

.stay-informed {
    background: url('/img/design/img-stay-informed.jpg') center center no-repeat;
    background-size: cover;
}



/* (.assess-migration photo band removed with the rebuild) */

.assess-migration h2 {
    color: #262731;
}

.assess-migration p {
    color: #262731;
}

.assess-migration .btn-main {
    padding: 15px 21px;
}

@media(min-width: 768px) {

    .data-migration-text .block-icons-item {
        margin-top: 0;
        margin-bottom: 25px;
    }

}

}

@media(min-width: 992px) {  }

@media(min-width: 1200px) {

    .data-migration-text.text-block-icons {
        padding-top: 120px;
        padding-bottom: 90px;
    }

    .assess-migration p {
        width: 70%;
    }

}

.form-control {
    display: block;
    width: 100%;
    height:auto;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    color: #000000;
    background-color: #F1F1F1;
    background-clip: padding-box;
    border: 0;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    outline: none;
    box-shadow: none;
    margin-bottom: 20px;
}

label {
    margin-bottom: 0;
}

.form-control::placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-ms-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control:-moz-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-moz-placeholder{
    color: #B5B5B5;
    opacity: 1;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border: none;
    background: #F1F1F1;
    color:#000000;
}

textarea {
    resize: none;
}


/*Custom Development page*/

/* ==========================================================================
   Custom Application Development static hero (page rebuild) — the old
   banner-image treatment is retired (asset removed). Same dark-hero family
   as RTMS/DCS: #080c16 field, self-contained inline-SVG module/brackets
   motif (.cad-hero-bg), left-weighted scrim (.cad-hero-scrim), homepage type
   parity. Page-scoped to .wrap-banner.custom-development; other pages
   untouched. No animation anywhere. */
.wrap-banner.custom-development {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.custom-development .cad-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.custom-development .cad-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.custom-development > nav,
.wrap-banner.custom-development > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page (the hero scopes the nav to
   position:relative for SVG layering; without this override the nav scrolls
   away — the exact DCS regression logged in the tracker). Same rule every
   dark-hero page block carries. */
.wrap-banner.custom-development nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.custom-development .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.custom-development .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.custom-development .hero-cad-block { max-width: 1220px; }
.wrap-banner.custom-development .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.custom-development .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.custom-development .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.custom-development .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.custom-development .hero-statement { max-width: 720px; }
.wrap-banner.custom-development .hero-supporting { max-width: 980px; }
.wrap-banner.custom-development .hero-cad-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.custom-development .cad-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

.custom-development-what-build{
    background: rgba(195, 199, 205, 0.90);
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-development-what-build h2 {
    color: #262731;
}

.custom-development-what-build .how-we-think-block > div {
   background: #262731;
    padding: 35px 25px;
}

.custom-development-what-build .how-we-think-block > div h3 {
    font-size: 16px;
    font-weight: 400;
    color: #F4F4F4;
}

.custom-development-what-build .how-we-think-block > div span {
    font-size: 24px;
    font-weight: 500;
}

.custom-development-what-build .how-we-think-block p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    line-height:20px;
}

#custom-development-carousel-lg .list-group {
    border-left: 2px solid #B5B5B5;
    border-radius: 0;
}

#custom-development-carousel-lg .list-group-item {
    background: transparent;
    border: 0;
    transform: translateX(-2px);
    transition: .3s;
    border-radius: 0;
    min-height: 140px;
    font-weight: 400;
    padding: 20px 30px;
    position: relative;
}

#custom-development-carousel-lg .list-group-item span {
    display: block;
    color: #B5B5B5;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

#custom-development-carousel-lg .list-group-item.active-custom-dev-item {
    border: 0;
    background: transparent !important;
    min-height: 140px;
}

#custom-development-carousel-lg .list-group-item.active-custom-dev-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    border-radius: 90px;
    background: #262731!important;
}

#custom-development-carousel-lg .list-group-item+.list-group-item.active-custom-dev-item {
    margin-top: 0;
    transform: translate(-2px,-3px)!important;
}


#custom-development-carousel-lg .list-group-item.active-custom-dev-item span {
    color: #262731;
    line-height: 20px;
}

#custom-development-carousel-lg .carousel-item img {
    display: block;
    min-width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
}


#custom-development-carousel-xs .custom-indicators {
    position: absolute;
    top: 280px;
    bottom: auto;
    margin-bottom: 0;
}

#custom-development-carousel-xs .custom-indicators [data-bs-target] {
    width: 40px;
    background: #262731;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex: 1 0 0;
    border-radius: 25px;
    margin-left: 0;
    margin-right: 0;
}

#custom-development-carousel-xs .custom-indicators .active {
    opacity: 1 !important;
}

#custom-development-carousel-xs .custom-indicators {
    background: #B5B5B5;
    margin-left: 0;
    margin-right: 0;
    border-radius: 25px;
}

#custom-development-carousel-xs .carousel-indicators {
    border-radius: 16px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-left: 5px;
    left: 0;
}

#custom-development-carousel-xs .carousel-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
}

#custom-development-carousel-xs .carousel-item div {
    padding: 65px 5px 1px 5px;
    text-align: left;
    min-height: 220px;
}

.custom-development-partners {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ECEEF1;
}

.custom-block-item {
    margin-bottom: 30px;

}

.custom-block-item:last-child {
    margin-bottom: 0;
}

.custom-block-item h3{
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
    font-weight: 500;
    font-size: 20px;
}

.custom-block-item p {
    font-size: 16px;
    font-weight: 400;
    color: #606060;
    line-height: 120%;

}

.custom-block-item h3:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BF1818;
}

/* (old .custom-development-architecture-img rule retired with the rebuild —
   its background asset was removed from the deploy tree) */

.custom-development-architecture .about-building-block > div {
    background: #262731;
    color: #ffffff;
    height: 100%;
}


.custom-development-architecture .about-building-block > div>div {

    min-height: 100%;
}


.custom-development-architecture .about-building-block h3 {
    color: #ffffff;
}

.custom-development-architecture .about-building-block p {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* (old .custom-development-software rule retired with the rebuild — its
   background asset was removed from the deploy tree) */

.carousel-small strong {
    display: block;
    margin-top: 35px;
    margin-bottom: 12px;
    font-size: 20px;
}

.carousel-large strong {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
}
.carousel-large strong {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    opacity: 0.5;
}
#custom-development-carousel-lg .list-group-item.active-custom-dev-item strong {

    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    opacity: 1;

}


#custom-development-carousel-xs .carousel-item div {
    padding: 19px 0 1px 0;
    text-align: left;
    min-height: 220px;
}
@media(min-width: 768px) {

    .custom-development-what-build .how-we-think-block > div {
        padding: 30px 15px;
    }

    #custom-development-carousel-xs .carousel-indicators {
        margin-right: 30px;
        margin-left: 30px;
    }

    #custom-development-carousel-xs .carousel-item div {
        padding: 5px 29px 1px 29px;
        min-height: 180px;
    }

    .carousel-small strong {
        margin-top: 50px;
    }

}

@media(min-width: 992px) {

    .custom-development-what-build .how-we-think-block > div {
        padding: 35px 25px;
    }

    #custom-development-carousel-lg .list-group-item {
        padding: 20px 50px;
    }
}

@media(min-width: 1200px) {

    .custom-development-standard h2 {
        width: 90%;
    }

    .custom-development-what-build {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .custom-development-partners {
        padding-top: 120px;
        padding-bottom: 120px;
    }


}

@media(min-width: 1400px) {
    .custom-development-standard h2 {

        width: 90%;
    }

    .custom-development-architecture-img {
        min-height: 500px;
        background-size: 110% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        margin-top: 60px;
    }


}


/*Solutions page*/

.solutions {
    background: url('/img/design/banner-solutions.jpg') center center no-repeat;
    background-size: cover;
}

.solution-support .block-icons-item > div {
    background: #ECEEF1;
    border-radius: 16px;
    padding: 28px 20px;
}

.solution-support h2 {
    margin-bottom: 40px;
}

.solution-support .block-icons-item > div h3 {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #262731;
}

.solution-support .block-icons-item > div p {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.solution-support h2 {
    margin-bottom: 20px;
}

.solutions-why {
    background: url('/img/design/img-solution-why.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-why h2{
   color: #ffffff;
}

.solutions-why h3{
   color: #ffffff;
}

.solutions-why .list-why-choose h3 {
    font-size: 22px;
}

.solutions-why p{
   color: #F4F4F4;
}

.solutions-service-lifecycle {
    background: url('/img/design/img-solutions-service-lifecycle.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-service-lifecycle .fleet-xs-block > div {
    background: rgba(38, 39, 49, 0.9);
    backdrop-filter:  blur(10px);
}

.solutions-service-lifecycle   #fleetCarousel .list-group-item {
    height: 60px;
}

.solutions-service-lifecycle  #fleetCarousel .list-group-item.active-fleet:before {
    height: 60px;

}

.solutions-delivered {
    background: #ffffff;
}

.solutions-delivered {
    background: #ffffff;
}

.solutions-delivered .how-we-think-block > div {
    background: rgba(195, 199, 205, 0.90);
    padding: 35px 25px;
}

.solutions-delivered .how-we-think-block > div {
    background: rgba(195, 199, 205, 0.90);
    padding: 35px 25px;
}

.solutions-delivered .how-we-think-block > div h3 {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.solutions-delivered .how-we-think-block > div p {
    font-size: 16px;
    font-weight: 500;
    color: #262731;
}

.solutions-ready-to-talk {
    background: url('/img/design/img-solutions-ready-to-talk.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-ready-to-talk {
    background: url('/img/design/img-solutions-ready-to-talk.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-service-lifecycle #fleetCarousel .carousel-item > div {
    background: rgba(38, 39, 49, 0.69);
    backdrop-filter:  blur(10px);
}

@media(min-width: 768px) {

    .solution-support h2 {
        width: 74%;
    }



    .solutions-delivered h2 {
        width: 60%;
    }

    .solutions-delivered .how-we-think-block > div {
        padding: 35px 18px;
    }

}

@media(min-width: 992px) {
    .solution-support h2 {

        width: 74%;
    }

    .solutions-delivered .how-we-think-block > div {
        padding: 35px 25px;
    }
}

@media(min-width: 1200px) {
    .solution-support .block-icons-item > div h3 {
        font-size: 20px;
    }

    .solutions-service-lifecycle {
        padding-top: 150px;
        padding-bottom: 150px;
    }
}

@media(min-width: 1400px) {
    .solutions-ready-to-talk h2{
        width: 100%;
    }
}


/* (The old legal-page sidebar/list styling — .inform-block-* /
   .site-privacy-menu / .site-accent-number — was retired 2026-07-05 with the
   shared document shell; see the .doc-band/.doc-layout block near the end of
   this file. The .site-safety-menu variant further down was already orphaned
   and is left for the orphan-cleanup phase.) */

.wrap-banner.without-banner {
    min-height: 0!important;
    /* No full-bleed hero here, so the page content starts at the very top. The
       header is now fixed (out of flow); this empty wrapper acts as a spacer >=
       the solid bar height (~77px) so the first content/heading clears it. */
    padding-top: 90px;
}

@media(min-width: 768px) {  }

@media(min-width: 992px) {  }

@media(min-width: 1400px) {  }


/*Retronet FMS page*/

/* The old FMS hero (a full-bleed background photo on .wrap-banner.retro-fms) was
   retired in favour of a static dark inline-SVG hero in the homepage family,
   matching the RETRO.RTMS approach. Its rules live in the .wrap-banner.retro-fms
   block beside the RTMS hero rules below; banner-1.jpg was removed. */

.overview-block {
    background: #F4F4F4;
    border-radius: 16px;
    margin-top: 60px ;
    margin-left: 0;
    margin-right: 0;
}

.overview-block-item  {
   padding: 15px 5px;
    margin-left: 0;
    margin-right: 0;
}

.overview-block-img img {
    display: block;
    border-radius: 16px;
}

.overview-block-item:first-child  {
   padding-top: 30px;
}

.overview-block-item:last-child  {
   padding-bottom: 30px;
}

.overview-block-item img {
    display: block;
    width: 30px;
    height: 30px;
}

.overview-block-item h3 {
    margin-bottom: 0;
    color: #262731;
    font-size: 20px;
    font-weight: 500;
    margin-left: 7px;
}

.overview-block-item p {
    margin-bottom: 0;
    color: #606060;
    font-size: 16px;
    font-weight: 400;
    padding-top: 12px;
}

.retro-fms-key-benefits {
    padding-top: 100px;
    padding-bottom: 100px;
    background: url('/img/design/img-retro-fms-key-benefits-xs.jpg') center left no-repeat;
    background-size: cover;
}
.retro-fms-key-benefits  #fleetCarousel .list-group-item {
    height: 60px;
}

.retro-fms-key-benefits #fleetCarousel .list-group-item.active-fleet:before {
    height: 60px;

}
.h-number {
    display: block;
    font-weight: 500;
    font-size: 38px;
    line-height: 100%;
    padding-top: 0;
    padding-bottom: 12px;
    color: #BF1818;
}

.retro-fms-key-benefits .fleet-xs-block > div {
    background: rgba(79, 83, 89, 0.56);
    backdrop-filter: blur(4px);

}

.retro-fms-key-benefits .fleet-xs-block > div h3{
    font-size: 16px;
    font-weight: 400;
}

.retro-fms-control-item  {
    margin-bottom: 25px;
}

.retro-fms-control-item > div {
    background: #ECEEF1;
    border-radius: 16px;
    padding: 24px 16px;
    min-height: 100%;
}

.retro-fms-control-item > div h3 {
    color: #262731;
    font-size: 20px;
    margin-bottom: 16px;
    padding-left: 3px;
}

.retro-fms-control-item > div p {
    color: #606060;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 3px;
    font-weight: 400;
    line-height: 20px;
}

.retro-fms-control-item > div img {
    display: block;
    border-radius: 16px;
}

.retro-fms-operational-control {
    padding-top: 80px;
    padding-bottom: 80px;
}

.procurement-block {
    background: #262731;
}

.retro-fms-financial-claims {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ECEEF1;
}

.financial-claims-row {
    margin-bottom: 20px;
    margin-top: 0;
}

.financial-claim-text {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    min-height: 100%;
}

.retro-fms-financial-claims ul li{
   color:  #262731;
}

.retro-fms-financial-claims strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}
.retro-fms-financial-claims .ul ul li:before {
    top: 10px;
}

.retro-fms-financial-claims img{
    display: block;
    border-radius: 16px;
}

.retro-fms-analytics-img {
    background: url('/img/design/img-retro-fms-financial-analytics.jpg') center center no-repeat;
    background-size: cover;
}

.retro-fms-analytics-text .about-building-block >div {
    background: #F6F7F9;
    height: 100%;
}

.retro-fms-safety {
    background: rgba(195, 199, 205, 0.89);
    padding-top: 80px;
    padding-bottom: 80px;
}

.retro-fms-safety-left {
    background: transparent;
}

.retro-fms-safety-right {
    background: transparent;
    border-radius: 16px;
    padding: 0;
}

.site-scroll-window {
    height: 500px;
    overflow-y: scroll;
    position: relative;
    scroll-behavior: smooth;
    border-radius: 16px;
    background: #ffffff;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0;
}

.site-scroll-window::-webkit-scrollbar {
    display: none;
}

.site-safety-menu .list-group-item {
    padding: 15px 0;
    background: transparent !important;
    border: none;
    border-bottom: 2px solid #eee;
    color: #666;
    font-size: 14px;
    transition: 0.3s;
    font-weight: 500;
}

.site-safety-menu .list-group-item.active {
    color: #000 !important;
    border-bottom: 1px solid #BF1818!important;
    font-weight: 500;
}

.site-menu-number {
    font-size: 16px;
    color: rgba(96, 96, 96, 0.81);
}

.site-safety-menu .list-group-item.active .site-menu-number{
    color: #BF1818;
}

.site-safety-menu .list-group-item-action:not(.active):hover {
    color: #000!important;
    border-bottom: 1px solid #BF1818!important;
    font-weight: 500;
}

.site-safety-menu .list-group-item-action:not(.active)  {
   color: #666!important;
}

.site-safety-menu .list-group-item-action:not(.active) .site-menu-number {
   color: #666!important;
}

.site-safety-menu .list-group-item-action:not(.active):hover .site-menu-number{
    color: #BF1818!important;
}

.site-safety-menu.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px!important;
}

.site-safety-card {
    padding: 20px 20px 7px 20px;
    height: 100%;
    margin-bottom: 0;
}

.site-safety-card h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-top: 16px;
}

.site-safety-card:first-child h3 {
    padding-top: 1px;
}

.site-safety-card p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 24px;
    color: #262731;
}

.site-safety-card img {
   display: block;
    margin: 20px auto 0 auto;
}

.site-safety-card > div {
    min-height: 100%;
    border-top: 1px solid rgba(195, 199, 205, 0.4);
}

.site-safety-card:first-child > div {
    border-top: none;
}

.site-safety-menu .list-group-item {
    padding: 15px 0;
    background: transparent !important;
    border: none;
    border-bottom: 1px solid rgba(96, 96, 96, 0.8);
    color: rgba(96, 96, 96, 0.8);
    font-size: 16px;
    transition: 0.3s;
}

.retro-fms-communication .retro-fms-control-item > div{
    background: rgba(38, 39, 49, 0.96);
}

.retro-fms-communication .retro-fms-control-item > div h3 {
    color: #ffffff;
}

.retro-fms-communication .retro-fms-control-item > div p {
    color: #ffffff;
}

.retro-fms-crew {
    background: #ECEEF1;
}
.resources-text.text-block-icons.retro-fms-crew{
    background: #ECEEF1;
}

.retro-fms-crew .block-icons-item > div{
    background: #FFFFFF;
}

.retro-fms-crew .block-icons-item h3 {
    color: #262731;
    font-weight: 500;
}

.retro-fms-crew .block-icons-item p {
    color: #606060;
}

.retro-fms-crew .block-icons-item > div img{
    width: 28px;
    height: 28px;
}

.ready-to-streamline {
    background: url('/img/design/img-retro-fsm-ready-streamline.jpg') center center no-repeat;
    background-size: cover;
}

.retro-fms-key-benefits #fleetCarousel .carousel-item > div {
    padding: 20px 20px;
    border-radius: 16px;
    min-height: 199px;
    margin-left: 10px;
    margin-right: 10px;
    background: rgba(38, 39, 49, 0.62);
    backdrop-filter: blur(4px);
}

.retro-fms-key-benefits #fleetCarousel .carousel-item > div h3{
    font-size: 16px;
    font-weight: 400;
}

@media(min-width: 768px) {

    .retro-fms-key-benefits {
        background: url('/img/design/img-retro-fms-key-benefits.jpg') center center no-repeat;
    }



    .retro-fms-control-row {
        padding-top: 20px
    }

    .retro-fms-control-item > div h3 {
        color: #262731;
        font-size: 28px;
    }

    .financial-claim-text {

        padding: 40px 30px;

    }

    .site-scroll-window {
        height: 522px;
    }

    .site-safety-card h3 {
        padding-top: 15px;
    }

    .retro-fms-control-item > div p {
        min-height: 79px;
        margin-bottom: 6px;
    }

    .retro-fms-financial-claims strong {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .retro-fms-safety-right {
        padding: 0 0 0 40px;
    }



}

@media(min-width: 992px) {

    .site-safety-card img {
        margin: 0 auto 0 auto;
    }

    .site-scroll-window {
        height: 370px;
    }

    .site-safety-menu .list-group-item {
        padding: 12px 0;
        font-size: 15px;
    }
}

@media(min-width: 1200px) {
    .retro-fms-key-benefits {
        padding-top: 150px;
        padding-bottom: 150px;
    }

    .h-number {
        font-size: 54px;
    }

    .retro-fms-key-benefits #fleetCarousel .carousel-item > div p {
       font-size: 16px;
    }

    .retro-fms-operational-control {
        padding-top: 120px;
        padding-bottom: 100px;
    }

    .retro-fms-control-row {
        padding-top: 30px
    }

    .retro-fms-control-item > div {
        padding: 32px 21px;

    }

    .retro-fms-control-item > div p {
        min-height: 1px;
        margin-bottom: 20px;
    }

    .retro-fms-financial-claims {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .financial-claims-row {
        margin-bottom: 30px;
    }
    .retro-fms-safety {
        padding-top: 120px;
        padding-bottom: 120px;
    }

}


@media(min-width: 1400px) {

    .retro-fms-safety-right {
        padding: 0 0 0 120px;
    }

    .site-safety-card h3 {
        font-size: 28px;
    }

    .site-scroll-window {
        height: 430px;
    }

    .site-safety-menu .list-group-item {
        padding: 15px 0;
        font-size: 16px;
    }

    .site-safety-card p {
        font-size: 20px;
    }

    .overview-block-item {
        padding: 15px 15px;
    }

}


/*Retronet RTMS page*/

/* RETRO.RTMS static hero — the JS-injected video hero was retired (RTMS entry
   removed from the scripts banner injector). A dark field in the homepage hero
   family (#080c16) carries a self-contained, motionless inline SVG pipeline
   motif (.rtms-hero-bg) plus a left-weighted scrim (.rtms-hero-scrim) for
   headline legibility. Page-scoped to .wrap-banner.retro-rtms; the homepage
   (.wrap-banner.main) and FMS/DCS heroes are untouched. No animation anywhere. */
.wrap-banner.retro-rtms {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.retro-rtms .rtms-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.retro-rtms .rtms-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.retro-rtms > nav,
.wrap-banner.retro-rtms > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Vertically-centred hero content, mirroring the homepage hero conventions. */
.wrap-banner.retro-rtms .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.retro-rtms .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
/* RTMS hero type matches the homepage hero's fluid scale. The homepage H1 sizing
   lives in the homepage-specific selector .wrap-banner.main .banner h1, so its
   exact clamp()/line-height are REPLICATED here; the subhead replicates
   .banner .hero-statement; the eyebrow (which the homepage hero doesn't have) is
   made fluid/proportional. Block widened so the longer RTMS headline wraps to
   2-3 clean lines at the larger size. */
.wrap-banner.retro-rtms .hero-rtms-block {
    max-width: 1120px;
}
.wrap-banner.retro-rtms .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.retro-rtms .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.retro-rtms .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.retro-rtms .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* Tiers 2 & 3 REUSE the homepage hero classes (.banner .hero-statement /
   .hero-supporting) for exact type parity; only the measure is widened here so
   the descriptor wraps to ~2 lines across the wide hero block, not a narrow column. */
.wrap-banner.retro-rtms .hero-statement { max-width: 720px; }
.wrap-banner.retro-rtms .hero-supporting { max-width: 980px; }
/* Tier 1 forced two-line break: each line is its own block; line 1 never splits
   mid-phrase at tablet/desktop; natural wrapping is allowed only on small phones
   where nowrap would overflow. */
.wrap-banner.retro-rtms .hero-rtms-h1 .hl1,
.wrap-banner.retro-rtms .hero-rtms-h1 .hl2 { display: block; }
.wrap-banner.retro-rtms .hero-rtms-h1 .hl1 { white-space: nowrap; }
@media (max-width: 575px) {
    .wrap-banner.retro-rtms .hero-rtms-h1 .hl1 { white-space: normal; }
}
.wrap-banner.retro-rtms .hero-rtms-block .btn-main {
    margin-top: clamp(22px, 2.4vw, 30px);
}
@media (max-width: 600px) {
    .wrap-banner.retro-rtms .rtms-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* RETRO.FMS static hero — same approach as the RTMS hero: a dark field in the
   homepage hero family (#080c16) carrying a self-contained, motionless inline
   SVG maritime motif (.fms-hero-bg, concentrated on the right third) plus a
   left-weighted scrim (.fms-hero-scrim) for headline legibility. Page-scoped to
   .wrap-banner.retro-fms; the homepage, RTMS, and DCS heroes are untouched. Type
   matches the homepage hero's fluid scale — the H1 replicates the homepage
   .banner h1 clamp; tiers 2 & 3 reuse .banner .hero-statement / .hero-supporting.
   No animation anywhere. */
.wrap-banner.retro-fms {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.retro-fms .fms-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.retro-fms .fms-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.retro-fms > nav,
.wrap-banner.retro-fms > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Vertically-centred hero content, mirroring the homepage hero conventions. */
.wrap-banner.retro-fms .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.retro-fms .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Widened past the RTMS block's 1120px so the shorter FMS headline
   ("Fleet Management System") sits on ONE line at mainstream desktop widths
   at the homepage type scale; it still breaks cleanly after "Management" only
   at very wide (1920px+) and small-phone widths. */
.wrap-banner.retro-fms .hero-fms-block {
    max-width: 1280px;
}
.wrap-banner.retro-fms .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.retro-fms .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.retro-fms .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.retro-fms .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* Tiers 2 & 3 REUSE the homepage hero classes (.banner .hero-statement /
   .hero-supporting) for exact type parity; only the measure is widened here. */
.wrap-banner.retro-fms .hero-statement { max-width: 720px; }
.wrap-banner.retro-fms .hero-supporting { max-width: 980px; }
/* Tier 1 is a single phrase that stays on one line on desktop and, only when the
   measure forces it, breaks AFTER "Management" (the space between .hl1 and .hl2);
   "Fleet Management" (.hl1) never splits. .hl1/.hl2 are inline (NOT block) so they
   collapse to one line when they fit — unlike the RTMS H1, which is forced to two
   lines. On very small phones .hl1 may wrap to avoid overflow. */
.wrap-banner.retro-fms .hero-fms-h1 .hl1 { white-space: nowrap; }
@media (max-width: 575px) {
    .wrap-banner.retro-fms .hero-fms-h1 .hl1 { white-space: normal; }
}
.wrap-banner.retro-fms .hero-fms-block .btn-main {
    margin-top: clamp(22px, 2.4vw, 30px);
}
/* Re-pin the fixed overlay header on the FMS dark hero (same mechanism the
   homepage and RTMS use; the hero scopes the nav to position:relative for SVG
   layering, so without this the nav would scroll away instead of collapsing to
   the slim solid bar). */
.wrap-banner.retro-fms nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
@media (max-width: 600px) {
    .wrap-banner.retro-fms .fms-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* RETRO.FMS pillar pages — shared dark hero, same family as the FMS hub hero:
   a #080c16 field + a page-specific inline-SVG motif (.pillar-hero-bg) on the
   right third + a left-weighted scrim (.pillar-hero-scrim). REUSED by every FMS
   module pillar; the per-page SVG and breadcrumb are keyed on $url.page in
   header.tpl. Type matches the homepage hero exactly — the H1 replicates the
   homepage .banner h1 clamp; tiers 2 & 3 reuse .banner .hero-statement /
   .hero-supporting. Includes the reusable .hero-breadcrumb. No animation. */
.wrap-banner.retro-fms-pillar { position: relative; overflow-x: clip; background: #080c16; display: flex; flex-direction: column; }
.wrap-banner.retro-fms-pillar .pillar-hero-bg { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; box-sizing: border-box; z-index: 0; display: block; pointer-events: none; }
.wrap-banner.retro-fms-pillar .pillar-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%); }
.wrap-banner.retro-fms-pillar > nav,
.wrap-banner.retro-fms-pillar > .banner-wrap { position: relative; z-index: 10; }
.wrap-banner.retro-fms-pillar .banner-wrap { flex: 1 1 auto; min-height: 100vh; min-height: 100svh; flex-direction: column; justify-content: center; padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px); }
.wrap-banner.retro-fms-pillar .banner { height: auto; margin: 0 auto; box-sizing: border-box; }
.wrap-banner.retro-fms-pillar .hero-pillar-block { max-width: 1220px; }
.wrap-banner.retro-fms-pillar .hero-eyebrow { margin: 0 0 clamp(14px, 1.4vw, 20px); font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; }
.wrap-banner.retro-fms-pillar .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.retro-fms-pillar .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.retro-fms-pillar .banner h1 { font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem); line-height: 1.04; margin-bottom: clamp(22px, 2.4vw, 32px); text-wrap: balance; overflow-wrap: break-word; }
.wrap-banner.retro-fms-pillar .hero-statement { max-width: 720px; }
.wrap-banner.retro-fms-pillar .hero-supporting { max-width: 980px; }
.wrap-banner.retro-fms-pillar .hero-pillar-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
.wrap-banner.retro-fms-pillar nav.navbar { position: fixed !important; z-index: 1000 !important; }
@media (max-width: 600px) {
    .wrap-banner.retro-fms-pillar .pillar-hero-scrim { background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80)); }
}
/* Reusable dark-field hero breadcrumb (above the eyebrow on pillar pages). */
.hero-breadcrumb { margin: 0 0 clamp(16px, 1.6vw, 22px); font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.92rem); line-height: 1.4; }
.hero-breadcrumb a { color: rgba(244, 246, 249, 0.72); text-decoration: none; transition: color .2s ease; }
.hero-breadcrumb a:hover { color: #ffffff; }
.hero-breadcrumb .hb-sep { margin: 0 9px; color: #5d6878; }
.hero-breadcrumb .hb-current { color: #8a93a3; }
/* Bottom-CTA secondary back link (pillar pages). */
.pdp-cta-back { display: block; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: #5d6878; text-decoration: none; transition: color .2s ease; }
.pdp-cta-back:hover { color: #bf1818; }

/* Shared dark CTA closer (_cta-dark.tpl — RTMS, FMS hub, all pillars).
   REPLICATES the homepage .modernize field values exactly (same #0a121c
   background, 100px/150px rhythm, relative + overflow hidden) and reuses the
   generic .cta-abstract/.cta-scrim layers; the homepage rules themselves are
   untouched. Sits OUTSIDE the white/grey band chain as the page's dark
   closer, exactly as on the homepage. Content overrides adapt the .pdp-cta
   block for the dark field: white heading, the standard red button, and a
   muted-white back link that brightens on hover. */
.cta-dark {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #0a121c;
}
.cta-dark .container { position: relative; z-index: 2; }
.cta-dark .pdp-cta-heading { color: #ffffff; }
.cta-dark .pdp-cta-back { color: rgba(244, 246, 249, 0.65); }
.cta-dark .pdp-cta-back:hover { color: #ffffff; }
@media (min-width: 1200px) {
    .cta-dark { padding-top: 150px; padding-bottom: 150px; }
}

.retro-rtms-operations-img {
    background: url('/img/design/img-retro-rtms-operation.jpg') center center no-repeat;
    background-size: cover;
}

.text-block-icons.resources-text.retro-rtms-what {
    background: #1A325F;
}

.retro-rtms-what h2 {
    color: #ffffff;
}

.retro-rtms-what .block-icons-item > div {
    background: #F6F7F9;
}

.retro-rtms-what .block-icons-item > div img {
    width: 48px;
    height: 48px;
}

.retro-rtms-support-terminal .ul li {
    font-size: 16px;
    margin-bottom: 20px;
}

.retro-rtms-support-terminal strong {
    font-size: 22px;
    margin-bottom: 21px;
}

.how-we-think.retroner-rtms-key-platform {
    background: url('/img/design/img-retro-rtms-key-platform.jpg') center center no-repeat;
    background-size: cover;
}

.how-we-think.retroner-rtms-key-platform .how-we-think-block > div {
    background: rgba(38, 39, 49, 0.51);
    backdrop-filter: blur(6px);
}

.retro-rtms-operational {
    background: #F4F4F4;
}

.retro-rtms-compliance .retro-fms-control-item > div {
    background: #C3C7CD;
}

.retro-rtsm-operations-img {
    background: url('/img/design/img-retro-rtms-coordinated.jpg') center center no-repeat;
    background-size: cover;
}

.retroner-rtsm-upgrade {
    background: url('/img/design/img-retro-rtms-upgrade.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {
    .retro-rtms-support-terminal strong{
        font-size: 20px;
        margin-bottom: 10px;
    }
}

@media(min-width: 992px) {
    .retro-rtms-support-terminal .ul li {
        margin-bottom: 14px;
    }
    .retro-rtms-support-terminal strong {
        font-size: 20px;
        margin-bottom: 16px;
    }
}

@media(min-width: 1200px) {
    .retro-rtms-support-terminal strong {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .retro-rtms-support-terminal .ul li {
        margin-bottom: 17px;
        font-size: 17px;
    }
}

@media(min-width: 1400px) {

    .retro-rtms-support-terminal .ul li {
        margin-bottom: 20px;
        font-size: 20px;
    }
}

/* ==========================================================================
   RETRO.DCS static product hero (page rebuild) — the old JS-injected video
   hero and old section imagery are retired (assets removed; the injector was
   deleted from the scripts). A dark field in the homepage hero family
   (#080c16) carries a self-contained, motionless inline SVG document/stamp
   motif (.dcs-hero-bg) plus a left-weighted scrim (.dcs-hero-scrim) for
   headline legibility. Values REPLICATE the RTMS product hero 1:1 (homepage
   type parity); page-scoped to .wrap-banner.retro-dcs — the homepage and the
   RTMS/FMS heroes are untouched. No animation anywhere. */
.wrap-banner.retro-dcs {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.retro-dcs .dcs-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.retro-dcs .dcs-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.retro-dcs > nav,
.wrap-banner.retro-dcs > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page (the hero scopes the nav to
   position:relative for SVG layering; without this override the nav scrolls
   away instead of collapsing to the slim solid bar — which also puts the
   dropdown toggles off-screen, so the menus appear dead when scrolled). Same
   rule every other dark-hero page block carries (RTMS / FMS hub / pillars). */
.wrap-banner.retro-dcs nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.retro-dcs .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.retro-dcs .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Wider than the RTMS block (1120px, which wants its controlled two-line
   title): 1220px matches the pillar hero measure and keeps the one-line
   "Document Control System" H1 intact at 1440. */
.wrap-banner.retro-dcs .hero-dcs-block { max-width: 1220px; }
.wrap-banner.retro-dcs .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.retro-dcs .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.retro-dcs .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.retro-dcs .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.retro-dcs .hero-statement { max-width: 720px; }
.wrap-banner.retro-dcs .hero-supporting { max-width: 980px; }
.wrap-banner.retro-dcs .hero-dcs-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.retro-dcs .dcs-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}


/*Contacts us page*/

.form-field {
    display: flex;
    flex-direction: column;
}

.field-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

/* (The old dark contact form block was retired 2026-07-05 with the contact
   rebuild; the shared .form-field/.field-label base rules above stay for the
   request-information page until its own rebuild. The light replacements live
   in the .form-light/.form-card pattern near the end of this file.) */

/*Page 404*/

.page-404{
    display: flex;
    flex-direction: column;
    background: url('/img/design/banner-404.jpg') center center no-repeat;
    background-size: cover;
}


/*Request information-page*/

.request-information {
    background: #262731;
}

.inquiries-text-block  h2{
    color: #ffffff;
}
.inquiries-section {
    background-color: #262731;
    color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.inquiries-text-block {
    margin-bottom: 50px;
}

.inquiries-title {
    font-size: 38px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.1;
    color: #ffffff;
}

.inquiries-subtitle {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 35px 0;
    max-width: 420px;
}

.inquiries-list-header {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}

.inquiries-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inquiries-list li {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    padding-left: 20px;
}

.inquiries-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    background-color: #c92323;
}

.inquiries-form {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
}

.field-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
    padding-left: 2px;
}

.field-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    padding: 8px 2px 12px 2px;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s ease;
}

.field-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.field-control:focus {
    border-bottom-color: #ffffff;
}

@media (min-width: 992px) {
    .inquiries-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .inquiries-title {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .inquiries-text-block {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .inquiries-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}


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

.step-item {
    margin-bottom: 10px;
}

.step-header {
    background-color: #f6f7f9;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.step-header:hover {
    background-color: #e2e4e8;
}

.step-header.active {
    background-color: #c3c7cd;
}

.step-title {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.step-icon {
    position: relative;
    width: 20px;
    height: 20px;
}

.step-icon::before,
.step-icon::after {
    content: '';
    position: absolute;
    background-color: #262731;
    transition: transform 0.3s ease;
}

.step-icon::before { top: 0; left: 9px; width: 2px; height: 20px; }
.step-icon::after { top: 9px; left: 0; width: 20px; height: 2px; }

.step-header.active .step-icon::before { transform: rotate(45deg); }
.step-header.active .step-icon::after { transform: rotate(45deg); }

.step-body-inner {
    background-color: #f6f7f9;
    border-radius: 12px;
    padding: 25px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.step-content-pane {
    background-color: #f6f7f9;
    border-radius: 12px;
    padding: 40px;
}

.step-body-inner h3,
.step-content-pane h3 {
    font-size: 20px;
    font-weight: 400;
    color: #262731;
    margin-top: 0;
    margin-bottom: 15px;
}

.step-body-inner p,
.step-content-pane p {
    font-size: 15px;
    color: #606060;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-learn-more {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(195, 199, 205, 0.7);
    border-radius: 10px;
    color: #606060;
    font-size: 15px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-learn-more:hover {
    background-color: #606060;
    color: #ffffff;
}

.page-404 h1 {
    width: 100%!important;
    text-align: center;
}

.page-404  p{
    width: 100%!important;
    text-align: center;
}
.page-404 .banner-wrap {
    display: flex;
    flex-grow:1;
    align-items: center;
}

.page-404 .row {
    width: 100%!important;
    justify-content:center ;
}

.page-404 .row .col-xl-8 {
   text-align: center!important;
   width: 100%!important;
}

.page-404 .row div {
   text-align: center!important;
   width: 100%!important;
}

.page-404  .banner {
    margin-top: -30px !important;
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .how-we-think.retroner-rtms-key-platform .how-we-think-block > div {
        padding: 30px 25px;
    }
}

@keyframes growDown {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}
.animate__growDown {
    animation-name: growDown;
    transform-origin: top center;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes myCustomOvershootScale {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    70% {
        opacity: 1;
        transform: scale(var(--custom-overshoot, 1.15));
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate__myOvershootScale {

    --custom-overshoot: 1.15;
    animation-name: myCustomOvershootScale;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes revealAndScaleDown {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: scale(var(--custom-overshoot, 1.2));
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

.animate__revealAndScaleDown {
    --custom-overshoot: 1.2;
    animation-name: revealAndScaleDown;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;

    overflow: hidden;
}

.radius {
    border-radius: 16px!important;
}

.wrap-banner.main {
    position: relative;
    background-color: #080c16;
}

.banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

@media (max-width: 991px) {
    .banner-video {

        object-position: 50% center;
    }
}

.banner-overlay {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgb(2 10 15 / 64%) 1px, #010e1f5c 1px),
    linear-gradient(90deg, rgb(1 7 11 / 30%) 1px, #031c31 1px),
    radial-gradient(circle, rgba(0, 20, 66, 0.22) 0%, rgb(3 10 22 / 95%) 100%);
    background-size: 0 0,0 0, 100% 100%;
    background-position: center center;
}


.wrap-banner.main > nav,
.wrap-banner.main > .banner-wrap {
    position: relative;
    z-index: 10;
}

.floating-icons-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.floating-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0;
    animation: slowFadeIn 1.5s ease-out forwards;
}

.floating-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}


.icon-1 { top: 20%; left: 15%; animation-delay: 0.2s; }
.icon-2 { bottom: 25%; right: 15%; animation-delay: 0.6s; }
.icon-3 { top: 30%; right: 20%; animation-delay: 1.0s; }
.icon-4 { bottom: 20%; left: 20%; animation-delay: 1.4s; }
.icon-5 { top: 45%; right: 4%; animation-delay: 1.8s; }
.icon-6 { top: 12%; left: 40%; animation-delay: 2.2s; }
.icon-7 { bottom: 18%; right: 30%; animation-delay: 2.6s; }


.icon-1 svg { animation: microPulse 3s ease-in-out infinite 0.2s; }
.icon-2 svg { animation: microPulse 3s ease-in-out infinite 1.5s; }

.icon-3 svg path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: trimPathAnim 4s ease-in-out infinite 1s;
}

.icon-4 svg {
    transform-origin: center center;
    animation: slowRotate 15s linear infinite;
}

@keyframes slowFadeIn {
    0%   { opacity: 0; }
    100% { opacity: .80; }
}

@keyframes microPulse {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 0.4; transform: scale(0.95); }
    80%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes trimPathAnim {
    0%   { stroke-dashoffset: 1500; opacity: 0; }
    10%  { opacity: 1; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    90%  { stroke-dashoffset: 1500; opacity: 1; }
    100% { stroke-dashoffset: 1500; opacity: 0; }
}

@keyframes slowRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes quietPulse {
    0%   { opacity: 0.5; transform: scale(0.98); }
    50%  { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0.5; transform: scale(0.98); }
}

@media (min-width: 768px) {
    .floating-icon {
        position: absolute;
        width: 40px;
        height: 40px;
    }

    .icon-1 { top: 41%; left: 21%; animation-delay: 0.2s; }
    .icon-2 { bottom: 51%; right: 39%; animation-delay: 0.6s; }
    .icon-3 { top: 65%;right: 14%; animation-delay: 1.0s; }
    .icon-4 {  bottom: 25%;left: 30%; animation-delay: 1.4s; }
    .icon-5 {top: 63%; right: 81%; animation-delay: 1.8s; }
    .icon-6 {top: 33%; left: 9%; width: 30px; height: 30px;}
    .icon-7 { right: 10%; bottom: 10%; width: 30px; height: 30px;}
}

@media (min-width: 1400px) {
    .icon-3 { top: 56%;right: 22%; animation-delay: 1.0s; }
    .icon-1 {
        top: 34%;
        left: 26%;
        animation-delay: 0.2s;
    }

}

.icon-1 svg { animation: microPulse 3s ease-in-out infinite 0.2s; }
.icon-2 svg { animation: microPulse 3s ease-in-out infinite 1.5s; }

.icon-3 svg path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: trimPathAnim 4s ease-in-out infinite 1s;
}

.icon-4 svg {
    transform-origin: center center;
    animation: slowRotate 15s linear infinite;
}

.icon-5 svg { animation: microPulse 3s ease-in-out infinite 0.8s; }
.icon-6 svg { animation: quietPulse 3.5s ease-in-out infinite 0.5s; }
.icon-7 svg { animation: quietPulse 4s ease-in-out infinite 2s; }


.wrap-banner.main {
    position: relative;
    /* Horizontal guard without trapping vertical content in a scroll box: clip X,
       keep Y visible so short/landscape viewports grow the page instead of
       clipping the headline/cards. */
    overflow-x: clip;
    overflow-y: visible;
    min-height: 100vh;          /* not a fixed height */
    background-color: #080c16;  /* dark base behind the canvas */
    display: flex;
    flex-direction: column;
}

/* The animated canvas fills the whole hero, behind the nav and content.
   width/max-width:100% + box-sizing guard so the decorative canvas can never
   create horizontal overflow (no horizontal scrollbar at any width). */
.wrap-banner.main #hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.wrap-banner.main .banner-wrap {
    flex: 1 1 auto;             /* fill the space below the nav */
    min-height: 100vh;          /* full-height hero (fallback) */
    min-height: 100svh;         /* small-viewport-safe full height */
    flex-direction: column;     /* BS5 d-flex + align-items-center are already applied */
    justify-content: center;    /* vertically centre the (left-aligned) text block */
    position: relative;
    z-index: 10;
    /* Modest top safe-area so the centred content clears the in-flow nav on short
       screens; the larger bottom space keeps the absolute .explore hint clear and
       nudges the centred block slightly up to offset the nav above. */
    padding: clamp(24px, 6vh, 90px) 0 clamp(72px, 10vh, 140px);
}

/* Homepage hero content: aligned to the SITE content container. The .banner
   element already carries the Bootstrap `.container` class, so we deliberately
   DON'T set max-width or horizontal padding here — it inherits the shared
   .container bounds (responsive max-width capped at 1320px, 12px side padding)
   exactly like the homepage body sections and the nav/logo, so the hero text's
   left edge lines up with them at every width. We override ONLY the .banner base
   rules that would break vertical centering (height:100% and margin-top), leaving
   height:auto and margin:0 auto. NOTE: we must NOT set max-width here — that would
   out-specify and defeat the shared .container cap; box-sizing is a harmless guard. */
.wrap-banner.main .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Fluid headline, left-aligned as before. The clamp ceiling was lowered from
   8.5rem to 7rem (~112px): once the hero adopts the shared 1320px content
   container, the headline measure is the col-xl-8 (~2/3) column. At the old
   8.5rem the big headline wrapped to ~5 lines on 2560px-wide monitors and the
   vertically-centred block pushed its first line up under the nav. 7rem keeps a
   large, impactful headline that wraps to ~3 lines and stays cleanly centred and
   clear of the nav. NOTE: the vw term (1rem + 4.8vw) only reaches this 7rem cap
   at ~2000px+ viewports, so 1920px and every smaller width are UNCHANGED — only
   the very wide/4K end is reined in. overflow-wrap guards against any spill. */
.wrap-banner.main .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    width: auto;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.wrap-banner.main .explore {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .wrap-banner.main .explore {
        bottom: 15px !important;
    }
}

/* Re-pin the fixed overlay header on dark-hero pages whose hero scopes the nav to
   position:relative for layering (.wrap-banner.main > nav / .wrap-banner.retro-rtms
   > nav). Without this, the nav scrolls away with the page and never collapses to
   the slim solid bar on scroll. Same mechanism for homepage and RTMS. */
.wrap-banner.main nav.navbar,
.wrap-banner.retro-rtms nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}



.retro-rtms-what ul li{
    margin-bottom: 10px;
    color: #606060;
}

.retroner-rtms-key-platform .how-we-think-block h3 {
    color: #BF1818;
}

.retroner-rtms-key-platform  .how-we-think-block p {

    font-size: 16px;
}


.banner-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}


.banner-video::-webkit-media-controls {
    display: none !important;
}


/* ===========================================================================
   Phase 4 — Homepage hero: vertical statement + supporting line (text-only)
   Scoped under .banner so it overrides the base p rules. Quiet, secondary
   styling on the dark network animation; must NOT compete with the red
   .btn-main nav button. Homepage-only markup (header.tpl, $url.page eq '').
   The products now live in a dedicated .products section (homepage body);
   the old hero product-card styles were removed with the text-only hero.
   =========================================================================== */

/* Vertical statement, directly under the hero headline */
.banner .hero-statement {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.1rem, 0.65rem + 1.05vw, 1.95rem);
    font-weight: 400;
    line-height: 1.4;
    max-width: 640px;
    margin: 0 0 6px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Homepage-only tier-2 measure. The statement carries an explicit responsive
   break after "replace" (<br class="d-none d-md-inline">, header.tpl), so from
   768px up the second line is the longer one: "manual, error-prone workflows
   with real-time operational control." = 28.63em of Roboto. The em cap scales
   with the element's own clamp size and must stay above that so the forced
   second line never rewraps at any desktop width; below 768px the br is inert
   and the container clamps the measure, so wrapping stays natural. Product/
   pillar heroes keep their own page-scoped 720px overrides and are untouched. */
.wrap-banner.main .hero-statement {
    max-width: 29.5em;
}

/* Supporting sub-statement: dimmer than the statement, readable on the animation */
.banner .hero-supporting {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.92rem, 0.7rem + 0.6vw, 1.3rem);
    font-weight: 400;
    line-height: 1.55;
    max-width: 620px;
    margin: 10px 0 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}



/* ===========================================================================
   Large-screen hero alignment (homepage only). The headline/statement clamps
   above still grow with the viewport, but the hero content MEASURE is now the
   shared Bootstrap .container (capped at 1320px), identical to the homepage body
   sections and the nav/logo. The former 1920px→1440px / 2560px→1600px hero-only
   widening was REMOVED so the hero text's left edge aligns with the sections
   below it on wide/4K monitors instead of sitting further out. */

/* Preserve appearance after removing the universal "* { color }" reset: these
   carousel titles are nested <strong> with no own colour. The reset used to force
   them to #262731; without it they'd inherit Bootstrap's .list-group-item colour
   (~#212529). Re-assert #262731 so they look exactly as before. */
#desktopCarousel .list-group-item strong,
#fleetCarousel .list-group-item strong,
#custom-development-carousel-lg .list-group-item strong {
    color: #262731;
}

/* ===========================================================================
   PRODUCT DETAIL PAGE (PDP) — all-light rebuild, reused by RTMS/FMS/DCS.
   Neutral structural classes (.pdp-/.mod-/.appui-). App-UI panels are
   illustrative HTML/CSS. Reuses existing tokens: .products-eyebrow,
   .browser-frame*, .pn-dark/.pn-red, .btn-main. Brand red #bf1818.
   Status colours: available #2f8b57, near-full #c6881a, on-hold #c5362f,
   settling/neutral #8b94a3. NO .ps-* (frozen) classes are touched.
   =========================================================================== */
.pdp-section { padding: 64px 0; background: #ffffff; }
.pdp-section--alt { background: #f7f8fa; }
@media (min-width: 1200px) { .pdp-section { padding: 86px 0; } }

/* Section headers AND intros run the FULL content width (same left/right edges as
   the content below); no narrow text caps anywhere on the PDP. */
.pdp-head { margin: 0 0 38px; }
.pdp-head .products-eyebrow { margin-bottom: 12px; }
.pdp-h2 {
    margin: 0;
    font-size: clamp(26px, 3.3vw, 34px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: #141a23;
}
.pdp-sub { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #5d6878; }

/* 1 — Lede ----------------------------------------------------------------- */
/* (uses the uniform .pdp-section padding — no ad-hoc override) */
/* Option A — two-column editorial lede: ~40% red-bar statement / ~60% paragraph,
   spanning the full content width, top-aligned; stacks below 640px. */
.pdp-lede-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}
.pdp-lede-statement { min-width: 0; }
.pdp-lede-heading {
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid #bf1818;
    font-size: clamp(22px, 1rem + 1.3vw, 30px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #141a23;
}
.pdp-lede-period { color: #bf1818; }
.pdp-lede-body { min-width: 0; }
.pdp-lede-body p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: #5d6878;
}
.pdp-lede-bold { font-weight: 700; color: #141a23; }
@media (max-width: 640px) {
    .pdp-lede-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* 2 — Credibility band ----------------------------------------------------- */
.pdp-cred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pdp-cred-item { padding: 4px 30px; border-left: 1px solid #e7e9ee; }
.pdp-cred-item:first-child { padding-left: 0; border-left: 0; }
.pdp-cred-stat { display: block; font-size: 20px; font-weight: 700; line-height: 1.22; color: #141a23; }
.pdp-cred-label { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45; color: #5d6878; }
@media (max-width: 880px) {
    .pdp-cred { grid-template-columns: 1fr 1fr; row-gap: 26px; }
    .pdp-cred-item { padding: 0 24px; }
    .pdp-cred-item:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
    .pdp-cred { grid-template-columns: 1fr; }
    .pdp-cred-item { padding: 18px 0 0; border-left: 0; border-top: 1px solid #e7e9ee; }
    .pdp-cred-item:first-child { padding-top: 0; border-top: 0; }
}

/* 3/7/8 — Card grids ------------------------------------------------------- */
.pdp-cards { display: grid; gap: 20px; }
.pdp-cards--4 { grid-template-columns: repeat(4, 1fr); }
.pdp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.pdp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.pdp-card { padding: 24px; border: 1px solid #e7e9ee; border-radius: 14px; background: #ffffff; }
.pdp-card-title { margin: 0 0 13px; font-size: 17px; font-weight: 600; line-height: 1.3; color: #141a23; }
.pdp-card-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #5d6878; }
/* Engagement-model tag chip (custom-development page): a small red-tinted
   uppercase label above the card title. */
.pdp-card-tag { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: rgba(191, 24, 24, 0.10); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #bf1818; }
/* Small muted footnote beneath a card grid. */
.pdp-grid-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #8b94a3; }
@media (max-width: 980px) { .pdp-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .pdp-cards--4, .pdp-cards--3, .pdp-cards--2 { grid-template-columns: 1fr; } }

/* FMS hub module grid — NINE cards reusing the shared .pdp-card look, laid out
   3/2/1 responsive, each with an "Explore" link. ONLY the grid layout, the
   equal-height flex (so the links bottom-align across a row), and the link
   affordance are new; the card look (border, radius, padding, background, title,
   text) is the same .pdp-card / .pdp-card-title / .pdp-card-text used by RTMS. */
.pdp-modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pdp-modgrid .pdp-card { display: flex; flex-direction: column; }
.pdp-modgrid .pdp-card-text { flex: 1 1 auto; }
.pdp-card-link { align-self: flex-start; margin-top: 16px; font-size: 14px; font-weight: 600; color: #bf1818; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.pdp-card-link:hover { border-bottom-color: #bf1818; }
@media (max-width: 980px) { .pdp-modgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdp-modgrid { grid-template-columns: 1fr; } }

/* Red-dash bullet list (reusable) ----------------------------------------- */
.pdp-redlist { margin: 0; padding: 0; list-style: none; }
.pdp-redlist li { position: relative; padding-left: 18px; margin: 0 0 9px; font-size: 14.5px; line-height: 1.5; color: #5d6878; }
.pdp-redlist li:last-child { margin-bottom: 0; }
.pdp-redlist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; border-radius: 2px; background: #bf1818; }

/* 4 — Operational modules: height-matched two-column rows ------------------ */
/* (header uses the uniform .pdp-head margin — no ad-hoc override) */
/* Each module row is ONE soft card wrapping BOTH the white UI panel and the text,
   matching the homepage product card (.product-panel): #f7f8fa fill, 1px #edeef1
   hairline, 18px radius, fluid padding, soft shadow, fluid column gap. */
.mod-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    gap: clamp(20px, 3vw, 40px);
    margin-top: 26px;
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid #edeef1;
    border-radius: 18px;
    background-color: #f7f8fa;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05);
}
.mod-row:first-of-type { margin-top: 6px; }
.mod-row.reverse { grid-template-columns: 1fr 1.15fr; }
.mod-row.reverse .mod-stage { order: 2; }
.mod-cell { min-width: 0; }
/* Stage is now a transparent flex centring box; the white .browser-frame floats
   on the row's grey. min-height keeps an even rhythm across rows (incl. sparse 04/06). */
.mod-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 300px;
}
.mod-text { display: flex; flex-direction: column; justify-content: center; }
.mod-index { font-size: 34px; font-weight: 300; line-height: 1; color: #ccd3db; margin-bottom: 12px; }
.mod-eyebrow { margin-bottom: 10px; }
.mod-heading {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #141a23;
}
.mod-desc { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: #5d6878; }
.mod-bullets li { font-size: 14px; }
@media (max-width: 640px) {
    .mod-row, .mod-row.reverse { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
    .mod-row .mod-cell, .mod-row.reverse .mod-stage { order: 0; }
    .mod-stage { min-height: 0; padding: 0; }
    .mod-text { justify-content: flex-start; }
}

/* Text-first module rows (Technical pillar variant) ------------------------ */
/* The pillar retired its drawn app-UI panels: each row keeps the same grey
   .mod-row card but the inside is a two-column editorial split echoing the
   lede — index + eyebrow + heading left (~38%), body + red-dash bullets right
   (~62%), top-aligned, natural height (no stage, no forced equal heights), no
   left/right alternation. VARIANT-ONLY rules: RTMS keeps the original
   .mod-row/.mod-stage panel layout and no shared rule above changes. */
.mod-row-text { grid-template-columns: 38fr 62fr; column-gap: 48px; align-items: start; }
.mod-row-text .modt-lead,
.mod-row-text .modt-body { min-width: 0; }
.mod-row-text .modt-badge { display: inline-block; }
@media (max-width: 767.98px) {
    .mod-row-text { grid-template-columns: 1fr; row-gap: 16px; }
}

/* App-UI panels (inside reused .browser-frame) ----------------------------- */
.appui { width: 100%; max-width: 520px; }
/* min-height lifts the shorter panels so each frame closely matches its paired
   text column (gap ~= stage padding); taller panels (gauges) grow past it. */
.appui-body { padding: 16px 16px 18px; background: #ffffff; min-height: 300px; box-sizing: border-box; display: flex; flex-direction: column; }
.appui-body > :last-child { margin-bottom: 0; }
.appui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.appui-head--stack { align-items: flex-start; }
.appui-title { font-size: 14px; font-weight: 700; line-height: 1.2; color: #141a23; }
.appui-sub { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: #8b94a3; }
.appui-chip { padding: 3px 9px; border-radius: 999px; background: #eef1f5; border: 1px solid #e2e6ec; font-size: 10.5px; font-weight: 600; color: #5d6878; white-space: nowrap; }
.appui-pill { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.appui-pill.is-green { background: #e7f3ec; color: #2f8b57; border: 1px solid #cde7d7; }

/* status fills */
.appui-gauge-fill.is-available, .appui-legend-item i.is-available { background: #2f8b57; }
.appui-gauge-fill.is-nearfull, .appui-legend-item i.is-nearfull { background: #c6881a; }
.appui-gauge-fill.is-onhold, .appui-legend-item i.is-onhold { background: #c5362f; }
.appui-gauge-fill.is-settling, .appui-legend-item i.is-settling { background: #8b94a3; }

/* 01 — tank gauges */
.appui-gauges { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-bottom: 14px; }
.appui-gauge { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.appui-gauge-track { position: relative; width: 100%; max-width: 26px; height: 128px; display: flex; align-items: flex-end; background: #eef1f5; border: 1px solid #e2e6ec; border-radius: 5px; overflow: hidden; }
.appui-gauge-fill { width: 100%; }
.appui-gauge-id { margin-top: 6px; font-size: 9.5px; font-weight: 700; color: #141a23; white-space: nowrap; }
.appui-gauge-meta { font-size: 8.5px; color: #8b94a3; white-space: nowrap; }
.appui-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.appui-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #5d6878; }
.appui-legend-item i { width: 9px; height: 9px; border-radius: 2px; }
.appui-kpis { display: flex; gap: 10px; }
.appui-kpi { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: #f7f8fa; border: 1px solid #eef1f5; }
.appui-kpi b { display: block; font-size: 16px; line-height: 1.1; color: #141a23; }
.appui-kpi span { font-size: 10px; color: #8b94a3; }

/* tables */
.appui-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.appui-table th { text-align: left; padding: 0 8px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8b94a3; border-bottom: 1px solid #eef1f5; }
.appui-table td { padding: 11px 8px; font-size: 12px; color: #3f4754; border-bottom: 1px solid #f1f3f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appui-table tbody tr:last-child td { border-bottom: 0; }
.appui-table--prop th:nth-child(4) { width: 34px; text-align: center; }
.appui-table--prop td.appui-ok { text-align: center; color: #2f8b57; font-weight: 700; }
.appui-foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid #eef1f5; font-size: 11px; color: #8b94a3; }

.appui-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.4; }
.appui-tag.is-green { background: #e7f3ec; color: #2f8b57; }
.appui-tag.is-amber { background: #fbf1df; color: #c6881a; }
.appui-tag.is-red { background: #fae9e7; color: #c5362f; }
.appui-tag.is-grey { background: #eef1f5; color: #5d6878; }

/* 03 — invoice */
.appui-lines { margin-bottom: 14px; }
.appui-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13px; color: #5d6878; border-bottom: 1px solid #f1f3f6; }
.appui-line b { font-weight: 600; color: #141a23; }
.appui-line--total { margin-top: 2px; padding-top: 10px; border-bottom: 0; border-top: 1.5px solid #e2e6ec; font-size: 14px; }
.appui-line--total span { font-weight: 600; color: #141a23; }
.appui-line--total b { font-size: 15px; }
.appui-match { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.appui-match-badge { padding: 3px 9px; border-radius: 6px; background: #e7f3ec; color: #2f8b57; font-size: 11px; font-weight: 700; }
.appui-match-label { font-size: 11px; font-weight: 600; color: #8b94a3; }

/* 04/05 — segment bars */
.appui-seg-label { margin: 4px 0 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8b94a3; }
.appui-seg { display: flex; width: 100%; height: 34px; margin-bottom: 6px; border: 1px solid #e2e6ec; border-radius: 8px; overflow: hidden; }
.appui-seg-fill { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 4px; font-size: 11px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appui-seg-fill.is-inbond { background: #3f5d77; }
.appui-seg-fill.is-dutypaid { background: #8b94a3; }
.appui-seg--recipe .is-r1 { background: #2f6f8b; }
.appui-seg--recipe .is-r2 { background: #5b8fa8; }
.appui-seg--recipe .is-r3 { background: #9bb6c4; }

/* 5 — measurement engine flow --------------------------------------------- */
.pdp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; }
.pdp-step { display: flex; flex-direction: column; justify-content: center; padding: 24px; border: 1px solid #e7e9ee; border-radius: 14px; background: #ffffff; }
.pdp-step--accent { border-color: #bf1818; box-shadow: inset 0 0 0 1px #bf1818; }
.pdp-step-key { margin-bottom: 7px; font-size: 15px; font-weight: 700; color: #141a23; }
.pdp-step--accent .pdp-step-key { color: #bf1818; }
.pdp-step-desc { font-size: 13.5px; line-height: 1.4; color: #3f4754; }
.pdp-step-sub { margin-top: 7px; font-size: 12px; color: #8b94a3; }
.pdp-flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: #c2c7d0; }
@media (max-width: 760px) {
    .pdp-flow { grid-template-columns: 1fr; gap: 8px; }
    .pdp-flow-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* 6 — integrations (data in/out) ------------------------------------------ */
.pdp-io { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; margin-bottom: 24px; }
.pdp-io-col { padding: 22px; border: 1px solid #e7e9ee; border-radius: 14px; background: #ffffff; }
.pdp-io-col--accent { border-color: #bf1818; box-shadow: inset 0 0 0 1px #bf1818; }
.pdp-io-label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #141a23; }
.pdp-io-col--accent .pdp-io-label { color: #bf1818; }
.pdp-io-list { margin: 0; padding: 0; list-style: none; }
.pdp-io-list li { padding: 6px 0; font-size: 13.5px; line-height: 1.45; color: #5d6878; border-top: 1px solid #f1f3f6; }
.pdp-io-list li:first-child { border-top: 0; }
.pdp-io-arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: #c2c7d0; }
@media (max-width: 760px) {
    .pdp-io { grid-template-columns: 1fr; gap: 8px; }
    .pdp-io-arrow { transform: rotate(90deg); padding: 2px 0; }
}
.pdp-note { margin: 0; padding: 14px 0 14px 18px; border-left: 3px solid #bf1818; font-size: 14px; line-height: 1.55; color: #5d6878; }

/* 7 — security row --------------------------------------------------------- */
.pdp-security { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.pdp-security li { margin-bottom: 0; }
@media (min-width: 900px) { .pdp-security { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .pdp-security { grid-template-columns: 1fr; } }

/* 8 — standards strip ------------------------------------------------------ */
.pdp-standards { margin: 28px 0 0; padding: 12px 0 12px 18px; border-left: 3px solid #bf1818; font-size: 14.5px; font-weight: 500; color: #141a23; }

/* 9 — implementation steps ------------------------------------------------- */
.pdp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pdp-impl-step { padding: 22px; border: 1px solid #e7e9ee; border-radius: 14px; background: #ffffff; }
.pdp-impl-num { display: block; margin-bottom: 12px; font-size: 26px; font-weight: 300; line-height: 1; color: #ccd3db; }
.pdp-impl-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #141a23; }
.pdp-impl-title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.pdp-impl-title a:hover { color: #bf1818; border-bottom-color: #bf1818; }
@media (max-width: 860px) { .pdp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pdp-steps { grid-template-columns: 1fr; } }

/* 10 — FAQ (reuses .faq-open-block / .block-opened toggle in scripts-1.09.js) */
.pdp-faq { border-top: 1px solid #e7e9ee; }
.faq-open-block { border-bottom: 1px solid #e7e9ee; cursor: pointer; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.faq-q h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: #141a23; }
.faq-ico { width: 18px; height: 18px; flex: none; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a p { margin: 0; padding: 0 40px 22px 0; font-size: 15px; line-height: 1.6; color: #5d6878; }
.faq-open-block.block-opened .faq-a { max-height: 360px; }

/* 11 — bottom CTA (page-specific) ----------------------------------------- */
/* (uses the uniform .pdp-section padding — no ad-hoc override) */
/* (.pdp-cta cap removed — heading + button span the full container width) */
.pdp-cta-heading { margin: 0 0 26px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #141a23; }

/* ===========================================================================
   Homepage — Custom Application Development section (directly after the
   products showcase, before Who we serve). Standard section head
   (.products-eyebrow + .products-title) and the shared .container; chips
   reuse .pdp-card-tag; the Explore link reuses .serve-link, right-aligned.
   Band colour is a faint brand-red wash (#fcf5f5): the white showcase above
   and the grey Who we serve (#F6F7F9) below leave no legal white/grey here,
   and the wash keeps the section's red-tinted capability cards on-family
   (their rgba fills composite over it, so card/band contrast is unchanged).
   Cards: 14px radius to match .pdp-card, no accent bars; 4-across >=992,
   2-across >=576, stacked below.
   =========================================================================== */
.custom-dev {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #fcf5f5;
}
.cad-intro {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #606060;
}
.cad-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}
.cad-chips .pdp-card-tag { margin: 0; }
.cad-what {
    margin: 34px 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8b94a3;
}
.cad-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 576px) {
    .cad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .cad-grid { grid-template-columns: repeat(4, 1fr); }
}
.cad-card {
    padding: 22px;
    background: rgba(191, 24, 24, 0.045);
    border: 1px solid rgba(191, 24, 24, 0.14);
    border-radius: 14px;
}
.cad-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #141a23;
}
.cad-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #5d6878;
}
.cad-explore {
    display: flex;
    justify-content: flex-end;
}
.cad-explore .serve-link { margin-top: 30px; }

/* Who we serve — muted custom-development pointer beneath the industries
   link. The inline link needs its own colour: the global `a` rule sets no
   colour, so it would fall through to Bootstrap's blue. */
.serve-beyond {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #606060;
}
.serve-beyond a {
    color: #bf1818;
    border-bottom: 1px solid rgba(191, 24, 24, 0.35);
    transition: border-color .2s ease;
}
.serve-beyond a:hover {
    border-bottom-color: #bf1818;
}

/* Experience stats — four values across on desktop (col-lg-3). The 55px
   value size was set for three columns; step it down at >=992 so the widest
   value ("100+ vessels") fits a quarter column at 1280 without wrapping. */
@media (min-width: 992px) {
    .experience-item strong { font-size: 42px; }
}
@media (min-width: 1400px) {
    .experience-item strong { font-size: 48px; }
}


/* ===========================================================================
   ABOUT — dark company hero + body pieces (rebuilt 2026-07-04 on the locked
   design system; architecture mirrors .wrap-banner.retro-dcs). Hero: static
   inline SVG footprint motif (three concentric-ringed location nodes, two
   dashed route arcs, one tick-row, single glow) on #080c16 with a left-heavy
   scrim; type reuses the homepage-parity hero classes (.hero-eyebrow,
   scoped .banner h1 clamp, .hero-statement/.hero-supporting with the shared
   720/980 measures). Body: story text on a comfortable measure and the quiet
   two-row "what we make" strip; everything else reuses pdp-* pieces.
   =========================================================================== */
.wrap-banner.about {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.about .about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.about .about-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.about > nav,
.wrap-banner.about > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries (RTMS / FMS hub / pillars / DCS / custom-development). */
.wrap-banner.about nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.about .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.about .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.about .hero-about-block { max-width: 1220px; }
.wrap-banner.about .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.about .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.about .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.about .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.about .hero-statement { max-width: 720px; }
.wrap-banner.about .hero-supporting { max-width: 980px; }
.wrap-banner.about .hero-about-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.about .about-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* Our story — full-width header (pdp-head), then the narrative on a
   comfortable reading measure. */
.about-story-text p {
    margin: 0 0 18px;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.65;
    color: #5d6878;
}
.about-story-text p:last-child { margin-bottom: 0; }

/* What we make — quiet two-row pointer strip: body-size rows, subtle divider,
   the standard dark-RETRO / red-code product treatment, and the muted-red
   inline practice link. Tighter band than the uniform pdp padding on purpose. */
.about-make {
    padding-top: 44px;
    padding-bottom: 44px;
}
.about-make-row {
    margin: 0;
    padding: 16px 0;
    font-size: 17px;
    line-height: 1.6;
    color: #5d6878;
}
.about-make-row + .about-make-row { border-top: 1px solid #e7e9ee; }
.about-make-row .amk-dark { color: #101828; font-weight: 700; }
.about-make-row .amk-red { color: #bf1818; font-weight: 700; }
.about-make-product { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.about-make-product:hover { border-bottom-color: rgba(191, 24, 24, 0.5); }
.about-make-link {
    color: #bf1818;
    border-bottom: 1px solid rgba(191, 24, 24, 0.35);
    transition: border-color .2s ease;
}
.about-make-link:hover { border-bottom-color: #bf1818; }


/* ===========================================================================
   INDUSTRIES — dark hero + text-first industry rows (rebuilt 2026-07-04 on
   the locked design system; architecture mirrors .wrap-banner.retro-dcs).
   Hero: static inline-SVG sector silhouettes on one thin ground line — a
   storage tank with domed top and dashed level line, a vessel hull with
   bridge block, and a tower crane (mast, jib, counter-jib, hook) — faint
   brand-red strokes, small red accent dots, single glow on #080c16 behind
   the standard left-heavy scrim. Type reuses the homepage-parity hero
   classes; the H1 forces its two lines via the RTMS .hl1/.hl2 block-span
   pattern from 576px up and wraps naturally below. Body reuses pdp-* and
   the pillars' .mod-row-text cards; only the in-card explore-link spacing
   is new.
   =========================================================================== */
.wrap-banner.industries {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.industries .industries-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.industries .industries-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.industries > nav,
.wrap-banner.industries > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries (RTMS / FMS hub / pillars / DCS / custom-dev / About). */
.wrap-banner.industries nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.industries .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.industries .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.industries .hero-industries-block { max-width: 1220px; }
.wrap-banner.industries .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.industries .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.industries .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.industries .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    overflow-wrap: break-word;
}
/* Forced two-line H1 from 576px up (each phrase its own block line, per the
   RTMS pattern); below 576px the spans stay inline and wrap naturally. */
@media (min-width: 576px) {
    .wrap-banner.industries .hero-industries-h1 .hl1,
    .wrap-banner.industries .hero-industries-h1 .hl2 { display: block; }
}
.wrap-banner.industries .hero-statement { max-width: 720px; }
.wrap-banner.industries .hero-supporting { max-width: 980px; }
.wrap-banner.industries .hero-industries-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.industries .industries-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* Industry rows: the row's red explore link sits tight under the bullets
   (the shared .serve-link carries 36px of top margin for section-level use;
   no pillar row contains a .serve-link, so this is industries-only in
   practice). */
.mod-row-text .serve-link { margin-top: 18px; }


/* ===========================================================================
   PARTNERS — dark hero + honest partnership body (rebuilt 2026-07-04 on the
   locked design system; architecture mirrors .wrap-banner.retro-dcs). Hero:
   static inline-SVG venture motif — two concentric-ringed nodes joined by a
   horizontal connector, a short riser to one brighter red-outlined module
   rectangle (the co-built product), red node dots, single glow on #080c16
   behind the standard left-heavy scrim. Type reuses the homepage-parity hero
   classes with the shared 720/980 measures. Body reuses pdp-* wholesale
   (lede, cred, cards, flow steps, FAQ); only the honesty-note divider under
   the partner-doors grid is new.
   =========================================================================== */
.wrap-banner.partners {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.partners .partners-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.partners .partners-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.partners > nav,
.wrap-banner.partners > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.partners nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.partners .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.partners .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.partners .hero-partners-block { max-width: 1220px; }
.wrap-banner.partners .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.partners .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.partners .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.partners .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.partners .hero-statement { max-width: 720px; }
.wrap-banner.partners .hero-supporting { max-width: 980px; }
.wrap-banner.partners .hero-partners-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.partners .partners-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* Partner-doors honesty note: the shared .pdp-grid-note, closed by a subtle
   divider under it. */
.partners-note {
    padding-bottom: 24px;
    border-bottom: 1px solid #e7e9ee;
}


/* ===========================================================================
   DATA MIGRATION — dark hero + service-page body (rebuilt 2026-07-04 on the
   locked design system; architecture mirrors .wrap-banner.retro-dcs; this
   page defines the service-page template Training & Implementation and
   Operational Data Building will reuse). Hero: static inline-SVG migration
   motif — legacy table sheet, dashed pipeline, red-outlined diamond
   checkpoint with a check mark, database cylinder, red joint dots — single
   glow on #080c16 behind the standard left-heavy scrim. Type reuses the
   homepage-parity hero classes with the shared 720/980 measures. Body
   reuses pdp-*/mod-* wholesale; only the quiet boundary-note band is new.
   =========================================================================== */
.wrap-banner.data-migration {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.data-migration .dm-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.data-migration .dm-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.data-migration > nav,
.wrap-banner.data-migration > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.data-migration nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.data-migration .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.data-migration .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.data-migration .hero-dm-block { max-width: 1220px; }
.wrap-banner.data-migration .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.data-migration .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.data-migration .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.data-migration .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.data-migration .hero-statement { max-width: 720px; }
.wrap-banner.data-migration .hero-supporting { max-width: 980px; }
.wrap-banner.data-migration .hero-dm-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.data-migration .dm-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* Boundary note — a quiet white band between the method rows and the FAQ:
   modest heading (reuses .mod-heading), one capped paragraph, one link. */
.dm-boundary {
    padding-top: 48px;
    padding-bottom: 48px;
}
.dm-boundary-p {
    margin: 10px 0 0;
    max-width: 860px;
    font-size: 16px;
    line-height: 1.6;
    color: #5d6878;
}
.dm-boundary .serve-link { margin-top: 22px; }

/* ============================================================================
   OPERATIONAL DATA BUILDING — dark hero (mirrors the Data Migration hero
   block above; homepage-parity fluid type). The motif SVG (.odb-hero-bg)
   and scrim are emitted by header.tpl's operational-data-building branch.
   ============================================================================ */
.wrap-banner.operational-data-building {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.operational-data-building .odb-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.operational-data-building .odb-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.operational-data-building > nav,
.wrap-banner.operational-data-building > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.operational-data-building nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.operational-data-building .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.operational-data-building .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.operational-data-building .hero-odb-block { max-width: 1220px; }
.wrap-banner.operational-data-building .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.operational-data-building .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.operational-data-building .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.operational-data-building .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.operational-data-building .hero-statement { max-width: 720px; }
.wrap-banner.operational-data-building .hero-supporting { max-width: 980px; }
.wrap-banner.operational-data-building .hero-odb-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.operational-data-building .odb-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* When-you-need-this list — a standalone .pdp-redlist promoted to section
   scale (the in-row .mod-bullets variant stays at its smaller size). */
.odb-need-list { margin-top: 6px; }
.odb-need-list li {
    padding-left: 22px;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================================
   TRAINING & IMPLEMENTATION — dark hero (mirrors the Data Migration / ODB
   hero blocks above; homepage-parity fluid type). The motif SVG (.ti-hero-bg)
   and scrim are emitted by header.tpl's training-implementation branch.
   ============================================================================ */
.wrap-banner.training-implementation {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.training-implementation .ti-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.training-implementation .ti-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.training-implementation > nav,
.wrap-banner.training-implementation > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.training-implementation nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.training-implementation .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.training-implementation .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.training-implementation .hero-ti-block { max-width: 1220px; }
.wrap-banner.training-implementation .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.training-implementation .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.training-implementation .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.training-implementation .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.training-implementation .hero-statement { max-width: 720px; }
.wrap-banner.training-implementation .hero-supporting { max-width: 980px; }
.wrap-banner.training-implementation .hero-ti-block .btn-main { margin-top: clamp(22px, 2.4vw, 30px); }
@media (max-width: 600px) {
    .wrap-banner.training-implementation .ti-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* Connector band's twin links (Data Migration + ODB) — one row that wraps on
   narrow screens; overrides the boundary note's single-link top margin. */
.ti-connector-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    margin-top: 22px;
}
.ti-connector-links .serve-link { margin-top: 0; }

/* ============================================================================
   CONTACT — dark hero (mirrors the service-page hero blocks above;
   homepage-parity fluid type; NO hero CTA — the page itself is the action).
   The motif SVG (.contact-hero-bg) and scrim come from header.tpl's
   contact-us branch.
   ============================================================================ */
.wrap-banner.contact-us {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.contact-us .contact-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.contact-us .contact-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.contact-us > nav,
.wrap-banner.contact-us > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.contact-us nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.contact-us .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.contact-us .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.contact-us .hero-contact-block { max-width: 1220px; }
.wrap-banner.contact-us .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.contact-us .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.contact-us .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.contact-us .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.contact-us .hero-statement { max-width: 720px; }
.wrap-banner.contact-us .hero-supporting { max-width: 980px; }
@media (max-width: 600px) {
    .wrap-banner.contact-us .contact-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* ============================================================================
   CONTACT BODY — editorial split: details left (~40%), form card right
   (~60%); stacks below 992px (details first, then the form).
   ============================================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    column-gap: 56px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .contact-grid { grid-template-columns: 1fr; row-gap: 34px; }
}
.contact-reach .products-eyebrow { margin-bottom: 22px; }
.contact-reach-item { margin: 0 0 22px; }
.contact-reach-label {
    display: block;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #141a23;
}
.contact-reach-value,
.contact-reach-value a {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5d6878;
    text-decoration: none;
    transition: color .18s ease;
}
.contact-reach-value a:hover { color: #bf1818; }
.contact-reply-note {
    margin: 26px 0 0;
    font-size: 13.5px;
    color: #8b94a3;
}
/* Quiet router note — body-size with a subtle divider above; the demo link is
   the brand-red text link. */
.contact-router {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e7e9ee;
}
.contact-router p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #5d6878;
}
.contact-router a {
    color: #bf1818;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.contact-router a:hover { color: #ef5350; }

/* ============================================================================
   SHARED LIGHT-FORM PATTERN (.form-card / .form-light) — the site's standard
   light form language: grey card in the .pdp-card grammar, white inputs with
   visible labels, red primary button. Introduced with the contact rebuild;
   Request Information reuses it next build. Field internals (ids, names,
   honeypot, captcha, success/error toggles) are untouched by this pattern.
   ============================================================================ */
.form-card {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid #e7e9ee;
    border-radius: 14px;
    background: #f7f8fa;
}
.form-light { display: flex; flex-direction: column; gap: 22px; }
.form-light .form-field { display: flex; flex-direction: column; }
.form-light .field-label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #141a23;
}
.form-light .field-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8dde4;
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #141a23;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-light .field-input::placeholder { color: #9aa3b0; }
.form-light .field-input:focus {
    border-color: #bf1818;
    box-shadow: 0 0 0 3px rgba(191, 24, 24, 0.08);
}
.form-light .contact-form-error { font-size: 14.5px; }
/* Success state — same card, light type; ids/toggles owned by js/contact.js. */
.form-light-success .form-success-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #141a23;
}
.form-light-success .form-success-text {
    margin: 0 0 18px;
    max-width: 560px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5d6878;
}

/* ============================================================================
   DOCUMENT SHELL (privacy / terms / security) — one shared reading-document
   treatment: slim dark title band continuous with the solid non-hero header,
   a single white body (deliberate exemption from the marketing band
   alternation), a 72ch reading column, and a section TOC that is an inline
   list under the band by default and a slim sticky right rail at >=992px.
   The band markup is templates/_doc-band.tpl; the TOC active state is set by
   js/doc-toc-1.00.js.
   ============================================================================ */
.wrap-banner.without-banner.doc-page { padding-top: 0; }
.doc-band { background: #080c16; padding: clamp(100px, 13vh, 138px) 0 42px; }
.doc-band .hero-eyebrow {
    margin: 0 0 14px;
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.doc-band .he-w { color: #ffffff; }
.doc-band .he-r { color: #ef5350; }
.doc-h1 {
    margin: 0;
    font-size: clamp(34px, 28px + 1.2vw, 46px);
    line-height: 1.1;
    font-weight: 500;
    color: #ffffff;
}
.doc-updated { margin: 12px 0 0; font-size: 13.5px; color: #8a93a3; }

.doc-body { background: #ffffff; padding: 44px 0 90px; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.doc-article { max-width: 72ch; min-width: 0; }
.doc-section { scroll-margin-top: 100px; padding-top: 8px; margin: 0 0 40px; }
.doc-section:last-child { margin-bottom: 0; }
.doc-h2 { margin: 0 0 18px; font-size: 22px; font-weight: 600; color: #141a23; }
.doc-num { color: #bf1818; margin-right: 8px; }
.doc-article h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 600; color: #141a23; }
.doc-article p,
.doc-article li { font-size: 15px; line-height: 1.7; color: #454f5d; }
.doc-article p { margin: 0 0 14px; }
.doc-article ul { margin: 0 0 16px; padding-left: 22px; }
.doc-article li { margin: 0 0 6px; }
.doc-article a { color: #bf1818; text-decoration: none; }
.doc-article a:hover { color: #ef5350; }

/* TOC — a contained panel in the site's card language (light card tint,
   1px border, 12px radius), not bare text floating in whitespace. The label
   sits INSIDE the panel; items take the shared item geometry. Hover = light
   neutral fill with darkened text; the current section is red text per the
   menu grammar (light-surface brand red) — no dots, no bars. The PANEL is
   what sticks at >=992px; below that the same panel renders inline. */
.doc-toc {
    margin: 0 0 34px;
    padding: 16px;
    background: #f6f7f9;
    border: 1px solid #e7e9ee;
    border-radius: 12px; /* the compact soft-panel radius (.step-header family) */
}
.doc-toc-label {
    display: block;
    margin: 0 0 10px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b94a3;
}
.doc-toc a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #5d6878;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.doc-toc-num {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #9aa3b0;
}
.doc-toc a:hover { background: rgba(20, 26, 35, 0.05); color: #141a23; }
.doc-toc a.is-current { color: #bf1818; font-weight: 600; }
.doc-toc a.is-current .doc-toc-num { color: #bf1818; }
@media (min-width: 992px) {
    /* Docs layout, final: left TOC rail + reading column as ONE fixed-width
       pair centered in the viewport (rail 240px + 64px gutter + 72ch column;
       ch measured on this wrapper's inherited body font — the same basis as
       the article's own 72ch cap, so the column fills its track exactly). */
    .doc-layout {
        max-width: calc(240px + 64px + 72ch);
        margin-inline: auto;
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 64px;
    }
    .doc-toc {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 101px; /* 77px slim scrolled bar + 24px clearance */
        align-self: start;
        margin: 0;
    }
    .doc-article { grid-column: 2; grid-row: 1; }
}
/* Site scroll policy. Bootstrap's reboot ships
   `@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth } }`
   (css/bootstrap.min.css), silently making EVERY scroll on EVERY page animated —
   the browser's own scroll restoration on history/reload navigations and any
   programmatic positioning glide to their offset instead of landing there.
   The site's design is smooth ANCHOR scrolling on the three document pages
   only; navigation and restoration must stay native-instant. :root matches
   bootstrap's specificity and this sheet loads after it; the scoped rule
   below out-specifies both. */
:root { scroll-behavior: auto; }
/* Smooth in-page scrolling for the anchor TOC — document pages only. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.doc-band) { scroll-behavior: smooth; }
}

/* ============================================================================
   FOOTER LINK COLUMNS — rebalanced tracks (>=1200px)
   The menus row keeps its bootstrap markup, but the four link columns get
   explicit track shares tuned to their widest text. With bootstrap's
   padding-based gutters the text-to-text clearance between neighbours equals
   track width minus text width (the shared gutter padding cancels), so the
   shares below are what guarantee >=48px clearance at every xl/xxl width
   while "Custom Application Development" stays on one line. Logo column
   keeps its bootstrap 25% — the logo/LinkedIn block must not move. */
@media (min-width: 1200px) {
    footer .container > .row > .footer-menu { flex: 0 0 auto; }
    footer .container > .row > .fcol-products { width: 24%; }
    footer .container > .row > .fcol-services { width: 20%; }
    footer .container > .row > .fcol-company  { width: 12%; }
    footer .container > .row > .fcol-legal    { width: 19%; }
}

/* ============================================================================
   REQUEST INFORMATION — the site's conversion endpoint, rebuilt 2026-07-05 on
   the locked system. Dark hero (motif SVG .ri-hero-bg + scrim come from
   header.tpl's request-information branch; homepage-parity fluid type; NO
   breadcrumb, NO hero CTA and NO closing dark CTA — the page IS the action).
   Body: ONE white section, editorial split — what-happens-next left (~40%),
   the form right (~60%) in the shared .form-card / .form-light pattern.
   ============================================================================ */
.wrap-banner.request-information {
    position: relative;
    overflow-x: clip;
    background: #080c16;
    display: flex;
    flex-direction: column;
}
.wrap-banner.request-information .ri-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.wrap-banner.request-information .ri-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0.78) 30%, rgba(8, 12, 22, 0.45) 55%, rgba(8, 12, 22, 0.20) 78%, rgba(8, 12, 22, 0.50) 100%);
}
.wrap-banner.request-information > nav,
.wrap-banner.request-information > .banner-wrap {
    position: relative;
    z-index: 10;
}
/* Keep the sticky header FIXED on this page — same rule every other dark-hero
   page block carries. */
.wrap-banner.request-information nav.navbar {
    position: fixed !important;
    z-index: 1000 !important;
}
.wrap-banner.request-information .banner-wrap {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 6vh, 90px) 0 clamp(48px, 8vh, 120px);
}
.wrap-banner.request-information .banner {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrap-banner.request-information .hero-ri-block { max-width: 1220px; }
.wrap-banner.request-information .hero-eyebrow {
    margin: 0 0 clamp(14px, 1.4vw, 20px);
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}
.wrap-banner.request-information .hero-eyebrow .he-w { color: #ffffff; }
.wrap-banner.request-information .hero-eyebrow .he-r { color: #ef5350; }
.wrap-banner.request-information .banner h1 {
    font-size: clamp(2.5rem, 1rem + 4.8vw, 7rem);
    line-height: 1.04;
    margin-bottom: clamp(22px, 2.4vw, 32px);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wrap-banner.request-information .hero-statement { max-width: 720px; }
.wrap-banner.request-information .hero-supporting { max-width: 980px; }
@media (max-width: 600px) {
    .wrap-banner.request-information .ri-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.80));
    }
}

/* ============================================================================
   REQUEST INFORMATION BODY — editorial split mirroring .contact-grid: the
   what-happens-next sequence left (~40%) in the established index style
   (.mod-index numerals), then the direct line and a quiet router back to
   Contact; the form right (~60%) in the shared light form card. Stacks below
   992px (sequence first, then the form).
   ============================================================================ */
.ri-grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    column-gap: 56px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .ri-grid { grid-template-columns: 1fr; row-gap: 34px; }
}
.ri-next .products-eyebrow { margin-bottom: 26px; }
.ri-next-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 12px;
    align-items: start;
    margin: 0 0 26px;
}
.ri-next-item .mod-index { margin-bottom: 0; padding-top: 1px; }
.ri-next-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #141a23;
}
.ri-next-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #5d6878;
}
.ri-direct {
    margin: 30px 0 0;
    font-size: 13.5px;
    color: #8b94a3;
}
.ri-direct a {
    color: #5d6878;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease;
    white-space: nowrap;
}
.ri-direct a:hover { color: #bf1818; }
/* Quiet router note — subtle divider above, brand-red text link (mirrors the
   contact page's router back to this page). */
.ri-router {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e7e9ee;
}
.ri-router p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #5d6878;
}
.ri-router a {
    color: #bf1818;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ri-router a:hover { color: #ef5350; }
/* Select + textarea variants of the shared light-form input — new with this
   page (the contact form is text inputs only). The select keeps the exact
   .field-input skin, gains a drawn chevron, and reads placeholder-grey until
   a real option is chosen (required + empty selected option → :invalid). */
.form-light select.field-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d6878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 40px;
    cursor: pointer;
}
.form-light select.field-input:invalid { color: #9aa3b0; }
.form-light select.field-input option { color: #141a23; }
.form-light textarea.field-input {
    min-height: 128px;
    resize: vertical;
    line-height: 1.55;
}
/* Tiny consent note under the submit button. */
.ri-privacy-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #8b94a3;
}
.ri-privacy-note a {
    color: #8b94a3;
    text-decoration: underline;
    transition: color .18s ease;
}
.ri-privacy-note a:hover { color: #bf1818; }