:root {
    --ta-navy: #102a43;
    --ta-blue: #0d6efd;
    --ta-cyan: #00b4db;
    --ta-yellow: #ffd000;
    --ta-dark: #071827;
    --ta-muted: #64748b;
    --ta-radius: 22px;
    --ta-shadow: 0 24px 70px rgba(15, 23, 42, .14);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ta-dark);
    background: #fff;
    text-rendering: optimizeLegibility;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(7, 24, 39, .96);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
}

.logo img {
    max-width: 190px;
    height: auto;
}

.line-1 {
    margin: .25rem 0 0;
    color: #fff;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navigation {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .navigation > li > a {
        display: inline-flex;
        align-items: center;
        padding: .85rem 1rem;
        color: rgba(255, 255, 255, .88);
        font-weight: 600;
        text-decoration: none;
        border-radius: 999px;
        transition: background .2s ease, color .2s ease, transform .2s ease;
    }

        .navigation > li > a:hover {
            color: #fff;
            background: rgba(255, 255, 255, .1);
            transform: translateY(-1px);
        }

.sidebar-brand > a,
.contactBtn,
.btn-primary {
    background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
    border: 0;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(13, 110, 253, .24);
}

.hero-main {
    padding: clamp(3rem, 8vw, 7rem) 1.25rem 2.5rem;
    background: radial-gradient(circle at top left, rgba(0, 180, 219, .18), transparent 34rem), linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

    .hero-main h1,
    .hero h1 {
        max-width: 1100px;
        margin: 0 auto;
        font-size: clamp(2rem, 5vw, 4.4rem);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -.045em;
        color: var(--ta-navy);
    }

.hero h3 {
    color: var(--ta-muted);
    font-weight: 500;
    line-height: 1.6;
}

/* display:inline-block is the whole trick. As a block with margin:auto
   the bar was always centred, so a left-aligned heading got a centred
   underline - and .mx-0 had to be hand-applied in the markup to correct
   it, which then went wrong again wherever a mobile rule re-centred the
   heading. Inline-block puts the bar on a line box, so it simply obeys
   the parent text-align and tracks the heading everywhere, at every
   width, with no helper class.

   The extra space above is margin, not padding: .botm-line draws itself
   with a background, and background paints the padding box, so
   padding-top would have made the bar thicker rather than moving it
   down. */
.botm-line {
    display: inline-block;
    width: 88px;
    height: 5px;
    margin: 2.25rem 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ta-cyan), var(--ta-yellow));
    opacity: 1;
}

.home-carousel {
    overflow: hidden;
    background: #071827;
}

    .home-carousel .carousel-item img {
        width: 100%;
        height: clamp(360px, 58vw, 740px);
        object-fit: cover;
        filter: saturate(1.05) contrast(1.02);
    }

    .home-carousel .caption {
        position: absolute;
        left: clamp(1rem, 6vw, 5rem);
        bottom: clamp(2rem, 7vw, 5.5rem);
        padding: .75rem 1rem;
        color: #fff;
        background: rgba(7, 24, 39, .72);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        backdrop-filter: blur(12px);
        box-shadow: var(--ta-shadow);
    }

.content-section-2,
.content-section {
    padding: clamp(4rem, 8vw, 3.5rem) 0;
}

#services {
    background: radial-gradient(circle at top right, rgba(0, 180, 219, .2), transparent 30rem), linear-gradient(135deg, #102a43 0%, #18385a 100%);
}

.schedule,
.mob-services,
.panel-apps,
.mob-feature {
    border-radius: var(--ta-radius);
    background: rgba(255, 255, 255, .96);
    color: var(--ta-dark);
    box-shadow: var(--ta-shadow);
    border: 1px solid rgba(15, 23, 42, .06);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .schedule:hover,
    .mob-services:hover,
    .panel-apps:hover,
    .mob-feature:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 80px rgba(15, 23, 42, .18);
    }

.schedule {
    padding: 2rem 1.4rem;
    min-height: 230px;
}

.serviceh,
.sub-h,
.caps {
    letter-spacing: -.02em;
    font-weight: 800;
}

.service-icon,
.marketing-icon {
    display: inline-flex;
    width: 74px;
    height: 74px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 16px 35px rgba(13, 110, 253, .28);
}

.panel-apps {
    overflow: hidden;
    margin: 1rem;
}

    .panel-apps .card {
        border: 0;
        background: transparent;
    }

.services-col {
    width: 100%;
    height: auto;
    border-radius: calc(var(--ta-radius) - 6px);
}

.card-content-btn {
    padding: 1.7rem;
}

#apps {
    background: linear-gradient(135deg, #0d5186, #102a43);
    color: #fff;
}

    #apps .hero h1,
    #apps .mob-features,
    #apps label,
    #apps p {
        color: #fff;
    }

.mob-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.mobIcon {
    color: var(--ta-yellow);
}

#marketingdefault {
    background: var(--ta-yellow);
}

.marketing-bg {
    background: linear-gradient(135deg, rgba(255, 208, 0, .94), rgba(255, 238, 128, .92)), url("/images/marketing/marketing-bg.jpg") center / cover no-repeat;
}

.marketingBtn,
.btn-xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .9rem 1.35rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.cta {
    position: relative;
    isolation: isolate;
    padding: clamp(5rem, 10vw, 9rem) 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(6, 19, 31, .76), rgba(9, 48, 80, .56)), url("/images/marketing/warehouse-grid.svg") center / cover no-repeat;
}

    .cta h2 {
        max-width: 760px;
        font-size: clamp(2.2rem, 5vw, 4.5rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

#portfolio {
    background: #f8fbff;
}

.logo-carousel img {
    max-height: 78px;
    width: auto;
    margin: 0 auto;
    filter: grayscale(1);
    opacity: .82;
    transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

    .logo-carousel img:hover {
        filter: grayscale(0);
        opacity: 1;
        transform: scale(1.04);
    }

.map {
    background: linear-gradient(135deg, rgba(7, 24, 39, .93), rgba(16, 42, 67, .88)), url("/images/home/contact-bg.jpg") center / cover no-repeat;
}

.form-control,
.btn-ddp {
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: none;
}

    .form-control:focus {
        border-color: var(--ta-cyan);
        box-shadow: 0 0 0 .22rem rgba(0, 180, 219, .16);
    }

.footer {
    background: #071827;
    color: #fff;
}

    .footer a {
        color: rgba(255, 255, 255, .86);
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
        }

.scroll-to-top {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ta-blue);
    color: #fff;
    border-radius: 999px;
}

@media (max-width: 991px) {
    .navigation {
        display: none;
    }

    .other-links {
        display: none;
    }

    .hero-main {
        text-align: left;
    }

    .home-carousel .caption {
        left: 1rem;
        right: 1rem;
        bottom: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* Bootstrap 5 layout repair over old legacy CSS */
.content,
.fixedFull {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hero-main,
.content-section,
.content-section-2,
#marketingdefault,
.cta,
#portfolio,
#contact {
    position: relative;
    width: 100%;
    clear: both;
}

    .hero-main .container,
    .content-section .container,
    .content-section-2 .container,
    #marketingdefault .container,
    .cta .container,
    #portfolio .container,
    #contact .container {
        max-width: 1180px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

.row {
    margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}

    .row > * {
        float: none !important;
        min-height: 1px;
    }

.home-carousel .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home-carousel .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}

    .home-carousel .carousel-item.active {
        display: block;
    }

.home-carousel img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.schedule,
.mob-services,
.panel-apps {
    float: none !important;
    width: 100%;
    margin: 0;
}

    .panel-apps img,
    .services-col {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

.logo-carousel {
    overflow: hidden;
}

    .logo-carousel .slide {
        padding: 1rem;
    }

    .logo-carousel img {
        max-width: 140px;
        max-height: 80px;
        object-fit: contain;
    }

.slick-prev,
.slick-next {
    z-index: 5;
}

#contact .panel-apps {
    background: #fff;
}

.hidden {
    display: none !important;
}

@media (max-width: 991px) {
    .home-carousel img {
        height: 340px;
    }

    .hero-main {
        text-align: left;
    }
}

/* =====================================================
   FORCE FIX: SiteMaster header using existing old markup
   ===================================================== */

form#form1 .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    background: #071827 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .25) !important;
}

    form#form1 .main-header .overlay,
    form#form1 .main-header .header-upper,
    form#form1 .main-header .wrapNew {
        width: 100% !important;
        background: transparent !important;
    }

    form#form1 .main-header .inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 1280px !important;
        min-height: 92px !important;
        margin: 0 auto !important;
        padding: 14px 28px !important;
        float: none !important;
        clear: both !important;
    }

    form#form1 .main-header .logo-box {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form#form1 .main-header .logo,
    form#form1 .main-header .logo a {
        display: block !important;
        float: none !important;
        text-decoration: none !important;
    }

        form#form1 .main-header .logo img {
            display: block !important;
            width: 190px !important;
            max-width: 190px !important;
            height: auto !important;
        }

    form#form1 .main-header .line-1 {
        display: block !important;
        margin: 5px 0 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    form#form1 .main-header .nav-outer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form#form1 .main-header .main-menu {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        form#form1 .main-header .main-menu .navigation {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
        }

            form#form1 .main-header .main-menu .navigation > li {
                position: relative !important;
                display: block !important;
                float: none !important;
                width: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                list-style: none !important;
            }

                form#form1 .main-header .main-menu .navigation > li > a {
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    min-height: 44px !important;
                    padding: 10px 15px !important;
                    color: rgba(255, 255, 255, .9) !important;
                    background: transparent !important;
                    border-radius: 999px !important;
                    font-size: 15px !important;
                    font-weight: 700 !important;
                    line-height: 1 !important;
                    text-decoration: none !important;
                    white-space: nowrap !important;
                }

                    form#form1 .main-header .main-menu .navigation > li > a:hover,
                    form#form1 .main-header .main-menu .navigation > li:hover > a {
                        color: #fff !important;
                        background: rgba(255, 255, 255, .12) !important;
                    }

                form#form1 .main-header .main-menu .navigation > li.sidebar-brand > a {
                    color: #071827 !important;
                    background: linear-gradient(135deg, #ffd000, #00b4db) !important;
                    box-shadow: 0 14px 35px rgba(0, 180, 219, .25) !important;
                }

            form#form1 .main-header .main-menu .navigation .sub-menu {
                position: absolute !important;
                top: calc(100% + 12px) !important;
                left: 0 !important;
                z-index: 999999 !important;
                display: block !important;
                min-width: 280px !important;
                margin: 0 !important;
                padding: 12px !important;
                list-style: none !important;
                background: #fff !important;
                border-radius: 18px !important;
                box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
                opacity: 0 !important;
                visibility: hidden !important;
                transform: translateY(8px) !important;
                transition: all .18s ease !important;
            }

            form#form1 .main-header .main-menu .navigation > li:hover > .sub-menu {
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateY(0) !important;
            }

        form#form1 .main-header .main-menu .sub-menu li {
            display: block !important;
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        form#form1 .main-header .main-menu .sub-menu a {
            display: block !important;
            /* Was 11px padding on an inherited 28px line-height, so each row
               stood 50px tall and a nine item menu ran to 450px. */
            padding: 7px 12px !important;
            line-height: 1.35 !important;
            color: #102a43 !important;
            background: transparent !important;
            border-radius: 12px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            text-decoration: none !important;
        }

            form#form1 .main-header .main-menu .sub-menu a:hover {
                color: #0d6efd !important;
                background: #f1f7ff !important;
            }

    form#form1 .main-header .dropdown-btn {
        display: none !important;
    }

    form#form1 .main-header .other-links {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        gap: 14px !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form#form1 .main-header .search-btn ul {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    form#form1 .main-header .search-btn li {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form#form1 .main-header .search-btn a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    form#form1 .main-header .search-btn i {
        color: #fff !important;
        font-size: 17px !important;
    }

    form#form1 .main-header .link-box {
        display: block !important;
    }

    form#form1 .main-header .call-us .link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 9px 14px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .1) !important;
    }

    form#form1 .main-header .call-us .sub-text {
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    form#form1 .main-header .call-us a {
        color: #fff !important;
        text-decoration: none !important;
    }

    form#form1 .main-header .mobile-nav-toggler {
        display: none !important;
    }

/* Mobile */
@media (max-width: 1199px) {
    form#form1 .main-header .other-links {
        display: none !important;
    }
}

@media (max-width: 991px) {
    form#form1 .main-header .inner-container {
        min-height: 78px !important;
        padding: 12px 18px !important;
    }

    form#form1 .main-header .main-menu {
        display: none !important;
    }

    form#form1 .main-header .nav-outer {
        justify-content: flex-end !important;
    }

    form#form1 .main-header .mobile-nav-toggler {
        display: block !important;
    }

    form#form1 .main-header .logo img {
        width: 160px !important;
        max-width: 160px !important;
    }
}

/* =====================================================================
   RESPONSIVE REPAIR LAYER  (v2.0)
   Loaded last, so it wins over media-queries.css / new-age.css legacy.
   ===================================================================== */

/* ---- 1. Kill horizontal scroll on phones ---------------------------- */
html {
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Legacy media-queries.css puts 2% side margins on .hero-main below
   525px, which combined with width:100% forced the page sideways. */
.hero-main,
.content-section,
.content-section-2,
#marketingdefault,
.cta,
#portfolio,
#contact {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
}

/* Footer wave SVG was 1824px wide inside a 375px viewport */
.fixedFullFooter > svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(70px, 12vw, 200px);
}

img,
svg,
video {
    max-width: 100%;
}

/* ---- 2. Sections the legacy CSS hid outright ------------------------ */
/* new-age.css had "section.cta { display:none }" so the Autonomous
   Warehouse CTA never rendered at any width. */
section.cta,
.cta {
    display: block !important;
    padding: clamp(3.5rem, 9vw, 9rem) 0 !important;
    background-image: linear-gradient(90deg, rgba(6, 19, 31, .76), rgba(9, 48, 80, .56)), url("/images/marketing/warehouse-grid.svg") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* media-queries.css hid the whole Bespoke Mobile Apps block between
   678px and 1208px, i.e. every tablet. The :not(.d-none) guard means the
   section can still be switched off deliberately from the markup. */
section#apps:not(.d-none) {
    display: block !important;
}

section#apps.d-none {
    display: none !important;
}

/* ---- 3. Anchor targets clear the sticky header ---------------------- */
#services,
#apps,
#portfolio,
#contact,
#marketingdefault {
    scroll-margin-top: 100px;
}

/* ---- 4. Replace missing background images (were 404s) --------------- */
.marketing-bg {
    /*background: linear-gradient(135deg, rgba(255, 208, 0, .96), rgba(255, 238, 128, .94));*/
    background: linear-gradient(135deg, #ffd000, #00b4db) !important;
}

.map {
    background: linear-gradient(140deg, #071827 0%, #102a43 55%, #0d5186 100%);
}

/* ---- 5. Mobile off-canvas drawer ----------------------------------- */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(7, 24, 39, .55);
    border: 0;
}

    .menu-backdrop[hidden] {
        display: none;
    }

body.menu-open {
    overflow: hidden;
}

#sidebar-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1050 !important;
    display: flex !important;
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #071827 !important;
    box-shadow: -24px 0 70px rgba(0, 0, 0, .45);
    opacity: 1 !important;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .32s ease, visibility 0s linear .32s;
    overscroll-behavior: contain;
}

    #sidebar-wrapper.active {
        right: 0 !important;
        left: auto !important;
        width: min(86vw, 360px) !important;
        visibility: visible;
        transform: translateX(0);
        transition: transform .32s ease, visibility 0s;
    }

    #sidebar-wrapper .side-menu__block-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar-wrapper .side-menu__top {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        padding: 14px 18px !important;
    }

    #sidebar-wrapper .side-menu__close-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        color: #fff !important;
        background: rgba(255, 255, 255, .1) !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 20px !important;
        cursor: pointer;
    }

    #sidebar-wrapper .mobile-nav__container {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 0 18px !important;
    }

    #sidebar-wrapper .navigation {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

        #sidebar-wrapper .navigation > li {
            position: relative !important;
            display: block !important;
            float: none !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
            list-style: none !important;
        }

            #sidebar-wrapper .navigation > li > a {
                display: flex !important;
                align-items: center !important;
                min-height: 52px !important;
                padding: 14px 44px 14px 4px !important;
                color: #fff !important;
                background: transparent !important;
                font-size: 16px !important;
                font-weight: 700 !important;
                text-decoration: none !important;
                text-transform: none !important;
            }

            #sidebar-wrapper .navigation > li.sidebar-brand > a {
                justify-content: center !important;
                margin: 12px 0 !important;
                padding: 14px 18px !important;
                color: #071827 !important;
                background: linear-gradient(135deg, #ffd000, #00b4db) !important;
                border-radius: 999px !important;
            }

            #sidebar-wrapper .navigation > li.sidebar-brand {
                border-bottom: 0 !important;
            }

    /* Accordion arrow */
    #sidebar-wrapper .dropdown-btn {
        position: absolute !important;
        top: 4px !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        color: #ffd000 !important;
        cursor: pointer;
        transition: transform .2s ease;
    }

    #sidebar-wrapper .menu-item.submenu-open > .dropdown-btn {
        transform: rotate(90deg);
    }

    /* Sub-menus stay collapsed until tapped */
    #sidebar-wrapper .sub-menu {
        display: grid !important;
        grid-template-rows: 0fr;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        list-style: none !important;
        transition: grid-template-rows .25s ease;
    }

    #sidebar-wrapper .menu-item.submenu-open > .sub-menu {
        grid-template-rows: 1fr;
    }

        #sidebar-wrapper .sub-menu li {
            display: block !important;
            float: none !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden;
            border: 0 !important;
        }

        #sidebar-wrapper .sub-menu a {
            display: block !important;
            /* 44px is the smallest comfortable touch target, so this tightens
               to that floor and no further: the rows get closer together,
               they do not get harder to hit. */
            min-height: 44px !important;
            padding: 9px 4px 9px 18px !important;
            line-height: 1.35 !important;
            color: rgba(255, 255, 255, .78) !important;
            background: transparent !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            text-decoration: none !important;
        }

            #sidebar-wrapper .sub-menu a:hover,
            #sidebar-wrapper .sub-menu a:focus {
                color: #ffd000 !important;
            }

    #sidebar-wrapper .side-menu__content {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 20px 18px 28px !important;
        color: rgba(255, 255, 255, .7) !important;
        font-size: 14px !important;
    }

        #sidebar-wrapper .side-menu__content p,
        #sidebar-wrapper .side-menu__content span,
        #sidebar-wrapper .side-menu__content a {
            color: rgba(255, 255, 255, .7) !important;
            font-size: 14px !important;
        }

    #sidebar-wrapper .side-menu__social {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

        #sidebar-wrapper .side-menu__social a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 42px !important;
            height: 42px !important;
            margin: 0 !important;
            color: #fff !important;
            background: rgba(255, 255, 255, .1) !important;
            border-radius: 999px !important;
        }

