/* ==========================================================================
   NGILANDI AGENCIES - BRAND ACCENTS
   --------------------------------------------------------------------------
   Loads after light-theme.css. Scoped to a specific list of refinements:

     1. Nav links hover red (every page)
     2. Scroll-to-top indicator on the right runs red
     3. Hero shape at top-left goes dark navy instead of pale lilac
     4. Every section eyebrow - and the rules either side of it - goes red
     5. "Our Recent Projects." becomes a dark navy section
     6. "Our Expertise" gains breathing room from the band above it
     7. "Latest Insight" gains breathing room from the band above it
     8. Footer link hover goes red

   No layout or structural changes.
   ========================================================================== */

body.active-light-mode {
    --nga-navy-950: #0D1338;
    --nga-band: linear-gradient(155deg, #1F2870 0%, #141B52 52%, #0D1338 100%);
    /* Brand red reads 4.8:1 as text on white, so it stays for type and rules.
       White on brand red is only 4.4:1, so red *surfaces* use the deeper
       ramp below - 5.1:1 to 6.9:1 against white. */
    --nga-red-surface: linear-gradient(140deg, #D81A1F 0%, #B31418 100%);
    --nga-red-solid: #C8161B;
    /* lifted red for use on navy, where brand red sits too dark */
    --nga-red-on-navy: #FF6A6E;
}


/* ==========================================================================
   1. NAVIGATION HOVER
   --------------------------------------------------------------------------
   custom-header.css pins these at (0,4,3) with !important, so the selectors
   here carry an extra class to land.
   ========================================================================== */
body.active-light-mode .tmp-header .mainmenu-nav .mainmenu>li>a:hover,
body.active-light-mode .mainmenu-nav .mainmenu>li>a:hover,
body.active-light-mode .mainmenu-nav .mainmenu>li:hover>a,
body.active-light-mode .popup-mobile-menu .mainmenu li a:hover,
body.active-light-mode .popup-mobile-menu .mainmenu .has-droupdown .submenu li a:hover {
    color: var(--nga-red) !important;
}

body.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a:hover,
body.active-light-mode .submenu li a:hover {
    color: var(--nga-red) !important;
    background: var(--nga-red-50) !important;
}

/* the sliding underline on the one-page nav picks up the same accent */
body.active-light-mode .mainmenu-nav.onepagenav .mainmenu>li>a::after {
    background: var(--nga-red);
}

body.active-light-mode .tmp-header .header-right i:hover {
    color: var(--nga-red) !important;
}


/* ==========================================================================
   2. SCROLL-TO-TOP INDICATOR (right edge)
   ========================================================================== */

/* the thin vertical progress rule */
body.active-light-mode .scrollbar-v {
    background: var(--nga-red);
}

body.active-light-mode .scrollbar-v::before {
    background: rgba(237, 31, 36, .18);
}

/* the "Scroll to top" pill beside it */
body.active-light-mode .float-text.show-on-scroll span a,
body.active-light-mode .show-on-scroll span a {
    background: var(--nga-red-solid);
    color: #fff;
    box-shadow: 0 8px 24px rgba(200, 22, 27, .28);
}

body.active-light-mode .float-text.show-on-scroll span a:hover,
body.active-light-mode .show-on-scroll span a:hover {
    background: var(--nga-red);
    color: #fff;
}

/* the template's alternate back-to-top button, if a page uses it. Its visible
   face is the ::after layer, so that has to be repainted too. */
body.active-light-mode #scrollUp {
    background: var(--nga-red-solid);
    color: #fff;
}

body.active-light-mode #scrollUp::after {
    background: var(--nga-red-solid);
}

body.active-light-mode #scrollUp::before {
    background: rgba(200, 22, 27, .22);
}


/* ==========================================================================
   3. HERO SHAPE, TOP LEFT
   --------------------------------------------------------------------------
   The artwork itself is now a navy gradient; light-theme.css was holding it
   at 10% opacity, which is what made it read as pale lilac.
   ========================================================================== */
body.active-light-mode .banner-two-shape-control .shape-left-top img,
body.active-light-mode .banner-two-shape-control .shape-right-bottom img {
    opacity: 1;
}

body.active-light-mode .inverweb-side-bar-close .shape-right-top img {
    opacity: .14;
}


/* ==========================================================================
   4. SECTION EYEBROWS AND THEIR RULES
   --------------------------------------------------------------------------
   Every section pairs a small label with a large heading. The small one goes
   red; the heading stays ink.
   ========================================================================== */
body.active-light-mode .tmp-section-title-border .subtitle,
body.active-light-mode .tmp-section-title-border .subtitle .subtitle-text,
body.active-light-mode .section-title .subtitle,
body.active-light-mode .section-head .section-sub-title span,
body.active-light-mode .section-sub-title span {
    color: var(--nga-red) !important;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.active-light-mode .tmp-section-title-border .subtitle .number {
    color: var(--nga-navy);
    opacity: .55;
}

/* style.css sets the rule height at (0,3,0) via
   `.pres-line-separator-wrapper.text-center .line-separator`, so these need
   one more class to win. */
body.active-light-mode .line-separator,
body.active-light-mode .pres-line-separator-wrapper .line-separator,
body.active-light-mode .pres-line-separator-wrapper.text-center .line-separator.line-right {
    background-image: linear-gradient(90deg, rgba(237, 31, 36, .9), rgba(237, 31, 36, 0));
    height: 2px;
    border-radius: 2px;
    width: 56px;
}

body.active-light-mode .pres-line-separator-wrapper .line-separator.line-left,
body.active-light-mode .pres-line-separator-wrapper.text-center .line-separator.line-left {
    background-image: linear-gradient(-90deg, rgba(237, 31, 36, .9), rgba(237, 31, 36, 0));
}


/* ==========================================================================
   4b. SERVICE CARDS AS PHOTO CARDS
   --------------------------------------------------------------------------
   Every card already contains a decorative `.shape-service-1` layer that the
   template hides in light mode. Rather than adding markup, that layer becomes
   the photograph, with a navy-to-black scrim over it and the copy in white.
   ========================================================================== */
body.active-light-mode .service.service__style--1.service-photo-card {
    min-height: 430px;
    overflow: hidden;
    border-radius: var(--radius);
}

/* the photo layer */
body.active-light-mode .service.service__style--1.service-photo-card .shape-service-1 {
    display: block !important;
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    opacity: 1;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;
}

body.active-light-mode .service.service__style--1.service-photo-card:hover .shape-service-1 {
    opacity: 1;
}

body.active-light-mode .service.service__style--1.service-photo-card .shape-service-1 img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 22%;
    transform: scale(1.02);
    transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}

/* the template slides this layer away on hover; here it should stay put */
body.active-light-mode .service.service__style--1.service-photo-card:hover .shape-service-1 img {
    animation: none !important;
    transform: scale(1.09);
}

