/* ============================================================
   Outsourcing IT Helpdesk — page-specific layer.
   COPY SWAP of css/aws-systems-manager-services.css (13 of this page's 18
   depth-0 ids are shared with that page), with this page's own measurements
   layered on at the bottom under "PAGE-OWN BLOCK".

   THIS PAGE HAS NO problems band, NO mobile comparison accordion, NO
   .zab-steps 3-phase band and NO .zab-trust dark 4-up panel. The reference's
   rules for those are left in place but match nothing — do not "restore" the
   markup to make them apply.

   THIS PAGE ADDS: .zab-svcsplit (a two-column services panel + copy/figure
   column, live d5cd690), .zab-proc (copy + dark accordion, live cafeec5 —
   ported from css/co-managed-it-services.css which carries the same live id)
   and .zab-price (the dark 4-up pricing strip, live bd3ebd7).

   Loads AFTER css/it-managed-services-zazz.css. Every owner-approved deviation
   block below is carried through unchanged — the owner approved those over
   live, and they must not be re-derived from live. They are tagged with the
   comment marker that the build check greps for (4 of them).

   Two halves:
     1. Family A carry-overs — the APPROVED values from
        css/dark-web-monitoring-services.css (hero/form geometry, FAQ padding,
        services-card fill, light copy on dark bands, 6/5 FAQ split). Carried,
        not re-invented.
     2. Family B additions — the six sections Family A has no component for
        (.zab-problems, .zab-cmp-head/.zab-cmp/.zab-cmp-acc, .zab-certified,
        .zab-steps, .zab-trust, .zab-adv) plus the Family A components whose
        live values differ on this page (services 3-up, stats label-above-number,
        insights typography).

   Every measurement below is read off the live page's own Elementor CSS
   (element id noted inline), not eyeballed.

   Split rule: a given CSS property for a given selector lives in exactly one of
   the two sheets, never both, so their load order cannot change any outcome.
   ============================================================ */

/* ------------------------------------------------------------
   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;         /* trust strip + stats band */
}

/* ------------------------------------------------------------
   CONTENT BOX. Live's boxed containers are the full viewport minus a 30px
   gutter — measured innerWidth 1365 at x=30 on 743c4b6, d2a41b8, 81d38f2,
   672e3a2, ae25977, a86e67a, d730615, 43ab1b2, 9d19ee4, 65e1765, 1ad22e1 —
   NOT the shared sheet's 1400px centred box (1340 at x=43). The pre-footer
   band 6648aeb is the single exception: 1400 wide at x=13, no gutter.
   ------------------------------------------------------------ */
/* Owner decision 2026-08-26: Family B uses the Family A centred box (shared
   .z-container = max-width 1400px, margin 0 auto, padding 0 30px) even though
   live's own Family B pages run wider (content 1365 at x=30). Consistency across
   migrated pages beats matching live's width here. Do NOT reintroduce a global
   `.zmit .z-container { max-width: none }`. */

/* ============================================================
   1. HERO — every number below read off live's rendered DOM at 1440
   (8e8eda0 hero-section = 718 tall, 41deb3c logo strip = 125, total 843).

   Live's hero inner is a flex ROW that fills the 1365 box exactly:
       left column 757 | gap 100 | form card 508
   The left column carries a flat 20px gap between crumb / pill / headline /
   sub / CTA and a 50px bottom pad, which is what produces the 718.
   The form CARD (6c4c282, not the HubSpot widget inside it) is stretched to
   the row and carries margin-bottom:-95.55px, so it starts at the hero's own
   content top (y 140 — above the breadcrumb) and overhangs 96px into the
   logo strip. Family A's -132px overhang is a different number, not no
   overhang: measure, don't carry.
   ============================================================ */
/* Live paints the banner as a plain <img> sized 1425x718 with object-fit:fill —
   the artwork is STRETCHED to the box, not cropped, so `cover` gave a
   different crop. 100% 100% is the background equivalent of fill. */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/09/25071304/Outsourcing-IT-Helpdesk-Banner.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    /* crumb text lands at y 118, pill at y 184 (live 96bcdb8 / 8808f78) */
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
    /* 757 / 100 / 508 of the 1365 box, as percentages so it tracks the
       viewport below 1440 instead of hard-coding a 1440-only pixel row. */
    .zmit .zmit-hero-grid {
        grid-template-columns: 55.46% 37.22%;
        gap: 7.33%; align-items: stretch; padding: 28px 0 0;
    }
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
    /* live's left column is a flex column with a flat 20px gap */
    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    /* Owner request 2026-08-26: hero headline + sub reduced below live's 54px/16px.
       Deliberate deviation from live, applied on request. */
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
    /* live's sub runs the FULL 757 column (5 lines / 132px). Capped at 560 it
       wrapped to 6 lines and pushed the CTA 41px down. White, not #e6eaf2. */
    .zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
    /* live b37b9ab: 12px/12px/500 label, 12px 24px pad, #f2f7ff fill, 20px
       icon gap -> a 253 x 36 pill, not the shared 265 x 48 one. */
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px;
        background: #f2f7ff; border: 0;
    }
    /* live's button-icon is 16x12; left at its natural svg height it becomes the
       tallest flex item and inflates the pill from 36 to 46. */
    .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; }
    /* The shared button floors itself at a 46px touch target; live's desktop
       pill is 36. Only overridden above 1081px, so the 46px tap target the
       accessibility audit checks on mobile is left intact. */
    .zmit-hero .zmit-hero-cta-btn { min-height: 42px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* -44px lifts the card past the breadcrumb row to the hero content top;
       -95.55px is live's own overhang into the logo strip. */
    /* Live's white hero card measured at 1440: t140 h774 w508 l887, radius 8,
       padding 20px 25px 20px 20px. It IS stretched to the row and overhangs the
       banner by 95.55px into the logo strip. (The 459x458 box at y290 is the
       .hsfc-Form INSIDE the card - do not size the card against it.) */
    .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; }
    /* CLS: reserve the HubSpot form's rendered height. Before injection this
       box is 0, so the card grew 0->423 on load, which grew the hero and
       pushed the trust band down (measured CLS 0.127 vs the reference's
       0.004 - the reference only escapes it because its hero copy is
       taller than its card). Post-load layout is identical; this only
       pre-allocates the space. 423px measured at container >= 400px. */
    .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 — live d2ae808 is a bare 30px chevron at left:50% (no translate),
   10px off the banner's bottom edge, no disc, fill rgba(255,255,255,.66),
   bobbing on `float 3s`. The shared component draws a 48px glass disc. */
.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);
    /* The shared bob bakes translateX(-50%) into its keyframes, which pulls the
       chevron 15px left of where live puts it. Live sits flush at left:50% with
       no centring translate, so the bob is redefined without the X shift. */
    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 41deb3c is 125 tall (15 top / 40 bottom around a 70px
   logo row) and its marquee window is 792 wide, flush with the gutter.
   Live's wrapper scrolls 21199px in 92s == ~115px/s; ours is a shorter track,
   so the duration is set from our own track width to keep the same speed. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { height: 70px; }
/* Owner request 2026-08-26: make every marquee logo read the same size.
   Live (and our clone) sized these by HEIGHT only (70px, object-fit:contain),
   so width ran 139-221px and the square Gartner mark (200x200 natural, every
   other file is 193px tall) read as a small icon. Bounding BOTH axes inside a
   fixed chip evens the optical weight. */
.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 — live's own body CTA (label first, then arrow).
   Used by S03, S09, S15, S18. Live element 4480afa / 192ffed.
   ============================================================ */
.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; }
/* Measured on every live CTA (hero 732, problems 2388, steps 5388,
   recognized 5681, stats 8429): the arrow sits AFTER the label, never before. */
.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; }
/* live 843341d (problems): 369 x 36, 12px/12px/500, #0161ff on #f2f7ff,
   12px 24px pad, 8px radius — the same pill as the hero CTA. */