/* Hamburger button */
.mobile-nav-toggler .menu-toggle,
form#form1 .main-header .mobile-nav-toggler .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 20px !important;
    cursor: pointer;
}

/* Desktop: keyboard access to the hover dropdowns, no drawer */
@media (min-width: 992px) {
    form#form1 .main-header .main-menu .navigation > li:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    #sidebar-wrapper,
    .menu-backdrop {
        display: none !important;
    }
}

/* ---- 6. Client logo carousel --------------------------------------- */
/* Before slick boots (and if it ever fails) render a tidy wrapped row
   instead of 20 full-width stacked logos. */
.logo-carousel:not(.slick-initialized) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-height: 320px;
    overflow: hidden;
}

    .logo-carousel:not(.slick-initialized) .slide {
        flex: 0 0 auto;
        width: clamp(110px, 30vw, 160px);
    }

.logo-carousel .slide img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 70px;
    margin: 0 auto;
    object-fit: contain;
}

.logo-carousel .slick-track {
    display: flex;
    align-items: center;
}

.logo-carousel .slick-slide {
    height: auto;
}

/* ---- 7. Cards, grid and spacing on small screens -------------------- */
@media (max-width: 991.98px) {
    .hero-main {
        padding: 2.5rem 0 2rem;
    }

    .home-carousel .carousel-item img,
    .home-carousel img {
        height: clamp(200px, 52vw, 320px);
    }

    .panel-apps {
        margin: 0;
    }

    .schedule {
        min-height: 0;
        padding: 1.5rem 1.25rem;
    }

    .service-icon,
    .marketing-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 1.6rem;
    }

    .mob-services {
        padding: 1.25rem !important;
    }

    .card-content-btn {
        padding: 1.25rem;
    }

    .panel-apps img,
    .services-col {
        height: clamp(170px, 45vw, 220px);
    }

    /* Full-width CTAs are far easier to hit with a thumb */
    .hero-main .hero-actions .btn-xl,
    .cta .btn-xl,
    .marketingBtn {
        width: 100%;
    }

    .cta h2 {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
    }

    .mob-feature {
        padding: .9rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .content-section,
    .content-section-2 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .hero-main h1,
    .hero h1 {
        font-size: clamp(1.8rem, 8.5vw, 2.4rem);
        letter-spacing: -.03em;
    }

    .hero-main h3,
    .hero h3 {
        font-size: 1.05rem;
    }

    .botm-line {
        margin: 1rem 0;
    }

    .home-carousel .caption {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        padding: .5rem .75rem;
        font-size: .85rem;
        text-align: center;
    }

    /* Carousel arrows otherwise cover a third of the image each */
    .home-carousel .carousel-control-prev,
    .home-carousel .carousel-control-next {
        width: 15%;
    }
}

/* Centre the hero copy on phones, keep it left-aligned from tablet up */
@media (max-width: 767.98px) {
    .hero-main .hero-copy {
        text-align: center;
    }

        .hero-main .hero-copy .botm-line {
            margin-left: auto;
            margin-right: auto;
        }

    .hero-main .hero-actions {
        justify-content: center;
    }
}

/* ---- 8. Forms ------------------------------------------------------- */
.form-control,
.btn-ddp,
.form-select,
textarea.form-control {
    width: 100%;
    /* 16px minimum stops iOS Safari zooming in on focus */
    font-size: 16px;
}

textarea.form-control {
    min-height: 120px;
}

.contactBtn {
    min-height: 54px;
}

#contact .panel-apps {
    margin: 0;
}

.errormsg,
span[id*="RequiredFieldValidator"],
span[id*="RegularExpressionValidator"] {
    display: block;
    margin-top: .35rem;
    color: #ffb4b4;
    font-size: .875rem;
    font-weight: 600;
}

/* ---- 9. Footer ------------------------------------------------------ */
.footer .information .info-foot ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .information .info-foot li {
    margin: 0 0 .5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.footer .social ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 1.5rem 0 0;
}

.footer .social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    font-size: 18px;
}

.copyrights {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: .9rem;
    opacity: .75;
}

@media (max-width: 767.98px) {
    .footer .information {
        text-align: center;
    }

        .footer .information .col-md-3 {
            margin-bottom: 1.5rem;
        }
}

/* ---- 10. Scroll-to-top --------------------------------------------- */
.scroll-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1020;
    width: 48px;
    height: 48px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}

    .scroll-to-top.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

/* ---- 11. Focus visibility ------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ta-cyan);
    outline-offset: 2px;
}

/* ---- 12. Heading scale --------------------------------------------- */
/* The page used a dozen <h1>s. It now has one (the hero) and these
   classes carry the visual weight the old h1s provided. */
.section-title {
    margin: 0;
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.03em;
    color: var(--ta-navy);
}

.text-white.section-title,
.content-section-2 .section-title.text-white {
    color: #fff;
}

#marketingdefault .section-title {
    color: var(--ta-dark);
}

.panel-apps .sub-h {
    margin: 0 0 .5rem;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.25;
}

.panel-apps .price {
    margin: 0 0 .75rem;
    font-size: .95rem;
    line-height: 1.4;
}

.panel-apps .card-content {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ta-muted);
}

.schedule .serviceh {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.3;
}

.mob-services h4,
.mob-services .sub-heading {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 800;
    line-height: 1.3;
}

.mob-services p {
    font-size: .9rem;
    color: var(--ta-muted);
}

#services .mob-services p,
#marketingdefault .mob-services p {
    color: var(--ta-muted);
}

/* ---- 13. Undo the legacy 95% page zoom ------------------------------ */
/* media-queries.css sets `body { zoom: .95 }` for every viewport under
   1440px. That scaled the whole site down on every laptop and phone and
   - worse - it rescales the coordinate space of position:fixed elements,
   so the off-canvas menu and the scroll-to-top button never landed where
   the CSS put them. Reset it. */
body {
    zoom: normal;
}

/* ---- 14. Sub-menu accordion (max-height, not grid-fr) --------------- */
#sidebar-wrapper .sub-menu {
    display: block !important;
    grid-template-rows: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}

#sidebar-wrapper .menu-item.submenu-open > .sub-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* ---- 15. Tighter gutters on phones --------------------------------- */
@media (max-width: 767.98px) {
    .hero-main .row,
    .content-section .row,
    .content-section-2 .row,
    #marketingdefault .row,
    #contact .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }

    .hero-main .row.g-5,
    #apps .row.g-5,
    #contact .row.g-5 {
        --bs-gutter-y: 2rem;
    }
}

/* ---- 16. Phone density pass ---------------------------------------- */
@media (max-width: 575.98px) {
    /* Icon tiles run 2-up, so keep them compact and equal height */
    .mob-services {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem .75rem !important;
        text-align: center;
    }

        .mob-services h4,
        .mob-services .sub-heading {
            font-size: .95rem;
        }

        .mob-services p {
            font-size: .82rem;
        }

    .service-icon,
    .marketing-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 1.35rem;
    }

    /* The enquiry card was eating 100px of a 375px screen in padding */
    #contact .panel-apps {
        padding: 1.25rem !important;
    }

    .map .container {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Trim the header so more of the hero is above the fold */
    form#form1 .main-header .inner-container {
        min-height: 68px !important;
        padding: 10px 14px !important;
    }

    form#form1 .main-header .logo img {
        width: 140px !important;
        max-width: 140px !important;
    }

    form#form1 .main-header .line-1 {
        display: none !important;
    }
}

/* Readable, thumb-sized submit button */
.contactBtn {
    font-size: 1rem;
    font-weight: 800;
}

/* Carousel dots were 30x23 - too small to hit reliably */
.home-carousel .carousel-indicators {
    margin-bottom: .5rem;
}

    .home-carousel .carousel-indicators [data-bs-target] {
        width: 34px;
        height: 6px;
        margin: 0 5px;
        padding: 14px 0;
        background-clip: content-box;
        border-radius: 999px;
        border-top-width: 14px;
        border-bottom-width: 14px;
    }

/* ---- 17. Tablet ----------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #apps .col-lg-5 img {
        max-width: 420px;
        margin: 0 auto;
        display: block;
    }

    .cta h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

/* =====================================================================
   18. Beating the legacy !important rules
   media-queries.css / stylish-portfolio.css carry a lot of blanket
   `!important` declarations aimed at the old layout. Each override
   below neutralises a specific one that breaks the modern homepage on
   phones. Keep them together so they are easy to retire later.
   ===================================================================== */

/* stylish-portfolio.css: .service-icon / .marketing-icon are 10rem blocks
   media-queries.css: 9rem !important below 525px, 5rem glyph below 768px */
.service-icon,
.marketing-icon {
    display: inline-flex !important;
    width: 74px !important;
    height: 74px !important;
    line-height: 1 !important;
    border-radius: 24px !important;
    font-size: 2rem !important;
}

@media (max-width: 991.98px) {
    .service-icon,
    .marketing-icon {
        width: 62px !important;
        height: 62px !important;
        border-radius: 18px !important;
        font-size: 1.6rem !important;
    }
}

@media (max-width: 575.98px) {
    .service-icon,
    .marketing-icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 16px !important;
        font-size: 1.4rem !important;
    }
}

/* media-queries.css: `section#services h4 { color:#fff !important }` put
   white text on the white service cards - the labels were invisible.
   `h4 { font-size: 22px !important }` also blew the tiles out. */
.mob-services h4,
section#services .mob-services h4,
.mob-services .sub-heading,
.card-content-btn h4 {
    color: var(--ta-dark) !important;
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.3 !important;
}

.mob-services p {
    color: var(--ta-muted) !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
}

.schedule .serviceh {
    color: var(--ta-dark) !important;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
}

.schedule p {
    color: var(--ta-muted) !important;
    font-size: .95rem !important;
    margin-bottom: .35rem;
}

/* media-queries.css: .main-header .nav-outer { height: 90px } below 525px */
form#form1 .main-header .nav-outer {
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
}

/* stylish-portfolio.css absolutely positions .menu-toggle at top:2px/right:2px,
   which collapsed its wrapper and left the button floating over the logo. */
form#form1 .main-header .mobile-nav-toggler {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
}

form#form1 .main-header .mobile-nav-toggler .menu-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    text-align: center !important;
}

/* media-queries.css: .footer .info-foot ul li { font-size:22px!important;
   margin-left:20px } pushed the footer links past the right edge */
.footer .information .info-foot {
    margin: 0 !important;
    padding: 0 !important;
}

    .footer .information .info-foot ul li {
        margin: 0 0 .5rem !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere;
    }

/* Card titles inside the enterprise panels */
.card-content-btn .sub-h {
    color: var(--ta-dark) !important;
}

/* ---- 19. Un-pin the hard-coded section heights ---------------------- */
/* The legacy sheets froze whole sections at literal pixel heights
   (#contact was 1413px below 525px, 1148px on landscape tablets;
   .map was 30rem / 75%). Content that grew got clipped, content that
   shrank left a dead gap. Everything here sizes to its content. */
.map,
#contact,
#contact .overlay,
section.cta,
section.cta .overlay,
#services,
#apps,
#portfolio,
#marketingdefault,
.content-section,
.content-section-2 {
    height: auto !important;
    min-height: 0 !important;
}

/* .carousel-inner.home-carousel was pinned to 205px/232px/235px/370px */
.home-carousel .carousel-inner,
.carousel-inner.home-carousel {
    height: auto !important;
}

.gtco-testimonials .card {
    min-height: 0 !important;
}

/* ---- 20. Restore container gutters ---------------------------------- */
/* media-queries.css zeroes .container side padding below 1440px (and
   again below 768px / 375px). Bootstrap rows carry negative side
   margins, so with no container padding every row hung 24px off both
   edges of the screen. */
.hero-main .container,
.content-section .container,
.content-section-2 .container,
#marketingdefault .container,
.cta .container,
#portfolio .container,
#contact .container,
.map .container,
.footer .container {
    padding-right: clamp(1rem, 3.5vw, 2rem) !important;
    padding-left: clamp(1rem, 3.5vw, 2rem) !important;
}

/* Rows must never be wider than the padded container */
.hero-main .row,
.content-section .row,
.content-section-2 .row,
#marketingdefault .row,
.cta .row,
#portfolio .row,
#contact .row,
.footer .row {
    max-width: 100%;
}

/* ---- 21. The app mockup is a 1497x2858 portrait shot ---------------- */
/* Left unconstrained it renders 800px tall on a tablet and swamps the
   copy beside it. Cap the height and let width follow. */
#apps .col-lg-5 img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(60vh, 560px);
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    #apps .col-lg-5 img {
        max-height: 46vh;
    }
}

/* ---- 22. Hamburger belongs to mobile only --------------------------- */
/* The overrides in section 18 have to be scoped, otherwise they beat the
   header rule that hides the toggler on desktop and the burger sits next
   to the full nav bar. */
@media (min-width: 992px) {
    form#form1 .main-header .mobile-nav-toggler,
    .mobile-nav-toggler .menu-toggle,
    form#form1 .main-header .mobile-nav-toggler .menu-toggle {
        display: none !important;
    }
}

/* ---- 23. Trim the desktop header ------------------------------------ */
/* .other-links was stacking to 112px and pushing the sticky bar to 140px,
   which is a lot of a 900px laptop viewport. */
@media (min-width: 992px) {
    form#form1 .main-header .inner-container {
        min-height: 84px !important;
        padding: 10px 28px !important;
    }

    form#form1 .main-header .other-links {
        align-items: center !important;
        gap: 16px !important;
    }

        form#form1 .main-header .other-links .search-btn,
        form#form1 .main-header .other-links .link-box {
            display: flex !important;
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
        }

    form#form1 .main-header .call-us .link {
        flex-direction: row !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    form#form1 .main-header .logo img {
        width: 168px !important;
        max-width: 168px !important;
    }
}

/* =====================================================================
   24. Hero carousel - show the whole image
   Every slide is a 2000x1000 (2:1) marketing graphic, but the earlier
   rules pinned a fixed pixel height (520px desktop / 200-320px mobile)
   and cropped with object-fit: cover. In a col-lg-6 that threw away
   roughly half the picture. Drive the box off the image's own ratio
   instead, so nothing is cut off at any width.
   ===================================================================== */
.home-carousel .carousel-item img,
.home-carousel img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
}

.home-carousel .carousel-inner,
.home-carousel .carousel-item {
    aspect-ratio: 2 / 1;
}

/* Dots sit inside the image, clear of the caption */
.home-carousel .carousel-indicators {
    z-index: 3;
    margin-bottom: .25rem;
}

/* ---- 25. Hero copy -------------------------------------------------- */
.hero-lead {
    max-width: 34em;
    margin: 1.25rem 0 0;
    color: var(--ta-muted);
    font-size: clamp(1.02rem, 1.45vw, 1.25rem);
    font-weight: 500;
    line-height: 1.55;
}

.hero-trust {
    margin: 1rem 0 0;
    color: var(--ta-navy);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .7;
}

@media (max-width: 767.98px) {
    .hero-main .hero-copy .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
   26. AI development section
   ===================================================================== */
.ai-section {
    position: relative;
    background:
        radial-gradient(circle at 88% 8%, rgba(0, 180, 219, .16), transparent 30rem),
        radial-gradient(circle at 4% 92%, rgba(13, 110, 253, .12), transparent 26rem),
        linear-gradient(180deg, #fff 0%, #f4f9ff 100%);
}

    .ai-section .ai-lead {
        margin: 1.1rem 0 0;
        color: var(--ta-muted);
        font-size: 1.02rem;
        line-height: 1.65;
    }

.ai-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow);
}

