/* ==========================================================================
   ACCUREX — Premium Homepage Theme
   Material-informed surfaces, elevation and motion over the navy/cyan brand.
   Override-only: loaded last, no existing file modified.
   Section 1: HERO
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand ------------------------------------------------------------- */
    --ax-navy-900: #03122c;
    --ax-navy-800: #061f45;
    --ax-navy-700: #0a2f68;
    --ax-navy-600: #0f4593;

    --ax-cyan-600: #00b8bb;
    --ax-cyan-500: #00d9dc;   /* brighter than stock #00ced1 */
    --ax-cyan-400: #2bE8EA;
    --ax-cyan-300: #7af2f3;
    --ax-cyan-100: #d6fafb;

    --ax-white:    #ffffff;
    --ax-paper:    #f6f9fd;
    --ax-line:     #dde6f2;
    --ax-ink:      #0b1a33;
    --ax-ink-soft: #55657f;

    /* Type — bold and bright -------------------------------------------- */
    --ax-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ax-font-sans:    'Manrope', system-ui, sans-serif;

    /* Material elevation ------------------------------------------------ */
    --ax-e1: 0 1px 2px rgba(3,18,44,.30), 0 1px 3px 1px rgba(3,18,44,.15);
    --ax-e2: 0 1px 2px rgba(3,18,44,.30), 0 2px 6px 2px rgba(3,18,44,.15);
    --ax-e3: 0 4px 8px 3px rgba(3,18,44,.15), 0 1px 3px rgba(3,18,44,.30);
    --ax-e4: 0 6px 10px 4px rgba(3,18,44,.15), 0 2px 3px rgba(3,18,44,.30);

    /* Material motion — short, standard easing */
    --ax-ease:   cubic-bezier(.2, 0, 0, 1);
    --ax-dur-sm: 150ms;
    --ax-dur-md: 250ms;

    --ax-r-sm: 12px;
    --ax-r-md: 20px;
    --ax-r-lg: 28px;
}

/* ==========================================================================
   Performance — stop the always-running animations that made the page crawl
   ========================================================================== */

.ax-hero *,
.ax-hero *::before,
.ax-hero *::after { animation: none !important; }

/* ==========================================================================
   HERO
   ========================================================================== */

.ax-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ax-navy-900);
    padding: 104px 0 96px;
    font-family: var(--ax-font-sans);
}

/* --- Static background layers (no animation = no repaint cost) --------- */
.ax-hero__bg { position: absolute; inset: 0; z-index: -1; }

.ax-hero__glow {
    position: absolute;
    top: -34%; right: -14%;
    width: 900px; height: 900px;
    background: radial-gradient(circle,
        rgba(0,217,220,.30) 0%,
        rgba(0,217,220,.10) 40%,
        transparent 68%);
}
.ax-hero__facet {
    position: absolute;
    left: -16%; bottom: -58%;
    width: 78%; height: 165%;
    background: linear-gradient(118deg, rgba(0,217,220,.14) 0%, transparent 60%);
    transform: rotate(-14deg);
}
.ax-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 75% 65% at 30% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 40%, #000 30%, transparent 75%);
}

.ax-hero__row { min-height: 560px; }

/* --- Eyebrow ----------------------------------------------------------- */
.ax-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ax-font-sans);
    font-size: 12px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ax-cyan-300);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 100px;
    padding: 8px 18px;
    margin-bottom: 26px;
}
.ax-hero__pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ax-cyan-400);
    box-shadow: 0 0 0 4px rgba(0,217,220,.22);
}

/* --- Panels: fixed min-height prevents the layout shift the carousel had */
.ax-hero__panels { position: relative; min-height: 290px; }

.ax-hero__panel[hidden] { display: none; }
.ax-hero__panel {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-hero__panel.is-active { opacity: 1; transform: none; }

.ax-hero__title {
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--ax-white);
    margin: 0 0 20px;
}
.ax-hero__title .after2 {
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-cyan-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ax-hero__lede {
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(255,255,255,.76);
    max-width: 34em;
    margin: 0 0 32px;
}

/* --- Buttons: Material filled + outlined with state layers -------------- */
.ax-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.ax-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ax-font-sans);
    font-size: 15px; font-weight: 800;
    letter-spacing: .01em;
    border-radius: 100px;
    padding: 16px 32px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-sm) var(--ax-ease);
}
/* State layer */
.ax-btn::before {
    content: ""; position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--ax-dur-sm) var(--ax-ease);
}
.ax-btn:hover::before  { opacity: .08; }
.ax-btn:focus-visible::before { opacity: .12; }
.ax-btn:active { transform: scale(.985); }
.ax-btn > * { position: relative; }

.ax-btn--filled {
    background: linear-gradient(100deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
    box-shadow: var(--ax-e2);
}
.ax-btn--filled:hover { box-shadow: var(--ax-e3); color: var(--ax-navy-900); }
.ax-btn--filled i { transition: transform var(--ax-dur-md) var(--ax-ease); }
.ax-btn--filled:hover i { transform: translateX(4px); }

.ax-btn--outlined {
    background: transparent;
    color: var(--ax-white);
    border: 1.5px solid rgba(255,255,255,.34);
}
.ax-btn--outlined:hover { border-color: var(--ax-cyan-400); color: var(--ax-white); }

.ax-btn:focus-visible {
    outline: 3px solid var(--ax-cyan-400);
    outline-offset: 3px;
}

/* --- Tabs: the carousel, made controllable ----------------------------- */
.ax-hero__tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 38px 0 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.ax-hero__tab {
    position: relative;
    flex: 1 1 0;
    min-width: 120px;
    background: transparent;
    border: 0;
    padding: 0 0 12px;
    text-align: left;
    cursor: pointer;
    font-family: var(--ax-font-sans);
    color: rgba(255,255,255,.52);
    transition: color var(--ax-dur-md) var(--ax-ease);
}
.ax-hero__tab:hover { color: rgba(255,255,255,.85); }
.ax-hero__tab.is-active { color: var(--ax-white); }

.ax-hero__tab-label {
    display: block;
    font-size: .88rem; font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 10px;
}
.ax-hero__tab-track {
    display: block; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,.14);
    overflow: hidden;
}
.ax-hero__tab-fill {
    display: block; height: 100%; width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-cyan-600));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.ax-hero__tab.is-active .ax-hero__tab-fill { transform: scaleX(1); }
.ax-hero__tab:focus-visible { outline: 2px solid var(--ax-cyan-400); outline-offset: 4px; border-radius: 4px; }

/* --- Trust strip -------------------------------------------------------- */
.ax-hero__trust {
    display: flex; flex-wrap: wrap; gap: 36px;
    list-style: none;
    margin: 38px 0 0; padding: 0;
}
.ax-hero__trust li { display: flex; flex-direction: column; gap: 2px; }
.ax-hero__trust strong {
    font-family: var(--ax-font-display);
    font-size: 1.85rem; font-weight: 800;
    line-height: 1;
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-cyan-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ax-hero__trust span {
    font-size: .76rem; font-weight: 700;
    letter-spacing: .10em; text-transform: uppercase;
    color: rgba(255,255,255,.52);
}

/* --- Visual ------------------------------------------------------------- */
.ax-hero__visual { position: relative; padding-left: 20px; }
.ax-hero__frame {
    position: relative;
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e4);
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
}
.ax-hero__frame img { width: 100%; height: auto; display: block; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .ax-hero { padding: 72px 0 76px; }
    .ax-hero__row { min-height: 0; }
    .ax-hero__panels { min-height: 300px; }
    .ax-hero__visual { padding-left: 0; margin-top: 54px; }
}

@media (max-width: 767px) {
    .ax-hero { padding: 56px 0 60px; }
    .ax-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
    .ax-hero__lede  { font-size: 1rem; margin-bottom: 26px; }
    .ax-hero__panels { min-height: 340px; }
    .ax-hero__actions .ax-btn { flex: 1 1 100%; padding: 15px 24px; }
    .ax-hero__tabs { gap: 6px; }
    .ax-hero__tab { min-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }
    .ax-hero__trust { gap: 22px; }
    .ax-hero__trust strong { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-hero *, .ax-hero *::before, .ax-hero *::after {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Section 1b — Hero refinements
   ========================================================================== */

/* Pull the visual up so it sits level with the headline, not the lede. */
@media (min-width: 992px) {
    .ax-hero__visual { margin-top: -56px; }
}

/* Keep the gradient word inline so minified whitespace can't collapse it. */
.ax-hero__title .after2,
.ax-caps__title .after2 { display: inline; }

/* Trust strip: equal columns, never orphans an item onto its own row. */
.ax-hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.ax-hero__trust li { padding-right: 18px; }
.ax-hero__trust li + li {
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 24px;
}
.ax-hero__trust span {
    font-size: .74rem;
    line-height: 1.45;
    letter-spacing: .08em;
}

/* ==========================================================================
   Section 2 — Capabilities ("What We Do")
   ========================================================================== */

.ax-caps {
    position: relative;
    padding: 96px 0;
    background:
        radial-gradient(760px 380px at 85% -10%, var(--ax-cyan-100) 0%, transparent 60%),
        var(--ax-paper);
    font-family: var(--ax-font-sans);
}

.ax-caps__head { max-width: 680px; margin: 0 0 52px; }

.ax-caps__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ax-navy-700);
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: 100px;
    padding: 8px 18px;
    margin-bottom: 20px;
    box-shadow: var(--ax-e1);
}
.ax-caps__eyebrow::before {
    content: ""; width: 14px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-cyan-600));
}

.ax-caps__title {
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--ax-navy-900);
    margin: 0;
}
.ax-caps__title .after2 {
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ax-caps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* --- Card: Material surface + elevation on hover ----------------------- */
.ax-cap {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 32px 26px 28px;
    box-shadow: var(--ax-e1);
    overflow: hidden;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease);
}
/* Accent rail that fills on hover */
.ax-cap::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-cyan-600));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.ax-cap:hover {
    transform: translateY(-6px);
    box-shadow: var(--ax-e3);
    border-color: transparent;
}
.ax-cap:hover::before { transform: scaleX(1); }

.ax-cap__icon {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ax-cyan-100), #e9f6ff);
    color: var(--ax-navy-700);
    font-size: 1.25rem;
    margin-bottom: 22px;
    transition: background var(--ax-dur-md) var(--ax-ease),
                color var(--ax-dur-md) var(--ax-ease);
}
.ax-cap:hover .ax-cap__icon {
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
}

.ax-cap__tag {
    font-size: 11px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ax-cyan-600);
    margin-bottom: 10px;
}

.ax-cap__title {
    font-family: var(--ax-font-display);
    font-size: 1.32rem; font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--ax-navy-900);
    margin: 0 0 12px;
}

.ax-cap__text {
    font-size: .95rem;
    line-height: 1.68;
    color: var(--ax-ink-soft);
    margin: 0 0 22px;
    flex: 1 1 auto;
}

.ax-cap__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 800;
    letter-spacing: .02em;
    color: var(--ax-navy-700);
    text-decoration: none;
    transition: gap var(--ax-dur-md) var(--ax-ease),
                color var(--ax-dur-md) var(--ax-ease);
}
.ax-cap__link i { font-size: .76rem; }
.ax-cap:hover .ax-cap__link { color: var(--ax-cyan-600); gap: 13px; }
.ax-cap__link:focus-visible { outline: 2px solid var(--ax-cyan-500); outline-offset: 4px; border-radius: 4px; }

/* Make the whole card clickable surface */
.ax-cap__link::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 1199px) {
    .ax-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ax-caps { padding: 64px 0; }
    .ax-caps__grid { grid-template-columns: 1fr; gap: 16px; }
    .ax-caps__head { margin-bottom: 36px; }
    .ax-hero__visual { margin-top: 0; }
    .ax-hero__trust { gap: 0; }
    .ax-hero__trust li { padding-right: 10px; }
    .ax-hero__trust li + li { padding-left: 12px; }
    .ax-hero__trust strong { font-size: 1.4rem; }
    .ax-hero__trust span { font-size: .64rem; letter-spacing: .05em; }
}

/* ==========================================================================
   Hero visual — containment fix
   The banner image carries its own "15+ Years" badge, so nothing is
   overlaid on it. Keep the frame inside the column at every width.
   ========================================================================== */

.ax-hero__visual {
    position: relative;
    max-width: 560px;
    margin-inline: auto;
}
.ax-hero__frame { border-radius: var(--ax-r-lg); overflow: hidden; }
.ax-hero__frame img { width: 100%; height: auto; display: block; }

@media (max-width: 991px) {
    .ax-hero__visual { margin-top: 44px; max-width: 460px; }
}
@media (max-width: 575px) {
    .ax-hero__visual { max-width: 100%; }
}

/* ==========================================================================
   Section 3 — Services (vertical rail + bulleted detail panel)
   ========================================================================== */

.ax-svc {
    padding: 96px 0;
    background: var(--ax-white);
    font-family: var(--ax-font-sans);
}

.ax-svc__head { max-width: 720px; margin: 0 0 48px; }

.ax-svc__heading {
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--ax-navy-900);
    margin: 0 0 16px;
}
.ax-svc__heading .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ax-svc__intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ax-ink-soft);
    margin: 0;
}

/* --- Board: navy rail + light stage ------------------------------------ */
.ax-svc__board {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    background: var(--ax-navy-900);
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e3);
}

/* --- Rail -------------------------------------------------------------- */
.ax-svc__rail {
    display: flex;
    flex-direction: column;
    padding: 22px 0;
    background: var(--ax-navy-900);
}

.ax-svc__tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    padding: 18px 26px;
    font-family: var(--ax-font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.62);
    transition: color var(--ax-dur-md) var(--ax-ease),
                background var(--ax-dur-md) var(--ax-ease);
}
.ax-svc__tab i {
    font-size: .78rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-svc__tab:hover { color: var(--ax-white); background: rgba(255,255,255,.05); }

/* Active tab becomes a white "card" that bridges into the stage */
.ax-svc__tab.is-active {
    color: var(--ax-navy-900);
    background: var(--ax-white);
    border-radius: var(--ax-r-md) 0 0 var(--ax-r-md);
    margin-left: 14px;
    box-shadow: var(--ax-e2);
}
.ax-svc__tab.is-active i { opacity: 1; transform: none; color: var(--ax-cyan-600); }
.ax-svc__tab:focus-visible { outline: 2px solid var(--ax-cyan-400); outline-offset: -4px; }

/* --- Stage ------------------------------------------------------------- */
.ax-svc__stage {
    background: var(--ax-white);
    padding: 46px 48px;
    min-height: 430px;
}

.ax-svc__panel[hidden] { display: none; }
.ax-svc__panel {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-svc__panel.is-active { opacity: 1; transform: none; }

.ax-svc__title {
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem);
    line-height: 1.14;
    letter-spacing: -.022em;
    color: var(--ax-navy-900);
    margin: 0 0 14px;
}
.ax-svc__desc {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--ax-ink-soft);
    max-width: 54em;
    margin: 0 0 28px;
}

/* --- Bullets ----------------------------------------------------------- */
.ax-svc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 30px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
.ax-svc__list li {
    position: relative;
    padding-left: 26px;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ax-ink);
}
.ax-svc__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .48em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    box-shadow: 0 0 0 3px rgba(0,217,220,.16);
}

.ax-svc__cta { align-self: flex-start; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .ax-svc { padding: 68px 0; }
    .ax-svc__board { grid-template-columns: 1fr; }
    .ax-svc__rail {
        flex-direction: row;
        overflow-x: auto;
        padding: 14px 12px;
        gap: 8px;
        scrollbar-width: none;
    }
    .ax-svc__rail::-webkit-scrollbar { display: none; }
    .ax-svc__tab {
        width: auto;
        flex: 0 0 auto;
        padding: 12px 20px;
        font-size: .92rem;
        border-radius: 100px;
        white-space: nowrap;
    }
    .ax-svc__tab.is-active { margin-left: 0; border-radius: 100px; }
    .ax-svc__tab i { display: none; }
    .ax-svc__stage { padding: 34px 26px; min-height: 0; }
}

@media (max-width: 575px) {
    .ax-svc__list { grid-template-columns: 1fr; gap: 12px; }
    .ax-svc__stage { padding: 28px 20px; }
}

/* ==========================================================================
   Section 4 — Testimonials, Reels-style snap rail
   ========================================================================== */