.zmit .zab-problems-cta .zab-btn {
    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-problems-cta .zab-btn:hover { background: #e2ecff; color: var(--zab-accent); }
/* live 4e0d0f3 (steps): 167 x 46, 13px/16px/600, #f2f7ff on #0161ff, 5px radius */
.zmit .zab-steps-cta .zab-btn {
    background: var(--zab-accent); color: #f2f7ff;
    font-size: 13px; line-height: 16px; font-weight: 600;
    padding: 15px 30px; border-radius: 5px; gap: 20px;
}
.zmit .zab-steps-cta .zab-btn:hover { background: #0a4fd0; color: #f2f7ff; }
/* live cb96327 (stats): 14.59px/14.59px/500, #0161ff on #f2f7ff, 12px 24px,
   8px radius — live does NOT invert this to a white pill. */
.zmit .zab-btn-light {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 14.59px; line-height: 14.59px; font-weight: 500;
    padding: 12px 24px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* Final CTA keeps the accent pill on the light gradient banner. */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #fcfcfc; }

/* ============================================================
   S02 SERVICES — 6 cards, THREE columns (live 39d0dc0:
   grid-template-columns repeat(3,1fr); gap 30px; .uc_content #eff0f7;
   .padding 30px; radius 10px; title 18px/700 #14142b; text 14px/400).
   The lead line is live's icon-box DESCRIPTION at 34.7px/43px/400 (49c4c98).
   ============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 30px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; }
.zmit-services-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* Visible card fill is mandatory — a card with no fill is invisible against the
   white section. #eff0f7 is live's own .uc_content colour. */
.zmit-services-grid .zmit-svc-card {
    background: var(--zab-fill);
    border: 0;
    border-radius: 10px;
    padding: 30px;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--zab-ink); margin: 0 0 5px; }
.zmit-services-grid .zmit-svc-card ul { margin: 0; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin-bottom: 4px; }
.zmit-services-grid .zmit-svc-card li a { color: var(--zab-accent); }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* ============================================================
   S03 PROBLEMS — live d2a41b8: white band, 30px padding, 30px row gap.
   Heading 24aeb41 = 33.05px/600/1.3em centred. Two 50% icon-list columns
   (6fb7f36 / 650313e) with 22px check icons and 18px/500 items, 15px row gap.
   Answer heading f31c35f = 24px/400/1.8em centred.
   ============================================================ */
.zmit .zab-problems.z-section { background: #fff; padding: 30px 0; }
.zmit .zab-problems-head { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; }
.zab-problems-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 30px; }
.zab-problems-list { list-style: none; margin: 0; padding: 0; }
.zab-problems-list li { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 7.5px; margin-top: 7.5px; }
.zab-problems-list li:first-child { margin-top: 0; }
.zab-problems-list li:last-child { padding-bottom: 0; }
.zab-tick { flex: 0 0 22px; margin-top: 1px; }
.zab-tick svg { display: block; width: 22px; height: 22px; fill: #046bd2; }
.zab-tick-text { font-size: 18px; font-weight: 500; line-height: 29.7px; color: var(--zab-ink); }
.zmit .zab-problems-answer { font-size: 24px; font-weight: 400; line-height: 43.2px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; padding-bottom: 15px; }
.zab-problems-cta { text-align: center; }

/* ============================================================
   S04 BOOK A FREE CONSULTATION — live 93d485c / 29825: centred heading and
   copy, then the HubSpot meetings well. Live's iframe well runs ~760px.
   ============================================================ */
.zmit .zmit-bookcal.z-section { padding: 30px 0 0; }
.zmit .zmit-bookcal h2 { font-size: 33.05px; font-weight: 400; line-height: 43px; 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-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }

/* ============================================================
   S05 COMPARISON HEADING — live 81d38f2 is its own container
   (padding 0 30px 15px); heading matches the S03 step (33.05px/600).
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 0 0 15px; }
.zmit .zab-cmp-head h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0; }

/* ============================================================
   S06 COMPARISON TABLE — DESKTOP ONLY (live 672e3a2 carries
   elementor-hidden-tablet_extra/tablet/mobile_extra/mobile).
   Row 60431dc: 3 columns, 15px gap, 10px radius, overflow hidden.
   Header cells (18ed247/f505325/3728033): #fff, 20px 30px, 24px/32px.
   Body cells: 16px/500 #06001c, 1px var(--zab-line) border, 100px tall,
   centred. Column 2 body = #eff0f7, column 3 body = #f9fcff.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0 0 30px; }
.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;
    font-size: 24px; font-weight: 600; line-height: 32px; color: var(--zab-ink);
}
.zmit .zab-cmp-cell {
    margin: 0; padding: 20px 30px; height: 100px;
    display: flex; align-items: center;
    font-size: 16px; font-weight: 500; line-height: 28px; color: #06001c;
    border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Live rounds only the FIRST body cell of each column (radius 10px 10px 0 0)
   and it is the one that carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Live paints the Key Capability COLUMN with a 3-layer gradient (a 70% white
   veil over two blue gradients) and leaves its cells transparent. Copied
   verbatim from live's computed backgroundImage. */
.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); line-height: 23px; }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* Per-cell fills, MEASURED on this page's own six rows (0fcc835 / f37363c
   children, read with getComputedStyle at 1440). The alternation is EVEN /
   ODD, so it is written that way and never enumerated — this page has SIX
   rows where the reference has five, and an enumerated list would drop the
   bottom rows (CLAUDE.md §7).
     Zazz column   rows 1,3,5 -> the column fill #eff0f7 ; rows 2,4,6 -> #f9fcff
     Others column rows 1,3,5 -> #f9fcff                 ; rows 2,4,6 -> #fff  */
.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; }
/* The Zazz column is hairlined on EVERY row (measured: border-top-width 1px on
   all six of 0fcc835's cells); the other two columns only on row 1, which the
   :first-of-type rule above already gives them. Row-count-independent by
   construction — never re-enumerate. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
.zab-cmp-acc { display: none; }

/* ============================================================
   S07 COMPARISON ACCORDION — MOBILE/TABLET ONLY (live c8f15e4 carries
   elementor-hidden-widescreen/desktop/laptop). Native <details>, as live.
   Rows are icon-box pairs: 20px green tick = Zazz, 22px red cross = Others.
   ============================================================ */
@media (max-width: 1080px) {
    .zab-cmp { display: none; }
    .zab-cmp-acc { display: block; }
}
.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);
    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-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; }
.zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; background: var(--zab-fill); }
.zab-acc-row:last-child { background: #f9fcff; }
.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 { font-size: 18px; font-weight: 500; line-height: 1.3; color: #0161ff; margin: 0 0 6px; }
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin: 0; }

/* ============================================================
   S08 CERTIFIED PARTNER BAND — live 8020c71: background #000,
   padding 65px 0 70px. Heading 9cd1c77 = 40px/600/56px #fff centred.
   Copy df25298 = 16px/400 #c2c2c2, max-width 800px, centred.
   Badges 267030c = 6-up grid, 16px gap, 25px above.
   DARK BAND ⇒ LIGHT COPY. Never darken anything in here.
   ============================================================ */
.zmit .zab-certified.z-section { background: #000; padding: 65px 0 70px; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; text-align: center; margin: 0; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 1.7; color: #c2c2c2; text-align: center; max-width: 800px; margin: 11px auto 0; }
.zab-certified > .z-container > p a { color: #fff; font-weight: 500; text-decoration: underline; }
.zab-certified-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 25px; align-items: center; }
.zab-certified-badges img { width: 100%; height: auto; display: block; }

/* ============================================================
   S09 GETTING STARTED — live 716d40b: background #f2f7ff,
   margin 30px 0, padding 35px 30px 30px, 20px row gap.
   Heading fca040b 33.05px/600/1.3em centred; lead bdea526 16px centred.
   The 3-card row (df23ff0) sits margin-top:-140px OVER the waves artwork.
   Cards: transparent, 20px padding, centred, 25px icon-to-text gap;
   icon is a white circle (view-stacked, shape-circle, 50px glyph + 27px pad);
   title 20px/700, copy 14px/500 --e-global-color-text.
   ============================================================ */
.zmit .zab-steps.z-section { background: #f2f7ff; margin: 30px 0; padding: 54px 0 48px; }
.zmit .zab-steps h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 20px; }
.zmit .zab-steps-lead { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--zab-ink); text-align: center; margin: 0 0 10px; }
.zab-steps-art { display: block; width: 100%; height: auto; }
.zab-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -140px; padding-bottom: 10px; }
.zab-step { padding: 20px; text-align: center; }
.zab-step-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 104px; height: 104px; border-radius: 50%; background: #fff;
    margin-bottom: 25px;
}
.zab-step-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-step h3 { font-size: 20px; font-weight: 700; line-height: 1.2em; color: var(--zab-ink); margin: 0 0 12px; }
.zmit .zab-step p { font-size: 14px; font-weight: 500; line-height: 1.5em; color: var(--zab-body); margin: 0; }
.zab-step p a { color: var(--zab-accent); }
.zab-steps-cta { text-align: center; }

