/* ============================================================
   IT Managed Services (/it-managed-services) — page-specific layer.
   Loads AFTER css/it-managed-services-zazz.css (never edit that sheet here).

   Built from css/nearshore-it-outsourcing.css (LIVE reference, highest
   Elementor data-id overlap + same band family), plus the .zab-stack tech
   tabs (nearshore-software-development), the .zab-cmp-acc mobile compare
   accordion (application-management-services) and the articles band
   (outsourcing-it-services). Everything below the first section comment is
   the reference's measured rules; THIS page's own measured deltas live in the
   "IT MANAGED SERVICES DELTAS" block at the end, each with its live number.
   ============================================================ */
/* ------------------------------------------------------------
      BRAND TOKENS taken from live's Elementor globals
   ------------------------------------------------------------ */
.zmit {
    --zab-ink: #14142b;               /* live body/heading ink */
    --zab-accent: #0161ff;            /* --e-global-color-accent */
    --zab-body: rgba(20, 20, 20, .7); /* --e-global-color-text */
    --zab-line: rgba(6, 0, 28, .12);  /* compare-table hairline */
    --zab-fill: #eff0f7;              /* card fill (uc_content / icon-box bg) */
    --zab-dark: #262338;              /* dark 4-up panel + stats band */
}

/* ============================================================
   HERO — the approved Family A geometry; only the artwork is this page's.
   Live paints the banner as a plain <img> with object-fit:fill (stretched,
   not cropped) — center/100% 100% is the background equivalent.
   ============================================================ */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/20131832/IT-Managed-Services-main-Banner-scaled.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
    /* 766 / 100 / 508 of live's 1380 box, as percentages. */
    .zmit .zmit-hero-grid {
        grid-template-columns: 55.51% 36.81%;
        gap: 7.68%; align-items: stretch; padding: 28px 0 0;
    }
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    /* Owner request 2026-08-26: hero headline + sub reduced below live's
       54px/16px (live here measures 54px/64.8px). Deliberate deviation,
       applied on request across this page family. */
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
    .zmit-hero .zmit-hero-sub { max-width: 766px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 12px; line-height: 12px; font-weight: 500;
        padding: 12px 24px; gap: 20px;
        background: #f2f7ff; border: 0; min-height: 36px;
    }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* Live's white hero CARD, found by its own styling (white fill, card-ish
       width, near the top) and never by walking up from the .hsfc-Form inside
       it — those two boxes measure very differently. It is stretched to the
       hero row and overhangs the banner into the logo strip: live's own
       composition, not a bug. */
    .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
    .zmit-form-card {
        margin: 0; height: 100%; transform: none;
        padding: 20px 25px 20px 20px;
    }
    .zmit-form-card h3 { margin-bottom: 12px; }
    /* Scoped to the wrapper: .zmit-hsform is on THREE forms per page (hero,
       contact band, footer newsletter) and a bare rule floors all three. */
    .zmit-form-card .zmit-hsform { min-height: 0; }
    .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
    .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
    .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
    .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
    .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}

/* Scroll cue — bare 30px chevron, no disc, bobbing (reference-approved). */
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 18px;
    width: 30px; height: 30px; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .66);
    animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }

/* Trust strip — live's chip row is 70px. Owner request 2026-08-26: every
   marquee logo bounded on BOTH axes, so the chip height and the max-* pair
   move together and `height` is never set on the image itself. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; }

/* ============================================================
   SHARED PAGE BUTTON — label first, then arrow (live's own order).
   ============================================================ */