.ax-reels-section {
    padding: 96px 0;
    background:
        radial-gradient(700px 360px at 12% 0%, var(--ax-cyan-100) 0%, transparent 62%),
        var(--ax-paper);
    font-family: var(--ax-font-sans);
}
.ax-reels-section .hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.026em;
    color: var(--ax-navy-900);
}
.ax-reels-section .hadding2-w .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ax-reels { position: relative; }

.ax-reels__rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 4px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ax-reels__rail::-webkit-scrollbar { display: none; }

/* --- The reel card: 9:16, like a Reels tile ---------------------------- */
.ax-reel {
    flex: 0 0 clamp(260px, 25%, 310px);
    scroll-snap-align: center;
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e2);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.ax-reel:hover { transform: translateY(-6px); box-shadow: var(--ax-e4); }
.ax-reel:focus-visible { outline: 3px solid var(--ax-cyan-500); outline-offset: 3px; }

.ax-reel__media {
    position: relative;
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 24px;
    color: var(--ax-white);
    isolation: isolate;
}
/* Four brand-tinted gradients so the rail reads like a feed */
.ax-reel__media[data-variant="0"] { background: linear-gradient(160deg, #0a2f68 0%, #03122c 72%); }
.ax-reel__media[data-variant="1"] { background: linear-gradient(160deg, #00707a 0%, #04203f 74%); }
.ax-reel__media[data-variant="2"] { background: linear-gradient(160deg, #0f4593 0%, #051630 76%); }
.ax-reel__media[data-variant="3"] { background: linear-gradient(160deg, #0b5f6b 0%, #03162e 72%); }
/* Soft cyan bloom, static (no animation) */
.ax-reel__media::before {
    content: "";
    position: absolute;
    top: -22%; right: -26%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,217,220,.30) 0%, transparent 68%);
    z-index: -1;
}

.ax-reel__tag {
    position: absolute;
    top: 20px; left: 24px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ax-navy-900);
    background: var(--ax-cyan-400);
    border-radius: 100px;
    padding: 6px 13px;
}

.ax-reel__mark {
    position: absolute;
    top: 42px; right: 22px;
    font-family: var(--ax-font-display);
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255,255,255,.12);
    z-index: -1;
}

.ax-reel__quote {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(255,255,255,.93);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ax-reel__meta { border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }
.ax-reel__stars { color: var(--ax-cyan-400); font-size: .76rem; letter-spacing: 2px; margin-bottom: 10px; }
.ax-reel__author { display: flex; align-items: center; gap: 11px; }
.ax-reel__avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: .95rem;
}
.ax-reel__author h4 {
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ax-white);
    margin: 0;
    line-height: 1.3;
}

/* --- Rail controls ------------------------------------------------------ */
.ax-reels__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--ax-white);
    color: var(--ax-navy-900);
    box-shadow: var(--ax-e3);
    cursor: pointer;
    transition: background var(--ax-dur-md) var(--ax-ease),
                color var(--ax-dur-md) var(--ax-ease),
                opacity var(--ax-dur-md) var(--ax-ease);
}
.ax-reels__nav:hover { background: var(--ax-cyan-500); }
.ax-reels__nav:disabled { opacity: .3; cursor: default; }
.ax-reels__nav--prev { left: -18px; }
.ax-reels__nav--next { right: -18px; }
.ax-reels__nav:focus-visible { outline: 3px solid var(--ax-cyan-500); outline-offset: 3px; }

.ax-reels__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.ax-reels__dot {
    width: 8px; height: 8px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: var(--ax-line);
    cursor: pointer;
    transition: all var(--ax-dur-md) var(--ax-ease);
}
.ax-reels__dot.is-active {
    width: 26px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--ax-cyan-500), var(--ax-cyan-600));
}

@media (max-width: 991px) {
    .ax-reels-section { padding: 68px 0; }
    .ax-reels__nav { display: none; }
    .ax-reels__rail { padding-inline: 2px; }
    .ax-reel { flex-basis: 70%; }
}
@media (max-width: 575px) {
    .ax-reel { flex-basis: 84%; }
}

/* ==========================================================================
   Section 1c — Hero spacing / visual position
   ========================================================================== */

.ax-hero { padding: 84px 0 80px; }
@media (min-width: 992px) {
    .ax-hero__visual { margin-top: -18px; }   /* was -56px: sat too high */
    .ax-hero__row    { min-height: 520px; }
}

/* ==========================================================================
   Section 0 — Header / navigation (premium)
   ========================================================================== */

.header-area,
.header-area-all {
    font-family: var(--ax-font-sans);
}

/* Top-level menu links */
/* Animated underline instead of a hard colour flip */
/* Dropdown panels intentionally left to the theme: the menu is built and
   toggled outside the stylesheets here, and overriding it broke the flyouts. */

/* --- Mobile drawer ------------------------------------------------------ */
.mobile-sidebar {
    background: var(--ax-navy-900) !important;
    border-right: 1px solid rgba(255,255,255,.08);
}
.mobile-nav li a {
    font-family: var(--ax-font-sans) !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.86) !important;
    border-radius: var(--ax-r-sm);
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}
.mobile-nav li a:hover { background: rgba(255,255,255,.07) !important; color: var(--ax-white) !important; }
.menu-close, .mobile-menu-button { transition: transform var(--ax-dur-sm) var(--ax-ease); }
.menu-close:hover, .mobile-menu-button:hover { transform: scale(1.08); }

/* ==========================================================================
   Section 5 — Why Choose Us / How It Works
   ========================================================================== */

.h-how-twork-block {
    padding: 96px 0 !important;
    background:
        radial-gradient(700px 340px at 90% 0%, var(--ax-cyan-100) 0%, transparent 60%),
        var(--ax-white);
    font-family: var(--ax-font-sans);
}
.h-how-twork-block .title { text-align: center; margin-bottom: 40px; }
.h-how-twork-block .title h3,
.h-how-twork-block > .container > h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(2rem, 3.2vw, 2.9rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.026em;
    color: var(--ax-navy-900);
    text-align: center;
}
.h-how-twork-block > .container > h3 { margin: 64px 0 40px; }
.h-how-twork-block .figure img {
    border-radius: var(--ax-r-lg);
    box-shadow: var(--ax-e2);
}

.h-how-twork-block .text-bd .item {
    height: 100%;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 32px 28px;
    margin-bottom: 24px;
    box-shadow: var(--ax-e1);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.h-how-twork-block .text-bd .item:hover { transform: translateY(-6px); box-shadow: var(--ax-e3); }
.h-how-twork-block .text-bd .item span[class^="colr"] {
    display: grid !important; place-items: center;
    width: 54px; height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600)) !important;
    color: var(--ax-navy-900) !important;
    font-size: 1.2rem;
    margin-bottom: 18px;
}
.h-how-twork-block .text-bd .item h4 {
    font-family: var(--ax-font-display) !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: var(--ax-navy-900);
    margin-bottom: 10px;
}
.h-how-twork-block .text-bd .item p { font-size: .96rem; line-height: 1.68; color: var(--ax-ink-soft); }

/* ==========================================================================
   Section 6 — CTA band
   ========================================================================== */

.cta2 { position: relative; padding: 88px 0 !important; isolation: isolate; }
.cta2::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(3,18,44,.95) 0%, rgba(6,31,69,.88) 50%, rgba(0,184,187,.55) 100%);
    z-index: -1;
}
.cta2 .hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    color: var(--ax-white) !important;
    font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
    line-height: 1.12 !important;
    margin: 0;
}
.cta2 .header2-buttons { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }

/* ==========================================================================
   Section 7 — Counters
   ========================================================================== */

.counter2-box {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--ax-e1);
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.counter2-box:hover { transform: translateY(-6px); box-shadow: var(--ax-e3); }
.counter2-box .counter, .counter2-box h2 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(2.3rem, 3.5vw, 3.2rem) !important;
    line-height: 1.04;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.counter2-box p {
    font-size: .8rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ax-ink-soft); margin-top: 8px;
}

/* ==========================================================================
   Section 8 — FAQ accordion
   ========================================================================== */

.accordion_row .accordion-item {
    background: var(--ax-white) !important;
    border: 1px solid var(--ax-line) !important;
    border-radius: var(--ax-r-md) !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--ax-e1);
}
.accordion_row .accordion-button {
    font-family: var(--ax-font-sans) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ax-navy-900) !important;
    background: transparent !important;
    padding: 20px 24px !important;
    box-shadow: none !important;
}
.accordion_row .accordion-button:not(.collapsed) { color: var(--ax-navy-700) !important; }
.accordion_row .accordion-button::after {
    background-image: none !important;
    content: "\002B";
    font-size: 1.4rem; line-height: 1;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ax-cyan-100);
    color: var(--ax-navy-700);
    transform: none !important;
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}
.accordion_row .accordion-button:not(.collapsed)::after {
    content: "\2212";
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
}
.accordion_row .accordion-body {
    padding: 0 24px 22px !important;
    font-size: .99rem; line-height: 1.75; color: var(--ax-ink-soft);
}

/* ==========================================================================
   Section 9 — Blog
   ========================================================================== */

.blog2.h-blog-section { background: var(--ax-paper) !important; padding: 96px 0 !important; }
.h-blog-section .item {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    overflow: hidden; height: 100%;
    box-shadow: var(--ax-e1);
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.h-blog-section .item:hover { transform: translateY(-8px); box-shadow: var(--ax-e3); }
.h-blog-section .itm-img { overflow: hidden; }
.h-blog-section .itm-img img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    transition: transform 600ms var(--ax-ease);
}
.h-blog-section .item:hover .itm-img img { transform: scale(1.06); }
.h-blog-section .item-col, .h-blog-section .item_right { padding: 24px 24px 28px; }
.h-blog-section .date2 {
    display: inline-block;
    font-size: .74rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ax-navy-700);
    background: var(--ax-cyan-100);
    border-radius: 100px; padding: 6px 13px; margin-bottom: 13px;
}
.h-blog-section h4, .h-blog-section h3 {
    font-family: var(--ax-font-display) !important;
    font-size: 1.2rem !important; font-weight: 800 !important;
    line-height: 1.34 !important; color: var(--ax-navy-900);
    transition: color var(--ax-dur-md) var(--ax-ease);
}
.h-blog-section .item:hover h4, .h-blog-section .item:hover h3 { color: var(--ax-cyan-600); }

/* ==========================================================================
   Section 10 — Contact
   ========================================================================== */

.contact2-single {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 28px 24px; height: 100%;
    box-shadow: var(--ax-e1);
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.contact2-single:hover { transform: translateY(-6px); box-shadow: var(--ax-e3); }
.contact2-icon {
    display: grid !important; place-items: center;
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600)) !important;
    color: var(--ax-navy-900) !important;
    font-size: 1.1rem; margin-bottom: 15px;
}
.contact2-icon i { color: var(--ax-navy-900) !important; }
.contact2-icon-hadding h4 {
    font-family: var(--ax-font-display) !important;
    font-size: 1.08rem !important; font-weight: 800 !important;
    color: var(--ax-navy-900);
}

.right-enquire-now {
    background: linear-gradient(135deg, var(--ax-navy-900), var(--ax-navy-700));
    border-radius: var(--ax-r-lg);
    padding: 42px 38px;
    box-shadow: var(--ax-e4);
}
.right-enquire-now h2, .right-enquire-now h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    color: var(--ax-white) !important;
}
.right-enquire-now p { color: rgba(255,255,255,.76) !important; }
.right-enquire-now input,
.right-enquire-now select,
.right-enquire-now textarea {
    font-family: var(--ax-font-sans) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: var(--ax-r-sm) !important;
    color: var(--ax-white) !important;
    padding: 14px 17px !important;
    transition: border-color var(--ax-dur-sm) var(--ax-ease), background var(--ax-dur-sm) var(--ax-ease);
}
.right-enquire-now input::placeholder,
.right-enquire-now textarea::placeholder { color: rgba(255,255,255,.45) !important; }
.right-enquire-now input:focus,
.right-enquire-now select:focus,
.right-enquire-now textarea:focus {
    outline: none !important;
    border-color: var(--ax-cyan-400) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: 0 0 0 4px rgba(0,217,220,.15) !important;
}

/* ==========================================================================
   Section 11 — Brand strip + Footer
   ========================================================================== */

.brand-logo-section img, .brand2 img {
    filter: grayscale(1); opacity: .5;
    transition: filter var(--ax-dur-md) var(--ax-ease), opacity var(--ax-dur-md) var(--ax-ease);
}
.brand-logo-section img:hover, .brand2 img:hover { filter: grayscale(0); opacity: 1; }

.single-footer h3, .single-footer4 h3, .single-footer h4 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.012em;
}
.single-footer-menu li a,
.footer4-contact-info a {
    transition: color var(--ax-dur-sm) var(--ax-ease), padding-left var(--ax-dur-md) var(--ax-ease);
}
.single-footer-menu li a:hover { color: var(--ax-cyan-400) !important; padding-left: 6px; }

/* ==========================================================================
   Global motion curb — stop the perpetual theme animations
   ========================================================================== */

.h-how-twork-block [class*="glow"],
.cta2 [class*="glow"],
.ax-caps [class*="glow"] { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   TYPE SYSTEM — one scale, enforced
   The theme sets fonts/sizes from several responsive files with deeper
   selectors, so these are deliberately specific and marked important.
   ========================================================================== */

:root {
    --ax-t-display: clamp(2.1rem, 3.4vw, 3.05rem);  /* section headings   */
    --ax-t-sub:     clamp(1.5rem, 2.2vw, 2rem);     /* sub-headings       */
    --ax-t-card:    1.22rem;                         /* card titles        */
    --ax-t-body:    1rem;                            /* body copy          */
    --ax-t-small:   .94rem;                          /* dense body         */
    --ax-lh-tight:  1.1;
    --ax-lh-body:   1.7;
}

/* Font enforcement across every homepage section */
.ax-hero, .ax-caps, .ax-svc, .ax-reels-section,
.h-about-block, .h-how-twork-block, .cta2,
.blog2, .accordion_row, .contact2-single, .right-enquire-now {
    font-family: var(--ax-font-sans) !important;
}
.ax-hero h1, .ax-hero h2, .ax-hero h3,
.ax-caps h2, .ax-svc h2, .ax-svc h3,
.ax-reels-section h3, .ax-reels-section h4,
.h-about-block h2, .h-about-block h3,
.h-how-twork-block h2, .h-how-twork-block h3, .h-how-twork-block h4,
.cta2 h2, .cta2 h3,
.blog2 h3, .blog2 h4,
.counter2-box h2, .counter2-box .counter {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

/* ==========================================================================
   Section 5 (rebuilt) — How We Work
   Selectors include `.text` to outrank the theme's own rules.
   ========================================================================== */

.h-how-twork-block {
    padding: 92px 0 !important;
    background:
        radial-gradient(760px 360px at 88% -5%, var(--ax-cyan-100) 0%, transparent 62%),
        var(--ax-white) !important;
}

.h-how-twork-block .title { text-align: center; margin-bottom: 42px; }
.h-how-twork-block .title .span { margin-bottom: 14px; }

.h-how-twork-block .title h3,
.h-how-twork-block .title h2,
.h-how-twork-block > .container > h3 {
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    color: var(--ax-navy-900) !important;
    text-align: center;
    margin: 0 auto 10px !important;
    max-width: 18ch;
}
.h-how-twork-block > .container > h3 {
    margin: 68px auto 42px !important;
    max-width: 22ch;
}

.h-how-twork-block .figure img {
    border-radius: var(--ax-r-lg);
    box-shadow: var(--ax-e2);
    width: 100%; height: auto;
}

/* --- Step cards --------------------------------------------------------- */
.h-how-twork-block .text-bd { margin-top: 8px; }

.h-how-twork-block .text-bd .item {
    position: relative;
    height: 100%;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 34px 30px 30px !important;
    margin-bottom: 24px;
    box-shadow: var(--ax-e1);
    overflow: hidden;
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.h-how-twork-block .text-bd .item::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-cyan-600));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.h-how-twork-block .text-bd .item:hover { transform: translateY(-6px); box-shadow: var(--ax-e3); }
.h-how-twork-block .text-bd .item:hover::before { transform: scaleX(1); }

.h-how-twork-block .text-bd .item span.colr1,
.h-how-twork-block .text-bd .item span.colr2,
.h-how-twork-block .text-bd .item span.colr3,
.h-how-twork-block .text-bd .item span[class^="colr"] {
    display: grid !important;
    place-items: center;
    width: 52px !important; height: 52px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600)) !important;
    color: var(--ax-navy-900) !important;
    font-size: 1.1rem !important;
    margin: 0 0 20px !important;
}
.h-how-twork-block .text-bd .item span[class^="colr"] i { color: var(--ax-navy-900) !important; }