/* the scrim - deep enough at the foot for the copy, lighter at the head so the
   photograph is still legible */
body.active-light-mode .service.service__style--1.service-photo-card .shape-service-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(13, 19, 56, .46) 0%,
            rgba(13, 19, 56, .68) 42%,
            rgba(10, 15, 44, .88) 100%);
    transition: background .5s ease;
}

body.active-light-mode .service.service__style--1.service-photo-card:hover .shape-service-1::after {
    background:
        linear-gradient(180deg,
            rgba(20, 27, 82, .40) 0%,
            rgba(15, 21, 62, .66) 42%,
            rgba(10, 15, 44, .90) 100%);
}

/* copy sits above the photo */
body.active-light-mode .service.service__style--1.service-photo-card .icon,
body.active-light-mode .service.service__style--1.service-photo-card .content {
    position: relative;
    z-index: 3;
}

body.active-light-mode .service.service__style--1.service-photo-card .content .title a,
body.active-light-mode .service.service__style--1.service-photo-card .content .title {
    color: #fff;
}

body.active-light-mode .service.service__style--1.service-photo-card .content .title a:hover {
    color: var(--nga-red-on-navy);
}

body.active-light-mode .service.service__style--1.service-photo-card .content p,
body.active-light-mode .service.service__style--1.service-photo-card .content .description {
    color: rgba(255, 255, 255, .80) !important;
}

/* a solid white plate keeps the duotone mark crisp against the photograph */
body.active-light-mode .service.service__style--1.service-photo-card .icon {
    background: #fff;
    border: 0;
    box-shadow: 0 10px 26px rgba(6, 10, 32, .34);
}

/* The plate and the mark hold still on hover - only the photograph moves.
   light-theme.css flips the mark to solid white on hover, which dates from
   when the plate itself turned navy; on a white plate that erased it. */
body.active-light-mode .service.service__style--1:hover .icon img,
body.active-light-mode .service.service__style--1.service-photo-card:hover .icon img {
    filter: none;
    transform: none;
}

body.active-light-mode .service.service__style--1.service-photo-card:hover .icon {
    background: #fff;
    border: 0;
    box-shadow: 0 10px 26px rgba(6, 10, 32, .34);
    transform: none;
}

/* outline button reversed out of the photo */
body.active-light-mode .service.service__style--1.service-photo-card .discover-btn .tmp-btn.btn-border {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .55) !important;
    background: transparent;
}

body.active-light-mode .service.service__style--1.service-photo-card .discover-btn .tmp-btn.btn-border::after {
    background: var(--nga-red-surface);
}

body.active-light-mode .service.service__style--1.service-photo-card .discover-btn .tmp-btn.btn-border:hover {
    color: #fff !important;
    border-color: var(--nga-red) !important;
}

/* the 1px ring around the card reads as a hairline highlight, not a grey edge */
body.active-light-mode .service.service__style--1.service-photo-card.tmponhover {
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 14px 34px rgba(13, 19, 56, .18);
}

body.active-light-mode .service.service__style--1.service-photo-card.tmponhover:hover {
    box-shadow: 0 22px 46px rgba(13, 19, 56, .30);
}

body.active-light-mode .service.service__style--1.service-photo-card.tmponhover::after {
    background: transparent;
}

@media only screen and (max-width: 991px) {
    body.active-light-mode .service.service__style--1.service-photo-card {
        min-height: 380px;
    }
}


/* ==========================================================================
   4c. HERO / CARD BREATHING ROOM
   --------------------------------------------------------------------------
   The card row is pulled up over the hero by -250px, which left almost no gap
   under the hero buttons.
   ========================================================================== */
body.active-light-mode .tmp-service-area.mt-dec-250 {
    margin-top: -120px;
}

@media only screen and (max-width: 991px) {
    body.active-light-mode .tmp-service-area.mt-dec-250 {
        margin-top: -60px;
    }
}

/* the About section had no bottom gap, so its photo ran flush into the
   projects band below it */
body.active-light-mode .about-area.tmp-section-gapTop {
    padding-bottom: 130px;
}

@media only screen and (max-width: 767px) {
    body.active-light-mode .about-area.tmp-section-gapTop {
        padding-bottom: 80px;
    }
}


/* ==========================================================================
   5. "OUR RECENT PROJECTS." - DARK SECTION
   ========================================================================== */
/* projects.jpg carries the section, held back by a navy scrim so the band still
   reads as navy and the copy stays legible. Measured against the photograph's
   brightest pixel: white 9.5:1, and the coral eyebrow reaches 5.1:1 thanks to
   the vignette layer sitting behind the heading block. */
body.active-light-mode .tmp-portfolio-area {
    background-color: #0D1338;
    background-image:
        radial-gradient(70% 40% at 50% 8%, rgba(6, 10, 32, .55) 0%, rgba(6, 10, 32, 0) 70%),
        linear-gradient(160deg, rgba(31, 40, 112, .82) 0%, rgba(20, 27, 82, .88) 45%, rgba(13, 19, 56, .93) 100%),
        url(../images/projects.webp);
    background-size: cover, cover, cover;
    background-position: center top, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 3px solid var(--nga-red);
    padding-top: 165px !important;
}

/* gentle parallax on the photograph only; pointer devices with room for it */
@media only screen and (min-width: 992px) {
    body.active-light-mode .tmp-portfolio-area {
        background-attachment: scroll, scroll, fixed;
    }
}

/* --- animated backdrop ---------------------------------------------------
   Two layers, both transform-driven so they stay on the compositor:
   a slowly drifting engineering grid, and a soft aurora that breathes.
   ------------------------------------------------------------------------ */

/* layer 1 - drifting grid, faded out towards the edges */
body.active-light-mode .tmp-portfolio-area::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 70px 70px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0, 0, 0, .45) 52%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0, 0, 0, .45) 52%, transparent 76%);
    will-change: transform;
    animation: ngaGridDrift 34s linear infinite;
}

@keyframes ngaGridDrift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(70px, 70px, 0);
    }
}

/* layer 2 - aurora. Soft radial stops, no filter: blur() - a blur across a
   section this large is expensive and buys nothing here. */
body.active-light-mode .tmp-portfolio-area::after {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(36% 44% at 16% 20%, rgba(122, 133, 224, .40) 0%, rgba(122, 133, 224, 0) 64%),
        radial-gradient(32% 40% at 84% 74%, rgba(237, 31, 36, .22) 0%, rgba(237, 31, 36, 0) 66%),
        radial-gradient(28% 36% at 66% 8%, rgba(90, 99, 181, .34) 0%, rgba(90, 99, 181, 0) 68%);
    will-change: transform, opacity;
    animation: ngaAurora 24s ease-in-out infinite alternate;
}

