/* =========================================================================
   AJONTec — Adaptive layer  (must load LAST)

   Makes the whole site scale with the screen instead of sitting inside a
   fixed 1180px column. redesign.css pins `.container` / `.m-wrap` with
   !important, so this file matches that specificity deliberately.

   Verified from 320px phones up to 3840px displays.
   ========================================================================= */

:root {
    /* Fluid gutter: 16px on a phone, 40px on a large desktop. */
    --aj-gutter: clamp(16px, 2.2vw, 40px);
    --aj-max: 1180px;
    --ajr-primary: var(--accent-indigo, #6366f1);
    --ajr-rgb: var(--theme-primary-rgb, 99, 102, 241);
}

/* ---------------------------------------------------------------
   1. Fluid container — grows in controlled steps
   --------------------------------------------------------------- */
@media (min-width: 1280px) { :root { --aj-max: 1260px; } }
@media (min-width: 1536px) { :root { --aj-max: 1400px; } }
@media (min-width: 1800px) { :root { --aj-max: 1560px; } }
@media (min-width: 2200px) { :root { --aj-max: 1720px; } }
@media (min-width: 2800px) { :root { --aj-max: 1920px; } }

.container,
.m-wrap {
    width: 100% !important;
    max-width: var(--aj-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--aj-gutter) !important;
    box-sizing: border-box;
}

/* Wide listings keep their own, larger canvas but still stay fluid. */
.svcx-services-section .container,
body:has(.projects-grid.no-carousel) .container,
body:has(.blog-grid.no-carousel) .container,
body:has(.ajw-grid) .container {
    /* Listings get ~300px more room than the reading container, capped so
       cards never stretch into unreadable strips on a 4K panel. */
    max-width: min(2000px, calc(var(--aj-max) + 300px)) !important;
}

/* ---------------------------------------------------------------
   2. Nothing may ever cause a horizontal scrollbar
   --------------------------------------------------------------- */
img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}
img, video { height: auto; }
/* Images that are deliberately cropped keep their own sizing. */
/* Cropped media fills its box. NOTE: .team-photo and .ajr-avatar are NOT in
   this list - they have fixed square dimensions, and forcing height:100% here
   stretched them into ovals. */
.svcx-scard-media img, .ajw-media img, .ajb-media img,
.blog-thumb img, .project-thumbnail img, .project-img img,
.svcx-hero-bg img, .ajp-figure img { height: 100%; }
.team-photo { width: 96px !important; height: 96px !important; object-fit: cover; border-radius: 50%; }
.ajr-avatar { width: 40px !important; height: 40px !important; object-fit: cover; border-radius: 50%; }
@media (max-width: 640px) { .team-photo { width: 74px !important; height: 74px !important; } }
.ajp-figure img { height: 100%; }

pre, table { max-width: 100%; overflow-x: auto; }
* { min-width: 0; }

/* ---------------------------------------------------------------
   3. Fluid type — headings scale with the viewport, body stays readable
   --------------------------------------------------------------- */
.m-title,
.section-header-center .title,
.section-header-left .title,
.page-hero h1 { font-size: clamp(1.55rem, 1rem + 2.1vw, 2.6rem) !important; line-height: 1.16; }

.svcx-title { font-size: clamp(1.85rem, 1rem + 3vw, 3.2rem) !important; }
.m-sub, .ajp-sub, .page-hero p { font-size: clamp(.92rem, .86rem + .3vw, 1.08rem); }

/* Long headings must never spill out of their box. */
h1, h2, h3, h4, .m-title, .svcx-title, .ajj-title, .ajp-title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ---------------------------------------------------------------
   4. Grids use every column a wide screen offers
   --------------------------------------------------------------- */