/* These two carry `.text` to beat the theme's deeper selector */
.h-how-twork-block .text-bd .item .text h4 {
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-card) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.018em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
.h-how-twork-block .text-bd .item .text p {
    font-family: var(--ax-font-sans) !important;
    font-size: var(--ax-t-small) !important;
    line-height: var(--ax-lh-body) !important;
    color: var(--ax-ink-soft) !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .h-how-twork-block { padding: 64px 0 !important; }
    .h-how-twork-block > .container > h3 { margin: 46px auto 28px !important; }
}

/* ==========================================================================
   Section 2 (rebuilt) — "Where to start" quick-entry row
   Compact, concrete, no filler copy.
   ========================================================================== */

.ax-caps {
    padding: 56px 0 !important;
    background: var(--ax-paper);
    border-bottom: 1px solid var(--ax-line);
}

.ax-caps__title {
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    color: var(--ax-ink-soft) !important;
    font-family: var(--ax-font-sans) !important;
    margin: 0 0 22px !important;
}

.ax-caps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ax-cap {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 18px 20px;
    text-decoration: none;
    box-shadow: var(--ax-e1);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease);
}
.ax-cap:hover {
    transform: translateY(-4px);
    box-shadow: var(--ax-e3);
    border-color: rgba(0,217,220,.45);
}

.ax-cap__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--ax-cyan-100);
    color: var(--ax-navy-700);
    font-size: .98rem;
    transition: background var(--ax-dur-md) var(--ax-ease), color var(--ax-dur-md) var(--ax-ease);
}
.ax-cap:hover .ax-cap__icon {
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
}

.ax-cap__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-cap__title {
    font-family: var(--ax-font-display) !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
    color: var(--ax-navy-900);
    line-height: 1.25;
}
.ax-cap__text {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--ax-ink-soft);
}
.ax-cap__arrow {
    margin-left: auto;
    font-size: .74rem;
    color: var(--ax-line);
    transition: color var(--ax-dur-md) var(--ax-ease), transform var(--ax-dur-md) var(--ax-ease);
}
.ax-cap:hover .ax-cap__arrow { color: var(--ax-cyan-600); transform: translateX(3px); }

@media (max-width: 1199px) { .ax-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .ax-caps__grid { grid-template-columns: 1fr; } .ax-caps { padding: 40px 0 !important; } }

/* ==========================================================================
   FIX — Contact cards
   These cards sat on a dark section with white text. Giving them a white
   surface made that text invisible, so the text colour is reset here.
   ========================================================================== */

.contact2-single {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 20px 22px !important;
}
.contact2-icon { margin: 0 !important; flex-shrink: 0; width: 46px !important; height: 46px !important; }

.contact2-single .contact2-icon-hadding,
.contact2-single .contact2-icon-hadding * { min-width: 0; }

.contact2-single .contact2-icon-hadding a,
.contact2-single .contact2-icon-hadding p,
.contact2-single .contact2-icon-hadding h4,
.contact2-single .contact2-icon-hadding span {
    color: var(--ax-navy-900) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    word-break: break-word;
    transition: color var(--ax-dur-sm) var(--ax-ease);
}
.contact2-single .contact2-icon-hadding a:hover { color: var(--ax-cyan-600) !important; }

/* ==========================================================================
   FAQ — sleeker: flat list, hairline dividers, no heavy card chrome
   ========================================================================== */

.accordion_row {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e1);
}
.accordion_row .accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ax-line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.accordion_row .accordion-item:last-child { border-bottom: 0 !important; }

.accordion_row .accordion-button {
    font-family: var(--ax-font-sans) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: var(--ax-navy-900) !important;
    background: transparent !important;
    padding: 22px 26px !important;
    gap: 16px;
    box-shadow: none !important;
    transition: color var(--ax-dur-sm) var(--ax-ease), background var(--ax-dur-sm) var(--ax-ease);
}
.accordion_row .accordion-button:hover { background: var(--ax-paper) !important; }
.accordion_row .accordion-button:not(.collapsed) {
    color: var(--ax-cyan-600) !important;
    background: transparent !important;
}

/* Minimal chevron rather than a filled circle */
.accordion_row .accordion-button::after {
    background-image: none !important;
    content: "\f107";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    width: auto !important; height: auto !important;
    background: transparent !important;
    color: var(--ax-ink-soft) !important;
    font-size: 1.05rem;
    transform: rotate(0deg) !important;
    transition: transform var(--ax-dur-md) var(--ax-ease), color var(--ax-dur-md) var(--ax-ease);
}
.accordion_row .accordion-button:not(.collapsed)::after {
    content: "\f107";
    transform: rotate(180deg) !important;
    color: var(--ax-cyan-600) !important;
}

.accordion_row .accordion-body {
    padding: 0 26px 24px !important;
    font-size: var(--ax-t-small) !important;
    line-height: 1.78 !important;
    color: var(--ax-ink-soft) !important;
}

/* ==========================================================================
   Blog — reduced height
   ========================================================================== */

.blog2.h-blog-section { padding: 68px 0 !important; }
.h-blog-section .itm-img img { aspect-ratio: 16 / 9 !important; }
.h-blog-section .item-col,
.h-blog-section .item_right { padding: 18px 20px 22px !important; }
.h-blog-section .date2 { margin-bottom: 10px !important; padding: 5px 11px !important; font-size: .7rem !important; }
.h-blog-section h4, .h-blog-section h3 {
    font-size: 1.08rem !important;
    line-height: 1.32 !important;
    margin: 0 0 8px !important;
}
.h-blog-section .item p {
    font-size: .89rem !important;
    line-height: 1.6 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px !important;
}

/* ==========================================================================
   Footer — solid colour
   ========================================================================== */

footer, .footer4, .footer-area, .footer2, .footer-section {
    background-image: none !important;
    background-color: var(--ax-navy-900) !important;
}
footer::before, footer::after,
.footer4::before, .footer4::after { display: none !important; }

footer, footer p, footer li, footer a, footer span {
    font-family: var(--ax-font-sans) !important;
    color: rgba(255,255,255,.72) !important;
}
footer h2, footer h3, footer h4 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    color: var(--ax-white) !important;
    letter-spacing: -.018em;
}
footer a { transition: color var(--ax-dur-sm) var(--ax-ease); }
footer a:hover { color: var(--ax-cyan-400) !important; }
footer hr, footer .copyright { border-color: rgba(255,255,255,.12) !important; }

/* ==========================================================================
   SPACING SCALE — one rhythm for every section (fixes uneven gaps)
   ========================================================================== */

:root {
    --ax-sp-section: 92px;
    --ax-sp-head:    46px;   /* heading block -> content */
    --ax-sp-block:   56px;   /* sub-block -> sub-block   */
    --ax-gap:        20px;
}

.ax-hero, .ax-caps, .ax-svc, .ax-work,
.ax-reels-section, .blog2.h-blog-section { font-family: var(--ax-font-sans); }

.ax-svc, .ax-work, .ax-reels-section { padding: var(--ax-sp-section) 0 !important; }

/* ==========================================================================
   Section — Why Choose Us / How We Work (rebuilt)
   ========================================================================== */

.ax-work {
    background:
        radial-gradient(780px 380px at 88% -6%, var(--ax-cyan-100) 0%, transparent 62%),
        var(--ax-white);
}

.ax-work__head { max-width: 760px; margin: 0 0 var(--ax-sp-head); }

.ax-work__title {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.028em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 !important;
}
.ax-work__title .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ax-work__subtitle {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-sub) !important;
    line-height: 1.16 !important;
    letter-spacing: -.022em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 0 28px !important;
}

/* --- Figure ------------------------------------------------------------- */
.ax-work__figure {
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e2);
    margin-bottom: var(--ax-sp-block);
}
.ax-work__figure img { width: 100%; height: auto; display: block; }

/* --- Benefits ----------------------------------------------------------- */
.ax-work__benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ax-gap);
}
.ax-work__benefit {
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    padding: 28px 26px;
    transition: background var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.ax-work__benefit:hover {
    background: var(--ax-white);
    transform: translateY(-5px);
    box-shadow: var(--ax-e2);
}
.ax-work__check {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ax-cyan-100);
    color: var(--ax-cyan-600);
    font-size: .78rem;
    margin-bottom: 16px;
}
.ax-work__benefit-title {
    font-family: var(--ax-font-display) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 0 9px !important;
}
.ax-work__benefit-text {
    font-size: .9rem !important;
    line-height: 1.65 !important;
    color: var(--ax-ink-soft) !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    :root { --ax-sp-section: 64px; --ax-sp-block: 40px; --ax-sp-head: 32px; }
    .ax-work__steps,
    .ax-work__benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ax-work__step:not(:last-child)::after { display: none; }
}
@media (max-width: 575px) {
    .ax-work__steps,
    .ax-work__benefit-grid,
    .ax-work__metrics { grid-template-columns: 1fr; }
    .ax-work__metric + .ax-work__metric {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.14);
        padding-top: 22px; margin-top: 22px;
    }
}

/* ==========================================================================
   "Where to start" — premium treatment
   ========================================================================== */

.ax-caps {
    padding: var(--ax-sp-section) 0 !important;
    background: linear-gradient(135deg, var(--ax-navy-900) 0%, var(--ax-navy-700) 100%) !important;
    border-bottom: 0 !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.ax-caps::before {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(0,217,220,.20) 0%, transparent 66%);
    z-index: -1;
}

.ax-caps__title {
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-sub) !important;
    font-weight: 800 !important;
    letter-spacing: -.022em !important;
    text-transform: none !important;
    color: var(--ax-white) !important;
    margin: 0 0 8px !important;
    text-align: center;
}
.ax-caps__grid { margin-top: 36px; gap: var(--ax-gap); }

.ax-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--ax-r-md);
    padding: 28px 24px 24px;
    box-shadow: none;
    backdrop-filter: blur(6px);
}
.ax-cap:hover {
    background: var(--ax-white);
    border-color: transparent;
    transform: translateY(-7px);
    box-shadow: var(--ax-e4);
}
.ax-cap__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(0,217,220,.16);
    color: var(--ax-cyan-300);
    font-size: 1.05rem;
    margin-bottom: 18px;
}
.ax-cap:hover .ax-cap__icon {
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
}
.ax-cap__body { gap: 6px; }
.ax-cap__title { color: var(--ax-white) !important; font-size: 1.1rem !important; }
.ax-cap__text  { color: rgba(255,255,255,.62); font-size: .87rem; }
.ax-cap:hover .ax-cap__title { color: var(--ax-navy-900) !important; }
.ax-cap:hover .ax-cap__text  { color: var(--ax-ink-soft); }
.ax-cap__arrow {
    margin: 18px 0 0 0;
    color: rgba(255,255,255,.35);
    font-size: .8rem;
}
.ax-cap:hover .ax-cap__arrow { color: var(--ax-cyan-600); transform: translateX(4px); }

/* ==========================================================================
   GAP AUDIT — every homepage section on one vertical rhythm
   ========================================================================== */

.h-about-block        { padding: var(--ax-sp-section) 0 !important; }
.blog2.h-blog-section { padding: var(--ax-sp-section) 0 !important; }
.cta2                 { padding: 76px 0 !important; }
.contact2,
.contact2-section     { padding: var(--ax-sp-section) 0 !important; }
.brand-logo-section,
.brand2               { padding: 44px 0 !important; }

/* Theme spacer divs fight the scale above — neutralise the largest ones. */
.ax-work .space60, .ax-work .space70, .ax-work .space80,
.ax-work .space90, .ax-work .space100,
.ax-svc  .space60, .ax-svc  .space70, .ax-svc  .space80 { height: 0 !important; }

/* Heading -> content gap, applied uniformly */
.hadding2-w { margin-bottom: var(--ax-sp-head); }
.hadding2-w h1, .hadding2-w h2, .hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.028em !important;
    color: var(--ax-navy-900);
}
.hadding2-w .item-paragraph p {
    font-size: var(--ax-t-body) !important;
    line-height: var(--ax-lh-body) !important;
    color: var(--ax-ink-soft) !important;
}

/* About block: match the new scale */
.h-about-block .right h2 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.028em !important;
    margin: 12px 0 18px !important;
}
.h-about-block .right .text p {
    font-size: var(--ax-t-body) !important;
    line-height: var(--ax-lh-body) !important;
    color: var(--ax-ink-soft) !important;
}
.h-about-block .left img {
    border-radius: var(--ax-r-lg);
    box-shadow: var(--ax-e2);
    width: 100%; height: auto;
}

/* Reels heading on the same scale */
.ax-reels-section .hadding2-w h3 { font-size: var(--ax-t-display) !important; }

/* Consistent eyebrow everywhere */
.ax-caps__eyebrow, .span {
    font-family: var(--ax-font-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
}

/* ==========================================================================
   FAQ — crisp
   NOTE: `accordion_row` sits on each ITEM, not the wrapper. The container
   is `.faqblock_home .bd_block .accordion`.
   ========================================================================== */

.faqblock_home { padding: var(--ax-sp-section) 0 !important; background: var(--ax-paper); }

.faqblock_home .title { text-align: center; margin-bottom: var(--ax-sp-head); }
.faqblock_home .title h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.028em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 !important;
}

.faqblock_home .bd_block .accordion {
    max-width: 860px;
    margin-inline: auto;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e1);
}

.faqblock_home .accordion-item.accordion_row {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ax-line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.faqblock_home .accordion-item.accordion_row:last-child { border-bottom: 0 !important; }

.faqblock_home .accordion-button {
    font-family: var(--ax-font-sans) !important;
    font-size: 1.03rem !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    color: var(--ax-navy-900) !important;
    background: transparent !important;
    padding: 22px 28px !important;
    gap: 18px;
    box-shadow: none !important;
    border: 0 !important;
    cursor: pointer;
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-button:hover { background: var(--ax-paper) !important; }
.faqblock_home .accordion-button:not(.collapsed) { color: var(--ax-cyan-600) !important; }

.faqblock_home .accordion-button::after {
    background-image: none !important;
    content: "\002B";
    font-family: var(--ax-font-sans) !important;
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1;
    display: grid; place-items: center;
    width: 30px !important; height: 30px !important;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ax-cyan-100) !important;
    color: var(--ax-navy-700) !important;
    transform: none !important;
    transition: background var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-button:not(.collapsed)::after {
    content: "\2212";
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600)) !important;
    color: var(--ax-navy-900) !important;
}

.faqblock_home .accordion-body {
    padding: 0 28px 24px !important;
    font-size: var(--ax-t-small) !important;
    line-height: 1.8 !important;
    color: var(--ax-ink-soft) !important;
}

/* ==========================================================================
   Footer logo — invert the dark logo for the navy footer
   ========================================================================== */

footer img[src*="logo"],
.footer4 img[src*="logo"],
.single-footer img[src*="logo"],
.single-footer4 img[src*="logo"] {
    filter: brightness(0) invert(1);
    opacity: .96;
}

/* ==========================================================================
   SECTION BACKGROUNDS — strict alternation
   Order: hero(D) brand(P) about(W) services(P) work(W) testimonials(P)
          cta(D) faq(W) where-to-start(D) contact(P) blog(W) footer(D)
   No two consecutive sections share a background.
   ========================================================================== */

.ax-hero            { background: var(--ax-navy-900); }                 /* D */
.brand-logo-section,
.brand2             { background: var(--ax-paper) !important; }          /* P */
.h-about-block      { background: var(--ax-white) !important; }          /* W */

.ax-svc {                                                                /* P */
    background:
        radial-gradient(760px 360px at 88% -8%, var(--ax-cyan-100) 0%, transparent 60%),
        var(--ax-paper) !important;
}
.ax-work {                                                               /* W */
    background:
        radial-gradient(780px 380px at 10% -6%, var(--ax-cyan-100) 0%, transparent 58%),
        var(--ax-white) !important;
}
.ax-reels-section {                                                      /* P */
    background:
        radial-gradient(700px 340px at 90% 0%, var(--ax-cyan-100) 0%, transparent 60%),
        var(--ax-paper) !important;
}
/* cta2 stays dark (D) */
.faqblock_home      { background: var(--ax-white) !important; }          /* W */
/* ax-caps stays navy (D) */