@keyframes ngaAurora {
    0% {
        transform: translate3d(-1.5%, -1%, 0) scale(1);
        opacity: .85;
    }

    50% {
        transform: translate3d(2%, 1.5%, 0) scale(1.07);
        opacity: 1;
    }

    100% {
        transform: translate3d(-1%, 2.5%, 0) scale(1.02);
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {

    body.active-light-mode .tmp-portfolio-area::before,
    body.active-light-mode .tmp-portfolio-area::after {
        animation: none;
    }
}

body.active-light-mode .tmp-portfolio-area .title,
body.active-light-mode .tmp-portfolio-area h2 {
    color: #fff !important;
}

body.active-light-mode .tmp-portfolio-area .theme-gradient {
    background: linear-gradient(95deg, #FFFFFF 0%, #B9BEE2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* brand red is too dark against navy, so the eyebrow lifts here */
body.active-light-mode .tmp-portfolio-area .tmp-section-title-border .subtitle,
body.active-light-mode .tmp-portfolio-area .tmp-section-title-border .subtitle .subtitle-text {
    color: var(--nga-red-on-navy) !important;
}

body.active-light-mode .tmp-portfolio-area .tmp-section-title-border .subtitle .number {
    color: rgba(255, 255, 255, .6);
}

body.active-light-mode .tmp-portfolio-area .line-separator,
body.active-light-mode .tmp-portfolio-area .pres-line-separator-wrapper .line-separator {
    background-image: linear-gradient(90deg, rgba(255, 106, 110, .85), rgba(255, 106, 110, 0));
}

body.active-light-mode .tmp-portfolio-area .pres-line-separator-wrapper .line-separator.line-left {
    background-image: linear-gradient(-90deg, rgba(255, 106, 110, .85), rgba(255, 106, 110, 0));
}

/* --- category filter --- */
body.active-light-mode .tmp-portfolio-area .filter-button-default button {
    color: rgba(255, 255, 255, .72);
    border: 1px solid transparent;
}

body.active-light-mode .tmp-portfolio-area .filter-button-default button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .10);
}

body.active-light-mode .tmp-portfolio-area .filter-button-default button.is-checked {
    background: var(--nga-red-surface);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(200, 22, 27, .32);
}

/* --- project cards ---
   style.css paints `.tmp-card` with --color-card (white). These cards are
   image + caption directly on the section, so the surface drops away. */
body.active-light-mode .tmp-portfolio-area .tmp-card,
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio {
    background: transparent;
}

body.active-light-mode .tmp-portfolio-area .tmp-card .inner .thumbnail {
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 18px 40px rgba(6, 10, 32, .38);
}

body.active-light-mode .tmp-portfolio-area .tmp-card:hover .inner .thumbnail {
    box-shadow: 0 24px 52px rgba(6, 10, 32, .52);
}

body.active-light-mode .tmp-portfolio-area .tmp-card .inner .content .title a {
    color: #fff;
}

body.active-light-mode .tmp-portfolio-area .tmp-card .inner .content .title a:hover {
    color: var(--nga-red-on-navy);
}

body.active-light-mode .tmp-portfolio-area .tmp-badge-2 {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .26);
    color: #fff !important;
}

body.active-light-mode .tmp-portfolio-area .tmp-badge-2:hover {
    background: var(--nga-red-solid) !important;
    border-color: var(--nga-red-solid);
    color: #fff !important;
}


/* ==========================================================================
   6 + 7. VERTICAL RHYTHM ON THE HOMEPAGE
   ========================================================================== */

/* "Our Expertise" sits straight under the achievements band with no top gap */
body.active-light-mode .tmp-counterup-area + .about-area {
    padding-top: 110px;
}

/* "Latest Insight" runs straight on from the partner strip */
body.active-light-mode .tmp-brand-area + .blog-area {
    padding-top: 60px;
}

@media only screen and (max-width: 767px) {
    body.active-light-mode .tmp-counterup-area + .about-area {
        padding-top: 70px;
    }

    body.active-light-mode .tmp-brand-area + .blog-area {
        padding-top: 32px;
    }
}


/* ==========================================================================
   8. FOOTER LINK HOVER
   ========================================================================== */
body.active-light-mode .footer-style-default .footer-top .tmp-footer-widget .footer-link li a:hover,
body.active-light-mode .copyright-style-one .ft-menu li a:hover,
body.active-light-mode .copyright-style-one .copyright-text a:hover {
    color: var(--nga-red);
}

body.active-light-mode .footer-style-default .link-hover a::after,
body.active-light-mode .copyright-style-one .link-hover a::after {
    background: var(--nga-red);
}


/* ==========================================================================
   9. "LATEST INSIGHTS" CARDS
   --------------------------------------------------------------------------
   The cards themselves go dark navy; the section around them stays light.
   `.blog-area` only exists on the homepage, so this is scoped to exactly the
   three insight cards without touching the blog index.
   ========================================================================== */
body.active-light-mode .blog-area .tmp-card.tmponhover {
    background: rgba(44, 54, 145, .30) !important;
    box-shadow: 0 16px 38px rgba(13, 19, 56, .20);
}

body.active-light-mode .blog-area .tmp-card.tmponhover:hover {
    box-shadow: 0 24px 50px rgba(13, 19, 56, .32);
}

/* the visible face of the card is the pseudo-element, not the box */
body.active-light-mode .blog-area .tmp-card.tmponhover::after {
    background: var(--nga-band);
}

/* the travelling glow keeps its red accent against the navy */
body.active-light-mode .blog-area .tmp-card.tmponhover::before {
    background: radial-gradient(var(--nga-red), rgba(237, 31, 36, .45) 34%, transparent 68%);
}

body.active-light-mode .blog-area .tmp-card .content .title a,
body.active-light-mode .blog-area .tmp-card .content .title {
    color: #fff;
}

body.active-light-mode .blog-area .tmp-card .content .title a:hover {
    color: var(--nga-red-on-navy);
}

body.active-light-mode .blog-area .tmp-card .content .descriptiion,
body.active-light-mode .blog-area .tmp-card .content .description,
body.active-light-mode .blog-area .tmp-card .content p {
    color: rgba(255, 255, 255, .78) !important;
}

body.active-light-mode .blog-area .tmp-card .btn-read-more span {
    color: var(--nga-red-on-navy);
}

body.active-light-mode .blog-area .tmp-card .btn-read-more span::after {
    background: var(--nga-red-on-navy);
}

/* the thumbnail well was a light grey, which showed as a halo on navy */
body.active-light-mode .blog-area .tmp-card .inner .thumbnail {
    background: transparent;
    box-shadow: none;
}

body.active-light-mode .blog-area .tmp-card:hover .inner .thumbnail {
    box-shadow: none;
}


/* ==========================================================================
   10. HERO FIXES
   ========================================================================== */

/* The corner shapes sit at z-index:-1, while the hero's white veil (the
   ::before that fades the backdrop out to white) sits at 0. The shapes were
   being painted *under* an 85-100% white layer, which is what made them read
   as pale slate no matter how dark the artwork was. Lift them above the veil
   but keep them below the copy, which is at z-index 2. */
body.active-light-mode .banner-two-shape-control .shape-left-top,
body.active-light-mode .banner-two-shape-control .shape-right-bottom {
    z-index: 1;
}

/* The hero headline carries the brand, so it takes brand navy rather than the
   near-black ink used for ordinary section headings. */
body.active-light-mode .slider-area .inner h1.title,
body.active-light-mode .tmp-slider-style-1 .inner h1.title,
body.active-light-mode .slider-area .inner .title.display-two {
    color: var(--nga-navy);
}

/* the rotating word keeps its red */
body.active-light-mode .slider-area .inner h1.title .cd-words-wrapper b {
    color: var(--nga-red);
}


/* ==========================================================================
   11. FOOTER ACCENT SHAPE
   --------------------------------------------------------------------------
   The 48x48 mark above the footer shipped as template purple + flat grey and
   was held at 35% opacity, which is what made it read as pale lilac. The
   artwork is now navy + red, so it can sit at full strength.
   ========================================================================== */
body.active-light-mode .footer-style-default .shape-area {
    opacity: 1;
    mix-blend-mode: normal;
}


/* ==========================================================================
   12. TOP NOTICE STRIP
   --------------------------------------------------------------------------
   Uses the template's `.header-top-news` component, which already has a
   working dismiss handler bound to `.bgsection-activation` in main.js.
   The shipped artwork (header-top/top-banner.png) is a wide dark-blue
   texture; a navy gradient over it brings it onto brand, with a red bloom at
   the right to tie the strip to the CTA.
   ========================================================================== */
body.active-light-mode .header-top-news.nga-notice {
    background-color: #090D2A;
    background-image:
        linear-gradient(rgba(9, 13, 42, .84), rgba(9, 13, 42, .84)),
        url(../images/projects.webp);
    background-size: cover, cover;
    background-position: center, center 32%;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

body.active-light-mode .header-top-news.nga-notice .inner {
    padding: 11px 0;
}

/* the badge is the one solid red mark in the strip */
body.active-light-mode .header-top-news.nga-notice .tmp-badge {
    background: var(--nga-red-surface);
    color: #fff;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(200, 22, 27, .38);
}

body.active-light-mode .header-top-news.nga-notice .news-text {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 14px;
    letter-spacing: .01em;
}

body.active-light-mode .header-top-news.nga-notice .news-text strong {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* the CTA reads as a link, underlined on hover rather than a second button */
body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more span {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    display: inline-block;
}

/* one plain blue rule on hover - no wipe, no travelling arrow */
body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: #8FA3FF;
    opacity: 0;
    transform: none;
    transition: opacity .2s linear;
}

body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more:hover span::after {
    opacity: 1;
    transform: none;
}

body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more:hover span {
    color: #8FA3FF;
}

body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more i {
    margin-left: 4px;
    transition: none;
}

body.active-light-mode .header-top-news.nga-notice .right-button .btn-read-more:hover i {
    transform: none;
}

body.active-light-mode .header-top-news.nga-notice .close-button {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

body.active-light-mode .header-top-news.nga-notice .close-button:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
}

/* on narrow screens the strip stacks, so the close control moves clear of it */
@media only screen and (max-width: 767px) {
    body.active-light-mode .header-top-news.nga-notice .inner {
        padding: 14px 44px 14px 16px;
    }

    body.active-light-mode .header-top-news.nga-notice .news-text {
        font-size: 13px;
    }

    body.active-light-mode .header-top-news.nga-notice .right-button {
        margin-top: 8px;
    }
}


/* ==========================================================================
   13. SERVICE-DETAIL PAGE REFINEMENTS
   ========================================================================== */

/* --- pricing: drop the nested box -----------------------------------------
   The card already has its own surface via .tmponhover, so the inner shell was
   drawing a second box inside the first. */
body.active-light-mode .tmp-pricing .pricing-table-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
}

body.active-light-mode .tmp-pricing.tmponhover {
    padding: 8px;
}

/* --- pricing: the corner ribbon runs red ---------------------------------- */
body.active-light-mode .tmp-pricing .popular-tag,
body.active-light-mode .tmp-pricing.with-gradient-bg .popular-tag,
body.active-light-mode .pricing-table-items .pricing-table .popular-tag,
body.active-light-mode .pricing-table.pricing-featured .popular-tag {
    background: var(--nga-red-surface) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
}

/* --- section headings match the homepage ---------------------------------
   The detail pages use `.section-head` instead of `.tmp-section-title-border`,
   which left the eyebrow at 16px, left-aligned and without the rules either
   side. This brings it in line: 12px, centred, red, flanked by the same
   fading strokes, with the heading at the homepage's 46px. */
body.active-light-mode .section-head {
    text-align: center;
}

body.active-light-mode .section-head .section-sub-title {
    text-align: center;
    margin-bottom: 10px;
}

body.active-light-mode .section-head .section-sub-title span {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--nga-red) !important;
}

