/* /enterprise-software-development-company - page stylesheet.
   Built from css/outsource-software-development.css (itself the app/web-dev
   family sheet + the b8sd per-page block: .zab-frame, .zab-adv, .zab-trust
   v-split, .zmit-final conclusion band, .zab-intro gradient consultant band),
   plus the .zab-proc and .zab-flip blocks from
   css/nearshore-software-development.css (this page's band-id reference),
   then a MEASURED block for THIS page's own live URL at the bottom.
   $zmit_css_v for this page: esdc1001a - bump on every CSS edit, to a token no
   other page in the repo has ever used. */
/* Page sheet for /flutter-app-development-company - CLONED from css/hire-cloud-developers.css.
   Every measured value below was measured on hire-cloud-developers and is
   inherited here UNVERIFIED. Re-measure this page's own live bands at
   1440 / 768 / 375 and correct them before cutover.
   Rules for bands this page does not render are dead but harmless.

/* ============================================================
   Hire Cloud Developers - page-specific layer.
   Sub-reference for the 13-page hire-* staff-augmentation family.
   Cloned from css/it-infrastructure-management-services.css (approved, LIVE).

   Section order comes from the LIVE DOM at 1440 (20 bands), NOT from a
   static walk: this page reports only SIX depth-0 Elementor children with
   one measuring 7763px, and the real bands sit one level inside it. The
   <div> tags balance 712/712, so that nesting is genuine Elementor
   structure, not an unclosed tag. Content is safe to extract flat
   (largest fragment is 9.1% of the body); ORDER is not.

   Deltas vs the clone base:
     - NEW .zab-pricing band (live band 1) - see the block at the end of
       this file. It is the only component this family needed that did not
       already exist.
     - The .zab-video band IS used here (live band 4, 531px). The clone
       base carries its rules but renders no video; this page does.
     - No .zab-certified band and no .zab-long band on this page.
   ============================================================ */

/* ------------------------------------------------------------
   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 Acronis page runs 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/05/18073044/hero-1536x480.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: 12px; line-height: 12px; font-weight: 500;
        padding: 12px 24px; 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: 36px; }
    .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; }
    .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: 12px; line-height: 12px; font-weight: 500;
    padding: 12px 24px; 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 — 12 cards, FOUR columns. Measured on live's own
   #uc_service_grid_card_elementor_39d0dc0 wrap at 1440: grid,
   318.75px x 4, gap 30px, wrap 1365 at x30, items 319x281 over 3 rows.
   Card internals (live .uc_content / .uc_post_grid_style_one_item):
     item   radius 10px
     inner  #eff0f7 fill, padding 30px
     h3     18px / 23.4px / 700 #14142b, margin-bottom 20
     li     14px / 23.1px / 400 #14142b, disc, ul padding-left 20, margin 14 0
   Live's per-card "Explore ..." button (.uc_post_grid_style_one_button) is
   display:none at EVERY width — checked at 1440 AND 375 — and the whole card is
   wrapped in an .overlayLink anchor instead. So we emit the card AS the anchor
   and draw no CTA row: same rendered card, same interlink, no invented content.
   The lead line is live's icon-box DESCRIPTION at 34.7px/43px/400 (49c4c98),
   14px above the grid (live: lead ends y931, grid starts y945).
   ============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 14px; }
.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(4, 1fr); gap: 31px; }
/* ---- Service card: FLAT, not the accounting family's bordered card ----
   This sub-family's cards carry NO overlay link at all (0 hits on
   `overlayLink` in this page's raw HTML — all 10 cards, so anchoring the
   extractor on the link would have produced an EMPTY grid, not just a short
   one). With no link there is no hover state and no CTA row, and live styles
   the card as a plain white block instead of the bordered fill.

   Measured on live at 1440 / 768 / 375 — the card chrome is IDENTICAL at all
   three; only the grid changes (4 cols gap 31 / 2 cols gap 31 / 1 col gap 0):
     card   padding 0, no border, radius 8px, white
     inner  padding 0 10px
     title  18px / 23.4px, 700, margin 0 0 20px
     ul     margin 14px 0, indent 20px
     li     14px / 23.1px
   Card height comes out at 219 (1440) and 196 (768/375). */
.zmit-services-grid .zmit-svc-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    text-decoration: none;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; transition: color .2s ease; }
/* The shared sheet's list is `padding: 0 18px 22px`. That 18px RIGHT padding
   narrows each bullet to 217px where live's is 237px, which pushed most bullets
   from two lines to three and made the band 173px taller than live. Live's own
   ul is `padding-left: 20px; margin: 14px 0` with a plain disc marker — use it
   and restate all four sides, never a two-value shorthand (CLAUDE.md). */
/* NO list-style and NO left padding here: the shared sheet already draws the
   bullet as `.zmit-svc-card li::before { content:"\2022"; position:absolute;
   left:2px }` over `li { padding-left:18px }`. Adding `list-style: disc` renders
   the NATIVE marker on top of that ::before - two dots per bullet. */
.zmit-services-grid .zmit-svc-card ul { margin: 14px 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin-bottom: 0; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* Services-card hover + per-card CTA row, MEASURED off live with a real pointer
   (Chrome DevTools) on `.uc_post_grid_style_one_item`. Live changes exactly two
   things on a card it marks `.hasLink`: border #eff0f7 -> #0161ff and the fill
   #eff0f7 -> #d5e0f3. No shadow, no lift, no title-colour change. The per-card
   CTA wrapper is display:none at rest and shown 34px tall on hover. A card with
   no link gets neither — hence the `.has-link` scope. Scoped to this page sheet
   on purpose: the shared sheet feeds ~50 pages whose hover is not measured. */
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { border-color: #0161ff; background: #d5e0f3; }
.zmit-svc-cta { display: none; }
.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 {
    /* margin-top:auto, NOT a fixed gap: the card is a flex column stretched to
       the tallest card in the row, so auto pins every CTA the same distance
       from the card bottom and they align across the row regardless of how
       many bullets each card has. This is live's own mechanism. */
    display: flex; align-items: center; height: 34px; margin-top: auto; padding-top: 10px;
}
/* Live emits a REAL `.uc_more_btn` anchor here, a SIBLING of the absolute
   overlay link rather than nested in it, so this stays an <a>: 14px/700/#000
   with a 14px gap to the arrow. The shared sheet already lifts every
   `.zmit-svc-card a:not(.z-explore)` to z-index 2, so it sits above the
   overlay and stays clickable. */
.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; }


/* ============================================================
   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 VIDEO + COPY BAND (live 0e19d51). RE-MEASURED on THIS page at 1440 and
   the geometry is identical to the reference's, so its values are carried:

     0e19d51  flex row, gap 50, padding 20px 30px 30px, height 511 here
     2b5c78d  left column 820 at x30 | 50 gap | fce4fe2 right column 455 at x900
     c656b9c  hosted <video> 820 x 461 (poster, controls, preload=none)
     fce4fe2  right column 455 wide
     4740d79  h2 30px / 39px / 600 / #141414
     3ea3821  CTA fills the 455 column, #0161ff on #f2f7ff, 16px 30px, radius 0
     4512a67  blockquote, padding 0 20px 0 40px; quote 18px/23.4px italic
              #141414; cite 14px rgba(20,20,20,.7)
   ============================================================ */
.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: 820 / 461;
    object-fit: cover; background: #14142b;
}
.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: rgba(20, 20, 20, .7);
}
@media (min-width: 1081px) {
    /* live: 820 video | 50 gap | 455 copy inside a 1365 box */
    .zab-video-grid { grid-template-columns: 820fr 455fr; gap: 50px; align-items: start; }
}
@media (max-width: 1080px) {
    .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; }
    .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; }
}
/* ============================================================
   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; }
/* Live's own per-cell overrides — not a pattern, just what Elementor stores on
   these six rows (0fcc835/f37363c children). Reproduced because they are
   visible: rows 2 and 4 of the Zazz column are the lighter #f9fcff, and rows
   2 and 4 of the "Typical" column are plain white. */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(2),
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(4) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(2),
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(4) { background: #fff; }
/* Live keeps the hairline on EVERY row of the Zazz column (measured at 1440 on
   accounting-firms, pharmaceutical, real-estate, retail, saas, telecom, education
   and nonprofit: col-1 border-top-width is 1px on all rows; col-0 and col-2 only
   on row 1). Written row-count-independent on purpose - an nth-of-type list has
   to be re-counted for every sibling, and silently drops the hairline off the
   last rows whenever a page has more rows than the list covers. */
.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);
}
.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 { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 6px; }
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-body); 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; }
/* ---- Testimonials: 2-up PEEK carousel, not the reference gradient card ----
   Live (element 65e1765) is an Elementor n-carousel: viewport 1365 with
   overflow hidden, slides 725 wide on a 735 stride (10px margin-right), so the
   active card sits flush left in full and the NEXT card is clipped by the right
   edge. The reference band is a single full-width gradient card swapped in
   place - a different component, so the gradient is dropped here.

   Measured on live at 1440:
     card     transparent, radius 5px, padding 80px, height 477
     name     22px / 28.6px, 600, #14142b
     org      34px / 47.6px, 600, #14142b
     quote    18px / 29.7px, 400, #14142b, margin-bottom 28.8px
   Slide width is kept as a PERCENTAGE of the track (725/1365 = 53.114%) so the
   peek survives this family s 1340 container without re-measuring. */
.zmit-testi-card {
    background: none;
    overflow: hidden;
    min-height: 477px;
    padding: 0;}
.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 5adf0d8 / 8864: banner 2dee0b2 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.
   ============================================================ */
.zmit .zmit-final.z-section { margin: 0; padding: 150px 0 79px; }
/* The gradient IS live's: post-8864.css (the JetEngine component this band ships
   inside) sets `.elementor-element-2dee0b2 { background: linear-gradient(...) }`
   with exactly these stops. It is missing from a naive computed-style read only
   because Elementor's per-page custom CSS rides in the Seraphinite bundle — do
   NOT flatten this to transparent on that evidence (CLAUDE.md, section 7). */
.zmit-final-banner {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px;
    padding: 50px;
    min-height: 373px;
    display: flex;
    align-items: center;
}
.zmit-final-copy { max-width: 583px; }
.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: 583px; margin: 0 0 26px; }
.zmit-final-media img { position: absolute; right: 0; bottom: 0; width: 500px; height: 476px; }

/* ============================================================
   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; }
    /* live ac1f091 is a 225x50 logo cell with a 20px gap to the title (title
       starts x258 from the logo's x13) — 194x43 on the reference page. */
    .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: 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); gap: 31px; }
    .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; }
    /* padding neutralised: this family flat card keeps 0 10px at every width */
    .zmit-services-grid .zmit-svc-card { padding: 0 10px; }
    .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. */
    /* live stacks the flat cards flush at 375 - measured gap 0 */
    .zmit-services-grid { grid-template-columns: 1fr; gap: 0; }
    .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 16px 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; }

    /* S05 — live 93d485c is full-bleed: heading block 69 (a 39px h2 inside a
       padded heading widget), 10 to the copy, copy 36 on the full 1405 (one
       line, not the three our 1000px cap forced), 10 to the embed, embed 784
       = 909, and live's band measures 910. The reference's 30px top band
       padding stands in for live's taller heading widget: 30 + 39 + 10 + 26 +
       19 + 784 = 908. Measured live: section y3059 h910, heading y3059,
       copy y3138, embed y3184 h784. */
    .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: 0 10px; }

    /* 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: 0 10px; } /* 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: 0 10px; } /* 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: 0; }            /* S04 1084 */
    .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: 3-up small instead of 2-up large */
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

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

/* ============================================================
   THIS PAGE'S FIGURE ASPECT. The reference page's consultant photo is 500x551
   (portrait); ours is 1024x975 (nearly square), so every hard-coded pixel HEIGHT
   the reference carries for .zmit-final-media img stretches it. Desktop is set
   to live's own 500x476 further up; the tablet tier is released to the natural
   ratio here (this block loads last, so it wins over the 400/453px values).
   ============================================================ */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-final-media img { width: 363px; height: auto; }
}

/* ============================================================
   S16 LONG-FORM COPY + FIGURE  (live 225b8b4) — NEW BAND
   ============================================================
   Present on all seven pages of this sub-family and on none of the industry
   pages, so it lives here rather than in the shared sheet: adding it to
   css/it-managed-services-zazz.css would change the shared sheet's bytes and
   force a never-used cache token across every page that references it
   (CLAUDE.md section 10) for a rule none of them use.

   Measured on live at 1440 (viewport 1425 inside the scrollbar):
     section   background #fcfcfc, padding 0 30px, content 1365 wide
     inner     flex row, gap 50px, padding 40px top / 80px bottom
     columns   657.5px each = (1365 - 50) / 2
     left col  flex column, gap 40px  (heading -> copy -> button)
     h2        34px / 44.2px, weight 400, #14142b
     p         16px / 26.4px, #14142b, separated by one line-height
     button    #0161ff, 13px / 13px, weight 500, padding 15px 30px,
               radius 8px, label then a 16px gap then the arrow
     figure    657.5 x 400, object-fit cover, radius 10px, vertically centred

   The h2 weight really is 400 here, not the 600/800 the rest of this sheet
   uses — read off getComputedStyle on live, not assumed from the neighbours. */
.zmit .zab-long { background: #fcfcfc; padding: 0; }   /* beats .zmit .z-section 64px */
.zab-long .z-container { padding-top: 40px; padding-bottom: 80px; }
.zab-long-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }

.zab-long-copy { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.zab-long-copy h2 {
    font-size: 34px; font-weight: 400; line-height: 44.2px;
    color: #14142b; margin: 0; letter-spacing: normal;
}
.zab-long-body p {
    font-size: 16px; font-weight: 400; line-height: 26.4px;
    color: #14142b; margin: 0 0 26.4px;
}
.zab-long-body p:last-child { margin-bottom: 0; }

.zmit .zab-long-copy .z-btn {
    background: #0161ff; color: #f2f7ff;
    font-size: 13px; font-weight: 500; line-height: 13px;
    padding: 15px 30px; border-radius: 8px; gap: 16px;
}
.zmit .zab-long-copy .z-btn:hover { background: #0148c7; color: #f2f7ff; }
/* the arrow is decoration, not label text — same treatment as the other CTAs */
.zmit .zab-long-copy .z-btn::after { content: "\2192"; font-size: 13px; line-height: 1; }

.zab-long-media { display: flex; flex-direction: column; justify-content: center; }
.zab-long-media img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; }

/* .zab-long responsive — measured on live at 768 and 375, not interpolated.
   Live's h2 here rides the theme's fluid clamp, hence the fractional sizes. */
@media (max-width: 1080px) and (min-width: 681px) {
    /* 768: single column, figure below the copy, 30px between them */
    .zab-long-grid { grid-template-columns: 1fr; gap: 30px; }
    .zab-long-copy h2 { font-size: 26.87px; line-height: 34.93px; }
    .zmit .zab-long-copy .z-btn { font-size: 16px; line-height: 16px; }
}
@media (max-width: 680px) {
    /* 375: band tightens to 30/50, copy stack gap drops to 20, CTA goes
       full-bleed and wraps to two lines exactly as live does (62px tall) */
    .zab-long .z-container { padding-top: 30px; padding-bottom: 50px; }
    .zab-long-grid { grid-template-columns: 1fr; gap: 30px; }
    .zab-long-copy { gap: 20px; align-items: stretch; }
    .zab-long-copy h2 { font-size: 22.91px; line-height: 29.78px; }
    .zab-long-body p { font-size: 14px; line-height: 23.1px; margin-bottom: 23.1px; }
    .zmit .zab-long-copy .z-btn {
        font-size: 16px; line-height: 16px;
        width: 100%; justify-content: center; text-align: center;
    }
}

/* ---- Testimonial peek track (see the .zmit-testi-card note above) ---- */
.zmit-testi-track {
    display: flex;
    gap: 10px;
    transition: transform .35s ease;
    will-change: transform;
}
/* the shared sheet hides every slide but .is-active — in a track they must ALL
   render, or there is nothing to peek at */
.zmit-testi-track .zmit-testi-slide,
.zmit-testi-track .zmit-testi-slide.is-active {
    display: block;
    flex: 0 0 53.114%;      /* live 725 / 1365 */
    padding: 80px;
    border-radius: 5px;
    background: none;
}
.zmit-testi-track .zmit-testi-role { font-size: 22px; font-weight: 600; line-height: 28.6px; color: var(--zab-ink); margin: 0 0 0; }
.zmit-testi-track .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; color: var(--zab-ink); margin: 0; }
.zmit-testi-track .zmit-testi-quote { font-size: 18px; font-weight: 400; line-height: 29.7px; color: var(--zab-ink); margin: 0 0 28.8px; }
/* live draws no rule between the name and the org on this band */
.zmit-testi-track .zmit-testi-rule { display: none; }

/* Live floats the two arrows OUTSIDE the viewport (38x38, prev at -25px, next
   at -25px, vertically centred on the card) rather than flanking it in flow.
   The shared sheet lays the carousel out as a flex row, which stole 96px from
   the viewport and made the peek maths wrong. */
.zmit-testi-carousel { display: block; position: relative; gap: 0; }
.zmit-testi-card { width: 100%; }
.zmit-testi-track { width: 100%; }
.zmit .zmit-testi-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; z-index: 2;
}
.zmit .zmit-testi-nav.prev { left: -25px; }
.zmit .zmit-testi-nav.next { right: -25px; }

/* ============================================================
   S12 BUSINESS ADVANTAGES — live cfcd04b is TWO COLUMNS
   ============================================================
   The accounting reference stacks a full-width heading over a 2-up card grid.
   Live here splits the band: heading + lead copy in a 658px left column, a
   2x2 icon-box grid in a 658px right column, 50px between them.

   Measured at 1440:
     inner      2 x 658, gap 50, padding 40 top / 10 bottom
     left col   flex column, gap 20 (h2 then the lead paragraphs)
     lead       18px / 27px, paragraphs 20px apart
     right col  grid 2 x 318.75, gap 20
     card       transparent, no border, no radius, padding 20
     card h3    20px / 24px, margin-bottom 12
     card p     15px / 22.5px, rgba(20,20,20,.7) */
.zmit .zab-adv.z-section { padding: 40px 0 10px; }
.zab-adv .z-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.zab-adv-copy { display: flex; flex-direction: column; gap: 20px; }
.zab-adv-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0; }
.zab-adv-lead { display: flex; flex-direction: column; gap: 20px; }
.zab-adv-lead p { font-size: 18px; font-weight: 400; line-height: 27px; color: var(--zab-ink); margin: 0; }
.zab-adv .zab-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zmit .zab-adv .zab-adv-card { background: none; border: 0; border-radius: 0; padding: 20px; }
.zab-adv .zab-adv-card h3 { font-size: 20px; font-weight: 600; line-height: 24px; color: var(--zab-ink); margin: 0 0 12px; }
.zab-adv .zab-adv-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: rgba(20, 20, 20, .7); margin: 0; }

/* S14 stats: live's inner padding is 80px top and bottom (the reference's 60
   left the band 40 short) and its lead copy runs at a 24px line-height. */
.zmit .zmit-stats.z-section { padding: 80px 0; }
.zmit-stats-copy p { line-height: 24px; }
/* icon above the title, 50x50, 20px clear of it (live's icon-box is a flex
   column with gap 20) */
.zab-adv .zab-adv-card { display: flex; flex-direction: column; }
.zab-adv-ico { display: block; width: 50px; height: 50px; margin: 0 0 20px; color: #69727d; }
.zab-adv-ico svg { width: 50px; height: 50px; display: block; }

/* ============================================================
   Responsive for the three bands this family restyles
   (services / business advantages / testimonials).
   Every value measured on live at 768 and 375 — see the desktop notes above.
   ============================================================ */
@media (max-width: 1080px) and (min-width: 681px) {
    /* ---- 768 ---- */
    /* advantages: the two columns stack; the card grid stays 2-up and the
       cards lose their padding entirely */
    .zmit .zab-adv.z-section { padding: 25px 0 50px; }
    .zab-adv .z-container { grid-template-columns: 1fr; gap: 50px; }
    .zab-adv .zab-adv-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .zmit .zab-adv .zab-adv-card { padding: 0; }
    .zab-adv-copy h2 { font-size: 26.87px; line-height: 34.934px; }

    /* testimonials: live drops the peek and shows ONE card, padded 30 */
    .zmit .zmit-testi.z-section { padding: 40px 0; }
    .zmit-testi h2 { margin-bottom: 30px; }
    .zmit-testi-card { min-height: 0; }
    .zmit-testi-track { gap: 0; }
    .zmit-testi-track .zmit-testi-slide,
    .zmit-testi-track .zmit-testi-slide.is-active { flex: 0 0 100%; padding: 30px; }
    /* the card type rides the theme fluid clamp below 1080 */
    .zmit-testi-track .zmit-testi-lead { font-size: 26.87px; line-height: 37.62px; }
}
@media (max-width: 680px) {
    /* ---- 375 ---- */
    .zmit .zab-adv.z-section { padding: 50px 0; }
    .zab-adv .z-container { grid-template-columns: 1fr; gap: 50px; }
    .zab-adv .zab-adv-grid { grid-template-columns: 1fr; gap: 30px; }
    .zmit .zab-adv .zab-adv-card { padding: 0; }
    /* the whole advantages band steps down a size at 375 */
    .zab-adv-copy h2 { font-size: 22.91px; line-height: 29.78px; }
    .zab-adv-lead p { font-size: 14px; line-height: 21px; }
    .zab-adv .zab-adv-card h3 { font-size: 16px; line-height: 19.2px; margin-bottom: 12px; }
    .zab-adv .zab-adv-card p  { font-size: 14px; line-height: 21px; }

    .zmit .zmit-testi.z-section { padding: 50px 0; }
    .zmit-testi h2 { margin-bottom: 30px; }
    .zmit-testi-card { min-height: 0; }
    .zmit-testi-track { gap: 0; }
    .zmit-testi-track .zmit-testi-slide,
    .zmit-testi-track .zmit-testi-slide.is-active { flex: 0 0 100%; padding: 20px; }
    .zmit-testi-track .zmit-testi-role  { font-size: 18px; line-height: 23.4px; }
    .zmit-testi-track .zmit-testi-lead  { font-size: 20px; line-height: 28px; }
    .zmit-testi-track .zmit-testi-quote { font-size: 14px; line-height: 23.1px; margin-bottom: 22.4px; }
}

/* ============================================================
   OWNER OVERRIDE 2026-09-01 — service cards use the HOUSE style
   ============================================================
   Live renders this page's service cards FLAT (white or transparent, no
   border, little or no padding) and the block earlier in this sheet matched
   that measurement exactly. Owner's call after reviewing the preview: every
   other services band on the site uses the bordered #eff0f7 card, and a flat
   card reads as unstyled next to them.

   So this is a DELIBERATE divergence from live, applied on request. Values are
   copied from css/managed-it-services-for-accounting-firms.css, which is live
   and approved, so the band now matches the rest of the site rather than this
   page's own live markup.

   Only the CARD is overridden — the grid's column count and gutter stay as
   measured on THIS page, because those are layout, not styling, and forcing
   4-up would reflow pages whose live grid is 3-up. */
.zmit-services-grid .zmit-svc-card {
    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;
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid .zmit-svc-card { padding: 22px; }
}
@media (max-width: 680px) {
    .zmit-services-grid .zmit-svc-card { padding: 26px; }
}

/* ============================================================
   OWNER FIXES 2026-09-01 (review pass on the local preview)
   ============================================================ */

/* 1. Advantages: the heading carried BOTH its own 50px bottom margin and the
      copy block's 50px, stacking to a ~100px void between the title and the
      cards. The copy container's own gap/margin is the only spacer needed. */
.zab-adv .zab-adv-copy h2 { margin-bottom: 0; }

/* 2. Testimonials: the band was rendering as bare text on the page background
      because the card was set transparent. Every other testimonials band on
      the site is a gradient panel — restore it, and use the house 56/64
      padding rather than live's 80 so the panel matches its neighbours. */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
    border-radius: 16px;
}
.zmit-testi-track .zmit-testi-slide,
.zmit-testi-track .zmit-testi-slide.is-active { padding: 56px 64px; background: none; }
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-testi-track .zmit-testi-slide,
    .zmit-testi-track .zmit-testi-slide.is-active { padding: 32px 24px; }
}
@media (max-width: 680px) {
    .zmit-testi-track .zmit-testi-slide,
    .zmit-testi-track .zmit-testi-slide.is-active { padding: 24px 20px; }
}