.contact2,
.h-contact-block {                                                       /* P */
    background-image: none !important;
    background-color: var(--ax-paper) !important;
    padding: var(--ax-sp-section) 0 !important;
}
/* Contact ran white-on-dark; invert the type now the surface is light. */
.contact2 .hadding2-w h1,
.contact2 .hadding2-w h2,
.contact2 .hadding2-w h3,
.h-contact-block .hadding2-w h3 { color: var(--ax-navy-900) !important; }
.contact2 > .container p,
.h-contact-block > .container p { color: var(--ax-ink-soft) !important; }
/* The enquiry panel keeps its dark card on the light surface. */
.contact2 .right-enquire-now h2,
.contact2 .right-enquire-now h3 { color: var(--ax-white) !important; }
.contact2 .right-enquire-now p  { color: rgba(255,255,255,.76) !important; }

.blog2.h-blog-section { background: var(--ax-white) !important; }        /* W */

/* ==========================================================================
   SECTION HEADINGS — bigger, centred, one consistent scale
   ========================================================================== */

:root {
    --ax-t-display: clamp(2.45rem, 4.2vw, 3.6rem);
    --ax-t-sub:     clamp(1.7rem, 2.6vw, 2.3rem);
}

.ax-svc__head,
.ax-work__head,
.ax-caps .container > .ax-caps__title,
.faqblock_home .title,
.ax-reels-section .hadding2-w,
.contact2 .hadding2-w,
.blog2 .hadding2-w,
.h-service-section .hadding2-w {
    text-align: center;
}

.ax-svc__head,
.ax-work__head {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.ax-svc__intro,
.ax-work__head p { margin-inline: auto; }

/* One rule for every section heading */
.ax-svc__heading,
.ax-work__title,
.faqblock_home .title h3,
.ax-reels-section .hadding2-w h3,
.contact2 .hadding2-w h3,
.blog2 .hadding2-w h3,
.hadding2-w h1,
.hadding2-w h2,
.hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 20ch;
}
.ax-svc__heading, .ax-work__title { max-width: 22ch; }

/* Sub-headings inside a section */
.ax-work__subtitle {
    font-size: var(--ax-t-sub) !important;
    text-align: center;
    margin-bottom: 32px !important;
}

/* Centre the eyebrow with its heading */
.ax-svc__head .ax-caps__eyebrow,
.ax-work__head .ax-caps__eyebrow { display: inline-flex; }

.ax-caps__title { font-size: var(--ax-t-sub) !important; }

@media (max-width: 767px) {
    .ax-svc__heading, .ax-work__title,
    .faqblock_home .title h3,
    .hadding2-w h1, .hadding2-w h2, .hadding2-w h3 { max-width: 100%; }
}

/* ==========================================================================
   What sets us apart — editorial list
   No cards, no icons, no boxes: hairline rules and whitespace do the work.
   ========================================================================== */

.ax-work__benefits { max-width: 1000px; margin-inline: auto; }

.ax-apart {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 72px;
}

.ax-apart__item {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--ax-line);
}
/* Top rule only on the first row of each column */
.ax-apart__item:nth-child(1),
.ax-apart__item:nth-child(2) { border-top: 0; padding-top: 0; }

.ax-apart__num {
    font-family: var(--ax-font-display);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ax-cyan-600);
    flex-shrink: 0;
    padding-top: .25em;
}

.ax-apart__title {
    font-family: var(--ax-font-display) !important;
    font-size: 1.16rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.3 !important;
    color: var(--ax-navy-900) !important;
    margin: 0 0 5px !important;
}
.ax-apart__text {
    font-size: .95rem !important;
    line-height: 1.6 !important;
    color: var(--ax-ink-soft) !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .ax-apart { grid-template-columns: 1fr; column-gap: 0; }
    .ax-apart__item { padding: 20px 0; }
    .ax-apart__item:nth-child(2) { border-top: 1px solid var(--ax-line); padding-top: 20px; }
}

/* ==========================================================================
   FAQ — compact two-column layout, far less vertical space
   ========================================================================== */

.faqblock_home { padding: 68px 0 !important; }
.faqblock_home .title { margin-bottom: 32px !important; }

.faqblock_home .bd_block .accordion {
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.faqblock_home .accordion-item.accordion_row {
    background: var(--ax-white) !important;
    border: 1px solid var(--ax-line) !important;
    border-radius: var(--ax-r-sm) !important;
    margin-bottom: 10px !important;
    height: fit-content;
    overflow: hidden;
    transition: border-color var(--ax-dur-sm) var(--ax-ease),
                box-shadow var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-item.accordion_row:hover { border-color: rgba(0,217,220,.4) !important; }

.faqblock_home .accordion-button {
    font-size: .95rem !important;
    font-weight: 700 !important;
    padding: 15px 18px !important;
    gap: 12px;
    line-height: 1.4 !important;
}
.faqblock_home .accordion-button::after {
    width: 22px !important; height: 22px !important;
    font-size: 1.1rem;
}
.faqblock_home .accordion-body {
    padding: 0 18px 16px !important;
    font-size: .89rem !important;
    line-height: 1.65 !important;
}

@media (max-width: 991px) {
    .faqblock_home .bd_block .accordion { grid-template-columns: 1fr; }
    .faqblock_home { padding: 52px 0 !important; }
}

/* ==========================================================================
   BACKGROUND ALTERNATION — revised
   "Get In Touch" needs white type, so contact returns to dark. To avoid two
   dark sections touching, "Where to start" flips to light.
   Order: cta(D) faq(W) where-to-start(P) contact(D) blog(W) footer(D)
   ========================================================================== */

/* Where to start -> light premium */
.ax-caps {
    background: var(--ax-paper) !important;
    border-top: 1px solid var(--ax-line);
}
.ax-caps::before {
    background: radial-gradient(circle, rgba(0,217,220,.13) 0%, transparent 66%);
}
.ax-caps__title { color: var(--ax-navy-900) !important; }

.ax-cap {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-e1);
    backdrop-filter: none;
}
.ax-cap:hover {
    background: var(--ax-white);
    border-color: rgba(0,217,220,.45);
    box-shadow: var(--ax-e3);
}
.ax-cap__icon { background: var(--ax-cyan-100); color: var(--ax-navy-700); }
.ax-cap__title { color: var(--ax-navy-900) !important; }
.ax-cap__text  { color: var(--ax-ink-soft); }
.ax-cap__arrow { color: var(--ax-line); }

/* Contact -> dark, white type */
.contact2,
.h-contact-block {
    background-color: var(--ax-navy-900) !important;
    background-image:
        radial-gradient(760px 380px at 85% -10%, rgba(0,217,220,.16) 0%, transparent 62%) !important;
}
.contact2 .hadding2-w h1,
.contact2 .hadding2-w h2,
.contact2 .hadding2-w h3,
.h-contact-block .hadding2-w h3 { color: var(--ax-white) !important; }
.contact2 .hadding2-w .after2,
.h-contact-block .hadding2-w .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-cyan-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.contact2 > .container p,
.h-contact-block > .container p,
.contact2 .hadding2-w p { color: rgba(255,255,255,.76) !important; }

/* Contact cards sit as light tiles on the dark surface */
.contact2 .contact2-single {
    background: rgba(255,255,255,.96);
    border-color: transparent;
}

/* Enquiry panel: lighter than the section so it still reads as a card */
.contact2 .right-enquire-now {
    background: linear-gradient(135deg, var(--ax-navy-700), var(--ax-navy-600));
    border: 1px solid rgba(255,255,255,.12);
}

/* ==========================================================================
   FAQ — single column (no grid), compact
   ========================================================================== */

.faqblock_home .bd_block .accordion {
    display: block;
    max-width: 820px;
    margin-inline: auto;
    column-gap: 0;
}
.faqblock_home .accordion-item.accordion_row { margin-bottom: 8px !important; }

/* ==========================================================================
   Get In Touch — layout, alignment and spacing
   Heading was centred inside a half-width column, which unbalanced the row.
   ========================================================================== */

.contact2.h-contact-block { padding: var(--ax-sp-section) 0 !important; }

/* Left column reads left-aligned against the action panel on the right */
.contact2 .hadding2-w {
    text-align: left !important;
    margin-bottom: 0 !important;
    max-width: 30ch;
}
.contact2 .hadding2-w h3 {
    text-align: left !important;
    margin: 0 0 16px !important;
    max-width: none;
    font-size: clamp(2.2rem, 3.6vw, 3.1rem) !important;
    line-height: 1.06 !important;
}
.contact2 .hadding2-w p {
    text-align: left !important;
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    max-width: 44ch;
}
/* Theme spacers were adding dead height between heading and cards */
.contact2 .space10,
.contact2 .space24,
.contact2 .space40,
.contact2 .space50,
.contact2 .space60 { height: 0 !important; }

/* Rows share one vertical centre, then a measured gap before the cards */
.contact2 > .container > .row { align-items: center; row-gap: 32px; }
.contact2 .contact2-contacts { margin-top: 52px; }

/* --- Action panel (click now + socials) -------------------------------- */
.contact2 .right-enquire-now {
    padding: 26px 30px !important;
    border-radius: var(--ax-r-lg);
}
.contact2 .right-enquire-now .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}
/* superseded: see "Enquiry panel" below */

.contact2 .social-icon ul {
    display: flex; align-items: center; gap: 10px;
    list-style: none; margin: 0; padding: 0;
}
.contact2 .social-icon ul li a {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--ax-white) !important;
    font-size: .92rem;
    transition: background var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease),
                transform var(--ax-dur-sm) var(--ax-ease);
}
.contact2 .social-icon ul li a:hover {
    background: var(--ax-cyan-500);
    color: var(--ax-navy-900) !important;
    transform: translateY(-2px);
}

/* --- Contact cards: equal height, consistent rhythm --------------------- */
.contact2 .contact2-contacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ax-gap);
}
.contact2 .contact2-single {
    display: flex !important;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 86px;
    margin: 0 !important;
    padding: 18px 20px !important;
    border-radius: var(--ax-r-md);
}
.contact2 .contact2-single .contact2-icon-hadding a,
.contact2 .contact2-single .contact2-icon-hadding p {
    font-size: .95rem !important;
    line-height: 1.4 !important;
}

@media (max-width: 991px) {
    .contact2 .contact2-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 38px; }
    .contact2 .hadding2-w { max-width: none; }
    .contact2 .right-enquire-now .item { justify-content: flex-start; }
}
@media (max-width: 575px) {
    .contact2 .contact2-contacts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   How we work — process rail
   A single hairline runs through three nodes. No card chrome: numerals,
   whitespace and the rail carry the structure.
   ========================================================================== */

.ax-work__process { margin-bottom: var(--ax-sp-block); }

.ax-flow {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
    position: relative;
}

/* The continuous rail, drawn behind the nodes */
.ax-flow::before {
    content: "";
    position: absolute;
    top: 7px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--ax-cyan-500) 0%,
        var(--ax-line) 55%,
        var(--ax-line) 100%);
}

.ax-flow__step { position: relative; padding-top: 42px; }

.ax-flow__node {
    position: absolute;
    top: 0; left: 0;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--ax-white);
    border: 2px solid var(--ax-cyan-500);
    box-shadow: 0 0 0 5px rgba(0,217,220,.12);
    transition: background var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.ax-flow__step:hover .ax-flow__node {
    background: var(--ax-cyan-500);
    box-shadow: 0 0 0 8px rgba(0,217,220,.18);
}

.ax-flow__num {
    display: block;
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: -.045em;
    background: linear-gradient(140deg, var(--ax-cyan-500), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}

.ax-flow__title {
    font-family: var(--ax-font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
    letter-spacing: -.022em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 0 10px !important;
}
.ax-flow__text {
    font-size: .97rem !important;
    line-height: 1.68 !important;
    color: var(--ax-ink-soft) !important;
    margin: 0 !important;
    max-width: 32ch;
}

@media (max-width: 991px) {
    .ax-flow { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
    .ax-flow::before {
        top: 0; bottom: 0; left: 7px;
        right: auto; width: 1px; height: auto;
        background: linear-gradient(180deg, var(--ax-cyan-500) 0%, var(--ax-line) 70%);
    }
    .ax-flow__step { padding: 0 0 34px 38px; }
    .ax-flow__step:last-child { padding-bottom: 0; }
    .ax-flow__node { top: 6px; }
    .ax-flow__num { font-size: 2.3rem; margin-bottom: 8px; }
    .ax-flow__text { max-width: none; }
}

/* ==========================================================================
   Metrics — editorial figures, not a slab
   Fixes the split rendering: the theme sets `.counter span { font-size:40px }`
   and `.counter` kept its own size, so only the trailing "+" scaled up and
   the number wrapped onto a separate line.
   ========================================================================== */

.ax-work__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--ax-line);
    border-bottom: 1px solid var(--ax-line);
    border-radius: 0 !important;
    padding: 40px 0 !important;
    margin-bottom: var(--ax-sp-block);
    box-shadow: none !important;
}

.ax-work__metric {
    text-align: center;
    padding: 0 24px;
}
.ax-work__metric + .ax-work__metric {
    border-left: 1px solid var(--ax-line);
}

/* One inline run: number and "+" share a baseline and never wrap */
.ax-work__metric strong {
    display: block;
    white-space: nowrap;
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
    line-height: 1 !important;
    letter-spacing: -.04em;
    background: linear-gradient(140deg, var(--ax-cyan-500), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Force the counter span to inherit rather than keep the theme's 40px */
.ax-work__metric strong .counter,
.ax-work__metric strong .counter span,
.ax-work__metric strong span {
    display: inline !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    vertical-align: baseline !important;
}

.ax-work__metric span:not(.counter) {
    display: block;
    margin-top: 12px;
    font-family: var(--ax-font-sans) !important;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ax-ink-soft);
}

@media (max-width: 767px) {
    .ax-work__metrics { padding: 28px 0 !important; }
    .ax-work__metric { padding: 0 10px; }
    .ax-work__metric span:not(.counter) { font-size: .62rem; letter-spacing: .10em; }
}

/* ==========================================================================
   How we work — merged with the figure above
   Metrics + process now live in one elevated panel that overlaps the image,
   so the two blocks read as a single composition instead of flat stacked rows.
   ========================================================================== */

.ax-work__figure {
    margin-bottom: 0 !important;
    border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
    box-shadow: none;
}
.ax-work__figure img {
    border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
    max-height: 420px;
    object-fit: cover;
    object-position: center 30%;
}

.ax-work__panel {
    position: relative;
    z-index: 2;
    width: calc(100% - 96px);
    margin: -72px auto var(--ax-sp-block);
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-lg);
    box-shadow: var(--ax-e4);
    padding: 12px 48px 48px;
}

/* Metrics sit at the top of the panel, divided from the process below */
.ax-work__panel .ax-work__metrics {
    border-top: 0;
    border-bottom: 1px solid var(--ax-line);
    padding: 34px 0 32px !important;
    margin-bottom: 44px;
}

.ax-work__panel .ax-work__process { margin-bottom: 0; }
.ax-work__panel .ax-work__subtitle {
    text-align: left;
    font-size: 1.32rem !important;
    margin-bottom: 34px !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
/* Small rule beside the sub-heading ties it to the rail language */
.ax-work__panel .ax-work__subtitle::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ax-line);
}

@media (max-width: 1199px) {
    .ax-work__panel { width: calc(100% - 48px); padding: 10px 32px 40px; }
}
@media (max-width: 991px) {
    .ax-work__figure img { max-height: 300px; }
    .ax-work__panel {
        width: 100%;
        margin: -40px auto var(--ax-sp-block);
        padding: 8px 24px 32px;
    }
    .ax-work__panel .ax-work__metrics { margin-bottom: 34px; }
}
@media (max-width: 575px) {
    .ax-work__panel { margin-top: -24px; padding: 8px 18px 28px; }
    .ax-work__panel .ax-work__subtitle { font-size: 1.15rem !important; }
}

/* ==========================================================================
   BLUE — a second accent beside the cyan, so the palette reads richer
   ========================================================================== */

:root {
    --ax-blue-600: #1552b8;
    --ax-blue-500: #1e6fd9;
    --ax-blue-400: #3f8ef0;
    --ax-blue-100: #e3efff;

    /* Cyan -> blue, the new signature sweep */
    --ax-grad-accent: linear-gradient(120deg, var(--ax-cyan-500) 0%, var(--ax-blue-500) 100%);
    --ax-grad-ink:    linear-gradient(120deg, var(--ax-cyan-600) 0%, var(--ax-blue-600) 92%);
}