/* ============================================================
   S10 RECOGNIZED — live 1faf4e0 padding 160px/150px around a #141414 box
   (7e422c7). Heading 9bf40de = 30px/300/1.4em #fff; copy 158fb73 = 16px/300
   #f2f7ff; CTA 4257c87 = #fcfcfc pill, #141414 label, 8px radius, 20px pad.
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit-recognized-band { padding: 40px; }
.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; }

/* ============================================================
   S11 REASONS BUSINESSES TRUST ZAZZ — live ae25977: white section,
   padding 30px 0 20px, eyebrow ca133c9 = 34.7px/400/43px #14142b with 52px
   below. Panel c09aff4 = #262338, radius 15px, 4 columns, 10px column gap.
   Cells d0359fb..: 32px 25px padding, 1px #fff RIGHT border (last has none).
   Icons 100px. Titles (h2) 15px/700 underlined #fff.
   Descriptions (h3) 15px/600/28px #f7f7fc. All centred.
   DARK PANEL ⇒ LIGHT COPY.
   ============================================================ */
.zmit .zab-trust.z-section { background: #fff; padding: 30px 0 20px; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 52px; }
.zab-trust-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 15px;
}
.zab-trust-cell {
    padding: 37px 25px; text-align: center;
    border-right: 1px solid #fff;
}
.zab-trust-cell:last-child { border-right: 0; }
.zab-trust-ico { display: block; margin: 0 auto 24px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
.zmit .zab-trust-cell h2 { font-size: 15px; font-weight: 700; line-height: 21px; color: #fff; text-decoration: underline; margin: 0 0 12px; }
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 600; line-height: 28px; color: #f7f7fc; margin: 0; }

/* ============================================================
   S12 SUCCESS STORIES — live a86e67a padding 30px 0; heading 5715405 at the
   29px/300 Family B step. Card + brand-logo treatment carried from the
   approved Family A rule: every logo normalises to a 50px-tall, left-aligned
   box so a square mark and a wide wordmark share one baseline.
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 12px 0; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); 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; }

/* ============================================================
   S13 ARTICLES — live d730615: white, padding 30px, 30px gap.
   Heading c0a9cde = 29px/300/1.5em; "Explore All…" 55eab48 = transparent with
   a 1px accent underline and the chevron AFTER the label (row-reverse on live,
   which puts the icon on the right of an RTL-flipped wrapper).
   Cards bbff8d0: 10px radius, overflow hidden, 10px gap.
   ============================================================ */
.zmit .zmit-articles.z-section { padding: 45px 0; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); }
.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; }
.zmit-article { border-radius: 10px; overflow: hidden; text-decoration: none; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article-img img { height: 270px; }
.zmit-article .body { padding: 24px 2px 32px; }
.zmit .zmit-article .date { font-size: 13px; font-weight: 500; color: var(--zab-accent); margin: 0 0 14px; }
.zmit .zmit-article h3 { font-size: 18px; font-weight: 600; line-height: 27px; color: var(--zab-ink); margin: 0; transition: color .2s ease; }

/* ============================================================
   S14 BUSINESS ADVANTAGES — live 43ab1b2: white, padding 10px 0 30px,
   50px gap. Heading 01b6716 = clamp(1.5rem,…,2.125rem)/300/1.3em (34px at
   1440). Grid ebfd715 = TWO columns, 30px gap. Cards 56864d7 = #eff0f7,
   20px padding, title 18px/700 with 20px below, copy 15px/400.
   ============================================================ */
.zmit .zab-adv.z-section { background: #fff; padding: 10px 0 30px; }
.zmit .zab-adv h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 50px; }
.zab-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.zab-adv-card { background: var(--zab-fill); border-radius: 10px; padding: 20px; }
.zmit .zab-adv-card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 20px; }
.zmit .zab-adv-card p { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--zab-body); margin: 0; }

/* ============================================================
   S15 MEASURABLE RESULTS — live 9d19ee4: background #262338, margin 30px 0,
   padding 50px 0, 50px gap, two columns (copy | counters row).
   Heading 67e5b1d renders 34px/44.2px/400 #fcfcfc (the clamp is overridden on
   live by a later rule — measured, not computed), 438 wide, then a 50px drop
   to the CTA. Counter row e5bfa3e is 877 wide, VERTICALLY CENTRED in the band,
   three 263px counters 44px apart.
   Counter order, measured off live (number-wrapper y 8265, title y 8340):
   the NUMBER IS ON TOP — 57px/57px/600 in #76aaff, centred — and the label
   sits 18px BELOW it at 14px/21px/400 #fcfcfc. Our markup emits the label
   first, so the number is re-ordered here rather than in the PHP (the same
   partial feeds the responsive stack).
   DARK BAND ⇒ LIGHT COPY. Never set a dark colour on anything in here.
   ============================================================ */
.zmit-stats { background: var(--zab-dark); }
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
.zmit-stats-copy h3 {
    font-size: 34px;
    font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 50px;
}
@media (min-width: 1081px) {
    .zmit-stats-layout { grid-template-columns: 438fr 877fr; gap: 50px; align-items: center; }
    /* Three counters in a row, matching live's flex row (space-between). */
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 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, so short labels look detached from their figure. Deliberate deviation from live, applied on request. */ order: -1; text-align: left;
    font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}

/* ============================================================
   S16 TESTIMONIALS — live 65e1765 padding 30px 0, 50px gap;
   heading b3cd7c7 = clamp(…,2.125rem)/300/1.3em. Name h3, hairline, location,
   quote. Card gradient carried from the approved Family A value.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; 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: 415px 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 117 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; }

/* ============================================================
   S17 FAQ — live 1ad22e1: background #eff0f7, padding 30px 0, 30px gap,
   two accordion widgets split 6 / 5.
   The two-value-shorthand trap: NEVER write `padding: 25px 0` here — it zeroes
   the shared sheet's 22px horizontal padding and every question goes flush to
   the card edge. Always restate the 22px.
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 36px 0; }
.zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; 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; }
/* The shared list is a CSS multi-column box, which BALANCES the columns. Live
   ships two explicit accordion widgets split 6 / 5, so its left column is the
   taller one and sets the section height. Forcing the break after item 6
   reproduces that split. Gated above the phone breakpoint: with column-count:1
   a forced break creates a SECOND column and the list overflows the viewport. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ============================================================
   S18 FINAL CTA — live 070907d / 1187a39: banner carries
   linear-gradient(102.29deg,#ecf1eb 8.75%,#aec8fd 45.11%,#84c3fc 81.46%),
   inner 718d6c9 radius 5px + 50px padding; heading 33a894d 33.05px/600/1.3em;
   copy 4658da0 17.16px/400/25.2px; figure 4f2c262 is 500px wide, aligned to
   the bottom-right and lifted -10% so it breaks above the banner's top edge.
   ============================================================ */
/* Live's band (e-con 1187a39) is margin: 150px 0 80px with padding 0. The
   150px top is the figure's room to hang ABOVE the band - measured on live at
   1440: imgTopVsBandTop -138, imgOverhangBelowBand 0. */
.zmit .zmit-final.z-section { margin: 150px 0 80px; padding: 0; }
.zmit-final-banner {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px;
    padding: 50px;
    /* = LIVE's measured row height at 1440 (band 439). The figure is
       577 tall and bottom-anchored, so it overhangs the top by
       577 - 439 = 138px exactly as live does, and the band does NOT
       grow to contain it. */
    min-height: 439px;
    display: flex;
    align-items: center;
}
.zmit-final-copy { max-width: 50%; }
.zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 16px; }
.zmit-final-copy p { font-size: 17.16px; font-weight: 400; line-height: 25.2px; color: var(--zab-ink); max-width: 560px; margin: 0 0 26px; }
/* LIVE at 1440: figure 500 x 577, bottom-aligned to the band, overhanging
   the top by 138px. The absolute box IS the reserve - it cannot collapse when
   the referer-blocked CloudFront file has not loaded, and it cannot inflate
   the band because it is out of flow. */
.zmit-final-media img { position: absolute; right: 56px; bottom: 0; width: 500px; height: 577px; }