/* 3. Hero form: the card was `height: 100%`, stretching it to the hero row and
      leaving up to 101px of blank white under the privacy note when the form
      is shorter than the banner. Let it size to its content; the negative
      bottom margin still carries the intended overhang onto the logo strip. */
@media (min-width: 1081px) {
    .zmit-form-card { height: auto; align-self: start; }
}

/* The per-page services column counts above (3-up / 4-up, 10px or 30px gutter)
   were written WITHOUT a media query, so they also applied below 1080 and beat
   the family's 2-up and 1-up rules — cards went narrow, wrapped, and the band
   ran up to 515px taller than live at 768. Restate the responsive grid last so
   the desktop override stays desktop-only. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 680px) {
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* SUPERSEDES the `height: auto` rule above.
   Measured on the LIVE, approved accounting page at 1440: the hero form card
   is 612px tall, stretched to the hero row (`height: 100%`), and carries a
   75px gap below the privacy note by design — that overhang onto the logo
   strip is what makes it match every other page. Sizing the card to its
   content made it noticeably SHORTER than the rest of the site, so the stretch
   is restored. */
@media (min-width: 1081px) {
    .zmit-form-card { height: 100%; align-self: stretch; }
}
/* Floor the card at the reference height. It stretches to the hero row, so a
   page with a shorter headline got a shorter card (572 and 588 against the
   approved page's 612) and read as inconsistent with the rest of the site.
   min-height raises the short ones without shrinking the tall ones (the pages
   whose hero runs to 637 keep it). */
@media (min-width: 1081px) {
    .zmit-form-card { min-height: 612px; }
}
/* The card is floored at 612px and stretches to the hero row, so any slack
   between the form's natural height and the card pooled entirely UNDER the
   privacy note — up to 101px of blank white that read as an unfinished card.
   Centring the column splits that slack top and bottom instead, so the block
   sits optically centred at every hero height. */
@media (min-width: 1081px) {
    .zmit-form-card { display: flex; flex-direction: column; justify-content: center; }
}

/* ============================================================
   S01 PRICING - the one NEW component in the hire-* family.
   Live band 1, measured at 1440/768/375 (Elementor image-box widgets
   in a dark container; region is the box title, price the description).

     1440  section pad 0 30px | inner flex col gap 50 | row nowrap gap 20
           cards ~320-330 x 277, pad 50, radius 15          band 493
     768   section pad 0 20px | row nowrap gap 20
           cards ~160-168 x ~220, pad 30px 15px             band 589
     375   see the OWNER OVERRIDE note below                band 1091 on live

   The dark fill is this band only - the rest of the page is light, so the
   copy here is inverted (#fff heading, #fcfcfc lead) while the CARDS stay
   light with dark ink.
   ============================================================ */
.zmit .zab-pricing.z-section { background: #14142b; padding: 30px 0; }
.zab-pricing-inner { display: flex; flex-direction: column; gap: 50px; }
.zab-pricing-head { display: flex; flex-direction: column; gap: 10px; }
/* h2 holds 34px/51px at EVERY breakpoint on live - do not scale it down */
.zmit .zab-pricing-head h2 {
    font-size: 34px; line-height: 51px; font-weight: 400;
    color: #fff; text-align: center; margin: 0;
}
.zmit .zab-pricing-head p {
    font-size: 16px; line-height: 22.4px; font-weight: 400;
    color: #fcfcfc; text-align: center; margin: 0;
}
.zab-pricing-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zab-pricing-card {
    background: #eff0f7; border-radius: 15px; padding: 50px;
    display: flex; flex-direction: column;
}
/* flag icon: fixed 50x37 on live. Height is explicit so the card cannot
   grow while a CloudFront SVG is still loading (CLS). */
.zab-pricing-card img { width: 50px; height: 37px; display: block; margin: 0 0 23px; }
.zmit .zab-pricing-region {
    font-size: 18px; line-height: 29.7px; font-weight: 500;
    color: #06001c; margin: 0 0 25px;
}
.zmit .zab-pricing-amount {
    font-size: 28px; line-height: 28px; font-weight: 700;
    color: #06001c; margin: 0;
}
.zab-pricing-amount .unit { display: block; }

@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zab-pricing.z-section { padding: 30px 0; }
    .zab-pricing-cards { gap: 20px; }
    .zab-pricing-card { padding: 30px 15px; }
    .zab-pricing-card img { margin-bottom: 18px; }
    .zmit .zab-pricing-region { margin-bottom: 18px; }
}

/* OWNER OVERRIDE 2026-09-01 - clean 2x2 at mobile.
   Live wraps these four cards UNEVENLY at 375 (measured 320 / 151 / 149 /
   320 - full, half, half, full) because the individual Elementor widgets
   carry per-widget widths. Reproducing that needs per-nth-child flex-basis
   and reads as a broken grid. The owner chose house consistency, the same
   call already made for the service cards, the badge band and the
   engagement-models band. So this band is a clean 2x2 here and its 375
   height deliberately does NOT match live's 1091. Do not "fix" it back. */
@media (max-width: 680px) {
    .zab-pricing-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .zab-pricing-card { padding: 30px 15px; }
    .zab-pricing-card img { margin-bottom: 18px; }
    .zmit .zab-pricing-region { margin-bottom: 18px; }
    .zmit .zab-pricing-amount { font-size: 24px; line-height: 26px; }
}

/* ============================================================================
   PAGE GEOMETRY — measured on live /hire-cloud-developers (2026-09-04).
   Everything above was inherited from the reference sheet
   (it-infrastructure-management-services.css) and is tuned to THAT page's
   copy, so every band here was re-measured against this page's own live DOM.
   Live band ids are quoted so each number can be re-checked.

   Rules that change LAYOUT are scoped to >=1081 (this family's desktop
   breakpoint). An unscoped desktop grid here silently breaks 768 and 375:
   pinning .zab-video-grid to 820px/455px stopped that band stacking at all.
   ============================================================================ */

/* --- width-independent ---------------------------------------------------- */

/* container — DELIBERATELY NOT widened. Live runs its containers
   full-viewport-minus-30px (content 1365 at x=30) rather than the shared
   1400/1340 box, and an earlier pass here set `.zmit .z-container
   { max-width: none }` to match it. That is banned by CLAUDE.md ("Never
   widen the content box, even when live is wider") and the owner ruled on
   2026-08-26 that consistency across migrated pages beats matching live's
   width on one page. Acronis is the named example of exactly this trap.

   Consequence, on purpose: this page's content box is 1340 at x=43 like every
   sibling, NOT live's 1365 at x=30. Bands whose copy wraps at a different
   point therefore run a few px TALLER than live. Do not "fix" those by
   shrinking type to recover live's height — width is the one dimension where
   the house standard wins, and the type metrics below are live's own. */

/* hero 8e8eda0 — live pins the hero at 600 and lets the form card (656)
   overhang the bottom edge. Below 1081 the stacked content exceeds 600 and
   the pin stops mattering, so it needs no breakpoint. */
.zmit .zmit-hero { min-height: 600px; }

/* card and type metrics live keeps at every width */
.zmit .zab-trust-cell { padding: 20px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; line-height: 42px; }
.zmit .zmit-recognized-logos img { height: 70px; }
/* Review-logo row — live is `column-gap: 0; row-gap: 20px` at BOTH 1440 and
   768, verified off the rendered boxes: the marks sit flush (left 113/243/424
   at 1440, 70/200/381 at 768) because each PNG carries its own internal
   padding, so nothing collides. The inherited 36px gap makes 130+181+241+72
   = 624 against a 613 track at 768 and the row wraps, adding ~106 to the
   band. An earlier fix here used 30px, which clears 613 by ONE pixel and
   would wrap again on any sibling page with a wider mark (zazz-c4 measured
   vancouver at 130+203+241 = 574, where 30px gaps overflow). Keep it 0, and
   keep `wrap` — live wraps rather than overflowing. */
.zmit .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; }
.zmit .zab-adv-card h3 { font-size: 15px; line-height: 19.5px; margin: 0; }
.zmit .zab-adv-card p  { font-size: 15px; line-height: 28px;   margin: 0; }
.zmit .zmit-services-grid .zmit-svc-card ul { margin: 0 0 14px; }
.zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 20px 20px; }
.zmit .zmit-faq-a p { font-size: 16px; line-height: 25.6px; margin-bottom: 25.6px; }
.zmit .zab-problems-cta .zab-btn { font-size: 16px; line-height: 16px; padding: 13px 35px; }
.zmit .zab-pricing-amount .unit { line-height: 32px; }

/* contact form — the SAME HubSpot form (896 wide on both) renders 498 tall on
   live and 443 here: HubSpot's own field CSS differs between embed contexts
   and nothing in this repo controls it. The card reserves live's height, the
   same tactic the hero form card already uses. */
.zmit .zmit-contact-form .zmit-hsform { min-height: 498px; }

/* --- desktop only (>=1081) ------------------------------------------------ */
@media (min-width: 1081px) {

    /* pricing cb42437 — 493 = 30 + 106 head + 50 + 277 cards + 30. The lead is
       constrained to 1256 so it wraps to TWO lines, which is what makes the
       head block 106. */
    .zmit .zab-pricing-head p { max-width: 1256px; margin-left: auto; margin-right: auto; }

    /* services 743c4b6 — 1000 = 50 + 43 lead + 20 + 857 grid + 30. Live's grid
       gap is 30 in BOTH axes: rows measure 281/258/258. */
    .zmit .zmit-services.z-section { padding: 50px 0 30px; }
    .zmit .zmit-services-grid { column-gap: 30px; row-gap: 30px; }

    /* video 0e19d51 — 531 = 20 + 461 media + 50. Live's media box is 820x461
       and the copy column 455, gap 50 — not the law-firms 860x484 this markup
       was cloned with. MUST stay scoped or the band never stacks. */
    .zmit .zab-video.z-section { padding: 20px 0 50px; }
    .zmit .zab-video-grid { grid-template-columns: 820px 455px; gap: 50px; }
    .zmit .zab-video-media video { width: 820px; height: 461px; }

    /* comparison 7270657 — 572 exactly, with no padding of its own; the
       heading band above it (81d38f2, 52) carries the spacing. */
    .zmit .zab-cmp.z-section { padding: 0; }

    /* steps 716d40b — live's card row sits 10px off the CTA, not 33. */
    .zmit .zab-steps-grid { padding-bottom: 10px; }

    /* recognized 1faf4e0 — 387. Live's band is 720 copy + 250 CTA pushed
       apart, CTA vertically centred; the copy must be 720 wide or it
       under-wraps and the band comes up ~80 short. */
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
    .zmit .zmit-recognized-band {
        grid-template-columns: 720px 250px;
        justify-content: space-between;
        align-items: center;
    }
    .zmit .zmit-recognized-cta .z-btn { padding: 20px; }

    /* adv ae25977 — 526 = 30 + 95 title + 400 grid (no bottom padding).
       Live stacks the title ABOVE a full-width 4-up grid; the shared sheet
       splits the container into copy-left / grid-right, which halved the
       grid's width and doubled its height. The grid runs a 10px COLUMN gap
       (four 333.75 tracks in 1365) and the icon block is 108 tall — that one
       number was 110 of the band's shortfall. The three-class selectors
       matter: `.zmit .zab-adv .zab-adv-card` is what the sheet already uses,
       so a two-class override never lands. */
    .zmit .zab-adv.z-section { padding: 30px 0 0; }
    .zmit .zab-adv .z-container { display: block; }
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: repeat(4, 1fr); column-gap: 10px; row-gap: 0; }
    .zmit .zab-adv .zab-adv-card { padding: 32px 25px; display: flex; flex-direction: column; gap: 20px; }
    .zmit .zab-adv-ico { display: block; height: 108px; margin: 0; }
    .zmit .zab-adv-copy { gap: 0; padding-bottom: 52px; }

    /* trust 43ab1b2 — 465. Live's panel is 2x2 (667.5 tracks, 30 gap), not the
       four-across strip the reference sheet builds. */
    .zmit .zab-trust.z-section { padding: 20px 0 30px; }
    .zmit .zab-trust-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }

    /* stats 9d19ee4 — 296 = 50 + 196 copy + 50, the CTA filling the 438
       column at 58 tall. */
    .zmit .zmit-stats.z-section { padding: 50px 0; }
    .zmit .zmit-stats-copy .zab-btn { width: 100%; justify-content: center; padding: 13px 35px; }

    /* testi 65e1765 — 507 = 30 + 44 heading + 50 gap + 352 carousel + 30.
       The reference's 477 carousel is ITS height, not this page's. */
    .zmit .zmit-testi-card { min-height: 352px; }

    /* faq 1ad22e1 — 913 = 30 + 44 + 30 + 779 + 30. Live runs the 11 items as
       TWO columns of 655 split 6/5. Default row flow interleaves them
       (1,3,5 left / 2,4,6 right), which reorders the questions AND mis-sizes
       the band, since the open first item has to sit in column 1. */
    .zmit .zmit-faq-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 655px));
        grid-auto-flow: column;
        grid-template-rows: repeat(6, auto);
        justify-content: space-between;
        gap: 0 55px;
        align-content: start;
        padding: 0;
    }

    /* final 23267c4 — 670; live's copy card is 440 tall and the 500 figure
       576 with margin-top -136.5, overhanging the band top. */
    .zmit .zmit-final-banner { min-height: 440px; }

    /* contact 7572440 — 830; live's form card is 956 wide, not 620. */
    .zmit .zmit-contact-form { max-width: 956px; }

    /* insights a8ff3b4 — 328 = 80 + 168 + 80. Live sets the logo BESIDE the
       title (270 + 458 in a 770 box), then the lead at 20/28 with a 32 tail. */
    .zmit .zmit-insights-grid { row-gap: 20px; }
    .zmit .zmit-insights-copy { grid-template-columns: 270px minmax(0, 458px); gap: 20px; }
    .zmit .zmit-insights-logo { width: 270px; height: 60px; }
    .zmit .zmit-insights-title { font-size: 28px; line-height: 28px; }
    .zmit .zmit-insights-copy > p:last-child { font-size: 20px; line-height: 28px; margin-bottom: 32px; }
}

/* --- tablet (681-1080) ---------------------------------------------------
   Measured on live at 768 (section 753, inner 693). The inherited rules here
   belong to the reference page, so each band was re-measured. Live band
   totals at 768: hero 1115, strip 125, pricing 589, services 1576,
   problems 913, video 771, bookcal 926, cmphead 97, cmpacc 644, cmp 0,
   steps 712, recognized 415, adv 1368, stories 1302, trust 641, stats 315,
   testi 367, faq 1171, final 706, contact 855, insights 296.
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 681px) {

    /* pricing — live is 589 = 80 + 157 head + 50 + 222 cards + 80 with a 713
       inner box (its gutter narrows to 20 here). The gutter is NOT copied:
       per-section side padding on a .z-container is banned, so the box stays
       693 like every sibling and the four cards come out slightly narrower
       than live's 168. The amount step-down to 24/24 over a 29 unit line IS
       live's and is kept — that is type, not width. */
    .zmit .zab-pricing.z-section { padding: 80px 0; }
    .zmit .zab-pricing-cards { grid-template-columns: repeat(4, 1fr); gap: 13.67px; }
    .zmit .zab-pricing-card { padding: 30px 15px; }
    .zmit .zab-pricing-card img { width: 41px; height: 30px; margin-bottom: 24px; }
    .zmit .zab-pricing-amount { font-size: 24px; line-height: 24px; }
    .zmit .zab-pricing-amount .unit { line-height: 29px; }

    /* services — 1576 = 30 + 86 lead + 20 + 1410 grid + 30. Live stays TWO
       columns here (332-wide cards, 30 gap, five rows of 258) and keeps the
       card's 30px inner padding; the inherited `padding: 0 10px` flattens it.
       The lead steps UP to 34.7/43 and wraps to two lines. */
    .zmit .zmit-services.z-section { padding: 30px 0; }
    .zmit .zmit-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .zmit .zmit-services-grid .zmit-svc-card { padding: 30px; }
    .zmit .zab-svc-lead { font-size: 34.7px; line-height: 43px; }

    /* video — 771 = 30 + 390 media + 50 + 271 copy + 30, stacked. */
    .zmit .zab-video.z-section { padding: 30px 0; }
    .zmit .zab-video-grid { grid-template-columns: 1fr; gap: 50px; }

    /* comparison heading — live's h2 is 33.56/33.56 here and wraps to two
       lines, making the band 97; at the inherited 27px it stays one line. */
    .zmit .zab-cmp-head h2 { font-size: 33.56px; line-height: 33.56px; }

    /* recognized — 415 = 40 + 247 copy + 40 gap + 56 CTA + 40, stacked. */
    .zmit .zmit-recognized-band { padding: 40px; gap: 40px; }

    /* adv — 1368 = 20 + 116 title + 1201 grid + 30. Live stacks the four
       cards into ONE column here and the title runs 34.7/43. */
    .zmit .zab-adv.z-section { padding: 20px 0 30px; }
    .zmit .zab-adv .z-container { display: block; }
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: 1fr; gap: 0; }
    .zmit .zab-adv-copy { gap: 0; padding-bottom: 30px; }
    .zmit .zab-adv-copy h2 { font-size: 34.7px; line-height: 43px; }

    /* trust — 641 = 20 + 35 eyebrow + 50 + 506 panel + 30, panel still 2x2. */
    .zmit .zab-trust.z-section { padding: 20px 0 30px; }
    .zmit .zab-trust-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .zmit .zab-trust-eyebrow { font-size: 26.87px; line-height: 34.93px; }

    /* stats — 315 = 30 + 97 head + 50 + 108 counters + 30. */
    .zmit .zmit-stats.z-section { padding: 30px 0; }

    /* faq — 1171 = 30 + 35 heading + 638 + 398 + 30, ONE column of items. */
    .zmit .zmit-faq.z-section { padding: 30px 0; }
    .zmit .zmit-faq h2 { font-size: 26.87px; line-height: 34.93px; }

    /* insights — 296 = 80 + 136 + 80, still side by side. Live pairs a 183x41
       logo with a 16/16 title, then a 14/19.6 lead with a 22.4 tail. */
    .zmit .zmit-insights-copy { grid-template-columns: 183px minmax(0, 177px); gap: 20px; }
    .zmit .zmit-insights-logo { width: 183px; height: 41px; }
    .zmit .zmit-insights-title { font-size: 16px; line-height: 16px; }
    .zmit .zmit-insights-copy > p:last-child { font-size: 14px; line-height: 19.6px; margin-bottom: 22.4px; }
}

/* --- tablet, second pass: specificity + wrapping ------------------------- */
@media (max-width: 1080px) and (min-width: 681px) {

    /* adv card — the inherited tablet rule is `.zmit .zab-adv .zab-adv-card
       { padding: 0 }` and the icon rule is equally specific, so the
       two-class overrides never landed and each card came out 174 instead of
       live's ~300. */
    .zmit .zab-adv .zab-adv-card { padding: 32px 25px; display: flex; flex-direction: column; gap: 20px; }
    .zmit .zab-adv .zab-adv-ico { display: block; height: 108px; margin: 0; }

    /* recognized — see the logo-gap rule in the width-independent block. */
    .zmit .zmit-recognized.z-section { padding: 0; }

    /* comparison heading — live pads 30 below the two-line h2 (band 97). */
    .zmit .zab-cmp-head.z-section { padding: 0 0 30px; }

    /* insights title — the inherited rule is 24/31 with a 24px indent inside
       a 153-wide column, which wraps it to 155 tall. Live is 16/16, 48 tall. */
    .zmit .zmit-insights-copy .zmit-insights-title { font-size: 16px; line-height: 16px; padding: 0; }
}