@media (min-width: 1800px) {
    .svcx-services-section .svcx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .projects-grid.no-carousel,
    .blog-grid.no-carousel,
    .ajw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .team-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (min-width: 2400px) {
    .svcx-services-section .svcx-grid,
    .projects-grid.no-carousel,
    .blog-grid.no-carousel,
    .ajw-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}

/* Tablets: 3 across reads better than 2 stretched wide. */
@media (min-width: 700px) and (max-width: 1024px) {
    .projects-grid.no-carousel,
    .blog-grid.no-carousel,
    .ajw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .mv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   5. Small phones (320–380px) — the tightest real-world case
   --------------------------------------------------------------- */
@media (max-width: 380px) {
    :root { --aj-gutter: 13px; }
    .btn { padding: 11px 16px !important; font-size: .86rem !important; }
    .svcx-fact { padding: 7px 10px; font-size: .76rem; }
    .m-cards .m-card, .m-feats .m-feat { width: 84vw !important; }
    .ajw-card, .ajb-card, .ajr-card { width: 84vw !important; }
    .filter-btn, .aj-job-filter { font-size: .74rem; padding: 0 8px !important; }
    .svcx-crumbs { font-size: .76rem; }
}

/* ---------------------------------------------------------------
   6. Touch devices — comfortable, reachable controls
   --------------------------------------------------------------- */
@media (pointer: coarse) {
    a.btn, button.btn, .filter-btn, .aj-job-filter,
    .aj-tag, .m-link, .ajw-link, .svcx-scard-cta,
    .aj-readmore-hint, .aj-slider-dot {
        min-height: 40px;
    }
    .aj-slider-dot { min-height: 0; padding: 8px 0; background-clip: content-box; }
    /* Hover-only effects are pointless and cause sticky states on touch. */
    .svcx-scard:hover, .project-card:hover, .blog-card:hover,
    .ajw-card:hover, .ajb-card:hover, .ajr-card:hover,
    .team-card:hover, .mv-card:hover, .m-feat:hover { transform: none !important; }
}

/* ---------------------------------------------------------------
   7. Phone in landscape — very little vertical room
   --------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .page-hero { padding: 76px 0 24px !important; }
    .svcx-hero { padding: 74px 0 24px; }
    .m-section, .section-pad, .ajp, .ajj { padding: 26px 0; }
    .aj-tabbar { display: none; }
    body.has-tabbar { padding-bottom: 0; }
}

/* ---------------------------------------------------------------
   8. Very large screens — keep proportions, avoid a lonely column
   --------------------------------------------------------------- */
@media (min-width: 1800px) {
    .m-section, .section-pad { padding: 64px 0; }
    .ajp, .ajj { padding: 70px 0; }
    .svcx-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 52px; }
}

/* ---------------------------------------------------------------
   9. Zoom / high density — respect the user's font size
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}
@media print {
    .header, .footer, .aj-tabbar, .aj-install, .back-to-top,
    .whatsapp-float, .aj-float, .svcx-mobile-cta, .aj-slider-nav,
    .aj-slider-dots, .portfolio-filter, .aj-job-filters { display: none !important; }
    .container, .m-wrap { max-width: 100% !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* =========================================================================
   10. THEME CORRECTNESS — every mode, every element
       redesign.css forces `color:#fff` on a group that includes .stat-icon,
       assuming those sit on a coloured gradient. .stat-icon does NOT — it has
       a 5%-opacity tint — so on the light theme it rendered white-on-white
       and the About counters looked empty. Fixed here, palette-driven.
   ========================================================================= */

/* ---------- About: stat / counter cards ---------- */
.stat-icon {
    color: var(--ajr-primary) !important;
    background: rgba(var(--ajr-rgb), .12) !important;
    border: 1px solid rgba(var(--ajr-rgb), .26) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.stat-icon > svg { display: block; flex: 0 0 auto; }
.stat-number {
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Fallback for browsers that ignore background-clip on text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .stat-number { -webkit-text-fill-color: var(--ajr-primary); color: var(--ajr-primary); }
}
.stat-card p { color: var(--text-secondary, #aab2c5); }

/* ---------- About: Meet the team ---------- */
.team-card { background: var(--bg-card, rgba(18, 24, 46, .62)); }
.team-name { color: var(--text-primary, #f8fafc); }
.team-role { color: var(--ajr-primary); }
.team-bio  { color: var(--text-secondary, #aab2c5); }
.team-photo { background: var(--bg-card, #fff); }

.team-social a {
    color: var(--text-secondary, #aab2c5);
    background: rgba(var(--ajr-rgb), .08);
    border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
    display: grid;
    place-items: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease;
}
.team-social a:hover {
    color: #fff;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    border-color: transparent;
    transform: translateY(-2px);
}
.team-social a > svg { display: block; }

/* ---------- Social icons (footer) ---------- */
.social-icon {
    color: var(--text-secondary, #aab2c5);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.social-icon > svg { display: block; width: 20px; height: 20px; }
.social-icon:hover { color: #fff; }

/* ---------- Projects: technology stack, centred ---------- */
.tech-stack-wrap { display: flex; justify-content: center; }
.tech-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1100px;
    margin-inline: auto;
}
.tech-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bg-card, rgba(18, 24, 46, .62));
    border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
    color: var(--text-primary, #f8fafc);
    font-size: .86rem;
    font-weight: 650;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.32, .72, 0, 1), border-color .2s ease, background .2s ease;
}
.tech-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ajr-rgb), .45);
    background: rgba(var(--ajr-rgb), .07);
}
.tech-badge svg { width: 18px; height: 18px; color: var(--ajr-primary); flex: 0 0 auto; }

/* ---------- Footer tagline ---------- */
.footer-desc {
    color: var(--text-secondary, #aab2c5);
    font-size: .92rem;
    line-height: 1.7;
    max-width: 42ch;
}

/* ---------- Cross-mode safety net ----------
   Any element that inherits a hardcoded #fff but is NOT on a coloured
   background would vanish on the light theme. These are the ones that
   actually sit on the page background. */
html[data-mode="light"] .stat-icon,
html[data-mode="light"] .tech-badge svg { color: var(--ajr-primary) !important; }
html[data-mode="light"] .social-icon,
html[data-mode="light"] .team-social a { color: var(--text-secondary) !important; }
html[data-mode="light"] .social-icon:hover,
html[data-mode="light"] .team-social a:hover { color: #fff !important; }

/* Logos and images must never disappear on a matching background. */
.logo-img, .footer-logo img, .m-hub-logo img, .partner-logo img {
    max-width: 100%;
    height: auto;
}
html[data-mode="light"] .partner-logo img { filter: none; }

/* =========================================================================
   11. SOCIALS BLOCK — dynamic gradient title above the icons
   ========================================================================= */
.socials-container { text-align: center; }
.socials-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ajr-primary);
    margin-bottom: 10px;
}
.socials-title {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--text-primary, #f8fafc);
}
.socials-title .socials-grad,
.socials-grad {
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .socials-grad { -webkit-text-fill-color: var(--ajr-primary); color: var(--ajr-primary); }
}
.socials-heading {
    margin: 0 0 1.4rem !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #aab2c5) !important;
}

/* =========================================================================
   12. FLOATING STACK — mode toggle on top, WhatsApp lifted clear
   ========================================================================= */
.aj-wa       { bottom: 84px !important; right: 22px; z-index: 2400; }
.aj-mode-toggle { bottom: 150px !important; right: 24px; z-index: 2400; }
.aj-top      { bottom: 214px !important; right: 24px; z-index: 2400; }

@media (max-width: 600px) {
    .aj-wa          { bottom: 78px !important; right: 14px; width: 50px; height: 50px; }
    .aj-mode-toggle { bottom: 138px !important; right: 16px; width: 44px; height: 44px; }
    .aj-top         { bottom: 192px !important; right: 16px; width: 44px; height: 44px; }
}
/* With the app tab bar present, stack above it. */
@media (max-width: 900px) {
    body.has-tabbar .aj-wa          { bottom: calc(var(--aj-tabbar-h, 66px) + 14px) !important; }
    body.has-tabbar .aj-mode-toggle { bottom: calc(var(--aj-tabbar-h, 66px) + 74px) !important; }
    body.has-tabbar .aj-top         { bottom: calc(var(--aj-tabbar-h, 66px) + 128px) !important; }
}

/* =========================================================================
   13. SERVICE DETAIL HERO — banner text was bleeding through the headline
       The banner artwork carries its own large title. A stronger blur plus a
       solid palette scrim keeps the real <h1> and copy fully legible.
   ========================================================================= */
.svcx-hero-bg img {
    opacity: .14 !important;
    filter: saturate(1.05) blur(8px) !important;
    transform: scale(1.12);
}
.svcx-hero::after {
    background:
        radial-gradient(70% 90% at 12% 0%, rgba(var(--ajr-rgb), .20), transparent 62%),
        linear-gradient(180deg,
            rgba(var(--theme-bg-rgb, 6, 9, 20), .86) 0%,
            rgba(var(--theme-bg-rgb, 6, 9, 20), .94) 50%,
            var(--bg-base, #060914) 96%) !important;
}
.svcx-title, .svcx-lede, .svcx-crumbs [aria-current] { position: relative; z-index: 1; }
.svcx-lede { color: var(--text-secondary, #aab2c5) !important; }
@media (max-width: 900px) {
    .svcx-hero-bg img { opacity: .1 !important; filter: saturate(1) blur(10px) !important; }
}

/* =========================================================================
   14. NIGHT MODE PARITY
       Night is now one of the two supported modes (the other is Light), so
       it needs the same component coverage the base dark theme had. Night
       overrides --bg-* and --text-* but NOT --theme-primary-rgb, so brand
       accents stay indigo/cyan while surfaces go warm near-black.
   ========================================================================= */
html[data-mode="night"] .m-card,
html[data-mode="night"] .m-feat,
html[data-mode="night"] .project-card,
html[data-mode="night"] .blog-card,
html[data-mode="night"] .team-card,
html[data-mode="night"] .mv-card,
html[data-mode="night"] .contact-card,
html[data-mode="night"] .svcx-scard,
html[data-mode="night"] .ajw-card,
html[data-mode="night"] .ajb-card,
html[data-mode="night"] .ajr-card,
html[data-mode="night"] .ajj-card,
html[data-mode="night"] .ajp-body,
html[data-mode="night"] .svcx-card,
html[data-mode="night"] .tech-badge,
html[data-mode="night"] .filter-btn,
html[data-mode="night"] .aj-job-filter,
html[data-mode="night"] .aj-tag {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Warm-dark surfaces need a slightly stronger scrim than indigo-dark. */
html[data-mode="night"] .svcx-hero::after {
    background:
        radial-gradient(70% 90% at 12% 0%, rgba(var(--ajr-rgb), .20), transparent 62%),
        linear-gradient(180deg, rgba(10, 10, 16, .88) 0%, rgba(10, 10, 16, .95) 50%, #0a0a10 96%) !important;
}
html[data-mode="night"] .aj-tabbar,
html[data-mode="night"] .svcx-subnav,
html[data-mode="night"] .svcx-mobile-cta { background: rgba(12, 12, 18, .92) !important; }

/* Text that must stay legible on the warm palette. */
html[data-mode="night"] .stat-card p,
html[data-mode="night"] .team-bio,
html[data-mode="night"] .footer-desc,
html[data-mode="night"] .socials-heading,
html[data-mode="night"] .ajj-desc,
html[data-mode="night"] .ajp-desc { color: var(--text-secondary) !important; }

html[data-mode="night"] .team-name,
html[data-mode="night"] .ajj-title,
html[data-mode="night"] .ajp-title,
html[data-mode="night"] .socials-title,
html[data-mode="night"] .tech-badge { color: var(--text-primary) !important; }

/* Shadows read as muddy smudges on near-black; soften them. */
html[data-mode="night"] .svcx-scard:hover,
html[data-mode="night"] .project-card:hover,
html[data-mode="night"] .blog-card:hover,
html[data-mode="night"] .team-card:hover,
html[data-mode="night"] .ajj-item:hover .ajj-card {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .55) !important;
}

/* =========================================================================
   15. FORM FIELDS — readable in every mode and every preset
       redesign.css set the input background to rgba(--theme-bg-rgb, .5),
       which on a card surface produced a washed grey box, and no placeholder
       colour was defined at all — grey placeholder on grey box was unreadable.
   ========================================================================= */
.contact-form input,
.contact-form textarea,
.contact-form select,
.form-group input,
.form-group textarea,
.form-group select,
.aj-quote-form input,
.aj-quote-form textarea,
.aj-quote-form select {
    background: rgba(var(--theme-surface-rgb, 18, 24, 46), .55) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: .95rem;
    -webkit-text-fill-color: var(--text-primary);
}
html[data-mode="light"] .contact-form input,
html[data-mode="light"] .contact-form textarea,
html[data-mode="light"] .contact-form select,
html[data-mode="light"] .form-group input,
html[data-mode="light"] .form-group textarea,
html[data-mode="light"] .form-group select {
    background: #fff !important;
}

/* The actual bug: placeholders had no colour of their own. */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.aj-quote-form input::placeholder,
.aj-quote-form textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--text-muted);
}

.contact-form input:focus,
.contact-form textarea:focus,
.form-group input:focus,
.form-group textarea:focus {
    background: rgba(var(--theme-surface-rgb, 18, 24, 46), .8) !important;
    border-color: var(--accent-indigo) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .18) !important;
}
html[data-mode="light"] .contact-form input:focus,
html[data-mode="light"] .contact-form textarea:focus,
html[data-mode="light"] .form-group input:focus,
html[data-mode="light"] .form-group textarea:focus { background: #fff !important; }

.form-group label, .contact-form label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: .85rem;
}

/* Browser autofill repaints the box white with black text — force it back. */
.contact-form input:-webkit-autofill,
.form-group input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: 0 0 0 1000px rgba(var(--theme-surface-rgb, 18, 24, 46), .9) inset !important;
    caret-color: var(--text-primary);
}

/* =========================================================================
   16. LEGAL / POLICY PAGES
       Long-form documents need tighter reading width, clear tables and a
       visible "last updated" line.
   ========================================================================= */
.page-body .policy-meta {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
    font-size: .82rem;
    color: var(--text-secondary);
    background: rgba(var(--ajr-rgb), .08);
    border: 1px solid rgba(var(--ajr-rgb), .22);
}
.page-body .policy-todo {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 26px;
    font-size: .86rem;
    line-height: 1.65;
    color: var(--text-secondary);
    border: 1px solid rgba(245, 158, 11, .4);
    background: rgba(245, 158, 11, .09);
}
.page-body .policy-todo strong { color: var(--text-primary); }

.page-body h2 { scroll-margin-top: 110px; }
.page-body h3 { font-size: 1.04rem; margin: 22px 0 8px; }
.page-body table th { white-space: nowrap; }
.page-body td, .page-body th { vertical-align: top; }

/* =========================================================================
   17. MOBILE NAVIGATION — sub-menus
       The caret is a 5px chevron built from CSS borders. With only 10px of
       padding its tap target was about 20x20px, so a finger nearly always
       missed it and followed the parent link instead — the sub-menu "would
       not open". It now gets a proper 46x46 target on its own row edge,
       while the label itself still navigates.
   ========================================================================= */
@media (max-width: 992px) {

    .navbar .nav-links > li,
    .navbar .dropdown > li { position: relative; }

    /* Leave room for the toggle so a long label never sits under it. */
    .navbar .has-dropdown > .nav-item,
    .navbar .dropdown > .has-sub > a {
        display: block;
        padding-right: 56px !important;
    }

    /* The chevron becomes a real, finger-sized button pinned to the right. */
    .navbar .has-dropdown > .nav-item .caret,
    .navbar .dropdown > .has-sub > a .caret-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 46px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        cursor: pointer;
        z-index: 2;
        transform: none !important;
        transition: background .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .navbar .has-dropdown > .nav-item .caret::before,
    .navbar .dropdown > .has-sub > a .caret-right::before {
        content: "";
        width: 8px;
        height: 8px;
        border: solid var(--text-secondary);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .25s cubic-bezier(.32, .72, 0, 1), border-color .2s ease;
    }
    .navbar .has-dropdown > .nav-item .caret:active,
    .navbar .dropdown > .has-sub > a .caret-right:active {
        background: rgba(var(--ajr-rgb), .12);
    }

    /* Open state: chevron flips and turns brand-coloured. */
    .navbar .has-dropdown.open > .nav-item .caret,
    .navbar .has-sub.open > a .caret-right { transform: none !important; }
    .navbar .has-dropdown.open > .nav-item .caret::before,
    .navbar .has-sub.open > a .caret-right::before {
        transform: rotate(-135deg) translate(-2px, -2px);
        border-color: var(--ajr-primary);
    }
    .navbar .has-dropdown.open > .nav-item { color: var(--ajr-primary) !important; }

    /* A long Services menu was being clipped at 600px. */
    .navbar .has-dropdown.open > .dropdown,
    .navbar .has-sub.open > .sub-dropdown {
        max-height: 1600px !important;
    }

    /* Indent levels so the hierarchy is readable at a glance. */
    .navbar .dropdown > li > a { padding-left: 22px !important; }
    .navbar .sub-dropdown > li > a { padding-left: 40px !important; font-size: .86rem !important; }
    .navbar .dropdown { border-left: 2px solid var(--border-color) !important; margin-left: 4px !important; }
    .navbar .sub-dropdown { border-left: 2px solid var(--border-color) !important; margin-left: 20px !important; }

    /* Comfortable rows throughout the drawer. */
    .navbar .nav-links > li > a { min-height: 46px; display: flex; align-items: center; }
    .navbar .dropdown > li > a,
    .navbar .sub-dropdown > li > a { min-height: 42px; display: flex !important; align-items: center; }
}

/* Whole parent row is tappable on mobile, and the injected "Overview" link
   keeps the parent page reachable from inside its own sub-menu. */
@media (max-width: 992px) {
    .navbar .has-dropdown > .nav-item,
    .navbar .dropdown > .has-sub > a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .navbar .has-dropdown > .nav-item:active,
    .navbar .dropdown > .has-sub > a:active { background: rgba(var(--ajr-rgb), .07); border-radius: 8px; }

    .navbar .dropdown > li.aj-overview > a {
        color: var(--ajr-primary) !important;
        font-weight: 650 !important;
    }
    .navbar .dropdown > li.aj-overview { border-bottom: 1px dashed var(--border-color); margin-bottom: 2px; }
}
@media (min-width: 993px) {
    /* Desktop already shows the parent link itself — no duplicate needed. */
    .navbar li.aj-overview { display: none; }
}

/* =========================================================================
   18. TECHNOLOGY STACK — even grid, identical cards
       Badges were flex items sized by their own label, so every row ended
       ragged and the last row held two lonely cards. A grid gives every
       card the same width and height, and the row count becomes predictable.
   ========================================================================= */
.tech-grid {
    display: grid !important;
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-content: stretch !important;
    align-items: stretch;
}

.tech-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: auto !important;
    min-width: 0;
    min-height: 96px;
    padding: 14px 8px !important;
    border-radius: 14px !important;
    text-align: center;
    white-space: normal !important;
    background: var(--bg-card, rgba(18, 24, 46, .62));
    border: 1px solid var(--border-color);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1), border-color .22s ease, background .22s ease;
}
.tech-badge:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ajr-rgb), .45);
    background: rgba(var(--ajr-rgb), .07);
}

.tech-badge svg,
.tech-badge img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto;
    color: var(--ajr-primary);
}

/* Label sits on its own line, wraps to two, and never stretches the card. */
.tech-badge span,
.tech-badge > *:not(svg):not(img) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .74rem !important;
    font-weight: 650;
    line-height: 1.3;
    width: 100%;
    word-break: break-word;
}

@media (max-width: 1500px) { .tech-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } }
@media (max-width: 1180px) { .tech-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 900px)  { .tech-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; } }
@media (max-width: 700px)  { .tech-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  {
    .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    .tech-badge { min-height: 84px; padding: 11px 6px !important; }
    .tech-badge span { font-size: .68rem !important; }
}
@media (prefers-reduced-motion: reduce) { .tech-badge { transition: none !important; } }

/* =========================================================================
   19. FRONT-END PAGINATION
       Same defect as the admin: Laravel's pagination::tailwind view sizes its
       chevrons with Tailwind classes this project does not ship, so the
       inline SVGs had no width and stretched across the page. It also renders
       a mobile-only duplicate that was showing on every screen.
   ========================================================================= */
.m-wrap nav[role="navigation"] svg,
.container nav[role="navigation"] svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

nav[role="navigation"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
/* The first block is Laravel's sm:hidden mobile duplicate. */
nav[role="navigation"] > div:first-child { display: none !important; }
nav[role="navigation"] p {
    margin: 0;
    width: 100%;
    text-align: center;
    order: 2;
    font-size: .82rem;
    color: var(--text-muted, #6b7488);
}
nav[role="navigation"] p .font-medium { font-weight: 700; color: var(--text-primary, #f8fafc); }

nav[role="navigation"] a,
nav[role="navigation"] span[aria-current="page"] > span,
nav[role="navigation"] span[aria-disabled="true"] > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card, rgba(18, 24, 46, .62));
    color: var(--text-primary, #f8fafc);
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
nav[role="navigation"] a:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ajr-rgb), .5);
    color: var(--ajr-primary);
    background: rgba(var(--ajr-rgb), .08);
}
nav[role="navigation"] span[aria-current="page"] > span {
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    border-color: transparent;
    color: #fff;
}
nav[role="navigation"] span[aria-disabled="true"] > span { opacity: .4; cursor: not-allowed; }
nav[role="navigation"] .relative.z-0 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    box-shadow: none;
}

/* =========================================================================
   20. BLOG ARTICLE — one consistent reading column
       .page-body is capped at 820px and centred, but the hero, cover image
       and CTA were full width and left aligned. The result was a heading on
       the far left and body text floating in from the middle of the page.
       Everything in the article now shares the same column.
   ========================================================================= */
.blog-single .m-wrap > *,
.blog-single-hero .m-wrap > * {
    max-width: 820px;
    margin-inline: auto;
}
.blog-single .blog-cover {
    max-width: 820px;
    margin-inline: auto;
    display: block;
}
.blog-single .page-body { max-width: 820px; margin-inline: auto; }

/* The hero sits in the same column, so the title lines up with the text. */
.blog-single-hero { padding: 108px 0 20px; }
.blog-single-hero h1 {
    max-width: 820px !important;
    margin-inline: auto !important;
    font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -.03em;
}
.blog-single-hero .breadcrumb,
.blog-single-hero .m-eyebrow,
.blog-single-hero .blog-meta { max-width: 820px; margin-inline: auto; }
.blog-single-hero .blog-meta { justify-content: flex-start; margin-top: 12px; }

/* Article typography: a touch more air than a policy page. */
.blog-single .blog-body { font-size: 1.05rem; line-height: 1.85; }
.blog-single .blog-body > p:first-of-type { font-size: 1.12rem; }
.blog-single .blog-body img { width: 100%; }
.blog-single .aj-tag-row { max-width: 820px; margin-inline: auto; }

@media (max-width: 900px) {
    .blog-single-hero { padding: 88px 0 14px; }
    .blog-single .blog-body { font-size: 1rem; }
    .blog-single .blog-body > p:first-of-type { font-size: 1.05rem; }
}

/* =========================================================================
   21. ADVERTISING SLOTS
       Every slot is self-contained: if no ad is active the markup is not
       rendered at all, so these rules can never affect a page without ads.
   ========================================================================= */
.aj-ad {
    display: block;
    margin: 0 auto;
    text-align: center;
}
.aj-ad-label {
    display: block;
    margin-bottom: 6px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7488);
    opacity: .7;
}
.aj-ad-body {
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
}
.aj-ad-body img { display: block; width: 100%; height: auto; border-radius: 12px; }
.aj-ad-body iframe, .aj-ad-body ins { max-width: 100%; }