/* Headline highlights pick up the blue end of the sweep */
.ax-svc__heading .after2,
.ax-work__title .after2,
.ax-caps__title .after2,
.hadding2-w .after2,
.ax-reels-section .hadding2-w .after2 {
    background: var(--ax-grad-ink) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Numerals, nodes and rails */
.ax-flow__num,
.ax-work__metric strong { background: var(--ax-grad-ink) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ax-apart__num { color: var(--ax-blue-500) !important; }
.ax-flow::before { background: linear-gradient(90deg, var(--ax-cyan-500) 0%, var(--ax-blue-400) 38%, var(--ax-line) 78%); }
.ax-flow__node { border-color: var(--ax-blue-500); box-shadow: 0 0 0 5px rgba(30,111,217,.12); }
.ax-flow__step:hover .ax-flow__node { background: var(--ax-blue-500); box-shadow: 0 0 0 8px rgba(30,111,217,.18); }

/* Icon tiles and small accents */
.ax-cap__icon { background: var(--ax-blue-100); color: var(--ax-blue-600); }
.ax-cap:hover .ax-cap__icon { background: var(--ax-grad-accent); color: var(--ax-white); }
.ax-cap__tag, .ax-svc__list li::before { background: var(--ax-grad-accent); }
.ax-caps__eyebrow::before { background: var(--ax-grad-accent); }

/* Section washes gain a blue note */
.ax-svc {
    background:
        radial-gradient(700px 340px at 88% -8%, var(--ax-blue-100) 0%, transparent 58%),
        var(--ax-paper) !important;
}
.ax-work {
    background:
        radial-gradient(760px 360px at 8% -6%, var(--ax-cyan-100) 0%, transparent 54%),
        radial-gradient(620px 320px at 96% 12%, var(--ax-blue-100) 0%, transparent 58%),
        var(--ax-white) !important;
}
.ax-caps {
    background:
        radial-gradient(640px 320px at 12% 0%, var(--ax-blue-100) 0%, transparent 60%),
        var(--ax-paper) !important;
}

/* Buttons keep cyan but close on blue */
.ax-btn--filled { background: var(--ax-grad-accent); color: var(--ax-white); }
.ax-btn--filled:hover { color: var(--ax-white); }

/* ==========================================================================
   What sets us apart — alignment + rhythm fix
   The numerals were sitting outside the content box.
   ========================================================================== */

.ax-work__benefits {
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: 8px;
}
.ax-apart { column-gap: 64px; }

.ax-apart__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 0 16px;
    padding: 24px 0;
}
.ax-apart__num {
    padding-top: .18em;
    font-size: .8rem;
    letter-spacing: .08em;
}
.ax-apart__body { min-width: 0; }
.ax-apart__title { font-size: 1.14rem !important; margin-bottom: 4px !important; }
.ax-apart__text  { font-size: .94rem !important; }

/* Typographic polish on the new display face */
.ax-svc__heading, .ax-work__title, .ax-caps__title,
.faqblock_home .title h3, .hadding2-w h1, .hadding2-w h2, .hadding2-w h3 {
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
}
.ax-flow__title, .ax-apart__title, .ax-cap__title, .ax-svc__title {
    letter-spacing: -.024em !important;
}

/* ==========================================================================
   FAQ — sleek icon + category filters
   The filled +/- circle was heavy; a hairline chevron reads far cleaner.
   ========================================================================== */

.ax-faq__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 820px;
    margin: 0 auto 28px;
}
.ax-faq__chip {
    font-family: var(--ax-font-sans);
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ax-ink-soft);
    background: transparent;
    border: 1px solid var(--ax-line);
    border-radius: 100px;
    padding: 9px 18px;
    cursor: pointer;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.ax-faq__chip:hover { color: var(--ax-navy-900); border-color: var(--ax-blue-400); }
.ax-faq__chip.is-active {
    color: var(--ax-white);
    background: var(--ax-grad-accent);
    border-color: transparent;
}
.ax-faq__chip:focus-visible { outline: 2px solid var(--ax-blue-500); outline-offset: 3px; }

.faqblock_home .accordion-item.accordion_row[hidden] { display: none !important; }

/* --- Sleek marker ------------------------------------------------------- */
.faqblock_home .accordion-button::after {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
    background: transparent !important;
    border: 0 !important;
    border-right: 1.8px solid var(--ax-ink-soft) !important;
    border-bottom: 1.8px solid var(--ax-ink-soft) !important;
    border-radius: 1px !important;
    transform: rotate(45deg) translate(-2px, -2px) !important;
    transition: transform var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease);
}
.faqblock_home .accordion-button:not(.collapsed)::after {
    transform: rotate(225deg) translate(-2px, -2px) !important;
    border-right-color: var(--ax-blue-500) !important;
    border-bottom-color: var(--ax-blue-500) !important;
}

.faqblock_home .accordion-item.accordion_row {
    border-radius: var(--ax-r-sm) !important;
    margin-bottom: 8px !important;
}
.faqblock_home .accordion-button {
    align-items: center;
    padding: 16px 20px !important;
}
.faqblock_home .accordion-button:not(.collapsed) { color: var(--ax-blue-600) !important; }
.faqblock_home .accordion-body { padding: 0 20px 18px !important; }

/* ==========================================================================
   Blog — title only, no excerpt
   ========================================================================== */

.h-blog-section .item p:not(.date2) { display: none !important; }
.h-blog-section .item-col,
.h-blog-section .item_right { padding: 18px 20px 20px !important; }
.h-blog-section h4, .h-blog-section h3 { margin: 0 0 6px !important; }

/* ==========================================================================
   FIX — gradient text rendered as solid blocks
   `background: <grad> !important` is a shorthand: it also sets
   background-clip to border-box AT IMPORTANT PRIORITY, which beat the
   non-important `background-clip: text` that followed. The gradient then
   painted the whole box while the text stayed transparent.
   Clip must therefore also be !important.
   ========================================================================== */

.ax-flow__num,
.ax-work__metric strong,
.ax-hero__trust strong,
.ax-reel__avatar,
.counter2-box .counter,
.counter2-box h2,
.ax-hero__title .after2,
.ax-svc__heading .after2,
.ax-work__title .after2,
.ax-caps__title .after2,
.ax-reels-section .hadding2-w .after2,
.contact2 .hadding2-w .after2,
.hadding2-w .after2 {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* The avatar chip needs a painted surface, not clipped text */
.ax-reel__avatar {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--ax-navy-900) !important;
    color: var(--ax-navy-900) !important;
}

/* ==========================================================================
   What sets us apart — icons instead of numerals
   ========================================================================== */

.ax-apart__item { grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px; }

.ax-apart__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--ax-blue-100);
    color: var(--ax-blue-600);
    font-size: 1rem;
    transition: background var(--ax-dur-md) var(--ax-ease),
                color var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-apart__item:hover .ax-apart__icon {
    background: var(--ax-grad-accent);
    color: var(--ax-white);
    transform: translateY(-2px);
}
.ax-apart__item { align-items: center; }

/* ==========================================================================
   Industries We Serve  (dark band: sits between services(P) and work(W))
   ========================================================================== */

.ax-ind {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--ax-sp-section) 0;
    background: var(--ax-navy-900);
    font-family: var(--ax-font-sans);
}
.ax-ind__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(760px 380px at 85% -8%, rgba(30,111,217,.26) 0%, transparent 62%),
        radial-gradient(620px 320px at 8% 100%, rgba(0,217,220,.16) 0%, transparent 60%);
}

.ax-ind__head { max-width: 760px; margin: 0 auto var(--ax-sp-head); text-align: center; }

.ax-caps__eyebrow--dark {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: var(--ax-cyan-300) !important;
    box-shadow: none !important;
}

.ax-ind__title {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    color: var(--ax-white) !important;
    margin: 0 auto 16px !important;
    max-width: 20ch;
}
.ax-ind__title .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-blue-400)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ax-ind__intro {
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255,255,255,.70);
    margin: 0 auto;
    max-width: 58ch;
}

.ax-ind__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ax-gap);
}

.ax-ind__card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--ax-r-md);
    padding: 28px 24px 26px;
    transition: background var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-ind__card:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(0,217,220,.42);
    transform: translateY(-5px);
}

.ax-ind__icon {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(0,217,220,.14);
    color: var(--ax-cyan-300);
    font-size: 1.02rem;
    margin-bottom: 18px;
    transition: background var(--ax-dur-md) var(--ax-ease), color var(--ax-dur-md) var(--ax-ease);
}
.ax-ind__card:hover .ax-ind__icon {
    background: var(--ax-grad-accent);
    color: var(--ax-white);
}

.ax-ind__name {
    font-family: var(--ax-font-display) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.26 !important;
    letter-spacing: -.02em !important;
    color: var(--ax-white) !important;
    margin: 0 0 9px !important;
}
.ax-ind__text {
    font-size: .89rem !important;
    line-height: 1.62 !important;
    color: rgba(255,255,255,.64) !important;
    margin: 0 !important;
}

@media (max-width: 1199px) { .ax-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .ax-ind__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   How we work — centre the sub-heading and rail
   ========================================================================== */

.ax-work__panel .ax-work__subtitle {
    justify-content: center;
    text-align: center;
}
/* Rules either side of the centred label */
.ax-work__panel .ax-work__subtitle::before,
.ax-work__panel .ax-work__subtitle::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ax-line);
}
.ax-flow__step { text-align: center; }
.ax-flow__node { left: 50%; transform: translateX(-50%); }
.ax-flow__text { margin-inline: auto !important; }

@media (max-width: 991px) {
    .ax-flow__step { text-align: left; }
    .ax-flow__node { left: 0; transform: none; }
    .ax-flow__text { margin-inline: 0 !important; }
}

/* ==========================================================================
   Footer — remove the white strip, tighten the whole block
   ========================================================================== */

/* The strip is a light band on the footer wrapper / its first child. */
footer,
footer > div,
footer .footer4,
footer .footer-top,
footer .footer-bottom,
footer .copyright2,
.footer4, .footer-area {
    background-image: none !important;
}
footer,
.footer4,
.footer-area { background-color: var(--ax-navy-900) !important; }

/* Any inner band that was painted white/light goes dark */
footer > div:first-child,
footer .footer-top,
footer .single-footer4,
footer .footer4-contact-info {
    background-color: transparent !important;
}

/* Divider above the copyright line: hairline, not a white block */
footer .copyright2 {
    border-top: 1px solid rgba(255,255,255,.10) !important;
    margin-top: 28px;
    padding-top: 22px;
    background: transparent !important;
}
footer .copyright-p {
    font-size: .86rem !important;
    color: rgba(255,255,255,.58) !important;
    margin: 0 !important;
}

/* Kill stray light pseudo-element strips */
footer::before, footer::after,
.footer4::before, .footer4::after,
footer .container::before, footer .container::after { display: none !important; }

/* Headings + links */
footer h2, footer h3, footer h4 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: -.02em !important;
    color: var(--ax-white) !important;
    margin-bottom: 16px !important;
}
footer p, footer li, footer a, footer span {
    font-family: var(--ax-font-sans) !important;
    font-size: .92rem !important;
    color: rgba(255,255,255,.66) !important;
}
footer a:hover { color: var(--ax-cyan-400) !important; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 9px; }

/* ==========================================================================
   FIX — AOS leaving content invisible
   `fade-right` holds an element translated and at opacity 0 until AOS fires.
   When it doesn't (instant scroll, element already in view, refresh timing),
   the content simply never appears. Safety net: these sections always render.
   ========================================================================== */

.contact2 [data-aos],
.ax-ind [data-aos],
.ax-work [data-aos],
.ax-svc [data-aos],
.faqblock_home [data-aos],
.ax-caps [data-aos],
.ax-reels-section [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* Contact heading had too tight a measure for its column */
.contact2 .hadding2-w { max-width: 470px; }
.contact2 .hadding2-w h3 { max-width: 100%; }

/* ==========================================================================
   FIX — contact cards collapsing
   The theme constrains .contact2-single's width, so cards sat at 66px inside
   264px grid cells and the text wrapped one character per line. Force the
   card to fill its cell and let the text block actually take the space.
   ========================================================================== */

.contact2 .contact2-contacts > * { min-width: 0; }

.contact2 .contact2-single {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    justify-self: stretch;
    align-items: center !important;
    min-height: 84px;
}

.contact2 .contact2-single .contact2-icon {
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
}

.contact2 .contact2-single .contact2-icon-hadding {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

.contact2 .contact2-single .contact2-icon-hadding a,
.contact2 .contact2-single .contact2-icon-hadding p {
    display: block !important;
    width: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Header — fixed from first paint, premium surface
   `.header-height` is the spacer that reserves room for the fixed bar; it was
   painting a visible grey block. It must be transparent and match the bar.
   ========================================================================== */

.header-area.header-area-all {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(3, 18, 44, .07);
    box-shadow: none;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease),
                background var(--ax-dur-md) var(--ax-ease);
}
/* Elevation appears only once the page has moved */
.header-area.header-area-all.ax-scrolled {
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 1px 3px rgba(3,18,44,.10), 0 6px 20px rgba(3,18,44,.06);
}

.header-height {
    background: transparent !important;
    background-color: transparent !important;
    height: 93px !important;
}

/* --- Menu links --------------------------------------------------------- */
/* Underline sweep */
/* Dropdown caret: lighter, animates on hover */
/* Logo breathing room */
.home1-site-logo img { max-height: 54px; width: auto; }

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
}

/* ==========================================================================
   Enquiry panel — was an empty blue slab with a lone button
   ========================================================================== */

.contact2 .right-enquire-now {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: var(--ax-r-lg);
    padding: 34px 34px 30px !important;
    box-shadow: none;
}
.contact2 .right-enquire-now .item {
    display: block;
    text-align: left;
}
.ax-enq__title {
    font-family: var(--ax-font-display) !important;
    font-size: 1.32rem !important;
    font-weight: 800 !important;
    letter-spacing: -.022em !important;
    line-height: 1.22 !important;
    color: var(--ax-white) !important;
    margin: 0 0 8px !important;
}
.ax-enq__text {
    font-size: .95rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.66) !important;
    margin: 0 0 22px !important;
    max-width: 38ch;
}
.contact2 .right-enquire-now .button { margin: 0 0 24px; }
.contact2 .right-enquire-now .button a {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ax-grad-accent) !important;
    color: var(--ax-white) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    border-radius: 100px;
    padding: 15px 30px !important;
    box-shadow: 0 12px 28px rgba(30,111,217,.30);
    transition: transform var(--ax-dur-sm) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.contact2 .right-enquire-now .button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(30,111,217,.38);
    color: var(--ax-white) !important;
}
/* Socials sit under a hairline, not floating beside the button */
.contact2 .social-icon {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 20px;
}
.contact2 .social-icon ul { gap: 10px; }
.contact2 .social-icon ul li a { width: 38px; height: 38px; }

/* ==========================================================================
   FIX — enquiry button
   The theme rule `.h-contact-block .right-enquire-now .item .button a` is
   more specific than ours and carried `animation: 1.5s infinite glowing`,
   which cycled the button to solid white (hiding the white label) and was
   the last perpetual animation on the page. Match its specificity and stop it.
   ========================================================================== */

.contact2.h-contact-block .right-enquire-now .item .button a,
.h-contact-block .right-enquire-now .item .button a {
    animation: none !important;
    background-color: transparent !important;
    background-image: var(--ax-grad-accent) !important;
    color: var(--ax-white) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 15px 30px !important;
    border-radius: 100px !important;
    box-shadow: 0 12px 28px rgba(30,111,217,.30) !important;
    text-transform: none !important;
    transition: transform var(--ax-dur-sm) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease) !important;
}
.h-contact-block .right-enquire-now .item .button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(30,111,217,.40) !important;
}

