/**
 * ACS Frontend Styles
 * Prefix: acs-
 * Brand: #006892 (primary), #004d6e (dark), #e8f4f8 (light)
 * Font: Roboto (original site)
 */

/* ═══════════════════════════════════════
   0. GLOBAL RESETS for Divi overrides
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Force Roboto on ACS elements */
.acs-header-home,
.acs-header-inner,
.acs-main-nav,
.acs-menu-link,
.acs-lang-switcher,
.acs-mega-dropdown,
.acs-home-slider,
.acs-newsletter-bar,
.acs-info-request,
.acs-footer-content,
.acs-footer-title,
.acs-footer-text {
    font-family: 'Roboto', sans-serif !important;
}


/* Kill all Divi list bullets on ACS elements */
.acs-header-home ul,
.acs-header-inner ul,
.acs-header-home li,
.acs-header-inner li,
.acs-mega-dropdown ul,
.acs-mega-dropdown li,
.acs-footer-content ul,
.acs-footer-content li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acs-header-home li::before,
.acs-header-inner li::before,
.acs-mega-dropdown li::before,
.acs-footer-content li::before {
    content: none !important;
    display: none !important;
}

/* ═══════════════════════════════════════
   0a. HOME SLIDER
   ═══════════════════════════════════════ */
.acs-home-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.acs-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.acs-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.acs-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Sweeper mode — all slides side-by-side, translateX on the track */
.acs-home-slider[data-style="sweeper"] .acs-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
}

.acs-home-slider[data-style="sweeper"] .acs-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    transition: none;
}

/* Stripe overlay like original */
.acs-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Circle overlay — "blob" shape: round with top-right corner cut */
.acs-slide-circle {
    position: absolute;
    top: 200px;
    right: 8%;
    z-index: 5;
    width: 400px;
    height: 400px;
    padding: 40px;
    display: table;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 200px;
    border-top-right-radius: 0;
    transition: all 0.3s ease-in-out;
}

.acs-slide-circle:hover {
    color: #fff;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 0;
    background-color: #0e6b92 !important;
}

.acs-slide-circle-inner {
    display: table-cell;
    vertical-align: middle;
}

.acs-slide-subtitle {
    color: #fff;
    font-size:25px;
    line-height: 25px;
    font-weight: 300;
}

.acs-slide-title {
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 60px;
}

/* Dots */
.acs-slider-dots {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5;
}

.acs-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 30px;
    border: none;
    background: #d6d6d6;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.acs-slider-dot.active {
    background: #869791;
}

@media (max-width: 1024px) {
    .acs-slide-circle {
        width: 280px;
        height: 280px;
        padding: 30px;
        top: 150px;
        right: 5%;
    }

    .acs-slide-title {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 768px) {
    .acs-slide-circle {
        width: 200px;
        height: 200px;
        padding: 20px;
        top: 120px;
        right: 50%;
        transform: translateX(50%);
    }

    .acs-slide-title {
        font-size: 24px;
        line-height: 30px;
    }

    .acs-slide-subtitle {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════
   0a. BODY TEXT COLOUR
   Divi's default is #666; the site uses black. Paragraphs inherit it, so
   modules that set their own colour (white on dark sections) are untouched.
   ═══════════════════════════════════════ */
html body {
    color: #000;
}

/* Divi forces #666 on light-layout modules at tablet / phone widths */
@media (max-width: 980px) {
    .et_pb_bg_layout_light_tablet {
        color: #000 !important;
    }
}

@media (max-width: 767px) {
    .et_pb_bg_layout_light_phone {
        color: #000 !important;
    }
}

/* ═══════════════════════════════════════
   0b. CLIENT LOGOS CAROUSEL
   ═══════════════════════════════════════ */
.acs-client-logos {
    position: relative;
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 50px;
    overflow: hidden;
}

.acs-logos-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 30px;
}

.acs-logo-item {
    flex: 0 0 calc((100% - 90px) / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.acs-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.acs-logo-item img {
    display: block;
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.3s ease;
}

.acs-logo-item img:hover {
    filter: grayscale(0%);
    transform: scale(1.08);
}

.acs-logos-prev,
.acs-logos-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 60px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
    padding: 8px;
    z-index: 2;
    transition: color 0.2s;
    line-height: 1;
}

.acs-logos-prev:hover,
.acs-logos-next:hover {
    color: #666;
}

.acs-logos-prev { left: 0; }
.acs-logos-next { right: 0; }

@media (max-width: 768px) {
    .acs-client-logos {
        padding: 0 30px;
    }

    .acs-logo-item img {
        max-width: 120px;
        max-height: 60px;
    }
}

/* ═══════════════════════════════════════
   1. HEADER
   ═══════════════════════════════════════ */

/* ── Header base (shared) ── */
.acs-header-home,
.acs-header-inner,
.et_pb_section.acs-header-home,
.et_pb_section.acs-header-inner {
    height: 100px;
    z-index: 10;
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* Row inside header — single row, no wrapping.
   flex-direction is pinned along with the rest: in the Visual Builder the
   header template's row is the topmost row of the page, so it is easy to
   select while meaning to edit the first content row. A direction set there
   stacks the logo under the menu and drags the absolutely positioned language
   switcher out of place. Change the header layout here, not in Divi. */
.acs-header-home .et_pb_row,
.acs-header-inner .et_pb_row {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 1140px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Logo column — fixed width */
.acs-header-home .et_pb_column:nth-child(1),
.acs-header-inner .et_pb_column:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
}

/* Menu column — take remaining space, align right */
.acs-header-home .et_pb_column:nth-child(2),
.acs-header-inner .et_pb_column:nth-child(2) {
    flex: 1 1 auto !important;
    padding: 0 !important;
}

/* Third column — lang sits absolute, this column is invisible */
.acs-header-home .et_pb_column:nth-child(3),
.acs-header-inner .et_pb_column:nth-child(3) {
    flex: 0 0 0px !important;
    width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
}

/* Modules inside header — remove Divi default margins */
.acs-header-home .et_pb_module,
.acs-header-inner .et_pb_module {
    margin-bottom: 0 !important;
}

/* ── Header HOME: fixed, transparent overlay ── */
.acs-header-home,
.et_pb_section.acs-header-home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
}

/* Logo white on home overlay */
.acs-header-home .acs-logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease-in-out;
}

.acs-header-home .acs-menu-link {
    color: #fff;
}

.acs-header-home .acs-lang-switcher a {
    color: #fff !important;
}

.acs-header-home .acs-lang-switcher li {
    border-left-color: rgba(255, 255, 255, 0.4) !important;
}

.acs-header-home .acs-lang-switcher a.active {
    color: #69ca97 !important;
}

.acs-header-home .acs-hamburger-bar {
    background: #fff;
}

/* Home scroll state — white bar */
.acs-header-home.acs-header-scrolled,
.et_pb_section.acs-header-home.acs-header-scrolled {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Scroll: restore original logo colors */
.acs-header-home.acs-header-scrolled .acs-logo img {
    filter: none;
}

.acs-header-home.acs-header-scrolled .acs-menu-link {
    color: #333;
}

.acs-header-home.acs-header-scrolled .acs-lang-switcher a {
    color: #7a4343 !important;
}

.acs-header-home.acs-header-scrolled .acs-lang-switcher li {
    border-left-color: #cbcbcb !important;
}

.acs-header-home.acs-header-scrolled .acs-lang-switcher a.active {
    color: #69ca97 !important;
}

.acs-header-home.acs-header-scrolled .acs-hamburger-bar,
.acs-header-inner .acs-hamburger-bar {
    background: #006892;
}

/* ── Header INNER: fixed, white background ── */
.et-l--header:has(.acs-header-inner) {
    height: 100px;
    position: relative;
    z-index: 999;
}

.acs-header-inner,
.et_pb_section.acs-header-inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Logo — Divi Image module */
.acs-logo,
.et_pb_image.acs-logo {
    float: left;
    margin-top: 10px;
    margin-bottom: 0 !important;
}

.acs-logo img,
.acs-logo .et_pb_image_wrap img {
    width: 182px !important;
    height: 60px !important;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

/* Content padding to compensate fixed header (homepage only) */
.acs-margin-header {
    padding-top: 100px;
}

/* ═══════════════════════════════════════
   2. DESKTOP MENU
   ═══════════════════════════════════════ */
.acs-main-nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    width: 100%;
    margin-top: 45px;
}

.acs-menu,
ul.acs-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px;
}

.acs-menu-item,
.acs-menu > li {
    position: relative;
    list-style: none !important;
    float: left;
    margin: 0 15px 0 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.acs-menu > li:last-child {
    margin-right: 0 !important;
}

.acs-menu-link {
    display: block;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #333;
    transition: color 0.3s ease-in-out;
    letter-spacing: normal !important;
    position: relative;
    font-family: 'Roboto', sans-serif !important;
    line-height: 21px !important;
}

.acs-menu-link:hover {
    color: #999;
}

.acs-menu-item.active .acs-menu-link {
    color: #006892 !important;
}

.acs-has-mega {
    margin-right: 30px;
}

.acs-has-mega .acs-menu-link::after {
    content: '3';
    font-family: ETmodules !important;
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    top: -2px;
    right: -15px;
    line-height: 21px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Show after fonts loaded — class added by JS */
.acs-fonts-ready .acs-has-mega .acs-menu-link::after {
    opacity: 1;
}

.acs-has-mega {
    margin-right: 30px !important;
}

.acs-menu-arrow {
    display: none;
}

/* ═══════════════════════════════════════
   3. MEGA-MENU DROPDOWNS
   ═══════════════════════════════════════ */
.acs-mega-dropdown {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1140px;
    max-width: 1140px;
    background: #ebebeb;
    z-index: 98;
    animation: acsMegaSlideDown 0.25s ease;
}

.acs-mega-dropdown.acs-mega-open {
    display: block;
}

@keyframes acsMegaSlideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.acs-mega-inner {
    display: flex;
    padding: 30px;
    gap: 0;
}

/* Mega columns */
.acs-mega-col {
    flex: 1;
    padding: 0 15px;
}

.acs-mega-col:first-child {
    padding-left: 0;
}

.acs-mega-col:last-child {
    padding-right: 0;
}

.acs-mega-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #006892 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    font-family: 'Roboto', sans-serif !important;
    line-height: 27px !important;
}

.acs-mega-heading a {
    color: inherit !important;
    text-decoration: none !important;
}

.acs-mega-heading a:hover {
    text-decoration: underline !important;
}

/* Mega link list */
.acs-mega-links,
ul.acs-mega-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acs-mega-links li {
    list-style: none !important;
    border-bottom: 1px solid #fff !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 10px 0 !important;
}

.acs-mega-links li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.acs-mega-links a {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #232323 !important;
    text-decoration: none !important;
    transition: color 0.2s;
    display: inline !important;
    line-height: 24px !important;
    font-family: 'Roboto', sans-serif !important;
}

.acs-mega-links a:hover,
.acs-mega-links li a:hover,
.acs-mega-dropdown .acs-mega-links a:hover,
.acs-mega-col-img + .acs-mega-col .acs-mega-links a:hover,
.acs-mega-dropdown .acs-mega-col .acs-mega-links a:hover {
    color: #999 !important;
    text-decoration: none !important;
}

/* Direct mega link (Technologies layout) */
.acs-mega-link {
    display: block;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #006892 !important;
    text-decoration: none !important;
    padding: 0 !important;
    font-family: 'Roboto', sans-serif !important;
    line-height: 27px !important;
}

.acs-mega-link:hover {
    text-decoration: none !important;
}

/* ── Application Area mega-menu ── */

/* Image column — background with title overlay */
a.acs-mega-col-img {
    flex: 0 0 237px;
    min-height: 371px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center 30px !important;
    background-repeat: no-repeat !important;
    position: relative;
    display: block;
    text-decoration: none !important;
    padding-top: 80px;
}

/* Title overlay — white bar at top of image */
.acs-mega-img-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #fff;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Each word on its own line */
.acs-mega-img-title-first,
.acs-mega-img-title-rest {
    display: block;
}

/* First word — colored, bold */
.acs-mega-img-title-first {
    font-weight: 700 !important;
}

.acs-mega-title-green .acs-mega-img-title-first {
    color: #6acb96;
}

.acs-mega-title-teal .acs-mega-img-title-first {
    color: #006892;
}

/* Rest of title — dark */
.acs-mega-img-title-rest {
    color: #232323;
    transition: color 0.3s;
}

/* Hover: rest word lighter */
a.acs-mega-col-img:hover .acs-mega-img-title-rest {
    color: #999;
}

/* Links column next to image — has its own background */
.acs-mega-col-img + .acs-mega-col {
    background: #ebebeb;
    padding: 30px !important;
}

/* Application Area links — NO border-bottom separator */
.acs-mega-col-img + .acs-mega-col .acs-mega-links li {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
}

.acs-mega-col-img + .acs-mega-col .acs-mega-links a {
    font-size: 15px !important;
    color: #232323 !important;
    line-height: 18px !important;
}

/* Default padding for About Us / Technologies */
.acs-mega-inner {
    padding: 30px 30px 40px !important;
}

/* Application Area — no outer padding, blocks fill the space */
.acs-mega-inner:has(.acs-mega-col-img) {
    padding: 0 !important;
    gap: 0 !important;
}

/* Application Area — each half takes 50% */
.acs-mega-inner:has(.acs-mega-col-img) .acs-mega-col-img {
    flex: 0 0 auto;
    width: calc(5 / 12 * 50%);
}

.acs-mega-inner:has(.acs-mega-col-img) .acs-mega-col-img + .acs-mega-col {
    flex: 1;
}

/* ═══════════════════════════════════════
   4. LANGUAGE SWITCHER
   ═══════════════════════════════════════ */
.acs-lang-switcher,
ul.acs-lang-switcher {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: 15;
    align-items: center;
}

.acs-lang-switcher li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-left: 1px solid #cbcbcb;
    display: inline !important;
}

.acs-lang-switcher li:first-child {
    border-left: none !important;
}


.acs-lang-switcher a {
    display: inline !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #333;
    text-decoration: none !important;
    transition: color 0.3s ease-in-out;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    line-height: 10px !important;
}

.acs-lang-switcher a.active {
    color: #69ca97 !important;
}

.acs-lang-switcher li:last-child a {
    padding: 0 0 0 10px !important;
}

/* ═══════════════════════════════════════
   5. MOBILE MENU
   ═══════════════════════════════════════ */
.acs-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.acs-hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
    transform-origin: center;
}

/* Hamburger morphs to X when menu is open */
.acs-hamburger[aria-expanded="true"] {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 200;
}

.acs-hamburger[aria-expanded="true"] .acs-hamburger-bar {
    background: #fff;
}

.acs-hamburger[aria-expanded="true"] .acs-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.acs-hamburger[aria-expanded="true"] .acs-hamburger-bar:nth-child(2) {
    opacity: 0;
}

.acs-hamburger[aria-expanded="true"] .acs-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.acs-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.acs-mobile-overlay.active {
    display: block;
}

.acs-mobile-nav {
    position: fixed;
    top: 0;
    left: -80%;
    width: 80%;
    max-width: 384px;
    height: 100vh;
    background: #006792;
    z-index: 101;
    overflow: hidden;
    transition: left 0.3s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.acs-mobile-nav.acs-mobile-nav--open {
    left: 0;
}

/* Slide panels — stacked, only active one visible */
.acs-mobile-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
}

.acs-mobile-panel--root {
    transform: translateX(0);
    visibility: visible;
}

.acs-mobile-panel--active {
    transform: translateX(0);
    visibility: visible;
}

/* When a submenu is active, root slides left */
.acs-mobile-nav:has(.acs-mobile-panel:not(.acs-mobile-panel--root).acs-mobile-panel--active) .acs-mobile-panel--root {
    transform: translateX(-100%);
}

.acs-mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    min-height: 60px;
}

