/* ==========================================================================
   HOME — responsive layer. Loaded last, by layouts/home only.
   Only sizes, spacing and overlap are tuned; content and design are untouched.

   Breakpoints (max-width, desktop-first cascade — each block builds on the
   one above it):
     19200px   all screens        base guards
     1399px    desktop / laptop
     1199px    tablet landscape / small desktop
      991px    tablet and smaller
      767px    mobile landscape / small tablets
      576px    mobile phones
   ========================================================================== */

/* ---- 19200px: all screens --------------------------------------------- */
@media screen and (max-width: 19200px) {
    /* Counter values and hero buttons never wrap mid-label */
    .ax-work__metric strong { white-space: nowrap; }
    .ax-hero__actions .ax-btn { white-space: nowrap; }
    /* Metric labels never split a word */
    .ax-work__metric span:not(.counter) { overflow-wrap: normal !important; word-break: normal !important; }
}

/* ---- 1399px: desktop and laptop --------------------------------------- */
@media screen and (max-width: 1399px) {
    :root {
        --ax-t-display: clamp(2.3rem, 3.9vw, 3.4rem);
        --ax-t-sub:     clamp(1.6rem, 2.4vw, 2.1rem);
        --ax-sp-section: 76px;
        --ax-sp-head:    40px;
        --ax-sp-block:   48px;
    }
}

/* ---- 1199px: tablet landscape and small desktop ----------------------- */
@media screen and (max-width: 1199px) {
    :root {
        --ax-t-display: clamp(2.1rem, 3.6vw, 3rem);
        --ax-t-sub:     clamp(1.5rem, 2.3vw, 1.9rem);
        --ax-sp-section: 68px;
        --ax-sp-head:    36px;
        --ax-sp-block:   44px;
    }
    /* Keep copy clear of the fixed Contact Now tab (left) and social rail (right) */
    body .container { padding-left: 36px; padding-right: 36px; }
    .cta2 { padding: 64px 0 !important; }
}

/* ---- 991px: tablet and smaller ---------------------------------------- */
@media screen and (max-width: 991px) {
    :root {
        --ax-t-display: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
        --ax-t-sub:     clamp(1.3rem, 1.05rem + 1.4vw, 1.8rem);
        --ax-sp-section: 56px;
        --ax-sp-head:    32px;
        --ax-sp-block:   40px;
    }
    /* The fixed mobile header (80px) sits over the first section */
    .ax-hero { padding-top: 108px !important; }
    .cta2 { padding: 56px 0 !important; }
    .h-about-block .right { margin-top: 28px; }
}

/* ---- 767px: mobile landscape and small tablets ------------------------ */
@media screen and (max-width: 767px) {
    :root { --ax-sp-section: 48px; --ax-sp-head: 28px; --ax-sp-block: 32px; }
    .cta2 { padding: 48px 0 !important; }
    /* Hero buttons side by side */
    .ax-hero__actions { flex-wrap: nowrap; gap: 10px; }
    .ax-hero__actions .ax-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 14px 8px; font-size: clamp(.78rem, 3.4vw, .9rem); text-align: center; }
}

/* ---- 576px: mobile phones --------------------------------------------- */
@media screen and (max-width: 576px) {
    :root { --ax-sp-section: 40px; --ax-sp-head: 24px; --ax-sp-block: 28px; }
    .cta2 { padding: 40px 0 !important; }
    /* Counters: final values ("1418+") must fit their column */
    .ax-work__metrics { align-items: start; }
    .ax-work__metric { padding: 0 clamp(2px, 1.2vw, 6px); }
    .ax-work__metric strong { font-size: clamp(1.45rem, 7vw, 2.2rem) !important; line-height: 1.1; }
    .ax-work__metric span:not(.counter) { font-size: .7rem; letter-spacing: .04em; line-height: 1.5; }
    /* Capability cards: no dead space under the copy */
    .ax-cap { min-height: 0; padding: 24px 20px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: center; }
    .ax-cap__icon { grid-column: 1; grid-row: 1; margin-bottom: 0; flex: none; }
    .ax-cap__body { display: contents; }                       /* title joins the icon row; copy drops below */
    .ax-cap__title { grid-column: 2; grid-row: 1; margin: 0; }
    .ax-cap__text { grid-column: 1 / -1; grid-row: 2; }
    .ax-cap__arrow { grid-column: 1 / -1; grid-row: 3; margin-top: 0; justify-self: start; }
}