/* Social icons: match the card's hairline language */
.contact2.h-contact-block .right-enquire-now .item .social-icon ul li a,
.h-contact-block .right-enquire-now .item .social-icon ul li a {
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.08) !important;
    width: 38px !important; height: 38px !important;
    font-size: .92rem !important;
    transition: background var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease),
                transform var(--ax-dur-sm) var(--ax-ease);
}
.h-contact-block .right-enquire-now .item .social-icon ul li a:hover {
    background: var(--ax-cyan-500) !important;
    color: var(--ax-navy-900) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Header menu — correct structure
   `.main-menu-ex` is a DIV wrapping a UL, so links are
   `.main-menu-ex > ul > li > a` (not `.main-menu-ex > li > a`).
   `li.dropdown-menu-parrent` is the PARENT ITEM; its flyout is its child UL.
   ========================================================================== */

.header-area-all .main-menu-ex > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-area-all .main-menu-ex > ul > li { position: relative; margin: 0 13px; }

.header-area-all .main-menu-ex > ul > li > a {
    position: relative;
    display: inline-block;
    font-family: var(--ax-font-sans) !important;
    font-size: .94rem !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    padding: 8px 0 !important;
    transition: color var(--ax-dur-sm) var(--ax-ease);
}
/* Underline sweep */
.header-area-all .main-menu-ex > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: var(--ax-grad-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.header-area-all .main-menu-ex > ul > li:hover > a::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- At rest (over the hero): white ------------------------------------ */
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a i,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a span {
    color: #ffffff !important;
}
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-cyan-300) !important;
}

/* --- Scrolled: navy on white ------------------------------------------- */
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a span {
    color: var(--ax-navy-900) !important;
}
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-blue-600) !important;
}

/* Caret rotates on open */
.header-area-all .main-menu-ex > ul > li > a i { transition: transform var(--ax-dur-sm) var(--ax-ease); }
.header-area-all .main-menu-ex > ul > li:hover > a i { transform: rotate(180deg); }

/* Flyout panel = the child UL of the parent item. Colours only — position,
   display and visibility stay with the theme so the menu keeps working. */
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a {
    font-family: var(--ax-font-sans) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--ax-ink) !important;
}
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a:hover {
    color: var(--ax-blue-600) !important;
}

/* ==========================================================================
   Header — solid white at all times (transparent treatment reverted)
   ========================================================================== */

.header-height {
    height: 93px !important;
    background: transparent !important;   /* spacer only; was painting grey */
}

.ax-hero { padding-top: 84px !important; }

.header-area.header-area-all {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #ffffff !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(3, 18, 44, .07);
    transition: box-shadow var(--ax-dur-md) var(--ax-ease);
}
/* Elevation once the page moves; background stays white throughout */
.header-area.header-area-all.ax-scrolled {
    box-shadow: 0 1px 3px rgba(3,18,44,.10), 0 6px 20px rgba(3,18,44,.06);
}

/* Logo always full colour */
.header-area.header-area-all .home1-site-logo img { filter: none !important; }

/* Links navy in both states */
.header-area-all .main-menu-ex > ul > li > a,
.header-area-all .main-menu-ex > ul > li > a i,
.header-area-all .main-menu-ex > ul > li > a span,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a i {
    color: var(--ax-navy-900) !important;
}
.header-area-all .main-menu-ex > ul > li:hover > a,
.header-area-all .main-menu-ex > ul > li:hover > a i,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-blue-600) !important;
}

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
    .ax-hero { padding-top: 56px !important; }
}

/* ==========================================================================
   Header — height consistency + nav typography
   The bar measured 75px while its spacer reserved 93px, leaving an 18px
   white strip above the hero. Both are now driven by one token.
   ========================================================================== */

:root { --ax-header-h: 84px; }

.header-area.header-area-all {
    min-height: var(--ax-header-h);
    display: flex;
    align-items: center;
}
.header-area.header-area-all > * { width: 100%; }
.header-area.header-area-all .header-elements { min-height: auto; }

/* Spacer matches the bar exactly — no gap, no overlap */
.header-height { height: var(--ax-header-h) !important; }

/* Hero sits flush beneath it */
.ax-hero { padding-top: 76px !important; }

/* --- Nav typography ----------------------------------------------------- */
.header-area-all .main-menu-ex > ul { gap: 4px; }
.header-area-all .main-menu-ex > ul > li { margin: 0 !important; }

.header-area-all .main-menu-ex > ul > li > a {
    font-family: var(--ax-font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;       /* 700 read heavy at nav size */
    letter-spacing: 0 !important;      /* negative tracking hurt legibility */
    line-height: 1.2 !important;
    padding: 10px 15px !important;
    border-radius: 8px;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
/* Subtle hover surface, with the underline inset to match the padding */
.header-area-all .main-menu-ex > ul > li > a:hover { background: rgba(21,82,184,.06); }
.header-area-all .main-menu-ex > ul > li > a::before {
    left: 15px;
    right: 15px;
    width: auto;
    bottom: 4px;
}

.header-area-all .main-menu-ex > ul > li > a i {
    font-size: 11px !important;
    margin-left: 5px;
    opacity: .6;
}

/* Logo scaled to the new bar height */
.header-area.header-area-all .home1-site-logo img {
    max-height: 48px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
    .ax-hero { padding-top: 56px !important; }
}

/* ==========================================================================
   Clients intro — sits above the logo strip, shares its paper surface
   ========================================================================== */

.ax-clients {
    background: var(--ax-paper);
    padding: 72px 0 8px;
    font-family: var(--ax-font-sans);
}
.ax-clients__head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.ax-clients__title {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(1.9rem, 3vw, 2.65rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.032em !important;
    color: var(--ax-navy-900) !important;
    margin: 14px auto 14px !important;
    max-width: 18ch;
}
.ax-clients__title .after2 {
    display: inline;
    background: var(--ax-grad-ink) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ax-clients__text {
    font-size: 1.02rem !important;
    line-height: 1.72 !important;
    color: var(--ax-ink-soft) !important;
    margin: 0 auto !important;
    max-width: 62ch;
}

/* Logo strip tightens up beneath it */
.brand4.brand-slider-logo,
.brand-logo-section, .brand2 {
    background: var(--ax-paper) !important;
    padding: 28px 0 48px !important;
}

@media (max-width: 767px) {
    .ax-clients { padding: 52px 0 4px; }
    .ax-clients__title { max-width: 100%; }
}

/* Clients intro without a heading: eyebrow sits directly above the copy */
.ax-clients__head .ax-caps__eyebrow { margin-bottom: 18px; }
.ax-clients__text { font-size: 1.06rem !important; max-width: 58ch; }

/* ==========================================================================
   Header + footer type, aligned to the PiPO HRIS system
   Reference (pipohris.co.ke): Plus Jakarta Sans throughout; nav ~15px / 560;
   footer column labels 10.9px / 500 / .15em uppercase; footer links 15.6px /
   400 / 1.65 at 66% white. Accurex keeps its own navy+cyan palette.
   ========================================================================== */

/* --- Header nav --------------------------------------------------------- */
.header-area-all .main-menu-ex > ul > li > a {
    font-family: var(--ax-font-display) !important;   /* Plus Jakarta Sans */
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a {
    font-family: var(--ax-font-display) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
}

/* --- Footer blocks ------------------------------------------------------ */
footer,
.footer4,
.footer-area {
    padding-top: 44px !important;
    color: rgba(255, 255, 255, .66) !important;
}

/* Column labels: small, tracked out, uppercase — not bold headings */
footer h2,
footer h3,
footer h4,
footer h5,
.single-footer h3,
.single-footer4 h3,
.single-footer-menu h3 {
    font-family: var(--ax-font-display) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, .92) !important;
    margin: 0 0 18px !important;
}

/* Links: comfortable reading size at normal weight */
footer a,
footer li,
footer p,
footer span,
.single-footer-menu li a,
.footer4-contact-info a {
    font-family: var(--ax-font-display) !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    color: rgba(255, 255, 255, .66) !important;
}
footer a { transition: color var(--ax-dur-sm) var(--ax-ease); }
footer a:hover { color: #ffffff !important; }

footer li { margin-bottom: 4px !important; }
footer ul { list-style: none; margin: 0; padding: 0; }

/* Copyright strip */
footer .copyright2 {
    border-top: 1px solid rgba(255,255,255,.10) !important;
    margin-top: 34px;
    padding: 20px 0 !important;
}
footer .copyright-p,
footer .copyright2 a {
    font-size: 14px !important;
    color: rgba(255,255,255,.52) !important;
}

/* ==========================================================================
   Header height — authoritative
   Theme conflicts this overrides:
     header .header-height { height: 82px; background:#fff !important }
     .header-area { padding: 10px 0 }
     .header-area-all.sticky { animation: fade-in-down 1s;
                               box-shadow: 0 -16px 26px rgba(0,0,0,.5) }
   Selectors below match or exceed the theme's specificity.
   ========================================================================== */

:root { --ax-header-h: 84px; }

/* Bar: one fixed height, no theme padding, contents vertically centred */
.header-area.header-area-all,
.header-area.header-area-all.sticky,
.header-area.header-area-all.sticky2 {
    height: var(--ax-header-h) !important;
    min-height: var(--ax-header-h) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    animation: none !important;          /* kills fade-in-down on every scroll */
    box-shadow: none !important;         /* kills the heavy upward dark shadow */
    border-bottom: 1px solid rgba(3, 18, 44, .07);
    transition: box-shadow var(--ax-dur-md) var(--ax-ease);
}
.header-area.header-area-all.ax-scrolled {
    box-shadow: 0 1px 3px rgba(3,18,44,.08), 0 6px 20px rgba(3,18,44,.05) !important;
}
.header-area.header-area-all > .container,
.header-area.header-area-all > div { width: 100%; }
.header-area.header-area-all .header-elements {
    min-height: auto !important;
    padding: 0 !important;
}

/* Spacer: matches the bar exactly, and transparent (theme forced #fff) */
header .header-height,
.header-height {
    height: var(--ax-header-h) !important;
    min-height: var(--ax-header-h) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero sits directly beneath */
.ax-hero { padding-top: 76px !important; }

@media (max-width: 991px) {
    header .header-height,
    .header-height { height: 0 !important; min-height: 0 !important; }
    .ax-hero { padding-top: 56px !important; }
}

/* ==========================================================================
   What sets us apart — gradient icons by default, tighter bottom space
   ========================================================================== */

/* Gradient tile is now the resting state, not the hover state */
.ax-apart__icon {
    background: var(--ax-grad-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(30,111,217,.22);
}
.ax-apart__icon i { color: #ffffff !important; }

/* Hover becomes a subtle lift instead of a colour change */
.ax-apart__item:hover .ax-apart__icon {
    background: var(--ax-grad-accent) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(30,111,217,.30);
}

/* No stray list markers */
.ax-apart,
.ax-apart__item { list-style: none !important; }
.ax-apart__item::marker { content: none; }

/* --- Close the gap under the section ------------------------------------ */
.ax-work { padding-bottom: 56px !important; }
.ax-work__benefits { margin-bottom: 0 !important; }
.ax-apart__item:nth-last-child(1),
.ax-apart__item:nth-last-child(2) { padding-bottom: 0 !important; }
.ax-work .space40, .ax-work .space50,
.ax-work .space60, .ax-work .space70,
.ax-work .space80, .ax-work .space90, .ax-work .space100 { height: 0 !important; }

@media (max-width: 767px) {
    .ax-work { padding-bottom: 40px !important; }
    .ax-apart__item:nth-last-child(2) { padding-bottom: 20px !important; }
}

/* ==========================================================================
   Dropdown menus — sleek
   Only colour, type and spacing are touched. Positioning, display,
   visibility and transform stay with the theme so the flyouts keep working.
   ========================================================================== */

/* Panel surface */
.header-area-all .main-menu-ex > ul > li > ul {
    background: #ffffff !important;
    border: 1px solid rgba(3, 18, 44, .08) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px rgba(3, 18, 44, .13),
                0 2px 6px rgba(3, 18, 44, .06) !important;
    padding: 8px !important;
    min-width: 268px;
}

/* Items */
.header-area-all .main-menu-ex > ul > li > ul > li {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.header-area-all .main-menu-ex > ul > li > ul > li > a {
    display: block !important;
    font-family: var(--ax-font-display) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    color: var(--ax-ink) !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    padding: 9px 14px !important;
    margin: 1px 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    text-transform: none !important;
    transition: background-color var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease);
}

/* Hover / focus / active: soft tint, never a solid cyan slab */
.header-area-all .main-menu-ex > ul > li > ul > li > a:hover,
.header-area-all .main-menu-ex > ul > li > ul > li > a:focus,
.header-area-all .main-menu-ex > ul > li > ul > li.active > a,
.header-area-all .main-menu-ex > ul > li > ul > li:first-child > a:hover {
    background: rgba(21, 82, 184, .07) !important;
    background-image: none !important;
    background-color: rgba(21, 82, 184, .07) !important;
    color: var(--ax-blue-600) !important;
}

/* Kill any inherited solid fill on the item itself */
.header-area-all .main-menu-ex > ul > li > ul > li:hover,
.header-area-all .main-menu-ex > ul > li > ul > li:first-child,
.header-area-all .main-menu-ex > ul > li > ul > li.active {
    background: transparent !important;
    background-image: none !important;
}

/* Nested third level, if any */
.header-area-all .main-menu-ex > ul > li > ul > li > ul {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px rgba(3,18,44,.13) !important;
    padding: 8px !important;
}

/* ==========================================================================
   EVENTS PAGE
   Same system as the homepage: navy/cyan palette, Plus Jakarta Sans display,
   Material elevation, short motion. Scoped to events-only classes so none of
   this leaks back onto other pages.
   ========================================================================== */

/* --- Page hero ---------------------------------------------------------- */
.accurex-inner-banner {
    position: relative;
    isolation: isolate;
    padding: 96px 0 84px !important;
    background-color: var(--ax-navy-900) !important;
    background-blend-mode: multiply;
    font-family: var(--ax-font-sans);
}
.accurex-inner-banner::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(760px 380px at 82% -10%, rgba(30,111,217,.34) 0%, transparent 62%),
        linear-gradient(120deg, rgba(3,18,44,.94) 0%, rgba(6,31,69,.88) 55%, rgba(0,184,187,.42) 100%);
}
.accurex-inner-banner h1,
.accurex-inner-banner h2,
.accurex-inner-banner h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(2.3rem, 4vw, 3.4rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    color: var(--ax-white) !important;
    margin: 0 0 24px !important;
    text-align: center;
}
.accurex-inner-banner .bd.events { max-width: 620px; margin-inline: auto; }

/* Search row */
.accurex-inner-banner .item-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.accurex-inner-banner .item-search .bootstrap-select,
.accurex-inner-banner .item-search select { flex: 1 1 auto; }
.accurex-inner-banner .btn-find,
.accurex-inner-banner .item-button .btn-find {
    background: var(--ax-grad-accent) !important;
    border: 0 !important;
    border-radius: 100px !important;
    color: #ffffff !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    padding: 13px 32px !important;
    box-shadow: 0 10px 24px rgba(30,111,217,.28);
    transition: transform var(--ax-dur-sm) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.accurex-inner-banner .btn-find:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(30,111,217,.36); }

.accurex-inner-banner .bootstrap-select > .dropdown-toggle,
.accurex-inner-banner .selectpicker,
.accurex-inner-banner .filter-option-inner-inner {
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--ax-navy-900) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    padding: 13px 22px !important;
    box-shadow: none !important;
}

/* --- Category filter chips --------------------------------------------- */
.event-category-section { padding: 56px 0 0 !important; background: var(--ax-white); }

.filters-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.filters-button-group .category-top-btn-item,
.filters-button-group > * {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    background: var(--ax-white) !important;
    background-image: none !important;
    border: 1px solid var(--ax-line) !important;
    border-radius: 100px !important;
    padding: 9px 18px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    color: var(--ax-ink-soft) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.filters-button-group .category-top-btn-item:hover {
    color: var(--ax-navy-900) !important;
    border-color: var(--ax-blue-400) !important;
}
.filters-button-group .category-top-btn-item.active,
.filters-button-group .active {
    background: var(--ax-grad-accent) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
.filters-button-group .category-top-btn-item.active .icon img,
.filters-button-group .active .icon img { filter: brightness(0) invert(1); }
.filters-button-group .icon img { width: 20px; height: 20px; object-fit: contain; }

/* --- Event cards -------------------------------------------------------- */
.category-item-bd { padding: 40px 0 72px; background: var(--ax-white); }
.category-item-bd .tm-gallery-item { margin-bottom: 24px; }

.category-item-bd .col-item > div,
.category-item-bd .tm-gallery-item .figure {
    border-radius: var(--ax-r-md);
    overflow: hidden;
}
.category-item-bd .tm-gallery-item {
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.category-item-bd .tm-gallery-item:hover { transform: translateY(-6px); }

.category-item-bd .figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--ax-r-md) var(--ax-r-md) 0 0;
}
.category-item-bd .figure img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 600ms var(--ax-ease);
}
.category-item-bd .tm-gallery-item:hover .figure img { transform: scale(1.05); }

.category-item-bd .text-bd {
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-top: 0;
    border-radius: 0 0 var(--ax-r-md) var(--ax-r-md);
    padding: 20px 20px 22px !important;
    box-shadow: var(--ax-e1);
}
.category-item-bd .text-bd h3,
.category-item-bd .text-bd h4,
.category-item-bd .text-bd a {
    font-family: var(--ax-font-display) !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.34 !important;
    letter-spacing: -.02em !important;
    color: var(--ax-navy-900) !important;
    text-transform: none !important;
    transition: color var(--ax-dur-sm) var(--ax-ease);
}
.category-item-bd .tm-gallery-item:hover .text-bd a { color: var(--ax-blue-600) !important; }

/* "Free" / price badge */
.category-item-bd .price {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: var(--ax-grad-accent) !important;
    color: #ffffff !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 100px !important;
    padding: 6px 14px !important;
    box-shadow: 0 6px 16px rgba(30,111,217,.26);
}

/* Date / location line */
.category-item-bd .loc-dat,
.category-item-bd .loc-dat span {
    font-family: var(--ax-font-sans) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--ax-ink-soft) !important;
}
.category-item-bd .loc-dat i { color: var(--ax-cyan-600) !important; margin-right: 6px; }

@media (max-width: 767px) {
    .accurex-inner-banner { padding: 64px 0 56px !important; }
    .accurex-inner-banner .item-search { flex-direction: column; }
    .event-category-section { padding: 36px 0 0 !important; }
}

/* ==========================================================================
   EVENTS — corrections
   Hero image lives in `.accurex-inner-banner > .figure`, so the overlay has
   to sit on that element. `.price` is inside `.text-bd`, not `.figure`, so it
   is a static pill rather than an absolute badge. Filter chips are bare <a>
   elements carrying only the category slug as a class.
   ========================================================================== */

/* --- Hero: image layer + brand overlay ---------------------------------- */
.accurex-inner-banner { position: relative; overflow: hidden; }
.accurex-inner-banner::before { content: none !important; }

.accurex-inner-banner > .figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    z-index: 0;
    border-radius: 0 !important;
}
.accurex-inner-banner > .figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
.accurex-inner-banner > .figure::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(760px 380px at 82% -10%, rgba(30,111,217,.40) 0%, transparent 62%),
        linear-gradient(120deg, rgba(3,18,44,.93) 0%, rgba(6,31,69,.86) 52%, rgba(0,184,187,.46) 100%);
}
.accurex-inner-banner .inner-text-bd { position: relative; z-index: 2; }

/* --- Filter chips: bare <a> inside .filters-button-group ---------------- */
.filters-button-group a,
.filters-button-group .category-top-btn-item a,
.filters-button-group > a {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    background: var(--ax-white) !important;
    background-image: none !important;
    background-color: var(--ax-white) !important;
    border: 1px solid var(--ax-line) !important;
    border-radius: 100px !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ax-ink-soft) !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease),
                background-color var(--ax-dur-sm) var(--ax-ease);
}
.filters-button-group a:hover {
    color: var(--ax-navy-900) !important;
    border-color: var(--ax-blue-400) !important;
}
.filters-button-group a.active,
.filters-button-group .active a,
.filters-button-group a.is-checked {
    background-color: transparent !important;
    background-image: var(--ax-grad-accent) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
.filters-button-group a.active img,
.filters-button-group a.is-checked img { filter: brightness(0) invert(1); }
.filters-button-group a img,
.filters-button-group .icon img { width: 19px !important; height: 19px !important; object-fit: contain; }

/* --- Card badge: static pill, not a full-width bar ---------------------- */
.category-item-bd .price {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    background-image: var(--ax-grad-accent) !important;
    background-color: transparent !important;
    border-radius: 100px !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    box-shadow: 0 6px 16px rgba(30,111,217,.22);
    overflow: hidden;
}
.category-item-bd .price p {
    margin: 0 !important;
    padding: 5px 14px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
}

/* Card body spacing */
.category-item-bd .text-bd h3 { margin: 0 0 10px !important; }
.category-item-bd .loc-dat { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ==========================================================================
   EVENTS — filter chip internals
   Chip markup is: <a> > div.icon > img  +  <p>label</p>
   The <p> was white (invisible on a white pill) and .icon carried a teal fill.
   ========================================================================== */

.filters-button-group a { padding: 6px 18px 6px 6px !important; }

.filters-button-group a .icon {
    display: grid !important;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px;
    margin: 0 !important;
    border-radius: 100px !important;
    background: var(--ax-blue-100) !important;
    background-color: var(--ax-blue-100) !important;
    background-image: none !important;
    transition: background-color var(--ax-dur-sm) var(--ax-ease);
}
.filters-button-group a .icon img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
    filter: none !important;
}

.filters-button-group a p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ax-ink-soft) !important;
    white-space: nowrap;
    transition: color var(--ax-dur-sm) var(--ax-ease);
}
.filters-button-group a:hover p { color: var(--ax-navy-900) !important; }