.ai-benefits {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.ai-card {
    height: 100%;
    padding: 1.6rem 1.35rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--ta-radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .ai-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 80px rgba(15, 23, 42, .16);
    }

.ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
    border-radius: 16px;
    font-size: 1.35rem;
    box-shadow: 0 14px 30px rgba(13, 110, 253, .26);
}

.ai-card-title {
    margin: 0 0 .5rem;
    color: var(--ta-navy) !important;
    font-size: 1.12rem !important;
    font-weight: 800;
    line-height: 1.3 !important;
    letter-spacing: -.015em;
}

.ai-card p {
    margin: 0;
    color: var(--ta-muted);
    font-size: .93rem;
    line-height: 1.6;
}

/* ---- Process strip -------------------------------------------------- */
.ai-process {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    color: #fff;
    background: linear-gradient(135deg, #102a43 0%, #0d5186 100%);
    border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow);
    display:none;
}

.ai-process-title {
    margin: 0 0 1.5rem;
    color: var(--ta-yellow) !important;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
    line-height: 1.2 !important;
    font-weight: 800;
    letter-spacing: .01em;
}

.ai-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

    .ai-steps > li {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding-top: 1rem;
        border-top: 2px solid rgba(255, 255, 255, .18);
    }

.ai-step-no {
    color: var(--ta-cyan);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.ai-steps strong {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
}

.ai-steps span:not(.ai-step-no) {
    color: rgba(255, 255, 255, .74);
    font-size: .88rem;
    line-height: 1.55;
}

.ai-note {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
}

@media (max-width: 991.98px) {
    .ai-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ai-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ai-card {
        padding: 1.25rem 1.1rem;
    }

    .ai-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.2rem;
    }

    .ai-section .btn-xl {
        width: 100%;
    }
}

/* Anchor target clears the sticky header */
#ai-development {
    scroll-margin-top: 100px;
    height: auto !important;
    min-height: 0 !important;
}

/* ---- 27. Hero headline scale ---------------------------------------- */
/* The old headline was 105 characters, so the 4.4rem ceiling made sense.
   The new one is 50 and was still wrapping to five lines in a half-width
   column. Scale it to the shorter copy. */
.hero-main h1 {
    max-width: 15ch;
    font-size: clamp(1.9rem, 3.4vw, 3.2rem) !important;
    line-height: 1.08;
}

@media (max-width: 991.98px) {
    .hero-main h1 {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .hero-main .hero-copy h1 {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- 28. AI section density on phones -------------------------------- */
@media (max-width: 575.98px) {
    .ai-section .ai-lead {
        font-size: .96rem;
        line-height: 1.6;
    }

    .ai-card p {
        font-size: .88rem;
        line-height: 1.5;
    }

    .ai-icon {
        margin-bottom: .65rem;
    }

    .ai-process {
        padding: 1.25rem 1.1rem;
    }

    .ai-note {
        margin-top: 1.25rem;
        padding-top: 1rem;
        font-size: .82rem;
    }
}

/* Two-up steps once there is room for them */
@media (min-width: 480px) and (max-width: 575.98px) {
    .ai-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
   29. Keep the document (not <body>) as the scroll container
   stylish-portfolio.css and new-age.css both set `html, body
   { height: 100% }`. Combined with the `overflow-x: hidden` added in
   section 1 that turned <body> into its own scroller: window.scrollY
   stayed at 0 forever, so the scroll-to-top button never appeared and
   any scroll-position logic silently did nothing.
   Horizontal clipping now lives on <html> alone.
   ===================================================================== */
html {
    height: auto !important;
    overflow-x: hidden;
}

body {
    height: auto !important;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}

/* =====================================================================
   30. SHARED PAGE SHELL
   26 pages already wrap their title in .banner-inner > .inner-container
   with a .bread-crumb list. Styling that one pattern here gives every
   inner page the same header as the homepage hero, without touching
   26 files. Individual pages keep whatever background wrapper they had
   (.recruitment-content, .land-app-bg, .mob-land-app-bg ...) - those are
   neutralised so the shared treatment always wins.
   ===================================================================== */
.recruitment-content,
.land-app-bg,
.mob-land-app-bg,
.banner-inner > .overlay,
.recruitment-content > .overlay {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.banner-inner {
    position: relative;
    width: 100%;
    padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.25rem) !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 180, 219, .22), transparent 26rem),
        linear-gradient(135deg, #071827 0%, #102a43 55%, #0d5186 100%);
    color: #fff;
}

    .banner-inner .auto-container,
    .banner-inner .inner-container {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 clamp(1rem, 3.5vw, 2rem) !important;
        float: none !important;
        background: none !important;
        min-height: 0 !important;
    }

    .banner-inner h1 {
        max-width: 20ch;
        margin: 0;
        color: #fff !important;
        font-size: clamp(1.8rem, 3.6vw, 3rem) !important;
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -.03em;
        text-align: left;
    }

    .banner-inner .page-subtitle {
        max-width: 60ch;
        margin: 1rem 0 0;
        color: rgba(255, 255, 255, .78);
        font-size: clamp(1rem, 1.4vw, 1.15rem);
        line-height: 1.6;
    }

/* Breadcrumb */
.banner-inner .page-nav {
    margin-top: 1rem;
}

.bread-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: .85rem;
}

    .bread-crumb li,
    .bread-crumb .thm-breadcrumb__item {
        display: inline-flex !important;
        align-items: center;
        gap: .5rem;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, .55);
        list-style: none !important;
    }

        .bread-crumb a {
            color: var(--ta-cyan) !important;
            font-weight: 700;
            text-decoration: none;
        }

            .bread-crumb a:hover {
                color: #fff !important;
                text-decoration: underline;
            }

        .bread-crumb .active span,
        .bread-crumb span {
            color: rgba(255, 255, 255, .8);
        }

/* Page hero call-to-action row */
.banner-inner .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

@media (max-width: 575.98px) {
    .banner-inner .page-actions .btn {
        width: 100%;
    }

    .banner-inner h1 {
        max-width: none;
    }
}

/* =====================================================================
   31. Shared content primitives across every page
   ===================================================================== */
/* Generic sections used by the service pages */
.landing-container,
.auto-container {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3.5vw, 2rem);
    padding-right: clamp(1rem, 3.5vw, 2rem);
}