.acs-mobile-panel-title {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.acs-mobile-back {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
}

.acs-mobile-back-icon {
    display: inline-block;
    line-height: 1;
}

.acs-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acs-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acs-mobile-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.acs-mobile-link,
.acs-mobile-next {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 400;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.acs-mobile-link:hover,
.acs-mobile-link:focus,
.acs-mobile-next:hover,
.acs-mobile-next:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    text-decoration: none;
}

.acs-mobile-next {
    justify-content: space-between;
}

/* Category that also has its own page: the label is a link and the arrow is a
   separate control for the submenu. The divider makes the two targets read as
   two, so nobody taps the arrow expecting the page. */
.acs-mobile-item--split {
    display: flex;
    align-items: stretch;
}

.acs-mobile-item--split .acs-mobile-link {
    flex: 1 1 auto;
    width: auto;
}

.acs-mobile-next--arrow {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.acs-mobile-next-icon {
    display: inline-block;
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
}

.acs-mobile-label {
    flex: 1;
}

.acs-mobile-lang {
    padding: 20px;
    text-align: center;
}

.acs-mobile-lang-list,
ul.acs-mobile-lang-list {
    display: flex !important;
    gap: 0;
    justify-content: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
}

.acs-mobile-lang-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.acs-mobile-lang-list a {
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 12px;
    text-decoration: none;
    font-size: 14px;
}

.acs-mobile-lang-list li:last-child a {
    border-right: none;
}

.acs-mobile-lang-list a.active {
    font-weight: 700;
}

/* ═══════════════════════════════════════
   5b. HOMEPAGE SECTIONS
   ═══════════════════════════════════════ */

/* About ACS — title + subtitle centered */
.acs-about-section .et_pb_text,
.acs-about-section .et_pb_heading {
    text-align: center !important;
}

.acs-about-section .et_pb_heading h2,
.acs-about-section .et_pb_heading h1 {
    font-size: 40px !important;
    font-weight: 600 !important;
    color: #006892 !important;
    text-align: center !important;
}

.acs-about-section .et_pb_heading a {
    color: #006892 !important;
    text-decoration: none;
}

.acs-about-section .et_pb_text p {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #000 !important;
    text-align: center !important;
}

/* About ACS — gap zero on the title/subtitle column */
.acs-about-section .et_pb_column.et_flex_column_24_24 {
    gap: 0 !important;
}

/* Applications banner — fullwidth bg image with two circles */
.applications.banner-home,
.et_pb_section.applications {
    position: relative;
    overflow: visible;
}

/* Grayscale only on background, not on children */
.applications.banner-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
}

.applications.banner-home .et_pb_row {
    position: relative;
    z-index: 2;
    gap: 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
}

/* Emission Control circle */
.applications.banner-home .et_pb_column:first-child {
    width: 275px !important;
    height: 275px !important;
    flex: 0 0 275px !important;
    margin-right: 40px !important;
    background: #66CC9A !important;
    border-radius: 200px 0 200px 200px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3;
    transition: transform 0.3s ease-in-out;
}

/* Product Recovery circle */
.applications.banner-home .et_pb_column:last-child {
    width: 225px !important;
    height: 225px !important;
    flex: 0 0 225px !important;
    background: #006792 !important;
    border-radius: 0 200px 200px 200px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.applications.banner-home .et_pb_column:hover {
    transform: scale(1.05);
}

/* Text inside circles */
.applications.banner-home .et_pb_text,
.applications.banner-home .et_pb_text p,
.applications.banner-home .et_pb_text span {
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.applications.banner-home .et_pb_text a {
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .applications.banner-home .et_pb_column:first-child {
        width: 180px !important;
        height: 180px !important;
        flex: 0 0 180px !important;
    }
    .applications.banner-home .et_pb_column:last-child {
        width: 150px !important;
        height: 150px !important;
        flex: 0 0 150px !important;
    }
    .applications.banner-home .et_pb_text,
    .applications.banner-home .et_pb_text p,
    .applications.banner-home .et_pb_text span {
        font-size: 20px !important;
    }
}

/* About ACS — blurb cards */
.acs-about-section .et_pb_blurb {
    text-align: left !important;
}

.acs-about-section .et_pb_blurb .et_pb_main_blurb_image,
.acs-about-section .et_pb_blurb .et_pb_main_blurb_image img,
.acs-about-section .et_pb_blurb .et-pb-icon {
    max-height: 90px !important;
    width: auto !important;
    margin: 0 0 15px !important;
    text-align: left !important;
}

.acs-about-section .et_pb_blurb .et_pb_image_wrap {
    text-align: left !important;
    display: block !important;
}

.acs-about-section .et_pb_blurb h3,
.acs-about-section .et_pb_blurb .et_pb_module_header {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #006892 !important;
    margin-bottom: 10px;
}

.acs-about-section .et_pb_blurb .et_pb_blurb_description,
.acs-about-section .et_pb_blurb .et_pb_blurb_description p {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #000 !important;
    line-height: 1.5;
}

/* Technology section — center everything */
.acs-about-section + .et_pb_section + .et_pb_section + .et_pb_section + .et_pb_section .et_pb_heading,
.et_pb_section:has(+ .acs-map-section) .et_pb_heading {
    text-align: center !important;
}

.et_pb_section:has(+ .acs-map-section) .et_pb_heading h2 {
    font-size: 35px !important;
    font-weight: 300 !important;
    color: #434343 !important;
    text-align: center !important;
}

.et_pb_section:has(+ .acs-map-section) .et_pb_image {
    text-align: center;
}

.et_pb_section:has(+ .acs-map-section) .et_pb_image img {
    max-height: 80px;
    width: auto;
}

.et_pb_section:has(+ .acs-map-section) .et_pb_row {
    justify-content: center;
    align-items: center;
}

/* ═══════════════════════════════════════
   6. NEWSLETTER BAR
   ═══════════════════════════════════════ */
/* Override Divi's footer section backgrounds */
.acs-newsletter-bar,
.et-l--footer>.et_builder_inner_content .et_pb_section.acs-newsletter-section.et_pb_section {
    background-color: #6A7378 !important;
    padding: 0 !important;
}

/* The newsletter section must be able to grow: Divi bakes `.et_pb_row_0_tb_footer { height: 100px }`
   into the footer layout, which capped the bar as soon as the form showed an error or the
   success message. 100px stays as the minimum, so the bar looks the same at rest. */
.et-l--footer>.et_builder_inner_content .et_pb_section.acs-newsletter-section.et_pb_section .et_pb_row {
    height: auto !important;
    min-height: 100px;
}

.acs-newsletter-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px 15px 0;
    gap: 30px;
}

.acs-newsletter-text {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    white-space: nowrap;
    line-height: 50px;
}

.acs-newsletter-text strong {
    font-weight: 700;
}

.acs-newsletter-form-wrap {
    flex: 0 0 auto;
}

.acs-newsletter-input-group {
    display: flex;
    gap: 0;
}

.acs-newsletter-input-group input[type="email"] {
    width: 440px;
    max-width: 100%;
    padding: 4px 10px 4px 30px;
    border: 1px solid #fff;
    border-radius: 50px 0 0 50px;
    font-size: 14px;
    font-weight: 300;
    height: 40px;
    outline: none;
    box-sizing: border-box;
}

.acs-newsletter-submit {
    padding: 0;
    width: 100px;
    height: 40px;
    background: #66CC9A;
    border: 1px solid transparent;
    border-radius: 0 100px 100px 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acs-newsletter-submit:hover {
    background-color: #55b888;
}

.acs-nl-arrow {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
    -webkit-text-stroke: 1px #fff;
    margin-top: -3px;
}

.acs-newsletter-submit:hover .acs-nl-arrow {
    transform: translateX(5px);
}

.acs-checkbox-row {
    margin-top: 8px;
}

.acs-checkbox,
.acs-info-request .acs-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.acs-info-request label {
    color: #fff;
}

.acs-checkbox input[type="checkbox"] {
    margin: 0;
}

/* ═══════════════════════════════════════
   7. INFO REQUEST FORM
   ═══════════════════════════════════════ */
.et-l--footer>.et_builder_inner_content .et_pb_section.acs-info-request-section.et_pb_section {
    background-color: #006892 !important;
}

.acs-info-request-section .et_pb_row {
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.acs-info-request-section .et_pb_column {
    width: 50% !important;
}

/* Image column: stretch to fill row height */
.acs-info-request-section .et_pb_row {
    align-items: stretch !important;
}

.acs-info-request-section .acs-info-request-bg .et_pb_code,
.acs-info-request-section .acs-info-request-bg .et_pb_code_inner {
    height: 100%;
}

.acs-info-request-section .acs-info-request-bg .et_pb_code_inner > div {
    height: 100%;
    min-height: 0 !important;
}


.acs-info-request {
    padding: 5%;
    background: #006892;
    color: #fff;
}

.acs-info-request-title {
    font-size: 35px;
    color: #fff;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.acs-info-request-subtitle {
    font-size: 20px;
    color: #fff;
    margin: 0 0 20px 0;
    font-weight: 300;
}

.acs-field {
    margin-bottom: 16px;
}

.acs-field label {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 4px;
}

.acs-field input[type="text"],
.acs-field input[type="email"],
.acs-field input[type="tel"] {
    width: 100%;
    padding: 4px 10px;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    font-size: 14px;
    height: 30px;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
}

.acs-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 0;
    font-size: 14px;
    height: 150px;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
    resize: vertical;
}

.acs-field input:focus,
.acs-field textarea:focus {
    outline: none;
    border-color: #fff;
    box-shadow: none;
}

.acs-field input::placeholder,
.acs-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.acs-btn-primary {
    padding: 8px 30px;
    background: #66CC9A;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
    float: right;
}

.acs-btn-primary:hover {
    background: #55b888;
}

/* ═══════════════════════════════════════
   8. FORM MESSAGES
   ═══════════════════════════════════════ */
.acs-form-message {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    display: none;
}

.acs-form-message.success,
.acs-form-message.error {
    display: block;
}

.acs-form-message.success {
    background: rgba(106, 203, 150, 0.95);
    color: #fff;
}

.acs-form-message.error {
    background: rgba(231, 76, 60, 0.95);
    color: #fff;
}

/* Newsletter: message floats above the bar so it's visible on grey bg */
.acs-newsletter-bar .acs-form-message {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.acs-newsletter-form-wrap {
    position: relative;
}

/* Invalid input styling (HTML5 :invalid after submit attempt) */
.acs-form-submitted input:invalid,
.acs-form-submitted textarea:invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.acs-form-loading .acs-btn-submit {
    opacity: 0.6;
    pointer-events: none;
}

/* ═══════════════════════════════════════
   9. DOWNLOAD TABS
   ═══════════════════════════════════════ */
.acs-downloads .acs-download-tabs,
.acs-download-tabs {
    max-width: 1140px !important;
    margin: 0 auto !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Tab navigation */
.acs-downloads .acs-download-tab-nav,
.acs-download-tab-nav {
    display: flex !important;
    list-style: none !important;
    margin: 30px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
}

.acs-downloads .acs-download-tab-nav li,
.acs-download-tab-nav li {
    margin: 0 15px 10px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.acs-downloads .acs-download-tab-btn,
.acs-download-tab-btn {
    background: #666 !important;
    color: #fff !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    display: inline-block !important;
    padding: 6px 20px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    font-family: 'Roboto', sans-serif !important;
    transition: background-color 0.2s ease !important;
}

.acs-downloads .acs-download-tab-btn:hover,
.acs-downloads .acs-download-tab-btn:focus,
.acs-download-tab-btn:hover,
.acs-download-tab-btn:focus {
    background: #999 !important;
    color: #fff !important;
}

.acs-downloads .acs-download-tab-btn.active,
.acs-download-tab-btn.active {
    background: #246680 !important;
    color: #fff !important;
}

/* Tab panels */
.acs-downloads .acs-download-tab-panel,
.acs-download-tab-panel {
    display: none !important;
}

.acs-downloads .acs-download-tab-panel.active,
.acs-download-tab-panel.active {
    display: block !important;
}

/* Standard download rows */
.acs-downloads .acs-download-list,
.acs-download-list {
    display: flex !important;
    flex-direction: column !important;
}

.acs-downloads .acs-download-row-link,
.acs-download-row-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #cbcbcb !important;
    padding: 15px 0 !important;
    transition: background-color 0.2s ease !important;
}

.acs-downloads .acs-download-row-link:hover,
.acs-download-row-link:hover {
    background: #ebebeb !important;
}

.acs-downloads .acs-download-row,
.acs-download-row {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 220px !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
}

.acs-downloads .acs-download-year,
.acs-download-year {
    display: inline-block !important;
    width: auto !important;
    min-width: 88px !important;
    padding: 6px 20px !important;
    text-align: center !important;
    border: 1px solid #006792 !important;
    color: #006792 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    font-family: 'Roboto', sans-serif !important;
}

.acs-downloads .acs-download-title,
.acs-download-title {
    color: #666 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
}

.acs-downloads .acs-download-tags,
.acs-download-tags {
    color: #666 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: left !important;
    font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
}

.acs-downloads .acs-download-row-link:hover .acs-download-year,
.acs-download-row-link:hover .acs-download-year {
    border-color: #006792 !important;
    color: #006792 !important;
}

.acs-downloads .acs-download-row-link:hover .acs-download-title,
.acs-downloads .acs-download-row-link:hover .acs-download-tags,
.acs-download-row-link:hover .acs-download-title,
.acs-download-row-link:hover .acs-download-tags {
    color: #232323 !important;
}

/* Case Studies rows */
.acs-downloads .acs-download-row--case,
.acs-download-row--case {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}

.acs-downloads .acs-download-case-info,
.acs-download-case-info {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.acs-downloads .acs-download-case-link,
.acs-download-case-link {
    font-size: 16px !important;
    line-height: 20px !important;
    color: #666 !important;
    text-decoration: none !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
}

.acs-downloads .acs-download-case-link:hover,
.acs-download-case-link:hover {
    color: #232323 !important;
}

.acs-downloads .acs-icon-file,
.acs-icon-file {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    opacity: 0.6 !important;
}

.acs-downloads .acs-icon-file::before,
.acs-icon-file::before {
    content: '\1F4C4';
    font-style: normal;
}

.acs-downloads .acs-download-case-badges,
.acs-download-case-badges {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
}

.acs-download-list--cases .acs-download-row {
    padding: 0 !important;
    transition: background-color 0.2s ease !important;
}

.acs-download-list--cases .acs-download-row:hover {
    background: #ebebeb !important;
}

.acs-download-list--cases .acs-download-row:hover .acs-download-case-link,
.acs-download-list--cases .acs-download-row:hover .acs-download-case-info,
.acs-download-list--cases .acs-download-row:hover .acs-download-case-info span {
    color: #232323 !important;
}

/* Application area badges */
.acs-downloads .acs-badge,
.acs-badge {
    display: inline-block !important;
    padding: 5px 10px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
    white-space: nowrap !important;
    font-family: 'Roboto', sans-serif !important;
}

.acs-downloads .acs-badge:hover,
.acs-badge:hover {
    opacity: 0.85 !important;
    color: #fff !important;
}

.acs-downloads .acs-badge-green,
.acs-badge-green {
    background: #66cc9a !important;
}

.acs-downloads .acs-badge-blue,
.acs-badge-blue {
    background: #246680 !important;
}

@media (max-width: 980px) {
    .acs-downloads .acs-download-row,
    .acs-download-row {
        grid-template-columns: 100px minmax(0, 1fr) 180px !important;
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .acs-downloads .acs-download-tab-nav,
    .acs-download-tab-nav {
        margin: 20px 0 !important;
    }

    .acs-downloads .acs-download-tab-nav li,
    .acs-download-tab-nav li {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .acs-downloads .acs-download-tab-btn,
    .acs-download-tab-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .acs-downloads .acs-download-row,
    .acs-download-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .acs-downloads .acs-download-year,
    .acs-download-year {
        min-width: 0 !important;
        justify-self: start !important;
    }

    .acs-downloads .acs-download-tags,
    .acs-download-tags {
        text-align: left !important;
    }

    .acs-downloads .acs-download-row--case,
    .acs-download-row--case {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
}

/* Loading spinner */
.acs-download-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.acs-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #dee2e6;
    border-top-color: #006892;
    border-radius: 50%;
    animation: acsSpin 0.7s linear infinite;
}

@keyframes acsSpin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.acs-download-empty {
    padding: 30px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* ═══════════════════════════════════════
   10. WORLD MAP
   ═══════════════════════════════════════ */
.acs-world-map-section {
    background: #fff;
    padding: 80px 0 40px;
}

.acs-world-map-header {
    text-align: center;
    margin-bottom: 30px;
}

.acs-world-map-title {
    font-size: 40px;
    color: #006892;
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* Filter toggle buttons — pill style like original */
.acs-map-filter {
    display: inline-flex;
    gap: 15px;
    margin-top: 30px;
}

.acs-map-filter-btn {
    padding: 6px 20px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    background: #666;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.3s;
}

.acs-map-filter-btn:hover {
    background: #999;
}

.acs-map-filter-btn.active {
    background: #246680;
}

.acs-map-filter-btn.active[data-application="EmissionControl"] {
    background: #66cc9a;
}

.acs-map-filter-btn.active[data-application="ProductRecovery"] {
    background: #246680;
}

/* Map wrapper */
.acs-world-map-wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.acs-map-svg {
    width: 100%;
}

.acs-map-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG country paths — default empty countries */
.acs-map-svg svg path {
    fill: lightgray;
    stroke: #fff;
    stroke-width: 0.5;
    transition: fill 0.3s;
}

/* Countries with data/selection */
.acs-map-svg svg path[data-count] {
    fill: rgb(175, 190, 197);
}

/* Markers layer */
.acs-map-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Individual marker circles */
.acs-map-circle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0e6b92;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 6;
    transition: transform 0.2s, background 0.2s;
}

/* Triangle pointer below circle */
.acs-map-circle::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 4px 0 4px;
    border-color: #0e6b92 transparent transparent transparent;
    transition: border-color 0.2s;
}

.acs-map-circle:hover {
    transform: scale(1.3);
    z-index: 10;
}

/* Emission Control = green */
.acs-map-circle.Emission {
    background: #66cc9a;
}

.acs-map-circle.Emission::after {
    border-color: #66cc9a transparent transparent transparent;
}

/* Product Recovery = teal (default color already #0e6b92) */

/* ═══════════════════════════════════════
   11. LATEST POSTS
   ═══════════════════════════════════════ */
.acs-latest-tabs {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 30px;
}

.acs-latest-tab-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.acs-latest-tab-btn {
    padding: 6px 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
    background: #666;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.acs-latest-tab-btn:hover {
    background: #999;
    color: #fff;
}

.acs-latest-tab-btn.active {
    color: #fff;
    background: #246680;
}

/* Post cards grid */
.acs-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.acs-latest-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    position: relative;
    padding-bottom: 34px;
    transition: opacity 0.2s ease;
}

.acs-latest-card:hover {
    opacity: 0.92;
}

.acs-latest-card-img {
    height: 260px;
    overflow: hidden;
}

.acs-latest-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.acs-latest-card:hover .acs-latest-card-img img {
    transform: scale(1.05);
}

.acs-latest-card-body {
    padding: 14px 0 0;
}

.acs-latest-card-date {
    display: block;
    font-size: 16px;
    color: #006892;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}

.acs-latest-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.acs-latest-card-excerpt {
    font-size: 14px;
    color: #000;
    line-height: 22px;
}

.acs-latest-card::after {
    content: '\203A';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #006892;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    transition: transform 0.2s ease, color 0.2s ease;
}

.acs-latest-card:hover::after {
    color: #004d6e;
    transform: translateX(4px);
}

/* Load more */
.acs-latest-load-more-wrap {
    text-align: center;
    margin-top: 30px;
}

.acs-latest-empty {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .acs-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acs-latest-grid {
        grid-template-columns: 1fr;
    }

    .acs-latest-card-img {
        height: 220px;
    }

    .acs-latest-tab-btn {
        width: auto;
        padding: 6px 18px;
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════
   12. CAREERS FORM
   ═══════════════════════════════════════ */
.acs-careers-form-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Row layout — 3 equal columns */
.acs-careers-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 20px;
    margin-bottom: 8px;
}

.acs-careers-row-align-top {
    align-items: start;
}

.acs-careers-col-full {
    grid-column: 1 / -1;
}

/* Labels */
.acs-careers-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    line-height: 1.2;
    margin-bottom: 6px;
}

/* Text inputs */
.acs-careers-form input[type="text"],
.acs-careers-form input[type="email"],
.acs-careers-form input[type="tel"],
.acs-careers-form select {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    font-size: 11px;
    color: #7E7E7E;
    background: #fff;
    border: 1px solid #cbcbcb;
    border-radius: 0;
    box-sizing: border-box;
}

.acs-careers-form input:focus,
.acs-careers-form select:focus {
    border-color: #006892;
    outline: none;
}

/* Checkbox/radio inline groups */
.acs-careers-radios {
    display: flex;
    gap: 16px;
    margin-top: 2px;
}

.acs-careers-checks {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.acs-careers-radios label,
.acs-careers-checks label {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
}

.acs-careers-radios input[type="checkbox"],
.acs-careers-radios input[type="radio"],
.acs-careers-checks input[type="checkbox"],
.acs-careers-gdpr input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border: 1px solid #cbcbcb;
    border-radius: 2px;
    background: #fff;
    margin: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.acs-careers-radios input[type="checkbox"]:checked,
.acs-careers-radios input[type="radio"]:checked,
.acs-careers-checks input[type="checkbox"]:checked,
.acs-careers-gdpr input[type="checkbox"]:checked {
    background: #1A4A7B;
    border-color: #1A4A7B;
}

.acs-careers-radios input[type="checkbox"]:checked::after,
.acs-careers-radios input[type="radio"]:checked::after,
.acs-careers-checks input[type="checkbox"]:checked::after,
.acs-careers-gdpr input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

/* GDPR */
.acs-careers-gdpr {
    font-size: 12px;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 0;
}

.acs-careers-gdpr input {
    width: auto;
    height: auto;
    margin: 0;
}

/* Submit button */
.acs-careers-submit-row {
    text-align: center;
    margin-top: 20px;
}

.acs-careers-submit-btn {
    display: inline-block;
    width: 255px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background: #1A4A7B;
    border: 1px solid #1A4A7B;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
}

.acs-careers-submit-btn:hover {
    background: #0e3a65;
}

/* File upload */
.acs-file-upload {
    position: relative;
}

.acs-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.acs-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 16px;
    border: 2px dashed #cbcbcb;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 180px;
}

.acs-file-label:hover {
    border-color: #006892;
    background: #f8f9fa;
}

.acs-file-label-text {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 0;
}

.acs-file-label-sub {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.acs-file-label-or {
    font-size: 12px;
    color: #999;
    margin: 4px 0;
}

.acs-file-btn {
    display: inline-block;
    padding: 6px 20px;
    background: #1A4A7B;
    color: #fff;
    font-size: 13px;
    border-radius: 0;
    margin: 6px 0;
}

.acs-file-types {
    font-size: 11px;
    color: #6c757d;
}

.acs-file-preview {
    margin-top: 8px;
    font-size: 13px;
    color: #006892;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .acs-careers-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 15px;
    }

    .acs-careers-row-align-top {
        grid-template-columns: 1fr;
    }

    .acs-careers-col {
        margin-bottom: 10px;
    }

    .acs-file-label {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .acs-careers-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .acs-careers-submit-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════
   13. CONTACTS
   ═══════════════════════════════════════ */
.acs-contacts {
    width: 100%;
    margin: 0 auto;
}

/* ── Tabs (pills, gray/blue) ── */
.acs-contacts-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 40px auto !important;
    max-width: 1141px;
    justify-content: flex-start !important;
    align-items: center;
    text-align: left;
}

.acs-contacts-tab-btn {
    padding: 6px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #666666;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.acs-contacts-tab-btn:hover,
.acs-contacts-tab-btn:focus {
    background: #246680;
}

.acs-contacts-tab-btn.active {
    background: #246680;
}

/* ── Grid (count-aware via data-visible) ── */
.acs-contacts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
    width: 100%;
    align-items: flex-start;
}

.acs-contact-card {
    box-sizing: border-box;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column; /* default: stack (when in narrow column) */
    gap: 24px;
    flex: 0 1 calc((100% - 48px) / 3);
}

.acs-contacts-grid[data-visible="1"] .acs-contact-card {
    flex-basis: 100%;
    flex-direction: row; /* single visible: side-by-side internal */
    align-items: center; /* vertically center map + info inside the card */
    gap: 40px;
}

.acs-contacts-grid[data-visible="2"] .acs-contact-card {
    flex-basis: calc((100% - 24px) / 2);
}
/* 3+ → 3 per row, 1/3 width each */

/* ── Map column ── */
.acs-contact-card-map {
    flex: 1 1 100%;
    width: 100%;
    line-height: 0;
}

.acs-contacts-grid[data-visible="1"] .acs-contact-card-map {
    flex: 0 0 50%;
    width: 50%;
}

.acs-contact-card-map iframe {
    width: 100%;
    height: 280px;
    border: 0;
    display: block;
}

.acs-contacts-grid[data-visible="1"] .acs-contact-card-map iframe {
    height: 380px;
}

/* ── Info column ── */
.acs-contact-card-info {
    flex: 1 1 100%;
    width: 100%;
    padding-left: 30px; /* always indent text content from card edge */
    box-sizing: border-box;
}

.acs-contacts-grid[data-visible="1"] .acs-contact-card-info {
    flex: 0 0 50%;
    width: 50%;
}

/* ── Heading "Speak to our headquarters: Porto office" ── */
.acs-contact-card-heading {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    line-height: 1.3;
}

.acs-contact-card-subtitle {
    color: #333;
}

.acs-contact-card-title {
    color: #006892;
    margin-left: 6px;
}

/* ── Info inner grid (CONTACTS | ENQUIRES) ── */
.acs-contact-card-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.acs-contact-section-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #333 !important;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.acs-contact-text {
    font-size: 14px !important;
    color: #333 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.acs-contacts a,
.acs-contact-text a {
    color: #333 !important;
    text-decoration: none !important;
}

.acs-contacts a:hover,
.acs-contacts a:focus,
.acs-contact-text a:hover,
.acs-contact-text a:focus {
    color: #999 !important;
    text-decoration: none !important;
}

.acs-contact-note {
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

/* WhatsApp line — icon and number on one baseline */
.acs-contact-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.acs-whatsapp-icon {
    /* explicit both ways: the icon must not depend on the flex row resolving
       an intrinsic width for it */
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .acs-contacts-grid[data-visible="1"] .acs-contact-card {
        flex-direction: column;
        gap: 24px;
    }
    .acs-contacts-grid[data-visible="1"] .acs-contact-card-map {
        flex: 1 1 100%;
        width: 100%;
    }
    .acs-contacts-grid[data-visible="1"] .acs-contact-card-info {
        flex: 1 1 100%;
        width: 100%;
        /* keep padding-left: 30px from base */
    }
    .acs-contacts-grid[data-visible="1"] .acs-contact-card-map iframe {
        height: 280px;
    }
    .acs-contacts-grid[data-visible="2"] .acs-contact-card,
    .acs-contacts-grid[data-visible="3"] .acs-contact-card,
    .acs-contacts-grid:not([data-visible="1"]) .acs-contact-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 768px) {
    .acs-contact-card-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .acs-contact-card-heading {
        font-size: 19px;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 600px) {
    .acs-contacts-grid .acs-contact-card,
    .acs-contacts-grid[data-visible="2"] .acs-contact-card,
    .acs-contacts-grid[data-visible="3"] .acs-contact-card {
        flex-basis: 100%;
    }
}

.acs-contacts-empty {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 0;
}

/* ═══════════════════════════════════════
   12a1. PARTNERS SECTION
   ═══════════════════════════════════════ */
#acs-partners .et_pb_heading h2,
#acs-partners .et_pb_heading .et_pb_module_header {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#acs-partners .et_pb_text,
#acs-partners .et_pb_text p {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #232323 !important;
    line-height: 18px !important;
    padding-bottom: 0 !important;
}

#acs-partners .et_pb_text a {
    color: #232323 !important;
    text-decoration: none;
    font-size: 12px !important;
}

#acs-partners .et_pb_text a:hover {
    color: #006892 !important;
}

/* ═══════════════════════════════════════
   12b1. NUMBER COUNTERS (geographical presence)
   ═══════════════════════════════════════ */
.et_pb_number_counter .percent-value {
    font-size: 90px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.et_pb_number_counter .title {
    font-size: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.et_pb_number_counter .percent {
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .et_pb_number_counter .percent-value {
        font-size: 70px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .title {
        font-size: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .percent {
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter.et_pb_module {
        gap: 0 !important;
    }

    .et_pb_number_counter.et_pb_module ~ .et_pb_number_counter.et_pb_module {
        margin-top: 0 !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_column {
        gap: 10px !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_row {
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .et_pb_number_counter .percent-value {
        font-size: 55px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .title {
        font-size: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .percent {
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_column {
        gap: 5px !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_row {
        gap: 5px !important;
    }
}

@media (max-width: 480px) {
    .et_pb_number_counter .percent-value {
        font-size: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .title {
        font-size: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_number_counter .percent {
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_column {
        gap: 0 !important;
    }

    .et_pb_section:has(.et_pb_number_counter) .et_pb_row {
        gap: 0 !important;
    }
}

/* ═══════════════════════════════════════
   12b2. APPLICATION NAV (circle + overlay)
   ═══════════════════════════════════════ */
.acs-app-nav {
    position: relative;
    display: inline-block;
    z-index: 30;
}

.acs-app-nav.acs-app-nav--open {
    z-index: 60;
}

.et_pb_column:has(.acs-app-nav--open),
.et_pb_code:has(.acs-app-nav--open) {
    position: relative !important;
    z-index: 80 !important;
}

.acs-app-nav-circle {
    width: 115px;
    height: 115px;
    border-radius: 200px 0 200px 200px;
    display: table;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    padding: 15px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    position: relative;
    z-index: 35;
}

.acs-app-nav.acs-app-nav--open .acs-app-nav-circle {
    z-index: 65;
}

.acs-app-nav-circle > div {
    display: table-cell;
    vertical-align: middle;
}

.acs-app-nav-circle:hover {
    transform: scale(1.05);
}

.acs-app-nav--ec .acs-app-nav-circle {
    background: #66CC9A;
}

.acs-app-nav--pr .acs-app-nav-circle {
    background: #006792;
    border-radius: 0 200px 200px 200px;
}

/* Overlay */
.acs-app-nav-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10;
    padding: 0;
}

.acs-app-nav-overlay.open {
    display: block;
    min-height: 100%;
}

#acs-application-area {
    position: relative;
}

/* Heading hierarchy — Application Area + Technology Global Vision sections */
#acs-application-area h2,
#global-vision h2 {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}

#acs-application-area h3,
#global-vision h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}

#acs-application-area .acs-box-biomass h3 {
    color: #006892 !important;
}

#acs-application-area h4,
#global-vision h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}


#acs-application-area p,
#global-vision p {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000 !important;
    line-height: 24px !important;
    padding-bottom: 0 !important;
}

#acs-application-area .acs-image-label p {
        font-size: 11px !important;
        text-align: center;
        font-weight: 400 !important;
        color: #000 !important;
        line-height: 15px !important;
        padding-bottom: 0 !important;
}

.acs-app-nav-panel {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 0 15px 30px 0;
    position: relative;
    min-height: 200px;
}

.acs-app-nav-spacer {
    width: 115px;
    flex: 0 0 115px;
    display: flex;
    align-items: flex-start;
    padding-top: 75px;
}

.acs-app-nav-circle-ghost {
    width: 115px;
    height: 115px;
    border-radius: 200px 0 200px 200px;
    display: table;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    padding: 15px;
    cursor: default;
}

.acs-app-nav-circle-ghost > div {
    display: table-cell;
    vertical-align: middle;
}

.acs-app-nav-circle-ghost.acs-app-nav--ec {
    background: #66CC9A;
}

.acs-app-nav-circle-ghost.acs-app-nav--pr {
    background: #006792;
    border-radius: 0 200px 200px 200px;
}

.acs-app-nav-links {
    flex: 1;
    padding: 66px 70px 0 30px;
}

.acs-app-nav-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    columns: 1;
    column-gap: 0;
}

.acs-app-nav-links li {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    break-inside: avoid;
}

.acs-app-nav-links li::before {
    content: none !important;
    display: none !important;
}

.acs-app-nav-links a {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}

.acs-app-nav--ec .acs-app-nav-links a:hover,
.acs-app-nav--ec .acs-app-nav-links a:focus,
.acs-app-nav-overlay.acs-app-nav--ec .acs-app-nav-links a:hover,
.acs-app-nav-overlay.acs-app-nav--ec .acs-app-nav-links a:focus {
    color: #66CC9A !important;
}

.acs-app-nav--ec .acs-app-nav-links li.current a,
.acs-app-nav-overlay.acs-app-nav--ec .acs-app-nav-links li.current a {
    font-weight: 700;
    color: #66CC9A !important;
}

.acs-app-nav--pr .acs-app-nav-links a:hover,
.acs-app-nav--pr .acs-app-nav-links a:focus,
.acs-app-nav-overlay.acs-app-nav--pr .acs-app-nav-links a:hover,
.acs-app-nav-overlay.acs-app-nav--pr .acs-app-nav-links a:focus {
    color: #006892 !important;
}

.acs-app-nav--pr .acs-app-nav-links li.current a,
.acs-app-nav-overlay.acs-app-nav--pr .acs-app-nav-links li.current a {
    font-weight: 700;
    color: #006892 !important;
}

.acs-app-nav-close {
    position: absolute;
    top: 0;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    line-height: 1;
    padding: 10px;
    z-index: 10;
}

.acs-app-nav-close:hover {
    color: #ccc;
}

@media (max-width: 768px) {
    .acs-app-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        z-index: 100;
        overflow-y: auto;
        padding: 80px 20px 20px;
    }

    .acs-app-nav-panel {
        flex-direction: column;
    }

    .acs-app-nav-spacer {
        display: none;
    }

    .acs-app-nav-links ul {
        columns: 1;
    }

    .acs-app-nav-close {
        top: 20px;
        right: 20px;
        font-size: 36px;
    }
}

/* ═══════════════════════════════════════
   12c. APPLICATION GRID
   ═══════════════════════════════════════ */
.acs-app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
}

.acs-app-card {
    position: relative;
    display: block;
    min-width: 0;
    margin-bottom: 0;
    padding-bottom: 26px;
    color: #232323;
}

.acs-app-card-link {
    text-decoration: none;
    display: block;
}

.acs-app-card-img {
    overflow: hidden;
    aspect-ratio: 350 / 250;
    margin-bottom: 15px;
    background: #f4f4f4;
}

.acs-app-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.acs-app-card:hover .acs-app-card-img img {
    transform: scale(1.03);
}

.acs-app-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #232323 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
}

.acs-app-card-title a {
    color: #232323 !important;
    text-decoration: none;
}

.acs-app-card-title a:hover {
    color: #006892 !important;
}

.acs-app-card-desc {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #000 !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acs-app-card::after {
    content: '\203A';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #006892;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.acs-app-card:hover::after {
    color: #004d6e;
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .acs-app-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acs-app-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   12d. CASE STUDIES CAROUSEL
   ═══════════════════════════════════════ */
.acs-case-studies {
    margin-top: 60px;
    padding-top: 0;
}

.acs-case-studies-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 60px 0 0 0 !important;
    padding: 0 0 20px 0 !important;
}

/* Carousel wrapper */
.acs-cs-carousel-wrap {
    position: relative;
    padding: 0 50px;
}

.acs-cs-carousel-viewport {
    overflow: hidden;
}

.acs-cs-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px;
}

/* Slide */
.acs-cs-slide {
    flex: 0 0 calc((100% - 40px) / 3);
}

.acs-cs-link {
    text-decoration: none;
    display: block;
}

.acs-cs-img {
    overflow: hidden;
    height: 250px;
}

.acs-cs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.acs-cs-slide:hover .acs-cs-img img {
    transform: scale(1.05);
}

.acs-cs-caption {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Arrows */
.acs-cs-prev,
.acs-cs-next {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 60px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    line-height: 1;
    transition: color 0.2s;
}

.acs-cs-prev:hover,
.acs-cs-next:hover {
    color: #666;
}

.acs-cs-prev { left: 0; }
.acs-cs-next { right: 0; }

@media (max-width: 768px) {
    .acs-cs-slide {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .acs-cs-carousel-wrap {
        padding: 0 35px;
    }

    .acs-cs-prev,
    .acs-cs-next {
        font-size: 40px;
    }

    .acs-case-studies-title {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .acs-cs-slide {
        flex: 0 0 100%;
    }

    .acs-cs-carousel-wrap {
        padding: 0 30px;
    }
}

/* ═══════════════════════════════════════
   13. TEAM GRID
   ═══════════════════════════════════════ */
.acs-team-grid-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

/* Filter tabs — pill buttons */
.acs-team-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
}

.acs-team-tab-btn {
    padding: 6px 20px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background: #666;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.acs-team-tab-btn:hover {
    background: #555;
}

.acs-team-tab-btn.active {
    background: #246680;
}

/* Grid — 3 columns */
.acs-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px;
}

/* Card */
.acs-team-card {
    margin-bottom: 0;
}

.acs-team-card.hidden {
    display: none;
}

/* Image container with overlay */
.acs-team-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 470 / 320;
}

.acs-team-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover overlay */
.acs-team-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.acs-team-card:hover .acs-team-card-overlay {
    opacity: 1;
}

.acs-team-card-info {
    padding: 15px;
    width: 100%;
}

.acs-team-card-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
}

.acs-team-card-role {
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .acs-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .acs-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .acs-team-tabs {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .acs-team-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .acs-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   14. APPLICATION GRID
   ═══════════════════════════════════════ */
.acs-app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
}

.acs-app-card {
    position: relative;
    display: block;
    min-width: 0;
    padding-bottom: 26px;
    text-decoration: none !important;
    color: #232323;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    transition: none;
}

.acs-app-card:hover {
    box-shadow: none;
    transform: none;
}

.acs-app-card-img {
    aspect-ratio: 350 / 250;
    overflow: hidden;
    margin-bottom: 15px;
    background: #f4f4f4;
}

.acs-app-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.acs-app-card:hover .acs-app-card-img img {
    transform: scale(1.03);
}

.acs-app-card-body {
    padding: 0;
    position: relative;
}

.acs-app-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #232323 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
}

.acs-app-card-title a {
    color: #232323 !important;
    text-decoration: none !important;
}

.acs-app-card-title a:hover {
    color: #006892 !important;
    text-decoration: none !important;
}

.acs-app-card:hover .acs-app-card-title {
    color: #006892 !important;
}

.acs-app-card-desc,
.acs-app-card-excerpt {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #000 !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acs-app-card::after,
.acs-app-card-arrow {
    content: '\203A';
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: #006892;
    transition: transform 0.2s ease, color 0.2s ease;
}

.acs-app-card:hover::after,
.acs-app-card:hover .acs-app-card-arrow {
    color: #004d6e;
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .acs-app-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acs-app-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   15. BREADCRUMBS
   ═══════════════════════════════════════ */
.acs-breadcrumbs {
    padding: 12px 0;
    font-size: 13px;
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.acs-breadcrumb-link {
    color: #006892;
    text-decoration: none;
    transition: color 0.2s;
}

.acs-breadcrumb-link:hover {
    color: #004d6e;
    text-decoration: underline;
}

.acs-breadcrumb-current {
    color: #333;
    font-weight: 500;
}

/* ═══════════════════════════════════════
   12a. FOOTER CONTENT
   ═══════════════════════════════════════ */
.acs-footer-content {
    padding: 60px 0 30px !important;
    position: relative;
}

/* Footer column with two blocks — first at the top, second at the bottom.
   Used by Popular Searches (list + search box) and Menu (list + Follow Us).
   Add the CSS class acs-footer-split to those columns in Divi.
   The bottom edge is the row's height, which the tallest column sets. */
.acs-footer-content .acs-footer-split {
    justify-content: space-between !important;
}

.acs-footer-title {
    color: #006892 !important;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 21.6px;
    margin: 0 0 15px 0;
    padding: 0;
}

.acs-footer-text {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px;
}

.acs-footer-content a {
    color: #666;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.acs-footer-content a:hover {
    color: #006892;
    text-decoration: underline;
}

/* Popular Searches and Menu lists sit a step down from the 16px the rest of
   the footer uses. Scoped to the lists so the contact phone links keep 16px. */
.acs-footer-content .acs-footer-menu-list a {
    font-size: 14px;
}

/* Footer social icons */
.acs-footer-social {
    display: flex;
    gap: 12px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.acs-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: opacity 0.2s;
}

.acs-footer-social a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Hide broken FA icons, replace with SVG */
.acs-footer-social i {
    display: none;
}

.acs-footer-social a::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* LinkedIn */
.acs-footer-social a[href*="linkedin"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 01107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.83-48.3 93.97 0 111.32 61.9 111.32 142.3V448z'/%3E%3C/svg%3E");
}

/* YouTube */
.acs-footer-social a[href*="youtube"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23666' d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}

/* X (Twitter) */
.acs-footer-social a[href*="//x.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}

/* Footer search box */
.acs-footer-search {
    display: flex;
    margin-bottom: 20px;
}

.acs-footer-search form {
    display: flex;
    width: 100%;
}

.acs-footer-search input,
.acs-footer-search .acs-footer-search-input {
    flex: 1;
    padding: 4px 10px 4px 15px;
    border: 1px solid #006892;
    border-right: none;
    border-radius: 30px 0 0 30px;
    font-size: 14px;
    font-weight: 300;
    color: #7E7E7E;
    height: 40px;
    box-sizing: border-box;
    outline: none;
}

.acs-footer-search input:focus,
.acs-footer-search .acs-footer-search-input:focus {
    border-color: #006892;
}

.acs-footer-search button,
.acs-footer-search .acs-footer-search-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    background: #006892;
    border: 1px solid #006892;
    border-radius: 0 30px 30px 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.acs-footer-search button:hover,
.acs-footer-search .acs-footer-search-btn:hover {
    background: #004d6e;
}

/* Search button arrow — use unicode since no FA */
.acs-footer-search .acs-footer-search-btn i {
    font-style: normal;
    font-size: 24px;
    font-weight: 700;
}
.acs-footer-search .acs-footer-search-btn i::before {
    content: '›';
}

/* Footer ISO logos */
.acs-footer-iso {
    max-width: 100%;
    margin-top: 15px;
}

/* Rights reserved bar */
.acs-rights-reserved,
.et-l--footer .et_pb_section_4_tb_footer,
.et-l--footer .et_pb_section_4_tb_footer div[style*="text-align"] {
    text-align: left !important;
}

.acs-rights-reserved {
    font-size: 12px;
    font-weight: 400;
    color: #000;
    line-height: 18px;
    padding: 0 15px;
}

.acs-rights-reserved a {
    color: #999;
    font-size: 12px;
    text-decoration: none;
}

.acs-rights-reserved a:hover {
    text-decoration: none;
}

/* EU funding logos row — match original responsive behaviour.
   Keyed to the section, not to its Divi index: these rules named
   et_pb_section_3_tb_footer and stopped applying the moment the footer was
   reordered and the logos became section 2 — the index then pointed at the
   copyright bar, which is why pt2020 collapsed to 7px tall.
   The logos are uploaded through the Media Library, so their path is
   /wp-content/uploads/..., not the plugin's img/funding/ folder. Add the CSS
   class acs-funding-logos to that section in Divi; until then the norte2020
   filename identifies it. */

/* Default (>=1440): single row, 5 logos centered */
.et-l--footer .acs-funding-logos .et_pb_row,
.et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_row {
    max-width: 1140px !important;
    justify-content: center !important;
}
.et-l--footer .acs-funding-logos .et_pb_column,
.et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
}
.et-l--footer .acs-funding-logos .et_pb_image,
.et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image {
    flex: 0 0 auto !important;
    /* max-content, not auto: an SVG with width:auto inside a flex item has no
       sizing context to resolve its ratio against and collapses to zero — the
       two norte2020 logos rendered 0x0 */
    width: max-content !important;
}
.et-l--footer .acs-funding-logos img,
.et-l--footer .et_pb_section:has(img[src*="norte2020"]) img {
    /* Height first, width from the ratio. The two norte2020 SVGs carry only a
       viewBox and no width/height attributes, so they have no intrinsic size:
       with width:auto they collapsed to 0 in this flex row. A fixed height
       gives the viewBox ratio something to resolve against, and it also keeps
       pt2020 from running the row onto a second line. */
    height: 32px !important;
    width: auto !important;
}

/* 1024–1439: keep all 5 on one row by capping pt2020 (~290px like original col-lg-4) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .et-l--footer .acs-funding-logos img[src*="pt2020"],
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) img[src*="pt2020"] {
        max-width: 290px !important;
        height: auto !important;
    }
    .et-l--footer .acs-funding-logos .et_pb_column,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_column {
        gap: 20px !important;
    }
}

/* 768–1023: drop to a 2+2+1 grid (pt2020 spans full row) */
@media (min-width: 768px) and (max-width: 1023px) {
    .et-l--footer .acs-funding-logos .et_pb_column,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_column {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px !important;
        align-items: center;
        justify-items: center;
    }
    .et-l--footer .acs-funding-logos .et_pb_image,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image {
        width: 100% !important;
    }
    .et-l--footer .acs-funding-logos .et_pb_image .et_pb_image_wrap,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image .et_pb_image_wrap,
    .et-l--footer .acs-funding-logos .et_pb_image img,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image img {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    .et-l--footer .acs-funding-logos .et_pb_image:has(img[src*="pt2020"]),
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image:has(img[src*="pt2020"]) {
        grid-column: 1 / -1;
    }
}

/* <=767: same 2+2+1 grid, just narrower */
@media (max-width: 767px) {
    .et-l--footer .acs-funding-logos .et_pb_column,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_column {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px 12px !important;
        align-items: center;
        justify-items: center;
        padding: 0 15px !important;
    }
    .et-l--footer .acs-funding-logos .et_pb_image,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image {
        width: 100% !important;
    }
    .et-l--footer .acs-funding-logos .et_pb_image .et_pb_image_wrap,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image .et_pb_image_wrap,
    .et-l--footer .acs-funding-logos .et_pb_image img,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image img {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    .et-l--footer .acs-funding-logos .et_pb_image:has(img[src*="pt2020"]),
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image:has(img[src*="pt2020"]) {
        grid-column: 1 / -1;
    }
}

/* EU logos CSS class fallback */
.acs-eu-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 0;
}

.acs-eu-logos img {
    max-height: 60px;
    width: auto;
}

/* ═══════════════════════════════════════
   15. INNER PAGES — Global template styles
   ═══════════════════════════════════════ */

/* Hero banner */
.acs-page-hero {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
}

.acs-page-hero .et_pb_row {
    position: relative;
    z-index: 2;
}

.acs-page-hero .et_pb_column {
    gap: 0 !important;
}

/* Subtitle in hero (text module) */
.acs-page-hero .et_pb_text,
.acs-page-hero .et_pb_text p,
.acs-page-hero .et_pb_text span {
    color: #fff !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* H1 in hero */
.acs-page-hero .et_pb_heading h1,
.acs-page-hero .et_pb_heading .et_pb_module_header {
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dark overlay for readability */
.acs-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Breadcrumb section */
.acs-breadcrumb-section {
    background: #fff !important;
}

.acs-breadcrumbs {
    font-size: 12px;
    color: #999;
    padding: 4px 0;
    text-transform: uppercase;
}

/* Links with href (Home, current page) */
a.acs-breadcrumb-link {
    color: #232323;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 400;
}

a.acs-breadcrumb-link:hover {
    color: #232323;
    text-decoration: none !important;
}

/* Items without link (parent categories) */
span.acs-breadcrumb-link {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    cursor: default;
    pointer-events: none;
}

.acs-breadcrumb-sep {
    margin: 0 6px;
    color: #999;
    font-size: 12px;
    font-weight: 700;
}

/* Current page (last item) */
.acs-breadcrumb-current {
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

/* Content section — first heading is H2 style (page title) */
.acs-content-section .et_pb_heading:first-child h3,
.acs-content-section .et_pb_heading:first-child .et_pb_module_header,
.acs-content-section .et_pb_heading h2,
.acs-content-section .et_pb_heading .et_pb_module_header[class*="h2"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 30px;
}

/* Content section — sub-headings (H3 style) */
.acs-content-section .et_pb_heading:not(:first-child) h3,
.acs-content-section .et_pb_heading:not(:first-child) .et_pb_module_header {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin-bottom: 15px;
}

.acs-content-section .et_pb_text,
.acs-content-section .et_pb_text p {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #000 !important;
    line-height: 24px !important;
    margin-bottom: 20px;
    padding-bottom: 0 !important;
}

.acs-content-section .et_pb_text strong {
    font-weight: 700 !important;
}

.acs-content-section u {
    text-decoration-color: rgba(102, 102, 102, 0.4);
    text-underline-offset: 2px;
}

.acs-content-section hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.acs-content-section .et_pb_text a {
    color: #232323;
    text-decoration: none;
    font-weight: 700;
}

.acs-content-section .et_pb_text a:hover {
    color: #666;
    text-decoration: none;
}

/* Single post: align with original Latest detail layout */
.single-post .acs-content-section .et_pb_row_2_tb_body {
    align-items: flex-start !important;
    gap: 0 30px !important;
}

.single-post .acs-content-section .et_pb_row_3_tb_body {
    margin-top: 15px !important;
}

.single-post .acs-content-section .et_pb_image_0_tb_body {
    margin-bottom: 0 !important;
}

.single-post .acs-content-section .et_pb_image_0_tb_body .et_pb_image_wrap,
.single-post .acs-content-section .et_pb_image_0_tb_body img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.single-post .acs-content-section .et_pb_heading_1_tb_body h1,
.single-post .acs-content-section .et_pb_heading_1_tb_body .et_pb_module_header {
    color: #333 !important;
    font-size: 23px !important;
    font-weight: 600 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.single-post .acs-content-section .et_pb_text_1_tb_body,
.single-post .acs-content-section .et_pb_text_1_tb_body p {
    color: #006892 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin: 5px 0 15px !important;
    padding: 0 !important;
}

.single-post .acs-content-section .et_pb_text_2_tb_body,
.single-post .acs-content-section .et_pb_text_2_tb_body p {
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-post .acs-content-section .et_pb_post_content_0_tb_body {
    padding-top: 0 !important;
}

.single-post .acs-content-section .et_pb_post_content_0_tb_body p,
.single-post .acs-content-section .et_pb_post_content_0_tb_body li,
.single-post .acs-content-section .et_pb_post_content_0_tb_body div,
.single-post .acs-content-section .et_pb_post_content_0_tb_body span {
    color: #000 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.single-post .acs-content-section .et_pb_post_content_0_tb_body strong {
    font-weight: 700 !important;
    color: #000 !important;
}

.single-post .acs-content-section .et_pb_post_content_0_tb_body a {
    color: #232323 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.single-post .acs-content-section .et_pb_post_content_0_tb_body a:hover {
    color: #666 !important;
}

/* Download button */
.btn-download,
.et_pb_button.btn-download {
    display: inline-block !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 21px !important;
    transition: background 0.3s ease-in-out !important;
    cursor: pointer;
}

.btn-download:hover,
.et_pb_button.btn-download:hover,
.et_pb_button.et_pb_button.btn-download:hover,
body #page-container .et_pb_section .et_pb_button.btn-download:hover {
    background: #666 !important;
    color: #fff !important;
    transform: none !important;
    padding: 6px 20px !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
}

.et_pb_button.btn-download::after,
.et_pb_button.btn-download::before,
.et_pb_button.btn-download:hover::after,
.et_pb_button.btn-download:hover::before {
    display: none !important;
    content: none !important;
}

/* Cases button (same as btn-download) */
.acs-btn-cases,
.et_pb_button.acs-btn-cases {
    display: inline-block !important;
    background: #666 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 21px !important;
    transition: background 0.3s ease-in-out !important;
    cursor: pointer;
}

.acs-btn-cases:hover,
.et_pb_button.acs-btn-cases:hover,
.et_pb_button.et_pb_button.acs-btn-cases:hover,
body #page-container .et_pb_section .et_pb_button.acs-btn-cases:hover {
    background: #666 !important;
    color: #fff !important;
    transform: none !important;
    padding: 6px 20px !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
}

.et_pb_button.acs-btn-cases::after,
.et_pb_button.acs-btn-cases::before,
.et_pb_button.acs-btn-cases:hover::after,
.et_pb_button.acs-btn-cases:hover::before {
    display: none !important;
    content: none !important;
}

/* Inner pages responsive */
@media (max-width: 1024px) {
    .acs-page-hero .et_pb_text,
    .acs-page-hero .et_pb_text p {
        font-size: 20px !important;
    }

    .acs-page-hero .et_pb_heading h1 {
        font-size: 26px !important;
    }

}

@media (max-width: 768px) {
    .acs-page-hero .et_pb_text,
    .acs-page-hero .et_pb_text p {
        font-size: 18px !important;
    }

    .acs-page-hero .et_pb_heading h1 {
        font-size: 24px !important;
    }

    .acs-breadcrumbs {
        font-size: 11px;
    }

    .acs-breadcrumb-sep {
        margin: 0 4px;
    }

    .acs-content-section .et_pb_text,
    .acs-content-section .et_pb_text p {
        font-size: 15px !important;
        line-height: 22px !important;
    }

    .acs-content-section .et_pb_heading:first-child h3,
    .acs-content-section .et_pb_heading:first-child .et_pb_module_header {
        font-size: 16px !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .acs-page-hero .et_pb_text,
    .acs-page-hero .et_pb_text p {
        font-size: 16px !important;
    }

    .acs-page-hero .et_pb_heading h1 {
        font-size: 20px !important;
    }

    .acs-breadcrumbs {
        font-size: 10px;
    }

    .acs-content-section .et_pb_text,
    .acs-content-section .et_pb_text p {
        font-size: 14px !important;
        line-height: 21px !important;
    }

    .acs-content-section .et_pb_heading:first-child h3,
    .acs-content-section .et_pb_heading:first-child .et_pb_module_header {
        font-size: 15px !important;
    }

    .acs-content-section .et_pb_heading:not(:first-child) h3 {
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════
   13. GO TO TOP
   ═══════════════════════════════════════ */
.acs-gotop {
    position: absolute;
    top: -25px;
    right: 0;
    width: 50px;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 100px 0 100px 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: background 0.3s;
}

.acs-gotop:hover {
    background: #333;
}

.acs-gotop-arrow {
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-90deg);
    -webkit-text-stroke: 1px #fff;
}

/* ═══════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════ */

/* Prevent any horizontal overflow globally (clip preserves sticky) */
html, body {
    overflow-x: clip;
}

/* Lock page scroll when mobile menu is open */
html.acs-menu-open,
body.acs-menu-open {
    overflow: hidden !important;
    touch-action: none;
    height: 100%;
}

/* <= 1440px */
@media (max-width: 1440px) {
    .acs-header .acs-header-inner {
        padding: 10px 20px;
    }
}

/* <= 1024px: Switch to mobile menu */
@media (max-width: 1024px) {
    .acs-main-nav,
    .acs-header .acs-lang-switcher,
    .acs-header ul.acs-lang-switcher,
    .acs-header-home .acs-lang-switcher,
    .acs-header-inner .acs-lang-switcher {
        display: none !important;
    }

    /* But keep lang-switcher visible inside mobile drawer */
    .acs-mobile-lang .acs-lang-switcher,
    .acs-mobile-lang ul.acs-lang-switcher {
        display: flex !important;
    }

    .acs-hamburger {
        display: flex !important;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        z-index: 200;
    }

    .acs-mega-dropdown {
        display: none !important;
    }

    .acs-menu-link {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Footer content: keep 4 columns on tablet landscape */
    .et-l--footer .acs-footer-content .et_pb_row {
        flex-wrap: nowrap !important;
        padding: 0 20px !important;
        gap: 10px !important;
    }

    .et-l--footer .acs-footer-content .et_pb_column {
        width: 25% !important;
        flex: 1 1 25% !important;
    }

    /* Info-request: stack columns */
    .acs-info-request-section .et_pb_row {
        flex-direction: column !important;
    }

    .acs-info-request-section .et_pb_column {
        width: 100% !important;
    }

    /* Hide image column starting at <=1024px */
    .acs-info-request-section .acs-info-request-bg {
        display: none !important;
    }

    /* Homepage: client logos show 3 */
    .acs-logo-item {
        flex: 0 0 calc((100% - 60px) / 3) !important;
    }

    /* Homepage: technology logos stack */
    .et_pb_section:has(+ .acs-map-section) .et_pb_row .et_pb_column {
        width: 33.33% !important;
    }
}

/* Footer content: 2 columns between 769-900px */
@media (min-width: 769px) and (max-width: 900px) {
    .et-l--footer .acs-footer-content .et_pb_column {
        width: 50% !important;
        margin-bottom: 30px;
    }
}

/* <= 768px */
@media (max-width: 768px) {
    .acs-header-logo svg,
    .acs-header-logo img {
        height: 35px;
    }

    /* Newsletter: stack vertically with room for checkbox + message */
    /* Height at rest is the old 40 + 100 (row) + 70 (bottom padding) = 210px, now a min-height so
       the section grows when the form shows messages. (The Divi section is a flex column: the
       content already starts at the top, and align-items here would move it sideways.) */
    .et-l--footer>.et_builder_inner_content .et_pb_section.acs-newsletter-section.et_pb_section {
        padding: 40px 0 !important;
        min-height: 210px;
    }

    .acs-newsletter-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 0 15px;
        height: auto;
    }

    .acs-newsletter-text {
        white-space: normal;
        line-height: 1.4;
        text-align: center;
    }

    .acs-newsletter-form-wrap {
        width: 100%;
        max-width: 100%;
    }

    .acs-newsletter-input-group {
        width: 100%;
    }

    .acs-newsletter-input-group input[type="email"] {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .acs-newsletter-submit {
        flex: 0 0 80px;
        width: 80px;
    }

    /* Show checkbox and center it */
    .acs-newsletter-bar .acs-checkbox-row {
        display: block !important;
        text-align: center;
        margin-top: 10px;
    }

    .acs-newsletter-bar .acs-checkbox {
        display: inline-flex;
        justify-content: center;
    }

    /* Error/success toast positioned below form, inside the padding area */
    .acs-newsletter-bar .acs-form-message {
        position: static;
        margin: 10px auto 0;
        white-space: normal;
        text-align: center;
    }

    .acs-info-request {
        padding: 30px 20px;
    }

    /* Footer content: 1 column on mobile */
    .et-l--footer .acs-footer-content .et_pb_row {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .et-l--footer .acs-footer-content .et_pb_column {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
    }

    .acs-footer-search {
        max-width: 100%;
    }

    .acs-footer-search form {
        justify-content: center;
    }

    /* EU logos smaller gap on mobile */
    .et-l--footer .acs-funding-logos .et_pb_column,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_column {
        gap: 15px !important;
    }

    /* Go-to-top: relative position for mobile */
    .acs-gotop {
        right: 15px !important;
    }

    /* Social icons centered */
    .acs-footer-social {
        justify-content: center;
    }

    /* Homepage: blurbs stack 1 column */
    .acs-about-section .et_pb_row .et_pb_column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .acs-about-section .et_pb_row {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .acs-about-section .et_pb_blurb {
        text-align: center !important;
        margin-bottom: 30px;
    }

    .acs-about-section .et_pb_heading h2,
    .acs-about-section .et_pb_heading h1 {
        font-size: 30px !important;
    }

    /* Homepage: client logos show 2 */
    .acs-logo-item {
        flex: 0 0 calc((100% - 30px) / 2) !important;
    }

    .acs-logos-prev,
    .acs-logos-next {
        font-size: 40px;
    }

    /* Homepage: world map hide on mobile */
    .acs-map-section {
        display: none !important;
    }

    /* Homepage: technology logos 1 column */
    .et_pb_section:has(+ .acs-map-section) .et_pb_row {
        flex-wrap: wrap !important;
    }

    .et_pb_section:has(+ .acs-map-section) .et_pb_column {
        width: 100% !important;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Homepage: app banner circles smaller */
    .applications.banner-home .et_pb_column:first-child {
        width: 180px !important;
        height: 180px !important;
        flex: 0 0 180px !important;
        margin-right: 20px !important;
    }

    .applications.banner-home .et_pb_column:last-child {
        width: 150px !important;
        height: 150px !important;
        flex: 0 0 150px !important;
    }

    .applications.banner-home .et_pb_text,
    .applications.banner-home .et_pb_text p,
    .applications.banner-home .et_pb_text span {
        font-size: 20px !important;
    }
}

/* <= 480px */
@media (max-width: 480px) {
    .acs-header .acs-header-inner {
        padding: 8px 16px;
    }

    /* More bottom padding for newsletter message on small mobile */
    .et-l--footer>.et_builder_inner_content .et_pb_section.acs-newsletter-section.et_pb_section {
        padding: 40px 0 !important;
        min-height: 240px; /* at rest: old 40 + 100 + 100; grows with the form messages */
    }

    .acs-newsletter-input-group input[type="email"] {
        font-size: 13px;
        padding: 4px 10px 4px 15px;
    }

    .acs-info-request-title {
        font-size: 28px;
    }

    .acs-info-request-subtitle {
        font-size: 16px;
    }

    /* EU logos: max 2 per row */
    .et-l--footer .acs-funding-logos .et_pb_image,
    .et-l--footer .et_pb_section:has(img[src*="norte2020"]) .et_pb_image {
        max-width: 45%;
    }

    /* Go-to-top smaller on very small screens */
    .acs-gotop {
        width: 40px;
        height: 40px;
        top: -20px;
    }

    .acs-gotop-arrow {
        font-size: 24px;
    }

    /* Homepage: client logos show 1 on small mobile */
    .acs-logo-item {
        flex: 0 0 100% !important;
    }

    /* Homepage: About title smaller */
    .acs-about-section .et_pb_heading h2,
    .acs-about-section .et_pb_heading h1 {
        font-size: 26px !important;
    }

    .acs-about-section .et_pb_text p {
        font-size: 15px !important;
    }

    .acs-about-section .et_pb_blurb h3,
    .acs-about-section .et_pb_blurb .et_pb_module_header {
        font-size: 22px !important;
    }

    .acs-about-section .et_pb_blurb .et_pb_blurb_description p {
        font-size: 15px !important;
    }

    /* Homepage: app banner circles stack vertical */
    .applications.banner-home .et_pb_row {
        flex-direction: column !important;
        align-items: center !important;
    }

.applications.banner-home .et_pb_column:first-child {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

.acs-cat-title {
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.socialWrap.acs-social-share {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

.acs-social-share-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #6d6e71 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.acs-social-share-link:hover,
.acs-social-share-link:focus {
    color: #246680 !important;
    transform: translateY(-1px);
}

.acs-social-share-icon {
    display: inline-flex !important;
    width: 22px !important;
    height: 22px !important;
}

.acs-social-share-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
}

/* O logótipo do X ocupa a caixa quase toda (os do Facebook e do LinkedIn deixam margem): reduz-se a 80%. */
.acs-social-share-link--x .acs-social-share-icon svg {
    transform: scale(0.8);
}

/* ═══════════════════════════════════════
   RECYCLONE-MH — 4-column case study row
   ═══════════════════════════════════════ */
.rec-mh-4 .et_pb_image .et_pb_image_wrap {
    display: block;
    width: 100%;
    line-height: 0;
}

.rec-mh-4 .et_pb_image .et_pb_image_wrap img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    display: block;
}

.rec-mh-4 .et_pb_text {
    margin-top: 18px !important;
}

#acs-application-area .rec-mh-4 .et_pb_text h3,
#global-vision .rec-mh-4 .et_pb_text h3,
.rec-mh-4 .et_pb_text h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

#acs-application-area .rec-mh-4 .et_pb_text p,
#global-vision .rec-mh-4 .et_pb_text p,
.rec-mh-4 .et_pb_text p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #000 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

#acs-application-area .rec-mh-4 .et_pb_text p strong,
#global-vision .rec-mh-4 .et_pb_text p strong,
.rec-mh-4 .et_pb_text p strong {
    font-weight: 700 !important;
    color: #333 !important;
}

/* ═══════════════════════════════════════
   SECTION TABS — generic button/panel switch
   ═══════════════════════════════════════ */
.acs-tab-btn {
    display: inline-block;
    background: #666666;
    color: #fff !important;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 15px 0 0;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

.acs-tab-btn:hover,
.acs-tab-btn:focus,
.acs-tab-btn.is-active {
    background: #246680;
    color: #fff !important;
}

.acs-tab-panel.acs-tab-hidden {
    display: none !important;
}

/* ═══════════════════════════════════════
   CIRCLE TAG — static circular badge (visual only)
   ═══════════════════════════════════════ */
.acs-circle-tag {
    width: 115px;
    height: 115px;
    display: table;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    padding: 15px;
}

.acs-circle-tag > div {
    display: table-cell;
    vertical-align: middle;
}

.acs-circle-tag--ec {
    background: #66CC9A;
    border-radius: 200px 0 200px 200px;
}

.acs-circle-tag--pr {
    background: #006792;
    border-radius: 0 200px 200px 200px;
}

/* ═══════════════════════════════════════
   SEARCH RESULTS
   ═══════════════════════════════════════ */
.acs-search-results {
    width: 100%;
    max-width: 1141px;
    margin: 0 auto;
}

.acs-search-heading {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0 !important;
    line-height: 1.3;
}

.acs-search-count {
    font-size: 13px;
    color: #000;
    margin: 0 0 24px 0 !important;
}

.acs-search-empty {
    font-size: 14px;
    color: #000;
    margin: 16px 0 !important;
}

.acs-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acs-search-item {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.acs-search-item:last-child {
    border-bottom: none;
}

.acs-search-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #006892 !important;
    text-decoration: none !important;
    margin-bottom: 4px;
}

.acs-search-title:hover,
.acs-search-title:focus {
    color: #999 !important;
    text-decoration: none !important;
}

.acs-search-excerpt {
    font-size: 14px;
    color: #333;
    margin: 0 !important;
    line-height: 1.5;
}

.acs-search-pagination {
    margin-top: 28px;
}

.acs-search-pagination ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.acs-search-pagination li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.acs-search-pagination li::marker,
.acs-search-pagination li::before {
    content: none !important;
    display: none !important;
}

.acs-search-pagination a,
.acs-search-pagination span {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #666;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
}

.acs-search-pagination a:hover,
.acs-search-pagination a:focus {
    background: #246680;
}

.acs-search-pagination .current {
    background: #246680;
}

/* ═══════════════════════════════════════
   ABOUT US — section nav buttons
   Same box model as .acs-tab-btn, colours from the About Us artwork.
   Two of the three are same-page anchors, the third a normal link.
   ═══════════════════════════════════════ */
.acs-about-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.acs-about-nav li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acs-about-nav li::before {
    content: none !important;
}

.acs-about-btn {
    display: inline-block;
    background: #86c1a9;
    color: #fff !important;
    padding: 6px 20px;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}

.acs-about-btn:hover,
.acs-about-btn:focus,
.acs-about-btn.is-active,
.acs-about-btn[aria-current="page"],
.acs-about-btn[aria-current="true"] {
    background: #1e749b;
    color: #fff !important;
}

/* Anchor targets: clear the fixed header when jumped to */
.acs-anchor-target {
    scroll-margin-top: 120px;
}

@media (max-width: 480px) {
    .acs-about-nav {
        gap: 10px;
    }

    .acs-about-btn {
        font-size: 14px;
        padding: 6px 16px;
    }
}

/* ═══════════════════════════════════════
   TIMELINE — [acs_timeline]
   Central spine, year circles alternating sides, colours darkest (newest)
   to lightest (oldest). Per-item colours arrive from the shortcode as
   --acs-tl-line / --acs-tl-accent / --acs-tl-ring / --acs-tl-fill.
   ═══════════════════════════════════════ */
.acs-timeline {
    --acs-tl-max: 640px;
    --acs-tl-axis: 18px;       /* spine width */
    --acs-tl-gap: 26px;        /* spine to content column */
    --acs-tl-circle: 130px;    /* year circle outer diameter */
    --acs-tl-ring-w: 8px;      /* year circle border width */
    --acs-tl-node: 32px;       /* donut on the spine */
    --acs-tl-node-ring: 6px;
    --acs-tl-pill: 32px;       /* label pill height — everything centres on it */
    --acs-tl-clear: 34px;      /* gap between text and the next circle */
    --acs-tl-tail: 90px;       /* spine overhang below the last milestone */

    max-width: var(--acs-tl-max);
    /* room for the first circle, which overhangs above its label */
    padding-top: calc((var(--acs-tl-circle) - var(--acs-tl-pill)) / 2);
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

.acs-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr var(--acs-tl-axis) 1fr;
    column-gap: var(--acs-tl-gap);
    align-items: start;
    /* spacing between milestones lives on .acs-tl-content, which only adds it
       where the text actually runs long */
    padding-bottom: 0;
    /* keep the circle inside the item even when the text is short */
    min-height: calc((var(--acs-tl-circle) + var(--acs-tl-pill)) / 2);
}

.acs-tl-item--last {
    padding-bottom: var(--acs-tl-tail);
}

/* ── Spine, node and stub ── */
.acs-tl-axis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.acs-tl-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--acs-tl-axis);
    transform: translateX(-50%);
    background: var(--acs-tl-line, #1e749b);
}

/* First segment starts level with the top of the first circle */
.acs-tl-item:first-child .acs-tl-line {
    top: calc((var(--acs-tl-pill) - var(--acs-tl-circle)) / 2);
}

.acs-tl-node {
    position: absolute;
    top: calc(var(--acs-tl-pill) / 2);
    left: 50%;
    width: var(--acs-tl-node);
    height: var(--acs-tl-node);
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    border: var(--acs-tl-node-ring) solid var(--acs-tl-accent, #165774);
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Short bar bridging the node and the year circle */
.acs-tl-stub {
    position: absolute;
    top: calc(var(--acs-tl-pill) / 2);
    width: 18px;
    height: 7px;
    background: var(--acs-tl-accent, #165774);
    transform: translateY(-50%);
    z-index: 1;
}

.acs-tl-item--right .acs-tl-stub {
    left: calc(50% + var(--acs-tl-node) / 2 - 2px);
}

.acs-tl-item--left .acs-tl-stub {
    right: calc(50% + var(--acs-tl-node) / 2 - 2px);
}

/* ── Year circle ── */
.acs-tl-year {
    position: absolute;
    top: calc(var(--acs-tl-pill) / 2);
    width: var(--acs-tl-circle);
    height: var(--acs-tl-circle);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--acs-tl-fill, #86c1a9);
    border: var(--acs-tl-ring-w) solid var(--acs-tl-ring, #165774);
    transform: translateY(-50%);
    z-index: 3;
}

.acs-tl-item--right .acs-tl-year {
    left: calc(50% + var(--acs-tl-node) / 2 + 8px);
}

.acs-tl-item--left .acs-tl-year {
    right: calc(50% + var(--acs-tl-node) / 2 + 8px);
}

.acs-tl-year-num {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #000;
}

/* ── Content column ── */
.acs-tl-item--right .acs-tl-content {
    grid-column: 1;
}

.acs-tl-item--left .acs-tl-content {
    grid-column: 3;
}

/* The next milestone sits on the same side as this one every other row, and
   its circle overhangs half its height above its own label. Reserve that
   overhang plus --acs-tl-clear so the ball never lands on this text. */
.acs-tl-content {
    padding-bottom: calc(
        (var(--acs-tl-circle) - var(--acs-tl-pill)) / 2 + var(--acs-tl-clear)
    );
}

/* Nothing follows the last one — the spine tail provides its spacing. */
.acs-tl-item--last .acs-tl-content {
    padding-bottom: 0;
}

.acs-tl-label {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box so the rendered height really is --acs-tl-pill — the node and
       the year circle are centred on that value */
    box-sizing: border-box;
    min-height: var(--acs-tl-pill);
    padding: 4px 18px;
    /* square top-left corner, as in the artwork */
    border-radius: 0 999px 999px 999px;
    background: #81af93;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.acs-timeline .acs-tl-points {
    list-style: none !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

.acs-timeline .acs-tl-points li {
    position: relative;
    list-style: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 0 18px !important;
    font-size: 14px;
    line-height: 1.45;
    color: #000;
}

.acs-timeline .acs-tl-points li::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 3px;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.acs-timeline .acs-tl-points li:last-child {
    margin-bottom: 0 !important;
}

/* ── Stacked: spine on the left, every card to its right ──
   Starts at 1024px, the same width where the header swaps to the mobile menu.
   Above that the alternating two-column layout has room; below it the columns
   get too narrow and consecutive circles start landing on the text. */
@media (max-width: 1024px) {
    .acs-timeline {
        --acs-tl-circle: 100px;
        --acs-tl-axis: 14px;
        --acs-tl-node: 26px;
        --acs-tl-node-ring: 5px;
        --acs-tl-clear: 26px;
        --acs-tl-tail: 60px;
        max-width: 100%;
    }

    .acs-tl-item {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-left: calc(var(--acs-tl-circle) + 22px);
    }

    .acs-tl-item--last {
        padding-bottom: var(--acs-tl-tail);
    }

    .acs-tl-line {
        left: calc(var(--acs-tl-circle) / 2);
    }

    /* the circle sits on the spine, so node and stub would only clutter it */
    .acs-tl-node,
    .acs-tl-stub {
        display: none;
    }

    .acs-tl-item--right .acs-tl-year,
    .acs-tl-item--left .acs-tl-year {
        left: 0;
        right: auto;
    }

    .acs-tl-year-num {
        font-size: 28px;
    }

    .acs-tl-item--right .acs-tl-content,
    .acs-tl-item--left .acs-tl-content {
        grid-column: 1;
    }

    .acs-tl-label {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .acs-timeline {
        --acs-tl-circle: 88px;
        --acs-tl-axis: 12px;
        --acs-tl-tail: 50px;
    }

    .acs-tl-item {
        padding-left: calc(var(--acs-tl-circle) + 18px);
    }

    .acs-tl-year-num {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .acs-timeline {
        --acs-tl-circle: 72px;
        --acs-tl-clear: 20px;
    }

    .acs-tl-item {
        padding-left: calc(var(--acs-tl-circle) + 14px);
    }

    .acs-tl-year-num {
        font-size: 20px;
    }

    .acs-tl-label {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════
   STICKY CTA — pinned to a screen edge, position set per device
   Injected into wp_footer, content from ACS Settings > CTA.
   Placement comes from modifier classes: --dx-/--dy- (desktop, above 768px)
   and --mx-/--my- (mobile, 768px and below); see the placement blocks below.
   z-index sits above page content but under the mega-menu (98),
   the mobile off-canvas (100/101) and the header (999).
   ═══════════════════════════════════════ */
.acs-cta {
    position: fixed;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: #66cc9a;
    color: #fff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, padding 0.2s ease;
}

.acs-cta:hover,
.acs-cta:focus {
    background: #55b888;
    color: #fff !important;
    text-decoration: none !important;
}

.acs-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
}

.acs-cta-label {
    display: block;
}

/* Popup mode renders a <button>: strip the native/Divi button chrome */
button.acs-cta {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
}

/* ── CTA popup ──
   Above the header (999) so the form is never covered. */
.acs-cta-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.acs-cta-modal[hidden] {
    display: none;
}

.acs-cta-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 40, 0.65);
}

.acs-cta-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 40px 32px 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.acs-cta-modal-title {
    margin: 0 0 8px;
    padding: 0 36px 0 0;
    font-size: 24px;
    line-height: 1.25;
    color: #000;
}

.acs-cta-modal-subtitle {
    margin: 0 0 20px;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.acs-cta-modal-title + .acs-cta-modal-body {
    margin-top: 20px;
}

.acs-cta-modal-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 32px;
    line-height: 1;
    color: #666;
    cursor: pointer;
}

.acs-cta-modal-close:hover,
.acs-cta-modal-close:focus-visible {
    color: #111;
}

html.acs-cta-modal-open,
html.acs-cta-modal-open body {
    overflow: hidden;
}

@media (max-width: 768px) {
    .acs-cta-modal {
        padding: 12px;
    }

    .acs-cta-modal-box {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 44px 18px 22px;
    }
}

/* ── Tablet ── */
@media (max-width: 1024px) {
    .acs-cta {
        padding: 13px 20px;
        font-size: 14px;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .acs-cta {
        /* 44px keeps it a comfortable touch target */
        min-height: 44px;
        box-sizing: border-box;
        padding: 12px 18px;
        font-size: 13px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    }
}

/* ── Placement ──
   The anchored edge stays flush; the opposite corners are rounded, and on a
   real pointer extra padding on the free side grows the tab into the page.
   :hover sticks after a tap on touch, so the growth is hover-capable only.
   Top/bottom offsets clear the fixed 100px header and the iOS home bar. */
.acs-cta {
    --acs-cta-top: 120px;
    --acs-cta-bottom: 30px;
    --acs-cta-grow: 32px;
}

@media (min-width: 769px) {
    .acs-cta--dx-right { right: 0; left: auto; border-radius: 8px 0 0 8px; }
    .acs-cta--dx-left  { left: 0; right: auto; border-radius: 0 8px 8px 0; }

    .acs-cta--dy-center { top: 50%; bottom: auto; transform: translateY(-50%); }
    .acs-cta--dy-top    { top: var(--acs-cta-top); bottom: auto; transform: none; }
    .acs-cta--dy-bottom { bottom: calc(var(--acs-cta-bottom) + env(safe-area-inset-bottom, 0px)); top: auto; transform: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .acs-cta { --acs-cta-grow: 27px; }
}

@media (min-width: 769px) and (hover: hover) {
    .acs-cta--dx-right:hover, .acs-cta--dx-right:focus { padding-left: var(--acs-cta-grow); }
    .acs-cta--dx-left:hover,  .acs-cta--dx-left:focus  { padding-right: var(--acs-cta-grow); }
}

@media (max-width: 768px) {
    .acs-cta {
        --acs-cta-top: 100px;
        --acs-cta-bottom: 20px;
        --acs-cta-grow: 24px;
    }

    .acs-cta--mx-right { right: 0; left: auto; border-radius: 6px 0 0 6px; }
    .acs-cta--mx-left  { left: 0; right: auto; border-radius: 0 6px 6px 0; }

    .acs-cta--my-center { top: 50%; bottom: auto; transform: translateY(-50%); }
    .acs-cta--my-top    { top: var(--acs-cta-top); bottom: auto; transform: none; }
    .acs-cta--my-bottom { bottom: calc(var(--acs-cta-bottom) + env(safe-area-inset-bottom, 0px)); top: auto; transform: none; }
}

@media (max-width: 768px) and (hover: hover) {
    .acs-cta--mx-right:hover, .acs-cta--mx-right:focus { padding-left: var(--acs-cta-grow); }
    .acs-cta--mx-left:hover,  .acs-cta--mx-left:focus  { padding-right: var(--acs-cta-grow); }
}

@media (max-width: 480px) {
    .acs-cta {
        padding: 11px 14px;
        font-size: 12px;
        letter-spacing: 0.02em;
        /* a long label wraps instead of eating the width of a narrow screen */
        white-space: normal;
        max-width: 45vw;
        line-height: 1.25;
        text-align: center;
    }
}

/* Printing a fixed tab over the page content helps nobody */
@media print {
    .acs-cta {
        display: none;
    }
}

/* ═══════════════════════════════════════
   HOME SLIDER — circle size variants
   Set per slide in ACS Settings > Banners Home. Large is the original size,
   so it stays in the base rules above and only medium/small are declared here.
   Each variant keeps the graphic centred on the same point as large — top is
   (large top + large size / 2) - own size / 2 — and scales its text with it.
   ═══════════════════════════════════════ */
.acs-slide-circle--medium {
    width: 300px;
    height: 300px;
    padding: 30px;
    top: 250px;
}

.acs-slide-circle--medium .acs-slide-subtitle {
    font-size: 19px;
    line-height: 22px;
}

.acs-slide-circle--medium .acs-slide-title {
    font-size: 38px;
    line-height: 44px;
}

.acs-slide-circle--small {
    width: 220px;
    height: 220px;
    padding: 22px;
    top: 290px;
}

.acs-slide-circle--small .acs-slide-subtitle {
    font-size: 15px;
    line-height: 18px;
}

.acs-slide-circle--small .acs-slide-title {
    font-size: 28px;
    line-height: 32px;
}

@media (max-width: 1024px) {
    .acs-slide-circle--medium {
        width: 220px;
        height: 220px;
        padding: 24px;
        top: 180px;
    }

    .acs-slide-circle--medium .acs-slide-subtitle {
        font-size: 19px;
        line-height: 22px;
    }

    .acs-slide-circle--medium .acs-slide-title {
        font-size: 28px;
        line-height: 32px;
    }

    .acs-slide-circle--small {
        width: 170px;
        height: 170px;
        padding: 18px;
        top: 205px;
    }

    .acs-slide-circle--small .acs-slide-subtitle {
        font-size: 15px;
        line-height: 18px;
    }

    .acs-slide-circle--small .acs-slide-title {
        font-size: 22px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .acs-slide-circle--medium {
        width: 165px;
        height: 165px;
        padding: 16px;
        top: 137px;
    }

    .acs-slide-circle--medium .acs-slide-subtitle {
        font-size: 11px;
        line-height: 14px;
    }

    .acs-slide-circle--medium .acs-slide-title {
        font-size: 19px;
        line-height: 24px;
    }

    .acs-slide-circle--small {
        width: 135px;
        height: 135px;
        padding: 14px;
        top: 152px;
    }

    .acs-slide-circle--small .acs-slide-subtitle {
        font-size: 10px;
        line-height: 13px;
    }

    .acs-slide-circle--small .acs-slide-title {
        font-size: 16px;
        line-height: 20px;
    }
}

/* ═══════════════════════════════════════
   HOME SLIDER — circle alignment
   Set per slide in ACS Settings > Banners Home. Right is where the graphic
   has always sat, so it stays in the base rules and only left/centre are
   declared. Under 769px the base rule centres every slide regardless — the
   graphic is too wide a share of the screen there for left or right to read
   as anything but cramped.
   ═══════════════════════════════════════ */
.acs-slide-circle--align-left {
    left: 8%;
    right: auto;
}

.acs-slide-circle--align-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .acs-slide-circle--align-left {
        left: 5%;
    }
}

/* These come after the base mobile rule in the sheet, so the centring it
   applies has to be restated here or the modifiers would win. */
@media (max-width: 768px) {
    .acs-slide-circle--align-left,
    .acs-slide-circle--align-center {
        left: auto;
        right: 50%;
        transform: translateX(50%);
    }
}

/* ═══════════════════════════════════════
   LANGUAGE SWITCHER — flag mode
   Switched on in ACS Settings > Language Menu. Flags stand at the same
   height as the 12px letters they replace, with no divider between them
   and real space instead of the letters' side padding.
   ═══════════════════════════════════════ */
/* Doubled class to outweigh ul.acs-lang-switcher { gap: 0 } */
.acs-lang-switcher.acs-lang-switcher--flags {
    gap: 8px;
    /* The list is absolutely positioned, so it sizes shrink-to-fit. Text
       resolves that fine; an image with width:auto and a fixed height does
       not — the whole chain collapses to zero. max-content breaks the cycle. */
    width: max-content;
}

.acs-lang-switcher--flags li {
    border-left: none !important;
}

/* inline-block, not inline-flex: the list is absolutely positioned and sizes
   shrink-to-fit, and an image with width:auto and a fixed height collapses to
   zero width as a flex item in that context. */
.acs-lang-switcher--flags a,
.acs-lang-switcher--flags li:last-child a {
    display: inline-block !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.acs-lang-flag {
    display: block;
    /* Identical on both axes. The bundled flags are all drawn on a 3:2 canvas
       — the Union Jack and the Polish flag were redrawn from their official
       2:1 and 8:5 for this — so 18x12 fits every one of them exactly, with
       nothing cropped and nothing stretched. 12px matches the letters.
       cover only matters for an uploaded flag of some other ratio: it keeps
       the row even rather than letterboxing that one language. */
    width: 18px;
    height: 12px;
    object-fit: cover;
    object-position: center;
    /* drop-shadow, not box-shadow: it follows the flag itself, where
       box-shadow would trace the padded box around it. Without an edge the
       white in the French and Polish flags vanishes on the white header. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
    opacity: 0.55;
    transition: opacity 0.3s ease-in-out;
}

.acs-lang-switcher--flags a:hover .acs-lang-flag,
.acs-lang-switcher--flags a:focus .acs-lang-flag,
.acs-lang-switcher--flags a.active .acs-lang-flag {
    opacity: 1;
}

/* Over the transparent home header a dark edge reads as grime */
.acs-header-home .acs-lang-flag {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

.acs-header-home.acs-header-scrolled .acs-lang-flag {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}


/* ═══════════════════════════════════════
   NUMBER COUNTERS — #acs-numbers variant
   Smaller figures for one section only. Put the CSS ID acs-numbers on the
   Divi section, row or module; everything outside it keeps the sizes in
   12b1 above (90 / 70 / 55 / 40).
   The ID beats those rules at every width, so each breakpoint has to be
   restated here or the counters would sit at 50px right down to 480px.
   ═══════════════════════════════════════ */
#acs-numbers .et_pb_number_counter .percent-value {
    font-size: 50px !important;
}

@media (max-width: 1024px) {
    #acs-numbers .et_pb_number_counter .percent-value {
        font-size: 40px !important;
    }
}

@media (max-width: 768px) {
    #acs-numbers .et_pb_number_counter .percent-value {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {
    #acs-numbers .et_pb_number_counter .percent-value {
        font-size: 24px !important;
    }
}