.zmit .zab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15.38px; font-weight: 600; line-height: 16px;
    color: #fcfcfc; background: var(--zab-accent);
    border-radius: 5px; padding: 15px 30px; text-decoration: none;
    transition: background .2s ease;
}
.zmit .zab-btn:hover { background: #141414; color: #fcfcfc; }
.zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; }
.zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; }
.zmit .zab-btn-ico svg path { fill: currentColor; }
/* stats CTA: #0161ff label on a #f2f7ff pill, 13px 35px, 8px radius */
.zmit .zab-btn-light {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 16px; line-height: 16px; font-weight: 500;
    padding: 13px 35px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* empower CTA: live's own #0161ff button, 8px radius */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; }
/* final CTA: accent pill (live's button here is the accent, not a black square) */
.zmit .zab-btn-final { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; }
.zmit .zab-btn-final:hover { background: #141414; color: #fcfcfc; }

/* ============================================================
   SERVICES — FOUR columns / 15px gap (live's own column count AND gap on
   this page: read off .uc_post_grid_style_one_wrap at 1440). Card 30px padding,
   h3 18px/23.4px, bullets 12px/19.8px, ul margin 12px 0 — all measured on live.
   Card internals are the measured Family A grid-card design (light-lavender
   fill, 1px border, 10px radius) which the shared sheet already owns.
   ============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 14px; }
.zmit .zmit-services-head .z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); text-transform: none; letter-spacing: 0; margin: 0 0 6px; display: inline-block; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; letter-spacing: normal; }  /* now an <h3>: keep the <p> tracking it had */
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
.zmit-services-grid .zmit-svc-card {
    /* Flex COLUMN so the hover CTA pins to the card bottom with
       margin-top:auto (live's own mechanism); display:block would tie the
       CTA's y to the bullet count and break row alignment. */
    display: flex;
    flex-direction: column;
    background: var(--zab-fill);
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 30px;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease;
}
.zmit-services-grid .zmit-svc-card h3, .zmit-services-grid .zmit-svc-card h4 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; padding: 0; transition: color .2s ease; }  /* padding: 0 cancels the shared carousel-card `.zmit-svc-card h4` padding */
/* NO list-style and NO left padding: the shared sheet draws the bullet itself
   (li::before over li { padding-left: 18px }) — adding a native disc gives
   TWO dots per bullet. */
.zmit-services-grid .zmit-svc-card ul { margin: 12px 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 12px; font-weight: 400; line-height: 19.8px; color: var(--zab-ink); margin-bottom: 0; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* HOVER — the industry-template values (border #eff0f7 -> #0161ff, fill
   #eff0f7 -> #d5e0f3, CTA hidden -> shown, transform NONE). This page's cards
   do not lift; the city template's translate(-10px,-10px) must NOT be carried
   here without re-measuring.
   :focus-within beside every :hover — the overlay anchor is the only tab
   stop, so keyboard users must also see the CTA appear.
   Keyed on BOTH .has-link and :has(.z-explore) so it holds whether or not the
   markup carries the class. */
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within,
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within {
    border-color: #0161ff;
    background: #d5e0f3;
}
/* Live toggles the CTA display:none -> block, but display:none makes the card
   GROW on hover and makes the bottom-gap assertion meaningless (a
   display:none box measures 0). House rule (CLAUDE.md section 7): keep the box
   and hide it with `visibility`, with `margin-top: auto` pinning the reserved
   row to the card foot and `padding-top` supplying the minimum gap — so every
   card's CTA sits on the same line whatever its bullets wrap to, and the card
   height is identical resting and hovered. */
.zmit-services-grid .zmit-svc-card .zmit-svc-cta {
    display: flex; align-items: center; height: 34px;
    visibility: hidden; margin-top: auto; padding-top: 10px;
}
.zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within .zmit-svc-cta { visibility: visible; }
.zmit-svc-cta .z-svc-more {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 14px; font-weight: 700; line-height: 24px; color: #000;
    text-decoration: none;
}
.zmit-svc-cta .z-svc-more:hover,
.zmit-svc-cta .z-svc-more:focus { color: #000; text-decoration: none; }
.zmit-svc-cta .ico { display: inline-flex; align-items: center; }
.zmit-svc-cta svg { display: block; width: 14px; height: 8px; }

/* ============================================================
   VIDEO + COPY BAND — measured at 1440: video column 870 at x30 and copy
   column 460 at x950 (50px gutter). Reused from the law-firms .zab-video
   component; only the proportions are restated for the house container.
   ============================================================ */
.zmit .zab-video.z-section { padding: 20px 0 30px; }
.zab-video-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zab-video-media { margin: 0; }
.zab-video-media video {
    display: block; width: 100%; height: auto; aspect-ratio: 860 / 484;
    object-fit: cover; background: #14142b;
}
.zmit .zab-video-copy h2 { font-size: 30px; font-weight: 600; line-height: 39px; color: #141414; margin: 0 0 24px; }
.zab-video-copy .zab-btn { width: 100%; justify-content: center; margin-bottom: 40px; }
.zab-video-quote { margin: 0; padding: 0 20px 0 40px; }
.zab-video-quote p { font-size: 18px; font-style: italic; line-height: 23.4px; color: #141414; margin: 0 0 16px; }
.zab-video-quote cite { display: block; font-size: 14px; font-style: normal; font-weight: 400; color: var(--zab-body); }
@media (min-width: 1081px) {
    .zab-video-grid { grid-template-columns: 870fr 460fr; gap: 50px; align-items: start; }
}

/* ============================================================
   COMPARISON HEADING — live ships it as its own heading-only sibling band.
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 20px 0; }
.zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; font-weight: 400; text-align: left; color: #141414; margin: 0; }

/* ============================================================
   COMPARISON TABLE — 3 columns, FIVE rows on this page. Live has NO
   mobile-only accordion sibling for this band (no elementor-hidden-* classes
   on the container), so below 1081 the three columns simply stack.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0; }
.zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.zmit .zab-cmp-col-head {
    background: #fff; padding: 20px 30px; margin: 0; height: 72px;
    display: flex; align-items: center;
    font-size: 24px; font-weight: 600; line-height: 32px; color: #141414;
}
.zmit .zab-cmp-cell {
    margin: 0; padding: 20px 30px; height: 100px;
    display: flex; align-items: center;
    font-size: 16px; font-weight: 500; line-height: 23px; color: #06001c;
    border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
/* ONE flex item per cell: an inline link plus a bare text node would become
   two items and wrap independently, scrambling the sentence. */
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Only the FIRST body cell of each column is rounded and carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Criteria column: live's 3-layer gradient (a 70% white veil over two blue
   gradients). Cells transparent so it shows. NEVER flatten it. */
.zab-cmp-col-0 {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
        linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%),
        linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zab-cmp-col-0 .zab-cmp-cell { background: transparent; }
.zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* Live's alternate-row stripes, written nth-of-type(even) and never an
   enumerated list — an enumerated list silently drops off the bottom rows of
   a longer table. */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; }
/* Zazz-column hairline on EVERY row — row-count-independent house rule. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }

/* ============================================================
   CERTIFICATIONS — measured at 1440: LIGHT band #e6ebf5, centred heading
   (644 wide) + centred grey lead (600 wide), then SIX WHITE tiles 452x182 in
   a 3-up x 2 grid (12px gap, 12px tile padding), each with a 134x134 badge
   left and the copy right.
   Badge sizing: NATURAL aspect at live's REAL intrinsic 134x134 in a gap'd
   grid — never gap:0 with a forced aspect-ratio / object-fit:fill, which
   fuses the baked-in tiles into one smeared bar (CLAUDE.md).
   ============================================================ */
.zmit .zab-certified.z-section { background: #e6ebf5; padding: 60px 0 70px; }
.zmit .zab-certified h2 { font-size: 47px; font-weight: 600; line-height: 65px; color: #000; text-align: center; max-width: 700px; margin: 0 auto; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26px; color: #5e5e5e; text-align: center; max-width: 600px; margin: 8px auto 0; }
.zab-certified-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 46px; align-items: stretch; }
.zab-cert-box { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 10px; padding: 12px; min-height: 178px; }
.zab-cert-box img { width: 134px; height: 134px; flex: 0 0 134px; object-fit: contain; display: block; }
.zmit .zab-cert-box h3 { font-size: 24px; font-weight: 600; line-height: 36px; color: #020101; margin: 0 0 2px; }
.zmit .zab-cert-box p { font-size: 14px; font-weight: 400; line-height: 22px; color: #5e5e5e; margin: 0; }

/* ============================================================
   BOOK A FREE CONSULTATION — heading 30px/400/39px CENTRED. The embed
   geometry is the shared sheet's.
   ============================================================ */
.zmit .zmit-bookcal.z-section { padding: 30px 0; }
.zmit .zmit-bookcal h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: var(--zab-ink); text-align: center; margin-bottom: 12px; }
.zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--zab-ink); text-align: center; max-width: 1000px; margin: 0 auto; }
.zmit .zmit-bookcal-embed { margin-top: 20px; }

/* ============================================================
   WHY BUSINESS LEADERS CHOOSE — measured at 1440: white section, LEFT
   eyebrow, then the dark #262338 panel: FOUR 352.5px columns 10px apart,
   ~344 tall, cells 32px 25px with a 110px icon.
   No cell hairline here — live separates with the 10px gap.
   DARK PANEL => LIGHT COPY.
   ============================================================ */
.zmit .zab-trust.z-section { background: #fff; padding: 40px 0 40px; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 30px; letter-spacing: normal; }  /* now an <h2>: keep the <p> tracking it had */
.zab-trust-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 10px;
}
.zab-trust-cell { padding: 32px 25px; }
.zab-trust-ico { display: block; margin: 0 auto 20px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
/* Live marks the cell TITLE h2 and the copy h3; we emit h3 + p (better
   document outline) — CLAUDE.md compares content presence, not tag parity. */
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 900; line-height: 19.5px; color: #fff; text-align: center; text-decoration: none; margin: 0 0 20px; }
.zmit .zab-trust-cell p { font-size: 15px; font-weight: 600; line-height: 28px; color: #f7f7fc; text-align: center; margin: 0; }

/* ============================================================
   ITIL EXPANDER — live's ucaddon_expanding_content_cards. This repo already
   implements that widget as .zab-nist (first built for the MSSP page's NIST
   band); identical shape, so the component is REUSED rather than rebuilt —
   the class name is historical, the band is ITIL.
   Measured at 1440: white section, h2 40px/600/56px centred; lead centred.
   Row of FOUR white radius-10 panels 320 tall with a 20px gap: the OPEN one
   940 wide at x40, the three collapsed ones 120 wide at x1000 / x1140 /
   x1280. Icon 70x70 circle bg #ebebeb. The 90px/400 letter is #fff on the
   open panel (invisible against the white card) and #c2c2c2 collapsed — it IS
   the collapsed-state marker.
   ============================================================ */
.zmit .zab-nist.z-section { background: #fff; padding: 30px 0; }
/* LIVE's rhythm in this band is a flat 30px: band padding 30px 0, h2 (40/600/56,
   centred, margin-bottom 0) -> 30 -> lead (1152 at x144, 16/26.4, height 79)
   -> 30 -> row (320) -> 30 -> band bottom = 575. Ours carried 20px here and
   shipped a 565 band. */
.zmit .zab-nist h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #141414; text-align: center; margin: 0 0 30px; }
.zmit .zab-nist-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); text-align: center; max-width: 1152px; margin: 0 auto 30px; }
.zab-nist-row { display: flex; flex-direction: column; gap: 20px; }
/* LIVE's panel edge, measured on the .ue_option elements at 1440:
   border-radius 10px, border-width 0px, box-shadow
   rgba(0, 31, 31, 0.08) 0px 0px 14px 2px, background #fff. A 1px hairline
   here renders hard-outlined boxes where live has soft floating cards. */
.zab-nist-item {
    background: #fff; border: 0; border-radius: 10px;
    box-shadow: 0 0 14px 2px rgba(0, 31, 31, .08);
    overflow: hidden; transition: flex-basis .35s ease;
}
.zmit .zab-nist-tab {
    display: flex; align-items: center; gap: 20px;
    width: 100%; background: none; border: 0; padding: 20px; cursor: pointer;
}
.zab-nist-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%;
    background: #ebebeb; color: rgb(37, 2, 255);
}
.zab-nist-ico svg { display: block; width: 38px; height: 38px; }
.zab-nist-letter { font-size: 90px; font-weight: 400; line-height: 90px; color: #c2c2c2; }
.zab-nist-item.is-open .zab-nist-letter { color: #fff; }
/* Screen-reader name on the tab: the visible name lives in the body, which is
   hidden while collapsed, so the control would otherwise have no label. */
.zab-nist-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Live's widget is an accordion at EVERY width (measured at 375: one panel
   330 tall, the other three 100 collapsed) — so the body is hidden by default
   and revealed by .is-open at all breakpoints, not only on desktop. */
.zab-nist-body { padding: 0 20px 24px; display: none; }
.zab-nist-item.is-open .zab-nist-body { display: block; }
.zmit .zab-nist-body h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #141414; margin: 0 0 10px; }
.zmit .zab-nist-body p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0; }
.zab-nist-body a { color: var(--zab-accent); }
@media (min-width: 1081px) {
    /* 940 open / 120 collapsed of live's 1360 row, with the 20px gaps. */
    .zab-nist-row { flex-direction: row; align-items: stretch; height: 320px; }
    .zab-nist-item { flex: 0 0 120px; display: flex; flex-direction: column; }
    .zab-nist-item.is-open { flex: 1 1 auto; flex-direction: row; align-items: center; }
    .zmit .zab-nist-tab { width: auto; flex: 0 0 170px; flex-direction: column; justify-content: center; gap: 0; padding: 20px 25px; }
    .zab-nist-item.is-open .zab-nist-body { flex: 1 1 auto; padding: 50px 50px 50px 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .zab-nist-item { transition: none; }
}

/* ============================================================
   RECOGNIZED — dark rgb(20,20,20) box, radius 10, padding 40. All three are
   ALREADY CORRECT in the shared sheet and are deliberately NOT re-specified
   here. Only the type and the logo row are this page's.
   ============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #f2f7ff; max-width: 640px; }
.zmit-recognized-logos { gap: 36px; }
.zmit-recognized-logos img { height: 50px; width: auto; }
.zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }

/* ============================================================
   STRUCTURED APPROACH — TWO COLUMNS, confirmed with the sideBySide test at
   1440: copy column 700 at x20 (inner 640 at x50) and the accordion column
   700 at x720 (inner 640 at x750) share a top, and 720 > 20 + 200.
   Accordion is native <details>, all items CLOSED on load (live's own state);
   item header #262338 with #fcfcfc label, padding 25, radius 5, 77 tall.
   DARK PANEL => LIGHT COPY. Reused from the MSSP page's .zab-proc component.
   ============================================================ */
.zmit .zab-proc.z-section { background: #fff; padding: 50px 0 30px; }
.zab-proc-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 20px; }
.zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 20px; }
.zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
.zab-proc-copy a { color: var(--zab-accent); }
.zab-proc-acc { display: flex; flex-direction: column; gap: 7px; }
.zab-proc-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; }
.zab-proc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 25px; cursor: pointer; list-style: none; min-height: 77px;
    font-size: 18px; font-weight: 400; line-height: 27px; color: #fcfcfc;
}
.zab-proc-q::-webkit-details-marker { display: none; }
.zab-proc-sign { position: relative; flex: 0 0 16px; height: 16px; }
.zab-proc-sign::before,
.zab-proc-sign::after { content: ''; position: absolute; background: #0161ff; }
.zab-proc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; }
.zab-proc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; }
.zab-proc-item[open] .zab-proc-sign::after { opacity: 0; }
.zab-proc-a { padding: 0 25px 25px; }
.zmit .zab-proc-a p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #f7f7fc; margin: 0; }
.zab-proc-a a { color: #a9c9ff; }

/* Guard (owner defect, 2026-09-21): a closed row must never paint its answer. The UA
   already hides details content and live opens NONE of these rows at rest, but the
   owner saw every row open at once with all answers showing, so the hiding is stated
   explicitly here rather than left to the engine. Live, measured at 1440: row 77
   collapsed, summary padding 25 / radius 5 / background #262338, the answer inside
   that same dark card, rows 7px apart, one open at a time. */
.zab-proc-acc details:not([open]) > *:not(summary) { display: none; }
@media (min-width: 1081px) {
    /* 700 | 700 of live's 1400 row; live's own 60px inner gutter comes from
       the two 30px paddings, so a 50px grid gap reproduces the same rhythm
       inside the narrower house container. */
    .zab-proc-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
}

/* ============================================================
   STATS — #262338; copy column 443 at x30 | FOUR counters right in a 2x2
   grid (399px cells at x523 / x942, 20px gap). Number 57px ON TOP, label
   below. FOUR stats => TWO columns (CLAUDE.md: a 4-stat page left on the
   shared 3-col default renders a broken 3+1).
   DARK BAND => LIGHT COPY.
   ============================================================ */
.zmit-stats { background: var(--zab-dark); }
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 60px 0; }
.zmit-stats-copy { max-width: none; }
.zmit .zmit-stats-copy h2.zmit-stats-eyebrow { font-size: 16px; font-weight: 400; line-height: 19px; color: #fff; margin: 0 0 18px; display: block; letter-spacing: normal; text-transform: none; }
.zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 40px; }
@media (min-width: 1081px) {
    .zmit-stats-layout { grid-template-columns: 443fr 887fr; gap: 50px; align-items: center; }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 44px; align-items: start; }
}
.zmit-stat { display: flex; flex-direction: column; }
.zmit-stat p { font-size: 14px; font-weight: 400; line-height: 21px; color: #fcfcfc; margin: 0; }
.zmit-stat .big {
    /* Owner request 2026-08-31: the stat NUMBER is left-aligned so it shares
       a left edge with its label. Live centres the number inside the same
       column while the label is start-aligned. Deliberate deviation from
       live — do NOT "fix" this back to center. */
    order: -1; text-align: left;
    font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}
/* Live's own "Upto" prefix and the %/days suffixes sit inline with the number. */
.zmit-stat .big .pct { font-size: 57px; font-weight: 600; }
.zmit-stat .big .pct:first-child { font-size: 24px; margin-right: 8px; }

/* ============================================================
   TESTIMONIALS — heading 34px/300/44.2px LEFT.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 40px; }
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
    /* DEFECT FIX (owner, 2026-09-21): the card is CONTENT-DRIVEN. It used to carry
       min-height: 352px copied off live's own card height, and the shared sheet adds
       min-height: 268px + display:flex/align-items:center - so a short quote was
       centred in a fixed box and left a large blank band under the text
       (measured 106 px of dead space top AND bottom at 1440). Both floors are
       cleared here. The slides are stacked in ONE grid cell instead of the shared
       display:none/block swap, so the deck's height is the tallest slide and the
       auto-advance below cannot make the page jump. */
    min-height: 0;
    display: grid;
    align-items: center;
}
.zmit-testi-card > .zmit-testi-slide { grid-area: 1 / 1; display: block; visibility: hidden; }
.zmit-testi-card > .zmit-testi-slide.is-active { visibility: visible; }
.zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; }