.content-section-3,
.content-section-heading,
section.download,
section.features {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

/* Body copy blocks (.p-content is used on nearly every service page) */
.p-content,
.page-copy p {
    max-width: 72ch;
    margin: 0 auto 1.15rem;
    color: var(--ta-muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

.text-white .p-content,
.content-section-2 .p-content,
section.download .p-content {
    color: rgba(255, 255, 255, .82);
}

/* Section headings used by the legacy service pages */
.section-heading h2,
h2.section-heading {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.landing-page {
    font-weight: 800;
    letter-spacing: -.02em;
}

    .landing-page.dark {
        color: var(--ta-navy);
    }

/* Feature tiles on the app / marketing pages */
.feature-item {
    height: 100%;
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--ta-radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .feature-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 80px rgba(15, 23, 42, .16);
    }

    .feature-item > i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-bottom: .9rem;
        color: #fff !important;
        background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
        border-radius: 16px;
        font-size: 1.4rem;
    }

    .feature-item h3 {
        margin: 0 0 .4rem;
        color: var(--ta-navy);
        font-size: 1.12rem !important;
        font-weight: 800;
        line-height: 1.3 !important;
    }

    .feature-item p {
        margin: 0;
        color: var(--ta-muted) !important;
        font-size: .93rem;
        line-height: 1.6;
    }

/* The old fade-in helpers left elements invisible when the animation
   library was dropped. Make sure content is always painted. */
.slideanim,
.animated,
.fadeInLeftIntro {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
}

/* Every page gets the same overflow protection as the homepage */
.recruitment-content,
.banner-inner,
.content-section-3,
section.download,
section.features {
    max-width: 100%;
    overflow-x: clip;
}

/* Legacy pages float .col-* without a .row wrapper - stop them stacking
   sideways off the screen on phones */
@media (max-width: 767.98px) {
    .landing-container [class*="col-"],
    .auto-container [class*="col-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================================
   32. Shared section shells
   .content-section-2 only carried padding, so any page using it outside
   the homepage got white text on a white background. Give it the dark
   treatment by default; the homepage ids (#services, #apps) still win.
   ===================================================================== */
.content-section-2 {
    background:
        radial-gradient(circle at top right, rgba(0, 180, 219, .18), transparent 30rem),
        linear-gradient(135deg, #102a43 0%, #18385a 100%);
    color: #fff;
}

    .content-section-2 .section-title,
    .content-section-2 h2,
    .content-section-2 h3 {
        color: #fff;
    }

/* =====================================================================
   33. Reusable content components (contact, service and landing pages)
   ===================================================================== */

/* --- Body copy ------------------------------------------------------- */
.page-copy-lead,
.contact-intro {
    margin: 1.1rem 0 0;
    color: var(--ta-muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

.page-figure {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(60vh, 560px);
    margin-inline: auto;
    border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow);
}

/* --- Contact detail list --------------------------------------------- */
.contact-details {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

    .contact-details li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin: 0 0 1.1rem;
        padding: 0;
        list-style: none;
    }

    .contact-details div {
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .contact-details strong {
        color: var(--ta-navy);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .contact-details a,
    .contact-details div > span {
        color: var(--ta-muted);
        font-size: 1.02rem;
        line-height: 1.5;
        text-decoration: none;
    }

        .contact-details a:hover {
            color: var(--ta-blue);
            text-decoration: underline;
        }

.contact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
    border-radius: 14px;
    font-size: 1.1rem;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.75rem;
}

    .contact-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        color: var(--ta-navy);
        background: rgba(15, 23, 42, .06);
        border-radius: 999px;
        font-size: 1.05rem;
        text-decoration: none;
        transition: background .2s ease, color .2s ease;
    }

        .contact-social a:hover {
            color: #fff;
            background: var(--ta-blue);
        }

/* --- Enquiry card ---------------------------------------------------- */
.enquiry-card {
    background: #fff;
    margin: 0;
}

.enquiry-title {
    margin: 0 0 .35rem;
    color: var(--ta-navy) !important;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    font-weight: 800;
    line-height: 1.25 !important;
}

.enquiry-sub {
    margin: 0 0 1.25rem;
    color: var(--ta-muted);
    font-size: .88rem;
}

/* --- Numbered step cards --------------------------------------------- */
.step-card {
    height: 100%;
    padding: 1.6rem 1.35rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ta-radius);
}

.step-no {
    display: block;
    margin-bottom: .6rem;
    color: var(--ta-yellow);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.step-card h3 {
    margin: 0 0 .4rem;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 800;
    line-height: 1.3 !important;
}

.step-card p {
    margin: 0;
    color: rgba(255, 255, 255, .74) !important;
    font-size: .93rem;
    line-height: 1.6;
}

/* --- Platform cards --------------------------------------------------- */
.platform-card {
    height: 100%;
    padding: 1.75rem 1.4rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--ta-radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.platform-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-blue));
    border-radius: 20px;
    font-size: 1.7rem;
}

.platform-card h3 {
    margin: 0 0 .45rem;
    color: var(--ta-navy) !important;
    font-size: 1.12rem !important;
    font-weight: 800;
    line-height: 1.3 !important;
}

.platform-card p {
    margin: 0;
    color: var(--ta-muted) !important;
    font-size: .93rem;
    line-height: 1.6;
}

/* --- Internal link cards (also carry link equity to service pages) ---- */
.link-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.35rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ta-radius);
    text-decoration: none !important;
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

    .link-card:hover,
    .link-card:focus-visible {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, .13);
        border-color: rgba(0, 180, 219, .5);
    }

    .link-card h3 {
        margin: 0 0 .4rem;
        color: #fff !important;
        font-size: 1.08rem !important;
        font-weight: 800;
        line-height: 1.3 !important;
    }

    .link-card p {
        flex: 1 1 auto;
        margin: 0 0 .9rem;
        color: rgba(255, 255, 255, .72) !important;
        font-size: .9rem;
        line-height: 1.55;
    }

.link-card-go {
    color: var(--ta-yellow);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Light variant for use on pale sections */
.link-card.link-card-light {
    background: #fff;
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

    .link-card.link-card-light h3 {
        color: var(--ta-navy) !important;
    }

    .link-card.link-card-light p {
        color: var(--ta-muted) !important;
    }

    .link-card.link-card-light .link-card-go {
        color: var(--ta-blue);
    }

    .link-card.link-card-light:hover {
        background: #fff;
        border-color: rgba(0, 180, 219, .55);
        box-shadow: 0 30px 80px rgba(15, 23, 42, .16);
    }

/* --- FAQ accordion ---------------------------------------------------- */
.faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: .85rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    overflow: hidden;
}

    .faq-item > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.1rem 1.25rem;
        color: var(--ta-navy);
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.4;
        cursor: pointer;
        list-style: none;
    }

        .faq-item > summary::-webkit-details-marker {
            display: none;
        }

        .faq-item > summary::after {
            content: "+";
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            color: var(--ta-blue);
            background: rgba(13, 110, 253, .1);
            border-radius: 999px;
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1;
        }

    .faq-item[open] > summary::after {
        content: "\2212";
    }

    .faq-item[open] > summary {
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

.faq-answer {
    padding: 1.1rem 1.25rem 1.35rem;
}

    .faq-answer p {
        margin: 0;
        color: var(--ta-muted);
        font-size: .98rem;
        line-height: 1.7;
    }

.faq-section {
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

/* --- Map -------------------------------------------------------------- */
.map-embed {
    width: 100%;
    height: clamp(260px, 40vw, 420px);
    border-radius: var(--ta-radius);
    overflow: hidden;
    box-shadow: var(--ta-shadow);
    background: #e8eef5;
}

    /* The map is Google's own embed. The iframe ships with width and height
       attributes, which are a fallback for before the CSS lands; these make
       it fill the box the wrapper already sizes. */
    .map-embed iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

.map-directions {
    margin: 1rem 0 0;
    text-align: center;
}

    .map-directions a {
        color: #0d6efd;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

        .map-directions a:hover,
        .map-directions a:focus-visible {
            border-bottom-color: currentColor;
        }

.map-section {
    background: #f8fbff;
}

/* --- Phone tuning for the shared components --------------------------- */
@media (max-width: 575.98px) {
    .contact-ico {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .step-card,
    .platform-card,
    .link-card {
        padding: 1.25rem 1.1rem;
    }

    .faq-item > summary {
        padding: .95rem 1rem;
        font-size: .96rem;
    }

    .faq-answer {
        padding: 1rem;
    }

    .content-section .btn-xl,
    .banner-inner .btn-xl {
        width: 100%;
    }
}

/* =====================================================================
   34. Keep light cards readable inside dark sections
   `.content-section-2 h2, h3 { color:#fff }` (section 32) has the same
   specificity as the card rules and comes later in the file, so it was
   painting white text onto the white feature/platform cards. Re-assert
   the card colours with a heavier selector.
   ===================================================================== */
.content-section-2 .feature-item h3,
.content-section-2 .platform-card h3,
.content-section-2 .mob-services h4,
.content-section-2 .mob-services .sub-heading,
.content-section-2 .schedule .serviceh,
.content-section-2 .ai-card .ai-card-title,
.content-section-2 .panel-apps .sub-h,
.content-section-2 .enquiry-card h2,
.content-section-2 .enquiry-card h3,
.content-section-2 .faq-item > summary {
    color: var(--ta-navy) !important;
}

.content-section-2 .feature-item p,
.content-section-2 .platform-card p,
.content-section-2 .ai-card p,
.content-section-2 .panel-apps .card-content,
.content-section-2 .faq-answer p {
    color: var(--ta-muted) !important;
}

/* Cards that are meant to be dark keep their light text */
.content-section-2 .step-card h3,
.content-section-2 .link-card h3 {
    color: #fff !important;
}

.content-section-2 .step-card p,
.content-section-2 .link-card p {
    color: rgba(255, 255, 255, .74) !important;
}

/* =====================================================================
   35. Homepage: linked service cards, solutions grid, why-us, FAQ
   ===================================================================== */

/* The four service cards are now anchors, so they need link resets */
a.schedule {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
}

    a.schedule:hover .serviceh,
    a.schedule:focus-visible .serviceh {
        color: var(--ta-blue) !important;
    }

.schedule-go {
    margin-top: auto;
    padding-top: .9rem;
    color: var(--ta-blue);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.solutions-section {
    background: linear-gradient(180deg, #fff 0%, #f4f9ff 100%);
}

.section-lead {
    max-width: 62ch;
    margin: 1.1rem auto 0;
    color: var(--ta-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* Why-us cards */
.why-card {
    height: 100%;
    padding: 1.6rem 1.35rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--ta-radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

.why-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-blue));
    border-radius: 16px;
    font-size: 1.25rem;
}

.why-card h3 {
    margin: 0 0 .4rem;
    color: var(--ta-navy) !important;
    font-size: 1.08rem !important;
    font-weight: 800;
    line-height: 1.3 !important;
}

.why-card p {
    margin: 0;
    color: var(--ta-muted) !important;
    font-size: .92rem;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .why-card {
        padding: 1.25rem 1.1rem;
    }

    .why-ico {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.1rem;
    }

    .solutions-section .btn-xl,
    .faq-section .btn-xl {
        width: 100%;
    }
}

/* ---- 36. Two-up card grids on phones -------------------------------- */
/* The solutions grid is nine cards and the why-us row is four. Stacked
   one-per-row they added ~1,500px of scroll on a phone. */
@media (min-width: 360px) and (max-width: 767.98px) {
    #solutions .row:not(.related-grid) > [class*="col-"],
    .why-us > [class*="col-"],
    #app-types .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }

    .link-card,
    .why-card {
        padding: 1.1rem 1rem;
    }

        .link-card h3,
        .why-card h3 {
            font-size: .98rem !important;
        }

        .link-card p,
        .why-card p {
            font-size: .84rem;
            line-height: 1.5;
        }

    .link-card-go {
        font-size: .74rem;
    }
}

/* =====================================================================
   37. Legacy rows that sit outside a Bootstrap container
   Several pages drop a .row straight into a plain full-width div. The
   row's negative side margins then have no container padding to cancel,
   so it hangs off both edges of the screen. Strip the negative margins
   when the parent is not a container (nested rows inside a .col-* keep
   normal behaviour), and clip anything that still escapes.
   ===================================================================== */
section:not([class*="container"]) > .row,
div:not([class*="container"]):not([class*="col-"]) > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Safety net: `clip` contains horizontal overflow without turning <body>
   into a scroll container the way `hidden` does (see section 29). */
body {
    overflow-x: clip;
}

/* =====================================================================
   38. Footer: structured internal links on every page
   ===================================================================== */
.footer .information {
    padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}

.foot-title {
    margin: 0 0 .9rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer .information .info-foot {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

    .footer .information .info-foot ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .footer .information .info-foot ul li {
            margin: 0 0 0rem !important;
            color: rgba(255, 255, 255, .7);
            font-size: .92rem !important;
            line-height: 1.3 !important;
            list-style: none;
            overflow-wrap: anywhere;
        }

    .footer .information .info-foot a {
        color: rgba(255, 255, 255, .7);
        text-decoration: none;
    }

        .footer .information .info-foot a:hover,
        .footer .information .info-foot a:focus-visible {
            color: #fff;
            text-decoration: underline;
        }

.foot-areas {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: .8rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .footer .information,
    .footer .information .info-foot {
        text-align: left !important;
    }

    .footer .information .col-6 {
        margin-bottom: 1.25rem;
    }
}

/* =====================================================================
   39. DEVICE FRAMES
   Every app screenshot is a portrait phone capture (~560x1218). The
   frame supplies the bezel and rounded corners; the screenshots already
   contain their own status bar and notch, so no notch is drawn here or
   it would double up on the iPhone 16 captures.
   ===================================================================== */
.device {
    margin: 0;
}

.device-phone {
    --phone-w: 232px;
    --bezel: 9px;
    position: relative;
    flex: 0 0 auto;
    width: var(--phone-w);
    padding: var(--bezel);
    background:
        linear-gradient(155deg, #3a4762 0%, #171f2f 38%, #0b1120 100%);
    border-radius: 34px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .13),
        inset 0 1px 1px rgba(255, 255, 255, .22),
        0 28px 60px rgba(3, 12, 28, .42),
        0 4px 14px rgba(3, 12, 28, .3);
}

    /* Side buttons */
    .device-phone::before,
    .device-phone::after {
        content: "";
        position: absolute;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #47536e, #232c3f);
    }

    .device-phone::before {
        left: -2px;
        top: 21%;
        height: 9%;
    }

    .device-phone::after {
        right: -2px;
        top: 26%;
        height: 15%;
    }

.device-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 560 / 1216;
    border-radius: 26px;
    background: #05070c;
}

    .device-screen img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    /* Glass sheen across the screen */
    .device-screen::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(145deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 32%);
    }

/* --- Browser / admin console frame ---------------------------------- */
.device-browser {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    background: linear-gradient(160deg, #26314a, #0d1424);
    border-radius: 20px;
    padding: 0 0 .75rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 34px 80px rgba(3, 12, 28, .45);
    overflow: hidden;
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: .7rem .9rem;
}

.browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}

    .browser-dot:first-child { background: #ff5f57; }
    .browser-dot:nth-child(2) { background: #febc2e; }
    .browser-dot:nth-child(3) { background: #28c840; }

.browser-url {
    flex: 1 1 auto;
    margin-left: .5rem;
    padding: .3rem .85rem;
    color: rgba(255, 255, 255, .62);
    background: rgba(0, 0, 0, .3);
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-screen {
    background: #fff;
    margin: 0 .75rem;
    border-radius: 10px;
    overflow: hidden;
}

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

.device-browser figcaption {
    padding: .9rem 1.25rem .35rem;
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    line-height: 1.55;
    text-align: center;
}

/* =====================================================================
   40. HERO STAGE - three phones instead of stock marketing art
   ===================================================================== */
.hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.35rem, 1.4vw, 1.1rem);
    padding: clamp(1.5rem, 4vw, 3rem) 0;
    isolation: isolate;
}

.hero-phone {
    --phone-w: clamp(132px, 15.5vw, 206px);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.hero-phone--left {
    z-index: 1;
    transform: translateY(30px) rotate(-7deg) scale(.88);
}

.hero-phone--centre {
    z-index: 3;
    transform: translateY(-14px);
}

.hero-phone--right {
    z-index: 2;
    transform: translateY(30px) rotate(7deg) scale(.88);
}

.hero-stage:hover .hero-phone--left {
    transform: translateY(22px) rotate(-9deg) scale(.9);
}

.hero-stage:hover .hero-phone--right {
    transform: translateY(22px) rotate(9deg) scale(.9);
}

.hero-stage:hover .hero-phone--centre {
    transform: translateY(-22px);
}

/* Ambient glow behind the devices */
.hero-glow {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(115%, 640px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        radial-gradient(circle at 42% 38%, rgba(0, 180, 219, .38), transparent 62%),
        radial-gradient(circle at 62% 62%, rgba(13, 110, 253, .3), transparent 60%);
    filter: blur(34px);
}

/* Faint tech grid */
.hero-grid {
    position: absolute;
    z-index: 0;
    inset: 4% 0 10%;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16, 42, 67, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 67, .09) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* ---- 40a. hero on a phone ------------------------------------------- */
/* Three app screens above the heading, and smaller type under them.
   The screens are the first thing a visitor sees on a phone, and one screen
   on its own does not say "we build apps" the way three do. Column order is
   handled in default.aspx with order-1 / order-lg-2.

   SPECIFICITY, NOT SOURCE ORDER. Every selector here is deliberately heavier
   than the rule it has to beat, because the obvious version of this block
   silently lost three times:

     .hero-phone          lost to .device-phone { --phone-w: 196px } in
                          section 46, which is later in this file
     .hero-copy h1        lost to .hero-main h1 { font-size: ... !important }
                          in section 27
     .hero-lead           lost to the grouped .hero-lead rule in section 52

   Font family is untouched throughout; only sizes change. */
@media (max-width: 767.98px) {
    .hero-stage .hero-phone--left,
    .hero-stage .hero-phone--right {
        display: block;
    }

    /* (0,2,0) beats .device-phone (0,1,0) wherever it sits in the file. */
    .hero-stage .hero-phone,
    .hero-stage .hero-phone--centre {
        --phone-w: clamp(86px, 25vw, 112px);
    }

    .hero-stage .hero-phone--left {
        margin-right: -4%;
        transform: translateY(12px) rotate(-6deg) scale(.9);
    }

    .hero-stage .hero-phone--centre {
        transform: none;
    }

    .hero-stage .hero-phone--right {
        margin-left: -4%;
        transform: translateY(12px) rotate(6deg) scale(.9);
    }

    /* Hover is a pointer gesture; on a touch screen it sticks after a tap. */
    .hero-stage:hover .hero-phone--left {
        transform: translateY(12px) rotate(-6deg) scale(.9);
    }

    .hero-stage:hover .hero-phone--centre {
        transform: none;
    }

    .hero-stage:hover .hero-phone--right {
        transform: translateY(12px) rotate(6deg) scale(.9);
    }

    .hero-stage {
        gap: 0;
        padding: .5rem 0 .25rem;
    }

    /* (0,3,1) plus !important to beat .hero-main h1, which is (0,1,1) and
       already !important. Nothing less than this moves it. */
    .hero-main .hero-copy h1 {
        font-size: clamp(1.4rem, 6.6vw, 1.7rem) !important;
        line-height: 1.18;
    }

    .hero-main .hero-copy .caps {
        font-size: .78rem;
    }

    .hero-main .hero-copy .hero-lead {
        font-size: .95rem;
        line-height: 1.55;
    }

    .hero-main .hero-copy .hero-trust {
        font-size: .72rem;
        line-height: 1.5;
    }

    .hero-main .hero-copy .botm-line {
        margin-top: .6rem;
        margin-bottom: .6rem;
    }

    .hero-main .hero-actions {
        margin-top: 1rem !important;
        gap: .6rem !important;
    }

        .hero-main .hero-actions .btn-xl {
            padding: .6rem 1.1rem;
            font-size: .82rem;
        }
}

/* =====================================================================
   41. APP SHOWCASE
   ===================================================================== */
.app-showcase {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #071827 0%, #0d2136 45%, #102a43 100%);
    color: #fff;
}

.showcase-aurora {
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 30% at 12% 8%, rgba(0, 180, 219, .34), transparent 70%),
        radial-gradient(34% 26% at 88% 26%, rgba(13, 110, 253, .28), transparent 70%),
        radial-gradient(32% 26% at 26% 82%, rgba(255, 208, 0, .14), transparent 70%);
    filter: blur(22px);
}

.app-showcase .container {
    position: relative;
    z-index: 1;
}

.app-showcase .section-title {
    color: #fff;
}

.app-showcase .section-lead {
    color: rgba(255, 255, 255, .72);
}

/* --- One case per app ------------------------------------------------ */
.app-case {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .app-case:last-of-type {
        margin-bottom: 0;
    }

.app-case-eyebrow {
    display: inline-block;
    padding: .3rem .75rem;
    color: var(--ta-yellow);
    background: rgba(255, 208, 0, .12);
    border: 1px solid rgba(255, 208, 0, .28);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.app-case-title {
    margin: .9rem 0 .6rem;
    color: #fff !important;
    font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
    font-weight: 800;
    line-height: 1.15 !important;
    letter-spacing: -.03em;
}

.app-case-desc {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, .74);
    font-size: .98rem;
    line-height: 1.65;
}

.app-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}

    .app-case-tags li {
        padding: .32rem .7rem;
        color: rgba(255, 255, 255, .8);
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 600;
        list-style: none;
    }

.app-case-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .6rem 1.2rem;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
    border-radius: 999px;
    font-weight: 800;
    font-size: .92rem;
    text-decoration: none !important;
    box-shadow: 0 14px 34px rgba(0, 180, 219, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .app-case-link:hover,
    .app-case-link:focus-visible {
        color: #071827 !important;
        transform: translateY(-2px);
        box-shadow: 0 20px 44px rgba(0, 180, 219, .42);
    }

/* --- Horizontal screen rail ------------------------------------------ */
.app-case-rail {
    position: relative;
    min-width: 0;
}

.app-scroller {
    display: flex;
    gap: clamp(.75rem, 1.6vw, 1.35rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: .25rem;
    overscroll-behavior-x: contain;
    padding: .5rem .25rem 1rem;
    /* No visible scrollbar on any rail: the prev/next buttons and the
       swipe hint are the affordance. Scrolling itself is untouched. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .app-scroller > .device {
        scroll-snap-align: start;
    }

    .app-scroller::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .app-scroller:focus-visible {
        outline: 3px solid var(--ta-cyan);
        outline-offset: 4px;
        border-radius: 12px;
    }

/* Arrow controls (pointer devices only) */
.rail-btn {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -32px;
    color: #071827;
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 999px;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(3, 12, 28, .38);
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

    .rail-btn:hover {
        background: #fff;
        transform: scale(1.06);
    }

    .rail-btn[disabled] {
        opacity: .3;
        cursor: default;
        transform: none;
    }

.rail-btn--prev { left: -14px; }
.rail-btn--next { right: -14px; }

@media (hover: hover) and (min-width: 992px) {
    .rail-btn {
        display: inline-flex;
    }
}

.rail-hint {
    margin: .25rem 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
}

@media (hover: hover) and (min-width: 992px) {
    .rail-hint {
        display: none;
    }
}

/* --- Admin console row ------------------------------------------------ */
.app-case-admin {
    grid-column: 1 / -1;
    margin-top: .5rem;
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 991.98px) {
    .app-case {
        grid-template-columns: 1fr;
    }

    .rail-btn {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .app-case {
        padding: 1.25rem 1rem;
        border-radius: 22px;
    }

    .device-phone {
        --phone-w: 196px;
        --bezel: 7px;
        border-radius: 28px;
    }

    .device-screen {
        border-radius: 22px;
    }

    .app-case-link {
        width: 100%;
        justify-content: center;
    }

    .browser-url {
        font-size: .7rem;
    }
}

/* =====================================================================
   42. Enterprise cards now show real app UI, not landscape photos
   ===================================================================== */
/* A phone screenshot in a landscape box: cover was cropping away most of
   it. contain shows the whole screen, and the ground is white rather than
   the dark #0b1120 the --ui variant uses, because this screenshot is a
   light UI and a dark surround made it look like a mistake.
   Doubled class (0,2,0) beats the .panel-apps img rule (0,1,1). */
.services-col.services-col--app {
    height: 230px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: .5rem;
}

/* Solo phone in the Bespoke Mobile Apps section */
.device-phone--solo {
    --phone-w: clamp(200px, 60vw, 270px);
    margin: 0 auto;
}

/* =====================================================================
   43. Give every gradient section a matching solid background-color
   The legacy sheets leave a solid colour underneath these sections
   (#apps was sitting on #ececec, #contact on #4e8ff7). The gradient
   paints over it so it looks right, but contrast checkers read the
   solid colour underneath and reported white-on-light-grey failures.
   Setting the base colour to match the gradient fixes the audit and
   makes the sections degrade correctly if a gradient ever fails.
   ===================================================================== */
#services,
.content-section-2,
#apps {
    background-color: #102a43 !important;
}

.app-showcase {
    background-color: #071827 !important;
}

.map,
#contact {
    background-color: #0b2136 !important;
}

.cta,
section.cta {
    background-color: #071827 !important;
}

.ai-section,
.solutions-section,
.faq-section,
#portfolio {
    background-color: #f6faff !important;
}

.banner-inner {
    background-color: #102a43;
}

/* Half-opacity white is too faint for body copy on these panels */
.map .text-white-50,
#contact .text-white-50,
.content-section-2 .text-white-50 {
    color: rgba(255, 255, 255, .78) !important;
}

/* White on the mid-blue marketing button was 3.18:1 */
.marketingBtn,
a.btn.marketingBtn {
    color: #fff !important;
    background: linear-gradient(135deg, #0d6efd, #08326f) !important;
    border: 0;
}

    .marketingBtn:hover,
    .marketingBtn:focus-visible {
        color: #fff !important;
        background: linear-gradient(135deg, #0b5ed7, #061f47) !important;
    }

/* Bootstrap's amber is unreadable on anything light; use it only as an
   eyebrow on the dark sections and lift it to the brand yellow. */
.content-section-2 .text-warning,
.map .text-warning,
#contact .text-warning,
#apps .text-warning,
.app-showcase .text-warning {
    color: #ffd84d !important;
}

/* =====================================================================
   44. Contrast + font consistency
   ===================================================================== */
/* .text-primary resolved to #1d809f, which is 4.31:1 on the pale section
   backgrounds - just under the 4.5:1 minimum for body-size text. */
.caps.text-primary,
.text-primary {
    color: #14657f !important;
}

/* "Explore ->" was #ecb807 on #185995 (3.93:1). */
.link-card-go {
    color: #ffdf6b !important;
}

.link-card-light .link-card-go {
    color: #0a58ca !important;
}

/* Legacy sheets left a couple of families behind (Rubik on the hero lead,
   Lato on buttons) that are never loaded, so they rendered in a different
   fallback to everything else. Keep one stack. */
.hero-lead,
.hero-trust,
.btn,
.btn-xl,
.contactBtn,
.marketingBtn {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Same story as section 43: the footer had a legacy #185995 underneath the
   dark gradient, so contrast was measured against a mid blue. */
.footer,
.footer .fixedFullFooter,
.footer .information {
    background-color: #071827 !important;
}

.foot-areas {
    color: rgba(255, 255, 255, .62);
}

.footer .information .info-foot ul li,
.footer .information .info-foot a {
    color: rgba(255, 255, 255, .82) !important;
}

/* =====================================================================
   45. Client logo marquee
   Replaces the slick carousel: a seamless CSS loop with no JS and no
   jQuery dependency. The list is rendered twice (the second copy is
   aria-hidden) and the track translates by exactly -50%, so the join
   is invisible.
   ===================================================================== */
.logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: .5rem 0;
    /* fade the logos out at both edges instead of cutting them */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: ta-marquee 46s linear infinite;
}

.logo-marquee:hover .marquee-track,
.logo-marquee:focus-within .marquee-track {
    animation-play-state: paused;
}

.marquee-row {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0 clamp(.375rem, 1vw, .875rem);
    list-style: none;
}

.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(120px, 15vw, 168px);
    height: clamp(72px, 9vw, 96px);
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    list-style: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .marquee-item img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(1);
        opacity: .62;
        transition: filter .25s ease, opacity .25s ease;
    }

    .marquee-item:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 180, 219, .45);
        box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
    }

        .marquee-item:hover img {
            filter: grayscale(0);
            opacity: 1;
        }

@keyframes ta-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* The global reduced-motion rule freezes the track; centre it so it
   still reads as a logo wall rather than a cut-off strip. */
@media (prefers-reduced-motion: reduce) {
    .logo-marquee {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .marquee-track {
        animation: none !important;
    }
}

/* =====================================================================
   46. PROJECT / SOLUTION PAGE TEMPLATE
   One template shared by every app and software page so they all read
   the same: hero -> overview -> features -> benefits -> FAQ -> related.
   ===================================================================== */
.page-eyebrow {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .3rem .8rem;
    color: var(--ta-yellow);
    background: rgba(255, 208, 0, .12);
    border: 1px solid rgba(255, 208, 0, .3);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

/* Wide marketing figure used where a project has no phone captures */
.page-figure--wide {
    width: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.page-figure-wide {
    margin: 0;
}

    .page-figure-wide img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--ta-radius);
        box-shadow: var(--ta-shadow);
    }

/* --- Benefits ---------------------------------------------------------- */
.benefits-section {
    background: linear-gradient(180deg, #fff 0%, #f4f9ff 100%);
}

.benefit-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

    .benefit-list li {
        position: relative;
        margin: 0 0 .95rem;
        padding-left: 2.25rem;
        color: var(--ta-muted);
        font-size: 1.02rem;
        line-height: 1.6;
        list-style: none;
    }

        .benefit-list li::before {
            content: "\f00c"; /* font-awesome check */
            font-family: FontAwesome;
            position: absolute;
            left: 0;
            top: .1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            color: #fff;
            background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
            border-radius: 999px;
            font-size: .72rem;
        }

/* --- Who uses it ------------------------------------------------------- */
.industry-card {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(150deg, #102a43, #0d5186);
    border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow);
    color: #fff;
}

.industry-title {
    margin: 0 0 1.1rem;
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 800;
    line-height: 1.3 !important;
}

.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

    .industry-tags li {
        margin: 0;
        padding: .34rem .75rem;
        color: rgba(255, 255, 255, .88);
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        font-size: .8rem;
        font-weight: 600;
        list-style: none;
    }

.industry-note {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    line-height: 1.6;
}

/* --- Admin console beside the app ------------------------------------- */
.admin-split {
    background: linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
}

.admin-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.admin-pair-console {
    max-width: none;
    margin: 0;
}

.admin-pair-phone {
    --phone-w: clamp(170px, 20vw, 240px);
    margin: 0;
}

@media (max-width: 991.98px) {
    .admin-pair {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .admin-pair-console {
        width: 100%;
    }
}

/* --- Page-level tidy --------------------------------------------------- */
@media (max-width: 575.98px) {
    .benefit-list li {
        padding-left: 2rem;
        font-size: .96rem;
    }

    .industry-card .btn-xl {
        width: 100%;
    }
}

/* Same gradient fallback issue as section 43: contrast checkers walk up
   to <body> when a panel only has a gradient, so the white text on
   .industry-card was measured against white. */
.industry-card {
    background-color: #102a43;
}

.app-case,
.link-card {
    background-color: rgba(16, 42, 67, .92);
}

.link-card.link-card-light {
    background-color: #fff;
}

.app-case-eyebrow,
.page-eyebrow {
    background-color: #2a2410;
}

/* =====================================================================
   47. Portrait captures inside a phone frame
   A phone screenshot or screen recording dropped into a full-width
   figure renders enormous on desktop - delivery-app-mobile.png was
   1116x2276 on a 1440 viewport. These render at the image's own ratio
   inside a device frame instead.
   ===================================================================== */
.device-screen--auto {
    aspect-ratio: auto;
}

    .device-screen--auto img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.extra-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.extra-phone-caption {
    max-width: 46ch;
    margin: 0;
    color: var(--ta-muted);
    font-size: .92rem;
    line-height: 1.6;
    text-align: center;
}

/* The solo phone is the only visual in its column, so give it a little
   more presence than one sitting in a scrolling rail. */
.device-phone--solo {
    --phone-w: clamp(200px, 56vw, 268px);
    margin-inline: auto;
}

/* =====================================================================
   48. Specialism block (Invoized: CIS + VAT reverse charge for trades)
   ===================================================================== */
.trades-section {
    background: linear-gradient(180deg, #f6f8ff 0%, #eef2ff 100%);
    background-color: #f6f8ff;
}

.trade-card {
    height: 100%;
    padding: 1.6rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .14);
    border-left: 4px solid #4f46e5;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(30, 27, 75, .07);
}

    .trade-card h3 {
        margin: 0 0 .5rem;
        color: var(--ta-navy) !important;
        font-size: 1.08rem !important;
        font-weight: 800;
        line-height: 1.3 !important;
    }

    .trade-card p {
        margin: 0;
        color: var(--ta-muted) !important;
        font-size: .94rem;
        line-height: 1.6;
    }

@media (max-width: 575.98px) {
    .trade-card {
        padding: 1.2rem 1.1rem;
    }
}

/* =====================================================================
   49. Product screen rail (landscape web-app captures)
   The phone rail in section 41 handles portrait app screens; this is the
   same pattern for desktop/web captures in a browser frame.
   ===================================================================== */
.screens-section {
    background: linear-gradient(180deg, #f6f8ff 0%, #eef2ff 100%);
    background-color: #f6f8ff;
}

.screen-rail-wrap {
    position: relative;
}

.screen-rail {
    align-items: flex-start;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.screen-rail-item {
    flex: 0 0 auto;
    width: min(88vw, 760px);
    max-width: none;
    scroll-snap-align: center;
}

    .screen-rail-item figcaption {
        color: rgba(255, 255, 255, .82);
    }

/* The browser frames sit on a pale section here, so the caption needs to
   read against the dark chrome rather than the section behind it. */
.screens-section .device-browser {
    background: linear-gradient(160deg, #1e2540, #0d1424);
    background-color: #0d1424;
}

@media (max-width: 991.98px) {
    .screen-rail-item {
        width: min(90vw, 560px);
    }
}

@media (max-width: 575.98px) {
    .screen-rail-item figcaption {
        padding: .8rem 1rem .3rem;
        font-size: .82rem;
    }
}

/* =====================================================================
   50. Legacy purchase wizard on /website-design-ecommerce
   The page was rebuilt on the shared project template, but its old markup
   could not simply be deleted: websitedesign.aspx.designer.vb declares 89
   server controls and the code-behind binds 20 live Handles clauses to
   them (pricing tiers, PayPal, vouchers, booking calendar, cart, account
   activation). Remove the markup and the project stops compiling and the
   purchase flow goes with it. So the old body stays in the page, wrapped
   in .legacy-shop and hidden here.

   display:none keeps it out of the accessibility tree and out of the tab
   order as well, so no aria-hidden is needed and nothing inside can be
   focused. Deleting this rule brings the whole wizard back.
   ===================================================================== */
.legacy-shop {
    display: none !important;
}

/* =====================================================================
   51. About page: team grid, CEO block and technology stack
   about.aspx was rebuilt on the shared page shell (banner-inner,
   content-section, feature-item, link-card) so most of it inherits what
   is already here. These are the pieces that page needs and no other
   page has.
   ===================================================================== */
.team-section {
    background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
    /* Solid fallback: contrast checkers cannot read a gradient and drop
       through to background-color. Sections 43/44 have the same fix. */
    background-color: #f7f9ff;
}

.team-card {
    margin: 0;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(16, 42, 90, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .team-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 38px rgba(16, 42, 90, .14);
    }

    .team-card img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .team-card figcaption {
        padding: 1rem .9rem 1.15rem;
        text-align: center;
    }

    .team-card h3 {
        margin: 0 0 .2rem;
        font-size: 1.15rem;
        font-weight: 700;
        color: #102a5a;
    }

.team-role {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .06em;
    font-weight: 700;
    color: #5a6c8f;
}

/* ---- CEO ----------------------------------------------------------- */
.ceo-portrait {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 20px;
    border: 3px solid rgba(255, 255, 255, .18);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
}

.ceo-extras {
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
}

.ceo-facts {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, .72);
}

    .ceo-facts li {
        margin-bottom: .35rem;
        list-style-type: circle;
    }

/* ---- Technology stack ---------------------------------------------- */
.stack-card {
    padding: 1.5rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .08);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(16, 42, 90, .06);
}

    .stack-card h3 {
        margin: 0 0 .9rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: #102a5a;
    }

.stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .stack-list li {
        padding: .3rem .7rem;
        font-size: .82rem;
        font-weight: 600;
        color: #29497f;
        background: #eef3ff;
        border-radius: 999px;
    }

@media (max-width: 575.98px) {
    .team-card figcaption {
        padding: .8rem .6rem 1rem;
    }

    .team-card h3 {
        font-size: 1rem;
    }

    .team-role {
        font-size: .68rem;
    }
}

/* =====================================================================
   52. About page: "Ten years in business" milestone band
   Sits between Our Story and Why Us. The badge is inline SVG, so the
   text inside it is styled here rather than with presentation attributes
   and scales with the viewport instead of pixelating.
   ===================================================================== */
.milestone-section {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    /* Solid fallback so contrast checkers, which cannot read a gradient,
       measure against the right colour. Same fix as sections 43/44. */
    background-color: #ffffff;
}

.milestone-band {
    padding: 2.5rem 1.75rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .09);
    border-radius: 22px;
    box-shadow: 0 10px 40px rgba(16, 42, 90, .08);
}

.milestone-badge {
    width: 100%;
    max-width: 230px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(192, 138, 29, .28));
}

    .milestone-badge .badge-num {
        font-size: 54px;
        font-weight: 800;
        fill: #102a5a;
        letter-spacing: -1px;
    }

    .milestone-badge .badge-word {
        font-size: 17px;
        font-weight: 700;
        fill: #29497f;
        letter-spacing: 5px;
    }

    .milestone-badge .badge-dates {
        font-size: 11px;
        font-weight: 600;
        fill: #7a8aa8;
        letter-spacing: 1.5px;
    }

/* ---- stats ---------------------------------------------------------- */
.milestone-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem 2.75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(16, 42, 90, .1);
}

.milestone-stat {
    display: flex;
    flex-direction: column;
}

.milestone-figure {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: #102a5a;
    letter-spacing: -1px;
}

.milestone-plus {
    color: #e8b53c;
}

.milestone-label {
    margin-top: .35rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5a6c8f;
}

@media (max-width: 991.98px) {
    .milestone-band {
        padding: 2rem 1.25rem;
    }

    .milestone-badge {
        max-width: 190px;
    }
}

@media (max-width: 575.98px) {
    /* Flex wrapping left one stat alone on the first row and two on the
       second. An even three-up grid reads as a set instead. */
    .milestone-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem .75rem;
    }

    .milestone-figure {
        font-size: 2.1rem;
    }

    .milestone-label {
        font-size: .7rem;
    }
}

/* =====================================================================
   53. Recruitment page
   recruitment.aspx was rebuilt on the shared page shell, so the hero,
   feature cards and enquiry band all inherit what is already here. These
   are the two pieces only that page has: the empty-vacancies panel and
   the office cards.
   ===================================================================== */
.vacancy-empty {
    padding: 3rem 2rem;
    background: #fff;
    border: 1px dashed rgba(16, 42, 90, .22);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(16, 42, 90, .06);
}

    .vacancy-empty i {
        font-size: 2.6rem;
        color: #9fb0cf;
        margin-bottom: 1rem;
        display: block;
    }

    .vacancy-empty h3 {
        margin: 0 0 .9rem;
        font-size: 1.45rem;
        font-weight: 700;
        color: #102a5a;
    }

    .vacancy-empty p {
        max-width: 620px;
        margin: 0 auto .9rem;
        color: #5a6c8f;
    }

.vacancy-note {
    padding-top: .9rem;
    border-top: 1px solid rgba(16, 42, 90, .08);
    font-size: .95rem;
}

/* ---- offices -------------------------------------------------------- */
.office-card {
    padding: 1.75rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .08);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(16, 42, 90, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .office-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 38px rgba(16, 42, 90, .14);
    }

    .office-card h3 {
        margin: .9rem 0 .5rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: #102a5a;
    }

    .office-card p {
        margin: 0;
        color: #5a6c8f;
    }

.office-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #eef3ff;
    color: #2f6df0;
    font-size: 1.35rem;
}

@media (max-width: 575.98px) {
    .vacancy-empty {
        padding: 2.25rem 1.25rem;
    }

    .vacancy-empty h3 {
        font-size: 1.2rem;
    }
}

/* =====================================================================
   54. Footer company details
   The address/email/phone/hours list was plain bullets. Icons are
   decorative only - the text beside each already says what it is, so they
   are aria-hidden and the schema.org itemprops are untouched.
   ===================================================================== */
.foot-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .foot-contact li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        margin-bottom: .6rem;
        line-height: 1.5;
    }

        .foot-contact li i {
            flex: 0 0 26px;
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: .1rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            color: #ffffff;
            font-size: .78rem;
        }

        .foot-contact li a {
            text-decoration: none;
        }

            .foot-contact li a:hover {
                text-decoration: underline;
            }

/* =====================================================================
   55. Legal pages (privacy policy)
   A long-form text document rather than a marketing page: narrower
   measure, generous spacing between sections, readable line length.
   ===================================================================== */
.legal-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    /* Solid fallback for contrast checkers, which cannot read a gradient. */
    background-color: #ffffff;
}

.legal-doc {
    padding: 2.5rem 2.25rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .09);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(16, 42, 90, .07);
}

    .legal-doc h2 {
        margin: 2.5rem 0 .9rem;
        padding-top: 1.75rem;
        border-top: 1px solid rgba(16, 42, 90, .09);
        font-size: 1.35rem;
        font-weight: 700;
        color: #102a5a;
    }

        .legal-doc h2:first-of-type {
            margin-top: 2rem;
        }

    .legal-doc p {
        margin-bottom: 1.1rem;
        color: #4a5c7e;
        line-height: 1.75;
    }

    .legal-doc a {
        color: #2f6df0;
        word-break: break-word;
    }

.legal-list {
    margin: 0 0 1.1rem;
    padding-left: 1.2rem;
    color: #4a5c7e;
    line-height: 1.75;
}

    .legal-list li {
        margin-bottom: .7rem;
    }

    .legal-list strong {
        color: #102a5a;
    }

.legal-address {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.4rem;
    background: #f3f6ff;
    border-left: 3px solid #2f6df0;
    border-radius: 10px;
    font-style: normal;
    line-height: 1.8;
    color: #29497f;
}

@media (max-width: 575.98px) {
    .legal-doc {
        padding: 1.75rem 1.25rem;
    }

        .legal-doc h2 {
            font-size: 1.15rem;
            margin-top: 2rem;
            padding-top: 1.4rem;
        }
}

/* Footer address block: stacked postal lines beside the pin (section 54). */
.foot-address {
    display: block;
    line-height: 1.6;
}

/* =====================================================================
   56. UI screenshots in the enterprise cards
   A dashboard capture is 1400x790 and the card slot is roughly 253x230,
   so object-fit:cover was discarding about 38% of the image WIDTH and the
   card showed a meaningless slice. (.services-col--app only changes the
   vertical anchor, which is not the cropped axis here.) A screenshot has
   to be seen whole to mean anything, so this shows all of it on the dark
   card ground instead.
   ===================================================================== */
/* Doubled class (0,2,0) deliberately: this image sits inside .panel-apps,
   so the earlier ".panel-apps img" rule is 0,1,1 and would beat a single
   class. This is a specificity fix, not a style preference - do not
   simplify it back to one class. */
.services-col.services-col--ui {
    object-fit: contain;
    object-position: center;
    background: #0b1120;
    padding: .55rem;
}

/* The Invoized case runs browser frames rather than phones, so its rail
   item needs a wider basis than the phone rail in section 41. */
#rail-invoized .screen-rail-item {
    flex: 0 0 min(82vw, 620px);
}

/* =====================================================================
   57. Industry stats band and case study block
   Both are optional template sections (statsBlock / caseBlock in the
   generator). The source line under the stats is part of the design, not
   an afterthought: the figures are published sector research rather than
   our own results, and the page has to say so.
   ===================================================================== */
.stats-section {
    background: linear-gradient(180deg, #f6f8ff 0%, #eef2ff 100%);
    /* Solid fallback - contrast checkers cannot read a gradient. */
    background-color: #f6f8ff;
}

.stat-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .08);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(16, 42, 90, .07);
}

.stat-figure {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #2f6df0;
}

.stat-label {
    margin-top: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #102a5a;
}

.stat-note {
    margin: .8rem 0 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #5a6c8f;
}

.stats-source {
    margin: 2rem 0 0;
    font-size: .8rem;
    line-height: 1.6;
    color: #7a8aa8;
    text-align: center;
}

/* ---- case study ----------------------------------------------------- */
.case-points {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

    .case-points li {
        position: relative;
        padding-left: 1.9rem;
        margin-bottom: .75rem;
        color: #4a5c7e;
        line-height: 1.65;
    }

        .case-points li::before {
            content: "\f00c";           /* fa-check */
            font-family: FontAwesome;
            position: absolute;
            left: 0;
            top: .1rem;
            color: #2f6df0;
            font-size: .85rem;
        }

@media (max-width: 767.98px) {
    .stat-card {
        padding: 1.3rem 1rem;
    }

    .stat-figure {
        font-size: 1.85rem;
    }

    .stat-label {
        font-size: .68rem;
    }

    .stat-note {
        font-size: .84rem;
    }
}

/* =====================================================================
   58. Related projects rail
   "Other software we build" was a static grid of text link-cards. It is
   now a flickable rail of compact project cards reusing the .app-scroller
   from section 41, so it needs no new JavaScript - the shared
   data-rail-prev/next buttons drive it.

   Used by the generated pages and, in plain markup, by the homepage,
   about and app development pages.
   ===================================================================== */
.related-rail {
    gap: 1rem;
}

.related-rail-wrap {
    margin-top: 0;
}

.related-card {
    flex: 0 0 min(84vw, 330px);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: .9rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 90, .1);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(16, 42, 90, .08);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .related-card:hover,
    .related-card:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(47, 109, 240, .45);
        box-shadow: 0 14px 34px rgba(16, 42, 90, .16);
        text-decoration: none;
    }

.related-thumb {
    flex: 0 0 66px;
    width: 66px;
    height: 84px;
    border-radius: 9px;
    overflow: hidden;
    background: #0b1120;
}

    .related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* App screenshots read best from the top of the screen down. */
        object-position: top center;
        display: block;
    }

.related-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.related-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #102a5a;
}

.related-desc {
    margin-top: .3rem;
    font-size: .84rem;
    line-height: 1.5;
    color: #5a6c8f;
}

.related-go {
    margin-top: .55rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #2f6df0;
}

/* On the dark "More Solutions" band the heading is white, but the cards
   stay light so they read as cards rather than as flat panels. */
#related .rail-hint {
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 575.98px) {
    .related-card {
        flex-basis: min(88vw, 300px);
    }

    .related-thumb {
        flex-basis: 58px;
        width: 58px;
        height: 74px;
    }
}

/* Related rail: no scrollbar. The prev/next buttons are the control here -
   you flick from one project to the next rather than dragging a bar. The
   screenshot rails in section 41 keep their thin scrollbar, because there
   the bar usefully signals how many screens are left. */
/* Scrollbar hiding now lives on the base .app-scroller rule; this only
   keeps the rail's own scroll padding. */
.related-rail {
    scroll-padding-left: 0;
}

/* The buttons are the only affordance now, so they stay visible rather
   than appearing on hover. */
.related-rail-wrap .rail-btn {
    opacity: 1;
    visibility: visible;
}

/* Diagram figures: shown whole, never cropped.
   .page-figure--wide forces aspect-ratio 16/10 with object-fit:cover, which
   is right for a photo and wrong for a diagram - the pick-route SVG was
   having its edges cut off rather than merely scaled. */
.page-figure--diagram {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    object-fit: contain;
    background: #f7f9ff;
    border: 1px solid rgba(16, 42, 90, .08);
}

/* =====================================================================
   59. Homepage contact form
   The markup was already Bootstrap (row g-3 / form-control); what dated it
   was legacy CSS:
     media-queries.css  .btn { border-radius:0 !important; font-size:13px !important }
     new-age.css        .contactBtn { padding: 20px 5px }  -> a 64px tall,
                        square-cornered button
   plus p-lg-5 giving the panel 48px of padding and 54px-tall fields.

   The !important here is not decoration - it is the only way to beat the
   !important in media-queries.css. Scoped to #contact so it cannot leak.
   ===================================================================== */
.enquiry-card {
    padding: 1.5rem !important;
    border-radius: 20px;
}

/* ---- fields --------------------------------------------------------- */
.enquiry-card .form-control,
.enquiry-card .form-select {
    height: auto;
    min-height: 44px;
    padding: .55rem .85rem;
    font-size: .93rem;
    line-height: 1.4;
    color: #17233d;
    background-color: #fff;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .enquiry-card .form-control::placeholder {
        color: #93a0b8;
        opacity: 1;
    }

    .enquiry-card .form-control:hover,
    .enquiry-card .form-select:hover {
        border-color: rgba(15, 23, 42, .26);
    }

    .enquiry-card .form-control:focus,
    .enquiry-card .form-select:focus {
        border-color: #2f6df0;
        /* A visible focus ring rather than the browser default outline,
           which the legacy sheets suppress. */
        box-shadow: 0 0 0 3px rgba(47, 109, 240, .18);
        outline: none;
    }

.enquiry-card textarea.form-control {
    min-height: 88px;
    resize: vertical;
}

/* Tighter gutters: g-3 left noticeable dead space between short fields. */
.enquiry-card .row.g-3 {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .5rem;
}

/* ---- submit --------------------------------------------------------- */
.enquiry-card .contactBtn {
    padding: .8rem 1.4rem !important;
    border-radius: 12px !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    border: 0;
    box-shadow: 0 8px 22px rgba(47, 109, 240, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .enquiry-card .contactBtn:hover,
    .enquiry-card .contactBtn:focus-visible {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 12px 28px rgba(47, 109, 240, .36);
    }

    .enquiry-card .contactBtn:active {
        transform: translateY(0);
    }

/* ---- validation + success ------------------------------------------- */
.enquiry-card .errormsg,
.enquiry-card span[id*="Validator"] {
    display: inline-block;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: #d92d20;
}

.enquiry-card .btn-success {
    padding: .95rem 1.25rem !important;
    border-radius: 12px !important;
    font-size: .95rem !important;
}

@media (max-width: 575.98px) {
    .enquiry-card {
        padding: 1.35rem !important;
    }

    .enquiry-card .form-control,
    .enquiry-card .form-select {
        min-height: 46px;
        font-size: .92rem;
    }
}

/* Grid context: the .related-card flex-basis in section 58 is for the rail.
   The grid cards carry h-100, so use that to make them fill their column
   instead of holding a 300px basis. */
.related-card.h-100 {
    flex: 1 1 auto;
    width: 100%;
    scroll-snap-align: none;
}

/* The legacy sheets override Bootstrap's .col-* widths on this page, so the
   project grid sets its own. Explicit widths per breakpoint rather than
   relying on a grid whose state we do not control. */
.related-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .related-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .related-grid > [class*="col-"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        width: 33.3333%;
    }
}


/* =====================================================================
   61. Device frames: no drop shadow
   The phone and browser frames carried a heavy outer shadow
   (0 28px 60px / 0 34px 80px), which reads as a smudge under each device
   on the pale sections and makes the rails look cluttered. The frames now
   sit flat on whatever the section background is.

   The INSET hairlines are kept: they are what draws the bezel edge, not a
   shadow effect. Removing those would flatten the device into a plain
   rounded rectangle.

   Applies wherever the frames are used - homepage showcase, project detail
   pages, about and app development.
   ===================================================================== */
.device-phone {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .13),
        inset 0 1px 1px rgba(255, 255, 255, .22);
}

.device-browser {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Admin console rail: when several console screenshots are supplied the
   single frame becomes a scroller. The pair then stacks rather than sitting
   side by side, because a rail needs the width. */
.admin-pair--rail {
    display: block;
}

    .admin-pair--rail .admin-console-rail {
        position: relative;
    }

    .admin-pair--rail .admin-pair-phone {
        margin: 1.5rem auto 0;
    }

#rail-admin-macfit .screen-rail-item {
    flex: 0 0 min(88vw, 760px);
}

/* Console rail items top-align: the captions wrap to different lengths, so
   stretching left the two screens sitting at different heights. */
.admin-console-rail .app-scroller {
    align-items: flex-start;
}

    .admin-console-rail .screen-rail-item figcaption {
        min-height: 3.2em;
    }

/* The admin console rail was resolving to its content width (684px inside a
   343px parent on a phone), so the second console screen sat outside the
   viewport instead of scrolling. Constrain the rail and its scroller
   explicitly - min-width:0 is the part that lets a flex container actually
   shrink below its content. */
.admin-console-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .admin-console-rail .app-scroller {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

/* =====================================================================
   62. Touch target size
   The footer link lists and the breadcrumb rendered ~20px tall, under the
   24x24 CSS-pixel minimum in WCAG 2.5.8. They sit close together in a
   column, so on a touch screen they are genuinely fiddly rather than just
   technically non-conforming. Padding the anchors gives each a real hit
   area, at the cost of a little breathing space between rows.

   Applied at every width, not only phones: an iPad is a touch device too,
   and scoping this to max-width 767.98px left the links at 20px from
   768px upward.
   ===================================================================== */
.footer .information .info-foot ul li a,
.foot-contact li a {
    display: inline-block;
    padding-block: .3rem;
    min-height: 24px;
}

.bread-crumb li a,
.bread-crumb li span {
    display: inline-block;
    padding-block: .25rem;
    min-height: 24px;
}

/* tel: and mailto: links wherever they appear - the header strip,
   the enquiry panel and the mobile slide-out menu. */
a[href^="tel:"],
a[href^="mailto:"] {
    display: inline-block;
    min-height: 24px;
}

/* =====================================================================
   63. Assistant section (Hullo ChatAI on the MacFit page)
   Copy one side, screenshot the other, mirroring the #chatai section on
   the client's own site. The screenshot is a portrait chat panel, so it
   is capped rather than stretched to the column width.
   ===================================================================== */
.chatai-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
    /* Solid fallback - contrast checkers cannot read a gradient. */
    background-color: #ffffff;
}

.chatai-list {
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

    .chatai-list li {
        position: relative;
        padding: 0 0 1.15rem 2.1rem;
        margin-bottom: 1.15rem;
        border-bottom: 1px solid rgba(16, 42, 90, .08);
    }

        .chatai-list li:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .chatai-list li::before {
            content: "\f0eb";           /* fa-lightbulb-o */
            font-family: FontAwesome;
            position: absolute;
            left: 0;
            top: .1rem;
            color: #2f6df0;
            font-size: 1rem;
        }

.chatai-item-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #102a5a;
    margin-bottom: .3rem;
}

.chatai-item-body {
    display: block;
    color: #5a6c8f;
    line-height: 1.65;
}

.chatai-figure {
    margin: 0;
    text-align: center;
}

    .chatai-figure img {
        display: block;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
        border-radius: 16px;
        border: 1px solid rgba(16, 42, 90, .1);
        box-shadow: 0 10px 34px rgba(16, 42, 90, .1);
    }

    .chatai-figure figcaption {
        max-width: 420px;
        margin: 1rem auto 0;
        font-size: .9rem;
        line-height: 1.6;
        color: #5a6c8f;
    }

/* =====================================================================
   64. Cloudflare Turnstile + the last of the enquiry-form dead space

   Turnstile renders its own iframe at a fixed height, so the only job
   here is to stop it adding a row gutter of its own and to keep the
   corners consistent with the fields above it. data-size="flexible"
   makes the widget fill the column rather than sitting at 300px.

   The honeypot rule matters more than it looks. The "Title" field is a
   spam trap: style.css sets .form-control.ctitle { display: none }, but
   its wrapping .col-12 was left in the grid, so the column still claimed
   a --bs-gutter-y of vertical padding. The form was carrying a visible
   band of empty space that had nothing in it.
   ===================================================================== */
.enquiry-card .turnstile-row {
    margin-top: .1rem;
}

    .enquiry-card .turnstile-row .cf-turnstile {
        display: block;
        min-height: 65px;
    }

    .enquiry-card .turnstile-row iframe {
        border-radius: 12px;
    }

/* Collapse the honeypot's empty column. Browsers without :has() simply
   keep the old gap, so this can only improve things. */
.enquiry-card .row > [class*="col-"]:has(> .ctitle) {
    display: none;
}

/* Last of the spacing: the panel and the gutters both come in again now
   that the dead column is gone. */
.enquiry-card {
    padding: 1.25rem !important;
}

    .enquiry-card .row.g-3 {
        --bs-gutter-x: .45rem;
        --bs-gutter-y: .45rem;
    }

    .enquiry-card textarea.form-control {
        min-height: 80px;
    }

    /* The success panel sat as tall as the submit button for a one-line
       confirmation. */
    .enquiry-card .btn-success {
        padding: .7rem 1rem !important;
        font-size: .92rem !important;
    }

@media (max-width: 575.98px) {
    .enquiry-card {
        padding: 1.1rem !important;
    }
}

/* =====================================================================
   65. The actual cause of the enquiry-form gaps

   Measured in the browser rather than guessed at: every validator span
   rendered at visibility:hidden but 20px tall with a 5.6px margin, so
   each field carried ~26px of permanently empty space beneath it and the
   email field, which has two validators, carried ~52px. That - not the
   panel padding or the row gutters, both of which were already tight -
   is what made the form look full of holes.

   Fixed at source by putting Display="Dynamic" on every validator, which
   makes ASP.NET collapse them with display:none instead of hiding them
   with visibility. The rule below is the belt-and-braces version: it
   catches any validator that is still Static, here or on a form added
   later, because ASP.NET writes the visibility inline where CSS can see
   it. Without !important the inline style would win.

   The two :empty rules deal with the same class of problem from server
   controls that render an empty shell: lblerror is always in the markup
   and only gets text on failure, and the success panel leaves behind a
   bare column when it is invisible.
   ===================================================================== */
.enquiry-card span[id*="Validator"][style*="visibility:hidden"],
.enquiry-card span[id*="Validator"][style*="visibility: hidden"] {
    display: none !important;
}

.enquiry-card .errormsg:empty {
    display: none;
    margin: 0;
}

/* :empty misses this one: the column round the success panel holds a
   newline, so it is not empty, just childless. */
.enquiry-card .row > [class*="col-"]:not(:has(*)) {
    display: none;
}

/* =====================================================================
   66. Large-phone pass (measured at 440x956, iPhone 16 Pro Max)

   Five fixes, all verified in the browser at that width.
   ===================================================================== */

/* ---- 66a. three hero phones, not one -------------------------------- */
/* Section 40 hides the outer two below 768px. That was written for a
   375px viewport, where three rotated frames genuinely did not fit. On a
   440px phone there is room, and one lonely phone undersells the work.

   400px is the dividing line: iPhone 16 Pro (402) and Pro Max (440) and
   most current Androids clear it; an SE at 375 keeps the single phone.

   The frames are narrowed and pulled together with negative margins
   rather than a smaller gap, because rotation does not change an
   element's layout box - only its painted area - so the overlap has to
   come from margin or the group reads as too wide. */
@media (min-width: 400px) and (max-width: 767.98px) {
    .hero-stage {
        gap: 0;
    }

    .hero-phone,
    .hero-phone--centre {
        --phone-w: clamp(104px, 25vw, 132px);
    }

    .hero-phone--left,
    .hero-phone--right {
        display: block;
    }

    .hero-phone--left {
        margin-right: -5%;
        transform: translateY(24px) rotate(-8deg) scale(.86);
    }

    .hero-phone--right {
        margin-left: -5%;
        transform: translateY(24px) rotate(8deg) scale(.86);
    }

    .hero-phone--centre {
        transform: translateY(-6px);
    }

    /* Section 40 flattens the hover state on mobile; restore it here so a
       tap that lands on the stage does not snap the group into a line. */
    .hero-stage:hover .hero-phone--left {
        transform: translateY(18px) rotate(-10deg) scale(.88);
    }

    .hero-stage:hover .hero-phone--right {
        transform: translateY(18px) rotate(10deg) scale(.88);
    }

    .hero-stage:hover .hero-phone--centre {
        transform: translateY(-12px);
    }
}

/* ---- 66b. room to breathe under the h1 ------------------------------ */
/* Was 1.9rem, set when the hero type was full size on a phone. Section 40a
   now shrinks that type so the three app screens fit above it, and at the
   smaller size the old gap read as a hole under the rule. */
@media (max-width: 767.98px) {
    .hero-main .hero-copy .hero-lead {
        margin-top: 1rem;
    }
}

/* ---- 66c. card images run full width -------------------------------- */
/* media-queries.css line 1553 sets .services-col { max-width: 50% !important }
   under 525px, which beat the width:100% in section 12 and left every
   Enterprise Solutions screenshot at half the card. Same family of
   landmine as the rest of that sheet - answered with specificity
   (0,2,1 beats 0,1,0) rather than by editing the legacy file. */
.panel-apps img.services-col {
    max-width: 100% !important;
}

@media (max-width: 525px) {
    /* Half-width cards could live with a short crop; full-width ones look
       like letterboxed strips at the old height. */
    .panel-apps img.services-col {
        height: clamp(200px, 56vw, 300px);
    }
}

/* ---- 66d. contact intro centres on mobile --------------------------- */
/* The form below it is full width and centred, so a left-aligned heading
   above it reads as misaligned rather than deliberate. */
@media (max-width: 991.98px) {
    #contact .col-lg-5 {
        text-align: center;
    }

        /* .botm-line carries mx-0 in the markup for the desktop layout. */
        #contact .col-lg-5 .botm-line {
            margin-left: auto !important;
            margin-right: auto !important;
        }
}

/* ---- 66e. footer is a clean 2x2 ------------------------------------- */
/* The company-details column was col-12, so it dropped to its own full
   width row and left Company stranded beside empty space. It is col-6
   now (see SiteMaster.Master); this stops the long email from pushing
   the narrower column sideways. */
/* At col-6 the address column is ~180px wide. Measured: the email needs
   164px but only 146px was free, so it broke mid-domain ("…appenin.c om"),
   and the title needed 175px of a 180px box so the trademark sign dropped
   to its own line. Buying the space back from the icon gutter and the
   letter-spacing keeps both on one line without shrinking the text much. */
@media (max-width: 991.98px) {
    /* .foot-title is uppercased, which my first estimate missed: the
       rendered "TOTALLY APPENIN (TM)" needs 186px in a 180px box, so the
       trademark sign dropped to its own line. 14px/.05em measures 158px
       and applies to all four titles, so the footer stays consistent. */
    /* .info-foot .foot-title, not .foot-title: media-queries.css has
       .container p { font-size:16px } under 525px, and (0,1,1) beats the
       (0,1,0) of a lone class. That is why the footer titles have been
       rendering at 16px on mobile rather than the .8rem section 53 asks
       for, and why the trademark sign would not fit on the line. */
    .info-foot .foot-title {
        font-size: 14px;
        letter-spacing: .05em;
    }

    /* Same .container p problem, same answer: the tagline was rendering
       larger than the contact details sitting above it. */
    .info-foot .foot-areas {
        font-size: .8rem;
        line-height: 1.5;
    }

    /* Set on the li, not the ul: .foot-contact li carries its own
       font-size further up the sheet, so a rule on the list is inherited
       straight past. Measured 12.8px as the size that fits the email on
       one line inside the 151px the icon gutter leaves. */
    .foot-contact li,
    .foot-contact li a,
    .foot-contact li span {
        font-size: .8rem;
    }

        .foot-contact li {
            gap: .45rem;
            /* A 24px tap target is the floor - see section 62. */
            min-height: 24px;
        }

            .foot-contact li i {
                flex-basis: 22px;
                width: 22px;
                height: 22px;
                font-size: .7rem;
            }

    /* Backstop only: with the above it should never trigger, but a longer
       address later should wrap rather than push the column sideways. */
    .foot-contact a,
    .foot-contact .foot-address {
        overflow-wrap: anywhere;
    }
}

/* ---- 66f. the service dropdown was going green on phones ------------ */
/* media-queries.css has section#contact .btn-ddp { background: #17c572 }
   under 525px, so the homepage select turned solid green below that width
   while every other field stayed white - and while the identical form on
   /contactus stayed white, because that rule needs the #contact section.
   An ID outranks any number of classes, so the answer has to carry one
   too: (1,2,0) beats (1,1,1). */
#contact .enquiry-card .form-select,
#contact .enquiry-card .form-select.btn-ddp {
    background-color: #fff;
    color: #17233d;
}

/* ---- 66g. the address column keeps the 400px floor too -------------- */
/* Pairing it with Company (66e) is right on a 440px phone but not on a
   375px one: at 172px the title and the email both wrap again, which is
   the problem 66e set out to fix. Below 400px it goes back to its own
   full-width row. Bootstrap has no 400px breakpoint, so this overrides
   .col-6 directly - (0,3,0) against (0,1,0). */
@media (max-width: 399.98px) {
    .information .row > .col-6:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* =====================================================================
   67. Follow-ups from the 440px review
   ===================================================================== */

/* ---- 67a. the old mobile margin override on .botm-line -------------- */
/* Section 20 reset the bar to margin:1rem 0 under 1199px, which now also
   undoes the extra breathing room above it. Restated so the spacing is
   the same at every width. */
/* Has to be hr.botm-line with !important, not .botm-line: style.css has
   hr.botm-line { margin: 0 auto !important }, which is (0,1,1) and beat
   the class outright - so the bar was taking all of its spacing from the
   line box and none from the margin. Same specificity here, and
   home-modern.css is linked last, so source order decides it.

   That legacy rule is also why the markup carries .mx-0 on 57 of these:
   the helper existed to undo an auto margin that inline-block now
   ignores anyway. Harmless, so left in place. */
hr.botm-line {
    margin: 2.25rem 0 1.5rem !important;
}

@media (max-width: 1199.98px) {
    hr.botm-line {
        margin: 1rem 0 1.35rem !important;
    }
}

/* Section 66d centred the contact column on mobile; with the bar now
   inline-block it inherits that automatically, so the auto-margin
   override there is redundant and would fight the new rule. */
@media (max-width: 991.98px) {
    #contact .col-lg-5 .botm-line {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---- 67b. Trusted By matches every other section -------------------- */
/* new-age.css has .content-section#portfolio { padding-top: 0 } under
   768px - specificity (1,1,0), so it beat the .content-section rule and
   Trusted By alone lost its top padding on phones and tablets while
   every neighbouring section kept 3rem. Answered at equal specificity;
   home-modern.css is linked last, so source order settles it. */
.content-section#portfolio {
    padding-top: clamp(4rem, 8vw, 3.5rem);
    padding-bottom: clamp(4rem, 8vw, 3.5rem);
}

@media (max-width: 575.98px) {
    .content-section#portfolio {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ---- 67c. the contained phone shot needs a taller box --------------- */
/* Contain fits by the constrained axis, and a 560x1217 phone screenshot
   in a landscape card is constrained by height - so at the shared 230px
   it rendered only ~106px wide and read as a thumbnail floating in white.
   A taller box buys width back. (0,3,1) so it clears the 66c height,
   which is (0,2,1). */
.panel-apps img.services-col.services-col--app {
    height: 300px;
}

@media (max-width: 991.98px) {
    .panel-apps img.services-col.services-col--app {
        height: clamp(300px, 72vw, 360px);
    }
}

/* =====================================================================
   68. Star rating colour + the digital marketing section
   ===================================================================== */

/* ---- 68a. .starred back to goldenrod -------------------------------- */
/* style.css declares .starred twice: goldenrod at line 65, then
   #fdc916 at 17334. Both carry !important and both are (0,1,0), so the
   later one silently won and the stars have been rendering bright yellow.
   home-modern.css is linked last, so restating it here settles it. */
.starred {
    color: goldenrod !important;
}

/* ---- 68b. marketing section copy ------------------------------------ */
/* The cards were an icon and a title with no content at all, which read
   as a placeholder. They carry a line of copy now, so they need a
   readable measure and a consistent height. */
.marketing-lead {
    max-width: 46rem;
    margin: 1.5rem auto 0;
    color: #14304d;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    font-weight: 500;
    line-height: 1.6;
}

.marketing-copy {
    margin: .6rem 0 0;
    color: #47566b;
    font-size: .92rem;
    line-height: 1.55;
}

/* The cards sit in a 3x2 grid on desktop and 2x3 on phones, so every row
   has to be full - an orphan card on its own row is what made the old
   four-card layout look unfinished at tablet widths. */
.marketing-grid .mob-services {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .marketing-grid .sub-heading {
        margin-bottom: 0;
        font-size: 1.05rem;
        line-height: 1.35;
    }

@media (max-width: 575.98px) {
    .marketing-grid .marketing-copy {
        font-size: .86rem;
    }

    .marketing-grid .marketing-icon {
        width: 58px;
        height: 58px;
        font-size: 1.5rem;
    }
}

/* =====================================================================
   69. Web design page: four pillars + industries

   This page sells design, so it has to look designed. Both new sections
   lean on colour and shape rather than another list of grey cards: the
   pillars carry a tinted accent each, and the industry tiles pick up a
   gradient edge on hover.
   ===================================================================== */

/* ---- 69a. the four pillars ------------------------------------------ */
.pillar-section {
    padding-top: clamp(2.5rem, 5vw, 3.25rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 3.25rem) !important;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3ff 100%);
    background-color: #f6f9ff;
}

.pillar-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.35rem;
    border-radius: var(--ta-radius);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .pillar-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 62px rgba(15, 23, 42, .14);
    }

.pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 16px;
    font-size: 1.35rem;
    color: #fff;
}

/* One accent per pillar, in reading order, so the row has some life in
   it without four different card treatments. */
.pillar-grid > div:nth-child(1) .pillar-icon { background: linear-gradient(135deg, #0d6efd, #2f8bff); }
.pillar-grid > div:nth-child(2) .pillar-icon { background: linear-gradient(135deg, #00b4db, #37d6e6); }
.pillar-grid > div:nth-child(3) .pillar-icon { background: linear-gradient(135deg, #b8860b, goldenrod); }
.pillar-grid > div:nth-child(4) .pillar-icon { background: linear-gradient(135deg, #16a34a, #35c46b); }

/* h2 because these are section-level points, but they must not compete
   with the real section titles around them. */
.pillar-title {
    margin: 0 0 .5rem;
    color: var(--ta-navy);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.pillar-copy {
    margin: 0;
    color: #47566b;
    font-size: .92rem;
    line-height: 1.55;
}

/* ---- 69b. industries ------------------------------------------------ */
.industry-tile {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    border-radius: var(--ta-radius);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
    /* The gradient edge lives on a pseudo-element so it can fade in
       without the border re-flowing the card by a pixel on hover. */
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

    .industry-tile::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--ta-cyan), var(--ta-blue), goldenrod);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .industry-tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 58px rgba(15, 23, 42, .13);
    }

        .industry-tile:hover::before {
            opacity: 1;
        }

    .industry-tile h3 {
        margin: 0 0 .45rem;
        color: var(--ta-navy);
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .industry-tile p {
        margin: 0;
        color: #47566b;
        font-size: .89rem;
        line-height: 1.5;
    }

.industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .9rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 180, 219, .14), rgba(13, 110, 253, .14));
    color: var(--ta-blue);
    font-size: 1.2rem;
}

.industry-footnote {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    color: #5a6b83;
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .pillar-card,
    .industry-tile {
        padding: 1.15rem 1rem;
    }

    .pillar-icon,
    .industry-icon {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
    }

    .industry-tile h3 {
        font-size: .95rem;
    }

    .industry-tile p,
    .pillar-copy {
        font-size: .84rem;
    }
}

/* ---- 69d. the How We Design illustration ---------------------------- */
/* Vertically centred against the copy column rather than pinned to the
   top: the copy runs to four paragraphs, so centring keeps the artwork
   sitting with the middle of the argument instead of trailing off at the
   bottom of a tall column. No caption, so the image speaks for itself. */
.design-figure {
    margin: 0;
}

    .design-figure img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 460px;
        margin-inline: auto;
    }

@media (max-width: 991.98px) {
    .design-figure img {
        max-width: 380px;
    }
}

/* ---- 69e. the AI agent figure --------------------------------------- */
/* .chatai-figure img frames a photograph, so it adds a border, a radius
   and a shadow. This one is an SVG that already draws its own browser
   chrome and drop shadow, so all three double up on it. */
#ai-agent .chatai-figure img {
    max-width: 440px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---- 69f. the AI agent section runs dark ---------------------------- */
/* .chatai-section is white to pale blue, which on this page sat between
   the pillar band (also pale blue) and a white section, so the whole
   upper page read as one flat stretch. Dark breaks it up, marks the agent
   out as the premium add-on it is, and gives the white browser mockup
   something to lift off. #ai-agent is (1,0,0) so it beats the shared
   class without touching the MacFit page that also uses it. */
#ai-agent {
    background: radial-gradient(circle at 12% 18%, rgba(0, 180, 219, .22), transparent 30rem),
                linear-gradient(135deg, #0b2135 0%, #143a5c 100%);
    /* Solid fallback - contrast checkers cannot read a gradient. */
    background-color: #0b2135;
}

    /* Everything below is the light-on-dark inversion of section 63. */
    #ai-agent .section-title {
        color: #ffffff;
    }

    #ai-agent .caps.text-primary {
        color: #5fd8e8 !important;
    }

    #ai-agent .page-copy-lead {
        color: #c7d6e8;
    }

    #ai-agent .chatai-item-title {
        color: #ffffff;
    }

    #ai-agent .chatai-item-body {
        color: #a8bdd4;
    }

    #ai-agent .chatai-list li {
        border-bottom-color: rgba(255, 255, 255, .12);
    }

        #ai-agent .chatai-list li::before {
            color: #5fd8e8;
        }