/* ---------- In-content and section slots ---------- */
.aj-ad-content_top,
.aj-ad-content_middle,
.aj-ad-content_bottom { margin: 30px auto; }

.aj-ad-footer,
.aj-ad-between_cards { margin: 40px auto 0; }

.aj-ad-header { margin: 0 auto 24px; }
.aj-ad-hero_below { margin: 26px auto; }

/* ---------- Side rails (blog article) ----------
   These sit in the empty margin beside the 820px reading column. They are
   fixed, so they never touch the article's layout, and they only appear
   when there is genuinely room for them. */
/* Specificity note: a rail also carries its placement class
   (.aj-ad-sidebar_sticky), whose `position: sticky` would otherwise win and
   drag the ad on top of the article. The double class keeps `fixed`. */
.aj-ad.aj-ad-rail {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 160px;
    margin: 0;
    display: none;
}
.aj-ad.aj-ad-rail-left  { left: calc(50% - 410px - 24px - 160px); }
.aj-ad.aj-ad-rail-right { right: calc(50% - 410px - 24px - 160px); }

/* 820px column + 2 x (24px gap + 160px ad) + breathing room. */
@media (min-width: 1360px) {
    .aj-ad.aj-ad-rail { display: block; }
}
/* Keep clear of the floating action buttons on the right. */
@media (min-width: 1360px) and (max-width: 1560px) {
    .aj-ad.aj-ad-rail-right { top: 42%; }
}

/* ---------- Sidebar slots ---------- */
.aj-ad-sidebar, .aj-ad-sidebar_sticky { margin: 0 0 20px; }
.aj-ad-sidebar_sticky { position: sticky; top: 110px; }

/* ---------- Mobile sticky bar ---------- */
.aj-ad-mobile_sticky { display: none; }
@media (max-width: 900px) {
    .aj-ad-mobile_sticky {
        display: block;
        position: fixed;
        left: 0; right: 0;
        bottom: var(--aj-tabbar-h, 66px);
        z-index: 43;
        margin: 0;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
        background: rgba(var(--theme-bg-rgb, 6, 9, 20), .95);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--border-color);
    }
    .aj-ad-mobile_sticky .aj-ad-label { display: none; }
}

@media (max-width: 640px) {
    .aj-ad-content_top,
    .aj-ad-content_middle,
    .aj-ad-content_bottom,
    .aj-ad-footer,
    .aj-ad-between_cards { margin: 24px auto; }
}