body.active-light-mode .section-head .section-sub-title span::before,
body.active-light-mode .section-head .section-sub-title span::after {
    content: "";
    width: 56px;
    height: 2px;
    border-radius: 2px;
    flex: 0 0 56px;
}

body.active-light-mode .section-head .section-sub-title span::before {
    background-image: linear-gradient(-90deg, rgba(237, 31, 36, .9), rgba(237, 31, 36, 0));
}

body.active-light-mode .section-head .section-sub-title span::after {
    background-image: linear-gradient(90deg, rgba(237, 31, 36, .9), rgba(237, 31, 36, 0));
}

body.active-light-mode .section-head .title {
    text-align: center;
    font-size: 46px;
    margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {

    body.active-light-mode .section-head .section-sub-title span::before,
    body.active-light-mode .section-head .section-sub-title span::after {
        display: none;
    }

    body.active-light-mode .section-head .title {
        font-size: 32px;
    }
}

/* --- breathing room above the footer -------------------------------------
   On the service pages the CTA band butted straight into the footer. */
body.active-light-mode .cta-main-wrapper + .tmp-footer,
body.active-light-mode .bg-cta-modern + .tmp-footer,
body.active-light-mode .tmp-section-gapBottom + .tmp-footer {
    margin-top: 120px;
}

@media only screen and (max-width: 767px) {

    body.active-light-mode .cta-main-wrapper + .tmp-footer,
    body.active-light-mode .bg-cta-modern + .tmp-footer,
    body.active-light-mode .tmp-section-gapBottom + .tmp-footer {
        margin-top: 70px;
    }
}


/* ==========================================================================
   14. HOMEPAGE VIDEO BAND
   --------------------------------------------------------------------------
   Same component as the services page: an autoplaying loop behind a solid
   panel that scales away on scroll, so the footage "opens". The overlay picks
   up --color-card, which is white here, so it reads as a clean reveal.
   ========================================================================== */
body.active-light-mode .large-video-playing .grow-thumbnail-1-overlay {
    background: var(--nga-surface);
}

body.active-light-mode .tmp-video-section-start-one {
    margin-bottom: 20px;
}


/* ==========================================================================
   15. ABOUT PAGE - STORY IMAGES
   --------------------------------------------------------------------------
   The image stage is already the same 400px as the text stage beside it, but
   custom-story.css inset the picture by 28px of padding and pinned it to
   300px tall, so it filled only part of the column. Dropping the padding and
   letting the image fill the stage makes it match the left-hand section.
   The card-like look came from a drop shadow on the container, not from a
   panel - both that and the light-theme shadow are cleared here.
   ========================================================================== */
body.active-light-mode .our-story-section .story-image-stage {
    padding: 0;
}

body.active-light-mode .our-story-section .story-image-container,
body.active-light-mode .story-image-container {
    height: 100%;
    box-shadow: none;
    filter: none;
}

body.active-light-mode .our-story-section .story-img,
body.active-light-mode .our-story-section .story-img.active {
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    box-shadow: none;
    filter: none;
}


/* ==========================================================================
   16. ABOUT PAGE - FOOTER SPACING
   --------------------------------------------------------------------------
   about.html closes with `.tmp-callto-action-area` rather than the
   `.bg-cta-modern` band the service pages use, so the earlier rule missed it.
   ========================================================================== */
body.active-light-mode .tmp-callto-action-area + .tmp-footer,
body.active-light-mode .tmp-brand-area + .tmp-footer,
body.active-light-mode .tmp-testimonial-area + .tmp-footer {
    margin-top: 120px;
}

@media only screen and (max-width: 767px) {

    body.active-light-mode .tmp-callto-action-area + .tmp-footer,
    body.active-light-mode .tmp-brand-area + .tmp-footer,
    body.active-light-mode .tmp-testimonial-area + .tmp-footer {
        margin-top: 70px;
    }
}


/* ==========================================================================
   17. TESTIMONIAL ARROWS
   --------------------------------------------------------------------------
   The template parks them at 68px wide on either flank, vertically centred,
   at opacity 0 until the slider is hovered, coloured --color-border - which on
   a white page is all but invisible. They now sit as a pair at the bottom
   right, smaller, navy, and always on.

   The buttons already contain feather icons; the template hid those and drew
   PNG chevrons through ::before instead. Showing the real icons means the
   arrows can take a colour.
   ========================================================================== */
body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow {
    padding-bottom: 86px;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow {
    opacity: 1;
    width: 46px;
    height: 46px;
    top: auto;
    bottom: 0;
    transform: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(44, 54, 145, .30);
    background-color: #fff;
    color: var(--nga-navy);
    box-shadow: 0 4px 14px rgba(16, 22, 50, .08);
}

/* the PNG chevron gives way to the icon already inside the button */
body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow::before {
    display: none;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow i {
    display: inline-block !important;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.prev-arrow {
    left: auto;
    right: 58px;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.next-arrow {
    left: auto;
    right: 0;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow:hover,
body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.prev-arrow:hover,
body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.next-arrow:hover {
    background-color: var(--nga-navy);
    border-color: var(--nga-navy) !important;
    color: #fff;
    transform: none;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.prev-arrow:hover {
    right: 58px;
}

body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow.next-arrow:hover {
    right: 0;
}

/* the template hides them below 1200px; bring them back from tablet up and
   leave phones to the dots */
@media only screen and (min-width: 992px) {
    body.active-light-mode .tmp-testimonial-area .tmp-slick-arrow button.slick-arrow {
        display: inline-flex !important;
    }
}

/* the dots share the bottom edge, so they move left of the arrow pair */
body.active-light-mode .tmp-testimonial-area .tmp-slick-dot .slick-dots {
    text-align: left;
    bottom: 12px;
}


/* ==========================================================================
   18. PRICING CARDS
   --------------------------------------------------------------------------
   Cards stay light. The featured plan is separated by red rather than by
   being dark: a red rim, a red bar across the top, a warm glow and a lift.
   ========================================================================== */

/* --- every card is a light panel ------------------------------------------ */
body.active-light-mode .pricing-table-items .pricing-table.tmponhover,
body.active-light-mode .tmp-pricing.tmponhover,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
    background: var(--nga-line) !important;
    background-image: none !important;
    box-shadow: var(--nga-shadow-sm);
    transform: none;
}

body.active-light-mode .pricing-table-items .pricing-table.tmponhover::after,
body.active-light-mode .tmp-pricing.tmponhover::after,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover::after {
    background: var(--nga-surface) !important;
    opacity: 1;
}

body.active-light-mode .pricing-table-items .pricing-table.tmponhover::before,
body.active-light-mode .tmp-pricing.tmponhover::before,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover::before {
    background: radial-gradient(var(--nga-red), rgba(237, 31, 36, .40) 34%, transparent 66%);
}

body.active-light-mode .pricing-table-items .pricing-table.tmponhover:hover,
body.active-light-mode .tmp-pricing.tmponhover:hover {
    box-shadow: 0 2px 4px rgba(16, 22, 50, .05), 0 22px 46px rgba(200, 22, 27, .16);
}

/* type back to ink on the light face */
body.active-light-mode .pricing-table-items .pricing-table h1,
body.active-light-mode .pricing-table-items .pricing-table h2,
body.active-light-mode .pricing-table-items .pricing-table h3,
body.active-light-mode .tmp-pricing .pricing span.price,
body.active-light-mode .tmp-pricing .pricing span.currency,
body.active-light-mode .tmp-pricing .pricing-table-inner .pricing-header .pricing span.price,
body.active-light-mode .tmp-pricing .pricing-table-inner .pricing-header .pricing span.currency,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-table-inner .pricing-header .pricing span.price,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-table-inner .pricing-header .pricing span.currency {
    color: var(--nga-navy) !important;
}

body.active-light-mode .pricing-table-items .pricing-table li,
body.active-light-mode .pricing-table-items .pricing-table p,
body.active-light-mode .pricing-table-items .info,
body.active-light-mode .tmp-pricing .list-style--1 li,
body.active-light-mode .tmp-pricing .pricing .subtitle,
body.active-light-mode .tmp-pricing p,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .title,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover p,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover li,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-body .list-style--1 li {
    color: var(--nga-ink-500) !important;
}

body.active-light-mode .pricing-table-items .pricing-table .feature-lists li i,
body.active-light-mode .tmp-pricing .list-style--1 li i,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .list-style--1 li i {
    color: var(--nga-red) !important;
    background: transparent !important;
}

/* plan chips read as quiet navy tags */
body.active-light-mode .pricing-table-items .pricing-table .plan-badge,
body.active-light-mode .tmp-pricing .pricing-header .title.tmp-badge-2,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-header .title.tmp-badge-2 {
    background: var(--nga-navy-50) !important;
    border: 1px solid rgba(44, 54, 145, .16) !important;
    color: var(--nga-navy) !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: none;
}

/* buttons back to the standard navy fill */
body.active-light-mode .pricing-table-items .pricing-table .tmp-btn,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn {
    background: var(--nga-navy);
    color: #fff !important;
    border-color: var(--nga-navy) !important;
    box-shadow: 0 1px 2px rgba(16, 22, 50, .10);
}

body.active-light-mode .pricing-table-items .pricing-table .tmp-btn::after,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn::after {
    background: var(--nga-red-surface);
}

body.active-light-mode .pricing-table-items .pricing-table .tmp-btn:hover,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn:hover {
    color: #fff !important;
    border-color: var(--nga-red-solid) !important;
}

/* the outline variant stays outline */
body.active-light-mode .pricing-table-items .pricing-table .tmp-btn.btn-border,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn.btn-border {
    background: transparent;
    color: var(--nga-navy) !important;
    border-color: var(--nga-line-strong) !important;
    box-shadow: none;
}

body.active-light-mode .pricing-table-items .pricing-table .tmp-btn.btn-border::after,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn.btn-border::after {
    background: var(--nga-navy);
}

body.active-light-mode .pricing-table-items .pricing-table .tmp-btn.btn-border:hover,
body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn.btn-border:hover {
    color: #fff !important;
    border-color: var(--nga-navy) !important;
}

/* --- the featured plan: light, but unmistakably the one ------------------- */
body.active-light-mode .pricing-table.pricing-featured.tmponhover,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
    background: var(--nga-red) !important;
    box-shadow:
        0 18px 40px rgba(200, 22, 27, .22),
        0 0 46px rgba(237, 31, 36, .16) !important;
    transform: translateY(-10px);
    z-index: 2;
}

/* a white face inset inside the red rim */
body.active-light-mode .pricing-table.pricing-featured.tmponhover::after,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover::after {
    inset: 2px;
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(237, 31, 36, .10) 0%, rgba(237, 31, 36, 0) 70%),
        var(--nga-surface) !important;
}

/* red bar across the top edge */
body.active-light-mode .pricing-table.pricing-featured .pricing-table-header,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-table-inner {
    position: relative;
}

body.active-light-mode .pricing-table.pricing-featured .pricing-table-header::before,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-table-inner::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -22px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--nga-red-surface);
    z-index: 3;
}

/* its chip is the solid red one */
body.active-light-mode .pricing-table.pricing-featured .plan-badge,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-header .title.tmp-badge-2 {
    background: var(--nga-red-surface) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(200, 22, 27, .34);
}

/* and its call to action fills red */
body.active-light-mode .pricing-table.pricing-featured .tmp-btn,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn {
    background: var(--nga-red-solid);
    border-color: var(--nga-red-solid) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(200, 22, 27, .30);
}

body.active-light-mode .pricing-table.pricing-featured .tmp-btn::after,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn::after {
    background: linear-gradient(140deg, var(--nga-navy) 0%, var(--nga-navy-700) 100%);
}

body.active-light-mode .pricing-table.pricing-featured .tmp-btn:hover,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn:hover {
    color: #fff !important;
    border-color: var(--nga-navy) !important;
}

/* brand red on the faintly pink face is 3.7:1; the deeper red clears 5:1 */
body.active-light-mode .pricing-table.pricing-featured .price,
body.active-light-mode .pricing-table.pricing-featured h1 {
    color: var(--nga-red-solid) !important;
}

@media only screen and (max-width: 991px) {

    body.active-light-mode .pricing-table.pricing-featured.tmponhover,
    body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
        transform: none;
    }
}


/* ==========================================================================
   19. PROJECT CARDS - FULL-BLEED IMAGERY
   --------------------------------------------------------------------------
   The template stacks a 4:3 thumbnail above a caption block, so the photo
   filled only the top ~60% of the card. Here the photo becomes the whole card
   and the caption sits over it, on a gradient scrim dark enough to carry white
   type across any of the six images.

   A fixed aspect ratio also gives isotope a height before the photos load, so
   the masonry lays out correctly on the first pass instead of reflowing.
   ========================================================================== */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner {
    position: relative;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

/* the photo layer fills the card */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail .card-image,
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail .card-image a {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    border-radius: inherit;
    overflow: hidden;
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    display: block;
}

/* scrim: transparent over the top two-thirds so the photo reads, deepening
   under the caption. Measured white-on-scrim at the caption: 12:1. */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg,
            rgba(6, 10, 32, 0) 28%,
            rgba(6, 10, 32, .30) 50%,
            rgba(6, 10, 32, .72) 78%,
            rgba(6, 10, 32, .92) 100%);
}