/* ---- 69g. the closing line of How We Design ------------------------- */
/* Written as the payoff of the section, so it is set apart from the three
   paragraphs above it rather than being a fourth one of the same weight.
   A rule and a colour shift do that without resorting to bold, which at
   this length would read as shouting. */
.page-copy-close {
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(15, 23, 42, .1);
    color: var(--ta-navy);
    font-size: clamp(1.05rem, 1.35vw, 1.18rem);
    font-weight: 600;
    line-height: 1.6;
}

/* =====================================================================
   70. Courier page: integration and fleet sections
   ===================================================================== */

/* The integration figure is a diagram on a white ground, so the border,
   radius and shadow .chatai-figure adds for the MacFit photograph are
   wrong here in the same way they were on #ai-agent. */
#integration .chatai-figure img {
    max-width: 520px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Tinted so the three consecutive light sections on this page do not run
   together, but not dark: #integration sits between a dark features band
   and the benefits list, and a second dark section here would make the
   page read as striped. */
.fleet-section {
    background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    background-color: #f7f9fd;
}

.fleet-figure {
    margin: 0;
}

    .fleet-figure img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 500px;
        margin-inline: auto;
    }

/* ---- 70a. the paired overview figures ------------------------------- */
/* The console is landscape and the driver app portrait, so side by side
   they are given 8 and 4 columns and centred on each other. Without the
   height cap the phone would stand nearly twice as tall as the console
   and drag the row out. */