/* Active chip */
.filters-button-group a.active p,
.filters-button-group a.is-checked p { color: #ffffff !important; }
.filters-button-group a.active .icon,
.filters-button-group a.is-checked .icon {
    background-color: rgba(255,255,255,.22) !important;
}
.filters-button-group a.active .icon img,
.filters-button-group a.is-checked .icon img { filter: brightness(0) invert(1) !important; }

/* Row rhythm */
.filters-button-group { gap: 10px !important; margin-bottom: 8px; }

/* ==========================================================================
   PREMIUM PASS — borderless
   Borders replaced with elevation and tonal surfaces throughout.
   ========================================================================== */

/* --- Events hero: single flat overlay, no banding ----------------------- */
.accurex-inner-banner {
    padding: 132px 0 120px !important;
    background: var(--ax-navy-900) !important;
}
.accurex-inner-banner > .figure { opacity: .28; }
.accurex-inner-banner > .figure::after {
    background: linear-gradient(180deg,
        rgba(3,18,44,.55) 0%,
        rgba(3,18,44,.35) 45%,
        rgba(3,18,44,.80) 100%) !important;
}
/* Brand light, cast once from a single source — no competing radials */
.accurex-inner-banner::after {
    content: "";
    position: absolute;
    top: -40%; right: -8%;
    width: 820px; height: 820px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,111,217,.30) 0%, rgba(0,217,220,.10) 45%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.accurex-inner-banner .inner-text-bd { z-index: 3; }
.accurex-inner-banner h1 { margin-bottom: 30px !important; }

/* Search field */
.accurex-inner-banner .bootstrap-select > .dropdown-toggle,
.accurex-inner-banner .selectpicker {
    border: 0 !important;
    box-shadow: 0 10px 30px rgba(3,18,44,.22) !important;
    padding: 15px 24px !important;
}
.accurex-inner-banner .item-search { gap: 12px; }

/* --- Filter chips: borderless, compact --------------------------------- */
.filters-button-group a,
.filters-button-group > a {
    border: 0 !important;
    background-color: var(--ax-paper) !important;
    padding: 7px 18px 7px 7px !important;
    box-shadow: none !important;
}
.filters-button-group a:hover {
    background-color: var(--ax-blue-100) !important;
    border: 0 !important;
}
.filters-button-group a .icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
    background-color: rgba(21,82,184,.10) !important;
}
.filters-button-group a .icon img { width: 15px !important; height: 15px !important; }
.filters-button-group a p { font-size: .83rem !important; }
.filters-button-group { gap: 8px !important; }

/* --- Cards everywhere: shadow, not outline ------------------------------ */
.category-item-bd .text-bd,
.ax-cap,
.ax-svc__panel,
.h-blog-section .item,
.contact2 .contact2-single,
.counter2-box,
.ax-work__step,
.ax-work__panel,
.faqblock_home .accordion-item.accordion_row,
.ax-reel,
.ax-work__figure {
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(3,18,44,.05), 0 8px 24px rgba(3,18,44,.07) !important;
}
.category-item-bd .text-bd { border-top: 0 !important; }

.ax-cap:hover,
.h-blog-section .item:hover,
.contact2 .contact2-single:hover,
.counter2-box:hover,
.ax-work__step:hover {
    border: 0 !important;
    box-shadow: 0 2px 4px rgba(3,18,44,.06), 0 18px 44px rgba(3,18,44,.12) !important;
}

/* Contact cards sit on dark — keep them crisp white, no outline */
.contact2 .contact2-single {
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
}

/* FAQ: hairline dividers only, no card outlines */
.faqblock_home .accordion-item.accordion_row {
    box-shadow: none !important;
    background: var(--ax-white) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
}
.faqblock_home .accordion-item.accordion_row:hover { background: var(--ax-paper) !important; }

/* Eyebrows / chips lose their outlines */
.ax-caps__eyebrow,
.ax-faq__chip,
.span {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--ax-blue-100) !important;
}
.ax-caps__eyebrow--dark,
.ax-hero__eyebrow { background: rgba(255,255,255,.08) !important; }
.ax-faq__chip.is-active { background-image: var(--ax-grad-accent) !important; }

/* Section rules and dividers soften */
.ax-apart__item { border-top-color: rgba(3,18,44,.06) !important; }
.ax-work__metrics { border-color: rgba(3,18,44,.06) !important; }
.ax-caps { border-top: 0 !important; }
.brand-logo-section, .brand2, .brand4.brand-slider-logo { border-block: 0 !important; }

/* Header keeps one hairline only, for separation from white content */
.header-area.header-area-all { border-bottom: 1px solid rgba(3,18,44,.06) !important; }

/* ==========================================================================
   EVENTS — three-up cards, refined
   ========================================================================== */

/* Hero: the banner artwork carries its own dark band, so drop it back
   further and let the brand gradient do the work. */
.accurex-inner-banner > .figure { opacity: .16 !important; }
.accurex-inner-banner > .figure img { object-position: center 35% !important; }
.accurex-inner-banner > .figure::after {
    background: linear-gradient(135deg,
        rgba(3,18,44,.92) 0%,
        rgba(6,31,69,.80) 50%,
        rgba(3,18,44,.92) 100%) !important;
}

/* --- Card --------------------------------------------------------------- */
.category-item-bd .tm-gallery-item { margin-bottom: 30px; }

.category-item-bd .tm-gallery-item > a {
    display: block;
    height: 100%;
    border-radius: var(--ax-r-md);
    overflow: hidden;
    background: var(--ax-white);
    box-shadow: 0 1px 2px rgba(3,18,44,.05), 0 10px 28px rgba(3,18,44,.08);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 6px rgba(3,18,44,.07), 0 22px 50px rgba(3,18,44,.14);
}
.category-item-bd .tm-gallery-item:hover { transform: none; }

.category-item-bd .figure {
    border-radius: 0 !important;
    margin: 0 !important;
}
.category-item-bd .figure img {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    display: block;
}

.category-item-bd .text-bd {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 22px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Price pill */
.category-item-bd .price { margin: 0 0 14px !important; align-self: flex-start; }
.category-item-bd .price p { padding: 5px 13px !important; font-size: .68rem !important; }

/* Title: left aligned, clamped to keep cards even */
.category-item-bd .text-bd h3 {
    text-align: left !important;
    font-size: 1.06rem !important;
    line-height: 1.38 !important;
    margin: 0 0 14px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.76em;
}

/* Meta row sits at the foot of the card */
.category-item-bd .loc-dat {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(3,18,44,.06);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}
.category-item-bd .loc-dat span {
    display: inline-flex;
    align-items: center;
    font-size: .8rem !important;
    color: var(--ax-ink-soft) !important;
}
.category-item-bd .loc-dat i {
    color: var(--ax-blue-500) !important;
    margin-right: 7px;
    font-size: .82rem;
}

/* Equal-height columns */
.category-item-bd .tm-gallery,
.category-item-bd .row.tm-gallery { align-items: stretch; }

@media (max-width: 991px) {
    .category-item-bd .text-bd { padding: 18px 18px 20px !important; }
}

/* ==========================================================================
   EVENTS HERO — fix collapsed height
   `.inner-text-bd` measured 28px while holding a 69px <h1>: its children are
   floated, so the parent collapsed and the banner's height came entirely from
   padding. Contain the floats and centre the content instead.
   ========================================================================== */

.accurex-inner-banner {
    display: flex !important;
    align-items: center !important;
    min-height: 420px;
    padding: 56px 0 !important;
}
.accurex-inner-banner .inner-text-bd {
    display: flow-root;          /* contains the floated children */
    width: 100%;
    overflow: visible;
}
.accurex-inner-banner .bd.events {
    display: flow-root;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
}
.accurex-inner-banner .bd.events::after { content: ""; display: table; clear: both; }

.accurex-inner-banner h1 {
    margin: 0 0 26px !important;
    padding: 0 !important;
    float: none !important;
}
.accurex-inner-banner form,
.accurex-inner-banner .item-search { float: none !important; width: 100%; }

/* ==========================================================================
   EVENTS — section rhythm
   ========================================================================== */

.event-category-section { padding: 64px 0 0 !important; }
.category-item-bd { padding: 32px 0 72px !important; }

/* CTA band at the foot of the page */
.cta4 {
    padding: 72px 0 !important;
    position: relative;
    isolation: isolate;
    background-color: var(--ax-navy-900) !important;
}
.cta4::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, rgba(3,18,44,.94) 0%, rgba(6,31,69,.86) 52%, rgba(0,184,187,.44) 100%);
}
.cta4 h2, .cta4 h3, .cta4 .hadding4-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
    color: var(--ax-white) !important;
    margin: 0 0 10px !important;
}
.cta4 p { color: rgba(255,255,255,.72) !important; margin: 0 !important; }

/* ==========================================================================
   EVENTS — compact filters
   Category names are long, so the icons were pushing chips to full-row width.
   Icons drop, chips tighten, row centres in a contained width.
   ========================================================================== */

.event-category-section .filters-button-group {
    max-width: 1040px;
    margin-inline: auto;
    gap: 7px !important;
    justify-content: center;
}
.filters-button-group a,
.filters-button-group > a {
    padding: 8px 16px !important;
    border-radius: 100px !important;
    background-color: var(--ax-paper) !important;
    gap: 0 !important;
}
.filters-button-group a .icon { display: none !important; }
.filters-button-group a p {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    letter-spacing: normal !important;
}
.filters-button-group a:hover { background-color: var(--ax-blue-100) !important; }
.filters-button-group a.active,
.filters-button-group a.is-checked {
    background-image: var(--ax-grad-accent) !important;
    background-color: transparent !important;
}
.filters-button-group a.active p { color: #ffffff !important; }

/* ==========================================================================
   EVENTS — compact cards
   Price moves onto the artwork, so the body is title + meta only.
   ========================================================================== */

.category-item-bd { padding: 28px 0 64px !important; }
.category-item-bd .tm-gallery-item { margin-bottom: 22px; }

.category-item-bd .tm-gallery-item > a { position: relative; }

.category-item-bd .figure img { aspect-ratio: 16 / 10 !important; }

/* Price pill overlays the image */
.category-item-bd .price {
    position: absolute !important;
    top: 12px; left: 12px;
    z-index: 3;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(3,18,44,.28) !important;
}
.category-item-bd .price p {
    padding: 4px 12px !important;
    font-size: .66rem !important;
    letter-spacing: .1em !important;
}

.category-item-bd .text-bd {
    padding: 16px 18px 16px !important;
}
.category-item-bd .text-bd h3 {
    font-size: .98rem !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
    min-height: 2.7em;
}
.category-item-bd .loc-dat {
    padding-top: 11px !important;
    gap: 4px 14px !important;
}
.category-item-bd .loc-dat span { font-size: .76rem !important; }
.category-item-bd .loc-dat i { font-size: .76rem; margin-right: 6px; }

@media (max-width: 575px) {
    .filters-button-group a p { font-size: 12px !important; }
    .filters-button-group a { padding: 7px 13px !important; }
}

/* ==========================================================================
   EVENTS HERO — rebuilt
   The banner artwork has a dark band baked into it, so no overlay could
   rescue it. The image is dropped and the hero runs on brand gradient alone.
   ========================================================================== */

.accurex-inner-banner > .figure { display: none !important; }

.accurex-inner-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    min-height: 360px;
    padding: 72px 0 !important;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 78% -20%, rgba(30,111,217,.38) 0%, transparent 62%),
        linear-gradient(125deg, #03122c 0%, #061f45 52%, #0a2f68 100%) !important;
}
.accurex-inner-banner::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 25%, transparent 75%);
    width: auto; height: auto;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
}
.accurex-inner-banner .inner-text-bd { position: relative; z-index: 2; width: 100%; }