/* the click target stays over the photo but under the caption */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .thumbnail .tmp-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 1;
    background: linear-gradient(160deg, rgba(44, 54, 145, 0) 40%, rgba(44, 54, 145, 0) 100%);
    transition: background .45s cubic-bezier(.2, .7, .3, 1);
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio:hover .inner .thumbnail .tmp-overlay {
    background: linear-gradient(160deg, rgba(44, 54, 145, .30) 0%, rgba(200, 22, 27, .28) 100%);
}

/* caption over the photo */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 28px 28px;
    pointer-events: none;
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content a {
    pointer-events: auto;
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content .title {
    margin-bottom: 14px;
    text-shadow: 0 2px 10px rgba(6, 10, 32, .55);
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content .title a {
    color: #fff;
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content .title a:hover {
    color: var(--nga-red-on-navy);
}

/* The category chip is dark glass, not light. A white veil would lift the
   background under white type - measured 4.09:1 at worst across the six
   photos. Tinting down instead keeps the chip at least as legible as the
   title above it. */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .tmp-badge-2 {
    background: rgba(6, 10, 32, .55) !important;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff !important;
    backdrop-filter: blur(6px);
}

body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .tmp-badge-2:hover {
    background: var(--nga-red-solid) !important;
    border-color: var(--nga-red-solid);
}

/* the existing zoom still applies, just to a full-height image now */
body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio:hover .inner .thumbnail .card-image img {
    transform: scale(1.06);
}

@media only screen and (max-width: 575px) {
    body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio {
        aspect-ratio: 4 / 4.4;
    }

    body.active-light-mode .tmp-portfolio-area .tmp-card.portfolio .inner .content {
        padding: 20px 20px 22px;
    }
}


/* ==========================================================================
   20. PRICING CARDS - CLEAN PASS
   --------------------------------------------------------------------------
   Removing the nested box earlier also removed the padding that came with it,
   which left the button 8px off the card edge. Padding is restored on the
   inner shell instead, and the featured plan drops its red rim - the ribbon
   alone now marks it, with a lift and a deeper shadow for separation.
   ========================================================================== */

/* --- breathing room ------------------------------------------------------- */
body.active-light-mode .tmp-pricing .pricing-table-inner {
    padding: 38px 34px 36px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.active-light-mode .tmp-pricing .pricing-header {
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--nga-line);
}

body.active-light-mode .tmp-pricing .pricing-body {
    margin-bottom: 32px;
}

body.active-light-mode .tmp-pricing .list-style--1 li,
body.active-light-mode .pricing-table-items .pricing-table .feature-lists li {
    margin-bottom: 12px;
}

/* the call to action spans the card and sits clear of the list */
body.active-light-mode .tmp-pricing .pricing-footer,
body.active-light-mode .pricing-table-items .pricing-table .pricing-footer {
    margin-top: auto;
    padding-top: 4px;
}

body.active-light-mode .tmp-pricing .pricing-footer .tmp-btn,
body.active-light-mode .pricing-table-items .pricing-table .tmp-btn {
    width: 100%;
    justify-content: center;
    height: 52px;
    line-height: 50px;
}

body.active-light-mode .pricing-table-items .pricing-table {
    padding: 38px 34px 36px;
}

body.active-light-mode .pricing-table-items .pricing-table .feature-lists {
    margin-bottom: 32px;
}

/* --- featured plan: no rim, just the ribbon ------------------------------- */
body.active-light-mode .pricing-table.pricing-featured.tmponhover,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
    background: var(--nga-line-strong) !important;
    box-shadow: 0 2px 6px rgba(16, 22, 50, .06), 0 26px 54px rgba(16, 22, 50, .16) !important;
    transform: translateY(-12px);
    z-index: 2;
}

/* plain white face, same as its neighbours */
body.active-light-mode .pricing-table.pricing-featured.tmponhover::after,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover::after {
    inset: 1px;
    background: var(--nga-surface) !important;
}

/* the red bar across the top edge goes with the rim */
body.active-light-mode .pricing-table.pricing-featured .pricing-table-header::before,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-table-inner::before {
    display: none;
}

/* price returns to navy so the row reads consistently */
body.active-light-mode .pricing-table.pricing-featured .price,
body.active-light-mode .pricing-table.pricing-featured h1 {
    color: var(--nga-navy) !important;
}

/* the ribbon is the one red mark left on the card */
body.active-light-mode .pricing-table.pricing-featured .plan-badge,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-header .title.tmp-badge-2 {
    background: var(--nga-red-surface) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(200, 22, 27, .28);
}

/* its button is the filled one; the neighbours stay outlined */
body.active-light-mode .pricing-table.pricing-featured .tmp-btn,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn {
    background: var(--nga-navy);
    border-color: var(--nga-navy) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(44, 54, 145, .26);
}

body.active-light-mode .pricing-table.pricing-featured .tmp-btn::after,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn::after {
    background: var(--nga-red-surface);
}

body.active-light-mode .pricing-table.pricing-featured .tmp-btn:hover,
body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover .pricing-footer .tmp-btn:hover {
    color: #fff !important;
    border-color: var(--nga-red-solid) !important;
}

@media only screen and (max-width: 991px) {

    body.active-light-mode .pricing-table.pricing-featured.tmponhover,
    body.active-light-mode .tmp-pricing.with-gradient-bg.tmponhover {
        transform: none;
    }

    body.active-light-mode .tmp-pricing .pricing-table-inner,
    body.active-light-mode .pricing-table-items .pricing-table {
        padding: 30px 26px 28px;
    }
}


/* ==========================================================================
   21. PROJECTS SECTION - DEEPER OVERLAY
   ========================================================================== */
body.active-light-mode .tmp-portfolio-area {
    background-image:
        radial-gradient(70% 40% at 50% 8%, rgba(4, 7, 24, .62) 0%, rgba(4, 7, 24, 0) 70%),
        linear-gradient(160deg, rgba(18, 24, 74, .93) 0%, rgba(12, 17, 56, .95) 45%, rgba(7, 11, 38, .97) 100%),
        url(../images/projects.webp);
}


/* ==========================================================================
   22. SINGLE-PLAN CARD (vendor-number)
   --------------------------------------------------------------------------
   `.pricing` lays the amount and its qualifier out as a flex row, so on a
   one-column card the price sat ~54px left of centre with "One-time Fee"
   beside it. Stacking them centres the amount properly.
   ========================================================================== */
body.active-light-mode .tmp-pricing.text-center .pricing {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

body.active-light-mode .tmp-pricing.text-center .pricing .subtitle {
    margin-left: 0;
}

/* Each row is a flex box with justify-content:center, so every tick lands at a
   different x depending on how long the label is. Centring the list as a block
   and letting the rows start from the left lines all the ticks up. */
body.active-light-mode .tmp-pricing.text-center .pricing-body .list-style--1 {
    display: inline-block;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

body.active-light-mode .tmp-pricing.text-center .pricing-body .list-style--1 li,
body.active-light-mode .tmp-pricing.text-center .pricing-body .list-style--1 li.d-flex.justify-content-center {
    justify-content: flex-start !important;
    text-align: left;
}

body.active-light-mode .tmp-pricing.text-center .pricing-body {
    text-align: center;
}


/* ==========================================================================
   23. BLOG IMAGERY PROPORTIONS
   --------------------------------------------------------------------------
   The article artwork is square (1024x1024), so at full column width the hero
   rendered 1125px tall. Cropping to a landscape frame with object-fit keeps
   the subject centred without distorting anything.
   ========================================================================== */
body.active-light-mode .blog-details-thumbnail-large img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
    height: auto;
    display: block;
}

body.active-light-mode .blog-details-thumbnail-large {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--nga-shadow-md);
}

/* images sitting inside the article body */
body.active-light-mode .blog-details-content .thumbnail img,
body.active-light-mode .blog-details-content .image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

/* post cards on the blog index and the related-post rail */
body.active-light-mode .tmp-card .inner .thumbnail .card-image img,
body.active-light-mode .card-box .inner .image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    height: auto;
    display: block;
}

@media only screen and (max-width: 767px) {
    body.active-light-mode .blog-details-thumbnail-large img {
        aspect-ratio: 3 / 2;
    }
}


/* ==========================================================================
   24. PARTNER LOGO STRIP
   --------------------------------------------------------------------------
   The supplied marks are full-colour filled logos, not the white line art the
   template shipped with. light-theme.css darkens those with brightness(0),
   which on a filled mark flattens it into an unreadable silhouette - the AWS
   cloud would lose its wordmark entirely. Greyscale keeps every shape and its
   internal detail while holding the strip monochrome, and hover only lifts the
   opacity so they never turn colour.
   ========================================================================== */
body.active-light-mode .brand-style-1 li a img,
body.active-light-mode .brand-style-2 li a img,
body.active-light-mode .brand-carousel-activation li a img {
    filter: grayscale(1) contrast(1.05);
    opacity: .58;
    transition: opacity .4s, filter .4s;
    /* every file is a uniform 300x116 canvas with the mark already scaled to
       equal ink area inside it, so one fixed box keeps the row optically even
       whether the mark is a square emblem or a 3:1 wordmark */
    width: 150px;
    height: 58px;
    max-width: 100%;
    object-fit: contain;
}

body.active-light-mode .brand-style-1 li:hover a img,
body.active-light-mode .brand-style-2 li:hover a img,
body.active-light-mode .brand-carousel-activation li:hover a img {
    filter: grayscale(1) contrast(1.05);
    opacity: .95;
    transform: none;
}

body.active-light-mode .brand-style-1 li {
    padding: 34px 0;
}

/* ==========================================================================
   25. Mobile corrections
   ========================================================================== */

/* The menu button paints a navy plate, but the glyph inherited the navy body
   colour - navy on navy, contrast 1.20. It read as a missing icon. */
/* light-theme.css sets .tmp-header .header-right i to navy with !important at
   specificity (0,3,2); this has to outrank it, not merely repeat !important. */
body.active-light-mode .tmp-header .header-right .hamberger-button,
body.active-light-mode .tmp-header .header-right .hamberger-button i,
body.active-light-mode .tmp-header .header-right .hamberger-button svg,
body.active-light-mode .mobile-menu-bar .hamberger-button i {
    color: #fff !important;
    fill: #fff !important;
}

body.active-light-mode .hamberger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* a comfortable tap target */
    height: 44px;
    border-radius: 10px;
    border: 0;
    padding: 0;
}