.overview-figure {
    margin: 0;
}

    .overview-figure img {
        display: block;
        width: 100%;
        height: auto;
        /* Its own natural width. Inside a column this never bites, but a
           standalone figure would otherwise stretch to the full container
           and upscale past the detail the drawing actually carries. */
        max-width: 920px;
        margin-inline: auto;
    }

    .overview-figure figcaption {
        margin: .9rem auto 0;
        color: #5a6b83;
        font-size: .86rem;
        line-height: 1.5;
        text-align: center;
    }

.overview-figure--phone img {
    max-width: 230px;
}

@media (min-width: 992px) {
    .overview-figure--phone img {
        max-height: 460px;
        width: auto;
    }
}

@media (max-width: 991.98px) {
    /* Stacked, so the phone does not need to hold its own against the
       console and can come back up to a readable size. */
    .overview-figure--phone img {
        max-width: 260px;
    }
}

/* ---- 70b. the digital marketing report figure ------------------------ */
/* Portrait, and sat in a 5 column slot beside three long paragraphs. The
   height cap stops it towering over the copy on a wide screen; stacked on
   a phone it is allowed back up, where it is the only thing on the row and
   the small print inside it needs the pixels. */
.overview-figure--report img {
    max-width: 100%;
}

/* Centred in its column, horizontally and vertically. The row handles the
   vertical half with align-items-center; this handles the horizontal, and
   centres the text under it too if a caption is ever added. */