/* ============================================================
   COPY | 2x2 ICON CARDS — measured at 1440: #eff0f7, copy 665 at x30 | 50
   gap | 2x2 card grid 665 at x745 (cells 322.5, gap 20), cards TRANSPARENT
   (the band is the fill), 20px padding, 50px icon.
   Reused verbatim from the law-firms / MSSP .zab-elevate component — live
   serves the same container shape and the measured geometry matches.
   ============================================================ */
.zmit .zab-elevate.z-section { background: var(--zab-fill); padding: 30px 0; }
.zab-elevate-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-elevate-copy h2 { font-size: 34px; font-weight: 400; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 24px; }
.zmit .zab-elevate-copy p { font-size: 18px; font-weight: 400; line-height: 27px; color: var(--zab-ink); margin: 0 0 24px; }
.zmit .zab-elevate-copy p:last-child { margin-bottom: 0; }
.zab-elevate-copy a { color: var(--zab-accent); }
.zab-elevate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; align-content: start; }
.zab-elevate-card { padding: 20px; }
.zab-elevate-ico { display: block; margin-bottom: 16px; }
.zab-elevate-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-elevate-card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #141414; margin: 0 0 12px; }
.zmit .zab-elevate-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: var(--zab-body); margin: 0; }
.zab-elevate-card a { color: var(--zab-accent); }
@media (min-width: 1081px) {
    .zab-elevate-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
}

/* ============================================================
   SUCCESS STORIES — card + 50px left-aligned brand-logo treatment (approved
   Family A rule; a missing logo is a visible defect, never a fallback).
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 23px 0; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; margin-bottom: 30px; }
.zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; }
.zmit-story-img img { height: 250px; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 150px;
    object-fit: contain; object-position: left center;
}
.zmit-story .body { padding: 20px; }
.zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.zmit-story p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   INDUSTRIES — measured at 1440: band #f7f7fc, 70px vertical padding;
   heading 34.7px/400 #1f1f1f centred; lead 15.5px/400/25px centred (728
   wide); flip cards 260x270 radius 10, FIVE per row 15px apart, front
   padding 12px 27px, back padding 11px, front #f1f1f7 / back #fff.
   The 3D flip mechanism itself is already in the shared sheet
   (.zmit-ind-inner / -front / -back) — only this band's sizing and type are
   set here.
   ============================================================ */
.zmit .zmit-industries { background: #f7f7fc; }
.zmit .zmit-industries.z-section { padding: 70px 0; }
.zmit-industries-head { text-align: center; max-width: 728px; margin: 0 auto 48px; }
.zmit .zmit-industries-head h2 { font-size: 34.7px; font-weight: 400; line-height: 1.3; color: #1f1f1f; margin: 0 0 18px; }
.zmit .zmit-industries-head p.z-lead { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; margin: 0; }
.zmit-industries-head a { color: var(--zab-accent); }
.zmit-industries-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.zmit .zmit-industries .zmit-ind-card { min-height: 270px; border-radius: 10px; }
.zmit-ind-front { background: #f1f1f7; border-radius: 10px; padding: 12px 27px; }
.zmit-ind-back { background: #fff; border-radius: 10px; padding: 11px; }
.zmit .zmit-ind-front h3 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #111; }
.zmit .zmit-ind-back h3, .zmit .zmit-ind-back .zmit-ind-back-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: #1c1a33; margin: 0; flex-shrink: 0; letter-spacing: -0.01em; }
.zmit .zmit-ind-back li { font-size: 11.5px; line-height: 1.4; color: #333; }
.zmit-ind-back a { color: var(--zab-accent); }
.zmit .zmit-ind-ic img { width: 48px; height: 48px; object-fit: contain; }

/* ============================================================
   COPY + CTA | PHOTO — measured at 1440: #fcfcfc, copy 665 at x30 | 50 gap |
   665x400 photo at x745, radius 10, cover. Reused from the law-firms
   .zab-empower component.
   ============================================================ */
.zmit .zab-empower.z-section { background: #fcfcfc; padding: 30px 0; }
.zab-empower-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-empower-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0 0 40px; }
.zmit .zab-empower-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 26px; }
.zab-empower-copy a { color: var(--zab-accent); }
.zmit .zab-empower-copy .zab-btn { margin-top: 14px; }
.zab-empower-media img { display: block; width: 100%; height: auto; aspect-ratio: 658 / 400; object-fit: cover; border-radius: 10px; }
@media (min-width: 1081px) {
    /* align-items START, not center: live pins the 400-tall photo to the TOP
       of its column, so centring it drops the photo and the sideBySide test
       fails on the top comparison. */
    .zab-empower-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
}

/* ============================================================
   FAQ — #eff0f7 band, two columns split 9 / 18 minus 9.
   NEVER a two-value padding shorthand here (it zeroes the shared 22px sides
   and the first character looks clipped).
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 30px 0; }
.zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
.zmit-faq-list { column-gap: 30px; padding-right: 25px; }
/* Live ships TWO explicit accordion widgets; the forced break reproduces
   live's own split. Gated to DESKTOP only: below 1081 live stacks the two widgets
   into one column, and with column-count:1 a forced break would still create a
   second column. */
@media (min-width: 1081px) {
    .zmit-faq-item:nth-child(9) { break-after: column; }
}

/* ============================================================
   FINAL CTA — no band fill of its own; copy column left with the accent CTA
   and a 500x576 consultant figure right (measured at x910).
   The SHARED sheet absolutely positions this figure for the REFERENCE band
   (position:absolute; right:56px; bottom:0; height:320px). This page's band
   is a two-column row, so that MUST be reset here — otherwise the image
   leaves its cell, the cell collapses to 0 height, and it covers the copy.
   ============================================================ */
/* Mobile keeps the tight 30px lead-in: at 430 live stacks the figure under the
   copy with no overhang, so it needs no clearance (live's own 430 margin is
   50px 0). The desktop 150px/80px lives in the min-width:1081px block below. */
.zmit .zmit-final.z-section { margin: 30px 0 0; padding: 0; background: #fff; }
/* Live's row IS painted - read it with the band IN VIEW and settled, or
   Seraphinite's deferred CSS reports backgroundImage:none and you copy a
   flatness live does not have. Measured 2026-09-10 at 1440. */
.zmit-final-banner {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px; padding: 0;
    display: flex; justify-content: space-between; gap: 20px;
}
/* Live's copy column (718d6c9) is a STRETCHED flex column with its content
   centred, so the copy is what the band height reads from - not the figure. */
.zmit-final-copy { flex: 0 0 690px; max-width: 690px; padding: 50px; border-radius: 5px;
    display: flex; flex-direction: column; justify-content: center; }
.zmit-final-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 16px; }
.zmit-final-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); max-width: 658px; margin: 0 0 26px; }
/* THE OVERHANG. Measured on LIVE at 1440 (window.innerWidth asserted 1440):
   band 1440 x 438 transparent (no fill, no radius); copy column 690 at x30,
   padding 50, radius 5, transparent, height 438; figure 500 x 576,
   object-fit fill, position static, margin 0; media column align-self
   flex-end, position relative, overflow visible; imgTopVsBandTop -138 and
   imgOverhangBelowBand 0 - it hangs out of the TOP, never below.
   Live gets that from margin: -10% on the media column, which against its own
   1380 row resolves to -138px; the fixed -138px reproduces the same pixels in
   the narrower 1340 house container. It cuts the column's height CONTRIBUTION
   to 576 - 138 = 438, so the row stops growing. Without it the band becomes
   576 tall - the empty-white-area defect the owner reported.
   Desktop only: at 430 live stacks (copy 417, then figure 390 x 500, media
   margin-top -46.8px), and the max-width:1080 block below owns that. */
.zmit-final-media { align-self: flex-end; flex: 0 0 500px; max-width: 500px; position: relative; overflow: visible; }
@media (min-width: 1081px) {
    /* Live's band (e-con 1187a39) is margin: 150px 0 80px at desktop. The 150px
       top is the figure's room to hang ABOVE the band - do not shrink it. */
    .zmit .zmit-final.z-section { margin: 150px 0 80px; }
    .zmit-final-media { margin-top: -138px; }
}
.zmit-final-media img {
    position: static; right: auto; bottom: auto;
    display: block; width: 100%; max-width: 500px; height: auto;
    margin: 0 0 0 auto; object-fit: contain;
    /* Reserve live's own 500x576 box: without it a not-yet-loaded (or locally
       referer-blocked) CloudFront image collapses the band to ~256px and
       shifts the page. */
    aspect-ratio: 500 / 576;
}

/* ============================================================
   REQUEST A CONSULTATION — the shared sheet's Family A band (blue gradient,
   light copy) with the owner-approved narrower 620px white form card.
   Heading 33.89px/300/43px, measured on live.
   NOT copied from live: live paints this band WHITE while keeping the
   heading and copy #fcfcfc, so both are invisible on the live page
   (confirmed with a 1440 screenshot). That is a live defect; the readable
   Family A band is kept.
   ============================================================ */
.zmit .zmit-contact.z-section { padding: 50px 0; }
.zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; }
.zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; }
.zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 620px; }
.zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; }