body.active-light-mode .hamberger-button i {
    font-size: 20px;
    line-height: 1;
}

/* Some template icons carry width="512" height="512" attributes. The stylesheet
   caps their width only, so the height stayed 512px and the glyph spilled far
   outside its 50px circle. Constrain both axes. */
body.active-light-mode .icon > svg,
body.active-light-mode div.icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 100%;
    max-height: 100%;
    display: block;
    flex: 0 0 auto;
}

body.active-light-mode div.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Tap targets: anything interactive should be reachable with a thumb. */
@media only screen and (max-width: 767px) {
    body.active-light-mode .social-icon li a {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* keep the top notice readable rather than cramped */
    body.active-light-mode .header-top-news.nga-notice {
        text-align: center;
    }

    body.active-light-mode .header-top-news.nga-notice .right-button {
        margin-top: 6px;
    }
}

/* legal pages - readable long-form text */
body.active-light-mode .nga-legal { font-size: 16px; line-height: 1.85; }
body.active-light-mode .nga-legal h3 {
    margin: 40px 0 14px; font-size: 22px; color: var(--nga-navy-950);
}
body.active-light-mode .nga-legal ul { margin: 0 0 18px 22px; list-style: disc; }
body.active-light-mode .nga-legal li { margin-bottom: 8px; }
body.active-light-mode .nga-legal-updated {
    color: #6B7280; font-size: 14px; margin-bottom: 26px;
}

/* designer credit under the copyright line */
body.active-light-mode .copyright-text.nga-credit {
    margin-top: 4px;
    font-size: 14px;
    opacity: .78;
}

body.active-light-mode .copyright-text.nga-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color .25s ease, border-color .25s ease;
}