.overview-figure--report {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .overview-figure--report img {
        margin-inline: auto;
    }

@media (max-width: 991.98px) {
    .overview-figure--report img {
        max-width: 460px;
    }
}

/* ---- 70d. app page: the illustrated benefits list -------------------- */
/* A variant of .benefit-list, NOT a redefinition of it.

   It was written as a plain .benefit-list override and that broke the other
   thirteen pages that use the list. The original (section 56) hangs a Font
   Awesome tick off li::before, absolutely positioned at top: .1rem. The
   override added padding-top and a border-top to every li after the first,
   which pushed the text down while the absolutely positioned tick stayed
   where it was, so from the second item on every tick floated above its own
   line with a stray rule between them.

   Scoped to the modifier class, both can exist: plain .benefit-list keeps its
   ticks, .benefit-list--icons gets the badges. */
.benefit-list--icons {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .benefit-list--icons li {
        display: flex;
        gap: 1.1rem;
        align-items: flex-start;
        /* Undo the original's room for the tick: this variant has a real
           element in front of the text instead. */
        padding-left: 0;
        margin-bottom: 0;
    }

        /* The tick belongs to the plain list. Here the badge replaces it. */
        .benefit-list--icons li::before {
            content: none;
        }

        .benefit-list--icons li + li {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #dde5f0;
        }

    .benefit-list--icons h3 {
        margin: 0 0 .4rem;
        color: #102a43;
        font-size: 1.08rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .benefit-list--icons p {
        margin: 0;
        color: #5a6b83;
        font-size: .94rem;
        line-height: 1.65;
    }

.benefit-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d6efd 0%, #00b4db 100%);
    background-color: #0d6efd;
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(13, 110, 253, .22);
}

/* The section lead sits under a centred rule, so cap it rather than let it
   run the full container width and lose the centre. */
.impact-section .section-lead {
    max-width: 54rem;
}

@media (max-width: 575.98px) {
    /* The icon badge costs 46px plus the gap, which is a lot of a 375px
       screen. Stack it above the text instead of squeezing the copy. */
    .benefit-list--icons li {
        flex-direction: column;
        gap: .75rem;
    }
}

/* ---- 70c. the HTML sitemap ------------------------------------------ */
/* Built from sitemap.xml by sitemap.aspx.vb, so the columns here are
   whatever that file lists. Three columns on a desktop, two on a tablet,
   one on a phone. */
.sitemap-card {
    padding: 1.5rem 1.4rem;
    border-radius: var(--ta-radius);
    background: #fff;
    border: 1px solid #e2e8f2;
    box-shadow: 0 10px 30px rgba(16, 42, 67, .06);
}

.sitemap-heading {
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #eef2f8;
    font-size: 1.05rem;
    font-weight: 700;
    color: #102a43;
}

.sitemap-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sitemap-list li + li {
        margin-top: .55rem;
    }

    .sitemap-list a {
        color: #5a6b83;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color .15s ease, border-color .15s ease;
    }

        .sitemap-list a:hover,
        .sitemap-list a:focus-visible {
            color: #0d6efd;
            border-bottom-color: currentColor;
        }

/* =====================================================================
   71. Quotation page: the measured impact band

   One real figure, given room, rather than a row of four stat cards with
   three of them invented. The source line under it is not decoration:
   800% is a big claim and it came from one installation, so the page has
   to say that rather than let it read as an industry average.
   ===================================================================== */
.impact-section {
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 100%);
    background-color: #f6f9ff;
}

.impact-figure-card {
    padding: 2.25rem 1.75rem;
    border-radius: var(--ta-radius);
    background: linear-gradient(135deg, #102a43 0%, #1d4b74 100%);
    background-color: #102a43;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    text-align: center;
}

.impact-figure {
    display: block;
    color: #ffffff;
    font-size: clamp(3.6rem, 9vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.impact-unit {
    display: block;
    margin-top: .5rem;
    color: #5fd8e8;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.impact-source {
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: #b7c8dc;
    font-size: .84rem;
    line-height: 1.55;
}

/* ---- 71a. the quote to order flow diagram --------------------------- */
/* Wider than the other figures (1160) because it carries four stages plus
   a reporting band, so it gets the full container rather than the 920 cap
   the overview figures use. */
.flow-section {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    background-color: #ffffff;
}

.flow-figure {
    margin: 0;
}

    .flow-figure img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 1160px;
        margin-inline: auto;
    }

/* ---- 71b. the flow diagram scrolls on small screens ----------------- */
/* Shrunk to fit a 440px phone the whole thing lands at 0.35 scale, which
   puts its labels at about 4px. Below the desktop breakpoint it keeps a
   legible minimum width and scrolls sideways instead, the same bargain
   the screen rails make. Scrollbar hidden to match them. */
.flow-scroll {
    overflow: visible;
}

.flow-hint {
    display: none;
}

@media (max-width: 991.98px) {
    .flow-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .flow-scroll::-webkit-scrollbar {
            display: none;
        }

        .flow-scroll img {
            min-width: 880px;
            max-width: none;
        }

    .flow-hint {
        display: block;
        margin: .9rem 0 0;
        color: #8fa0b6;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-align: center;
    }

        .flow-hint i {
            margin-right: .4rem;
        }
}

/* ---- 71c. overview figures stacked beside the copy ------------------ */
/* In a 5-column well the console is about 430px, so the phone has to be
   held back or it would stand taller than the console is wide and drag
   the column past the copy it is meant to sit beside. */
.overview-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

    .overview-stack .overview-figure--phone img {
        max-width: 200px;
    }

@media (min-width: 992px) {
    .overview-stack .overview-figure--phone img {
        max-height: 360px;
        width: auto;
    }
}

@media (max-width: 991.98px) {
    /* Stacked under the copy now, so they can both come back up. */
    .overview-stack {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

        .overview-stack .overview-figure {
            flex: 1 1 0;
            min-width: 0;
        }

        .overview-stack .overview-figure--phone {
            flex: 0 0 34%;
        }

            .overview-stack .overview-figure--phone img {
                max-width: 100%;
            }
}

@media (max-width: 575.98px) {
    .overview-stack {
        flex-direction: column;
        gap: 1.75rem;
    }

        .overview-stack .overview-figure--phone img {
            max-width: 230px;
        }
}

/* =====================================================================
   72. Reveal on scroll

   The .reveal class is added by js/reveal.js, never by the markup. That
   way the hidden state only ever exists when the script that un-hides it
   is running: no JS, no observer support, or a failed request all leave
   the page exactly as it is today rather than blank.

   It animates `translate` rather than `transform` on purpose. Several of
   these components already use `transform` for a hover lift or a rotation
   (.feature-item, .related-card, .hero-phone), and animating `transform`
   here would overwrite those. `translate` is a separate property, so the
   two compose; a browser without it just fades, which is fine.
   ===================================================================== */
.reveal {
    opacity: 0;
    translate: 0 20px;
    transition: opacity .62s cubic-bezier(.22, .68, .26, 1),
                translate .62s cubic-bezier(.22, .68, .26, 1);
}

    .reveal.is-revealed {
        opacity: 1;
        translate: none;
    }

/* The script bails out before adding the class at all, so this is a
   backstop for a preference that changes after load. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-revealed {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   73. Hullo ChatAI widget

   Drawn by js/chatai.js, and only when the server says the assistant is
   configured. Everything is scoped under .chatai so none of it can reach the
   rest of the page, which matters more than usual here: this stylesheet loads
   after about nine thousand lines of legacy CSS, and the widget is injected
   straight into <body>, outside every container those rules expect.
   ===================================================================== */
.chatai {
    /* The panel below is visibility:hidden while closed but still takes up
       its box, so this container was a 380x598 invisible rectangle pinned
       over the bottom right of the viewport, swallowing every click that
       landed in it: carousel arrows, nav links, anything underneath. The
       container takes no pointer events; the two things a visitor can
       actually click take them back. */
    pointer-events: none;
    position: fixed;

    /* Bottom LEFT. The scroll-to-top button is fixed bottom right and the
       two sat on top of each other: a 48px overlap on a phone, where the
       launcher covered the scroll button completely and took its clicks.
       Nudging this one sideways only narrowed the gap, so they get a corner
       each. */
    left: 1.25rem;
    right: auto;
    bottom: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chatai-launcher {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #bc0dfd 0%, #00b4db 100%);
    background-color: #0d6efd;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(13, 110, 253, .32);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .chatai-launcher:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(13, 110, 253, .38);
    }

    .chatai-launcher:focus-visible {
        outline: 3px solid #ffd000;
        outline-offset: 2px;
    }

/* Present but hidden, so opening it does not reflow the page. */
.chatai-panel {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 2.5rem));
    height: min(540px, calc(100vh - 7rem));
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom left;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.chatai.is-open .chatai-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.chatai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    background: linear-gradient(135deg, #0d6efd 0%, #00b4db 100%);
    background-color: #0d6efd;
    color: #fff;
}

.chatai-title {
    font-weight: 700;
    font-size: .98rem;
}

.chatai-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

    .chatai-close:focus-visible {
        outline: 2px solid #ffd000;
        outline-offset: 2px;
    }

.chatai-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    background: #f6f9ff;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.chatai-msg {
    display: flex;
}

.chatai-msg--user {
    justify-content: flex-end;
}

.chatai-bubble {
    max-width: 85%;
    padding: .65rem .85rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid #e2e8f2;
    color: #102a43;
}

.chatai-msg--user .chatai-bubble {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.chatai-bubble--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.chatai-bubble a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.chatai-msg--assistant .chatai-bubble a {
    color: #0d6efd;
}

.chatai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chatai-chip {
    padding: .4rem .7rem;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: #fff;
    color: #0d6efd;
    font-size: .8rem;
    cursor: pointer;
}

    .chatai-chip:hover {
        background: #eef5ff;
    }

/* Three dots while the service is thinking. */
.chatai-thinking {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .chatai-thinking span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #8fa0b6;
        animation: chatai-blink 1.2s infinite ease-in-out;
    }

        .chatai-thinking span:nth-child(2) {
            animation-delay: .18s;
        }

        .chatai-thinking span:nth-child(3) {
            animation-delay: .36s;
        }

@keyframes chatai-blink {
    0%, 80%, 100% {
        opacity: .25;
    }

    40% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chatai-panel,
    .chatai-launcher {
        transition: none;
    }

    .chatai-thinking span {
        animation: none;
        opacity: .6;
    }
}

.chatai-form {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid #e2e8f2;
    background: #fff;
}

.chatai-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid #cfd8e6;
    border-radius: 10px;
    font: inherit;
    font-size: .9rem;
    color: #102a43;
}

    .chatai-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, .16);
        outline: none;
    }

.chatai-send {
    flex: 0 0 auto;
    width: 40px;
    border: 0;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    cursor: pointer;
}

    .chatai-send:disabled {
        opacity: .5;
        cursor: default;
    }

.chatai-foot {
    margin: 0;
    padding: 0 .75rem .7rem;
    background: #fff;
    color: #8fa0b6;
    font-size: .72rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 575.98px) {
    .chatai {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        align-items: stretch;
    }

    .chatai-panel {
        width: auto;
        height: min(70vh, 520px);
    }

    .chatai-launcher {
        /* The panel still spans the width; only the launcher sits left, clear
           of the scroll-to-top button in the opposite corner. */
        align-self: flex-start;
    }

    /* The label costs most of a narrow screen; the icon carries it. */
    .chatai-launcher-text {
        display: none;
    }
}

/* =====================================================================
   74. The fanned phone trio

   The same arrangement as the home page hero, lifted out so a content
   section can use it: three screens fanned as one picture rather than a
   horizontal rail the visitor has to scroll. A rail hides two of the three
   screenshots behind an interaction most people never perform, which is a
   poor trade when the screenshots are the point of the section.

   Unlike .hero-stage this carries no glow or grid backdrop, and the phones
   are sized for a half-width column rather than a hero.
   ===================================================================== */
.phone-trio {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.3rem, 1.2vw, .9rem);
    padding: clamp(1rem, 3vw, 2.25rem) 0;
    isolation: isolate;
}