/* ============================================================
   PRE-FOOTER BAND — #000, 80px vertical padding, copy column 770 and the two
   buttons 280 wide. DARK BAND => LIGHT COPY.
   ============================================================ */
.zmit-insights-copy p.zmit-insights-title { font-weight: 400; border-left: 2px solid #fff; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-weight: 400; color: #fff; }
.zmit-insights-btns a {
    background: #fff; color: #000; border: 1px solid #fff; border-radius: 5px;
    font-size: 16px; font-weight: 500; line-height: 24px; min-width: 0; justify-content: center;
}
.zmit-insights-btns a:last-child { background: transparent; color: #fff; }
.zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; }

/* PHONE (<=680): the shared grid keeps copy | buttons side by side at every width,
   which crushed the copy into a 100px column. Stack it as the reference does: logo,
   barred tagline, copy, then the two buttons full width. */
@media (max-width: 680px) {
    .zmit .zmit-insights.z-section { padding: 50px 0; }
    .zmit .zmit-insights-grid { grid-template-columns: 1fr; gap: 40px; }
    .zmit .zmit-insights-copy { grid-template-columns: 1fr; row-gap: 20px; }
    .zmit .zmit-insights-logo { height: 50px; width: auto; max-width: 100%; }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 22px; padding-left: 10px; margin-left: 0; max-width: none; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14.6px; line-height: 22px; max-width: none; margin: 0; }
    .zmit .zmit-insights-btns { flex-direction: column; gap: 17px; }
    .zmit .zmit-insights-btns a { width: 100%; padding: 13px 20px; }
}
@media (min-width: 1081px) {
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 225px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 50px; width: 225px; object-fit: contain; object-position: left center; }
    .zmit-insights-copy p.zmit-insights-title {
        font-size: 28px; line-height: 34px;
        padding-left: 20px; margin-left: 0; max-width: none;
    }
    .zmit-insights-copy p:not(.zmit-insights-title) {
        /* Owner request 2026-08-26: no dead space under this band. */
        font-size: 20px; line-height: 28px; max-width: 770px; margin: 0;
    }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { padding: 16px 30px; width: 280px; }
}

/* ============================================================
   TABLET (<= 1080)
   ============================================================ */
@media (max-width: 1080px) {
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* The SHARED sheet never stacks .zmit-stats-layout, so without this the
       copy | counters row stays 2-col and the counter column overflows the
       viewport at 375. Found by measuring element widths, not scrollWidth
       (body{overflow-x:hidden} hides it from scrollWidth). */
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; }
    .zab-cmp-grid { grid-template-columns: 1fr; }
    .zmit .zab-cmp-cell { height: auto; min-height: 80px; }
    .zmit .zab-certified h2 { font-size: 34px; line-height: 1.3; }
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
    .zmit .zab-certified-dark .zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
    /* Live's panel is ONE column at 768 (measured grid track 708px). */
    .zab-trust-panel { grid-template-columns: 1fr; }
    .zmit .zab-trust-eyebrow { font-size: 26px; line-height: 1.3; margin-bottom: 24px; }
    .zmit .zab-nist h2 { font-size: 30px; line-height: 1.3; }
    .zmit .zab-proc-copy h2 { font-size: 25px; line-height: 1.3; }
    .zmit .zab-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-elevate-copy p { font-size: 16px; line-height: 25px; }
    /* Live wraps its fixed 260px flip cards, so 768 lands on TWO per row
       (measured: card 260 in a 708 box) — not three. */
    .zmit-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zmit-final-banner { flex-direction: column; align-items: flex-start; padding: 0; }
    .zmit-final-media { align-self: center; }
    .zmit-final-media img { max-width: 400px; }
    /* Live's recognition band at 768: the inherited 36px gap wraps the logo
       row and inflates the band. Kill the column gap, give the row a 20px
       row-gap instead. */
    .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; }
}

/* ============================================================
   PHONE (<= 680)
   ============================================================ */
@media (max-width: 680px) {
    .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
    .zmit-services-grid { grid-template-columns: 1fr; }
    .zmit .zmit-services-head .z-eyebrow { font-size: 14px; }
    .zmit .zab-svc-lead { font-size: 24px; line-height: 1.3; }
    .zmit .zab-cmp-head h2 { font-size: 22px; }
    .zmit .zab-certified.z-section { padding: 40px 0; }
    .zmit .zab-certified h2 { font-size: 26px; }
    .zmit .zab-certified-dark h2 { font-size: 24px; line-height: 1.3; }
    .zab-certified-badges { grid-template-columns: 1fr; margin-top: 28px; }
    .zmit .zab-certified-dark .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
    .zab-cert-box { min-height: 0; }
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { padding: 24px 20px; }
    .zmit .zab-trust-eyebrow { font-size: 22px; }
    .zmit .zab-nist h2 { font-size: 22px; line-height: 1.3; }
    .zab-nist-letter { font-size: 60px; line-height: 60px; }
    /* Live at 375: question 14.59px/24.08px, 20px vertical padding. The
       horizontal 22px is restated so the shorthand cannot zero it. */
    .zmit-faq-q { padding: 20px 22px; font-size: 14.6px; line-height: 24px; }
    .zmit .zab-proc-copy h2 { font-size: 22px; }
    .zmit .zab-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 22px; }
    .zab-elevate-cards { grid-template-columns: 1fr; gap: 20px; }
    .zab-elevate-card { padding: 16px 0; }
    .zmit-stats-grid { grid-template-columns: 1fr; }
    /* At 375 live's card is 335 wide in a 335 box => ONE per row. */
    .zmit-industries-grid { grid-template-columns: 1fr; }
    .zmit .zmit-industries.z-section { padding: 40px 0; }
    .zmit .zmit-industries-head h2 { font-size: 24px; }
    .zmit-final-copy h2 { font-size: 26px; line-height: 1.3; }
    .zmit-final-media img { max-width: 300px; }
    /* Live's recognition CTA overflows its box at 375 unless the label wraps. */
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
    /* At 375 BOTH bounds must be released on the review logos — max-height
       beats height, so leaving it set keeps the row too tall. */
    .zmit-recognized-logos img { height: auto; max-height: 40px; max-width: 100%; }
}

/* Video band down the breakpoints. */
@media (max-width: 1080px) {
    .zmit .zab-video-copy h2 { font-size: 26px; line-height: 34px; }
}
@media (max-width: 680px) {
    .zmit .zab-video.z-section { padding: 16px 0 24px; }
    .zab-video-grid { gap: 24px; }
    .zmit .zab-video-copy h2 { font-size: 22px; line-height: 30px; margin-bottom: 18px; }
    .zab-video-copy .zab-btn { margin-bottom: 28px; }
    .zab-video-quote { padding: 0 0 0 20px; border-left: 2px solid var(--zab-fill); }
    .zab-video-quote p { font-size: 16px; line-height: 24px; }
}

/* ============================================================
   TECH STACK — .zab-stack (nested tabs), from nearshore-software-development
   ============================================================ */