/* ============================================================
   S19 REQUEST A CONSULTATION — live 7572440 / 8978: section carries a photo
   background; heading 3946774 = 33.89px/300/43px #fcfcfc centred; the form
   card d511f3d is #fff, 8px radius, 30px padding; "Contact now" 8927c4b is
   25px/400 #6e7191.
   ============================================================ */
.zmit-contact {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
    background-color: #1f4fd6;
}
.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; }
/* Owner request 2026-08-26: narrower card, no dead space. The 621px min-height
   was padding the card out to live's band height while the form itself is 443;
   dropped so the card hugs its content. Width 720 -> 620. */
.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; }

/* ============================================================
   S20 PRE-FOOTER BAND — live 6648aeb, measured at 1440:
     band  #000, padding 80px 0, total height 436
     box   1400 wide at x 13 — the ONE container on this page that is the
           shared 1400px box with NO 30px gutter, so .z-container is restored
     left  170b7dd 770 wide, column gap 20:
             row  [logo 194x56 (image 194x43) | title 556 wide]  = 56 tall
             copy fa7ec24 = 200 tall
     right 4eec9af 280 wide at x 1133, column gap 20, two 280x58 buttons,
           16px/24px/500, 16px 30px pad, 5px radius, 1px solid #fff border;
           first solid white with black label, second transparent with white.
   Left and right are 350px apart, i.e. justified to the box edges.
   Title 1702e8c is 28px/28px (NOT 1.3em — that made it 73 tall, not 56).
   The 116px under the copy is live's own: its text is 3 lines (84px) and the
   remainder is four empty blocks left behind by the ChatGPT paste in the CMS
   (min-h-[46px] / mt-3 / text-center / -mt-). Reproduced as one margin so the
   band is 436 with live's 80px padding, instead of faking the height with
   127px of padding live does not have.
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
/* Colour treatment is width-independent; the 1440 geometry is gated below. */
.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; }

@media (min-width: 1081px) {
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    /* container inherits the shared centred box (1400 / 30px gutter) */
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 194px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 43px; width: 194px; }
    .zmit-insights-copy p.zmit-insights-title {
        font-size: 28px; line-height: 28px;
        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. Live pads the
           paragraph by 116px to hold a 436px band; we let the section hug its
           content instead (band ~320). Deliberate deviation from live. */
        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)
   The desktop lead-ins and overlaps are desktop compositions; stacked layouts
   just butt up, and the desktop type steps overflow a narrow column.
   ============================================================ */
@media (max-width: 1080px) {
    .zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
    .zmit .zab-problems-head,
    .zmit .zab-cmp-head h2,
    .zmit .zab-steps h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-problems-answer { font-size: 19px; line-height: 1.6; }
    .zab-tick-text { line-height: 26px; }
    .zab-problems-cols { grid-template-columns: 1fr; gap: 0; }
    .zab-tick-text { font-size: 16px; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
    .zab-steps-grid { grid-template-columns: 1fr; margin-top: 0; }
    .zmit .zab-trust-eyebrow { font-size: 24px; line-height: 1.3; margin-bottom: 28px; }
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { border-right: 0; border-bottom: 1px solid #fff; }
    .zab-trust-cell:last-child { border-bottom: 0; }
    .zmit .zab-adv h2 { font-size: 27px; line-height: 1.25; }
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .zmit-recognized-band { padding: 32px 26px; }
    .zmit .zmit-recognized.z-section { padding: 40px 0; }
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 24px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 17px; line-height: 26px; }
    /* Stacked: no overflow trick, figure sits under the copy. */
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    .zmit-final-banner { min-height: 0; padding: 36px 32px 0; display: block; }
    .zmit-final-copy { max-width: 100%; }
    .zmit-final-media img { position: static; width: 280px; margin: 16px auto 0; }
    /* Hero is single-column below 1081, so the deep left-column pad just opens
       a gap between the CTA and the form card. */
    .zmit-hero-left { padding-bottom: 0; }
    /* Desktop card floor is a desktop composition; stacked it just adds dead space. */
    .zmit-testi-card { min-height: 0; }
}

/* Tablet-only: the shared sheet already collapses these to one column at 680px,
   and this sheet loads after it, so gating stops them re-imposing a two-up
   layout on a phone. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-articles-grid { grid-template-columns: repeat(2, 1fr); }
    /* live at 768 keeps the advantages cards two-up */
    .zab-adv-grid { grid-template-columns: repeat(2, 1fr); }
    /* HubSpot's meetings widget sets a taller height on its own iframe once the
       narrow layout stacks the slot picker (inline style, so it wins over the
       760px above). Let the well follow the iframe instead of clipping it. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* ============================================================
   PHONE (<=680)
   Re-measured rhythm for a 375 viewport; the shared sheet's structural
   stacking does the rest.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section  { padding: 20px 0; }
    .zmit-services-grid .zmit-svc-card { padding: 22px; }
    .zmit .zab-problems.z-section   { padding: 40px 0; }
    .zmit .zab-cmp-acc.z-section    { padding: 0 0 200px; }
    .zmit .zab-certified.z-section  { padding: 124px 0; }
    .zmit .zab-steps.z-section      { margin: 20px 0; padding: 30px 0; }
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
    .zmit .zab-trust.z-section      { padding: 24px 0 100px; }
    .zmit .zmit-stories.z-section   { padding: 24px 0; }
    .zmit .zmit-articles.z-section  { padding: 88px 0; }
    .zmit .zab-adv.z-section        { padding: 24px 0; }
    .zmit .zmit-stats.z-section     { margin: 20px 0; padding: 34px 0; }
    .zmit .zmit-testi.z-section     { padding: 24px 0; }
    .zmit .zmit-faq.z-section       { padding: 40px 0; }
    .zmit .zmit-contact.z-section   { padding: 40px 0; }
    .zmit .zmit-insights.z-section  { padding: 0; }

    .zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems-head,
    .zmit .zab-cmp-head h2,
    .zmit .zab-steps h2,
    .zmit .zab-certified h2,
    .zmit .zab-adv h2 { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems-answer { font-size: 16px; line-height: 25px; }
    .zab-tick-text { font-size: 15px; line-height: 24px; }
    .zmit .zab-step h3 { font-size: 18px; }
    .zab-step { padding: 14px 0; }
    .zab-step-ico { width: 88px; height: 88px; margin-bottom: 18px; }
    .zab-step-ico svg { width: 42px; height: 42px; }
    .zmit-testi-lead { font-size: 18px; line-height: 26px; }
    .zmit-testi-quote { font-size: 14px; line-height: 22px; }
    .zmit .zab-trust-cell h3 { font-size: 14px; line-height: 24px; }
    .zab-trust-cell { padding: 44px 20px; }
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
    /* This sheet loads after the shared one, so the desktop fixed-column rules
       above have to be undone explicitly on a phone. */
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
    .zab-adv-grid { grid-template-columns: 1fr; }
    .zmit-stats-grid { grid-template-columns: 1fr; gap: 24px; }
    .zab-acc-q { padding: 14px 16px; font-size: 16px; }
    .zab-acc-a { padding: 0; }
    .zab-acc-row { padding: 14px 16px; }
    /* Full-bleed at one column, so the desktop 250px reads taller — matches live. */
    .zmit-story-img img { height: 240px; }
    .zmit-article-img img { height: 240px; }
    .zmit-faq-q { padding: 16px; font-size: 15px; line-height: 22px; }
    .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; }
    .zmit-final-media img { width: 240px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 21px; padding-left: 14px; margin-left: 14px; }
    .zmit-insights-btns a { padding: 14px 28px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}
/* ============================================================
   1440 SECTION-HEIGHT RECONCILIATION — every value below is the delta
   between our render and live's, measured section by section at 1440 and
   traced to the element that caused it.

   Everything derived from a 1440 measurement is GATED to the desktop
   composition. Ungated, these rules load after the tablet/phone blocks above
   and silently win there — which is exactly what happened on the first pass:
   the 36.8px comparison heading came back at 375, the article and FAQ bands
   lost their phone padding, and the fixed 784px calendar well clipped the
   taller mobile HubSpot widget.
   ============================================================ */

/* --- correct at every width --- */