body.active-light-mode .copyright-text.nga-credit a:hover {
    color: var(--nga-red-solid);
    border-bottom-color: var(--nga-red-solid);
}

/* ==========================================================================
   26. Hero rotating headline on small screens
   ==========================================================================
   The plugin animates an inline-block wrapper's width to fit each phrase. On a
   phone the longest phrase ("Company Registration") is wider than the space
   left on that line, so the wrapper wrapped to a new line and snapped back as
   shorter words came round - the heading appeared to jump.

   Giving the caption its own full-width line means the width animation can
   never change how many lines the heading occupies, and stepping the font down
   keeps the longest phrase inside the viewport. */

@media only screen and (max-width: 991px) {
    body.active-light-mode .banner-area .header-caption,
    body.active-light-mode h1.tmp-title-split .header-caption {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    /* the wrapper keeps its animated width, but now starts at the left edge
       with a whole line to grow into */
    body.active-light-mode h1.tmp-title-split .cd-headline {
        display: block;
        width: 100%;
    }

    /* reserve the line so a taller/shorter phrase cannot shift the page */
    body.active-light-mode h1.tmp-title-split .cd-words-wrapper {
        vertical-align: top;
    }

    body.active-light-mode h1.tmp-title-split .cd-words-wrapper b {
        white-space: nowrap;
    }
}

/* The longest phrase measures about 10.9x the font size. Scaling with the
   viewport keeps it inside the line on every phone width rather than guessing
   at fixed breakpoints - 8vw leaves a margin even on a 320px screen, and the
   clamp stops it shrinking or growing past sensible limits. */
@media only screen and (max-width: 767px) {
    body.active-light-mode h1.tmp-title-split {
        font-size: clamp(20px, 8vw, 34px);
        line-height: 1.26;
    }
}

/* ==========================================================================
   27. Preloader
   ==========================================================================
   The template ships #inverweb-load on a #111 plate and main.js adds .loaded
   once the window fires load (or after 2.5s, whichever comes first) - but no
   stylesheet ever defined what .loaded should do, so the overlay never went
   away. That is why the markup arrived commented out. */

body.active-light-mode #inverweb-load {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility .55s ease;
}

