/* =========================================================================
   AJONTec — UI polish layer  (loaded LAST)
   A single, consistent button system for the whole public site, plus tighter
   page rhythm so long pages stop feeling endless.

   !important is used deliberately here: redesign.css already marks its button
   rules !important, so this layer has to match to win. Everything is scoped to
   real component classes, nothing global is touched.
   ========================================================================= */

:root {
    --aju-primary: var(--accent-indigo, #6366f1);
    --aju-rgb: var(--theme-primary-rgb, 99, 102, 241);
    --aju-line: var(--border-color, rgba(255, 255, 255, .08));
}

/* =========================================================================
   1. BUTTONS
   ========================================================================= */
.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-weight: 650 !important;
    font-size: .93rem !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition:
        transform .18s cubic-bezier(.32, .72, 0, 1),
        box-shadow .22s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}

/* Keyboard users get a clear, consistent ring on every button. */
.btn:focus-visible,
.learn-more-link:focus-visible,
.aj-slider-nav:focus-visible {
    outline: 2px solid var(--aju-primary);
    outline-offset: 3px;
    border-radius: 12px;
}

/* ---------- Primary ---------- */
.btn-primary {
    /* A gradient plus a hairline top highlight reads as a solid, premium
       control instead of a flat coloured rectangle. */
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 6px 18px rgba(var(--aju-rgb), .30) !important;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 12px 28px rgba(var(--aju-rgb), .42) !important;
}
.btn-primary:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 3px 10px rgba(var(--aju-rgb), .32) !important;
}