.zmit .zab-stack.z-section { background: #fff; padding: 30px 0 40px; }
.zmit .zab-stack h2 { font-size: 34.7px; font-weight: 400; line-height: 45.11px; color: #141414; margin: 0 0 11px; }
.zmit .zab-stack-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); max-width: 720px; margin: 0 0 28px; }
.zmit .zab-stack-layout { display: flex; align-items: flex-start; border-top: 1px solid #e4e7f1; padding-top: 30px; }
.zmit .zab-stack-rail { display: flex; flex-direction: column; gap: 10px; width: 300px; flex: 0 0 300px;
    border-right: 1px solid #e4e7f1; padding-right: 25px; }
.zmit .zab-stack-tab { width: 275px; min-height: 56px; padding: 20px; border: 0; border-radius: 5px;
    background: #fff; color: #141414; font-size: 16px; font-weight: 400; line-height: 16px;
    text-align: left; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.zmit .zab-stack-tab:hover { background: #edf4ff; color: #000; }   /* live 076573c desktop (mouse) hover */
.zmit .zab-stack-tab.is-active { background: #0161ff; color: #fff; }
.zmit .zab-stack-panels { flex: 1 1 auto; padding-left: 30px; }
.zmit .zab-stack-panel { display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start; }
.zmit .zab-stack-panel[hidden] { display: none; }
.zmit .zab-stack-card { display: flex; align-items: center; gap: 12px; width: 298px;
    background: #eff0f7; border-radius: 8px; padding: 15px; }
.zmit .zab-stack-card img { width: 50px; height: 50px; object-fit: contain; flex: 0 0 50px; }
.zmit .zab-stack-card span { font-size: 18px; font-weight: 400; line-height: 1.3; color: #141414; }

@media (max-width: 1080px) {
    .zmit .zab-stack h2 { font-size: 27px; line-height: 1.3; }
}
/* Stacking is PHONE-only: live keeps the rail | cards layout at every tablet width
   (measured side by side at 768 and 1024). */
@media (max-width: 680px), (orientation: landscape) and (max-height: 500px) {
    .zmit .zab-stack-layout { display: block; }
    .zmit .zab-stack-rail { width: 100%; flex: none; border-right: 0; padding-right: 0;
        flex-direction: row; flex-wrap: wrap; margin-bottom: 24px; }
    .zmit .zab-stack-tab { width: auto; min-height: 0; padding: 12px 18px; }
    .zmit .zab-stack-panels { padding-left: 0; }
}
@media (max-width: 600px) {
    .zmit .zab-stack h2 { font-size: 24px; }
    .zmit .zab-stack-card { width: 100%; }
}
.zmit a.zab-stack-card { text-decoration: none; }

/* ============================================================
   COMPARISON ACCORDION — MOBILE/TABLET ONLY (live c4b5cce carries
   elementor-hidden-widescreen/desktop/laptop), from application-management-services
   ============================================================ */
.zab-cmp-acc { display: none; }
/* Up to 1200 = live's tablet_extra: the accordion shows on EVERY tablet, portrait and
   landscape (measured on live at 1180); the table only from 1201. */
@media (max-width: 1200px) {
    .zab-cmp { display: none; }
    .zab-cmp-acc { display: block; }
}
/* Services: live is 3-up in landscape tablets (1081-1200, measured 3 x 347 with 30px
   gaps at 1180); 2-up below comes from the shared sheet, 4-up above 1200. */
@media (min-width: 1081px) and (max-width: 1200px) {
    .zmit .zmit-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}
.zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
.zab-acc-item { background: var(--zab-fill); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.zab-acc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--zab-ink);
}
.zab-acc-q::-webkit-details-marker { display: none; }
.zab-acc-sign { position: relative; flex: 0 0 16px; height: 16px; }
.zab-acc-sign::before,
.zab-acc-sign::after { content: ''; position: absolute; background: var(--zab-ink); }
.zab-acc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; }
.zab-acc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; }
.zab-acc-item[open] .zab-acc-sign::after { opacity: 0; }
.zab-acc-a { padding: 0 22px 20px; }
.zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding-top: 14px; }
.zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
.zab-acc-ico svg { display: block; width: 22px; height: 22px; }
.zmit .zab-acc-row h3, .zmit .zab-acc-row .zab-acc-label { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 6px; letter-spacing: -0.01em; }  /* label was an <h3>: keep its tracking */
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-body); margin: 0; }

/* ============================================================
   ARTICLES — cards are image + date + title, NO excerpt (owner ruling) and
   NO category (live ships none here).
   ============================================================ */
.zmit .zmit-articles.z-section { background: #fff; padding: 30px 0; }
.zmit-articles-head { margin-bottom: 29px; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; }
.zmit-articles-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; color: var(--zab-accent);
    border-bottom: 1px solid var(--zab-accent); padding-bottom: 5px;
}
.zmit-articles-more:hover { color: #141414; border-color: #141414; }
.zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.zmit-articles-grid { gap: 30px; }
/* Card = live's JetEngine listing item (post-25421.css, read off live): the WHOLE card
   tints to the global rgba(1,97,255,.08) on hover (.3s) and the title stays DARK. The
   shared sheet's #cde9ff was measured off a different template and the blue title was
   never live's. The image is clipped by the card's 10px radius (square bottom edge, as
   live) so the tint meets it flush. Rhythm: img -> 10 -> date -> 10 -> title -> 20,
   inset 10px (ss7). */
.zmit-article { border-radius: 10px; overflow: hidden; text-decoration: none; }
.zmit .zmit-articles .zmit-article { transition: background .3s ease; }
.zmit .zmit-articles .zmit-article:hover,
.zmit .zmit-articles .zmit-article:focus-within,
.zmit .zmit-articles .zmit-article:active { background: rgba(1, 97, 255, .08); }
.zmit .zmit-articles .zmit-article-img { border-radius: 0; }
.zmit-article-img img { height: 270px; }
.zmit .zmit-articles .zmit-article .body { padding: 10px 10px 20px; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 500; color: var(--zab-accent); margin: 0 0 10px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 600; line-height: 28.8px; color: var(--zab-ink); margin: 0; }
/* TABLET (681-1080) = live at 768: TWO columns, 20px gaps both ways (the inherited
   3-up squeezed cards to 211px); the "Explore All" link is 14.6/500. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .zmit .zmit-articles-more { font-size: 14.6px; }
}
.zab-chev svg { fill: none; }

/* ============================================================
   HERO — OWNER 2026-09-28 (reference: final @media block of
   css/enterprise-software-development-company.css). Deliberate deviations from
   live: headline 42px/52px, the banner sized by the COPY column instead of
   being stretched by the form card, and the card keeps live's ~96px overhang
   into the logo strip (owner: never shrink the overhang). >=60px under the CTA.
   ============================================================ */
@media (min-width: 1081px) {
    .zmit .zmit-hero { min-height: 0; }
    .zmit .zmit-hero .zmit-hero-headline { font-size: 42px; line-height: 52px; }
    .zmit .zmit-hero .zmit-hero-left { padding-bottom: 60px; align-self: start; }
    .zmit .zmit-hero .zmit-hero-right { align-self: start; margin: -44px 0 -95.55px; }
    .zmit .zmit-hero .zmit-form-card { height: auto; min-height: 0; justify-content: flex-start; }
    .zmit .zmit-hero .zmit-form-card > .zmit-hsform { flex: 0 0 auto; }
    .zmit .zmit-hero .zmit-form-card > .zmit-form-note { margin: 16px 0 6px !important; }
}

/* ============================================================
   IT MANAGED SERVICES DELTAS — measured on live at 1440
   ============================================================ */
/* S02 value panel dff2279 - 500 = 30 + eyebrow 43 + 52 + panel 344 + 30.
   Panel radius 15; cell 32/25 padding, 108 icon, title 15/900, copy 15/28/600. */
.zmit .zab-trust.z-section { padding: 30px 0; }
.zmit .zab-trust-eyebrow { margin: 0 0 53px; }
.zmit .zab-trust-panel { border-radius: 15px; }
.zmit .zab-trust-ico svg { width: 108px; height: 108px; }

/* S03 services 67621bc - band on WHITE, 20 top / 30 bottom; 4-up, 30px gaps
   (323px cards in live's 1380 row). This page's live card is the NESTED-CITY
   template, measured with a real pointer: CTA position:absolute (13px off the
   card foot) and display none -> block, card height content-driven and
   identical at rest and hovered, and the card LIFTS translate(-10px,-10px)
   on hover. Do not carry the industry (no-lift, in-flow CTA) values back here. */
.zmit .zmit-services.z-section { background: #fff; padding: 20px 0 30px; }
.zmit-services-grid { gap: 30px; }
.zmit-services-grid .zmit-svc-card { position: relative; transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.zmit-services-grid .zmit-svc-card ul { margin: 0 0 12px; }
.zmit-services-grid .zmit-svc-card .zmit-svc-cta {
    position: absolute; left: 30px; right: 30px; bottom: 13px;
    margin-top: 0; padding-top: 0;
}
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: translate(-10px, -10px); }
@media (prefers-reduced-motion: reduce) {
    .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: none; }
}

/* S04 video 79053d9 - the band IS the video (883x497 in live's 1400 box; 844x475
   in the house 1340 box, -22 from the width standard). Copy column 50px down,
   h2 30/39/600 -> 40 -> button (14px/500, 16px 30px, square) -> 40 -> quote
   18/23.4/600. */
.zmit .zab-video.z-section { padding: 0; }
@media (min-width: 1081px) {
    .zmit .zab-video-copy { padding-top: 50px; }
    .zmit .zab-video-copy h2 { margin-bottom: 40px; }
}
.zmit .zab-video-copy .zab-btn { font-size: 14px; font-weight: 500; line-height: 14px; padding: 16px 30px; border-radius: 0; color: #f2f7ff; }
.zmit .zab-video-quote p { font-weight: 600; }

/* S05 compare heading bc10ef1 - 122 = 50 + 20 + 37 + 15. */
.zmit .zab-cmp-head.z-section { padding: 70px 0 15px; }

/* S08 standards e8b40eb - BLACK band. 468 = 35 + h2 56 + 11 + copy 79 + 28 +
   badges 230 + 30 at live's full-bleed 227px tiles; the house 1340 box gives
   210px tiles (-17). 16px-gap grid at NATURAL aspect (CLAUDE.md). */
.zmit .zab-certified.z-section { background: #000; padding: 35px 0 30px; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; max-width: 850px; }
.zmit .zab-certified > .z-container > p { color: #c2c2c2; max-width: 800px; margin: 11px auto 0; line-height: 26.4px; }
.zmit .zab-certified-badges { grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 28px; align-items: center; }
.zmit .zab-certified-badges img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) { .zmit .zab-certified-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
    .zmit .zab-certified h2 { font-size: 26px; line-height: 1.3; }
    .zmit .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
}

/* S09 bookcal 9d8aa13 - 910 = 30 + h2 39 + 10 + copy 36 (one line) + 10 + 784 well. */
.zmit .zmit-bookcal.z-section { padding: 30px 0 1px; }
.zmit .zmit-bookcal h2 { margin-bottom: 10px; }
.zmit .zmit-bookcal p { max-width: none; margin: 0 auto; padding-bottom: 10px; line-height: 26.4px; }
.zmit .zmit-bookcal-embed { margin-top: 10px; }
.zmit-bookcal-embed, .zmit-bookcal-embed .meetings-iframe-container, .zmit-bookcal-embed iframe { height: 784px; min-height: 0; }

/* S10 recognized 8acdfcf - 467 = 72 + box 327 + 68. Box padding 40: h2 30/42/300
   -> 20 -> copy 16/26.4/300 -> 20 -> three 70px logos flush (0 gap), copy
   column 720; button 16px/500, padding 20, radius 8. */
.zmit .zmit-recognized.z-section { padding: 72px 0 68px; }
.zmit .zmit-recognized-copy { max-width: 720px; }
.zmit .zmit-recognized-copy h2 { margin-bottom: 20px; }
.zmit .zmit-recognized-copy p { line-height: 26.4px; margin-bottom: 20px; }
.zmit .zmit-recognized-logos { gap: 0; }
.zmit .zmit-recognized-logos img { height: 70px; width: auto; max-height: none; }
.zmit .zmit-recognized-cta .z-btn { font-size: 16px; font-weight: 500; line-height: 16px; padding: 20px; }

/* S11a tech stack 2b6a5d8 - 773 = 30 + head 163 (h3 34.7/45.11, 20, lead 16/22.4
   700 wide, 30) + tabs 520 + 60. Rail 308 (padding-right 20) sits 50 below the
   rule and SCROLLS inside 450; the panel pads 50 top/left and is a 2-up grid,
   15 apart, of 82-tall #eff0f7 cards (padding 15, 52px logo, radius 8). */
.zmit .zab-stack.z-section { padding: 30px 0 60px; }
.zmit .zab-stack h2 { font-size: 34.7px; line-height: 45.11px; margin: 0 0 20px; }
.zmit .zab-stack-lead { font-size: 16px; line-height: 22.4px; max-width: 700px; margin: 0 0 30px; }
@media (min-width: 681px) {
    .zmit .zab-stack-layout { padding-top: 0; height: 520px; }
    .zmit .zab-stack-rail { width: 308px; flex: 0 0 308px; padding: 0 20px 0 0; margin-top: 50px; height: 450px;
        overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
    /* width:auto (not a fixed 288) so the tab shrinks to the space the vertical
       scrollbar leaves — a fixed width overflowed by ~11px and, because overflow-y:auto
       forces overflow-x to compute to auto too, that spawned a spurious HORIZONTAL
       scrollbar under the rail. */
    .zmit .zab-stack-tab { width: auto; flex: 0 0 auto; }
    .zmit .zab-stack-panels { padding: 50px 0 0 50px; align-self: stretch; }
    .zmit .zab-stack-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .zmit .zab-stack-card { width: auto; min-height: 82px; }
}
.zmit .zab-stack-card img { width: 52px; height: 52px; flex: 0 0 52px; }
.zmit .zab-stack-card span { margin-left: 28px; }
/* Linked tech cards LIFT on hover like the industry tiles; the label does NOT turn
   blue (owner 2026-10-01 — match 1password: keep the text dark, move the card). */
.zmit a.zab-stack-card { transition: transform .2s ease, box-shadow .2s ease; }
.zmit a.zab-stack-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 20, 43, .10); }
.zmit a.zab-stack-card:hover span { color: #141414; }
@media (prefers-reduced-motion: reduce) { .zmit a.zab-stack-card:hover { transform: none; } }

/* S12 approach 3884462 - 591 = 60 + 491 + 40; copy paragraphs keep live's
   25.6px margin INCLUDING the last one (the copy column sets the height). */
.zmit .zab-proc.z-section { padding: 60px 0 40px; }
.zmit .zab-proc-copy p,
.zmit .zab-proc-copy p:last-child { margin: 0 0 25.6px; }

/* S13 stats d5a0c2c - 492 = 40 + 412 + 40, NO outer margin. Eyebrow 16/19.2/600,
   20 to the h3, 50 to the button. */
.zmit .zmit-stats.z-section { margin: 0; padding: 40px 0; }
.zmit .zmit-stats-copy h2.zmit-stats-eyebrow { font-weight: 600; line-height: 19.2px; margin-bottom: 20px; color: #fcfcfc; }
.zmit .zmit-stats-copy h3 { margin-bottom: 50px; }

/* S14 testimonials e31b4b7 - heading -> 50 -> card. Live's card runs the full
   row (1380; 1340 here) at padding 80, radius 5, live's own 102.29deg gradient,
   arrows INSIDE its edges (38px, #e9eaf2). Name 22/28.6/600, role 34/47.6/600
   with 10px padding, quote 18/29.7.
   The card stays CONTENT-DRIVEN - owner defect fix 2026-09-21 (live's is a
   fixed 430); do not restore the fixed height. */
.zmit .zmit-testi h2 { margin-bottom: 50px; }
.zmit .zmit-testi-carousel { position: relative; display: block; }
.zmit .zmit-testi-card {
    width: 100%; padding: 80px; border-radius: 5px;
    background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zmit .zmit-testi-nav {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 38px; height: 38px; border: 0; border-radius: 0 5px 5px 0;
    background: #e9eaf2; color: #14142b; font-size: 22px;
}
.zmit .zmit-testi-nav.prev { left: -15px; border-radius: 5px 0 0 5px; }
.zmit .zmit-testi-nav.next { right: -15px; }
.zmit .zmit-testi-slide h3.zmit-testi-role { font-size: 22px; font-weight: 600; line-height: 28.6px; margin: 0 0 5px; }
.zmit .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; padding: 10px 0; margin: 0; color: #14142b; }
.zmit .zmit-testi-quote { font-size: 18px; line-height: 29.7px; color: #14142b; }
.zmit .zmit-testi-quote a { color: #046bd2; }
@media (max-width: 680px) {
    .zmit .zmit-testi-card { padding: 40px 28px; }
    .zmit .zmit-testi-lead { font-size: 22px; line-height: 1.35; }
    .zmit .zmit-testi-nav.prev { left: -8px; }
    .zmit .zmit-testi-nav.next { right: -8px; }
}

/* S16 industries 22c70d3 - heading block 222 then the grid with no gap. */
.zmit .zmit-industries-head { margin-bottom: 14px; }

/* S17 copy | photo 260a804 - live's copy column is 665; keeping 665 here
   (the photo column absorbs the house box's 40px) keeps live's line breaks.
   Paragraphs 16/26.4 separated by live's empty-<p> spacer (26.4). */
@media (min-width: 1081px) {
    .zmit .zab-empower-grid { grid-template-columns: 665px 1fr; }
}
.zmit .zab-empower-copy p { margin: 0 0 26.4px; }

/* S19 FAQ 1ad22e1 - 26 items in live's two accordions (13 | 13), columns 662
   ~56 apart on live; question 18/27/400, answer 16/25.6 #d9dbe9 with a 25.6
   paragraph margin. Horizontal answer padding stays the house 22px. */
.zmit .zmit-faq-list { padding-right: 0; column-gap: 30px; }
.zmit .zmit-faq-q { font-weight: 400; }
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-item.open .zmit-faq-a-inner { font-size: 16px; line-height: 25.6px; color: #d9dbe9; padding: 0 22px 20px; }
.zmit .zmit-faq-a-inner p { margin: 0 0 25.6px; }
.zmit .zmit-faq-a-inner a { color: #85bcff; font-weight: 500; }
@media (min-width: 1081px) {
    .zmit .zmit-faq-item:nth-child(9) { break-after: auto; }
    .zmit .zmit-faq-item:nth-child(13) { break-after: column; }
}
/* TABLET (681-1080) = live's stacked accordions (ss8, measured at 768 on live's own
   template CSS): ONE full-width column in order 1..26, question 16/24 (25+24+25 = a 74px
   collapsed row), radius 5, answer 14/22.4 #d9dbe9 with a 22.4 paragraph margin. The
   desktop 2-column split and its forced breaks are gated to >=1081 above. Phone keeps
   its own rules. Horizontal padding stays the house 22px. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-faq-list { column-count: 1; }
    .zmit .zmit-faq-q { font-size: 16px; line-height: 24px; }
    .zmit .zmit-faq-item { border-radius: 5px; }
    .zmit .zmit-faq-a-inner,
    .zmit .zmit-faq-item.open .zmit-faq-a-inner { font-size: 14px; line-height: 22.4px; }
    .zmit .zmit-faq-a-inner p { margin: 0 0 22.4px; }
}

/* S20 final 8fb50cd - box 413: copy centred (h2 33.05/42.965/600 -> 20 -> copy
   17.16/25.2 -> 20 -> auto-width button 15.38px/600, radius 5); figure 500x551
   (live's own 528x582 file) hanging 138 above the box. */
.zmit .zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.965px; margin-bottom: 20px; }
.zmit .zmit-final-copy p { font-size: 17.16px; line-height: 25.2px; margin: 0 0 20px; }
.zmit .zmit-final-copy .zab-btn { align-self: flex-start; width: auto; font-size: 15.38px; border-radius: 5px; }
.zmit .zmit-final-media img { aspect-ratio: 528 / 582; }

/* S11b ITIL 9f57a1c - 569 = 40 + h2 56 + 30 + lead 53 + 30 + row 320 + 40, on
   live's own faint blue-violet wash; lead #5e5e5e. */
.zmit .zab-nist.z-section { padding: 40px 0; background: #fff linear-gradient(rgba(1, 97, 255, .08) 0%, rgba(149, 114, 247, .08) 100%); }
.zmit .zab-nist-lead { color: #5e5e5e; }

/* S18 articles f3937f4 - h2 30/39/300, 30 to the grid. */
.zmit .zmit-articles-head h2 { font-size: 30px; line-height: 39px; }
.zmit .zmit-articles-head { margin-bottom: 30px; }

/* HERO tuning for THIS page (OWNER block above): the copy column sets a 500
   banner (42/52 headline, 3 lines, 60 under the CTA); the card is 40 + 556,
   so the gap above the form note is what holds live's ~96px overhang. */
@media (min-width: 1081px) {
    .zmit .zmit-hero .zmit-form-card > .zmit-form-note { margin: 33px 0 6px !important; }
}

/* S02 cells carry live's 1px white divider (border-right on each cell). */
@media (min-width: 1081px) {
    .zmit .zab-trust-cell:not(:last-child) { border-right: 1px solid #fff; }
}
/* S02 stacked (<=1080): the panel is 1 column so the desktop border-right no longer
   divides anything — carry live's white hairline as a BOTTOM divider between the
   stacked cells instead (image 138: lines between the value cards on phone/tablet). */
@media (max-width: 1080px) {
    .zmit .zab-trust-cell:not(:last-child) { border-bottom: 1px solid #fff; }
}
/* S04 video: live's button carries an 8x12 CHEVRON (stroke, not fill) and the
   blockquote's quotation skin draws a 70px #0161ff Times mark at -45/-20. */
.zmit .zab-btn-chev svg { width: 8px; height: 12px; }
.zmit .zab-btn-chev svg path { fill: none; stroke: currentColor; }
.zmit .zab-video-quote p { position: relative; }
.zmit .zab-video-quote p::before {
    content: "\201C"; position: absolute; left: -45px; top: -20px;
    font: 70px/70px "Times New Roman", Times, serif; color: #0161ff;
}

/* Phone: the side arrows would sit on the quote text - pin them to the card foot. */
@media (max-width: 680px) {
    .zmit .zmit-testi-card { padding-bottom: 64px; }
    .zmit .zmit-testi-nav { top: auto; bottom: 14px; transform: none; }
    .zmit .zmit-testi-nav.prev { left: 28px; border-radius: 5px; }
    .zmit .zmit-testi-nav.next { right: auto; left: 74px; border-radius: 5px; }
}

/* 2026-09-28 owner: industry grid centred like live. Live is a centred, wrapping
   flex row (card-container: flex-wrap, justify-content center, gap 15), so every
   row - including a partial last row - sits in the middle at any width. Cards stay
   256 wide so five fit the 1340 house box (live's are 260 in a 1365 box). Desktop
   only; the 2-up/1-up phone grids above are untouched. */
@media (min-width: 1081px) {
    .zmit .zmit-industries-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
    .zmit .zmit-industries-grid > * { flex: 0 0 256px; max-width: 256px; grid-column: auto !important; }
}

/* 2026-09-28 owner: spacing. Live leaves 40px between the compare table's last row
   and the black Global Standards band; ours had 0 so the band butted the table. */
.zmit .zab-cmp.z-section { padding-bottom: 40px; }

/* ============================================================
   OWNER 2026-10-01 — six page fixes. Page-local only; no tracking / GTM / SEO /
   form / meetings markup touched.
   ============================================================ */

/* (1) HERO CTA size — match the web-development-company-dubai reference button:
   16px label, 13px 35px padding, 8px radius (was 12px / 12px 24px). Colours
   already matched. !important because the 12px source outranks plain specificity. */
.zmit .zmit-hero .zmit-hero-cta-btn {
    font-size: 16px !important; padding: 13px 35px !important; border-radius: 8px; min-height: 0;
}

/* (2) Reverted 2026-10-01 (owner): the -webkit-text-stroke faux-bold on the
   value-panel titles looked odd, so it was removed. The site's Poppins is a single
   400 face over a weight range, so the existing font-weight:900 is a visual no-op;
   titles keep their original (regular) rendering. */

/* (3) ITIL EXPANDER — on the OPEN panel the blue -> violet gradient is ONLY on the
   left LETTER COLUMN (the .zab-nist-tab), with a white icon disc + white letter; the
   body (heading + copy) stays on the WHITE card with DARK text (owner 2026-10-01,
   matches the original — not a whole-panel blue). Hover-to-open is wired in
   scripts.php (mouseenter + focus + click). */
.zmit .zab-nist-item.is-open .zab-nist-tab {
    background: linear-gradient(180deg, #0161ff 0%, #9572f7 100%);
    align-self: stretch;   /* full-height blue strip (the open row is align-items:center) */
    justify-content: space-between;   /* icon pinned TOP, big letter pinned BOTTOM (ss122) */
    padding: 34px 25px;
}
.zmit .zab-nist-item.is-open .zab-nist-ico { background: #fff; }
.zmit .zab-nist-item.is-open .zab-nist-letter { color: #fff; }
/* MOBILE (<=1080): the open header is a HORIZONTAL strip (icon left, letter right),
   so the desktop column's tall 34px vertical padding made the blue band ~138px where
   live's is ~95px. Shrink the padding (align its left edge to the body's 20px) and give
   the title a small gap so it isn't flush against the gradient (ss5). */
@media (max-width: 1080px) {
    /* Every item (collapsed too) = icon LEFT, letter RIGHT, as live — not only when open. */
    .zmit .zab-nist-tab { justify-content: space-between; }
    .zmit .zab-nist-item.is-open .zab-nist-tab { padding: 14px 20px; }
    .zmit .zab-nist-item.is-open .zab-nist-body { padding-top: 16px; }
}

/* (4) MOBILE COMPARE ACCORDION — match 1password-support-services: the answer
   description is BLACK (--zab-ink, the shipped owner deviation) not grey, and the
   question is 16px. */
.zmit .zab-acc-q { font-size: 16px; }
.zmit .zab-acc-row p { color: var(--zab-ink); }
/* THE OUTER BOX COLOUR (owner): each accordion box uses the WP original's gradient — a
   70% white veil over the #ecf1eb -> #aec8fd -> #84c3fc blue gradient (measured on
   it-managed-services-wp), the light-blue box the owner pointed at, NOT flat #eff0f7. */
.zmit .zab-cmp-acc .zab-acc-item {
    background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
/* The INTERIOR (open-item rows) stays as before: opaque alternating bands over the box
   gradient — advantage row #eff0f7, gaps row #f9fcff — full-width, clipped to the radius. */
.zmit .zab-cmp-acc .zab-acc-a { padding: 0; }
.zmit .zab-cmp-acc .zab-acc-row { padding: 16px 22px; margin-top: 0; }
.zmit .zab-cmp-acc .zab-acc-row:nth-of-type(1) { background: #eff0f7; }
.zmit .zab-cmp-acc .zab-acc-row:nth-of-type(2) { background: #f9fcff; }

/* TABLET (681-1080) tech stack = live's rail | cards at 768-1024: rail ~250-290 scrolling
   inside 450, panel 20px off the rail, 2-up cards (logo 46 beside a 16px name, 76 tall,
   15px gaps). Desktop sizes above are scaled down to fit the narrower row. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zab-stack-rail { width: 270px; flex: 0 0 270px; padding-right: 15px; }
    .zmit .zab-stack-panels { padding: 50px 0 0 20px; min-width: 0; }
    .zmit .zab-stack-panel { gap: 15px; }
    .zmit .zab-stack-card { min-height: 76px; padding: 15px; gap: 12px; min-width: 0; }
    .zmit .zab-stack-card img { width: 46px; height: 46px; flex: 0 0 46px; }
    .zmit .zab-stack-card span { margin-left: 0; font-size: 16px; }
}
/* (5) MOBILE TECH STACK — desktop two-column tabs become an ACCORDION at <=680 (phone;
   live keeps the rail layout on tablet). Landscape PHONES (short screens) stack too,
   as the owner's device screenshots show:
   each category is a full-width bar and its tool grid sits directly beneath it.
   The rail/panels turn display:contents so the inline `order` on each tab/panel
   (tab0,panel0,tab1,panel1 ...) interleaves them inside the flex column. Cards
   become centred (logo over name), 2-up. */
@media (max-width: 680px), (orientation: landscape) and (max-height: 500px) {
    .zmit .zab-stack-layout { display: flex; flex-direction: column; gap: 10px; border-top: 0; padding-top: 0; height: auto; }
    .zmit .zab-stack-rail, .zmit .zab-stack-panels { display: contents; }
    /* Tabs match live's mobile nested-tabs (measured at 375): WHITE at rest, so the
       inactive ones read as plain rows and only the ACTIVE one is a card; the base
       :hover (lavender #eff0f7) carries through; blue when active. 16/400, 20px padding
       (56px tall, 72 when a label wraps), radius 5. They were all lavender 15/500 here,
       so nothing stood out and there was no visible hover state (ss3 vs ss4). */
    .zmit .zab-stack-tab {
        width: 100%; min-height: 56px; margin: 0; padding: 20px; border-radius: 5px;
        background: #fff; color: #141414; font-size: 16px; font-weight: 400; line-height: 16px;
    }
    .zmit .zab-stack-tab.is-active { background: #0161ff; color: #fff; }
    /* Hover on phone/tablet = BLUE, as live (ss1): Elementor's mouse-only hover rule
       is skipped in touch mode, so a hovered/tapped tab takes the blue title fill. */
    .zmit .zab-stack-tab:hover { background: #0161ff; color: #fff; }
    .zmit .zab-stack-panels { padding-left: 0; }
    /* 10px everywhere (tab->cards, between cards, cards->next tab), as live. */
    .zmit .zab-stack-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; width: 100%; }
    .zmit .zab-stack-panel[hidden] { display: none; }
    /* Cards = live's mobile image-box: #eff0f7, radius 8, padding 15, logo centred on
       top at 26px (live sizes it as ~20% of the card, so it halves from desktop's 52),
       13px to the name, name 16/400 centred. */
    .zmit .zab-stack-card { width: auto; min-height: 0; flex-direction: column; justify-content: center; text-align: center; gap: 13px; padding: 15px; border-radius: 8px; }
    .zmit .zab-stack-card img { width: 26px; height: 26px; flex: 0 0 auto; }
    .zmit .zab-stack-card span { margin-left: 0; font-size: 16px; }
}

/* (6a) INDUSTRY CARDS — LINK to the matching IT-MSP page, no flip. Bullets stay
   in the DOM (the resting, un-flipped state keeps them for SEO); the overlay
   anchor is the link. Never wrap the card in <a> — the bullets carry their own. */
.zmit .zmit-industries .zmit-ind-card { position: relative; }
.zmit .zmit-industries .zmit-ind-card .z-explore { position: absolute; inset: 0; z-index: 3; }
.zmit .zmit-industries .zmit-ind-card:hover .zmit-ind-inner,
.zmit .zmit-industries .zmit-ind-card.is-flipped .zmit-ind-inner { transform: none; }
.zmit .zmit-industries .zmit-ind-card.has-link { transition: transform .2s ease, box-shadow .2s ease; }
.zmit .zmit-industries .zmit-ind-card.has-link:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 20, 43, .10); }
@media (prefers-reduced-motion: reduce) {
    .zmit .zmit-industries .zmit-ind-card.has-link:hover { transform: none; }
}

/* (6b) CONSULTANT FIGURE across the stacked (non-desktop) layouts. The base rule
   `.zmit-final-media { flex: 0 0 500px }` is a WIDTH on desktop (row) but becomes a
   forced 500px HEIGHT once the banner is a column — that empty 500px is the huge
   blank gradient the owner saw on tablet portrait and the oversized figure in
   landscape. Reset flex-basis in every stacked case, then size the figure per form
   factor: portrait phone fills the card (reference), tablet is a centred ~380 cap,
   landscape phone is a small centred cap so it can't dominate the short viewport. */
@media (max-width: 1080px) {
    .zmit .zmit-final-banner { flex-direction: column; align-items: center; }
    /* The copy column's `flex: 0 0 690px` is a WIDTH on desktop but a forced 690px
       HEIGHT once the banner stacks -> a huge empty gradient between the copy and the
       figure (tablet portrait + landscape). Reset to content height. */
    .zmit .zmit-final-copy { flex: 0 0 auto; max-width: 100%; }
    .zmit .zmit-final-media { flex: 0 0 auto; align-self: center; margin: 0; }
    /* Match 1password's section spacing (40px top and bottom). */
    .zmit .zmit-final.z-section { margin: 40px 0; }
}
@media (max-width: 680px) and (orientation: portrait) {
    .zmit .zmit-final-media { align-self: stretch; width: 100%; max-width: 100%; }
    .zmit .zmit-final-media img { width: 100%; max-width: 100%; margin: 0 auto; }
}
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-final-media { width: auto; max-width: 363px; }
    .zmit .zmit-final-media img { width: 100%; max-width: 363px; height: auto; margin: 0 auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
    .zmit .zmit-final-media { align-self: center; width: auto; max-width: 300px; }
    .zmit .zmit-final-media img { width: auto; max-width: 300px; height: auto; margin: 0 auto; }
}
/* TABLET (681-1080) = live's component 8864 at 768-1024 (ss9): the band stays a ROW —
   gradient on the whole row, copy column 60% with 30px padding (718d6c9), figure on
   the RIGHT, bottom-aligned; live only wraps it on phone (<=767). Overrides the
   stacked tablet rules above. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-final-banner { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 20px; }
    .zmit .zmit-final-copy { flex: 0 0 60%; max-width: 60%; padding: 30px; }
    .zmit .zmit-final-copy h2 { font-size: 33px; line-height: 43px; }
    .zmit .zmit-final-media { flex: 1 1 auto; align-self: flex-end; width: auto; max-width: none; margin: 0; }
    .zmit .zmit-final-media img { width: 100%; max-width: 100%; height: auto; margin: 0; }
}

/* (7) INDUSTRY TILE positioning — the cards inherited the flip-front's
   space-between + 270px height, leaving a big empty gap between the icon (top) and
   title (bottom). As static link tiles they read better compact: icon then title
   grouped at the top, card height content-driven (grid stretches the row to equal). */
/* All industry tiles are the SAME fixed size (owner 2026-10-01) — a uniform 250px
   height across every row, with the icon pinned to the TOP and the title to the
   BOTTOM (space-between), matching the WP original. */
.zmit .zmit-industries .zmit-ind-card { min-height: 250px; }
.zmit .zmit-industries .zmit-ind-card .zmit-ind-inner { min-height: 250px; height: 100%; }
.zmit .zmit-industries .zmit-ind-card .zmit-ind-front {
    min-height: 250px; height: 100%; justify-content: center; gap: 20px; padding: 30px 24px;
}
/* Icon disc: was a 48px image crammed into a 44px white square (overflowing).
   Match the WP original — a 72px white square (radius 16) with a padded icon. */
.zmit .zmit-industries .zmit-ind-ic { width: 75px; height: 75px; border-radius: 16px; flex: 0 0 75px; }
.zmit .zmit-industries .zmit-ind-ic img { width: 44px; height: 44px; }

/* (8) "We Power 100" copy|photo band — owner 2026-10-01: vertically CENTRE the
   photo in its column (was top-pinned to match live, which left a large empty area
   below the short photo beside the tall copy on tablet-landscape and desktop). */
@media (min-width: 1081px) {
    .zmit .zab-empower-grid { align-items: center; }
}

/* (9) RECOGNIZED band ("Endorsed by leading analysts…") — the shared band is a
   two-column copy|CTA grid that only stacked at <=680, so at 681-1080 (tablet and
   LANDSCAPE PHONE) the long nowrap CTA squeezed the copy into a cramped column with
   dead dark space beside it. Stack it across the whole tablet/landscape range and
   let the CTA wrap + sit left under the copy. Desktop (>=1081) is untouched. */
@media (max-width: 1080px) {
    .zmit .zmit-recognized-band { grid-template-columns: 1fr; gap: 28px; }
    .zmit .zmit-recognized-cta { justify-self: start; }
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; }
}

/* (11) RECOGNIZED band logos on mobile — the three source logos have different
   intrinsic sizes/padding, so at a shared height they read as mis-aligned. Normalise
   into uniform left-aligned boxes (contain, never crop) so they line up as a column. */
@media (max-width: 680px) {
    .zmit .zmit-recognized-logos { flex-direction: column; align-items: center; row-gap: 16px; }
    /* Live (measured at 375): each logo 70px tall at its natural width (Clutch 130,
       DesignRush 181, GoodFirms 241), centred — not squeezed into a 150x40 box. */
    .zmit .zmit-recognized-logos img { width: auto; height: 70px; max-height: none; max-width: 100%; object-fit: contain; object-position: center; }
}

/* (12) Mobile compare row labels are BLUE (owner: "make it like this" — the interior was
   fine before): #0161ff, 18px, weight 500 ("Our Proven Advantage" / "Industry Gaps"). */
.zmit .zab-cmp-acc .zab-acc-row h3, .zmit .zab-cmp-acc .zab-acc-row .zab-acc-label { font-size: 18px; font-weight: 500; color: #0161ff; }

/* (13) FAQ open animation — the shared max-height:600 cap is far larger than the real
   answer height (~150-250px), so the reveal snaps open in a fraction of the .3s (reads
   as a flicker) and the close lags. scripts.php animates max-height to the EXACT
   scrollHeight instead, so open/close is a smooth full-duration slide with no cap. */
.zmit .zmit-faq-a { transition: max-height .3s ease; }

/* Video-quote text weight (2026-10-01) - see CLAUDE.md "Video quote text".
   The testimonial copy is bold + upright on every page (600, normal), matching
   onshore-it-outsourcing-services. Weight and style only - size, line-height,
   colour, author line and spacing are untouched. All widths. */
.zmit .zab-video-quote p { font-weight: 600; font-style: normal; }

/* ticon DESKTOP: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (min-width: 1080.02px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* ticon TABLET: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (min-width: 767.02px) and (max-width: 1080.98px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* ticon MOBILE: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (max-width: 767.98px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* plink (owner 2026-10-06): internal links inside the process/approach
   answers look and behave like the FAQ links (reference: it-managed-services
   FAQ, .zmit-faq-a-inner a): #85bcff, weight 500, no underline, and the SAME
   on hover / focus / visited. Scoped to the answer only - the copy column,
   the FAQ and every other link on the page keep their own colour. */
.zmit .zab-proc-a a,
.zmit .zab-proc-a a:hover,
.zmit .zab-proc-a a:focus,
.zmit .zab-proc-a a:visited { color: #85bcff; font-weight: 500; text-decoration: none; }

/* ---------------------------------------------------------------------------
   PRE-FOOTER, TABLET (681-1080) - owner, 2026-10-09. Match the reference
   pages (it-staff-augmentation-services, beyondtrust-services): the 183x41
   logo sits BESIDE a 16px title carrying the 2px left rule, and the lead runs
   full width under both at 14/19.6. The inherited 24/31 title wrapped to 5-7
   lines in a narrow column (and an auto-width logo could collapse to 0).
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-insights .zmit-insights-copy {
        display: grid; grid-template-columns: 183px minmax(0, 1fr);
        column-gap: 20px; row-gap: 20px; align-items: center;
    }
    .zmit .zmit-insights .zmit-insights-logo {
        grid-column: 1; grid-row: 1; width: 183px; height: 41px; max-width: none;
        object-fit: contain; object-position: left center; margin: 0;
    }
    .zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
        grid-column: 2; grid-row: 1; margin: 0; max-width: none;
        padding: 0 0 0 10px; border-left: 2px solid #fff;
        font-size: 16px; line-height: 20px; font-weight: 400;
    }
    .zmit .zmit-insights .zmit-insights-copy > p:not(.zmit-insights-title) {
        grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none;
        font-size: 14px; line-height: 19.6px;
    }
}

/* Pre-footer tablet, second pass (owner, 2026-10-09): this family's own
   tablet rules stack the copy full width and shrink the buttons to 154x50.
   it-managed-services-wp at 768: copy column ~400 with the 214-218 wide,
   58 tall buttons at the right edge (16px/500, 16px 30px), band padded 80. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-insights .zmit-insights-grid {
        grid-template-columns: 400px 218px; justify-content: space-between;
        gap: 0; align-items: start;
    }
    .zmit .zmit-insights .zmit-insights-btns { flex-direction: column; gap: 20px; }
    .zmit .zmit-insights .zmit-insights-btns a {
        width: 218px; padding: 16px 30px; font-size: 16px; line-height: 24px; font-weight: 500;
    }
    /* -wp: 139px logo, title starting 31px after it; band 80 above / 102 below. */
    .zmit .zmit-insights.z-section { padding: 80px 0 102px; }
    .zmit .zmit-insights .zmit-insights-copy { grid-template-columns: 139px minmax(0, 1fr); }
    .zmit .zmit-insights .zmit-insights-logo { width: 139px; height: 31px; }
}

/* CTA hover standard (owner 2026-10-21) = the WP original /it-managed-services-wp:
   - video band CTA: blue, 14px / 500, NO hover change;
   - overview + consultant (final) CTAs: blue at rest, hover BLACK #141414 / #f2f7ff.
   Uniform across the migrated pages - do not revert per page. */
body .zmit section.zab-video a.zab-btn { font-size: 14px; font-weight: 500; background: #0161ff; color: #f2f7ff; }
body .zmit section.zab-video a.zab-btn:hover,
body .zmit section.zab-video a.zab-btn:focus-visible { background: #0161ff; color: #f2f7ff; }

/* Consultant (final) band on PHONES = the reference layout (managed-it-services-portland,
   vanta-support-services, tier-2-it-support at 390; owner 2026-10-22): 30px / 20px inside the
   card, copy 14/25.2, a 13px full-width button, then the photo across the FULL card width at
   its OWN proportions (never cropped - owner 2026-10-22), 8px under the button and flush with the card's
   bottom edge. Phones only - tablet and desktop unchanged. */
@media (max-width: 680.98px) {
    body .zmit section.zmit-final .zmit-final-banner { min-height: 0; padding: 30px 20px 0; row-gap: 0; }
    body .zmit section.zmit-final .zmit-final-copy { max-width: 100%; margin-bottom: 0; padding: 0; }   /* no inner padding on top of the card's (owner 2026-10-23) */
    body .zmit section.zmit-final .zmit-final-copy h2 { margin: 0 0 16px; }
    body .zmit section.zmit-final .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; margin: 0 0 26px; }
    body .zmit section.zmit-final .zmit-final-copy a.zab-btn { font-size: 13px; width: 100%; justify-content: center; }
    body .zmit section.zmit-final .zmit-final-media { margin: 0; padding: 0; }
    body .zmit section.zmit-final .zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: auto; max-height: none; aspect-ratio: 528 / 582; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; }
}

/* Video band, DESKTOP: the copy column is vertically centred on the video, like
   managed-it-services-charlotte (owner 2026-10-23 - it used to start at the top with
   empty space below). Desktop only; tablet/phone stack the two and are unchanged. */
@media (min-width: 1081px) {
    body .zmit section.zab-video .zab-video-grid { align-items: center; }
    body .zmit section.zab-video .zab-video-grid > .zab-video-copy { align-self: center; padding-top: 0; padding-bottom: 0; }
}

/* Overview CTA = the reference it-staff-augmentation-services (owner 2026-10-23):
   blue #0161ff / #f2f7ff, 16px Poppins 500, line-height 16, padding 13.5px 30px,
   radius 5, 12px to the arrow, hover + focus BLACK #141414 / #fcfcfc. Font and
   shape are DESKTOP only (the reference itself differs below 1081); hover at all widths. */
body .zmit section.zab-empower a.zab-btn.zab-btn-accent:hover,
body .zmit section.zab-empower a.zab-btn.zab-btn-accent:focus-visible { background: #141414; color: #fcfcfc; }
@media (min-width: 1081px) {
    body .zmit section.zab-empower a.zab-btn.zab-btn-accent { font-size: 16px; font-weight: 500; line-height: 16px; padding: 13.5px 30px; border-radius: 5px; gap: 12px; }
    body .zmit section.zab-empower a.zab-btn.zab-btn-accent > span:not([aria-hidden]) { font-size: 16px; font-weight: 500; line-height: 16px; }
}

/* Pre-footer "Subscribe" -> #footer lands the footer (newsletter) just below the 100px sticky header, like the WP original (owner 2026-10-23). All widths. */
#footer.zmit-footer-anchor { display: block; height: 0; scroll-margin-top: 100px; }