/* S05 — live 9289888/H2 is weight 400 and LEFT aligned, not 600 centred. */
.zmit .zab-cmp-head h2 { font-weight: 400; text-align: left; }
/* S15 — the shared sheet pins .zmit-stats-copy to 420px, narrower than live's
   438 column, which wraps the CTA label onto a second line (53 tall vs 39). */
.zmit-stats-copy { max-width: none; }
/* S17 — live e667b75 is weight 400. */
.zmit .zmit-faq h2 { font-weight: 400; }

@media (min-width: 1081px) {
    /* S02 — live caps the lead at 918 and still renders ONE line; our Poppins
       metrics are a shade wider and wrap at that width, costing a whole 43px
       line, so the cap is deliberately NOT carried. */

    /* S03 — live's icon-list block fd81f61 carries `padding: 0 0 20`, which is
       the whole of our 20px shortfall (list 401 vs 421). */
    .zab-problems-cols { padding-bottom: 20px; }

    /* S04 — live 93d485c is full-bleed: heading 858b4de is 30px/39px/400 with a
       10px drop, the copy sits on the full 1405 (two lines, not the three our
       1000px cap forced), 20 clears to the embed, and the embed is 784.
       30 + 39 + 10 + 53 + 20 + 784 = 936. */
    .zmit .zmit-bookcal h2 { font-size: 30px; line-height: 39px; font-weight: 400; margin-bottom: 10px; }
    .zmit .zmit-bookcal p { max-width: none; padding: 0 10px; margin: 0 0 20px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container,
    .zmit-bookcal-embed iframe { height: 784px; }

    /* S05 — 36.8px/36.8px is 37 tall; 33.05/43 was 43, the band's whole error. */
    .zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; }

    /* S08 — live 8020c71 is full-bleed: its inner is 1425, so the six badges
       get 224px cells (227 tall) instead of 214. The copy is 26.4 line-height
       and the badge row clears it by 27 (live nets +25.6 -23 +25). */
    .zmit .zab-certified > .z-container > p { line-height: 26.4px; }
    .zab-certified-badges { margin-top: 27px; }

    /* S13 — live 25e3a9c is 24px/28.8px/600 on desktop, not 18px/27px. */
    .zmit .zmit-article h3 { font-size: 24px; line-height: 28.8px; font-weight: 600; }

    /* S13 — live d730615 pads the band 30 (not 45) and drops 29 from the head
       row to the grid. (Live's grid measures 455 to our 447 because its
       JetEngine listing keeps a loader node under the cards.) */
    .zmit .zmit-articles.z-section { padding: 30px 0; }
    .zmit-articles-head { margin-bottom: 29px; }

    /* S16 — live's inner gap is 50, not 40 (heading 8621 -> carousel 8671). */
    .zmit-testi h2 { margin-bottom: 50px; }

    /* S17 — live 1ad22e1: 30px band padding and TWO 655px columns 30 apart
       inside the 1365 box (the 25px remainder sits to the right of column
       two). A plain column-count:2 makes them 667.5 and the taller column
       then reads 19px short. */
    .zmit .zmit-faq.z-section { padding: 30px 0; }
    .zmit .zmit-faq h2 { margin-bottom: 30px; }
    .zmit-faq-list { column-gap: 30px; padding-right: 25px; }
}

/* ============================================================
   TABLET / PHONE RECONCILIATION — measured the same way as the 1440 block,
   against live at 768 and 375. Loads last so it wins over the generic
   responsive blocks further up.
   ============================================================ */
@media (max-width: 1080px) {
    /* S18 — the desktop figure is pinned 500x551; the tablet rule reset only
       the WIDTH, so the image kept a 551px box and stretched. */
    .zmit-final-media img { height: auto; }
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S09 — live df23ff0 stays THREE columns at 768 (205 wide, 20 gap) and
       keeps a -100 lift onto the waves art. Stacking them cost 382px. */
    .zmit .zab-steps.z-section { margin: 30px 0; padding: 30px 0; }
    .zmit .zab-steps h2 { font-size: 33.05px; line-height: 42.965px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 16px; line-height: 26.4px; margin-bottom: 20px; }
    .zab-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -100px; padding-bottom: 10px; }
    .zab-step { padding: 0; }

    /* S15 — live 9d19ee4 at 768: 30px band padding, 50 between the copy and
       the counter row, heading two lines (70) not three (133), counters 3-up
       212 wide with a 36 gap. */
    .zmit .zmit-stats.z-section { margin: 30px 0; padding: 30px 0; }
    .zmit-stats-layout { gap: 50px; }
    .zmit-stats-copy h3 { font-size: 26px; line-height: 35px; margin-bottom: 20px; }
    .zmit-stats-grid { gap: 36px; }

    /* S10 — the two-up band squeezes the copy into 323px at 768 and triples
       its height; live runs the band as a single column here. */
    .zmit-recognized-band { grid-template-columns: 1fr; gap: 24px; }
    .zmit .zmit-recognized-copy h2 { font-size: 24px; line-height: 32px; }
}

@media (max-width: 680px) {
    /* S09 — live at 375 keeps a -70 lift and drops the lead to 14px/23.1px. */
    .zmit .zab-steps.z-section { margin: 30px 0; padding: 20px 0 30px; }
    .zmit .zab-steps h2 { font-size: 26px; line-height: 33.8px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 14px; line-height: 23.1px; margin-bottom: 40px; }
    .zab-steps-grid { margin-top: -70px; gap: 40px; padding-bottom: 30px; }

    /* S15 — live at 375: 50px band padding, heading three lines (89), the
       three counters stacked 20 apart at 108 each. */
    .zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
    .zmit-stats-layout { gap: 50px; }
    .zmit-stats-copy h3 { font-size: 20px; line-height: 29.7px; margin-bottom: 20px; }
    .zmit-stats-grid { gap: 20px; }

    .zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S03 — live fd81f61 keeps TWO 344px columns at 768 (40 gap); the heading
       is 31/40.3 and the answer 22/37.4, not 27/33.75 and 19/30.4. */
    .zab-problems-cols { grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .zmit .zab-problems-head { font-size: 31px; line-height: 40.3px; }
    .zmit .zab-problems-answer { font-size: 22px; line-height: 37.4px; }

    /* S07 — live's accordion rows are 68 tall (20px pad) and the band clears
       40 at the bottom; ours were 61 and 30. */
    .zab-acc-q { padding: 22px; }
    .zmit .zab-cmp-acc.z-section { padding: 0 0 40px; }

    /* S18 — live's consultant figure is 363x400 at 768, not 280 wide. */
    .zmit-final-media img { width: 363px; height: 400px; }

    /* S20 — live 6648aeb keeps the two columns at 768: 400 and 218, justified
       to the box edges, inside 80px of band padding. */
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 400px 218px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 218px; padding: 16px 30px; }

    /* S11 — live's four trust cells run 13px taller each at 768. */
    .zab-trust-cell { padding: 50px 25px; }

    /* S16 — live's band is 583 around a 498 slide: 20px of band padding and a
       20px drop off the heading, not 30 and 40. */
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
}

@media (max-width: 680px) {
    /* S02 — live's uc_content cards keep their 30px pad at 375 (302/279 tall). */
    .zmit-services-grid .zmit-svc-card { padding: 30px; }

    /* S18 — live's figure is 335x500 at 375 (it stretches it, as on desktop). */
    .zmit-final-media img { width: 100%; max-width: 335px; height: 500px; }

    /* S20 — live stacks the band at 375 inside 60px of padding: copy column
       283 (logo row 103 + copy 160), buttons 136 (two 58s, 20 apart). */
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 100%; padding: 16px 30px; }

    /* S11 — live's cells are 21px taller each at 375. */
    .zab-trust-cell { padding: 65px 20px; }

    /* S16 — same 20/20 rhythm as 768 around live's 498 slide. */
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
}

/* ------------------------------------------------------------
   FINAL BAND-HEIGHT TRIM. Live builds several of these bands out of Elementor
   widgets whose internals do not map onto our markup one-for-one (the trust
   panel is an icon-box + grid pair, the testimonial band is a Swiper, the
   accordion is e-n-accordion). Where the composition already matches, the
   remaining difference is closed on the band's own padding, each value being
   the measured delta against live at that width.
   ------------------------------------------------------------ */
@media (min-width: 1081px) {
    .zab-steps-grid { padding-bottom: 33px; }   /* S09 699 - 676 */
    .zmit .zmit-stories.z-section { padding: 23px 0; }  /* S12 670 - 648 */
    .zmit .zmit-stats.z-section { padding: 60px 0; }    /* S15 385 - 365 */
}