.phone-trio__item {
    --phone-w: clamp(120px, 13.5vw, 184px);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.phone-trio__item--left {
    z-index: 1;
    transform: translateY(26px) rotate(-7deg) scale(.88);
}

.phone-trio__item--centre {
    z-index: 3;
}

.phone-trio__item--right {
    z-index: 1;
    transform: translateY(26px) rotate(7deg) scale(.88);
}

/* A small spread on hover, the same gesture the hero makes. */
.phone-trio:hover .phone-trio__item--left {
    transform: translateY(18px) rotate(-10deg) scale(.9);
}

.phone-trio:hover .phone-trio__item--right {
    transform: translateY(18px) rotate(10deg) scale(.9);
}

.phone-trio:hover .phone-trio__item--centre {
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .phone-trio__item,
    .phone-trio:hover .phone-trio__item--left,
    .phone-trio:hover .phone-trio__item--right,
    .phone-trio:hover .phone-trio__item--centre {
        transition: none;
    }

    .phone-trio:hover .phone-trio__item--left {
        transform: translateY(26px) rotate(-7deg) scale(.88);
    }

    .phone-trio:hover .phone-trio__item--right {
        transform: translateY(26px) rotate(7deg) scale(.88);
    }

    .phone-trio:hover .phone-trio__item--centre {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    /* All three stay, unlike the hero, because here they are the product
       rather than decoration. They shrink and the fan tightens so the row
       still fits a 375px screen without overflowing it. */
    .phone-trio {
        gap: .15rem;
        padding: 1rem 0 .5rem;
    }

    .phone-trio__item {
        --phone-w: clamp(92px, 27vw, 118px);
    }

    .phone-trio__item--left {
        transform: translateY(14px) rotate(-5deg) scale(.92);
    }

    .phone-trio__item--right {
        transform: translateY(14px) rotate(5deg) scale(.92);
    }

    /* Hover is a pointer gesture; on a touch screen it sticks after a tap. */
    .phone-trio:hover .phone-trio__item--left {
        transform: translateY(14px) rotate(-5deg) scale(.92);
    }

    .phone-trio:hover .phone-trio__item--right {
        transform: translateY(14px) rotate(5deg) scale(.92);
    }

    .phone-trio:hover .phone-trio__item--centre {
        transform: none;
    }
}

/* The case study drawing sits above the two stat cards in the same column,
   so it is capped and centred rather than stretching to the column width. */
.case-figure {
    margin: 0 0 1.75rem;
    text-align: center;
}

    .case-figure img {
        max-width: 420px;
    }

/* =====================================================================
   75. One family, every breakpoint

   The page used four typefaces on a phone and one on a desktop. Measured
   across 47 text elements: desktop was Inter for 41 of them, mobile split
   Inter 29 / Rubik 11 / Proxima Nova 2, so eleven elements changed face at
   the breakpoint - section leads, the AI copy, card descriptions, the
   footer titles and every h3.

   The cause is css/media-queries.css line 6115, which sets
   .container p { font-family: 'Rubik' } inside a mobile media query, plus
   Proxima Nova arriving on headings from the legacy theme. Rubik really is
   loaded (css/style.css @font-face, /fonts/Rubik-VariableFont_wght.ttf), so
   it rendered rather than quietly falling back.

   Section 52 already forced Inter on the hero lead and the buttons for the
   same reason; this finishes the job for body text and headings.

   Deliberately NOT targeting <i> or [class*="icon-"]: FontAwesome and
   simple-line-icons draw their glyphs through font-family, so including
   them here would replace every icon on the site with a letter.
   ===================================================================== */
body,
h1, h2, h3, h4, h5, h6,
p, li, blockquote, figcaption, label,
.btn, .btn-xl, button,
input, select, textarea {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Two selectors that outrank the bare h3 above and so kept Proxima Nova:
   style.css line 17425 (.landing-container h3) and the third-party sheet at
   fonts.cdnfonts.com/css/proxima-nova-2, which is cross-origin and cannot be
   read from script - it was found by elimination, from the computed value
   "Proxima Nova", Helvetica, Arial on h3.sub-heading. */
.landing-container h3,
h3.sub-heading,
.sub-heading {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* =====================================================================
   76. Service page lists

   The service pages run paragraph, list, paragraph, list, because each
   paragraph introduces the list under it. The lists sit inline in the copy
   column rather than in a card of their own, so they read as part of the
   sentence above them instead of as a separate panel.
   ===================================================================== */
.service-list {
    margin: 1.25rem 0 1.75rem;
    padding: 1.25rem 1.4rem;
    background: #f6f9ff;
    border: 1px solid #e2e8f2;
    border-left: 4px solid #0d6efd;
    border-radius: var(--ta-radius);
}

    /* .industry-title is !important on colour, size and line-height (section
       59) because it normally sits inside the dark industry-card. Here it sits
       on a pale panel, so each of those three has to be beaten by name.
       Without this the heading is white on #f6f9ff - a 1.05 contrast ratio. */
    .service-list h3.industry-title {
        margin: 0 0 .85rem;
        color: #102a43 !important;
        font-size: 1rem !important;
        font-weight: 700;
        line-height: 1.4 !important;
    }

    .service-list .industry-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .service-list .industry-tags li {
            margin: 0;
            padding: .4rem .8rem;
            background: #fff;
            border: 1px solid #dbe6f5;
            border-radius: 999px;
            color: #334e68;
            font-size: .9rem;
            line-height: 1.4;
        }

@media (max-width: 575.98px) {
    .service-list {
        padding: 1rem 1.1rem;
    }

        .service-list .industry-tags li {
            font-size: .85rem;
        }
}

/* =====================================================================
   77. Service cross-links

   The foot of each service page lists every other service. The old tiles
   were a name and an icon only, which left a visitor guessing which of
   nine to click, so each card now carries one line on what the service
   actually is.

   These sit in .content-section-2, whose section 32 rules colour every
   h2/h3 white. The name is a <span> rather than a heading so it is not
   caught by that, and so the whole card can stay a single <a>.
   ===================================================================== */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem 1.3rem;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--ta-radius);
    text-decoration: none;
    /* The gradient edge is a pseudo-element so hover does not re-flow the
       card by the width of a border. */
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}

    .service-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--ta-cyan), var(--ta-blue), goldenrod);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .service-card:hover,
    .service-card:focus-visible {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .26);
        text-decoration: none;
    }

        .service-card:hover::before,
        .service-card:focus-visible::before {
            opacity: 1;
        }

    .service-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-bottom: .95rem;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--ta-cyan), var(--ta-blue));
        color: #fff;
        font-size: 1.25rem;
        flex: 0 0 auto;
    }

    .service-card__name {
        display: block;
        margin-bottom: .4rem;
        color: #fff;
        font-size: 1.04rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .service-card__what {
        display: block;
        color: rgba(255, 255, 255, .78);
        font-size: .9rem;
        line-height: 1.55;
    }

/* Two up on tablets, one up on phones, where three columns of a sentence
   each would wrap to five lines apiece. */
@media (max-width: 575.98px) {
    .service-card {
        padding: 1.15rem 1.1rem;
    }

        .service-card__icon {
            width: 40px;
            height: 40px;
            margin-bottom: .75rem;
            font-size: 1.1rem;
        }

        .service-card__name {
            font-size: .98rem;
        }

        .service-card__what {
            font-size: .86rem;
        }
}