/* --- tablet, third pass: faq ---------------------------------------------
   The inherited sheet keeps the FAQ in TWO columns at tablet (332-wide
   items); live drops to ONE 693-wide column and steps the question down to
   14.59/24.08 inside a 25px box, giving 74-tall closed items. Mine were 131.
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-faq-list { display: block; grid-template-columns: none; }
    .zmit .zmit-faq-q { font-size: 14.59px; line-height: 24.08px; padding: 25px; }
    .zmit .zmit-faq-a p { font-size: 14.59px; line-height: 24.08px; margin-bottom: 24.08px; }
}

/* --- mobile (<=680) ------------------------------------------------------
   Measured on live at 375 (section 375, inner 335, 20px gutter). Live band
   totals: hero 1512, strip 125, pricing 836, services 2921, problems 1258,
   video 598, bookcal 952, cmphead 83, cmpacc 732, cmp 0, steps 1205,
   recognized 638, adv 1700, stories 1854, trust 1166, stats 584, testi 425,
   faq 1427, final 999, contact 1170, insights 464.

   NOTE on the pricing band: live is a clean 2x2 here (161-wide cards, two
   rows of 220). The earlier build note in scratchpad/b4/SPEC.md recorded an
   uneven 1-2-1 wrap (320/151/149/320) and called the 2x2 a deliberate
   divergence. Re-measured on live today it is 2x2, so the owner's choice
   MATCHES live and is not a divergence at all.
   ------------------------------------------------------------------------- */
@media (max-width: 680px) {

    /* recognized logos — live does NOT shrink these on mobile: it keeps them
       at full size (130/181/241 x 70) and lets the row WRAP to three centred
       rows, 250 tall. The inherited mobile rule caps them at 96x26 and packs
       them space-between on one row, which is 26 tall. `max-height` beats the
       `height: 70px` set in the width-independent block, so both caps have to
       be released here. */
    .zmit .zmit-recognized-logos { justify-content: center; }
    .zmit .zmit-recognized-logos img {
        max-width: none; max-height: none;
        width: auto; height: 70px;
    }

    /* recognized band — live is 638 = 30 + 495 copy + 40 + 43 CTA + 30 with a
       335-wide copy box, which it gets by dropping the container gutter at
       mobile. NOT copied: zeroing a .z-container's side padding is banned by
       CLAUDE.md for the same reason as widening it, and it would leave this
       band wider than every sibling section. The box stays 263 here, so the
       heading wraps to four lines instead of live's three and the band comes
       out 722 against live's 638 — TALLER, not shorter. Accepted: the extra
       wrapping is the direct cost of the house width, and shrinking the type
       to buy back 84px would trade a sanctioned width difference for an
       unsanctioned type difference.
       The CTA pill IS live's (13/13 over 15px padding, 43 tall) rather than
       the 64 the inherited rules give; that is type, not width. */
    .zmit .zmit-recognized-band { padding: 30px 20px; gap: 40px; }
    .zmit .zmit-recognized-cta .z-btn { padding: 15px; font-size: 13px; line-height: 13px; }

    /* trust strip — live's chips are 107x50, giving the 125-tall band. */
    .zmit .zmit-trust-chip { width: 107px; height: 50px; }
    .zmit .zmit-trust-chip img { max-height: 44px; max-width: 99px; }

    /* pricing — 836 = 20 + 275 head + 50 + 461 cards + 30. Two rows of
       220-tall, 161-wide cards with a ~13px gap. */
    .zmit .zab-pricing.z-section { padding: 20px 0 30px; }
    .zmit .zab-pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    .zmit .zab-pricing-card { padding: 30px 15px; }
    .zmit .zab-pricing-card img { width: 41px; height: 30px; margin-bottom: 24px; }
    .zmit .zab-pricing-amount { font-size: 24px; line-height: 24px; }
    .zmit .zab-pricing-amount .unit { line-height: 29px; }

    /* services — 2921 = 20 + 172 lead + 20 + 2689 grid + 20. One column of
       258-tall cards keeping their 30px inner padding. */
    .zmit .zmit-services.z-section { padding: 20px 0; }
    .zmit .zmit-services-grid { grid-template-columns: 1fr; gap: 12px; }
    .zmit .zmit-services-grid .zmit-svc-card { padding: 30px; }

    /* video — 598 = 20 + 188 media + 50 + 320 copy + 20. */
    .zmit .zab-video.z-section { padding: 20px 0; }
    .zmit .zab-video-grid { grid-template-columns: 1fr; gap: 50px; }

    /* adv — 1700 = 20 + 202 title + 1477 grid. One column, cards keep the
       32/25 padding, 20px stack gap and the 108-tall icon. */
    .zmit .zab-adv.z-section { padding: 20px 0 0; }
    .zmit .zab-adv .z-container { display: block; }
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: 1fr; gap: 0; }
    .zmit .zab-adv .zab-adv-card { padding: 32px 25px; display: flex; flex-direction: column; gap: 20px; }
    .zmit .zab-adv .zab-adv-ico { display: block; height: 108px; margin: 0; }
    .zmit .zab-adv-copy { gap: 0; padding-bottom: 30px; }

    /* trust — 1166 = 60 eyebrow + 20 + 1057 panel + 30, one column of
       255-tall cells. */
    .zmit .zab-trust.z-section { padding: 0 0 30px; }
    .zmit .zab-trust-panel { grid-template-columns: 1fr; gap: 20px; }
    .zmit .zab-trust-cell { padding: 20px; }

    /* stats — 584 = 50 + 133 head + 50 + 301 counters + 50. */
    .zmit .zmit-stats.z-section { padding: 50px 0; }

    /* faq — 1427 = 20 + 30 heading + 830 + 488 + 20, ONE column. */
    .zmit .zmit-faq.z-section { padding: 20px 0; }
    .zmit .zmit-faq-list { display: block; grid-template-columns: none; }

    /* final — 999 = 419 copy (30px pad) + 20 + 500 media. */
    .zmit .zmit-final-banner { padding: 30px; min-height: 0; }

    /* stories — 1854 = 20 + 30 heading + 20 + 1764 grid + 20. */
    .zmit .zmit-stories.z-section { padding: 20px 0; }
    .zmit .zmit-stories-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* --- mobile, second pass: card internals measured element-by-element ------
   Live at 375 (inner 335; ours is 315 per the width rule, so text wraps
   slightly more — expected, see the container note above).
   ------------------------------------------------------------------------- */
@media (max-width: 680px) {

    /* trust strip — live's band is 125 around a 50-tall chip row. The
       inherited 12/24 padding gives 86. */
    .zmit .zmit-trust-band { padding: 37px 0 38px; }

    /* trust cells — live is 255 tall: 20 pad + 47 title (18/23.4, two lines)
       + 20 gap + 149 body (15/24.75) + 20 pad. The inherited 15/21 title and
       14/24 body give 191, and the cell has no stack gap at all. */
    .zmit .zab-trust-cell { display: flex; flex-direction: column; gap: 20px; }
    .zmit .zab-trust-cell h2 { font-size: 18px; line-height: 23.4px; margin: 0; }
    .zmit .zab-trust-cell h3 { font-size: 15px; line-height: 24.75px; margin: 0; }

    /* services lead — live runs this at 34.7/43 here (172 tall over four
       lines), not the inherited 24/32 which gives 96. */
    .zmit .zab-svc-lead { font-size: 34.7px; line-height: 43px; }

    /* final figure — live's photo is 500 tall and full-width in the band;
       the inherited rule leaves it 299 in a 255 box. */
    .zmit .zmit-final-media { width: 100%; }
    .zmit .zmit-final-media img { width: 100%; height: 500px; object-fit: cover; }

    /* stories — live's card image is 250 tall. */
    .zmit .zmit-story-img img { height: 250px; object-fit: cover; }

    /* insights — live's logo is 230x51 and the copy stack gaps at 20. */
    .zmit .zmit-insights-copy { gap: 20px; }
    .zmit .zmit-insights-logo { width: 230px; height: 51px; }

    /* video copy — live gaps the copy column at 40. */
    .zmit .zab-video-copy { display: flex; flex-direction: column; gap: 40px; }
}

/* --- mobile, third pass: two inherited CONTENT suppressions + wrapping ----
   The reference page hides copy at mobile that live shows on this page. Both
   were invisible in a height diff as "my band is short" rather than "text is
   missing", which is why they survived two passes.
   ------------------------------------------------------------------------- */
@media (max-width: 680px) {

    /* Story description — the inherited sheet sets
       `.zmit-stories .zmit-story .body p { display: none }` at mobile. Live
       renders it (its card is ~575 tall: 250 image + 50 logo + 75 title +
       the paragraph); with it hidden mine was 507 and the band 203 short.
       The text was extracted correctly all along - it just was not painted. */
    .zmit .zmit-stories .zmit-story .body p { display: block; }

    /* Trust cell body — the inherited sheet clamps this to FOUR lines with
       `-webkit-line-clamp: 4; overflow: hidden`. Live shows the whole string
       (149 tall, six lines at 15/24.75), so the clamp silently truncated
       visible copy and cost the band ~50 per cell. */
    .zmit .zab-trust-cell h3 {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
    }

    /* Pricing amount — live's card is 161 wide (131 of content) and the
       amount sits on ONE line with the unit under it (53 tall). Ours is 151
       (121 content) per the width rule, and "$85 - $130" at 24px needs ~125,
       so it wrapped to four lines and added ~48 per card. Keep the amount on
       one line; the unit is already a block. */
    .zmit .zab-pricing-amount { white-space: nowrap; }
    .zmit .zab-pricing-amount .unit { white-space: normal; }

    /* Compare accordion — live's closed rows are 68 tall; the inherited
       14/16 padding gives 50. */
    .zmit .zab-acc-q { padding: 23px 16px; }

    /* Final band — live stacks a 419-tall copy block (its own 30/20 padding)
       over a 500-tall full-width photo. The inherited banner padding boxes
       the figure into a 255 column and caps it at 320. */
    .zmit .zmit-final-banner { padding: 0; display: block; }
    .zmit .zmit-final-copy { padding: 30px 20px; max-width: none; }
    .zmit .zmit-final-media { width: 100%; }
    /* `max-height: none` is REQUIRED, not belt-and-braces: the inherited
       mobile rule caps this at `max-height: 320px`, and max-height beats
       height regardless of selector specificity — the same trap as the
       review-logo caps above, which is why `height: 500px` alone did nothing. */
    .zmit .zmit-final-media img {
        width: 100%; max-width: none;
        height: 500px; max-height: none;
        object-fit: cover; display: block;
    }

    /* story brand logo — live's is 50 tall; ours renders 66 and the row's
       min-height:50 does not cap it. */
    .zmit .zmit-story .body .zmit-story-logo { height: 50px; max-height: 50px; width: auto; object-fit: contain; }
}

/* --- mobile, fourth pass -------------------------------------------------- */
@media (max-width: 680px) {

    /* hero — live is 1512 = 80 pad + 414 copy (breadcrumb included) + 50 gap
       + 888 form card + 80 pad. Ours splits the breadcrumb out of the copy
       column, so the 80/80 goes on the container and the grid keeps live's
       50 gap; 43 crumb + 370 copy = 413 matches live's 414. */
    .zmit .zmit-hero .z-container { padding-top: 80px; padding-bottom: 80px; }
    .zmit .zmit-hero-crumb { padding-top: 0; }
    .zmit .zmit-hero-grid { padding: 0; gap: 50px; }

    /* final — live's band has no padding of its own and gaps copy-to-figure
       by 20; the section supplies the outer 20. */
    .zmit .zmit-final.z-section { padding: 20px 0; }
    .zmit .zmit-final-media { margin-top: 20px; }

    /* testi — live is 425 = 25 + 60 heading + 30 gap + 286 carousel + 24. */
    .zmit .zmit-testi.z-section { padding: 25px 0 24px; }
}

/* --- mobile, fifth pass: pricing unit font -------------------------------- */
@media (max-width: 680px) {
    /* Live's unit span is 12px/24 — it is NOT the 24px of the amount above it
       (live: `<span style="font-size:12px">USD per hour</span>` inside a 24px
       block). Ours inherited the parent's 24px and wrapped to two lines, so
       the amount block was 82 instead of live's 53 and every card ran ~24
       over. Only the line-height was being set here before, never the size. */
    .zmit .zab-pricing-amount .unit { font-size: 12px; line-height: 24px; }
}

/* --- tablet, fourth pass: faq is a MULTI-COLUMN box ----------------------
   The FAQ list is a CSS multi-column box declared in the SHARED sheet
   (`.zmit-faq-list { column-count: 2 }`, it-managed-services-zazz.css:715),
   which only drops to 1 at the phone breakpoint. `display: block` does NOT
   cancel column-count, so the earlier tablet override did nothing and the
   items stayed 332 wide against live's full-width 693 — which is why the
   questions wrapped to 98 instead of live's 74 and the band ran 106 short.
   Live is ONE column at 768 (two stacked accordion widgets, 638 + 398).
   The forced break after item 6 must go too: with column-count 1 it would
   create a second column, exactly as the base rule's own comment warns. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-faq-list { column-count: 1; column-gap: normal; }
    .zmit .zmit-faq-item:nth-child(6) { break-after: auto; }
}

/* ============================================================================
   LAYOUT CORRECTIONS — four bands were rendering the REFERENCE sheet's
   treatment (inherited from it-infrastructure-management-services.css), which
   is not what this family's live pages do. Every one of them passed a
   band-height check and was only visible in a screenshot: height parity is
   not layout parity.

   Live values below were read from each live page's own inline Elementor CSS
   (curl'd HTML), not guessed.
   ============================================================================ */

/* adv icon — live renders the GLYPH at 100px:
     .elementor-element-9c6a431 .elementor-icon { font-size: 100px }
     .elementor-element-9c6a431 .elementor-icon svg { height: 100px }
     .elementor-element-9c6a431 .elementor-icon-wrapper { text-align: center }
   The sheet forced the icon BLOCK to 108px while the svg still rendered at
   50, leaving ~58px of dead space between every icon and its title. Size the
   glyph, not the box. */
.zmit .zab-adv-ico { height: auto; text-align: center; margin: 0; }
.zmit .zab-adv .zab-adv-ico { height: auto; }
.zmit .zab-adv-ico svg { width: 100px; height: 100px; }

/* trust cells — live is:
     .elementor-icon-box-wrapper { text-align: start }
     title 18px, description 15px/400, NO text-decoration, NO cell divider
   The inherited rules centred the text, underlined the title and drew a 1px
   white rule between cells (that treatment belongs to another page's
   engagement-models band). */
.zmit .zab-trust-cell { text-align: left; border-right: 0; }
.zmit .zab-trust-cell h2 { text-decoration: none; }
.zmit .zab-trust-cell h3 { font-weight: 400; }

/* testimonials — live shows ONE slide per view:
     --e-n-carousel-swiper-slides-to-display: 1
     --e-n-carousel-swiper-slides-gap: 10px
     arrows at -25px either side
   The inherited track used a ~53% slide width as a deliberate "peek", which
   put TWO slides side by side and clipped the second one's quote
   mid-sentence. That peek was a misreading of live - corrected here. */
.zmit .zmit-testi-slide { width: 100%; flex: 0 0 100%; }
.zmit .zmit-testi-track { gap: 10px; }

/* --- desktop only ------------------------------------------------------- */
@media (min-width: 1081px) {
    /* faq — hand the list back to the shared sheet's CSS multi-column box.
       An earlier override here replaced it with a grid of SIX explicit rows,
       a number taken from the reference page's 11 items. Consequences on
       sibling pages: 14- and 15-item pages overflowed into a THIRD column,
       and grid row-stretch inflated every short item to its row's height, so
       a closed question rendered as a tall empty panel beside an open one.
       Multi-column balances at any count and cannot row-stretch. The forced
       break after item 6 goes too - same hardcoded 11-item assumption, and a
       balanced two-column box does not need it. */
    .zmit .zmit-faq-list {
        display: block;
        grid-template-columns: none;
        grid-template-rows: none;
        grid-auto-flow: row;
        column-count: 2;
        column-gap: 55px;
        padding: 0;
    }
    .zmit .zmit-faq-item { break-inside: avoid; }
    .zmit .zmit-faq-item:nth-child(6) { break-after: auto; }
}

/* testimonials, corrected specificity — the winning rule is
   `.zmit-testi-track .zmit-testi-slide { flex: 0 0 53.114% }` (two classes,
   commented "live 725 / 1365"), so the one-class override above never landed.
   Live's carousel is `--e-n-carousel-swiper-slides-to-display: 1`, i.e. ONE
   slide per view — the 53% peek was a misreading of live and put two slides
   side by side with the second one's quote clipped mid-sentence. */
.zmit .zmit-testi-track .zmit-testi-slide,
.zmit .zmit-testi-track .zmit-testi-slide.is-active { flex: 0 0 100%; }

/* recognized CTA — live sets this button to 13px
   (.elementor-element-34bce85 .elementor-button { font-size: 13px }); the
   inherited 15px made the label 326px wide inside a 250px track, and because
   the shared sheet also pins `white-space: nowrap` it could not wrap, so it
   overflowed the dark panel's right edge by 76px. body{overflow-x:hidden}
   hid that from scrollWidth, which is why the page passed an hScroll check
   while the button visibly hung outside the band. Take live's font size AND
   allow wrapping, so a long label (e.g. "Request an API Talent
   Consultation") stacks inside the track instead of escaping it. */
