/* ==========================================================================
   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,
        color-mix(in srgb, var(--ax-cyan-500) 30%, transparent) 0%,
        color-mix(in srgb, var(--ax-cyan-500) 10%, transparent) 40%,
        transparent 68%);
}
.ax-hero__facet {
    position: absolute;
    left: -16%; bottom: -58%;
    width: 78%; height: 165%;
    background: linear-gradient(118deg, color-mix(in srgb, var(--ax-cyan-500) 14%, transparent) 0%, transparent 60%);
    transform: rotate(-14deg);
}
.ax-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--ax-white) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ax-white) 3.5%, transparent) 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: color-mix(in srgb, var(--ax-white) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 16%, transparent);
    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 color-mix(in srgb, var(--ax-cyan-500) 22%, transparent);
}

/* --- 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: color-mix(in srgb, var(--ax-white) 76%, transparent);
    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 color-mix(in srgb, var(--ax-white) 34%, transparent);
}
.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 color-mix(in srgb, var(--ax-white) 12%, transparent);
}
.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: color-mix(in srgb, var(--ax-white) 52%, transparent);
    transition: color var(--ax-dur-md) var(--ax-ease);
}
.ax-hero__tab:hover { color: color-mix(in srgb, var(--ax-white) 85%, transparent); }
.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: color-mix(in srgb, var(--ax-white) 14%, transparent);
    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: color-mix(in srgb, var(--ax-white) 52%, transparent);
}

/* --- 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, color-mix(in srgb, var(--ax-white) 10%, transparent), color-mix(in srgb, var(--ax-white) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--ax-white) 12%, transparent);
}
.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 color-mix(in srgb, var(--ax-white) 12%, transparent);
}
.ax-hero__trust li { padding-right: 18px; }
.ax-hero__trust li + li {
    border-left: 1px solid color-mix(in srgb, var(--ax-white) 12%, transparent);
    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), var(--clr-blue-7));
    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: color-mix(in srgb, var(--ax-white) 62%, transparent);
    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: color-mix(in srgb, var(--ax-white) 5%, transparent); }

/* 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 {
    padding: 36px 40px;
    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 color-mix(in srgb, var(--ax-cyan-500) 16%, transparent);
}

.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; }
    .ax-svc__panel { padding: 28px 28px; }
}

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

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

/* --- The reel card: 9:16, like a Reels tile ---------------------------- */

/* Four brand-tinted gradients so the rail reads like a feed */

/* Soft cyan bloom, static (no animation) */

/* --- Rail controls ------------------------------------------------------ */

/* ==========================================================================
   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 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, color-mix(in srgb, var(--ax-navy-900) 95%, transparent) 0%, color-mix(in srgb, var(--ax-navy-800) 88%, transparent) 50%, color-mix(in srgb, var(--ax-cyan-600) 55%, transparent) 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: color-mix(in srgb, var(--ax-white) 76%, transparent) !important; }
.right-enquire-now input,
.right-enquire-now select,
.right-enquire-now textarea {
    font-family: var(--ax-font-sans) !important;
    background: color-mix(in srgb, var(--ax-white) 7%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ax-white) 17%, transparent) !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: color-mix(in srgb, var(--ax-white) 45%, transparent) !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: color-mix(in srgb, var(--ax-white) 12%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ax-cyan-500) 15%, transparent) !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; }

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

.h-how-twork-block [class*="glow"],
.cta2 [class*="glow"],
.ax-caps [class*="glow"] { animation: none !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.
   ========================================================================== */

/* Font enforcement across every homepage section */
.ax-hero,
.ax-caps,
.ax-svc,
.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,
.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: color-mix(in srgb, var(--ax-cyan-500) 45%, transparent);
}

.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;
}

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

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