@media (max-width: 1080px) and (min-width: 681px) {
    .zab-trust-cell { padding: 43px 25px; }             /* S11 1316 */
    .zab-step { padding: 20px 10px; }                   /* S09 838 */
    .zmit-recognized-band { padding: 60px 26px; }       /* S10 546 */
    .zmit .zmit-articles.z-section { padding: 25px 0; } /* S13 1036 */
    .zab-acc-q { padding: 26px 22px; }                  /* S07 701 */
    .zab-problems-cols { padding-bottom: 20px; }        /* S03 1142 */
    .zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 1093 */
    .zmit-final-media img { height: 453px; }            /* S18 780 */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 714px; } /* S04 978 */
}

@media (max-width: 680px) {
    .zab-trust-cell { padding: 55px 20px; }             /* S11 1689 */
    .zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 2050 */
    .zmit-recognized-band { padding: 46px 26px; }       /* S10 828 */
    .zmit .zab-steps.z-section { padding: 0 0 20px; }   /* S09 1410 */
    .zmit .zmit-stats.z-section { padding: 40px 0; }    /* S15 677 */
    .zmit .zmit-stories.z-section { padding: 8px 0; }   /* S12 1931 */
    .zmit .zab-adv h2 { margin-bottom: 24px; }          /* S14 1196 */
    .zmit .zmit-faq.z-section { padding: 67px 0; }      /* S17 1341 */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 524px; } /* S04 1084 */
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S01 — live's hero headline is 40.98px/49.17px at 768, which wraps to
       FOUR lines (197). At 38/46.36 it fell to three (139) and took 58px —
       most of the hero's 128px shortfall — out of the banner. */
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-hero-grid { padding-bottom: 68px; }   /* S01 1418 */
}

/* Last two bands. The HubSpot meetings widget sizes its own iframe, so S04's
   remaining difference is closed on the band, not on the embed. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-bookcal.z-section { padding: 30px 0 27px; }  /* S04 978 */
    .zmit-hero-grid { padding-bottom: 114px; }               /* S01 1418 */
}
@media (max-width: 680px) {
    .zmit .zmit-bookcal.z-section { padding: 40px 0 0; }     /* owner 2026-10-06: heading sat flush on the black certified band */
    .zmit-hero-grid { padding-bottom: 14px; }                /* S01 1925 */
}

/* ============================================================
   MOBILE OPTIMISATION (owner request 2026-08-26). One consolidated
   <=680 block appended LAST so it wins over the stacked earlier blocks.
   Measured at 375 before: doc 25017, hero 1800 (headline 30px/7 lines,
   sub 290), cmp-acc padB 200, certified pad 124, articles pad 88,
   trust padB 100, marquee chips 180x70, final figure 500px tall.
   ============================================================ */
@media (max-width: 680px) {
    /* Hero type: tighter on phones */
    .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
    .zmit-hero .zmit-hero-sub { font-size: 14px; line-height: 1.55; }
    .zmit-form-card h3 { font-size: 16px; line-height: 1.4; }

    /* Blunt band paddings dialled to content */
    .zmit .zab-cmp-acc.z-section   { padding: 0 0 40px; }
    .zmit .zab-certified.z-section { padding: 48px 0; }
    .zmit .zab-trust.z-section     { padding: 24px 0 40px; }
    .zmit .zmit-articles.z-section { padding: 48px 0; }
    .zmit .zmit-insights.z-section { padding: 40px 0; }

    /* Marquee chips scale down with the viewport */
    .zmit .zmit-trust-band { padding: 12px 0 24px; }
    .zmit .zmit-trust-chip { width: 140px; height: 56px; }
    .zmit .zmit-trust-chip img { max-height: 46px; max-width: 128px; }

    /* Final-CTA figure: natural ratio, phone-sized */
    .zmit-final-media img { width: 260px; height: auto; max-height: 320px; }
}

/* Mobile content reduction (owner approved 2026-08-26: "reduce or hide some
   content where necessary keeping the essence"). CSS-only hides — the markup,
   its links and SEO text stay in the DOM, so interlinking is unchanged. */