.zmit .zmit-recognized-cta .z-btn {
    font-size: 13px;
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

/* trust cell title — live is 18px
   (.elementor-icon-box-title { font-size: 18px }); the inherited rule set
   15px/21, which under-set every cell. Body copy stays 15px/400 as live has
   it. */
.zmit .zab-trust-cell h2 { font-size: 18px; line-height: 23.4px; }

/* hero scroll cue — restore the DISC. The inherited rule above deliberately
   strips it ("live d2ae808 is a bare 30px chevron ... no disc"), but that was
   measured on the reference page (it-infrastructure-management-services), not
   on this family. Owner's target: a light filled disc with a DARK chevron
   inside, which is also what the shared component's geometry is built for.
   Keeps the family's bob (no translateX, so it stays flush at left:50%). */
.zmit .zmit-hero .zmit-hero-scroll {
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #14142b;
    display: inline-flex; align-items: center; justify-content: center;
    bottom: 26px;
}
.zmit .zmit-hero .zmit-hero-scroll svg { width: 16px; height: 16px; display: block; }
.zmit .zmit-hero .zmit-hero-scroll:hover { background: #fff; color: #14142b; }

/* ================= MEASURED ON THIS FAMILY'S OWN LIVE PAGES =================
   Three bands were inherited from the hire-* reference with the WRONG LAYOUT.
   Content and heights looked plausible and the container check passed, so only
   a live-vs-local screenshot caught them. Measured at 1440 on
   app-development-company-canada.

   S09 process - live: two 700px columns in a 1400 band on a transparent
   (white) background. Left heading 30px/400/39px LEFT aligned plus two body
   paragraphs; right five collapsed accordion rows, summary on #262338,
   radius 5px, padding 25px, 7px apart, label 16px/400 #fcfcfc, blue + marker.
   The reference renders a centred 3-up card grid on #f2f7ff instead. */
.zmit .zab-proc.z-section { background: transparent; padding: 50px 0 60px; }
.zmit .zab-proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.zmit .zab-proc-copy { padding-right: 60px; }
.zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #14142b; text-align: left; margin: 0 0 20px; }
.zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26px; color: #4a4a63; margin: 0 0 18px; }
.zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
.zmit .zab-proc-list { display: flex; flex-direction: column; gap: 7px; }
.zmit .zab-proc-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #262338; border-radius: 5px; padding: 25px;
    color: #fcfcfc; font-size: 16px; font-weight: 400; cursor: pointer; list-style: none;
}
.zmit .zab-proc-item > summary::-webkit-details-marker { display: none; }
.zmit .zab-proc-q { flex: 1 1 auto; }
.zmit .zab-proc-sign { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.zmit .zab-proc-sign::before,
.zmit .zab-proc-sign::after { content: ""; position: absolute; background: #0161ff; }
.zmit .zab-proc-sign::before { top: 7px; left: 0; right: 0; height: 2px; }
.zmit .zab-proc-sign::after  { top: 0; left: 7px; width: 2px; height: 16px; }
.zmit .zab-proc-item[open] .zab-proc-sign::after { display: none; }
.zmit .zab-proc-a { padding: 16px 25px 20px; }
.zmit .zab-proc-a p { font-size: 15px; font-weight: 400; line-height: 25px; color: #4a4a63; margin: 0; }

/* S12 advantages - live: a DARK panel (#262338, radius 15px) holding four equal
   cells with a 10px column gap and a hairline divider; each cell padding
   32px 25px, icon above a CENTRED 18px/600 #f7f7fc title. The inherited rules
   left the cards transparent on white with dark left-aligned titles and no
   panel at all. Band heading 34.7px/400 #14142b, left aligned. */
.zmit .zab-adv .zab-adv-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: #262338; border-radius: 15px; overflow: hidden;
}
.zmit .zab-adv .zab-adv-card {
    background: transparent; padding: 32px 25px; display: flex; flex-direction: column;
    align-items: center; gap: 20px; text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .12);
}
.zmit .zab-adv .zab-adv-card:last-child { border-right: 0; }
.zmit .zab-adv .zab-adv-card h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: #f7f7fc; text-align: center; margin: 0; }
.zmit .zab-adv .zab-adv-card p { color: rgba(247, 247, 252, .75); text-align: center; }
.zmit .zab-adv .zab-adv-copy h2 { font-size: 34.7px; font-weight: 400; line-height: 43px; color: #14142b; text-align: left; }

/* S11 trust - live: four SEPARATE light cards in a 2-column grid with a 30px
   gap, each #eff0f7 with 20px padding, title 18px/700 #141414 over body
   15px/400 rgba(20,20,20,.7). The inherited rules render ONE dark panel with
   white text - correct for the reference page, the opposite of this family. */
.zmit .zab-trust .zab-trust-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
    background: transparent; border-radius: 0; padding: 0;
}
.zmit .zab-trust .zab-trust-cell {
    background: #eff0f7; border-radius: 0; padding: 20px; border-right: 0; text-align: left;
}
.zmit .zab-trust .zab-trust-cell h2 { font-size: 18px; font-weight: 700; line-height: 1.4; color: #141414; text-decoration: none; margin: 0 0 8px; }
.zmit .zab-trust .zab-trust-cell h3 { font-size: 15px; font-weight: 400; line-height: 1.6; color: rgba(20, 20, 20, .7); margin: 0; }
.zmit .zab-trust .zab-trust-eyebrow { font-size: 34px; font-weight: 300; line-height: 1.3; color: #14142b; text-align: left; }

@media (max-width: 1080px) {
    .zmit .zab-proc-grid { grid-template-columns: 1fr; gap: 28px; }
    .zmit .zab-proc-copy { padding-right: 0; }
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit .zab-adv .zab-adv-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 767px) {
    .zmit .zab-proc-copy h2 { font-size: 22.8px; line-height: 1.3; }
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: 1fr; }
    .zmit .zab-adv .zab-adv-card { border-right: 0; }
    .zmit .zab-trust .zab-trust-panel { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- B02 PORTFOLIO gallery ------------------------------------------------
   MEASURED on live at 1440 (app-development-company-uk): the widget is
   1285x738 inside a 70px-margin wrapper; the main track's items are 630px tall
   with a 5px radius, and a 106px thumbnail strip sits beneath. Heading is
   36.8px/400, LEFT aligned. Live uses two synced owl carousels; this is a
   scroll-snap track plus a thumb strip, so no carousel library is pulled in.
   Slides are background images because live's are - the widget never emits an
   <img>, and its overlay container is pinned to max-width:0 on these pages. */





















/* ---- B03 INDUSTRY FLIP CARDS ---------------------------------------------
   MEASURED on live at 1440 (app-development-company-uk): wrap 1400 wide,
   flex-WRAP with a 15px gap so 260px cards sit five to a row (12 cards = 5+5+2).
   Card 260x270, perspective 1000px. Inner face transitions transform over 0.6s
   with transform-style preserve-3d. Front #f1f1f7, radius 10px, padding
   12px 27px, icon ~75x77 over a 16px/600 #111 title. Back white, radius 10px,
   padding 11px, rotateY(180deg).
   :focus-within is paired with :hover so the back face is reachable by keyboard
   and not mouse-only - live's own version is hover-only, and the accessibility
   bar in CLAUDE.md outranks copying that. */
.zmit .zab-flip.z-section { padding: 40px 0 50px; }
.zmit .zab-flip h2 { font-size: 34px; font-weight: 400; line-height: 1.3; color: #14142b; text-align: center; margin: 0 0 14px; }
.zmit .zab-flip-lead { font-size: 16px; font-weight: 400; line-height: 1.7; color: #4a4a63; text-align: center; max-width: 980px; margin: 0 auto 28px; }
.zmit .zab-flip-wrap { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.zmit .zab-flip-card { flex: 0 0 260px; height: 270px; perspective: 1000px; }
.zmit .zab-flip-card:focus-visible { outline: 2px solid #0161ff; outline-offset: 3px; }
.zmit .zab-flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s; transform-style: preserve-3d;
}
.zmit .zab-flip-card:hover .zab-flip-inner,
.zmit .zab-flip-card:focus-within .zab-flip-inner { transform: rotateY(180deg); }
.zmit .zab-flip-front,
.zmit .zab-flip-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: 10px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
}
.zmit .zab-flip-front { background: #f1f1f7; padding: 12px 27px; }
.zmit .zab-flip-front img { width: 75px; height: 77px; object-fit: contain; display: block; }
.zmit .zab-flip-front h3 { font-size: 16px; font-weight: 600; line-height: 1.35; color: #111; text-align: center; margin: 0; }
.zmit .zab-flip-back {
    background: #fff; padding: 11px; transform: rotateY(180deg);
    border: 1px solid #e4e7f1; overflow: auto;
}
.zmit .zab-flip-back p { font-size: 14px; font-weight: 400; line-height: 1.55; color: #4a4a63; text-align: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .zmit .zab-flip-inner { transition: none; } }

@media (max-width: 767px) {
    .zmit .zab-flip h2 { font-size: 24px; }
    .zmit .zab-flip-card { flex: 0 0 100%; }
}

/* ---- S11 trust band: TWO measured layouts -------------------------------
   Variant A (canada, python) - the default here: transparent band, full-width
   2-column grid at gap 30px, cells #eff0f7 with 20px padding, title 18px/700
   #141414 over body 15px/400 rgba(20,20,20,.7).
   Variant B (.v-split; web-development-company-dubai, android,
   app-modernization): the BAND is #eff0f7 and splits into two columns 50px
   apart - copy left, a half-width 2x2 grid right at gap 20px with TRANSPARENT
   cells. Selected by the data (only B has left-column copy), not by slug. */
.zmit .zab-trust-layout { display: block; }
.zmit .zab-trust-copy:empty { display: none; }
.zmit .zab-trust .zab-trust-para { font-size: 16px; font-weight: 400; line-height: 1.7; color: #4a4a63; margin: 0 0 16px; }

/* variant B */
.zmit .zab-trust.v-split.z-section { background: #eff0f7; padding: 20px 0 30px; }
.zmit .zab-trust.v-split .zab-trust-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.zmit .zab-trust.v-split .zab-trust-panel { grid-template-columns: 1fr 1fr; gap: 20px; }
.zmit .zab-trust.v-split .zab-trust-cell { background: transparent; padding: 20px; }
.zmit .zab-trust.v-split .zab-trust-eyebrow { margin-bottom: 18px; }

@media (max-width: 1080px) {
    .zmit .zab-trust.v-split .zab-trust-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .zmit .zab-trust.v-split .zab-trust-panel { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- HERO / BANNER --------------------------------------------------------
   CORRECTION to an earlier edit of mine: the overhang is NOT on the form card.
   The inherited sheet already puts it on the COLUMN -
     .zmit .zmit-hero-right { align-self: stretch; margin-bottom: -95.55px }
   and -95.55 is live's 96px. Adding another -96px to .zmit-form-card stacked
   the two and produced a 192px overhang, and .zmit-hero{min-height:0} collapsed
   the banner from 600 to about 520. Both of those edits are gone; the overhang
   mechanism is left exactly as inherited.
   The one value that really was wrong is the banner FLOOR. hire-cloud measured
   600px and all eight inherited it; measured live at 1440 it is right for only
   three - canada 633, python 600, web-dev-dubai 736, android 698, uk 600,
   app-dev-dubai 710, maintenance-support 600. build8 appends the per-page
   value after this block.
   The form-compaction release IS kept: it moves the card toward live's height,
   and the banner is sized from the card. */
/* Form metrics taken element-by-element off live's own card (measured on
   web-development-company-dubai at 1440, and the field set matches: both render
   5 .hsfc-Row and 7 labels, so the 103px gap was spacing, not fields):
     card 792h, padding 20px 25px 20px 20px   <- already correct
     row 70h, margin-bottom 20px
     label 20h, margin-bottom 10px, 14px
     input 40h, padding 10px 20px, 16px
     textarea 68h, padding 10px 20px
     button 42h, padding 13px
   The reference's compaction (row 8px, input 8px 12px, textarea min 56px) was
   tuned to SHORTEN hire-cloud's banner and is what left our card 103px short. */
@media (min-width: 1081px) {
    .zmit .zmit-hsform .hsfc-Row { margin-bottom: 20px !important; }
    .zmit .zmit-hsform .hsfc-Label,
    .zmit .zmit-hsform label { margin-bottom: 10px !important; font-size: 14px !important; }
    .zmit .zmit-hsform .hsfc-TextInput,
    .zmit .zmit-hsform input:not([type="hidden"]):not([type="submit"]) {
        padding: 10px 20px !important; font-size: 16px !important;
    }
    .zmit .zmit-hsform .hsfc-TextareaInput,
    .zmit .zmit-hsform textarea {
        padding: 10px 20px !important; min-height: 68px !important; font-size: 16px !important;
    }
    .zmit .zmit-form-card .zmit-hsform .hsfc-Button,
    .zmit .zmit-form-card .zmit-hsform button { padding: 13px !important; font-size: 16px !important; }
}
/* ---- S12 advantages: divider colour ---------------------------------------
   Checked on canada AND uk: this band has ONE layout across the family (4-col
   dark panel rgb(38,35,56), radius 15px, gap 0 10px, transparent cells at
   32px 25px, title 18px/600 #f7f7fc centred) - unlike the trust band, there is
   no per-page variant here. Everything matched except the divider: the
   inherited sheet draws it at rgba(255,255,255,.12), which is nearly invisible;
   live's is a solid 1px white border-right on each cell. */
.zmit .zab-adv-grid .zab-adv-card { border-right: 1px solid rgb(255, 255, 255); }
.zmit .zab-adv-grid .zab-adv-card:last-child { border-right: 0; }
/* flip back faces are lists on live; keep the bullets tight inside the card */
.zmit .zab-flip-back ul { margin: 0; padding: 0 0 0 16px; text-align: left; }
.zmit .zab-flip-back li { font-size: 14px; line-height: 1.5; color: #4a4a63; margin: 0 0 6px; }
/* Live fits FIVE 260px cards per row in its 1400 box (260*5 + 15*4 = 1360).
   The house box is 1340, so 260 only fits four and the row structure changed.
   256px keeps live's five-per-row exactly (256*5 + 15*4 = 1340); the row count
   reads as more significant than 4px of card width. */
.zmit .zab-flip-card { flex: 0 0 256px; }

/* ---- B05 intro/overview band -------------------------------------------
   Measured on live web-development-company-dubai at 1440. Live's box is 1365
   (its own gutter); ours is the house 1340, so the tracks are 645 not 658 —
   the container is deliberately NOT widened to match (CLAUDE.md).
   ---------------------------------------------------------------------- */
.zmit .zab-intro.z-section { background: transparent; padding: 20px 0 30px; }
.zmit .zab-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.zmit .zab-intro-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); text-align: left; margin: 0 0 20px; }
.zmit .zab-intro-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 26px; }
.zmit .zab-intro-copy p:last-of-type { margin-bottom: 30px; }
/* live's CTA: #0161ff, radius 8, padding 15px 30px, 46 tall */
.zmit .zab-intro-cta { display: inline-flex; align-items: center; justify-content: center;
    background: #0161ff; color: #fff; border-radius: 8px; padding: 15px 30px;
    font-size: 14px; font-weight: 600; line-height: 16px; text-decoration: none; }
.zmit .zab-intro-cta:hover { background: #0b4fd0; color: #fff; }
.zmit .zab-intro-fig { margin: 0; }
.zmit .zab-intro-fig img { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: 10px; }

@media (max-width: 1080px) {
    .zmit .zab-intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .zmit .zab-intro-copy h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-intro-fig img { height: 320px; }
}
@media (max-width: 600px) {
    .zmit .zab-intro-copy h2 { font-size: 24px; line-height: 1.3; }
    .zmit .zab-intro-fig img { height: 220px; }
    .zmit .zab-intro-cta { width: 100%; padding: 15px 20px; }
}

/* ---- S08 certified band: live's own padding on the two pages that carry it.
   The cloned reference value is `65px 0 70px`, measured on hire-backend's live
   page; measured on application-maintenance-support-services live it is
   `30px 0` (band 517 tall against our 577). Per-page geometry differs across
   this component, so take the value from the page being built.
   Badge grid stays the audited 16px gap at natural aspect — live's pitch is
   240 around a 224 badge, i.e. exactly 16. ---------------------------------- */
.zmit .zab-certified.z-section { padding: 30px 0; }

/* ---- HERO: back to live's own values (owner request 2026-09-08) -----------
   The sheets carried an earlier owner instruction (2026-08-26) that reduced
   the hero headline to 42px and the sub to 15px as a deliberate deviation.
   The owner has since pointed at the live dubai hero and asked for it to
   match, so that deviation is REVERSED here. Measured on live at 1440 and
   identical on all eight pages of this family:
       headline  54px / 64.8px / 600
       sub       16px
   Do not "restore" 42px — the 2026-08-26 note it came from is superseded.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit-hero .zmit-hero-headline { font-size: 54px; line-height: 64.8px; font-weight: 600; }
    .zmit .zmit-hero-sub { font-size: 16px; }
}

/* ---- trust marquee: live's own chip geometry ------------------------------
   Live's logo box is exactly 148x70 at a 198px pitch (148 + 50 gap) on every
   page in this family. Ours inherited 180-wide chips with 168x62 image caps,
   so the logos read wider and shorter than live's.
   The max-height/max-width + `contain` pair is kept deliberately: it is the
   owner's 2026-08-26 rule that every marquee logo read the same size, and
   live's fixed 148x70 box already satisfies it.
   -------------------------------------------------------------------------- */
.zmit .zmit-trust-track { gap: 50px; }
.zmit .zmit-trust-chip { width: 148px; height: 70px; padding: 0; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 70px; max-width: 148px; object-fit: contain; }

/* The HubSpot partial emits a <script> and a <style> as SIBLINGS of the title
   and form inside the card. The card is display:flex, so those two zero-height
   nodes count as flex children: space-between then splits its slack across
   FOUR gaps instead of live's two, and the visible rows drift (the note sat
   114px below the form with only 36px under it, where live is ~20/21px gaps
   between three children). Take them out of the flex flow — they render
   nothing either way. */
.zmit .zmit-form-card > script,
.zmit .zmit-form-card > style { display: none !important; }

/* ---- HERO COLUMNS: live's ABSOLUTE column widths, not live's percentages --
   The sheet carried live's percentages (55.46% / 37.22%) applied to the house
   1340 box, giving 743 + 499. Live's own box is 1365, so its columns are
   757 + 508. That 14px on the copy column is not cosmetic: "Combining
   Regional Insights" needs 757px to fit on one line, so at 743 the headline
   wrapped to SIX lines where live renders FIVE, and the sub-paragraph broke a
   word earlier too.
   Fix: reproduce live's column widths in px and absorb the 25px difference in
   the GAP (live 100 -> 75), which is invisible. The container itself is NOT
   widened — 757 + 75 + 508 = 1340, the house box exactly (CLAUDE.md).
   Expressed as percentages of 1340 so it still tracks below 1440.
   ------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit .zmit-hero-grid {
        grid-template-columns: 56.4925% 37.9104%;   /* 757 / 508 of 1340 */
        gap: 5.5971%;                               /* 75 of 1340 */
    }
}

/* ---- HERO HEADLINE: 52.5px so the WRAP matches live ----------------------
   Live's headline is 54px, and ours was too — but live's hero container
   tracks the viewport while ours is capped at max-width:1400 (the standing
   2026-08-26 owner rule, not to be changed). So above ~1465px live's copy
   column keeps growing (802px at a 1800 viewport) while ours stays 757px, and
   the same 54px text wrapped to one MORE line than live on two pages:
       app-development-company-dubai   ours 6 / live 5
       app-development-company-uk      ours 4 / live 3
   Owner's call (2026-09-08): fix it with the font rather than the container.
   52.5px is the LARGEST size that reproduces live's line count at 757px, and
   it was checked against all eight headlines — every one matches live's wrap
   at a 1800 viewport (4/3/5/5/3/4/3/5) where 54px got two wrong and 53px
   still got dubai wrong. Line-height stays live's 64.8px.
   Do not raise this back to 54 without re-running that per-page line-count
   check; the sizes are one step apart in effect.
   ------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit-hero .zmit-hero-headline { font-size: 52.5px; line-height: 64.8px; }
}

/* ---- HERO FORM CARD: the HOUSE treatment, not live's per-page card --------
   Owner instruction 2026-09-08: "make it look like other pages".
   Measured on our own DEPLOYED hire-cloud-developers at 1440, which is what
   the 13 already-live migrated pages render:
       card      499x612, min-height 612, justify-content: CENTER
       children  h3 47 + .zmit-hsform 423 (min-height 423) + note 14
       result    title 42 off the card top, note 56 off the bottom
       input     44 tall, #fcfcfe, 1px #d9dce8, radius 8
   An earlier pass here floored the card at each page's LIVE height (656-792)
   and restyled the fields to live's borderless #eff0f7. That left our form —
   which HubSpot renders 448 tall against live's 519 — with up to 210px of
   slack to place, and every distribution opened a visible hole. Reverting to
   the house card removes the slack at source: 612 against a ~526 natural
   content height leaves ~86px, split evenly by centring.
   The headline (52.5px) and the 757/508 columns are NOT reverted — those were
   approved separately and the headline wrap depends on them.
   ------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit .zmit-form-card { min-height: 612px; justify-content: center; }
    .zmit .zmit-form-card > h3 { margin-bottom: 12px; }
    .zmit .zmit-form-card > .zmit-hsform { flex: 0 1 auto; margin-top: 0; min-height: 423px; }
    .zmit .zmit-form-card > .zmit-form-note { margin: 18px 0 14px; }
}
/* The card must NOT stretch to the hero row. The cloned sheet sets
   `.zmit-form-card { height: 100%; align-self: stretch }` at desktop, so the
   card grew with the banner (693 against a 637 hero) and `min-height: 612`
   never governed — that stretch, not the padding, is where the blank space
   inside the form came from. Our own deployed hire-cloud-developers renders
   the card at exactly 612 with the hero at 600, i.e. unstretched and floored.
   Match it: height auto, top-aligned, 612 floor. */
@media (min-width: 1081px) {
    .zmit .zmit-form-card { height: auto; align-self: start; }
}


/* banner floor measured on THIS page's own live hero at 1440 */
.zmit .zmit-hero { min-height: 600px; }

/* ---- B06 tech-stack band (tabbed) --------------------------------------
   MEASURED on the live page at 1440 (Elementor nested-tabs + image-box):
     heading  34.7 / 400 / 45.11px, #141414, margin-bottom 11
     rail     300 wide, flex column, gap 10; tab 275x56, padding 20,
              radius 5, 16/400; active #0161ff with #fff text,
              inactive #fff with #141414 text
     panel    flex-wrap, gap 20; card 298 wide, #eff0f7, radius 8,
              padding 15; icon 50x50; label 18/400 #141414
   The two hairlines (under the copy, and between rail and panel) are drawn
   with the family border token: they are clearly present on live but the
   elements I probed reported `border: none`, so the WIDTH and POSITION are
   measured while the COLOUR is the house #e4e7f1.
   In the house 1340 box the panel is 1040 (live 1065), which still fits
   three 298 cards with the 20px gap — the container is not widened.
   ----------------------------------------------------------------------- */
.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: #eff0f7; }
.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; }
    .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%; }
}

/* ---- HERO CARD OVERHANG: back to live's own geometry --------------------
   Owner 2026-09-10, non-negotiable: the form card's overlap must match live.
   MEASURED on live flutter AND react-native at 1440 — identical on both:
       banner   t100  h633  b733
       card     t140  h689  b829      (card height = banner height + 56)
       strip    t748  h70   b818
       overhang past the banner = 96, card bottom 11 below the strip bottom
   The reference already carried the mechanism (-95.55px on .zmit-hero-right);
   it stopped working when an earlier pass set the card to
   `height: auto; align-self: start` to kill the internal blank space. That
   removed the stretch, so the card sat at its 612 floor and stopped short of
   the strip. Restore the stretch and the overhang falls out of the geometry
   on any page, whatever the banner height — no per-page card map needed.
   ----------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit .zmit-hero { min-height: 633px; }                 /* live's banner */
    .zmit .zmit-hero-right { display: block; align-self: stretch; margin: -44px 0 -95.55px; }
    .zmit .zmit-form-card { height: 100%; align-self: stretch; margin-top: 0; }
}
/* The -95.55px is measured from the GRID ROW's bottom, not the hero's. When
   the hero is taller than its copy (min-height driven) the row ends short and
   the overhang lands 10px high. Make the row fill the hero so the negative
   margin resolves against the hero's own bottom edge. */
@media (min-width: 1081px) {
    .zmit .zmit-hero > .z-container { height: 100%; display: flex; flex-direction: column; }
    .zmit .zmit-hero-grid { flex: 1 1 auto; }
}
/* STRUCTURAL: make the grid row fill the hero so the -95.55 resolves against
   the hero's own bottom edge on every page. `height: 100%` alone does not
   work — the hero is min-height driven, which is not a definite height for a
   percentage to resolve against — so the hero itself must be the flex column.
   With the row filling the hero the gap is 0 and the overhang is 96 whatever
   the banner height, which removes the need for a per-page nudge (the gap
   measured 10 / 41 / 73 / 10 across four pages, so a constant is wrong). */
@media (min-width: 1081px) {
    .zmit .zmit-hero { display: flex; flex-direction: column; }
    .zmit .zmit-hero > .z-container { flex: 1 1 auto; display: flex; flex-direction: column; }
    .zmit .zmit-hero-grid { flex: 1 1 auto; }
    .zmit .zmit-hero-right { margin-bottom: -95.55px; }
}

/* ---- HERO FORM CARD: fill the card the way live does -------------------
   MEASURED on live flutter at 1440 (card t140 h689, padding 20 25 20 20):
       justify-content: space-between, three children
       title block  t162 h62   -> title text 19 below the card top
       form block   t244 h494  -> 20px gaps either side
       note block   t757 h49   -> note text 58 above the card bottom
   Live's HubSpot form block is 494 tall; ours renders 448, and CENTRING that
   46px shortfall put a dead band at the top AND the bottom of the card.
   Live keeps the title hard at the top and the note near the bottom and lets
   the FORM block carry the slack, so `flex: 1` on the form reproduces it at
   any card height instead of centring the whole stack.
   ------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zmit .zmit-form-card { justify-content: flex-start; }
    .zmit .zmit-form-card > h3 { margin: 0 0 20px; }
    .zmit .zmit-form-card > .zmit-hsform { flex: 1 1 auto; margin: 0 0 20px; min-height: 0; }
    .zmit .zmit-form-card > .zmit-form-note { margin: 0 0 38px; }   /* -> 58 above the card bottom */
}

/* ============================================================================
   b8sd BATCH - per-page block. Everything above this line is the app/web-dev
   family sheet, cloned unchanged; everything below was MEASURED on THIS page's
   own live URL at 1440 with Playwright and only states the deltas.

   Band -> component decisions, and why the first guess was wrong:
     276f124 / 27b9044  eyebrow 34.7px/43px over a DARK 4-up panel (#262338,
                        radius 15, gap 0 10px, cells 32px 25px, white centred
                        titles)                          -> .zab-adv
     cfcd04b            band #eff0f7, two 665 columns 50 apart, right a 2x2
                        grid of TRANSPARENT 319-wide icon cards
                                                         -> .zab-trust.v-split
   Both already exist in the cloned sheet with the right LAYOUT; only the type
   scale needed re-measuring. Assigning them the other way round would have
   rendered a light 2-col band as a dark 4-up panel and vice versa.
   ============================================================================ */

/* ---- .zab-adv: type scale measured on this page ---------------------------
   Panel and cell geometry already match live (bg rgb(38,35,56), radius 15px,
   column gap 10px, cells 32px 25px, icon svg 100x100 rendered from a 110x110
   source). The cloned sheet's 18px/600 title and .75-alpha body are a
   different page's values; live here is:
     title  15px / 900 / 19.5px  #fff        centred
     body   15px / 600 / 28px    #f7f7fc     centred
   -------------------------------------------------------------------------- */
.zmit .zab-adv .zab-adv-card h3 { font-size: 15px; font-weight: 900; line-height: 19.5px; color: #fff; }
.zmit .zab-adv .zab-adv-card p  { font-size: 15px; font-weight: 600; line-height: 28px; color: #f7f7fc; }
/* live's copy block is 95 tall: a 43px eyebrow line with 52px of air below it,
   inside the copy column - NOT a margin on the heading as well, which double
   counted and made the band 42px too tall. */
.zmit .zab-adv .zab-adv-copy { gap: 0; padding-bottom: 52px; }
.zmit .zab-adv .zab-adv-copy h2 { font-size: 34.7px; font-weight: 400; line-height: 43px; color: #14142b; text-align: left; margin: 0; }

/* ---- service cards: live's own bullet scale (all three pages) -------------
   MEASURED at 1440: card 321 wide with 30px padding, title 18px/23.4px, and
   the bullet list 12px/19.8px with 12px between items - each li is 2 lines at
   40 tall. The shared sheet's 14px/23.1px pushes most cards to 3 lines and the
   band ran 108px tall. Do NOT add list-style or a left padding here: the
   shared sheet already draws the marker with a ::before.
   -------------------------------------------------------------------------- */
.zmit .zmit-services-grid .zmit-svc-card li { font-size: 12px; line-height: 19.8px; margin-bottom: 12px; }
.zmit .zmit-services-grid .zmit-svc-card li:last-child { margin-bottom: 0; }

/* ---- testimonials: live's slide is ONE full-width card, 470 tall ----------
   MEASURED at 1440: the slide is 1380 wide with 80px padding, and every slide
   is equalized to 470 by the carousel. Inside: role 29 + 5px, a 3px rule,
   the company line 16px/26.4px with 10px 0 padding, then the quote
   18px/29.7px. The cloned sheet renders the company line at 34px/47.6px and
   collapses the rule to zero height.
   -------------------------------------------------------------------------- */
.zmit .zmit-testi-lead { font-size: 16px; line-height: 26.4px; padding: 10px 0; }
.zmit .zmit-testi-rule { height: 3px; }
@media (min-width: 1081px) {
    /* the cloned sheet pads the slide 56px 64px from a (0,3,0) selector, so this
       needs the extra class to win */
    .zmit .zmit-testi-track .zmit-testi-slide,
    .zmit .zmit-testi-track .zmit-testi-slide.is-active { padding: 80px; }
}

/* ---- comparison heading band: live's own 72px box ------------------------- */
.zmit .zab-cmp-head.z-section { padding: 18px 0 17px; }

/* ---- services band: live's lead sits in its OWN 53px band ----------------
   MEASURED at 1440: the lead line is 43 tall with 10px under it, and the card
   grid starts immediately - live puts the lead in a separate container, so
   there is no section padding above it. The cloned 50px top padding put the
   first card row 54px low.
   -------------------------------------------------------------------------- */
.zmit .zmit-services.z-section { padding: 0 0 30px; }
.zmit .zmit-services-head { margin-bottom: 10px; }

/* ---- stats band: the eyebrow is the SMALL line -----------------------------
   MEASURED at 1440: eyebrow 19 tall (~13px) over the real heading at
   34px/44.2px and 133 tall, then the CTA; 80px of band padding above and
   below. The cloned sheet renders the eyebrow at the heading's own 34px, which
   is the "short line in the big h2" mistake - it made the copy column 25px
   taller and read as two headings.
   -------------------------------------------------------------------------- */
.zmit .zmit-stats-eyebrow { font-size: 13px; line-height: 19px; }

/* ---- portfolio band: live is 950 (a 72 heading band over an 878 gallery:
   70 above the 630 stage, a 106 thumb strip, 70 below). The cloned 40/50
   padding and 26px heading margin leave it 38 short. ---------------------- */



/* ============================================================================
   MOBILE / TABLET, measured on each page's own live URL at 768 and 375.
   These blocks come LAST on purpose: the desktop values above are unmediated,
   so anything that has to differ below 1081 must be restated here.
   ============================================================================ */

/* ---- comparison: these pages have NO mobile-accordion widget on live -------
   The app/web-dev reference ships a separate hidden_desktop accordion beside
   its table, so its sheet hides .zab-cmp below 1081 and shows .zab-cmp-acc.
   On all three of these pages live's census has ONE band for the comparison
   (e4183d9 / b141b4c) and at 375 it renders the TABLE ITSELF stacked - three
   column blocks 60px apart inside a 335 box, 2066 tall. Rendering the
   accordion instead left the band 1300px short and showed a component live
   does not have, so the accordion is not emitted at all and the table stays
   visible and stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .zmit .zab-cmp { display: block; }
}
@media (max-width: 767px) {
    /* live keeps the THREE-column table at 768 (cells 233 wide, rows 100 tall,
       854 total) and only stacks it below that, where the three column blocks
       sit 60px apart. Stacking at 1080 made the band 1600px too tall. */
    .zmit .zab-cmp-grid { grid-template-columns: 1fr; gap: 60px; }
}

/* ---- .zab-frame: click-to-expand at EVERY width --------------------------
   Live's widget keeps one panel open below 1081 too; leaving every body
   visible stacked the whole framework open and ran the band 460-1300px tall.
   -------------------------------------------------------------------------- */
.zab-frame-item .zab-frame-body { display: none; }
.zab-frame-item.is-open .zab-frame-body { display: block; }

/* ---- .zab-adv: live stacks the dark panel ONE-up below 1081 ---------------
   MEASURED at 768: the band is 1348 for four cards, i.e. one per row. The
   cloned sheet drops to two columns at 1080 and only to one at 767, which left
   the band ~400px short at tablet.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .zmit .zab-adv .zab-adv-grid { grid-template-columns: 1fr; }
    .zmit .zab-adv .zab-adv-card { border-right: 0; }
    .zmit .zab-adv.z-section { padding: 30px 0 0; }
}
@media (max-width: 767px) {
    .zmit .zab-adv.z-section { padding: 20px 0 0; }
}

/* ---- .zmit-hsform is on THREE forms per page - only the HERO may reserve ---
   The cloned sheet carries `.zmit-contact-form .zmit-hsform { min-height: 498px }`,
   which is the reserve the owner asked to be removed: it floors the contact
   band's form and shows as dead space when the real form renders shorter.
   Scoped to the wrapper so the footer newsletter is untouched.
   -------------------------------------------------------------------------- */
.zmit .zmit-contact-form .zmit-hsform { min-height: 0; }

/* ---- .zab-trust.v-split: type scale measured on this page (live cfcd04b) --
   Layout already matches live and is NOT re-specified: band #eff0f7, two 1fr
   columns 50px apart, right panel 2x2 at a 20px gap, cells transparent with
   20px padding. Only the type and the icon size differ from the cloned values:
     title  20px / 700 / 24px    #141414  left
     body   16px / 400 / 19.2px  #14142b
     icon   50x50, colour rgb(105,114,125)
   -------------------------------------------------------------------------- */
.zmit .zab-trust .zab-trust-cell h2 { font-size: 20px; font-weight: 700; line-height: 24px; color: #141414; margin: 0 0 10px; }
.zmit .zab-trust .zab-trust-cell h3 { font-size: 16px; font-weight: 400; line-height: 19.2px; color: #14142b; }
.zmit .zab-trust-ico { margin: 0 0 16px; }
.zmit .zab-trust-ico svg { width: 50px; height: 50px; margin: 0; color: #69727d; }

/* ---- .zab-steps: card row overlaps the wave art by 120px, not 140 ---------
   MEASURED at 1440 (8348078 / 5223c5b): band #f2f7ff; heading 33.05px/600/
   42.965px and lead 16px/26.4px, both centred; the wave image is 1201x134 and
   the three cards start 14px BELOW the art's top edge, i.e. 120px above its
   bottom. The cloned -140px pulls them 6px above the art. Cards are 401 wide
   with a 20px gutter (1242 of live's 1380 box), so the row is inset.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zab-steps-grid { gap: 20px; margin-top: -120px; padding: 0 50px 10px; }
}

/* ============================================================================
   .zab-frame - the ONE NEW component in this batch.
   Live's widget is ucaddon_expanding_content_cards; the same widget ships as
   .zab-nist on managed-security-service-provider, so the geometry below is
   re-measured here rather than assumed, and the class takes the house zab-
   prefix (never a per-page one).

   MEASURED ON LIVE at 1440 (outsource-software-development 5187ba8, six
   panels; outsource-mobile-app-development bf1cb74, five):
     band            white, heading 40px/600/56px #141414 CENTRED full-width,
                     lead 1152 wide centred, 16px/400/26.4px rgb(94,94,94)
     row             1360 wide at x40, 320 tall, 20px gap
     panel           white, radius 10; the OPEN one takes the remaining width
                     (660 with six panels, 800 with five) and the collapsed
                     ones are 120 each - so flex: 0 0 120px / 1 1 auto gives
                     both pages live's widths without a per-page number
     label column    170 wide, padding 20px 50px
     body            starts at x210 inside the open panel, padding 50px
     icon            70x70 circle, background #ebebeb, glyph rgb(37,2,255)
                     at 36x36
     letter          90px/90px/400 - #fff on the OPEN panel (it disappears
                     into the white card) and #c2c2c2 when collapsed. The
                     letter IS the collapsed-state marker, which is why the
                     open panel looks like it has none.
     name / copy     24px/600/31.2px #141414  over  16px/400/26.4px
   ============================================================================ */
.zmit .zab-frame.z-section { background: #fff; padding: 30px 0; }
.zmit .zab-frame h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #141414; text-align: center; margin: 0 0 20px; }
.zmit .zab-frame-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #5e5e5e; text-align: center; max-width: 1152px; margin: 0 auto 30px; }
.zab-frame-row { display: flex; flex-direction: column; gap: 20px; }
.zab-frame-item {
    /* border-width 0 + live's own soft shadow, MEASURED on this page at 1440:
       box-shadow rgba(0, 31, 31, 0.08) 0 0 14px 2px on EVERY panel, open and
       collapsed alike, and border-width 0. The cloned 1px var(--zab-line) drew a
       hard outline live does not have, which is what the owner screenshotted. */
    background: #fff; border: 0; border-radius: 10px;
    box-shadow: 0 0 14px 2px rgba(0, 31, 31, 0.08);
    overflow: hidden; transition: flex-basis .35s ease;
}
.zmit .zab-frame-tab {
    display: flex; align-items: center; gap: 20px;
    width: 100%; background: none; border: 0; padding: 20px; cursor: pointer;
}
.zab-frame-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-frame-ico svg { display: block; width: 36px; height: 36px; }
.zab-frame-letter { font-size: 90px; font-weight: 400; line-height: 90px; color: #c2c2c2; }
.zab-frame-item.is-open .zab-frame-letter { color: #fff; }
/* the visible name lives in the body, which is hidden while collapsed, so the
   control would otherwise have no accessible label */
.zab-frame-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zab-frame-body { padding: 0 20px 24px; }
.zmit .zab-frame-body h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #141414; margin: 0 0 10px; }
.zmit .zab-frame-body p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0; }
@media (min-width: 1081px) {
    .zab-frame-row { flex-direction: row; align-items: stretch; height: 320px; }
    .zab-frame-item { flex: 0 0 120px; display: flex; flex-direction: column; }
    .zab-frame-item.is-open { flex: 1 1 auto; flex-direction: row; align-items: center; }
    .zmit .zab-frame-tab { width: auto; flex: 0 0 170px; flex-direction: column; justify-content: center; gap: 0; padding: 20px 50px; }
    .zab-frame-body { display: none; }
    .zab-frame-item.is-open .zab-frame-body { display: block; flex: 1 1 auto; padding: 50px 50px 50px 0; }
}
@media (max-width: 1080px) {
    .zmit .zab-frame h2 { font-size: 30px; line-height: 1.3; }
}
@media (max-width: 767px) {
    .zmit .zab-frame h2 { font-size: 22px; line-height: 1.3; }
    .zab-frame-letter { font-size: 60px; line-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .zab-frame-item { transition: none; }
}

/* ---- height reconciliation for the twins, MEASURED live vs this build at
   1440 on outsource-software-development. Every number is live's own.
   -------------------------------------------------------------------------- */
/* PROCESS: live pads the band 80/80 (the cloned 54/48) and leaves 60px between
   the card row and the CTA. */
.zmit .zab-steps.z-section { padding: 80px 0; }
.zmit .zab-steps-cta { padding-top: 50px; }

/* FRAMEWORK: live's band is 30 above the heading, 320 for the panel row and 66
   below it, with 29px between the lead and the row. */
.zmit .zab-frame.z-section { padding: 30px 0 66px; }
.zmit .zab-frame-lead { margin: 0 auto 39px; }

/* RECOGNIZED: on these pages live's box carries NO body paragraph and the
   heading runs at 50px/60px (858 wide, three lines) over the review logos -
   a 350-tall box in a 450 band. The cloned 30px heading and 720/250 tracks
   give 252. */
@media (min-width: 1081px) {
    .zmit .zmit-recognized.z-section { padding: 50px 0; }
    .zmit .zmit-recognized-band { grid-template-columns: 1fr 340px; gap: 31px; }
    .zmit .zmit-recognized-copy h2 { font-size: 50px; line-height: 60px; }
    .zmit .zmit-recognized-copy p { max-width: none; line-height: 26.4px; }
}

/* VALUE BAND: live pads it 30 top / 100 bottom (the cloned 20/30). */
.zmit .zab-trust.v-split.z-section { padding: 30px 0 100px; }

/* FINAL CTA: live's band is the container itself - 30 top / 80 bottom padding,
   a 50px column gap and NO padding on the banner. The cloned 150/79 plus a
   50px banner padding made it 211 too tall. */
.zmit .zmit-final.z-section { padding: 30px 0 80px; }
.zmit .zmit-final-banner { padding: 0; }

/* CONSULTANT BAND: live pads it 150 top / 80 bottom around a 391-tall grid. */
.zmit .zab-intro.z-section { padding: 150px 0 80px; }

/* FAQ: live's rows are 77 tall for a one-line question (25px padding around a
   27px line) and 104 for two lines; the two columns are 662 wide 60 apart.
   Restate the 22px horizontal padding - a two-value shorthand here silently
   zeroes it and the text sits flush against the card edge. */
.zmit .zmit-faq-q { padding: 25px 22px; line-height: 27px; }
.zmit .zmit-faq-list { column-gap: 60px; }
/* Live forces the break after item 6, so column one holds SIX of the eleven
   questions and is 754 tall; the cloned sheet resets it to auto, which lets the
   browser balance the two columns and the band came up 83 short. Reproduce
   live's own unbalanced split - and only above the phone breakpoint, where the
   list is still two columns. */
@media (min-width: 1081px) {
    .zmit .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ---- twins, mobile: live's own band padding at 768 / 375 ------------------
   Measured on outsource-software-development; the desktop values above are
   unmediated so each one that differs is restated here.
     band        768            375
     cfcd04b     30 / 50        50 / 50
     81a08e8     30 / 0         50 / 0
     e592f4d     80 / 80        50 / 50
     5187ba8     30 / 0         20 / 0
     8348078     70 / 80        70 / 0
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .zmit .zab-trust.v-split.z-section { padding: 30px 0 50px; }
    .zmit .zmit-final.z-section { padding: 30px 0 0; }
    .zmit .zab-intro.z-section { padding: 80px 0; }
    .zmit .zab-frame.z-section { padding: 30px 0 0; }
    .zmit .zab-steps.z-section { padding: 70px 0 80px; }
    .zmit .zab-intro-fig img { height: auto; }
}
@media (max-width: 767px) {
    .zmit .zab-trust.v-split.z-section { padding: 50px 0; }
    .zmit .zmit-final.z-section { padding: 50px 0 0; }
    .zmit .zab-intro.z-section { padding: 50px 0; }
    .zmit .zab-frame.z-section { padding: 20px 0 0; }
    .zmit .zab-steps.z-section { padding: 70px 0 0; }
}

/* ---- twins, mobile type + figures ---------------------------------------
   MEASURED at 375 on outsource-software-development:
     cfcd04b value cards   174 tall each, NO cell padding, 20px apart,
                           title/body at 14.59px/24.08px
     81a08e8 figure        315 x 400, and the copy carries no box padding
     e592f4d figure        335 x 500 and IS shown (the cloned sheet hides it)
   The cloned sheet's 34px eyebrow and 20px cell padding are unmediated and sit
   AFTER its own phone block, so they applied at 375 and ran the value band
   829px tall.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .zmit .zab-trust .zab-trust-eyebrow { font-size: 26.87px; line-height: 34.93px; }
}
@media (max-width: 767px) {
    .zmit .zab-trust .zab-trust-eyebrow { font-size: 22.91px; line-height: 29.78px; }
    /* live runs the copy paragraphs at 14px/21px here (588 for the pair), not at
       the 14.59px/24.08px the rest of the band uses */
    .zmit .zab-trust .zab-trust-para { font-size: 14px; line-height: 21px; }
    .zmit .zab-trust.v-split .zab-trust-cell { padding: 0; }
    .zmit .zab-trust .zab-trust-cell h2 { font-size: 16px; line-height: 24.08px; margin: 0 0 8px; }
    .zmit .zab-trust .zab-trust-cell h3 { font-size: 14.59px; line-height: 24.08px; }
    .zmit .zab-trust.v-split .zab-trust-panel { gap: 20px; }
    .zmit .zmit-final-copy { padding: 0; }
    .zmit .zmit-final-media img { height: 400px; object-fit: cover; }
    .zmit .zab-intro-fig { display: block; }
    .zmit .zab-intro-fig img { height: 500px; object-fit: cover; }
}

/* ---- outsource-software-development only, MEASURED on its own live page ----
   live's consultant figure is 391 tall here (348 on the sibling page). */
@media (min-width: 1081px) {
    .zmit .zab-intro-fig img { height: 391px; }
}

/* ============================================================================
   .zab-frame vertical rhythm + S18 FINAL CTA shape.
   Both MEASURED on this page's own live URL at 1440, asserting
   window.innerWidth === 1440 inside the same evaluation.

   --- .zab-frame (SIX panels here) -------------------------------------------
     live                              ours before      ours after
     band                1440 x 584    1440 x 584       1440 x 584
     bandTop -> h2       30            30               30
     h2 -> lead          30            20               30
     lead -> row         30            39               30
     row -> bandBottom   65            66               65
     row                 1360 x 320    1340 x 320       1340 x 320
     open panel          660           640              640
     collapsed panels    120 x5        120 x5           120 x5
     panel border-width  0             1px              0
     panel box-shadow    0 0 14px 2px rgba(0,31,31,.08) / none / restored

   The band total matched live only by accident (20+39 == 30+30 - 1, and 66
   against 65), so every step is restated rather than trusted. The open panel's
   width needs NO per-page number: `flex: 0 0 120px` collapsed plus
   `flex: 1 1 auto` open derives 640 here and 780 on the five-panel twin, the
   same way live derives 660 / 800 from its 1360 row. The 1340 row against
   live's 1360 is the house container and stays (CLAUDE.md).

   --- S18 FINAL CTA ----------------------------------------------------------
   This page's live final band is NOT the gradient banner with an overhanging
   portrait that the reference sheet builds. It is a plain two-column block:

     live                                    ours before          ours after
     row                1380 x 720           1340 x 712           1340
     row background      transparent         gradient + rad 5px   transparent
     copy column         665 x 610           583 in a 1340 box    645
     media column        665 x 610           0 x 0, fig is fixed  645
     figure              665 x 400,          500 x 476,           645 x 400,
                         object-fit cover,   object-fit fill,     cover,
                         static, v-centred   absolute bottom 0    static, centred
     column gap          50                  n/a                  50

   So the "band grew round a floating figure" the owner saw is the reference's
   gradient banner: the 476-tall figure was pinned to the bottom-right of a
   602-tall gradient box, leaving the whole top-right of the band empty. Live
   has no gradient, no radius, and lets the COPY column drive the height with
   the figure centred beside it - which is what the grid below does: two equal
   tracks of (1340-50)/2 = 645, `align-items: center`, and a static 400-tall
   `object-fit: cover` figure that fills its own track. The row height is then
   max(copy, 400) = copy, exactly live's mechanism, and the figure can never
   drive it.
   ============================================================================ */
@media (min-width: 1081px) {
    /* .zab-frame rhythm */
    .zmit .zab-frame.z-section { padding: 30px 0 65px; }
    .zmit .zab-frame h2 { margin: 0 0 30px; }
    .zmit .zab-frame-lead { margin: 0 auto 30px; }

    /* final CTA: live's two-column block, no gradient banner */
    .zmit .zmit-final-banner {
        background: none; border-radius: 0; min-height: 0;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 50px; align-items: center;
    }
    .zmit .zmit-final-copy { max-width: none; }
    .zmit .zmit-final-copy p { max-width: none; }
    .zmit .zmit-final-media img {
        position: static; width: 100%; height: 400px; object-fit: cover;
    }
}

/* ============================================================================
   .zab-frame — the three things the FIRST pass mis-measured, and why.

   Live's Elementor CSS for this widget rides in the Seraphinite bundle and is
   applied LAZILY: read before the band is scrolled into view, the panel's
   label column reports `background-image: none` and the band itself reports a
   flat `#fff`. That is where the note above ("#fff on the OPEN panel - it
   disappears into the white card") came from, and it is wrong. Re-read with
   the band scrolled to centre and the transition settled, live reports:

     band            background-color #fff UNDER
                     linear-gradient(rgba(1,97,255,.08) 0%,
                                     rgba(149,114,247,.08) 100%)
                     — sampled at the pixel level to confirm: the band's top
                     row is rgb(235,243,255), which is exactly
                     rgba(1,97,255,.08) composited over white, not white.
     open .ue_label  linear-gradient(#26314e 0%, #0161ff 0%, #9572f7 120%)
                     (the #26314e stop is dead - the #0161ff stop is also at
                     0% and wins), 170 x FULL 320, padding 20px 50px,
                     justify-content space-between: icon pinned to the top,
                     the 90px letter pinned to the bottom.
                     The letter is #fff and is legible only against this
                     gradient - it is NOT a hidden letter.
     collapsed panel padding 10px, and its label keeps the same 170px width,
                     so it OVERFLOWS the 120px card by 25px each side and
                     `overflow: hidden` clips it. That is what puts the
                     collapsed letter 30px off the card bottom instead of
                     centred.

   Measured at 1440 on this page, asserting window.innerWidth === 1440:

                        live            ours before      ours after
     band wash          .08 gradient    flat #fff        .08 gradient
     open label box     170 x 320       170 x 200        170 x 320
     open label bg      blue gradient   transparent      blue gradient
     open icon top      20              80               20
     open letter top    210 (b 20)      150 (b 80)       210 (b 20)
     collapsed label    170 wide, x-25  120 wide, x0     170 wide, x-25
     collapsed icon     t 30            t 20             t 30
     collapsed letter   t 200 (b 30)    t 90 (b 140)     t 200 (b 30)

   `space-between` alone puts the letter on the bottom padding edge, so live's
   `margin-top: 100px` on it is redundant here and is not copied. The
   collapsed card is switched to `flex-direction: row` so `align-self: stretch`
   on the label means FULL HEIGHT in both states and one rule covers both.
   The real <button> header and the visually-hidden panel name stay exactly as
   they are - live ships a bare div, and the accessibility bar outranks that.

   Also on the final band: live rounds the figure 20px (`border-radius: 20px`
   on the img, panel radius unchanged) - read in the same in-view pass, and
   also missed by the earlier out-of-view read.
   ============================================================================ */
.zmit .zab-frame.z-section {
    background:
        linear-gradient(rgba(1, 97, 255, 0.08) 0%, rgba(149, 114, 247, 0.08) 100%),
        #fff;
}

/* NOT gated to desktop: live carries both of these at 430 too, where the
   label column becomes a full-width 90px header strip - icon at the left end,
   the 60px letter at the right end, gradient behind it on the open panel. With
   the gradient gated to desktop the open panel's #fff letter rendered white on
   white at 430 and simply vanished. */
.zmit .zab-frame-tab { justify-content: space-between; }
.zmit .zab-frame-item.is-open .zab-frame-tab {
    background: linear-gradient(#26314e 0%, #0161ff 0%, #9572f7 120%);
}

@media (min-width: 1081px) {
    /* the label column is live's .ue_label: 170 wide, full card height, icon
       pinned top / letter pinned bottom inside a 20px 50px padding box. */
    .zmit .zab-frame-tab { flex: 0 0 170px; width: 170px; align-self: stretch; }

    /* collapsed card: live insets it 10px and centres the 170-wide label over
       the 120-wide card, letting overflow:hidden clip the sides. */
    .zab-frame-item:not(.is-open) {
        flex-direction: row; justify-content: center; padding: 10px 0;
    }

    /* live rounds the final-band figure 20px */
    .zmit .zmit-final-media img { border-radius: 20px; }
}

/* ---- .zab-frame open-panel body: live pads it 50px on ALL FOUR sides -------
   MEASURED at 1440 with the band in view. Live's `.ue_sub` sits at x170 (flush
   against the 170px label column) with `padding: 50px`, so its heading starts
   at x220. The comment further up this sheet said "body starts at x210,
   padding 50px" and the rule was written `50px 50px 50px 0` - which puts the
   heading at x170, 50px left of live's, hard against the gradient column.
   Live's panel-name heading also carries a 20px bottom margin, not 10.

                      live    ours before   ours after
     body x            170     170           170
     body padding      50px    50 50 50 0    50px
     h3 x              220     170           220
     h3 margin-bottom  20      10            20
     body height       283     273           283
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .zab-frame-item.is-open .zab-frame-body { padding: 50px; }
    .zmit .zab-frame-body h3 { margin: 0 0 20px; }
}

/* ---- final CTA: the gradient banner is wrong at EVERY width ---------------
   Re-measured on live at 430 with the band scrolled to centre: live's final
   row is transparent with `border-radius: 0` there too (padding 50px 0, the
   copy over a 370x400 `object-fit: cover` figure), and the figure keeps its
   20px radius. The desktop-only fix above therefore left the cloned gradient
   card and its 5px radius in place on phones - the same defect the owner
   reported, one breakpoint down - so both properties are un-gated here.
   The two-column grid stays desktop-only: live stacks at 430.

                       live 430          ours before      ours after
     row background    transparent       gradient         transparent
     row radius        0                 5px              0
     figure            370x400 cover     370x400 cover    370x400 cover
     figure radius     20px              0                20px
   -------------------------------------------------------------------------- */
.zmit .zmit-final-banner { background: none; border-radius: 0; }
.zmit .zmit-final-media img { border-radius: 20px; }

/* ============================================================
   OWNER DEFECT FIXES - 2026-09-21
   ============================================================ */

/* D2 TESTIMONIALS: content-driven card, no reserved height.
   MEASURED on live at 1440: live's slide IS the card and its height is exactly
   its own content + 160 of padding - it reserves nothing. Ours pinned the card
   to the height live's richer slide happens to reach, so a shorter quote left
   the lower half of the card empty (the owner's screenshot). The panel's
   gradient / 16px radius / 56-64 padding stay as the earlier owner-approved
   house treatment; only the reserved height is dropped. */
.zmit .zmit-testi-card { min-height: 0; }

/* D6 CONSULTANT BAND (.zab-intro, "Speak with a Software Development
   Consultant"): live PAINTS it. MEASURED at 1440 with the band in view plus a
   settle - reading it from the top of the page reports backgroundImage:none,
   which is how it got built flat. This is NOT .zmit-final ("Conclusion"
   figure) - that band is correctly transparent with a 665x400 object-fit:cover
   figure at radius 20 and must be left alone.
     row   1380x391, linear-gradient(102.29deg,#ecf1eb 8.75%,#aec8fd 45.11%,
           #84c3fc 81.46%), radius 5, padding 0, flex, space-between, gap 20
     copy  690 x rowH, padding 50, radius 5, transparent
     media 500x514, padding 0, align-self flex-end, margin -138px 0 0
     img   500x514, object-fit fill, radius 0, position static
   Visible overhang -124 above / 0 below: the row is COPY-driven, so the same
   -138px margin yields a different visible overhang than on the mobile twin.
   Our container is 1340 against live's 1380, so the 690/500 columns are kept
   and space-between absorbs the 40px. */
@media (min-width: 1081px) {
    .zmit .zab-intro-grid {
        display: flex; justify-content: space-between; gap: 20px; align-items: stretch;
        background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
        border-radius: 5px; padding: 0;
    }
    .zmit .zab-intro-copy { flex: 0 0 690px; padding: 50px; border-radius: 5px; background: transparent; }
    .zmit .zab-intro-fig {
        flex: 0 0 500px; padding: 0; align-self: flex-end; margin: -138px 0 0;
    }
    .zmit .zab-intro-fig img { width: 500px; height: 514px; object-fit: fill; border-radius: 0; }
}
/* 430: live keeps the same gradient, stacks the columns and switches the
   figure to object-fit: cover. */
@media (max-width: 680px) {
    .zmit .zab-intro-grid {
        display: flex; flex-direction: column; gap: 20px; padding: 0;
        background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
        border-radius: 5px;
    }
    .zmit .zab-intro-copy { padding: 30px 20px; }
    .zmit .zab-intro-fig { margin: -12% 0 0; align-self: center; width: 100%; }
    .zmit .zab-intro-fig img { width: 100%; height: 500px; object-fit: cover; border-radius: 0; }
}
/* the band heading is 33.05px/600/42.97px #14142b on live (ours had inherited
   34px/400, which read as body weight next to the repainted panel). */
@media (min-width: 1081px) {
    .zmit .zab-intro-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.97px; }
}
/* paint the row at EVERY width - the two geometry blocks above only cover
   >=1081 and <=680, and the band must not fall back to bare white at 768. */
.zmit .zab-intro-grid {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px;
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zab-intro-grid { padding: 30px; gap: 24px; }
    .zmit .zab-intro-fig img { height: 380px; object-fit: cover; border-radius: 0; }
}

/* ===================== from nearshore-software-development.css ===================== */
/* ---- .zab-proc: this page's agile-workflow band (live aac186a) ------------
   MEASURED at 1440: band background rgb(247,247,252), 570 tall, a flex ROW of
   two 720px columns with NO gutter - left the heading plus the copy block,
   right five accordion rows. sideBySide: true, so it is a two-column grid and
   the stacked rules must only apply below 1081.
     heading   34px / 400 / 44.2px  #14142b  left
     sub-heads 24px / 600 / 31.2px  #141414   (live's own <h3>s in the copy)
     body      18px / 400 / 27px    #14142b
     rows      720x77 on #262338, radius 5, padding 25, 7px apart,
               label 16px/400 #fcfcfc; the FIRST row ships open (174 tall)
   The cloned sheet has this band at 30px/16px on a transparent background and
   a 60px right gutter - all three are a different page's values. Live's
   zero gutter is reproduced rather than corrected.
   -------------------------------------------------------------------------- */
.zmit .zab-proc.z-section { background: #f7f7fc; padding: 30px 0; }
.zmit .zab-proc-copy { padding-right: 0; }
.zmit .zab-proc-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #14142b; margin: 0 0 20px; }
.zmit .zab-proc-copy h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #141414; margin: 0 0 10px; }
.zmit .zab-proc-copy p  { font-size: 18px; font-weight: 400; line-height: 27px; color: #14142b; margin: 0 0 18px; }
.zmit .zab-proc-copy p:last-child { margin-bottom: 0; }

/* AGILE WORKFLOW: live's collapsed rows are 77 tall (25px padding around a
   27px line); the inherited 1.5em line gives 74 and the band ran 31 short. */
.zmit .zab-proc-item > summary { line-height: 27px; }

/* INDUSTRIES: live's band is 1177 - 70 padding, a 56-tall heading, then 141px
   of air before the first card row (its flip widget reserves an empty
   description slot), 3 rows of 270 at a 15px gap, 70 padding. */
.zmit .zab-flip.z-section { padding: 70px 0; }
.zmit .zab-flip h2 { font-size: 34.7px; line-height: 43px; margin: 0 0 154px; }

/* ---- mobile: live keeps the workflow band in TWO columns at 768 ----------
   MEASURED at 768: the band is 731 tall inside a 728 box, i.e. still a
   two-column row (the cloned sheet stacks at 1080 and it ran 308 too tall).
   Below 768 it stacks. */
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-proc-grid { grid-template-columns: 1fr 1fr; gap: 0; }
    .zmit .zab-proc-copy { padding-right: 20px; }
}

/* ---- workflow band, phone: live's own type at 375 ------------------------
   MEASURED at 375: heading 22.91px/29.78px, the sub-heads 18.24px/23.71px,
   body 14px/21px, and the accordion rows 71 tall for one line (14.59px/
   24.08px inside 20px padding). The desktop values above are unmediated, so
   they applied at 375 and ran the band 523px tall.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .zmit .zab-proc-copy h2 { font-size: 22.91px; line-height: 29.78px; }
    .zmit .zab-proc-copy h3 { font-size: 18.24px; line-height: 23.71px; margin: 0 0 8px; }
    .zmit .zab-proc-copy p  { font-size: 14px; line-height: 21px; margin: 0 0 14px; }
    .zmit .zab-proc-item > summary { padding: 23px 20px; font-size: 14.59px; line-height: 24.08px; }
    .zmit .zab-proc-a { padding: 12px 20px 16px; }
    .zmit .zab-proc-a p { font-size: 14px; line-height: 21px; }
}

/* D1 ACCORDION: the answer must sit INSIDE the dark row, not under it.
   MEASURED on live at 1440 (band in view, 2.4s settle): the open row is ONE
   #262338 card 174 tall -
     summary  720x77, #262338, radius 5px 5px 0 0 while open, padding 25
     answer   720x97, SAME #262338 fill, radius 0, padding 0 20px 20px,
              copy 16px/25.6px #d9dbe9 with 25.6px under the last paragraph
   Rows are 7px apart and the collapsed row is 77. Ours painted only the
   summary, so the answer rendered on the light band below the card. */
.zmit .zab-proc-item[open] > summary { border-radius: 5px 5px 0 0; }
.zmit .zab-proc-a { background: #262338; padding: 0 20px 20px; }
.zmit .zab-proc-a p { font-size: 16px; line-height: 25.6px; color: #d9dbe9; margin: 0 0 25.6px; }

/* D3 INDUSTRIES heading gap: OWNER DEVIATION FROM LIVE, do not restore.
   Live leaves 141px between this h2 and the first card row because its flip
   widget reserves an empty description slot; ours reproduced that as a 154px
   margin. The owner asked for the gap to be REDUCED, so this is a deliberate
   tight value - a later port must NOT put live's 141 back. */
.zmit .zab-flip h2 { margin: 0 0 44px; }


/* ============================================================================
   /enterprise-software-development-company - MEASURED on this page's own live
   URL at 1440 (window.innerWidth === 1440 in the same evaluation, every band
   scrolled into view before reading). Live band ids quoted.
   ============================================================================ */

/* services fbfd141 - live's card body is ONE <p> at 14px/23.1px, one line per
   bullet, 5px above and 22.4px below; cards 244 tall, 30px row gap. */
.zmit .zmit-services-grid .zmit-svc-card ul { margin: 5px 0 22px; }
.zmit .zmit-services-grid .zmit-svc-card li { font-size: 14px; line-height: 23.1px; margin-bottom: 0; }

/* compare 8195fb0 - heading band 82 (30 above a 37 line, 15 below); table
   e4183d9 is 72 + 6x100 + 20 below. */
.zmit .zab-cmp-head.z-section { padding: 30px 0 15px; }
.zmit .zab-cmp.z-section { padding-bottom: 20px; }

/* video dfaa669 - 544 = 30 + 484 media + 30; media 860x484 | 50 | copy 455
   with 50px top/bottom padding. In the house 1340 box the media track is 835
   (aspect kept), so the band lands ~14px short: that is the 1340 box. */
.zab-video-quote p { font-weight: 600; }
@media (min-width: 1081px) {
    .zmit .zab-video.z-section { padding: 30px 0; }
    .zmit .zab-video-grid { grid-template-columns: minmax(0, 1fr) 455px; gap: 50px; }
    .zmit .zab-video-media video { width: 100%; height: auto; aspect-ratio: 860 / 484; }
    .zmit .zab-video-copy { padding: 50px 0; }
}

/* recognized 2d7e0eb - 350 = 30 + a 290 box (40px padding) + 30. */
@media (min-width: 1081px) {
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
}

/* advantages 276f124 - 30 above the eyebrow AND 30 below the dark panel. */
@media (min-width: 1081px) {
    .zmit .zab-adv.z-section { padding: 30px 0; }
}

/* framework ddd4d17 - 631 = 30 + h2 112 + 30 + lead 79 + 30 + row 320 + 30. */
@media (min-width: 1081px) {
    .zmit .zab-frame.z-section { padding: 30px 0; }
}

/* testimonials adbc29f - live's company line on THIS page is 34px/47.6px
   (the nearshore 16px value is that page's), and each quote is two <p>s at
   18px/29.7px with 28.8px under each. */
.zmit .zmit-testi-lead { font-size: 34px; line-height: 47.6px; }
.zmit .zmit-testi-track .zmit-testi-quote { margin: 0; }
.zmit .zmit-testi-quote p { font-size: 18px; line-height: 29.7px; margin: 0 0 28.8px; }
@media (max-width: 767px) {
    .zmit .zmit-testi-lead { font-size: 22px; line-height: 30px; }
    .zmit .zmit-testi-quote p { font-size: 14px; line-height: 23.1px; margin-bottom: 22.4px; }
}

/* stats e7dadb8 - 324 = 30 + 264 + 30 on #262338. */
@media (min-width: 1081px) {
    .zmit .zmit-stats.z-section { padding: 30px 0; }
}

/* stories 1941bf8 - 733 = 30 + h2 44 (34px/44.2px/300) + 30 + 599 + 30. */
.zmit .zmit-stories.z-section { padding: 30px 0; }
.zmit .zmit-stories h2 { font-size: 34px; line-height: 44.2px; font-weight: 300; margin: 0 0 30px; }

/* value band 10aeaba - 593 = 30 + 533 + 30 on #eff0f7; copy paragraphs 18px/27px
   with live's empty <p> spacer (27px) between them; 41px under the heading. */
.zmit .zab-trust.v-split.z-section { padding: 30px 0; }
@media (min-width: 1081px) {
    .zmit .zab-trust .zab-trust-eyebrow { margin: 0 0 41px; }
    .zmit .zab-trust .zab-trust-para { font-size: 18px; line-height: 27px; margin: 0 0 27px; }
    .zmit .zab-trust .zab-trust-para:last-child { margin-bottom: 0; }
}

/* final 55b33bc - 855 = 30 + 795 + 30 on #fcfcfc. Copy column: h2 34px/44.2px
   /400, 40 gap, four 16px/26.4px paragraphs each followed by live's empty
   <p> spacer (26.4px), then the button; figure 658x400 cover, v-centred. */
.zmit .zmit-final.z-section { background: #fcfcfc; padding: 30px 0; }
@media (min-width: 1081px) {
    .zmit .zmit-final-copy h2 { font-size: 34px; line-height: 44.2px; font-weight: 400; margin: 0 0 40px; }
    .zmit .zmit-final-copy p { font-size: 16px; line-height: 26.4px; margin: 0 0 26.4px; }
}
@media (max-width: 1080px) {
    .zmit .zmit-final.z-section { padding: 30px 0 0; }
}

/* FAQ 1ad22e1 - 1051 = 30 + h2 44 + 30 + 917 + 30 on #eff0f7. Live runs TWO
   accordions: seven questions left, eight right, 655 wide 30 apart. */
.zmit .zmit-faq-list { column-gap: 30px; }
@media (min-width: 1081px) {
    .zmit .zmit-faq.z-section { padding: 30px 0; }
    .zmit .zmit-faq h2 { margin: 0 0 30px; }
    .zmit .zmit-faq-item:nth-child(6) { break-after: auto; }
    .zmit .zmit-faq-item:nth-child(7) { break-after: column; }
}

/* consultant band e592f4d/1187a39 - the row (421) is driven by the FIGURE:
   500x558 with live's -136.5px top margin (the osd sheet's 514 is that page's). */
@media (min-width: 1081px) {
    .zmit .zab-intro-fig img { height: 558px; }
}

/* bookcal 4b6e428 - 50 above the heading, 10 to the lead, 30 to the calendar,
   and the calendar box itself runs 28 past the 756 iframe. Our lead wraps to
   two lines in the 1340 box (live's 1405 fits one), ~15px of the delta. */
@media (min-width: 1081px) {
    .zmit .zmit-bookcal.z-section { padding: 50px 0 21px; }
    .zmit .zmit-bookcal p { margin-bottom: 30px; }
}

/* value band 10aeaba - the 2x2 cards sit 32px apart vertically on live. */
@media (min-width: 1081px) {
    .zmit .zab-trust.v-split .zab-trust-panel { row-gap: 32px; }
}

/* ---- phone, MEASURED on live at 375 -----------------------------------------
     services  cards keep 30px padding and the 14px/23.1px body (244 tall)
     FAQ       summary padding 25px, 14.59px/24.08px (92 / 113 / 134 rows)
     final     h2 22.91px/29.78px, paragraphs 14px/23.1px + a 23px spacer
     value     card title 16px/19.2px, body 14px/16.8px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .zmit .zmit-services-grid .zmit-svc-card { padding: 30px; }
    .zmit .zmit-faq-q { padding: 25px 22px; font-size: 14.59px; line-height: 24.08px; }
    .zmit .zmit-final-copy h2 { font-size: 22.91px; line-height: 29.78px; margin: 0 0 20px; }
    .zmit .zmit-final-copy p { font-size: 14px; line-height: 23.1px; margin: 0 0 23px; }
    .zmit .zab-trust .zab-trust-cell h2 { font-size: 16px; line-height: 19.2px; }
    .zmit .zab-trust .zab-trust-cell h3 { font-size: 14px; line-height: 16.8px; }
}

/* OWNER 2026-09-28: smaller hero headline + shorter banner (deliberate deviations
   from live 52.5/64.8 and 688). The card sizes to its content instead of being
   stretched, the copy column sets the banner, and the card keeps live's ~96px
   overhang into the logo strip (owner: never shrink the overhang). The gap above
   the form note is the tuning value that holds the overhang at 96. */
@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; }
}

/* ============================================================================
   SERVICES CARDS - desktop, MEASURED 2026-09-30 on the -wp reference at 1440
   with a real pointer (el.matches(':hover') true, read >1s after the hover):
     rest   card 243.2 tall, border 0.8px #eff0f7, radius 8px, fill #eff0f7,
            padding 30, overflow hidden, transition all .3s ease
     hover  border #0161ff, fill #d5e0f3, transform translate(-10px, -10px),
            card height UNCHANGED on every card
     CTA    .uc_post_grid_style_one_button is position: absolute; bottom: 12px,
            34 tall, link 10px below its top - 206px from the card top on EVERY
            card, whatever its title and bullet count
   Our CTA was an in-flow row revealed on hover, so a hovered card grew 34px
   and pushed every row below it down. Pinned like the reference, the grid
   stays still.
   Bullets: the reference body is one <p> of "• text" lines - the bullet is a
   text character in the body ink at body size with no hanging indent, not the
   shared sheet's 15px/700 lavender marker in an 18px gutter.
   The title's 20px bottom margin and the body's 5px top margin COLLAPSE on the
   reference, so the body starts 20 below the title, not 25 - that 5px is why
   our card measured 248 where the reference is 243.
   ============================================================================ */
@media (min-width: 1081px) {
    .zmit .zmit-services-grid .zmit-svc-card {
        border-radius: 8px;
        overflow: hidden;
        transition: transform .3s ease, border-color .3s ease;   /* fill switches instantly, as the reference's does */
    }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: translate(-10px, -10px); }
    .zmit .zmit-services-grid .zmit-svc-card ul { margin: 0 0 22.4px; }
    .zmit .zmit-services-grid .zmit-svc-card li { padding-left: 0; }
    .zmit .zmit-services-grid .zmit-svc-card li::before {
        content: "\2022\20"; position: static; color: inherit; font: inherit;
    }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta {
        position: absolute; left: 30px; bottom: 12px;
        height: 34px; margin: 0; padding-top: 10px; align-items: flex-start;
    }
    .zmit .zmit-services-grid .zmit-svc-cta .z-svc-more { line-height: 23.1px; }
}

/* ============================================================================
   PORTFOLIO - desktop, MEASURED 2026-09-30 on the -wp reference at 1440, the
   gallery scrolled into view (owl options read off the live instance):
     head band   71.8 = 20 + h2 36.8px/36.8px 400 #141414 + 15
     gallery     70 + widget 738.4 + 70; widget = main 630 + 2 + thumbs 80
                 + an EMPTY 26.4 owl-dots row (the thumb owl has dots on, and
                 they render at 0x0) - so 96.4 below the thumbs
     main        ONE slide at a time (items 1, loop), no peek, 630 tall,
                 radius 5, background cover anchored 50% 0
     arrows      owl-prev / owl-next: absolute, top 350 (not centred - live's
                 own value), 50px OUTSIDE the slide; 44x44, radius 94,
                 transparent, box-shadow 0 1px 2px rgba(0,0,0,.05), #808080
                 FA6 left-long / right-long at 18px; no hover change
     thumbs      10 up, margin 10, 80 tall, radius 5, background 0 50%,
                 every thumb at full opacity (no active dimming)
   Width is the one place the house layout wins (CLAUDE.md): the reference's
   widget sits 40px inside the heading's left edge at 1440 (heading x30, widget
   x70), so the stage and strip keep that 40px inset inside our 1340 container
   rather than going full-bleed. That inset is also what gives the arrows room
   to sit outside the slide as they do on the reference.
   ============================================================================ */
          /* loop copies: desktop only */



/* ============================================================================
   VIDEO QUOTE / ADVANTAGE CARDS / FRAMEWORK - desktop, MEASURED 2026-09-30 on
   the -wp reference at 1440 (each band scrolled into view before reading).
   Video quote: the reference is Elementor's "quotation" blockquote skin - a
   blockquote::before of U+201C in 900 70px/70px Times New Roman, #0161ff,
   absolute at top -20px / left -45px of the quote text (35x42 box). Ours had
   no glyph at all, which left the quote indented under an empty gap. Its
   author line sits 15px under the quote on a 1px line box (e-q-footer margin
   15, cite line-height 1px) - ours was 16 + a 22.4px line, ~12px lower.
   Advantage cards: the icon box was 50px wide holding a 100px svg, so every
   icon overflowed 25px right of the card centre and the centred titles read as
   off-centre under it. The reference's icon wrapper is 100 wide x 108 tall
   (100px icon at its top), then 20 to the title, which is underlined.
   ============================================================================ */
@media (min-width: 1081px) {
    .zmit .zab-video-quote p { position: relative; margin: 0 0 15px; }
    .zmit .zab-video-quote p::before {
        content: "\201C"; position: absolute; top: -20px; left: -45px;
        display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
    }
    .zmit .zab-video-quote cite { line-height: 1px; }

    .zmit .zab-adv .zab-adv-ico { width: 100px; height: 108px; margin: 0 auto; }
    .zmit .zab-adv .zab-adv-card h3 { text-decoration: underline; }

    /* Framework panels open on HOVER on the reference (last hovered stays
       open); the pointer cursor covers the whole panel there. */
    .zab-frame-item { cursor: pointer; }
}

/* ============================================================================
   STATS / INDUSTRIES / PRE-FOOTER - desktop, MEASURED 2026-09-30 on the -wp
   reference at 1440, each band scrolled into view before reading.
   Stats: eyebrow is 600 16px/19.2px, 20 above the 34px heading; counter
   labels 16px/24px; the CTA is 500 16px/16px, 13px 35px, sized to its text
   (373.5 wide), not stretched across the column.
   Industries (ucaddon_dynamic_flip_boxes, the reference's own CSS read off
   the page): band #f7f7fc, 70 padding; h2 34.7px on a 16px line + 20 top and
   bottom padding, #1f1f1f; lead 15.5px/25px #000, 728 wide, 18 above / 48
   below. Front: content LEFT-aligned and vertically centred; the icon sits in
   a white 75px tile (12 padding, radius 16); title 600 16px/1.2 #111, 28
   under it. Back: white, no border, 11 padding, list centred vertically;
   native disc bullets at 14px/23.1 with the text itself 12px/19.8, 18 in.
   Cards are NOT linked (owner, 2026-09-30). Cards stay 256 wide in
   our 1340 box so the reference's five-per-row holds.
   Pre-footer: logo 182.5x40.7 beside the title (20 gap), the title behind a
   1.6px white rule at 28px/28px in a 567.5 column (wraps after "That"), both
   top-aligned; lead 20 below at 770 wide; buttons 16px 50px, Contact in #000.
   Still hugs its content (owner, 2026-08-26) - which is now exactly the
   reference's 324.
   ============================================================================ */
@media (min-width: 1081px) {
    .zmit .zmit-stats .zmit-stats-eyebrow { font-size: 16px; font-weight: 600; line-height: 19.2px; margin: 0 0 20px; }
    .zmit .zmit-stats .zmit-stat p { font-size: 16px; line-height: 24px; }
    .zmit .zmit-stats .zmit-stats-copy .zab-btn { width: auto; font-size: 16px; line-height: 16px; }

    .zmit .zab-flip.z-section { background: #f7f7fc; padding: 70px 0; }
    .zmit .zab-flip h2 { font-size: 34.7px; font-weight: 400; line-height: 16px; color: #1f1f1f; padding: 20px 0; margin: 0; }
    .zmit .zab-flip-lead { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; max-width: 728px; margin: 0 auto; padding: 18px 0 48px; }
    .zmit .zab-flip-card { position: relative; }
    .zmit .zab-flip-front { align-items: flex-start; justify-content: center; gap: 0; }
    .zmit .zab-flip-front img { width: 75px; height: auto; background: #fff; padding: 12px; border-radius: 16px; object-fit: contain; }
    .zmit .zab-flip-front h3 { line-height: 1.2; text-align: left; margin: 28px 0 0; }
    .zmit .zab-flip-back { align-items: flex-start; justify-content: center; gap: 0; border: 0; padding: 11px; background: #fff; }
    .zmit .zab-flip-back ul { margin: 12px 0; padding: 0 0 0 20px; list-style: disc; color: #111; }
    .zmit .zab-flip-back li { list-style: disc; font-size: 14px; line-height: 23.1px; color: #111; margin: 0 0 6px; }
    .zmit .zab-flip-back li > span { display: block; font-size: 12px; line-height: 19.8px; padding-left: 18px; }

    .zmit .zmit-insights-copy { grid-template-columns: 182.5px minmax(0, 567.5px); column-gap: 20px; row-gap: 20px; align-items: start; }
    .zmit .zmit-insights-logo { width: 182.5px; height: 40.7px; align-self: start; }
    .zmit .zmit-insights-copy p.zmit-insights-title { border-left-width: 1.6px; }
    .zmit .zmit-insights-btns a { padding: 16px 50px; }
    .zmit .zmit-insights-btns a:first-child { color: #000; }
}

/* Flip-card text box, desktop. The reference's back face is overflow:visible
   (no scrollbar - ours inherited overflow:auto) and centres its list, so its
   longest list (Logistics, 242 tall) just sits inside the card. Our cards are
   256 wide, not 260, which left 196px of bullet text where the reference has
   200 - enough to wrap extra lines and overflow. The 4px comes off the RIGHT
   padding only, so the list keeps the reference's 11px left edge and its 200px
   text width. The FRONT keeps 27/27: at 202 every title breaks on the same
   lines as the reference (checked on all 13), which 206 would not. */
@media (min-width: 1081px) {
    .zmit .zab-flip-back { overflow: visible; padding: 11px 7px 11px 11px; }
}

/* ============================================================================
   HERO - desktop, re-matched to the -wp reference at 1440 on the owner's
   request (2026-09-30). This SUPERSEDES the 2026-09-28 smaller-headline /
   shorter-banner deviation above and the 48px disc scroll cue.
   Reference (8e8eda0 / 24fa598 / 6c4c282), measured:
     banner      698 tall (y100-798); left column 757 wide, 50 bottom pad
     headline    600 54px/64.8px (5 lines); sub 16px/26.4px; 20px gaps
     CTA         500 16px/16px, 13px 35px, radius 8, 20 icon gap -> 561.6x42
     card        508 wide, y140 to 893.5 (753.5) - overhangs the logo strip
                 by 95.5; title then the form from y142.9, note at y669.4
                 with ~48 of card below it
     scroll cue  30px chevron-circle in rgba(255,255,255,.66), left 50%,
                 18 above the banner's bottom edge
   The card is stretched to the row again, so its height (and the 96
   overhang) comes from the banner, not from the HubSpot form's own height.
   ============================================================================ */
@media (min-width: 1081px) {
    .zmit .zmit-hero .zmit-hero-headline { font-size: 54px; line-height: 64.8px; }
    .zmit-hero .zmit-hero-sub { font-size: 16px; line-height: 26.4px; }
    .zmit .zmit-hero .zmit-hero-left { padding-bottom: 50px; }
    .zmit .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; padding: 13px 35px; gap: 20px;
        min-height: 42px; border-radius: 8px;
    }
    .zmit .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 16px; }
    .zmit .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 10px; }
    .zmit .zmit-hero .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
    .zmit .zmit-hero .zmit-form-card { height: 100%; }
    .zmit .zmit-hero .zmit-form-card > h3 { margin-bottom: 74px; }
    .zmit .zmit-hero .zmit-form-card > .zmit-form-note { margin: auto 0 48px !important; }
    .zmit .zmit-hero .zmit-hero-scroll {
        width: 30px; height: 30px; bottom: 18px;
        background: rgba(255, 255, 255, .66); color: #14142b;
    }
    .zmit .zmit-hero .zmit-hero-scroll svg { width: 13px; height: 13px; }
}

/* ============================================================================
   INTERNAL-LINK PARITY / APPROACH ALIGNMENT / ADVANTAGE COPY WEIGHT
   (owner requests 2026-09-30, measured on the -wp reference at 1440)
   Links: service-card titles and the case-study image/logo/title are real
   links now, as on the reference. They must not change how anything looks:
   the title link inherits the title's ink, and sits UNDER the card overlay
   (static, like the reference) so a click still takes the overlay.
   Approach (.zab-proc): the reference is two equal columns 40px apart
   (662 | 40 | 662 in its 1365 box); ours had two 670px columns butted
   together with no gap. Paragraphs 27 apart, accordion titles 18px/27px.
   Advantage cards: body copy set regular, per the owner - the reference
   sets it at 600; this is a deliberate deviation.
   ============================================================================ */
.zmit .zmit-svc-card h3 a.z-svc-title { position: static; z-index: auto; color: inherit; text-decoration: none; }
.zmit .zmit-story a { color: inherit; text-decoration: none; }
.zmit .zmit-story-img > a { display: block; }
.zmit .zmit-story-logos > a { display: inline-flex; align-items: center; }
@media (min-width: 1081px) {
    .zmit .zab-proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .zmit .zab-proc-copy { padding-right: 0; }
    .zmit .zab-proc-copy p { margin-bottom: 27px; }
    .zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
    .zmit .zab-proc-item > summary { font-size: 18px; line-height: 27px; }

    .zmit .zab-adv .zab-adv-card p { font-weight: 400; }
}

/* In-text links - the reference's colours (measured 2026-09-30). The shared
   `.zmit a { color: inherit }` reset was painting these in the body ink, so
   the links were there but invisible ("Zazz", "vulnerability management",
   "cloud-native practices", "outsourcing services"). All widths: this is
   link visibility, not layout.
     light bands   #046bd2, weight 400, no underline (3.47:1 against the
                   #14142b body text, so it clears the 3:1 link-in-text rule)
     FAQ answers   #85bcff, weight 500, no underline - the weight step is the
                   non-colour cue link-in-text-block needs on that dark band */
.zmit .zab-proc-copy p a,
.zmit .zab-trust-para a,
.zmit .zab-trust-cell h3 a,
.zmit .zmit-final-copy p a { color: #046bd2; font-weight: 400; text-decoration: none; }
.zmit .zmit-faq .zmit-faq-a-inner a { color: #85bcff; font-weight: 500; text-decoration: none; }

/* ============================================================================
   PHONE - owner round 2026-09-30, measured on the -wp reference at 375 (each
   band scrolled into view before reading) against the owner's screenshots.
   Services   the reference's phone card is the desktop card: a linked card
              lifts translate(-10px,-10px) on hover, border #eff0f7 -> #0161ff,
              fill -> #d5e0f3, and its "Explore ..." row appears PINNED 12px off
              the card bottom - the card never grows (243 tall before and
              after). Ours revealed an in-flow row, so a hovered card grew 34px
              and pushed the grid down, and it had no lift below 1081.
   Compare    the it-managed-services phone accordion (owner): gradient items
              10 apart with no outline, #eff0f7 / #f9fcff answer bands, a green
              check on the Zazz row and a red X on the "others" row, blue
              18/500 labels over 14px copy.
              Landscape phones get it too; the base sheet's 1080 rule would
              otherwise show it on tablets beside the table.
   Portfolio  one full-width slide (335 x 190 on the reference) over a strip
              of TWO thumbs, 70 tall, 10 apart - not a 92% peek slide over
              64px squares.
   Value      the icon box was 50 wide holding a 100px icon, so every icon
              sat 25px right of the card centre (the desktop fix never reached
              phones). Titles underlined and 0.8px white dividers, as the
              reference.
   Framework  closed rows 100 tall (a 60px disc with a 30px glyph, the letter
              60/60, 20 in from the right); the open row is 380 with its
              title + copy at the BOTTOM (18.24/600 over 14/19.6, 20 padding).
              The open header keeps the house gradient so the white letter
              stays visible - the reference paints it white on white there.
   Industries full-width 335 x 250 cards, 15 apart: content left-aligned and
              vertically centred at 14px 26px padding, the icon in a 60px
              white tile (12 padding, radius 16), the title 16/600/19.2 28px
              under it. Our 256px desktop width was winning on phones.
   ============================================================================ */
@media (max-width: 1080px) {
    .zmit .zab-cmp-acc { display: none; }
}
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (max-width: 1080px) {
    /* services */
    .zmit .zmit-services-grid .zmit-svc-card { border-radius: 8px; overflow: hidden; transition: all .3s ease; }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: translate(-10px, -10px); }
    .zmit .zmit-services-grid .zmit-svc-card ul { margin: 0 0 22.4px; }
    .zmit .zmit-services-grid .zmit-svc-card li { padding-left: 0; }
    .zmit .zmit-services-grid .zmit-svc-card li::before {
        content: "\2022\20"; position: static; color: inherit; font: inherit;
    }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta {
        position: absolute; left: 30px; bottom: 12px;
        height: 34px; margin: 0; padding-top: 10px; align-items: flex-start;
    }
    .zmit .zmit-services-grid .zmit-svc-cta .z-svc-more { line-height: 23.1px; }

    /* compare accordion */
    .zmit .zab-cmp { display: none; }
    .zmit .zab-cmp-acc { display: block; }
    .zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
    /* it-managed-services' phone accordion EXACTLY (owner 2026-09-30: "check in
       phone view the it msp page"), measured there at 375: no outline, 10px
       apart, the question #14142b with NO hairline under it, both answer rows
       14px/21.7 copy, icons 2px down. (The MSSP variant differs on all six.) */
    .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%);
        border: 0; border-radius: 10px; margin-bottom: 10px; overflow: hidden;
    }
    .zmit .zab-cmp-acc .zab-acc-q { padding: 18px 22px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--zab-ink); border-bottom: 0; }
    .zmit .zab-cmp-acc .zab-acc-a { padding: 0; }
    .zmit .zab-cmp-acc .zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; margin: 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; }
    .zmit .zab-cmp-acc .zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
    .zmit .zab-cmp-acc .zab-acc-ico svg { display: block; width: 22px; height: 22px; }
    .zmit .zab-cmp-acc .zab-acc-row .zab-acc-label { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--zab-accent); margin: 0 0 6px; }
    .zmit .zab-cmp-acc .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin: 0; }
}
@media (max-width: 767px) {
    /* portfolio - the reference's phone gallery is the desktop owl: one slide,
       no arrows, dragged or swiped EITHER way and wrapping at both ends, with a
       2-up thumb strip that is draggable too and keeps the current slide's
       thumb first. The page script runs the loop engine here (as at 1081+),
       so the loop copies show and horizontal gestures go to the script;
       touch-action pan-y leaves vertical page scrolling to the browser. */
    
    
    
    
    
    

    /* value panel */
    .zmit .zab-adv .zab-adv-card { align-items: stretch; border-bottom: .8px solid #fff; }
    .zmit .zab-adv .zab-adv-card:last-child { border-bottom: 0; }
    .zmit .zab-adv .zab-adv-ico { width: 100px; height: 100px; margin: 0 auto; }
    .zmit .zab-adv .zab-adv-card h3 { text-decoration: underline; }

    /* framework */
    .zmit .zab-frame-tab { padding: 20px; }
    .zmit .zab-frame-ico { flex: 0 0 60px; width: 60px; height: 60px; }
    .zmit .zab-frame-ico svg { width: 30px; height: 30px; }
    .zmit .zab-frame-letter { font-size: 60px; line-height: 60px; }
    .zmit .zab-frame-item.is-open { display: flex; flex-direction: column; min-height: 380px; }
    .zmit .zab-frame-item.is-open .zab-frame-tab { padding: 15px 20px; }
    .zmit .zab-frame-item.is-open .zab-frame-body { margin-top: auto; padding: 20px; }
    .zmit .zab-frame-body h3 { font-size: 18.24px; font-weight: 600; line-height: 23.712px; color: #141414; margin: 0 0 19px; }
    .zmit .zab-frame-body p { font-size: 14px; line-height: 19.6px; color: #000; }

    /* industries */
    .zmit .zab-flip-wrap { gap: 15px; }
    .zmit .zab-flip-card { flex: 0 0 100%; height: 250px; }
    .zmit .zab-flip-front { align-items: flex-start; justify-content: center; gap: 0; padding: 14px 26px; }
    .zmit .zab-flip-front img { width: 60px; height: 60px; padding: 12px; background: #fff; border-radius: 16px; object-fit: contain; }
    .zmit .zab-flip-front h3 { font-size: 16px; font-weight: 600; line-height: 19.2px; text-align: left; margin: 28px 0 0; }
}

/* ============================================================================
   INDUSTRY CARD BACKS below 1081 - owner 2026-09-30 ("bullets are missing").
   The reference's back face is the same list at every width: disc bullets
   (14px/23.1 #111, 20px indent, 6 apart) around 12px/19.8 text 18px in,
   centred vertically in an 11px-padded white face. Ours only drew that list
   from 1081 up, so phones and tablets showed bare lines.
   ============================================================================ */
@media (max-width: 1080px) {
    .zmit .zab-flip-back { align-items: flex-start; justify-content: center; gap: 0; border: 0; padding: 11px; background: #fff; overflow: visible; }
    .zmit .zab-flip-back ul { margin: 12px 0; padding: 0 0 0 20px; list-style: disc; color: #111; text-align: left; }
    .zmit .zab-flip-back li { list-style: disc; font-size: 14px; line-height: 23.1px; color: #111; margin: 0 0 6px; }
    .zmit .zab-flip-back li > span { display: block; font-size: 12px; line-height: 19.8px; padding-left: 18px; }
}

/* ============================================================================
   LANDSCAPE PHONES up to 767 - owner 2026-09-30, landscape screenshots of the
   -wp reference, measured there at 667x375 and 740x360. The reference keeps
   its PHONE layout to 767, where ours had already switched to tablet layouts
   at 681, so a 740-wide landscape phone got a centred 363px photo, full-width
   industry cards, a cropped consultant and a one-row pre-footer.
   Final band  the photo spans the column (607 x 400 at 667, cover, radius
               20), 30 under the CTA.
   Industries  260 x 270 cards, two to a row 15 apart - the desktop face:
               12px 27px, left-aligned and vertically centred, the icon in a
               75px white tile (12 padding, radius 16), title 28 under it.
   Consultant  the gradient panel pads 30 20 0; heading 33.05/600/42.965; the
               portrait keeps its own shape (500 x 558, 918x1024 source) FLUSH
               to the panel's left and bottom edges, its transparent top
               tucked 25px under the CTA, which stays on top and clickable.
   Pre-footer  stacked: logo 230 x 51, 20 to the title (16/16 behind a 1.6px
               white rule), 20 to the copy (14/19.6), 43 to two full-width
               58px buttons 19 apart; band 60 top and bottom.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
    .zmit .zmit-final-media img { width: 100%; max-width: 100%; height: 400px; object-fit: cover; border-radius: 20px; margin: 30px 0 0; }

    .zmit .zab-flip-card { flex: 0 0 260px; height: 270px; }
    .zmit .zab-flip-front { align-items: flex-start; justify-content: center; gap: 0; padding: 12px 27px; }
    .zmit .zab-flip-front img { width: 75px; height: auto; padding: 12px; background: #fff; border-radius: 16px; object-fit: contain; }
    .zmit .zab-flip-front h3 { font-size: 16px; line-height: 19.2px; text-align: left; margin: 28px 0 0; }

    .zmit .zab-intro-grid { display: block; padding: 30px 20px 0; }
    .zmit .zab-intro h2 { font-size: 33.05px; font-weight: 600; line-height: 42.965px; }
    .zmit .zab-intro-cta { position: relative; z-index: 1; }
    .zmit .zab-intro-fig { width: auto; margin: -25px 0 0 -20px; }
    .zmit .zab-intro-fig img { width: 500px; max-width: 100%; height: auto; aspect-ratio: 918 / 1024; object-fit: cover; }

    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit .zmit-insights-grid, .zmit .zmit-insights-copy { display: block; }
    .zmit .zmit-insights-logo { display: block; width: 230px; height: 51px; margin: 0 0 20px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; border-left: 1.6px solid #fff; padding-left: 10px; margin: 0 0 20px; max-width: none; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14px; line-height: 19.6px; margin: 0 0 43px; max-width: none; }
    .zmit .zmit-insights-btns { display: flex; flex-direction: column; gap: 19px; width: 100%; }
    .zmit .zmit-insights-btns a { width: 100%; }
}

/* Framework -> testimonials gap, phones (owner 2026-09-30, "fix padding"):
   the reference leaves 70px between the last framework row and the
   testimonials heading at 375; ours had 25 (this band 0 at the bottom + the
   testimonials' own 25 top), so the "M" row sat almost on the heading. */
@media (max-width: 767px) {
    .zmit .zab-frame.z-section { padding-bottom: 45px; }
}
/* 681-767 (landscape phones): the testimonials band already pads 40 on top
   there, so 30 here keeps the reference's 70 (measured at 740 too). */
@media (min-width: 681px) and (max-width: 767px) {
    .zmit .zab-frame.z-section { padding-bottom: 30px; }
}

/* Value / strengths band (.v-split, the LIGHT #eff0f7 one), below 1081
   (owner 2026-09-30, "these white lines should not come"): the family's
   phone rule draws `border-bottom: 1px solid #fff` between trust cells - a
   divider meant for the DARK trust panel. On this light band it paints white
   rules between the cards, which the reference does not have. */
@media (max-width: 1080px) {
    .zmit .zab-trust.v-split .zab-trust-cell { border-bottom: 0; }
}

/* ============================================================================
   SERVICES CARDS - TABLET (681-1080), MEASURED 2026-09-30 on the -wp
   reference at 768 with a real pointer: the same card and hover as desktop
   (see the desktop block above) - 2 columns of 331.5 with a 30 gap, radius
   8, overflow hidden, body 20 under the title with inline dark bullets, and
   on hover the card lifts translate(-10px,-10px) with the #0161ff border /
   #d5e0f3 fill while the "Explore ..." row appears pinned 12px off the card
   bottom - the card never grows. Cards measure 243.6 (two-line title) and
   220.2 (one-line). Our tablet cards still had the old in-flow CTA that
   grew the card, lavender indented bullets and radius 10.
   Our Poppins sets ~1% narrower than the reference's, so "Web Application
   Development" fitted on one line where the reference wraps it; 3px of
   right padding restores the reference's title breaks on all 12 cards.
   (min-height: 501px) keeps this off landscape PHONES, which the phone pass
   (302b9d57) owns.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1080px) and (min-height: 501px) {
    .zmit .zmit-services-grid .zmit-svc-card {
        padding: 30px 33px 30px 30px; border-radius: 8px; overflow: hidden;
        transition: transform .3s ease, border-color .3s ease;   /* fill switches instantly, as the reference's does */
    }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: translate(-10px, -10px); }
    .zmit .zmit-services-grid .zmit-svc-card ul { margin: 0 0 22.4px; }
    .zmit .zmit-services-grid .zmit-svc-card li { padding-left: 0; }
    .zmit .zmit-services-grid .zmit-svc-card li::before {
        content: "\2022\20"; position: static; color: inherit; font: inherit;
    }
    .zmit .zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
    .zmit .zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta {
        position: absolute; left: 30px; bottom: 12px;
        height: 34px; margin: 0; padding-top: 10px; align-items: flex-start;
    }
    .zmit .zmit-services-grid .zmit-svc-cta .z-svc-more { line-height: 23.1px; }
}

/* ============================================================================
   PORTFOLIO - TABLET (768-1080) + the 1025-1200 step, MEASURED 2026-09-30 on
   the -wp reference with its own widget CSS read off the page. The reference
   gallery is the desktop owl at every width - one full-width slide, the long
   grey arrows 50px outside it, a looping thumb strip 2px under it - with
   these per-width values:
     width        slide  arrows top  thumbs  slide background
     1201+        630    350         10      center top   (desktop block)
     1025-1200    538    247         10      center top
     1024         457    247         10      left top
     881-1023     457    247          3      left top
     768-880      414    206          3      left top
   Widget inset 70 from the band edge = 40 inside our 30px container, exactly
   as on desktop; 70 above the slide; an empty owl-dots row (26.4, or 24.1
   where the root font drops to 91.2% at <=921) + 70 below the thumbs. The
   heading is 2.3em on a 1em line: 33.56px at <=921 (root 91.2%), 36.8 above,
   with no padding above it. The page script runs the loop engine at every
   width now, so the loop copies show here too.
   ============================================================================ */




/* 1025-1200 spans the tablet top end AND the desktop block's bottom end. */


/* A Structured Approach - TABLET (768-1080), owner 2026-09-30. The -wp page
   keeps two 336px columns here, which crams the copy (a 5-line heading,
   ~380px paragraphs beside the list). The owner's STRUCTURAL reference (the
   AI delivery-approach band on another page) stacks it instead: heading, copy,
   then the accordion full width underneath. Structure from that reference;
   the type and accordion styling stay this page's own -wp tablet values:
   heading 26.87/34.93, copy 18/27 with 27 between paragraphs, rows 7 apart
   with 25px summaries at 16/24 (74 tall), open copy 14/22.4 #d9dbe9. */
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-proc-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .zmit .zab-proc-copy { padding-right: 0; }
    .zmit .zab-proc-copy h2 { font-size: 26.87px; line-height: 34.93px; margin: 0 0 20px; }
    .zmit .zab-proc-copy p { font-size: 18px; line-height: 27px; margin: 0 0 27px; }
    .zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
    .zmit .zab-proc-item > summary { padding: 25px; font-size: 16px; line-height: 24px; }
    .zmit .zab-proc-q { font-size: 16px; line-height: 24px; }
    .zmit .zab-proc-a { padding: 0 20px 20px; }
    .zmit .zab-proc-a p { font-size: 14px; line-height: 22.4px; margin: 0 0 22.4px; }
}

/* Zazz vs Others - TABLET (768-1080), owner 2026-09-30. The owner's
   STRUCTURAL reference (the managed-security "Why Zazz Stands Out" band)
   is an accordion, not the three-column table: one gradient row per
   criterion, opening onto a light Zazz row (green tick) and a paler Others
   row (red cross). This page already renders that accordion for phones (the
   phone pass, modelled on it-managed-services' phone accordion), so tablets
   show the SAME component with the SAME styling instead of the table -
   phone and tablet stay one design. Content and labels are this page's own. */
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-cmp { display: none; }
    .zmit .zab-cmp-acc { display: block; }
    .zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
    .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%);
        border: 0; border-radius: 10px; margin-bottom: 10px; overflow: hidden;
    }
    .zmit .zab-cmp-acc .zab-acc-q { padding: 18px 22px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--zab-ink); border-bottom: 0; }
    .zmit .zab-cmp-acc .zab-acc-a { padding: 0; }
    .zmit .zab-cmp-acc .zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; margin: 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; }
    .zmit .zab-cmp-acc .zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
    .zmit .zab-cmp-acc .zab-acc-ico svg { display: block; width: 22px; height: 22px; }
    .zmit .zab-cmp-acc .zab-acc-row .zab-acc-label { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--zab-accent); margin: 0 0 6px; }
    .zmit .zab-cmp-acc .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin: 0; }
}

/* ============================================================================
   TABLET (768-1080) - video quote / recognized box / value cards / framework
   gap, MEASURED 2026-09-30 on the -wp reference at 768.
   Quote       the same Elementor "quotation" glyph as desktop (U+201C, 900
               70px/70px Times New Roman, #0161ff, top -20 / left -45 of the
               quote) - ours only drew it from 1081 up; author line 15.5 under
               the quote.
   Recognized  heading 300 38.65px/46.38px, broken after "Enterprise" (the
               reference has a <br> there), logos 20 under it, the CTA 40
               under them at 500 14.59px/14.59px, 20px 30px padding.
   Value       one column on the #262338 panel: 32px 25px cards divided by a
               1px white rule, the icon in a 100 x 108 box (ours was 50 wide,
               pushing every icon 25px off centre, as on desktop before), the
               title 20 under it and underlined.
   Framework   its heading sits 60 under the value panel (30 of band padding +
               30), at 600 31px/56px.
   ============================================================================ */
.zmit-rec-br { display: none; }
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-video-quote p { position: relative; margin: 0 0 15px; }
    .zmit .zab-video-quote p::before {
        content: "\201C"; position: absolute; top: -20px; left: -45px;
        display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
    }
    .zmit .zab-video-quote cite { line-height: 1px; }

    .zmit-rec-br { display: inline; }
    .zmit .zmit-recognized-copy h2 { font-size: 38.65px; font-weight: 300; line-height: 46.38px; margin: 0 0 20px; }
    .zmit .zmit-recognized-logos { margin: 0; }   /* the band's own 40 gap then puts the CTA 40 under the logos */
    .zmit .zmit-recognized-cta .z-btn { font-size: 14.59px; font-weight: 500; line-height: 14.59px; padding: 20px 30px; }

    .zmit .zab-adv .zab-adv-card { border-bottom: 1px solid #fff; }
    .zmit .zab-adv .zab-adv-ico { width: 100px; height: 108px; margin: 0 auto; }
    .zmit .zab-adv .zab-adv-card h3 { text-decoration: underline; }

    .zmit .zab-adv.z-section { padding-bottom: 30px; }
    .zmit .zab-frame h2 { font-size: 31px; font-weight: 600; line-height: 56px; }
}

/* ============================================================================
   TABLET (768-1080) - framework panels, framework -> testimonials gap, final
   band, Engineering Partner band, pre-footer. MEASURED 2026-10-01 on the -wp
   reference at 768 and 1024. The reference's root font is 91.2% (14.592px) up
   to 921px and 16px above, which is where several of its sizes step.

   Framework   stacked rows 20 apart. Closed row 100 tall: the 70px icon at
               x30, the 80px/80px letter (#c2c2c2) ending 30 from the right.
               Open row: a 90px gradient header strip (60px icon at x20, white
               80px letter ending 20 from the right), then the title + text in
               a 20px box - ours had them flush under the strip ("stuck to
               top"). The reference fixes the row at 380 with the text at the
               bottom; the owner asked for no such gap (2026-10-01), so the
               row hugs its content. Title 600 18.24px/23.712px to
               921, 24px/31.2px above, 20 over 14px/19.6px #000 text. Opens on
               hover from 768 up, like the reference.
   Gap         the last row sits 60 above the testimonials heading (ours 40);
               195 between 881 and 1024, where the reference pads it more.
   Final band  #fcfcfc, 30 inside. Heading 400 weight, the reference's own
               clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem) at its root size,
               1.3 line height, 40 over the copy; 16px/26.4px paragraphs with a
               26.4 line between them, the CTA 40 under the last one (500,
               1rem/1rem, 15px 30px, radius 8). To 880 it stacks with a
               full-width 400px cover image (radius 20) 30 under the CTA; from
               881 it is two 50% columns 30 apart, image centred on the copy.
   Engineering the gradient panel is a flex row, gap 20: copy column 60% (70%
               from 1025) with 30px padding, image column 500px basis, both
               shrinking - so at 768 the copy is 314.7 and the portrait
               358.1 x 400 at the panel's bottom-right. From 881 the portrait
               also lifts 10% above the panel. Heading 600 33.05px/42.965px,
               copy 17.16px/25.2px, CTA 600 15.38px/16px (it wraps at 768).
   Pre-footer  logo | title in one row (the logo 287px basis, both shrinking:
               133 x 30 at 768), the title 16px/16px with a 2px white rule and
               10px padding (20px / 20px padding from 881, 22px from 1025), the
               paragraph 20 under that row at 14px/19.6px; buttons 220 wide,
               capped to the column, right-aligned. Columns 55% and
               30% (24% from 1025) of the reference's box - ours is 20px
               narrower (house gutter), so they are sized off that same box
               and only the buttons sit 10px further in.
   ============================================================================ */
.zmit-insights-brand { display: contents; }

@media (min-width: 768px) and (max-width: 1080px) {
    /* ---- framework ---- */
    .zmit .zab-frame.z-section { padding-bottom: 20px; }   /* + the testimonials' own 40 = 60 */
    .zmit .zab-frame-item { cursor: pointer; }
    .zmit .zab-frame-letter { font-size: 80px; line-height: 80px; }
    .zmit .zab-frame-item:not(.is-open) .zab-frame-tab { height: 100px; padding: 0 30px; }
    /* owner 2026-10-01: NOT the reference's fixed 380 - that left a big empty
       gap under the strip. The panel hugs its content: title 20 under the
       strip, text 20 under the title, 20 at the bottom. */
    .zmit .zab-frame-item.is-open { display: flex; flex-direction: column; }
    .zmit .zab-frame-item.is-open .zab-frame-tab { flex: 0 0 auto; height: 90px; padding: 0 20px; }
    .zmit .zab-frame-item.is-open .zab-frame-ico { flex: 0 0 60px; width: 60px; height: 60px; }
    .zmit .zab-frame-item.is-open .zab-frame-ico svg { width: 30px; height: 30px; }
    .zmit .zab-frame-item.is-open .zab-frame-body { margin-top: auto; padding: 20px; }
    .zmit .zab-frame-body h3 { font-size: 18.24px; font-weight: 600; line-height: 23.712px; color: #141414; margin: 0 0 20px; }
    .zmit .zab-frame-body p { font-size: 14px; line-height: 19.6px; color: #000; }

    /* ---- final band ---- */
    /* the reference's band: 50 of margin each side, #fcfcfc only inside the 30 */
    .zmit .zmit-final.z-section { background: #fcfcfc; margin: 50px 0; padding: 30px 0; }
    .zmit .zmit-final-banner {
        display: flex; flex-direction: column; gap: 30px;
        min-height: 0; padding: 0; background: none; border-radius: 0;
    }
    .zmit .zmit-final-copy { max-width: none; padding: 0; }
    .zmit .zmit-final-copy h2 {
        font-size: calc(19.1305px + 1.0081vw); font-weight: 400; line-height: 1.3;
        color: var(--zab-ink); margin: 0 0 40px;
    }
    .zmit .zmit-final-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; max-width: none; margin: 0 0 26.4px; }
    .zmit .zmit-final-copy p:last-of-type { margin-bottom: 40px; }
    .zmit .zmit-final-copy .zab-btn {
        gap: 16px; padding: 15px 30px; border-radius: 8px;
        font-size: 14.592px; font-weight: 500; line-height: 1; color: #f2f7ff;
    }
    .zmit .zmit-final-media { width: 100%; margin: 0; }
    .zmit .zmit-final-media img {
        position: static; display: block; width: 100%; max-width: 100%; height: 400px;
        object-fit: cover; border-radius: 20px; margin: 0;
    }

    /* ---- Engineering Partner ---- */
    /* 73 + the last FAQ row's own 7px margin + the FAQ's 30 = the reference's 110 */
    .zmit .zab-intro.z-section { padding: 73px 0 80px; }
    .zmit .zab-intro-grid {
        display: flex; flex-direction: row; align-items: stretch; gap: 20px; padding: 0;
        background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
        border-radius: 5px;
    }
    .zmit .zab-intro-copy {
        flex: 0 1 60%; min-width: 0; box-sizing: border-box; padding: 30px;
        display: flex; flex-direction: column; justify-content: center; gap: 20px;
        background: transparent; border-radius: 5px;
    }
    .zmit .zab-intro-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.965px; color: #14142b; text-align: left; margin: 0; }
    .zmit .zab-intro-copy p,
    .zmit .zab-intro-copy p:last-of-type { font-size: 17.16px; font-weight: 400; line-height: 25.2px; color: #14142b; margin: 0; }
    .zmit .zab-intro-cta {
        align-self: flex-start; max-width: 100%; width: auto; box-sizing: border-box;
        gap: 16px; padding: 15px 30px; border-radius: 5px;
        font-size: 15.38px; font-weight: 600; line-height: 16px; color: #f2f7ff;
    }
    /* The reference has no Poppins 600 face, so its "600" renders as 700 and
       this label is 168.25 wide; ours is a true 600 at 162.36. The 0.27px
       tracking gives back the 5.9px, so the button is the reference's width
       (260.3 on one line) and wraps where it does - two lines at 768. */
    .zmit .zab-intro-cta > span:not(.zab-btn-ico) { letter-spacing: .27px; }
    .zmit .zab-intro-fig { flex: 0 1 500px; min-width: 0; width: auto; align-self: flex-end; margin: 0; display: block; }
    .zmit .zab-intro-fig img {
        display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 918 / 1024;
        object-fit: cover; border-radius: 0;
    }

    /* ---- pre-footer ---- */
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit .zmit-insights-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
    .zmit .zmit-insights-copy {
        flex: 0 0 calc((100% + 20px) * .55); min-width: 0;
        display: flex; flex-direction: column; gap: 20px;
    }
    .zmit .zmit-insights-brand { display: flex; align-items: center; gap: 20px; }
    .zmit .zmit-insights-brand .zmit-insights-logo {
        flex: 0 1 287px; min-width: 0; width: auto; height: auto; aspect-ratio: 287 / 64;
        margin: 0; object-fit: contain; align-self: center;
    }
    .zmit .zmit-insights-copy .zmit-insights-brand p.zmit-insights-title {
        flex: 0 1 auto; min-width: 0; max-width: none; margin: 0;
        font-size: 16px; font-weight: 400; line-height: 16px; color: #fff;
        border-left: 2px solid #fff; padding: 0 0 0 10px;
    }
    .zmit .zmit-insights-copy > p:last-child { font-size: 14px; line-height: 19.6px; max-width: none; margin: 0 0 22.4px; }
    .zmit .zmit-insights-btns {
        flex: 0 0 calc((100% + 20px) * .3); min-width: 0;
        display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
    }
    /* the reference's buttons are 220 wide (<=1200), capped to the column */
    .zmit .zmit-insights-btns a { width: 220px; max-width: 100%; box-sizing: border-box; gap: 8px; padding: 16px 30px; }
}

/* from 881: final band in two columns, the portrait lifted, the pre-footer
   title up a step */
@media (min-width: 881px) and (max-width: 1080px) {
    .zmit .zmit-final-banner { flex-direction: row; align-items: center; }
    .zmit .zmit-final-copy,
    .zmit .zmit-final-media { flex: 1 1 0; min-width: 0; }
    .zmit .zab-intro.z-section { padding: 113px 0 80px; }   /* the reference's 120, less the FAQ row's 7 */
    .zmit .zab-intro-fig { margin: -10% 0 0; }
    .zmit .zmit-insights-copy .zmit-insights-brand p.zmit-insights-title { font-size: 20px; line-height: 20px; padding-left: 20px; }
}
/* 881-1024 only: the reference pads the framework band 65 / 115 there (30 / 30
   either side of that range) and gives the testimonials a 50px margin, so its
   heading sits 148 under the value panel and the last row 195 above the
   testimonials heading - measured at 1024. 85 / 155 land both here. */
@media (min-width: 881px) and (max-width: 1024px) {
    .zmit .zab-frame.z-section { padding: 85px 0 155px; }
}
/* from 922 the reference's root is 16px again */
@media (min-width: 922px) and (max-width: 1080px) {
    .zmit .zab-frame-body h3 { font-size: 24px; line-height: 31.2px; }
    .zmit .zmit-final-copy h2 { font-size: calc(20.976px + 1.0081vw); }
    .zmit .zmit-final-copy .zab-btn { font-size: 16px; }
}
@media (min-width: 1025px) and (max-width: 1080px) {
    .zmit .zab-intro-copy { flex-basis: 70%; }
    .zmit .zmit-insights-copy .zmit-insights-brand p.zmit-insights-title { font-size: 22px; line-height: 22px; }
    .zmit .zmit-insights-copy > p:last-child { font-size: 20px; line-height: 28px; }
    .zmit .zmit-insights-btns { flex-basis: calc((100% + 20px) * .24); }
}

/* Industry icons one shade lighter - owner 2026-10-01 ("too dark", "not too
   light either"), every width. The icons are CloudFront SVGs stroked #0161ff;
   contrast(.6667) then brightness(1.2) is an exact 20% white tint
   (x -> .8x + 51), so the stroke reads #3481ff while the white tile behind it
   stays #fff. */
.zmit .zab-flip-front img { filter: contrast(.6667) brightness(1.2); }

/* Tablet quote: a little more air - owner 2026-10-01. The author line sits on
   the reference's 1px line box, which left its text 4px under the quote and
   21px above the dark Recognized box; now 12 and 31. */
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-video-quote p { margin-bottom: 23px; }
    .zmit .zab-video.z-section { padding-bottom: 40px; }
}

/* OWNER 2026-09-30 (later request): smaller hero text + shorter banner, a
   deliberate deviation from the 54px reference match above. Banner 697 -> 595
   at 1440: the compacted card now sets the row height, stays stretched, and
   keeps its ~96px overhang into the logo strip (owner: never shrink it). */
@media (min-width: 1081px) {
    .zmit .zmit-hero .zmit-hero-headline { font-size: 42px; line-height: 52px; }
    .zmit-hero .zmit-hero-sub { font-size: 15px; line-height: 24px; }
    .zmit .zmit-hero .zmit-hero-left { align-self: center; }
    .zmit .zmit-hero .zmit-form-card > h3 { margin-bottom: 20px; }
    .zmit .zmit-hero .zmit-form-card > .zmit-form-note { margin: 16px 0 20px !important; }
}

/* OWNER 2026-09-30: breathing room above the services heading. Live (and the
   0-top rule above) put the lead flush against the logo strip. */
.zmit .zmit-services.z-section { padding-top: 30px; }
@media (min-width: 1081px) { .zmit .zmit-services.z-section { padding-top: 50px; } }