.ax-svc,
.ax-work { 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 color-mix(in srgb, var(--ax-white) 14%, transparent);
        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, color-mix(in srgb, var(--ax-cyan-500) 20%, transparent) 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: color-mix(in srgb, var(--ax-white) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 14%, transparent);
    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: color-mix(in srgb, var(--ax-cyan-500) 16%, transparent);
    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: color-mix(in srgb, var(--ax-white) 62%, transparent); 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: color-mix(in srgb, var(--ax-white) 35%, transparent);
    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 */

/* 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;
}

/* The pale-blue pill needs dark text; the theme's white made it unreadable. */
.span { color: var(--ax-navy-700) !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;
}

/* ==========================================================================
   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;
}

/* 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: color-mix(in srgb, var(--ax-white) 76%, transparent) !important; }

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

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

.ax-svc__head,
.ax-work__head,
.ax-caps .container>.ax-caps__title,
.faqblock_home .title,
.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,
.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: color-mix(in srgb, var(--ax-cyan-500) 40%, transparent) !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, color-mix(in srgb, var(--ax-cyan-500) 13%, transparent) 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: color-mix(in srgb, var(--ax-cyan-500) 45%, transparent);
    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%, color-mix(in srgb, var(--ax-cyan-500) 16%, transparent) 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: color-mix(in srgb, var(--ax-white) 76%, transparent) !important; }

/* Contact cards sit as light tiles on the dark surface */
.contact2 .contact2-single {
    background: color-mix(in srgb, var(--ax-white) 96%, transparent);
    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 color-mix(in srgb, var(--ax-white) 12%, transparent);
}

/* ==========================================================================
   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: color-mix(in srgb, var(--ax-white) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 18%, transparent);
    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 color-mix(in srgb, var(--ax-cyan-500) 12%, transparent);
    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 color-mix(in srgb, var(--ax-cyan-500) 18%, transparent);
}

.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
   ========================================================================== */

/* 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 {
    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 color-mix(in srgb, var(--ax-blue-500) 12%, transparent); }
.ax-flow__step:hover .ax-flow__node { background: var(--ax-blue-500); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ax-blue-500) 18%, transparent); }

/* 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,
.counter2-box .counter,
.counter2-box h2,
.ax-hero__title .after2,
.ax-svc__heading .after2,
.ax-work__title .after2,
.ax-caps__title .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 */

/* ==========================================================================
   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%, color-mix(in srgb, var(--ax-blue-500) 26%, transparent) 0%, transparent 62%),
        radial-gradient(620px 320px at 8% 100%, color-mix(in srgb, var(--ax-cyan-500) 16%, transparent) 0%, transparent 60%);
}

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

.ax-caps__eyebrow--dark {
    background: color-mix(in srgb, var(--ax-white) 7%, transparent) !important;
    border-color: color-mix(in srgb, var(--ax-white) 16%, transparent) !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: color-mix(in srgb, var(--ax-white) 70%, transparent);
    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: color-mix(in srgb, var(--ax-white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 12%, transparent);
    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: color-mix(in srgb, var(--ax-white) 9%, transparent);
    border-color: color-mix(in srgb, var(--ax-cyan-500) 42%, transparent);
    transform: translateY(-5px);
}

.ax-ind__icon {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ax-cyan-500) 14%, transparent);
    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: color-mix(in srgb, var(--ax-white) 64%, transparent) !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; }
}

/* ==========================================================================
   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] {
    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;
    padding: 0 !important;          /* legacy padding-right:10px pushed the glyph off-centre */
    display: grid !important;
    place-items: center;
}
.contact2 .contact2-single .contact2-icon svg,
.contact2 .contact2-single .contact2-icon i { margin: 0; display: block; }

/* Gap between the intro/enquiry row and the contact cards (was 104px of stacked margin + padding) */
.contact2 .contact2-contacts { margin-top: 24px !important; padding-top: 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;
}

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

.contact2 .right-enquire-now {
    background: color-mix(in srgb, var(--ax-white) 5%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ax-white) 14%, transparent) !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: color-mix(in srgb, var(--ax-white) 66%, transparent) !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 color-mix(in srgb, var(--ax-blue-500) 30%, transparent);
    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 color-mix(in srgb, var(--ax-blue-500) 38%, transparent);
    color: var(--ax-white) !important;
}
/* Socials sit under a hairline, not floating beside the button */
.contact2 .social-icon {
    border-top: 1px solid color-mix(in srgb, var(--ax-white) 12%, transparent);
    padding-top: 20px;
}
.contact2 .social-icon ul { gap: 10px; }
.contact2 .social-icon ul li a { width: 38px; height: 38px; }

/* Breathing room between the button, the hairline and the social icons.
   The legacy `.h-contact-block .right-enquire-now .social-icon` rule zeroes
   these, so the selectors below are deliberately more specific. */
/* Even rhythm: card edge = 34px on every side, 28px either side of the divider. */
.contact2 .right-enquire-now .item { padding-top: 0 !important; }
.contact2 .right-enquire-now .item .button { margin: 0 0 28px !important; }
.contact2 .right-enquire-now .item .social-icon { margin: 0 !important; padding: 20px 0 0 !important; }
.contact2 .right-enquire-now .item .social-icon ul { gap: 14px; }

/* ==========================================================================
   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 color-mix(in srgb, var(--ax-blue-500) 30%, transparent) !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 color-mix(in srgb, var(--ax-blue-500) 40%, transparent) !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 color-mix(in srgb, var(--ax-white) 18%, transparent) !important;
    background: color-mix(in srgb, var(--ax-white) 8%, transparent) !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);
}

/* ==========================================================================
   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; }

/* ==========================================================================
   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: var(--ax-white) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ax-blue-500) 22%, transparent);
}
.ax-apart__icon i { color: var(--ax-white) !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: var(--ax-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ax-blue-500) 30%, transparent);
}

/* 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; }
}

/* ==========================================================================
   Hero clearance beneath the fixed header (moved here from the header file so
   the header stays page-agnostic)
   ========================================================================== */

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

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