@media (max-width: 680px) {
    /* Service cards: title + first 3 bullets carry the point */
    .zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
    /* Article cards: keep title/meta/link, drop the artwork */
    .zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
    /* Story cards: image + logo + title; excerpt is desktop detail */
    .zmit-stories .zmit-story .body p { display: none; }
    /* Trust panel copy: clamp to 4 lines */
    /* trust copy lives in the cell's h3 */
    .zab-trust-cell h3 {
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Certified badges: 2-up large, 16px gap (owner 2026-10-09, matches the
       it-managed-services phone standards grid) */
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Mobile round 2: the trust cells are icon-driven (110px art), not copy-driven */
@media (max-width: 680px) {
    .zmit .zab-trust-ico, .zmit .zab-trust-ico svg, .zmit .zab-trust-ico img {
        width: 64px; height: 64px;
    }
    .zmit .zab-trust-cell { padding: 20px 16px; }
    .zmit .zab-adv .zmit-svc-card, .zmit .zab-adv-card { padding: 20px 18px; }
    .zmit .zab-steps-card { padding: 20px 16px; }
}

/* Mobile polish from the screenshot pass (2026-08-26) */
@media (max-width: 680px) {
    /* Review logos: one even row of three, not a 2+1 wrap */
    .zmit .zmit-recognized-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
    .zmit .zmit-recognized-logos img { max-width: 96px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
    /* Articles read as a list once artwork is hidden - give items a hairline */
    .zmit .zmit-articles-grid .zmit-article { border-bottom: 1px solid rgba(6, 0, 28, .1); padding-bottom: 18px; }
    .zmit .zmit-articles-grid .zmit-article:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* CLS reservation, mobile-first. The HubSpot form height is driven by HubSpot's
   OWN viewport breakpoints, not by our container width. Measured on this form
   (3cebfb02, identical on every Family B page):
     320 / 430  -> 732px  (every field stacked)
     440        -> 477px
     479 - 1080 -> 455px
     1081+      -> 423px  (set in the min-width:1081px block above)
   Each tier reserves the MINIMUM height in its range, so the reservation can
   never exceed the rendered form - no dead space, only a <=22px residual
   shift in the 431-460px band. */
.zmit-form-card .zmit-hsform { min-height: 455px; }
@media (max-width: 430px) {
    .zmit-form-card .zmit-hsform { min-height: 732px; }
}
@media (min-width: 1081px) {
    .zmit-form-card .zmit-hsform { min-height: 423px; }
}

/* a11y (color-contrast + link-in-text-block): inline EDITORIAL links inside body
   copy. Live ships them as #0161ff with no underline, which measures 4.45:1 on
   the #eff0f7 card fill (needs 4.5) and 1.4:1 against the surrounding text with
   colour as the only cue. #0154db is 5.61:1 on #eff0f7 / 6.38:1 on white, and
   the underline supplies the non-colour cue. Same remedy already approved for
   the FAQ links in the shared sheet. CTAs and buttons are NOT touched - they are
   solid-filled and already pass. */
.zmit-services-grid .zmit-svc-card li a,
.zmit-svc-card li a,
.zmit-svc-card p a,
.zab-problems li a,
.zab-problems p a,
.zab-cmp-cell a,
.zab-cmp-acc a,
.zab-trust-cell p a,
.zab-trust p a,
.zab-adv-card p a,
.zab-adv p a,
.zab-step p a,
.zab-step li a {
    color: #0154db;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   PAGE-OWN BLOCK — /outsourcing-it-helpdesk
   Everything below was MEASURED on the live page at 1440 with Playwright
   (element ids noted inline), never carried from the reference. Loaded last so
   it wins over the copy-swapped rules above.

   Bands the reference has and this page does NOT: .zab-problems,
   .zab-cmp-acc plus .zab-acc-* , .zab-steps, .zab-trust. Their rules survive
   above and match nothing.
   ============================================================ */

/* ------------------------------------------------------------
   S03 COMPARISON TABLE — live hides it below the mobile_extra breakpoint
   (60431dc carries elementor-hidden-mobile + elementor-hidden-mobile_extra)
   and there is NO accordion twin on this page (a hidden-desktop sibling
   inside 672e3a2 does not exist). So the table simply disappears under 881px
   on live, and it does here too — do not pad it with an accordion the page
   never had.
   ------------------------------------------------------------ */
@media (max-width: 880px) { .zab-cmp { display: none; } }

/* ------------------------------------------------------------
   S02 COMPARISON HEADING — live 81d38f2, MEASURED: inner padding 50px 0 15px
   around a single h2 of 36.8px/400/36.8px #141414, left-aligned, w967 at the
   container edge. Band height 102 = 50 + 37 + 15.
   ------------------------------------------------------------ */
.zmit .zab-cmp-head.z-section { padding: 50px 0 15px; }
.zmit .zab-cmp-head h2 { font-size: 36.8px; font-weight: 400; line-height: 36.8px; text-align: left; margin: 0; }

/* ------------------------------------------------------------
   S04 SERVICES SPLIT — live d5cd690, MEASURED at 1440:
     band            l0   w1440 h1299  padding 0 0 50px
     left panel      l0   w936        background rgba(1,141,255,.07)
                                      padding 100px 40px 110px 80px
       h2 75c4963    29.54px/500/38.4px #141414
       card grid     l80  w816  3 columns of 258.66, row gap 32 / col gap 20
       card f196bf9  w259 h422  background #fff  padding 20px
         icon svg    60x60      h3 18px/600/28px #14142b
         p           13px/400/21px #14142b
     right column    l936 w504 h1249  padding 20px 35px 130px
       h2 eyebrow    16px/400/20.8px #000
       h3            36.55px/600/47.52px #141414
       p             16px/400/26.4px #727272    (live ships an empty spacer p
                                                between the two real ones; not
                                                reproduced)
       img           434x310
       a             black pill, padding 13px 35px, 16px/500 #fff
   Live runs this band edge to edge (left panel bleeds to x0, right column to
   x1440). Per CLAUDE.md the house 1400/30 container wins on WIDTH, so the two
   columns are laid out inside .z-container in live's own 65 / 35 proportion.
   ------------------------------------------------------------ */
.zmit .zab-svcsplit.z-section { padding: 0 0 50px; background: #fff; }
/* align-items must STRETCH, not start. Live's band is a flex row whose two
   children are both 1249 tall at 1440 (measured on the pre-cutover capture),
   so the tinted panel reaches the band's bottom. With "start" the panel sized
   to its own content (1186) and left a 67px white step under it while the
   right column ran on to 1253 - the band then read as two unrelated halves. */
.zab-svcsplit-grid { display: grid; grid-template-columns: 65% 35%; align-items: stretch; }
.zab-svcsplit-left { background: rgba(1, 141, 255, .07); padding: 100px 40px 110px 80px; position: relative; }
/* Live's tint runs to the viewport's LEFT edge: panel x=0 w=936 at 1440,
   x=0 w=768 at 768, x=0 w=430 at 430. The house 1400/30 container governs
   CONTENT width only - every other painted band on this page is already
   x=0 w=1440 with its content inside the container - so the tint is bled with
   a pseudo-element and the columns stay exactly where they are. 50vw always
   clears the container gutter at any viewport, and inline-start overflow is
   not scrollable in LTR, so this adds no horizontal scrollbar. */
.zab-svcsplit-left::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 100%;
    width: 50vw; background: rgba(1, 141, 255, .07);
}
/* Owner (2026-10-06): heading set in TRUE bold. The site's "Poppins" is one
   400 face, so font-weight is a no-op; header.css declares a separate
   poppins-bold family. Weight stays 400 so the Bold face is not faux-bolded. */
.zmit .zab-svcsplit-left > h2 {
    font-family: poppins-bold, "Poppins", Arial, sans-serif;
    font-size: 29.54px; font-weight: 400; line-height: 38.4px;
    color: var(--zab-ink); margin: 0 0 20px; text-align: left;
}
.zab-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 32px; column-gap: 20px; }
.zab-svccard { background: #fff; padding: 20px; }
.zab-svccard-ico { display: block; margin-bottom: 15px; }
.zab-svccard-ico svg { display: block; width: 60px; height: 60px; color: #69727d; }
.zmit .zab-svccard h3 { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--zab-ink); margin: 0 0 20px; }
.zmit .zab-svccard p { font-size: 13px; font-weight: 400; line-height: 21px; color: var(--zab-ink); margin: 0; }
.zab-svccard p a { color: var(--zab-accent); }
/* Hover - ONLY the linked card (Security and Compliance -> GRC page). Live's
   .custom-icon-box:hover: fill #cde9ff, 1px #0161ff edge, lift 10px, icon
   paths #0161ff, .3s. The edge is an inset shadow (no layout shift) and live's
   margin/font-size jiggle on hover is not copied (it reflows the grid). The
   title link is stretched over the card so the whole card is clickable. */
.zab-svccard { position: relative; transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.zab-svccard.has-link h3 a { color: inherit; text-decoration: none; }
.zab-svccard.has-link h3 a::after { content: ""; position: absolute; inset: 0; }
.zab-svccard.has-link:hover,
.zab-svccard.has-link:has(a:focus-visible) { background: #cde9ff; box-shadow: inset 0 0 0 1px #0161ff; transform: translateY(-10px); }
.zab-svccard.has-link:hover .zab-svccard-ico svg path,
.zab-svccard.has-link:has(a:focus-visible) .zab-svccard-ico svg path { fill: #0161ff; }
.zab-svccard.has-link h3 a:focus-visible { outline: none; }
.zab-svccard.has-link:has(a:focus-visible) { outline: 2px solid #0161ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .zab-svccard { transition: none; }
    .zab-svccard.has-link:hover, .zab-svccard.has-link:has(a:focus-visible) { transform: none; }
}

.zab-svcsplit-right { padding: 20px 35px 130px; }
/* Live's "Services" eyebrow is UPPERCASE with a 1px black rule under it. The
   rule sits on live's widget wrapper (border-bottom 1px solid #000 plus
   padding-bottom 1px) and is only 72px wide because live's right column is
   align-items flex-start, so the box shrinks to the word. width: fit-content
   reproduces that. Live's letter-spacing here is normal, not the page default. */
.zmit .zab-svcsplit-eyebrow {
    font-size: 16px; font-weight: 400; line-height: 20.8px; color: #000;
    margin: 0 0 44px; text-transform: uppercase; letter-spacing: normal;
    width: fit-content; padding-bottom: 1px; border-bottom: 1px solid #000;
}
.zmit .zab-svcsplit-right h3 {
    font-size: 36.55px; font-weight: 600; line-height: 47.52px;
    color: #141414; margin: 0 0 20px;
}
.zmit .zab-svcsplit-right p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #727272; margin: 0 0 26px; }
.zab-svcsplit-right p a { color: var(--zab-accent); }
.zab-svcsplit-fig { margin: 0 0 30px; }
.zab-svcsplit-fig img { display: block; width: 100%; height: auto; }
/* live 6ad880b is a BLACK pill, not the page accent */
.zmit a.zab-svcsplit-cta {
    display: inline-flex; align-items: center; justify-content: center;
    background: #000; color: #fff; padding: 13px 35px;
    font-size: 16px; font-weight: 500; line-height: 16px; text-decoration: none;
}
.zmit a.zab-svcsplit-cta:hover { background: #1a1a1a; color: #fff; }

/* ------------------------------------------------------------
   S07 PROCESS — live cafeec5. Ported from css/co-managed-it-services.css,
   which carries the SAME live container id, then re-measured here:
     two columns of 700 at l20 / l720, each padded 0 30px
     h2 c4c0961          30px/400/39px #141414
     summary title       background #262338, radius 5px, padding 25px,
                         16px/400 #fcfcfc, item height 77, 7px between items
     no item open at rest
   ------------------------------------------------------------ */
.zmit .zab-proc.z-section { background: #fff; padding: 50px 0 120px; }  /* live cafeec5 inner padding, measured */
.zab-proc-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.zab-proc-copy { padding: 0 30px; }
.zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 25px; }
.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 p a { color: #046bd2; }
.zab-proc-acc { padding: 0 30px; }

.zab-dacc-item { margin-bottom: 7px; }
.zab-dacc-item:last-child { margin-bottom: 0; }
.zab-dacc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--zab-dark); border-radius: 5px; padding: 25px;
    font-size: 16px; font-weight: 400; line-height: 1.6; color: #fcfcfc;
    cursor: pointer; list-style: none;
}
.zab-dacc-q::-webkit-details-marker { display: none; }
.zab-dacc-q:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.zab-dacc-sign { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
.zab-dacc-sign::before,
.zab-dacc-sign::after { content: ""; position: absolute; background: #fcfcfc; }
.zab-dacc-sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.zab-dacc-sign::after { top: 0; left: 6px; width: 2px; height: 14px; transition: opacity .2s; }
.zab-dacc-item[open] .zab-dacc-sign::after { opacity: 0; }
/* DEFECT FIX (owner, 2026-09-21): the answer belongs INSIDE the dark row, not in a
   light panel hanging below it. Live (read on the real page at 1440, row opened with
   a real click): summary 77 tall, padding 25, background #262338, radius 5 at rest and
   5px 5px 0 0 while open; the answer wrapper is the SAME #262338 and fills the row -
   i.e. one continuous dark card, never a light box on the light band. Rows sit 7px
   apart and live opens NONE of them at rest, one at a time thereafter. */
.zab-dacc-item[open] .zab-dacc-q { border-radius: 5px 5px 0 0; }
.zab-dacc-a { padding: 0 25px 25px; background: var(--zab-dark); border-radius: 0 0 5px 5px; }
.zmit .zab-dacc-a p { font-size: 15px; font-weight: 400; line-height: 25px; color: #f7f7fc; margin: 0; }
.zab-dacc-a p a { color: #a9c9ff; }

/* Guard: a closed row must never paint its answer. The UA already hides details
   content, but the owner saw every row open at once with the answers showing, so the
   hiding is stated explicitly here rather than left to the engine. */
.zab-proc-acc details:not([open]) > *:not(summary) { display: none; }

/* ------------------------------------------------------------
   S09 PRICING STRIP — live bd3ebd7, MEASURED at 1440:
     wrapper padding 50px 0 0
     lead 5eb2214 description  34.7px/400/43px #14142b, left-aligned, w609
     grid 95c726e  4 columns, column gap 10, background #262338, radius 15px
     cell c2ad4a1  padding 32px 25px, border-right 1px #fff (dividers)
     icon          100x100 svg, centred
     h3            18px/600/28px #f7f7fc, CENTRED  (dark band -> light copy)
   ------------------------------------------------------------ */
/* live bd3ebd7: 50px inner top padding + a 38px icon-box top pad above the
   lead, a 53px gap from the lead to the grid, and 40px under it => 500 tall */
.zmit .zab-price.z-section { background: #fff; padding: 88px 0 40px; }
.zmit .zab-price-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 53px; }
.zab-price-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 10px;
    background: var(--zab-dark); border-radius: 15px;
}
.zab-price-cell {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    padding: 32px 25px; border-right: 1px solid #fff;
}
.zab-price-cell:last-child { border-right: 0; }
.zab-price-ico svg { display: block; width: 100px; height: 100px; }
.zmit .zab-price-cell h3 {
    font-size: 18px; font-weight: 600; line-height: 28px;
    color: #f7f7fc; text-align: center; margin: 0;
}

/* ------------------------------------------------------------
   S11 BUSINESS ADVANTAGES — live 43ab1b2 MEASURED: h2 34px/300/44.2px
   #14142b, grid 2 columns of 675 with a 30px gap, card #eff0f7 padding 20px,
   h3 18px/700/23.4px #141414, p 15px/400/24.75px rgba(20,20,20,.7).
   ------------------------------------------------------------ */
.zmit .zab-adv h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); text-align: left; }
.zab-adv-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.zab-adv-card { background: var(--zab-fill); padding: 20px; }
.zmit .zab-adv-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: #141414; margin: 0 0 20px; }
.zmit .zab-adv-card p { font-size: 15px; font-weight: 400; line-height: 24.75px; color: var(--zab-body); margin: 0; }

/* ------------------------------------------------------------
   S12 STATS — live 9d19ee4 MEASURED: wrapper padding 50px 0, copy column
   w443 at the container edge, counter row starting at l523 (3-up).
   h2 eyebrow 16px/600/19.2px #fcfcfc, h3 34px/400/44.2px #fcfcfc.
   ------------------------------------------------------------ */
.zmit .zmit-stats-copy h2 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #fcfcfc; margin: 0 0 20px; }
.zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 25px; }
/* The stat NUMBER stays left-aligned and above its label — the owner deviation
   already carried in the copy-swapped block above (order:-1; text-align:left).
   Do not re-declare it here and do not "fix" it back to live's centring. */

/* ------------------------------------------------------------
   BELOW 1081 — the three new bands stack. The desktop two-column rules above
   are unconditional, so they are undone here rather than gated, keeping the
   copy-swapped media blocks untouched.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
    .zab-svcsplit-grid { grid-template-columns: 1fr; }
    /* stacked, live's panel bleeds to BOTH viewport edges (x=0 w=768 at 768).
       The container's padding is a flat 30px at every width below 1460, so a
       -30px inline margin lands exactly on the edges with zero overflow; the
       30px is added back to the panel's own padding so the cards do not move. */
    .zab-svcsplit-left { margin: 0 -30px; padding: 40px 54px; }
    .zab-svcsplit-right { padding: 30px 24px 40px; }
    /* live keeps THREE columns here (219.3px x3 at 768), it does not go 2-up */
    .zab-svcgrid { grid-template-columns: repeat(3, 1fr); column-gap: 14px; }
    .zmit .zab-svcsplit-right h3 { font-size: 28px; line-height: 1.3; }
    .zab-proc-grid { grid-template-columns: 1fr; gap: 24px; }
    .zab-proc-copy, .zab-proc-acc { padding: 0; }
    /* live stacks the pricing strip to ONE column at 768 (708px), so the
       white 1px dividers become horizontal rules */
    .zab-price-grid { grid-template-columns: 1fr; }
    .zab-price-cell { border-right: 0; border-bottom: 1px solid #fff; }
    .zab-price-cell:last-child { border-bottom: 0; }
    .zmit .zab-price.z-section { padding: 72px 0 100px; }   /* live bd3ebd7 @768 */
    .zmit .zab-price-lead { font-size: 27px; line-height: 1.25; }
    .zab-adv-grid { grid-template-columns: 1fr; }
    .zmit .zab-cmp-head h2 { font-size: 28px; line-height: 1.2; }
}

@media (max-width: 680px) {
    .zab-svcgrid { grid-template-columns: 1fr; }
    .zab-svcsplit-left { margin: 0 -30px; padding: 30px 48px; }
    .zab-svcsplit-right { padding: 24px 18px 30px; }
    .zmit .zab-svcsplit-left > h2 { font-size: 24px; line-height: 1.3; }
    .zmit .zab-svcsplit-right h3 { font-size: 24px; line-height: 1.3; }
    /* live 6ad880b at 430: 390x42, padding 14px 20px, 14px/14px - one line.
       At 16px our narrower pill wrapped to two lines and stood 62px tall. */
    .zmit a.zab-svcsplit-cta { width: 100%; padding: 14px 20px; font-size: 14px; line-height: 14px; }
    .zab-price-grid { grid-template-columns: 1fr; }
    .zab-price-cell { border-right: 0; border-bottom: 1px solid #fff; }
    .zab-price-cell:last-child { border-bottom: 0; }
    .zmit .zab-price.z-section { padding: 30px 0; }          /* live bd3ebd7 @375 */
    .zmit .zab-price-lead { font-size: 24px; line-height: 1.3; }
    .zab-dacc-q { padding: 18px; }
    .zmit .zab-cmp-head h2 { font-size: 24px; line-height: 1.25; }
    .zmit .zab-adv h2 { font-size: 24px; line-height: 1.3; }
    .zmit .zmit-stats-copy h3 { font-size: 26px; line-height: 1.3; }
}

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

/* ===== Common pre-footer / hover fixes (owner 2026-10-21; WP reference
   /cyber-security-services/application-security-services-wp). Page-local. ===== */
/* Phone: WP's pre-footer logo is 230x51 (the shared phone rule shrinks it to 30px tall). */
@media (max-width: 680px) {
    .zmit .zmit-insights .zmit-insights-copy .zmit-insights-logo {
        width: 230px; height: 51px; max-width: 100%;
        object-fit: contain; object-position: left center;
    }
}

/* 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-bottom: 0; }
    body .zmit section.zmit-final .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; }
    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: 500 / 577; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; }
}