.accurex-inner-banner .bd.events {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 640px;
    margin-inline: auto;
}
.accurex-inner-banner .bd.events > *,
.accurex-inner-banner form { float: none !important; width: 100%; }
.accurex-inner-banner h1 { margin: 0 0 28px !important; }

/* Select reads correctly */
.accurex-inner-banner .filter-option-inner-inner,
.accurex-inner-banner .bootstrap-select .dropdown-toggle .filter-option {
    color: var(--ax-navy-900) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-align: left;
}

/* ==========================================================================
   EVENT CARDS — Material surfaces, no borders anywhere
   Date moves to a meta line above the title; the divider rule is removed.
   ========================================================================== */

.category-item-bd .tm-gallery-item > a {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--ax-white) !important;
    /* Material elevation 1 -> 3 on hover */
    box-shadow: 0 1px 2px rgba(3,18,44,.30), 0 1px 3px 1px rgba(3,18,44,.12) !important;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px 3px rgba(3,18,44,.13), 0 1px 3px rgba(3,18,44,.28) !important;
}

.category-item-bd .text-bd,
.category-item-bd .figure {
    border: 0 !important;
    box-shadow: none !important;
}

.category-item-bd .text-bd {
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column;
}

/* Date first, as a quiet meta line — no rule above it */
.category-item-bd .loc-dat {
    order: -1;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.category-item-bd .loc-dat span {
    display: inline-flex;
    align-items: center;
    font-family: var(--ax-font-sans) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase;
    color: var(--ax-blue-600) !important;
}
.category-item-bd .loc-dat i {
    color: var(--ax-blue-500) !important;
    font-size: .74rem;
    margin-right: 6px;
}

.category-item-bd .text-bd h3 {
    order: 0;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.38 !important;
    min-height: auto !important;
    -webkit-line-clamp: 3;
}

/* Price pill stays on the artwork */
.category-item-bd .price { order: -2; }

/* ==========================================================================
   EVENTS — three real bugs
   1. `.inner-text-bd` carried background rgba(0,0,0,.68) — that was the dark
      band across the hero, not the artwork.
   2. `.loc-dat` was position:absolute, so the date sat on top of the title.
   3. Filters needed a contained surface rather than floating in the page.
   ========================================================================== */

/* 1. Hero band */
.accurex-inner-banner .inner-text-bd,
.accurex-inner-banner .inner-text-bd .container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero select (it's .nice-select, not bootstrap-select) */
.accurex-inner-banner .nice-select {
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 100px !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 15px 44px 15px 24px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--ax-navy-900) !important;
    box-shadow: 0 10px 30px rgba(3,18,44,.22) !important;
}
.accurex-inner-banner .nice-select .current { color: var(--ax-navy-900) !important; }
.accurex-inner-banner .nice-select .list {
    border-radius: 14px !important;
    border: 0 !important;
    box-shadow: 0 10px 34px rgba(3,18,44,.18) !important;
    margin-top: 8px;
    padding: 8px !important;
}
.accurex-inner-banner .nice-select .option {
    border-radius: 9px;
    font-family: var(--ax-font-sans) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    min-height: auto !important;
    padding: 9px 14px !important;
}
.accurex-inner-banner .nice-select .option:hover,
.accurex-inner-banner .nice-select .option.selected {
    background: rgba(21,82,184,.07) !important;
    color: var(--ax-blue-600) !important;
}

/* 2. Date: static, below the artwork, right aligned */
.category-item-bd .text-bd { flex-direction: column !important; }
.category-item-bd .loc-dat {
    position: static !important;
    order: -1 !important;
    align-self: flex-end !important;
    justify-content: flex-end;
    width: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    inset: auto !important;
}
.category-item-bd .text-bd h3 { order: 0 !important; }

/* 3. Filters in a contained panel */
.event-category-section .category-top-btn-item,
.event-category-section .tabs {
    background: var(--ax-paper);
    border-radius: 20px;
    padding: 16px 18px;
    max-width: 1100px;
    margin-inline: auto;
}
.event-category-section .filters-button-group {
    max-width: 100%;
    gap: 6px !important;
}
.filters-button-group a,
.filters-button-group > a {
    background-color: #ffffff !important;
    padding: 8px 15px !important;
    box-shadow: 0 1px 2px rgba(3,18,44,.06) !important;
}
.filters-button-group a:hover {
    background-color: var(--ax-white) !important;
    box-shadow: 0 2px 8px rgba(3,18,44,.12) !important;
}
.filters-button-group a.active,
.filters-button-group a.is-checked {
    box-shadow: 0 4px 14px rgba(30,111,217,.28) !important;
}
.filters-button-group a p { font-size: 12.5px !important; }

/* ==========================================================================
   EVENTS — compact filter rail + lighter card type (Material)
   Seven long category labels were wrapping to three rows. They now run as a
   single horizontally scrollable rail, which is the Material pattern for
   filter chips that exceed the container width.
   ========================================================================== */

.event-category-section { padding: 40px 0 0 !important; }

.event-category-section .category-top-btn-item,
.event-category-section .tabs {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
}

.event-category-section .filters-button-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px !important;
    margin: 0 !important;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* fade the overflow edge */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
}
.event-category-section .filters-button-group::-webkit-scrollbar { display: none; }

.filters-button-group a,
.filters-button-group > a {
    flex: 0 0 auto !important;
    white-space: nowrap;
    background-color: var(--ax-paper) !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
}
.filters-button-group a:hover {
    background-color: rgba(21,82,184,.08) !important;
    box-shadow: none !important;
}
.filters-button-group a p {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ax-ink-soft) !important;
}
.filters-button-group a.active,
.filters-button-group a.is-checked {
    background-image: none !important;
    background-color: var(--ax-navy-900) !important;
    box-shadow: none !important;
}
.filters-button-group a.active p { color: #ffffff !important; font-weight: 600 !important; }

/* ==========================================================================
   EVENT CARDS — lighter title, Material surface
   ========================================================================== */

.category-item-bd { padding: 20px 0 64px !important; }

.category-item-bd .text-bd h3,
.category-item-bd .text-bd a {
    font-family: var(--ax-font-display) !important;
    font-weight: 600 !important;          /* was 800 — too heavy for a card */
    font-size: 1rem !important;
    line-height: 1.42 !important;
    letter-spacing: -.012em !important;
    text-transform: none !important;
    color: var(--ax-navy-900) !important;
}

/* Date: quiet meta, not a shout */
.category-item-bd .loc-dat span {
    font-size: .73rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    color: var(--ax-ink-soft) !important;
}
.category-item-bd .loc-dat i { color: var(--ax-ink-soft) !important; opacity: .7; }

/* Price chip: tonal, not a gradient badge */
.category-item-bd .price {
    background-image: none !important;
    background-color: rgba(255,255,255,.94) !important;
    box-shadow: 0 2px 8px rgba(3,18,44,.18) !important;
}
.category-item-bd .price p {
    color: var(--ax-navy-900) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

/* Material elevation, resting and raised */
.category-item-bd .tm-gallery-item > a {
    box-shadow: 0 1px 2px rgba(3,18,44,.09), 0 1px 3px 1px rgba(3,18,44,.06) !important;
}
.category-item-bd .tm-gallery-item > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(3,18,44,.10), 0 8px 20px 2px rgba(3,18,44,.10) !important;
}

/* ==========================================================================
   EVENTS — hero select
   The control is a .nice-select inside a flex row. It had collapsed to 1px
   because the flex rule targeted .bootstrap-select, and its .list was sitting
   in normal flow (216px tall) instead of being an absolute dropdown.
   ========================================================================== */

.accurex-inner-banner .item-search {
    display: flex !important;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.accurex-inner-banner .nice-select {
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 54px;
    display: flex !important;
    align-items: center;
    float: none !important;
}
.accurex-inner-banner .nice-select .current {
    display: block !important;
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Caret */
.accurex-inner-banner .nice-select::after {
    position: absolute;
    right: 22px; top: 50%;
    margin-top: -4px;
    border-color: var(--ax-ink-soft) !important;
}

/* Dropdown list returns to an absolute overlay */
.accurex-inner-banner .nice-select .list {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0; right: 0;
    width: 100% !important;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
}

/* The raw <select> stays hidden; nice-select is the visible control */
.accurex-inner-banner select.selectpicker { display: none !important; }

.accurex-inner-banner .item-button { flex: 0 0 auto; display: flex; }
.accurex-inner-banner .btn-find { white-space: nowrap; }

/* ==========================================================================
   EVENTS — unified search bar
   Markup is: form > .item-search > select  +  form > .item-button > input
   The form becomes a single pill holding both. The nice-select plugin wrapper
   is dropped (it kept collapsing to 1px from its own inline styles) and the
   native <select> is styled directly — fewer moving parts, same form value.
   ========================================================================== */

.accurex-inner-banner form {
    display: flex !important;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    background: #ffffff;
    border-radius: 100px;
    padding: 6px 6px 6px 10px;
    box-shadow: 0 14px 38px rgba(3, 18, 44, .28);
}

.accurex-inner-banner .item-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Plugin wrapper out, native control in */
.accurex-inner-banner .nice-select,
.accurex-inner-banner .bootstrap-select { display: none !important; }

.accurex-inner-banner select.selectpicker {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    outline: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 13px 34px 13px 14px !important;
    margin: 0 !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--ax-navy-900) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355657f' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.accurex-inner-banner select.selectpicker option {
    color: var(--ax-navy-900);
    font-weight: 500;
}

.accurex-inner-banner .item-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
}
.accurex-inner-banner .btn-find {
    border-radius: 100px !important;
    padding: 14px 34px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.accurex-inner-banner .btn-find:hover { transform: none; box-shadow: 0 8px 20px rgba(30,111,217,.34) !important; }

/* ==========================================================================
   EVENTS — filters wrap again (no horizontal scrolling)
   ========================================================================== */

.event-category-section .filters-button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    overflow: visible !important;
    gap: 7px !important;
    padding: 0 !important;
    max-width: 980px;
    margin-inline: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
.filters-button-group a,
.filters-button-group > a {
    flex: 0 0 auto !important;
    padding: 7px 15px !important;
}
.filters-button-group a p { font-size: 12.5px !important; }

/* The "All" chip has no <p>, just raw text — colour the anchor itself */
.filters-button-group a { color: var(--ax-ink-soft) !important; }
.filters-button-group a.active,
.filters-button-group a.is-checked { color: #ffffff !important; }

@media (max-width: 575px) {
    .accurex-inner-banner form { flex-direction: column; border-radius: 22px; padding: 10px; gap: 8px; }
    .accurex-inner-banner .item-button, .accurex-inner-banner .btn-find { width: 100%; }
}

/* ==========================================================================
   EVENT CARDS — depth pass
   Layered Material elevation, image zoom, gradient scrim and a reveal on the
   title. All motion is transform/opacity only.
   ========================================================================== */

.category-item-bd .tm-gallery-item { margin-bottom: 26px; }

.category-item-bd .tm-gallery-item > a {
    position: relative;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    border-radius: 18px !important;
    background: #ffffff !important;
    overflow: hidden;
    /* elevation 1: tight contact shadow + soft ambient */
    box-shadow:
        0 1px 2px rgba(3, 18, 44, .08),
        0 4px 10px -2px rgba(3, 18, 44, .08),
        0 12px 28px -8px rgba(3, 18, 44, .10) !important;
    transition: transform 280ms var(--ax-ease),
                box-shadow 280ms var(--ax-ease);
    will-change: transform;
}
.category-item-bd .tm-gallery-item > a:hover {
    transform: translateY(-6px);
    /* elevation 4 */
    box-shadow:
        0 2px 4px rgba(3, 18, 44, .10),
        0 10px 20px -4px rgba(3, 18, 44, .12),
        0 28px 56px -12px rgba(3, 18, 44, .22) !important;
}

/* Artwork */
.category-item-bd .figure {
    position: relative;
    overflow: hidden;
    background: var(--ax-paper);
}
.category-item-bd .figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 620ms var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover .figure img { transform: scale(1.06); }

/* Scrim so the price chip always reads, whatever the artwork */
.category-item-bd .figure::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(3,18,44,.34) 0%, transparent 100%);
    opacity: .9;
    pointer-events: none;
}

/* Price chip: frosted, floats on the artwork */
.category-item-bd .price {
    position: absolute !important;
    top: 12px; left: 12px;
    z-index: 3;
    background-color: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 100px !important;
    box-shadow: 0 2px 10px rgba(3,18,44,.22) !important;
    transition: transform 280ms var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover .price { transform: translateY(-2px); }

/* Body */
.category-item-bd .text-bd {
    position: relative;
    flex: 1 1 auto;
    padding: 16px 18px 18px !important;
    background: #ffffff;
}

/* Accent rail that draws in on hover */
.category-item-bd .text-bd::before {
    content: "";
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ax-grad-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover .text-bd::before { transform: scaleX(1); }

.category-item-bd .text-bd h3 {
    transition: color 220ms var(--ax-ease);
}
.category-item-bd .tm-gallery-item > a:hover .text-bd h3 { color: var(--ax-blue-600) !important; }

@media (prefers-reduced-motion: reduce) {
    .category-item-bd .tm-gallery-item > a,
    .category-item-bd .figure img { transition: none !important; }
    .category-item-bd .tm-gallery-item > a:hover { transform: none; }
}

/* ==========================================================================
   EVENTS — search control (bootstrap-select, not nice-select)
   The select sits inside .dropdown.bootstrap-select. Hiding that wrapper
   collapsed the whole control, so the plugin's own button is styled instead.
   ========================================================================== */

.accurex-inner-banner .bootstrap-select {
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.accurex-inner-banner select.selectpicker { display: none !important; }

.accurex-inner-banner .bootstrap-select > .dropdown-toggle,
.accurex-inner-banner .bootstrap-select .btn {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 100px !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 13px 34px 13px 16px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--ax-navy-900) !important;
    text-align: left !important;
}
.accurex-inner-banner .bootstrap-select > .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}
.accurex-inner-banner .bootstrap-select .filter-option,
.accurex-inner-banner .bootstrap-select .filter-option-inner,
.accurex-inner-banner .bootstrap-select .filter-option-inner-inner {
    color: var(--ax-navy-900) !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Caret */
.accurex-inner-banner .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    right: 16px; top: 50%;
    margin-top: -2px;
    border-top-color: var(--ax-ink-soft) !important;
    opacity: .8;
}

/* Menu */
.accurex-inner-banner .bootstrap-select .dropdown-menu {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 36px rgba(3,18,44,.18) !important;
    padding: 8px !important;
    margin-top: 10px !important;
    min-width: 100%;
}
.accurex-inner-banner .bootstrap-select .dropdown-menu li a,
.accurex-inner-banner .bootstrap-select .dropdown-item {
    border-radius: 9px !important;
    padding: 9px 14px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    color: var(--ax-ink) !important;
    white-space: normal;
}
.accurex-inner-banner .bootstrap-select .dropdown-menu li a:hover,
.accurex-inner-banner .bootstrap-select .dropdown-item:hover,
.accurex-inner-banner .bootstrap-select .dropdown-item.active,
.accurex-inner-banner .bootstrap-select .dropdown-item:active {
    background-color: rgba(21,82,184,.07) !important;
    color: var(--ax-blue-600) !important;
}

/* ==========================================================================
   EVENTS — the "All" chip
   It has no <p> wrapper, so it kept the icon tile and lost its label styling.
   ========================================================================== */

.filters-button-group a.all,
.filters-button-group a[data-filter="*"],
.filters-button-group a:first-child {
    font-family: var(--ax-font-sans) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    padding: 7px 18px !important;
}
.filters-button-group a:first-child .icon { display: none !important; }
.filters-button-group a:first-child.active,
.filters-button-group a.all.active {
    background-color: var(--ax-navy-900) !important;
    background-image: none !important;
    color: #ffffff !important;
}