/* ==========================================================================
   Borderless pass — cards, eyebrows and chips use elevation, not outlines
   (home components only; the Events-page chips stay in the Events stylesheet)
   ========================================================================== */

/* --- 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-work__figure {
    border: 0 !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--ax-navy-900) 7%, transparent) !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 color-mix(in srgb, var(--ax-navy-900) 6%, transparent), 0 18px 44px color-mix(in srgb, var(--ax-navy-900) 12%, transparent) !important;
}

/* Contact cards sit on dark — keep them crisp white, no outline */
.contact2 .contact2-single {
    background: var(--ax-white) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--clr-black) 26%, transparent) !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: color-mix(in srgb, var(--ax-white) 8%, transparent) !important; }
.ax-faq__chip.is-active { background-image: var(--ax-grad-accent) !important; }

/* Section rules and dividers soften */
.ax-apart__item { border-top-color: color-mix(in srgb, var(--ax-navy-900) 6%, transparent) !important; }
.ax-work__metrics { border-color: color-mix(in srgb, var(--ax-navy-900) 6%, transparent) !important; }
.ax-caps { border-top: 0 !important; }
.brand-logo-section, .brand2, .brand4.brand-slider-logo { border-block: 0 !important; }

/* ==========================================================================
   FAQ — final word on the open/close arrow and hover
   Earlier FAQ experiments left competing rules: an open item filled the
   10px chevron with a gradient (rendering as a solid diamond), and rows,
   headers and buttons all tinted on hover. These override them.
   ========================================================================== */

/* No background change on hover — rows look the same hovered or not */
.faqblock_home .accordion-item.accordion_row:hover { background: var(--ax-white) !important; }
.faqblock_home .accordion-item.accordion_row .accordion-button:hover { background: transparent !important; }

/* One clean chevron: points down when closed, up when open */
.faqblock_home .accordion-item.accordion_row .accordion-button::after,
.faqblock_home .accordion-item.accordion_row .accordion-button:not(.collapsed)::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto;
    width: 10px !important;
    height: 10px !important;
    margin-left: auto;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-right: 2px solid var(--ax-ink-soft) !important;
    border-bottom: 2px solid var(--ax-ink-soft) !important;
    border-radius: 1px !important;
    transform: translateY(-3px) rotate(45deg) !important;
    transition: transform var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease);
}
.faqblock_home .accordion-item.accordion_row .accordion-button:not(.collapsed)::after {
    border-right-color: var(--ax-blue-500) !important;
    border-bottom-color: var(--ax-blue-500) !important;
    transform: translateY(3px) rotate(225deg) !important;
}

/* FAQ question bars: the header (16px) and button (16px) paddings stacked to
   an 86px bar around a one-line question. Tighter, still comfortable to tap. */
.faqblock_home .accordion-item.accordion_row .accordion-header { padding: 4px 10px !important; }
.faqblock_home .accordion-item.accordion_row .accordion-button { padding: 12px 20px !important; }

/* FAQ — the open item reads as active: its question bar takes a lighter shade
   (--ax-faq-active in colors.css). */
.faqblock_home .bd_block .accordion .accordion_row .accordion-header:has(.accordion-button:not(.collapsed)) {
    background: var(--ax-faq-active) !important;
}
.faqblock_home .accordion-item.accordion_row .accordion-header { transition: background var(--ax-dur-md) var(--ax-ease); }

/* ==========================================================================
   Blog — card meta pills (date + category) in the site type system
   Were Outfit 11px with wide tracking and wrapped onto two lines.
   ========================================================================== */
.blog2 .blog2-hadding ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
.blog2 .blog2-hadding ul li { margin: 0; padding: 0; }
.blog2 .blog2-hadding a.date2 {
    display: inline-block;
    font-family: var(--ax-font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--ax-blue-100) !important;
    color: var(--ax-navy-700) !important;
}

/* ==========================================================================
   "Why Choose Us" heading — same treatment as the HR Consulting benefits
   heading: outlined white pill with a dash on both sides, and a lighter
   blue-to-cyan sweep on the accent words.
   ========================================================================== */
.ax-work__head .ax-caps__eyebrow {
    color: var(--ax-blue-500) !important;
    background: var(--ax-white) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-blue-500) 22%, transparent) !important;
}
.ax-work__head .ax-caps__eyebrow::before { background: var(--ax-blue-500) !important; }
.ax-work__head .ax-caps__eyebrow::after {
    content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--ax-blue-500);
}
.ax-work__title .after2 {
    background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}