/* ---------- Outline / secondary ---------- */
.btn-outline {
    background: transparent !important;
    color: var(--text-primary, #f8fafc) !important;
    border: 1.5px solid var(--aju-line) !important;
    box-shadow: none !important;
}
.btn-outline:hover {
    transform: translateY(-2px);
    color: var(--aju-primary) !important;
    border-color: rgba(var(--aju-rgb), .55) !important;
    background: rgba(var(--aju-rgb), .07) !important;
    box-shadow: 0 8px 20px rgba(var(--aju-rgb), .14) !important;
}
.btn-outline:active { transform: translateY(0) scale(.985); }

.btn[disabled], .btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-arrow { transition: transform .22s cubic-bezier(.32, .72, 0, 1); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Header CTA stays a touch smaller than page buttons. */
.btn-nav-cta { padding: 10px 18px !important; font-size: .88rem !important; }

/* ---------- Inline text links that act as CTAs ---------- */
.learn-more-link,
.ajw-link,
.svcx-scard-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: gap .22s cubic-bezier(.32, .72, 0, 1), color .2s ease;
}
.learn-more-link:hover,
.ajw-link:hover { gap: 10px; }
.learn-more-link .arrow-icon,
.ajw-link span { transition: transform .22s cubic-bezier(.32, .72, 0, 1); }

/* Comfortable tap targets on phones, and buttons that stack cleanly. */
@media (max-width: 640px) {
    .btn { padding: 13px 22px !important; font-size: .92rem !important; }
    .cta-actions, .m-cta-actions, .m-hero-actions { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn-arrow, .learn-more-link, .ajw-link { transition: none !important; }
    .btn:hover, .btn:active { transform: none !important; }
}

/* =========================================================================
   2. SERVICES PAGE — tighter, so 15 cards do not feel like a scroll marathon
   ========================================================================= */
.svcx-services-section { padding: 40px 0 !important; }
.svcx-services-section + .ajp { padding-top: 0; }

/* redesign.css pins every .container to 1180px with !important, which squeezed
   five cards into ~215px each and clipped the meta text. Match the !important
   so the services grid can actually use the screen. */
.svcx-services-section .container { max-width: 1560px !important; }

.svcx-services-section .svcx-grid { gap: 18px; }

/* Shorter media band and tighter body = roughly 60px saved per card row. */
.svcx-services-section .svcx-scard-media { aspect-ratio: 16 / 8.5; }
.svcx-services-section .svcx-scard-body h3 { -webkit-line-clamp: 2; }
.svcx-services-section .svcx-scard-body { padding: 14px 15px 15px; gap: 6px; }
.svcx-services-section .svcx-scard-body h3 { font-size: .98rem; min-height: 2.6em; }
.svcx-services-section .svcx-scard-body p { font-size: .82rem; -webkit-line-clamp: 2; }
/* Only what a visitor actually needs on a card: title, one-line summary,
   price + timeline, and the link. The tagline was being truncated mid-word
   ("DESIGN THAT WORKS, NOT...") and added nothing the title didn't say. */
.svcx-services-section .svcx-scard-eyebrow { display: none; }

/* Price + timeline as plain text instead of boxed pills. Pills needed ~110px
   each and were being cut in half; plain text always fits on one line. */
.svcx-services-section .svcx-scard-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-top: 10px;
}
.svcx-services-section .svcx-scard-meta span {
    padding: 0;
    border: 0;
    background: none;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary, #aab2c5);
}
.svcx-services-section .svcx-scard-meta svg { opacity: .85; }
.svcx-services-section .svcx-scard-cta { margin-top: 6px; padding-top: 11px; font-size: .84rem; }

/* The rest of the page keeps a calmer vertical rhythm too. */
body .why-choose-us.section-pad { padding: 44px 0; }
body .why-choose-us .section-header-center { margin-bottom: 26px; }

@media (max-width: 640px) {
    .svcx-services-section { padding: 30px 0 !important; }
    body .why-choose-us.section-pad { padding: 32px 0; }
}

/* =========================================================================
   3. SERVICE DETAIL PAGE — tighter rhythm, stronger hierarchy
   ========================================================================= */
.svcx-hero { padding: 104px 0 44px; }
.svcx-wrap { padding: 40px 0 48px; }
.svcx-block { margin-top: 36px; }
.svcx-body h2, .svcx-h2 { margin: 34px 0 14px; }
.svcx-body p { margin: 0 0 16px; }
.svcx-tags { margin-top: 34px; padding-top: 20px; }

/* The hero heading is the loudest thing on the page — let it breathe. */
.svcx-title { margin-bottom: 12px; }
.svcx-lede { margin-bottom: 22px; }
.svcx-facts { margin-bottom: 22px; }

/* Sidebar cards a little tighter so the sticky column fits more screens. */
.svcx-card { padding: 20px; }
.svcx-side { gap: 14px; }
.svcx-meta li { padding: 9px 0; }

/* Related row sits closer to the content it belongs to. */
.svcx-related { padding: 8px 0 48px; }
.svcx-related-grid { margin-top: 26px; }

@media (max-width: 900px) {
    .svcx-hero { padding: 86px 0 34px; }
    .svcx-wrap { padding: 26px 0 32px; }
    .svcx-block { margin-top: 28px; }
}

/* =========================================================================
   4. CTA BAND — used at the bottom of most pages
   ========================================================================= */
.cta-strip {
    border-radius: 20px;
    border: 1px solid rgba(var(--aju-rgb), .28);
    background:
        radial-gradient(60% 120% at 15% 0%, rgba(var(--aju-rgb), .16), transparent 65%),
        var(--bg-card, rgba(18, 24, 46, .62));
}
.cta-strip h2 { letter-spacing: -.025em; }


/* =========================================================================
   5. PAGE HERO — every inner page opened with a 240px empty band
   ========================================================================= */
.page-hero { padding: 124px 0 44px !important; }
.page-hero h1 { margin-bottom: 10px; }
.page-hero p { margin-bottom: 14px; }
.page-hero .breadcrumb, .page-hero .crumbs { margin-top: 12px; }

@media (max-width: 900px) {
    .page-hero { padding: 96px 0 32px !important; }
}
@media (max-width: 640px) {
    .page-hero { padding: 88px 0 26px !important; }
}

/* Services without an image showed a large empty band with a tiny icon.
   Give that band a branded tint and a properly sized mark instead. */
.svcx-services-section .svcx-scard-media:has(.svcx-scard-fallback) {
    background:
        radial-gradient(120% 120% at 30% 0%, rgba(var(--aju-rgb), .18), transparent 70%),
        var(--bg-card, rgba(18, 24, 46, .62));
}
.svcx-services-section .svcx-scard-fallback {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}
.svcx-services-section .svcx-scard-fallback svg { width: 26px; height: 26px; }

/* =========================================================================
   6. SITE-WIDE POLISH  — projects, portfolio, blog, team, gallery, careers,
      about and CMS pages. Colours are untouched: every value below is derived
      from the admin palette variables, only rhythm, elevation and typography
      are refined.
   ========================================================================= */

/* ---------- 6.1 Section rhythm ---------- */
.section-pad { padding: 52px 0; }
.section-header-center { margin-bottom: 30px; }
.section-header-center .subtitle,
.section-header-left .subtitle {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-header-center .title,
.section-header-left .title {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.18;
    margin: 0;
}
.title-bar-center {
    width: 46px;
    height: 3px;
    border-radius: 3px;
    margin: 14px auto 0;
    background: var(--gradient-glow, linear-gradient(90deg, #6366f1, #22d3ee));
}

@media (max-width: 640px) {
    .section-pad { padding: 36px 0; }
    .section-header-center { margin-bottom: 22px; }
}

/* ---------- 6.2 One card language everywhere ---------- */
.project-card,
.blog-card,
.mv-card,
.team-card,
.aj-job-card,
.gallery-item {
    border-radius: 16px !important;
    border: 1px solid var(--aju-line) !important;
    transition:
        transform .3s cubic-bezier(.32, .72, 0, 1),
        border-color .3s ease,
        box-shadow .3s ease !important;
}
.project-card:hover,
.blog-card:hover,
.mv-card:hover,
.team-card:hover,
.aj-job-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(var(--aju-rgb), .45) !important;
    box-shadow: 0 18px 40px rgba(var(--theme-bg-rgb, 6, 9, 20), .22) !important;
}

/* ---------- 6.3 Projects / Portfolio ---------- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.project-card { display: flex; flex-direction: column; overflow: hidden; }
.project-thumbnail, .project-img { aspect-ratio: 16 / 10; overflow: hidden; }
.project-thumbnail img, .project-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.project-card:hover .project-thumbnail img,
.project-card:hover .project-img img { transform: scale(1.06); }

.project-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.project-info h3 { font-size: 1.04rem; font-weight: 750; letter-spacing: -.015em; margin: 0; line-height: 1.35; }
.project-info p {
    margin: 0;
    font-size: .87rem;
    line-height: 1.62;
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .71rem;
    font-weight: 600;
    border: 1px solid var(--aju-line);
    background: rgba(var(--aju-rgb), .07);
    color: var(--aju-primary);
}
.project-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 10px; }
.project-actions .btn { padding: 9px 16px !important; font-size: .84rem !important; flex: 1; }

/* Filter pills (portfolio + careers share the same look) */
.portfolio-filter, .aj-job-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}
.filter-btn, .aj-job-filter {
    padding: 8px 18px !important;
    border-radius: 999px !important;
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    border: 1px solid var(--aju-line) !important;
    background: transparent !important;
    color: var(--text-secondary, #aab2c5) !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease;
}
.filter-btn:hover, .aj-job-filter:hover {
    color: var(--text-primary, #f8fafc) !important;
    border-color: rgba(var(--aju-rgb), .45) !important;
    transform: translateY(-1px);
}
.filter-btn.is-active, .filter-btn.active,
.aj-job-filter.active {
    color: #fff !important;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee)) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(var(--aju-rgb), .3);
}

/* ---------- 6.4 Blog ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.blog-card { display: flex; flex-direction: column; overflow: hidden; }
.blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-thumb-fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 2.2rem; font-weight: 800;
    color: var(--aju-primary); opacity: .5;
    background: rgba(var(--aju-rgb), .08);
}
.blog-card-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-cat {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(var(--aju-rgb), .1);
}
.blog-card-body h3 { font-size: 1.02rem; font-weight: 750; line-height: 1.36; letter-spacing: -.015em; margin: 0; }
.blog-card-body h3 a {
    text-decoration: none; color: inherit;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-body h3 a:hover { color: var(--aju-primary); }
.blog-card-body p {
    margin: 0; font-size: .86rem; line-height: 1.62;
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-meta { margin-top: auto; padding-top: 10px; font-size: .76rem; color: var(--text-muted, #6b7488); }

/* ---------- 6.5 Team ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.team-card { text-align: center; padding: 24px 18px 20px; overflow: hidden; }
.team-photo {
    width: 96px; height: 96px;
    margin: 0 auto 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--aju-rgb), .28);
    transition: border-color .3s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
}
.team-card:hover .team-photo { border-color: var(--aju-primary); transform: scale(1.04); }
.team-name { font-size: 1.02rem; font-weight: 750; letter-spacing: -.015em; margin: 0 0 3px; }
.team-role { font-size: .8rem; font-weight: 650; color: var(--aju-primary); margin: 0 0 10px; }
.team-bio {
    font-size: .84rem; line-height: 1.62; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.team-social { display: flex; justify-content: center; gap: 8px; }

/* ---------- 6.6 Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.gallery-item:hover {
    border-color: rgba(var(--aju-rgb), .5) !important;
    box-shadow: 0 16px 34px rgba(var(--theme-bg-rgb, 6, 9, 20), .26) !important;
}

/* ---------- 6.7 Careers ---------- */
.aj-job-card { padding: 20px 22px; }
.aj-job-title { font-size: 1.08rem; font-weight: 750; letter-spacing: -.02em; }
.aj-job-chip {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 650;
    border: 1px solid var(--aju-line);
    background: rgba(127, 127, 127, .08);
}
.aj-job-summary { font-size: .89rem; line-height: 1.65; }

/* ---------- 6.8 About + CMS pages ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mv-card { padding: 24px 22px; }
.mv-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 14px;
    color: #fff;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
}
.about-img { border-radius: 18px; border: 1px solid var(--aju-line); }
.ab-2col { gap: 42px; align-items: center; }

.page-body { font-size: 1.02rem; line-height: 1.82; }
.page-body h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    font-weight: 800; letter-spacing: -.025em;
    margin: 34px 0 14px;
    position: relative; padding-left: 15px;
}
.page-body h2::before {
    content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
    width: 4px; border-radius: 4px;
    background: var(--gradient-glow, linear-gradient(180deg, #6366f1, #22d3ee));
}
.page-body h3 { font-weight: 750; letter-spacing: -.02em; margin: 26px 0 10px; }
.page-body img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--aju-line); margin: 18px 0; }
.page-body ul, .page-body ol { padding-left: 0; list-style: none; margin: 0 0 20px; }
.page-body li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.page-body ul > li::before {
    content: ""; position: absolute; left: 5px; top: .66em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--aju-primary);
}
.page-body ol { counter-reset: pb; }
.page-body ol > li::before {
    counter-increment: pb; content: counter(pb);
    position: absolute; left: 0; top: .08em;
    width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 800;
    color: var(--aju-primary); background: rgba(var(--aju-rgb), .14);
}
.page-body blockquote {
    margin: 22px 0; padding: 14px 20px;
    border-left: 3px solid var(--aju-primary);
    background: rgba(var(--aju-rgb), .07);
    border-radius: 0 12px 12px 0;
}
.page-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .93rem; display: block; overflow-x: auto; }
.page-body th, .page-body td { padding: 10px 13px; border: 1px solid var(--aju-line); text-align: left; }
.page-body th { background: rgba(127, 127, 127, .1); font-weight: 700; }

/* ---------- 6.9 Mobile ---------- */
@media (max-width: 640px) {
    .projects-grid, .blog-grid { grid-template-columns: 1fr; gap: 14px; }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .team-photo { width: 74px; height: 74px; }
    .project-card:hover, .blog-card:hover, .team-card:hover,
    .mv-card:hover, .aj-job-card:hover { transform: none !important; }
    .project-card:active, .blog-card:active { transform: scale(.985) !important; }
    .aj-job-card { padding: 16px 16px; }
    .mv-card { padding: 20px 18px; }
    .page-body { font-size: .97rem; }
}

@media (prefers-reduced-motion: reduce) {
    .project-card, .blog-card, .team-card, .mv-card, .aj-job-card,
    .gallery-item, .filter-btn, .aj-job-filter,
    .project-thumbnail img, .project-img img, .blog-thumb img { transition: none !important; }
}

/* Listing pages opt out of the home-page carousel (.no-carousel) and become
   real grids. redesign.css pins carousel cards to a fixed px width with
   !important, so that has to be released here. */
.projects-grid.no-carousel,
.blog-grid.no-carousel {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}
.no-carousel .project-card,
.no-carousel .blog-card {
    width: auto !important;
    flex: 1 1 auto !important;
}
@media (max-width: 640px) {
    .projects-grid.no-carousel,
    .blog-grid.no-carousel { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* =========================================================================
   7. "IT MUST LOOK CLICKABLE"
      Filters, tags and text CTAs were rendering as flat text on a flat
      background — nothing signalled that they could be pressed. Every
      interactive element below now has a real surface, border and shadow.
   ========================================================================= */

/* ---------- 7.1 Filter buttons (Portfolio + Careers) ---------- */
.portfolio-filter, .aj-job-filters {
    gap: 9px;
    margin-bottom: 30px;
}
.filter-btn, .aj-job-filter {
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-size: .85rem;
    font-weight: 650;
    line-height: 1.15;
    cursor: pointer;
    /* A solid card surface + border + shadow reads as a physical button. */
    background: var(--bg-card, rgba(18, 24, 46, .62)) !important;
    color: var(--text-secondary, #aab2c5) !important;
    border: 1px solid var(--aju-line) !important;
    box-shadow: 0 1px 2px rgba(var(--theme-bg-rgb, 6, 9, 20), .10) !important;
    transition:
        transform .18s cubic-bezier(.32, .72, 0, 1),
        background .2s ease, color .2s ease,
        border-color .2s ease, box-shadow .2s ease !important;
}
.filter-btn:hover, .aj-job-filter:hover {
    transform: translateY(-2px);
    color: var(--aju-primary) !important;
    border-color: rgba(var(--aju-rgb), .5) !important;
    background: rgba(var(--aju-rgb), .07) !important;
    box-shadow: 0 6px 14px rgba(var(--aju-rgb), .16) !important;
}
.filter-btn:active, .aj-job-filter:active { transform: translateY(0) scale(.97); }

.filter-btn.is-active, .filter-btn.active, .aj-job-filter.active {
    color: #fff !important;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee)) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 6px 16px rgba(var(--aju-rgb), .34) !important;
}
.filter-btn:focus-visible, .aj-job-filter:focus-visible {
    outline: 2px solid var(--aju-primary);
    outline-offset: 2px;
}

/* Long filter lists get a capped, scrollable area instead of eating half the
   screen — 50+ tags pushed the actual projects below the fold. */
.portfolio-filter {
    max-height: 108px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}
.portfolio-filter::-webkit-scrollbar { width: 6px; }
.portfolio-filter::-webkit-scrollbar-thumb {
    background: rgba(var(--aju-rgb), .3);
    border-radius: 99px;
}
@media (max-width: 640px) { .portfolio-filter { max-height: 132px; } }

/* ---------- 7.2 Tags ("Related topics", blog tags) ---------- */
.aj-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px !important;
    border-radius: 999px !important;
    font-size: .8rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    color: var(--text-secondary, #aab2c5) !important;
    background: var(--bg-card, rgba(18, 24, 46, .62)) !important;
    border: 1px solid var(--aju-line) !important;
    box-shadow: 0 1px 2px rgba(var(--theme-bg-rgb, 6, 9, 20), .10);
    transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.aj-tag:hover {
    transform: translateY(-2px);
    color: var(--aju-primary) !important;
    border-color: rgba(var(--aju-rgb), .5) !important;
    background: rgba(var(--aju-rgb), .08) !important;
    box-shadow: 0 6px 14px rgba(var(--aju-rgb), .16);
}
.aj-tag:active { transform: translateY(0) scale(.97); }
.aj-tag-row { gap: 9px; margin: 14px 0 0; }

/* ---------- 7.3 Text CTAs get a visible hit area ---------- */
.learn-more-link, .ajw-link, .svcx-scard-cta, .m-link {
    cursor: pointer;
}
.m-center-btn .btn, .m-center-btn a { min-width: 180px; justify-content: center; }

/* Anything that behaves like a control keeps the pointer cursor. */
.filter-btn, .aj-job-filter, .aj-tag, .aj-slider-nav, .aj-slider-dot,
.gallery-item, .svcx-faq summary { cursor: pointer; }

/* =========================================================================
   8. FIVE CARDS PER ROW — projects, portfolio and blog listings
   ========================================================================= */
.projects-grid.no-carousel,
.blog-grid.no-carousel,
.ajw-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
}
/* Give these listings the same wide canvas the services grid uses. */
.portfolio-page .container,
.projects-page .container,
.blog-page .container,
body:has(.projects-grid.no-carousel) .container,
body:has(.blog-grid.no-carousel) .container,
body:has(.ajw-grid) .container { max-width: 1560px !important; }

@media (max-width: 1500px) {
    .projects-grid.no-carousel, .blog-grid.no-carousel, .ajw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1180px) {
    .projects-grid.no-carousel, .blog-grid.no-carousel, .ajw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .projects-grid.no-carousel, .blog-grid.no-carousel, .ajw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 560px) {
    .projects-grid.no-carousel, .blog-grid.no-carousel, .ajw-grid { grid-template-columns: 1fr !important; }
}

/* Compact card internals so five fit comfortably in a ~290px column. */
.projects-grid.no-carousel .project-info,
.ajw-grid .ajw-body { padding: 14px 15px 15px; gap: 7px; }
.projects-grid.no-carousel .project-info h3,
.ajw-grid .ajw-body h3 { font-size: .98rem; }
.projects-grid.no-carousel .project-info p { font-size: .83rem; -webkit-line-clamp: 2; }
.projects-grid.no-carousel .project-tag { font-size: .68rem; padding: 3px 9px; }
.projects-grid.no-carousel .project-actions { gap: 8px; padding-top: 8px; }
.projects-grid.no-carousel .project-actions .btn { padding: 8px 12px !important; font-size: .8rem !important; }
.blog-grid.no-carousel .blog-card-body { padding: 13px 15px 15px; gap: 7px; }
.blog-grid.no-carousel .blog-card-body h3 { font-size: .95rem; }
.blog-grid.no-carousel .blog-card-body p { font-size: .82rem; }

/* =========================================================================
   9. SERVICE DETAIL — remaining dead space
   ========================================================================= */
.svcx-wrap { padding: 32px 0 40px; }
.svcx-block { margin-top: 30px; }
.svcx-body h2, .svcx-h2 { margin: 28px 0 12px; }
.svcx-tags { margin-top: 28px; padding-top: 18px; }
.svcx-tags-label { margin-bottom: 10px; }
.svcx-related { padding: 0 0 40px; }
.svcx-related-grid { margin-top: 22px; }
.svcx-subnav-track { padding: 6px 0; }
.cta-strip { padding: 30px 28px; margin-bottom: 40px; }

@media (max-width: 900px) {
    .svcx-wrap { padding: 22px 0 28px; }
    .cta-strip { padding: 24px 20px; margin-bottom: 28px; }
}

/* =========================================================================
   10. "VIEW DETAILS" AS A REAL, CENTRED BUTTON
   ========================================================================= */
.m-card {
    display: flex !important;
    flex-direction: column;
    padding: 22px 20px !important;
    text-align: left;
}
.m-card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.35; }
.m-card p {
    margin: 0;
    font-size: .87rem;
    line-height: 1.62;
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card-ico { margin-bottom: 14px; }

.m-card a.m-link,
.svcx-scard-cta {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 8px;
    width: 100%;
    margin-top: auto !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: var(--aju-primary) !important;
    background: rgba(var(--aju-rgb), .08) !important;
    border: 1.5px solid rgba(var(--aju-rgb), .32) !important;
    border-top: 1.5px solid rgba(var(--aju-rgb), .32) !important;
    box-shadow: 0 1px 2px rgba(var(--theme-bg-rgb, 6, 9, 20), .08);
    transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease !important;
}
.m-card a.m-link { margin-top: 16px !important; }
.svcx-scard-cta { margin-top: 14px !important; padding-top: 10px !important; }

.m-card:hover a.m-link,
.svcx-scard:hover .svcx-scard-cta {
    color: #fff !important;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee)) !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(var(--aju-rgb), .32);
    gap: 10px;
}
.m-card a.m-link:active, .svcx-scard-cta:active { transform: scale(.98); }
.m-card a.m-link:focus-visible { outline: 2px solid var(--aju-primary); outline-offset: 2px; }

/* =========================================================================
   11. HOME SERVICES CAROUSEL — exactly four cards in view
   ========================================================================= */
@media (min-width: 1024px) {
    .m-cards .m-card { width: calc((100% - 3 * 16px) / 4) !important; }
}
@media (min-width: 700px) and (max-width: 1023px) {
    .m-cards .m-card { width: calc((100% - 2 * 16px) / 3) !important; }
}
@media (max-width: 699px) {
    .m-cards .m-card { width: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 520px) {
    .m-cards .m-card { width: 82vw !important; }
}

/* =========================================================================
   12. HOME "What AjonTec Offers" — match the services-page card style
   ========================================================================= */
.m-cards .m-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px !important;
}
.m-cards .m-card-ico {
    width: 100% !important;
    height: 122px !important;
    margin: 0 0 16px !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center;
    color: var(--aju-primary) !important;
    background:
        radial-gradient(120% 130% at 30% 0%, rgba(var(--aju-rgb), .16), transparent 72%),
        var(--bg-card, rgba(18, 24, 46, .62)) !important;
    border-bottom: 1px solid var(--aju-line);
}
.m-cards .m-card-ico svg {
    width: 56px !important;
    height: 56px !important;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 16px;
    color: var(--aju-primary);
    background: rgba(var(--aju-rgb), .10);
    border: 1px solid rgba(var(--aju-rgb), .24);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), background .25s ease;
}
.m-cards .m-card:hover .m-card-ico svg {
    transform: translateY(-2px) scale(1.04);
    background: rgba(var(--aju-rgb), .16);
}
.m-cards .m-card h3 {
    margin: 0 16px 8px !important;
    font-size: 1rem !important;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.m-cards .m-card p {
    margin: 0 16px !important;
    font-size: .855rem !important;
    line-height: 1.62 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-cards .m-card a.m-link {
    width: calc(100% - 32px);
    margin: 16px 16px 16px !important;
}
@media (max-width: 699px) {
    .m-cards .m-card-ico { height: 104px !important; }
    .m-cards .m-card-ico svg { width: 48px !important; height: 48px !important; padding: 12px; }
    .m-cards .m-card h3 { font-size: .95rem !important; }
}

/* =========================================================================
   13. "Why Brands Choose AjonTec" (.m-feat) — same card language as the rest
   ========================================================================= */
.m-feats .m-feat {
    flex-direction: column !important;
    align-items: stretch;
    gap: 13px !important;
    padding: 20px 18px !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.m-feats .m-feat-ico {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
}
.m-feats .m-feat > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
}
.m-feats .m-feat h3 {
    margin: 0 0 7px !important;
    font-size: 1rem !important;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-feats .m-feat p {
    margin: 0 !important;
    font-size: .855rem !important;
    line-height: 1.62 !important;
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-feats .m-feat .aj-readmore-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin: auto 0 0 !important;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .82rem !important;
    font-weight: 700;
    cursor: pointer;
    color: var(--aju-primary) !important;
    background: rgba(var(--aju-rgb), .08);
    border: 1.5px solid rgba(var(--aju-rgb), .32);
    transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease;
}
.m-feats .m-feat:hover .aj-readmore-hint {
    color: #fff !important;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(var(--aju-rgb), .3);
}
@media (min-width: 1024px) {
    .m-feats .m-feat { width: calc((100% - 3 * 16px) / 4) !important; }
}
@media (min-width: 700px) and (max-width: 1023px) {
    .m-feats .m-feat { width: calc((100% - 2 * 16px) / 3) !important; }
}
@media (max-width: 699px) {
    .m-feats .m-feat { width: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 520px) {
    .m-feats .m-feat { width: 82vw !important; }
}

/* =========================================================================
   14. Feature cards: centred icon + text
   ========================================================================= */
.m-feats .m-feat { align-items: center; text-align: center; }
.m-feats .m-feat-ico { margin: 0 auto !important; }
.m-feats .m-feat > div { align-items: center; text-align: center; }
.m-feats .m-feat h3,
.m-feats .m-feat p { width: 100%; text-align: center; }

/* =========================================================================
   15. "Our Work" cards: real buttons instead of bare text links
   ========================================================================= */
.ajw-actions {
    display: flex !important;
    gap: 8px;
    width: 100%;
    margin-top: auto !important;
    padding-top: 12px;
}
.ajw-actions .ajw-link {
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease;
}
.ajw-actions .ajw-link:not(.ajw-link-muted) {
    color: var(--aju-primary) !important;
    background: rgba(var(--aju-rgb), .08);
    border: 1.5px solid rgba(var(--aju-rgb), .32);
}
.ajw-card:hover .ajw-actions .ajw-link:not(.ajw-link-muted) {
    color: #fff !important;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px rgba(var(--aju-rgb), .3);
}
.ajw-actions .ajw-link.ajw-link-muted {
    flex: 0 0 auto;
    color: var(--text-secondary, #aab2c5) !important;
    background: transparent;
    border: 1.5px solid var(--aju-line);
}
.ajw-actions .ajw-link.ajw-link-muted:hover {
    color: var(--aju-primary) !important;
    border-color: rgba(var(--aju-rgb), .5);
    background: rgba(var(--aju-rgb), .07);
}
.ajw-actions .ajw-link:active { transform: scale(.98); }
.ajw-actions .ajw-link:hover { gap: 7px; }

/* =========================================================================
   16. Icon tiles: centre the glyph inside the tile
       .m-feat-ico computes to `display: flex` with the default
       `align-items: stretch`. The <svg> has a fixed 20px height, so it stuck
       to the top of the 48px tile (measured 14px above centre).
   ========================================================================= */
.m-feat-ico,
.m-card-ico,
.m-hub-ico,
.mv-icon,
.cc-icon,
.feature-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0;
}
.m-feat-ico > svg,
.m-hub-ico > svg,
.mv-icon > svg,
.cc-icon > svg,
.feature-icon-wrapper > svg {
    display: block;
    margin: 0 !important;
    flex: 0 0 auto;
}
.m-cards .m-card-ico > svg { flex: 0 0 auto; margin: 0 !important; }

/* =========================================================================
   17. Client reviews — four across, and a more considered card
   ========================================================================= */
.ajr-slider .aj-slider-track { gap: 16px; }

.ajr-card {
    width: calc((100% - 3 * 16px) / 4) !important;
    min-width: 250px;
    padding: 24px 22px 20px !important;
    border-radius: 16px !important;
    gap: 12px !important;
}
.ajr-quote {
    top: 10px !important;
    right: 18px !important;
    font-size: 4rem !important;
    opacity: .13 !important;
}
.ajr-stars svg { width: 14px; height: 14px; }
.ajr-text {
    font-size: .875rem !important;
    line-height: 1.72 !important;
    -webkit-line-clamp: 4;
    min-height: 6.1em;
}
.ajr-user { padding-top: 14px !important; gap: 11px !important; }
.ajr-avatar {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border: 2px solid rgba(var(--aju-rgb), .25);
}
.ajr-card:hover .ajr-avatar { border-color: var(--aju-primary); }
.ajr-meta strong { font-size: .87rem; }
.ajr-meta span { font-size: .75rem; }

@media (max-width: 1180px) { .ajr-card { width: calc((100% - 2 * 16px) / 3) !important; } }
@media (max-width: 900px)  { .ajr-card { width: calc((100% - 16px) / 2) !important; } }
@media (max-width: 560px)  { .ajr-card { width: 82vw !important; min-width: 0; max-width: 340px; } }

/* =========================================================================
   18. Filter chips on ONE line — no visible scrollbar
   ========================================================================= */
.portfolio-filter,
.aj-job-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: safe center;
    align-items: center;
    gap: 9px;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 6px 2px 10px !important;
    margin-bottom: 26px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.portfolio-filter:active,
.aj-job-filters:active { cursor: grabbing; }
.portfolio-filter::-webkit-scrollbar,
.aj-job-filters::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.filter-btn,
.aj-job-filter {
    flex: 0 0 auto !important;
    white-space: nowrap;
    scroll-snap-align: start;
}
@media (max-width: 640px) {
    .portfolio-filter, .aj-job-filters { gap: 7px; padding: 4px 2px 8px !important; margin-bottom: 18px; }
    .filter-btn, .aj-job-filter { padding: 8px 15px !important; font-size: .8rem; }
}

/* =========================================================================
   19. Filter chips: wrap onto tidy centred rows, everything visible
       Overrides the single-line strip from block 18 — no horizontal scroll,
       no scrollbar, every filter reachable in one glance.
   ========================================================================= */
.portfolio-filter,
.aj-job-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center;
    align-content: center;
    gap: 9px !important;
    row-gap: 9px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 0 !important;
    margin-bottom: 28px;
    cursor: default;
}
.portfolio-filter:active,
.aj-job-filters:active { cursor: default; }

/* Every chip keeps the same height so each row reads as a clean band. */
.filter-btn,
.aj-job-filter {
    flex: 0 0 auto !important;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .portfolio-filter, .aj-job-filters { gap: 7px !important; row-gap: 7px !important; margin-bottom: 20px; }
    .filter-btn, .aj-job-filter { height: 34px; padding: 0 14px !important; font-size: .79rem; }
}

/* =========================================================================
   20. Filters as an even grid — identical width AND height for every chip
   ========================================================================= */
.portfolio-filter,
.aj-job-filters {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important;
    gap: 9px !important;
    justify-content: stretch !important;
    align-items: stretch;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 0 !important;
    margin-bottom: 26px;
}
.filter-btn,
.aj-job-filter {
    width: 100% !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .portfolio-filter, .aj-job-filters { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; gap: 8px !important; }
    .filter-btn, .aj-job-filter { height: 36px !important; font-size: .78rem; }
}
@media (max-width: 480px) {
    .portfolio-filter, .aj-job-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* =========================================================================
   21. Portfolio / project cards were far too tall
   ========================================================================= */
.projects-grid.no-carousel .project-thumbnail,
.projects-grid.no-carousel .project-img { aspect-ratio: 16 / 10; }

.projects-grid.no-carousel .project-info {
    padding: 13px 14px 14px !important;
    gap: 6px !important;
}
.projects-grid.no-carousel .project-info h3 {
    font-size: .95rem !important;
    line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.64em;
}
.projects-grid.no-carousel .project-info p {
    font-size: .81rem !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 2;
}
.projects-grid.no-carousel .project-tags {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    max-height: 22px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.projects-grid.no-carousel .project-tag {
    flex: 0 0 auto;
    font-size: .66rem !important;
    padding: 3px 8px !important;
    white-space: nowrap;
}
.projects-grid.no-carousel .project-actions { padding-top: 9px !important; gap: 7px !important; }
.projects-grid.no-carousel .project-actions .btn {
    padding: 8px 10px !important;
    font-size: .78rem !important;
    border-radius: 9px !important;
}

/* =========================================================================
   22. "Your Journey With Us" — horizontal numbered flow with arrows
   ========================================================================= */
.ajj { padding: 52px 0; }
.ajj-row {
    list-style: none; margin: 30px 0 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch; gap: 0;
}
.ajj-item { position: relative; display: flex; align-items: stretch; }
.ajj-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 18px 22px; margin: 18px 16px 0;
    border-radius: 16px;
    background: var(--bg-card, rgba(18, 24, 46, .62));
    border: 1px solid var(--aju-line);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), border-color .3s ease, box-shadow .3s ease;
}
.ajj-item:hover .ajj-card {
    transform: translateY(-5px);
    border-color: rgba(var(--aju-rgb), .45);
    box-shadow: 0 18px 40px rgba(var(--theme-bg-rgb, 6, 9, 20), .2);
}
.ajj-num {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .88rem; font-weight: 800; color: #fff;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    box-shadow: 0 6px 16px rgba(var(--aju-rgb), .34);
    z-index: 2;
}
.ajj-ico {
    width: 58px; height: 58px; margin: 8px 0 14px; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    color: var(--aju-primary);
    background: rgba(var(--aju-rgb), .10);
    border: 1px solid rgba(var(--aju-rgb), .22);
    transition: background .25s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
}
.ajj-ico > svg, .ajj-ico > img { display: block; flex: 0 0 auto; }
.ajj-ico > img { width: 30px; height: 30px; object-fit: contain; }
.ajj-item:hover .ajj-ico { background: rgba(var(--aju-rgb), .18); transform: scale(1.05); }
.ajj-title {
    margin: 0 0 7px; font-size: 1rem; font-weight: 750;
    letter-spacing: -.015em; line-height: 1.32;
    color: var(--text-primary, #f8fafc);
}
.ajj-desc {
    margin: 0; font-size: .84rem; line-height: 1.6;
    color: var(--text-secondary, #aab2c5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ajj-arrow {
    position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
    display: grid; place-items: center;
    color: var(--aju-primary); opacity: .55; z-index: 1;
}
@media (max-width: 1024px) {
    .ajj-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ajj-arrow { display: none; }
    .ajj-card { margin: 18px 8px 0; }
}
@media (max-width: 560px) {
    .ajj { padding: 36px 0; }
    .ajj-row { grid-template-columns: minmax(0, 1fr); }
    .ajj-card { padding: 30px 16px 18px; margin: 18px 0 0; }
    .ajj-item:hover .ajj-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ajj-card, .ajj-ico { transition: none !important; } }

/* =========================================================================
   22. "Your Journey With Us" — horizontal numbered flow with arrows
   ========================================================================= */
.ajj { padding: 52px 0; }
.ajj-row {
    list-style: none; margin: 30px 0 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch; gap: 0;
}
.ajj-item { position: relative; display: flex; align-items: stretch; }
.ajj-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 18px 22px; margin: 18px 16px 0;
    border-radius: 16px;
    background: var(--bg-card, rgba(18, 24, 46, .62));
    border: 1px solid var(--aju-line);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), border-color .3s ease, box-shadow .3s ease;
}
.ajj-item:hover .ajj-card {
    transform: translateY(-5px);
    border-color: rgba(var(--aju-rgb), .45);
    box-shadow: 0 18px 40px rgba(var(--theme-bg-rgb, 6, 9, 20), .2);
}
.ajj-num {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .88rem; font-weight: 800; color: #fff;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    box-shadow: 0 6px 16px rgba(var(--aju-rgb), .34);
    z-index: 2;
}
.ajj-ico {
    width: 58px; height: 58px; margin: 8px 0 14px; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    color: var(--aju-primary);
    background: rgba(var(--aju-rgb), .10);
    border: 1px solid rgba(var(--aju-rgb), .22);
    transition: background .25s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
}
.ajj-ico > svg, .ajj-ico > img { display: block; flex: 0 0 auto; }
.ajj-ico > img { width: 30px; height: 30px; object-fit: contain; }
.ajj-item:hover .ajj-ico { background: rgba(var(--aju-rgb), .18); transform: scale(1.05); }
.ajj-title {
    margin: 0 0 7px; font-size: 1rem; font-weight: 750;
    letter-spacing: -.015em; line-height: 1.32;
    color: var(--text-primary, #f8fafc);
}
.ajj-desc {
    margin: 0; font-size: .84rem; line-height: 1.6;
    color: var(--text-secondary, #aab2c5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ajj-arrow {
    position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
    display: grid; place-items: center;
    color: var(--aju-primary); opacity: .55; z-index: 1;
}
@media (max-width: 1024px) {
    .ajj-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ajj-arrow { display: none; }
    .ajj-card { margin: 18px 8px 0; }
}
@media (max-width: 560px) {
    .ajj { padding: 36px 0; }
    .ajj-row { grid-template-columns: minmax(0, 1fr); }
    .ajj-card { padding: 30px 16px 18px; margin: 18px 0 0; }
    .ajj-item:hover .ajj-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ajj-card, .ajj-ico { transition: none !important; } }