/* the rule the template was missing */
body.active-light-mode #inverweb-load.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.active-light-mode #inverweb-load .nga-preloader-inner {
    perspective: 600px;          /* gives the flip real depth */
}

body.active-light-mode #inverweb-load .nga-preloader-inner img {
    display: block;
    width: 96px;
    height: 96px;
    transform-style: preserve-3d;
    animation: nga-flip 2s cubic-bezier(.55, .06, .3, 1) infinite;
}

/* One full vertical turn, then a pause - so it rotates once every 2 seconds
   rather than spinning continuously. */
@keyframes nga-flip {
    0%   { transform: rotateX(0deg); }
    55%  { transform: rotateX(360deg); }
    100% { transform: rotateX(360deg); }
}

@media only screen and (max-width: 575px) {
    body.active-light-mode #inverweb-load .nga-preloader-inner img {
        width: 76px;
        height: 76px;
    }
}

/* Respect a reduced-motion preference: still show the mark, just do not spin. */
@media (prefers-reduced-motion: reduce) {
    body.active-light-mode #inverweb-load .nga-preloader-inner img {
        animation: none;
    }
}

/* Failsafe: if JavaScript never runs, the overlay must not trap the visitor. */
body.active-light-mode.nga-no-js #inverweb-load {
    display: none;
}