/* ============================================================
   Managed IT Services for Law Firms — page-specific layer.
   21 live top-level sections. Cloned from
   css/managed-it-services-for-accounting-firms.css (the industry sub-reference).

   Loads AFTER css/it-managed-services-zazz.css.

   STRUCTURAL DELTAS vs the reference sheet, every one MEASURED on live at 1440
   (chrome-devtools, window.innerWidth === 1440 confirmed in the same call):
     - Hero banner URL swapped (nearshore-it-outsourcing … -scaled.webp,
       painted 1425x736 object-fit:fill on live).
     - Comparison: 8 rows (values carry row-count-independent). Live has NO
       mobile accordion for this band — the table's columns STACK below 1081
       instead of hiding (live's 38019f9 carries no elementor-hidden-* class).
       Cells carry live's ✔/✖ marks (.zab-cmp-mark). Cell padding 20px 20px
       (live's 30px sides fit its 452px columns; ours are 436).
     - Certifications: live is a LIGHT #e6ebf5 band (not the reference's #000):
       47px centred black h2, grey lead, six 3x2 image-boxes (134px badge left,
       24px/600 title + 14px #5e5e5e description right). Boxes 423x134,
       col gap 36 / row gap 63.
     - Trust panel: FIVE 265px cells (not 4), NO icons; h3 18px/600 centred,
       p 14px/24px #f7f7fc start-aligned; 1px #fff right hairline on EVERY cell
       (live keeps it on the last cell too — measured 1px there).
     - Stats: FOUR counters in a 2x2 (cells 395 wide, 20px gaps) — the
       CLAUDE.md 4-stat rule. Copy column 438, band #262338.
     - NEW .zab-elevate (live cfcd04b, #eff0f7): copy 658 at x30 | 50 gap |
       2x2 card grid 658 at x738 (cards 318.75, gap 20), cards transparent,
       icon 50px, title 20px/700 #141414, copy 15px/22.5px rgba(20,20,20,.7).
     - NEW .zab-empower (live 6591f9b, #fcfcfc): copy column 658 (h2 34px,
       40px drops between h2/copy/CTA, blue #0161ff 8px-radius button) |
       658x400 photo right, radius 10, vertically centred.
     - Final CTA: flat FULL-WIDTH #e9edf5 band (no gradient card): h2 48px,
       BLACK square button (#000, radius 0), 500x577 figure absolute right
       whose top overhangs the band by ~118px (band margin-top 130 on live).
     - Video: live's player is 860x484 LEFT with a 455 copy column (the
       reference's 820x461 grid is re-proportioned).
     - Articles heading: 39px/400 on this page (not 29/300).
   Section counts that did NOT change: FAQ 11 items split 6 / 5, services
   12 cards 4-up, problems 8 checks 4/4, steps 3, stories/articles 3.

   Owner-approved deviations from live are carried from the reference and
   tagged inline (hero headline 42px not live's 54, contact card 620 wide,
   stat number left-aligned, marquee chips bounded on both axes, 1400px
   container, mobile content reduction). Deliberate; do not "fix" them back.

   Split rule: a given CSS property for a given selector lives in exactly one
   of the two sheets, never both.
   ============================================================ */

/* ------------------------------------------------------------
   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 panel + stats band */
}

/* Owner decision 2026-08-26: the Family A centred box (shared .z-container =
   max-width 1400px, margin 0 auto, padding 0 30px) even though live runs its
   boxed containers at 1365/x30. Do NOT reintroduce max-width: none. */

/* ============================================================
   1. HERO — the shared component's approved geometry carried from the
   reference; only the artwork is this page's. Live paints the banner as a
   plain <img> 1425x736 with object-fit:fill (stretched, not cropped) —
   center/100% 100% is the background equivalent.
   ============================================================ */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/08/07171643/nearshore-it-outsourcing-services-for-agile-scalable-delivery-1-scaled.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
    /* 757 / 100 / 508 of the 1365 box, as percentages. */
    .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; }
    .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; }
    .zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px;
        background: #f2f7ff; border: 0;
    }
    .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; }
    /* Desktop-only 36px pill; the 46px mobile touch target is left intact. */
    .zmit-hero .zmit-hero-cta-btn { min-height: 42px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* Live's white hero card at 1440: t140 h792 w508 l887, radius 8. It is
       stretched to the row and overhangs the banner into the logo strip
       (hero 861 tall, strip top 836) — the reference's approved -44/-95.55
       composition reproduces that here. */
    .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;
        /* Task rule: hero form card min-height 612, flex-centred >=1081. */
        min-height: 612px; display: flex; flex-direction: column; justify-content: center;
    }
    .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 — bare 30px chevron, no disc, bobbing (reference-approved). */
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 18px;
    width: 30px; height: 30px; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .66);
    animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }

/* Trust strip — reference-approved: 70px chip row, marquee speed synced by JS.
   Owner request 2026-08-26: every marquee logo bounded on BOTH axes. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; }

/* ============================================================
   SHARED PAGE BUTTON — label first, then arrow (live's own order).
   ============================================================ */
.zmit .zab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15.38px; font-weight: 600; line-height: 16px;
    color: #fcfcfc; background: var(--zab-accent);
    border-radius: 5px; padding: 15px 30px; text-decoration: none;
    transition: background .2s ease;
}
.zmit .zab-btn:hover { background: #141414; color: #fcfcfc; }
.zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; }
.zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; }
.zmit .zab-btn-ico svg path { fill: currentColor; }
/* live d2ae56c problems CTA: #0161ff on #f2f7ff pill, 13px 35px, 8px radius, 16px */
.zmit .zab-problems-cta .zab-btn {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 16px; line-height: 16px; font-weight: 500;
    padding: 13px 35px; border-radius: 8px; gap: 20px;
}
.zmit .zab-problems-cta .zab-btn:hover { background: #e2ecff; color: var(--zab-accent); }
/* steps CTA: accent pill */
.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; }
/* stats CTA: live c1a0cd5 button is #0161ff on #f2f7ff, 13px 35px, 8px radius, 16px */
.zmit .zab-btn-light {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 16px; line-height: 16px; font-weight: 500;
    padding: 13px 35px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* empower CTA: live 6591f9b button #0161ff, #f2f7ff label, 8px radius, 15px 30px */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; }
/* final CTA: live 2d1bfe6 button is BLACK and SQUARE (radius 0), 15px 30px */
.zmit .zab-btn-final { background: #000; color: #fff; border-radius: 0; }
.zmit .zab-btn-final:hover { background: var(--zab-accent); color: #fff; }

/* ============================================================
   L03 SERVICES — 12 cards, FOUR 318.75px columns / 30px gap (live's own uc
   grid at 1440: items 334x281 in a 1425 wrap; the house 1340 box gives 312s).
   Card internals + hover carried from the measured industry-template values:
   border #eff0f7 -> #0161ff, fill #eff0f7 -> #d5e0f3, CTA none -> block,
   transform NONE (industry template — no lift).
   ============================================================ */
.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: 30px; }
.zmit-services-grid .zmit-svc-card {
    /* Flex COLUMN so the hover CTA pins to the card bottom with margin-top:auto
       (live's own mechanism); display:block would tie the CTA's y to the bullet
       count and break row alignment. */
    display: flex;
    flex-direction: column;
    background: var(--zab-fill);
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 30px;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; transition: color .2s ease; }
/* NO list-style and NO left padding: the shared sheet draws the bullet itself
   (li::before over li { padding-left: 18px }) — adding a native disc gives TWO
   dots per bullet. */
.zmit-services-grid .zmit-svc-card ul { margin: 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; }

/* Industry-template card hover (measured with a real pointer): border+fill only,
   NO transform. :focus-within beside :hover — the overlay anchor is the only
   tab stop, keyboard users must see the CTA appear. */
/* SS1 hover-lift + no-reflow CTA (owner request 2026-09-23), replicating the shipped
   backend-outsourcing-services reference. Linked cards lift translate(-10px,-10px) on
   hover; recolor unchanged. Intentionally deviates from the older "no lift" note above
   - this is a deliberate owner choice, do NOT revert it to match live. */
.zmit-services-grid .zmit-svc-card.has-link { cursor: pointer; transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { border-color: #0161ff; background: #d5e0f3; transform: translate(-10px, -10px); }
/* CTA box ALWAYS reserved (visibility, never display:none) + pinned to the card bottom,
   so revealing it on hover changes NO card height and no sibling shifts - fixes the
   fast-hover reflow. Matches backend-outsourcing-services. */
.zmit-services-grid .zmit-svc-card.has-link .zmit-svc-cta { visibility: hidden; display: flex; align-items: center; height: 34px; margin-top: auto; padding-top: 10px; }
.zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta { visibility: visible; }
.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 — pins every CTA to the card bottom. */
    display: flex; align-items: center; height: 34px; margin-top: auto; padding-top: 10px;
}
.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; }

/* ============================================================
   L04 KEY CHALLENGES — white band, heading 33.05px/600 centred, two 50%
   check-list columns, answer 24px/400 centred, pill CTA.
   ============================================================ */
.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; }

/* ============================================================
   L05 VIDEO + COPY BAND — live eda5149 at 1440: video 860x484 at x30 |
   50 gap | copy 455 at x940. h2 30px/600/39px #141414.
   ============================================================ */
.zmit .zab-video.z-section { padding: 20px 0 30px; }
.zab-video-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zab-video-media { margin: 0; }
.zab-video-media video {
    display: block; width: 100%; height: auto; aspect-ratio: 860 / 484;
    object-fit: cover; background: #14142b;
}
.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: 860 video | 50 gap | 455 copy */
    .zab-video-grid { grid-template-columns: 860fr 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; }
}

/* ============================================================
   L06 BOOK A FREE CONSULTATION — centred heading + copy + meetings well.
   ============================================================ */
.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; }

/* ============================================================
   L07 COMPARISON HEADING — its own container above the table; live 36.8px,
   weight 400, LEFT aligned.
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 0 0 15px; }
.zmit .zab-cmp-head h2 { font-size: 33.05px; font-weight: 400; line-height: 43px; color: var(--zab-ink); text-align: left; margin: 0; }

/* ============================================================
   L07 COMPARISON TABLE — 3 columns, 15px gap, 10px radius; heads 24px/600;
   body cells 16px/500 #06001c, 100px tall, centred. EIGHT rows on this page.
   Live has NO mobile accordion for this band, so the table stays in the DOM
   at every width and its columns stack below 1081.
   Cell padding 20px 20px (not the reference's 30px sides): live's columns are
   452 wide, ours 436 — the narrower side padding keeps live's 2-line cells
   from wrapping to 3 and overflowing the fixed 100px row.
   ============================================================ */
.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 20px; height: 100px;
    display: flex; align-items: center;
    font-size: 16px; font-weight: 500; line-height: 23px; color: #06001c;
    border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* live's own ✔/✖ marks: green/red, bold, inline before the copy */
.zab-cmp-mark { font-weight: 700; font-style: normal; }
.zab-cmp-mark.yes { color: green; }
.zab-cmp-mark.no { color: red; }
/* Only the FIRST body cell of each column is rounded and carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Key Factor column: live's 3-layer gradient (70% white veil over two blue
   gradients), cells transparent so it shows. NEVER flatten (CLAUDE.md §7). */
.zab-cmp-col-0 {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
        linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%),
        linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zab-cmp-col-0 .zab-cmp-cell { background: transparent; }
.zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* Live's alternate-row stripes, written row-count-INDEPENDENT (nth-of-type(even),
   never an enumerated list — an enumerated list silently drops off the bottom
   rows of a longer table; this page has 8). */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; }
/* Zazz-column hairline on EVERY row — row-count-independent house rule. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
/* Below the desktop grid the three columns stack (live's own behaviour — this
   band has no hidden-* classes and no accordion twin). Fixed row heights are a
   3-column alignment device; released when stacked. */
@media (max-width: 1080px) {
    .zab-cmp-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit .zab-cmp-cell { height: auto; min-height: 0; }
    .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; }
}

/* ============================================================
   L08 CERTIFICATIONS — live d712b95: LIGHT band #e6ebf5 (612 tall), centred
   47px black h2, centred grey lead (600 wide), then six image-boxes in a
   3x2 grid: 134px badge (natural aspect, gap'd grid — never gap:0 +
   object-fit:fill), title 24px/600 #020101, desc 14px #5e5e5e.
   ============================================================ */
.zmit .zab-certified.z-section { background: #e6ebf5; padding: 60px 0 70px; }
.zmit .zab-certified h2 { font-size: 47px; font-weight: 600; line-height: 1.4; color: #000; text-align: center; margin: 0; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26px; color: #5e5e5e; text-align: center; max-width: 600px; margin: 5px auto 0; }
.zab-certified-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 63px 36px; margin-top: 93px; align-items: center; }
.zab-cert-box { display: flex; align-items: center; gap: 24px; }
.zab-cert-box img { width: 134px; height: 134px; flex: 0 0 134px; object-fit: contain; display: block; }
.zmit .zab-cert-box h3 { font-size: 24px; font-weight: 600; line-height: 1.3; color: #020101; margin: 0 0 6px; }
.zmit .zab-cert-box p { font-size: 14px; font-weight: 400; line-height: 1.5; color: #5e5e5e; margin: 0; }

/* ============================================================
   L09 STRUCTURED PROCESS — #f2f7ff band, waves art, 3 phase cards lifted
   -140 over it, accent CTA (reference-approved geometry, same artwork).
   ============================================================ */
.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; }

/* ============================================================
   L10 RECOGNIZED / TRUSTED — dark #141414 box, light copy, review logos,
   white pill CTA (same jet-engine component as the reference page).
   ============================================================ */
.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; }

/* ============================================================
   L11 WHY LEADING LAW FIRMS RELY ON US — white section; eyebrow 34.7px/400;
   panel #262338, radius 15, FIVE 265px cells 10px apart, cells 32px 25px,
   NO icons on this page. h3 18px/600 #f7f7fc CENTRED (measured), p 14px/24px
   #f7f7fc start-aligned. Live keeps the 1px #fff right hairline on EVERY cell
   including the last (measured 1px there) — carried as-is.
   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(5, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 15px;
}
.zab-trust-cell {
    padding: 32px 25px;
    border-right: 1px solid #fff;
}
.zmit .zab-trust-cell h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: #f7f7fc; text-align: center; text-decoration: underline; margin: 0 0 14px; }
.zmit .zab-trust-cell p { font-size: 14px; font-weight: 400; line-height: 24px; color: #f7f7fc; margin: 0; }

/* ============================================================
   L12 TESTIMONIALS — 11 slides; heading 34px/300 with the em dash.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 40px; }
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
    min-height: 352px;
}
.zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; }

/* ============================================================
   L13 STATS — #262338 band; copy 438 | counters. FOUR counters in a 2x2
   (live: cells 395 wide at x518/x933, 20px gaps) — the CLAUDE.md 4-stat rule:
   a 4-stat page left on the 3-col default renders a broken 3+1.
   Number 57px/600 #76aaff ON TOP; label 14px/21px #fcfcfc below.
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
.zmit-stats { background: var(--zab-dark); }
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 60px 0; }
.zmit-stats-copy { max-width: none; }
.zmit-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; }
    /* FOUR counters, 2x2 — live's own grid on this page. */
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
}
.zmit-stat { display: flex; flex-direction: column; }
.zmit-stat p { font-size: 14px; font-weight: 400; line-height: 21px; color: #fcfcfc; margin: 0; }
.zmit-stat .big {
    /* Owner request 2026-08-31: the stat NUMBER is left-aligned so it shares a
       left edge with its label. Live centres the number inside the same column
       while the label is start-aligned. Deliberate deviation from live — do
       NOT "fix" this back to center. */
    order: -1; text-align: left;
    font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}

/* ============================================================
   L14 ELEVATE — NEW band (live cfcd04b measured at 1440): #eff0f7, 30px
   vertical padding, TWO columns 658 | 50 gap | 658; right column a 2x2 card
   grid (318.75px cells, 20px gap), cards TRANSPARENT (the band is the fill),
   20px padding, 50px icon, title 20px/700 #141414, copy 15px/22.5px
   rgba(20,20,20,.7). Copy column: h2 34px then 18px/27px paragraphs.
   Column structure MEASURED, not assumed (sideBySide true at 1440).
   ============================================================ */
.zmit .zab-elevate.z-section { background: var(--zab-fill); padding: 30px 0; }
.zab-elevate-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-elevate-copy h2 { font-size: 34px; font-weight: 400; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 24px; }
.zmit .zab-elevate-copy p { font-size: 18px; font-weight: 400; line-height: 27px; color: var(--zab-ink); margin: 0 0 24px; }
.zmit .zab-elevate-copy p:last-child { margin-bottom: 0; }
.zab-elevate-copy a { color: var(--zab-accent); }
.zab-elevate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; align-content: start; }
.zab-elevate-card { padding: 20px; }
.zab-elevate-ico { display: block; margin-bottom: 16px; }
.zab-elevate-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-elevate-card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #141414; margin: 0 0 12px; }
.zmit .zab-elevate-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: var(--zab-body); margin: 0; }
.zab-elevate-card a { color: var(--zab-accent); }
@media (min-width: 1081px) {
    .zab-elevate-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
}

/* ============================================================
   L15 SUCCESS STORIES — card + 50px left-aligned brand-logo treatment
   (approved Family A rule).
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 23px 0; }
.zmit-stories h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; 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; }

/* ============================================================
   L16 ARTICLES — heading 39px/400 on THIS page (measured); cards are
   image + date + title, NO excerpt (owner ruling).
   ============================================================ */
.zmit .zmit-articles.z-section { padding: 30px 0; }
.zmit-articles-head { margin-bottom: 29px; }
.zmit-articles-head h2 { font-size: 39px; font-weight: 400; line-height: 1.4; 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: 24px; font-weight: 600; line-height: 28.8px; color: var(--zab-ink); margin: 0; transition: color .2s ease; }

/* ============================================================
   L17 EMPOWER — NEW band (live 6591f9b measured at 1440): near-white #fcfcfc,
   TWO columns 658 | 50 | 658. Left: h2 34px (88 tall), 40px drop, 16px/26.4px
   copy, 40px drop, accent button. Right: 658x400 photo, radius 10, cover,
   vertically centred in the column. Column structure MEASURED (sideBySide).
   ============================================================ */
.zmit .zab-empower.z-section { background: #fcfcfc; padding: 0 0 30px; }
.zab-empower-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-empower-copy h2 { font-size: 34px; font-weight: 400; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 40px; }
.zmit .zab-empower-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 26px; }
.zab-empower-copy a { color: var(--zab-accent); }
.zmit .zab-empower-copy .zab-btn { margin-top: 14px; }
.zab-empower-media img { display: block; width: 100%; height: auto; aspect-ratio: 658 / 400; object-fit: cover; border-radius: 10px; }
@media (min-width: 1081px) {
    .zab-empower-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
}

/* ============================================================
   L18 FAQ — #eff0f7 band, 30px padding, two 655px columns split 6 / 5.
   NEVER a two-value padding shorthand here (it zeroes the shared 22px sides).
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 30px 0; }
.zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 400; 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; }
.zmit-faq-list { column-gap: 30px; padding-right: 25px; }
/* Live ships two explicit accordion widgets split 6 / 5; the forced break
   reproduces that split. Gated above the phone breakpoint: with column-count:1
   a forced break would create a second column. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ============================================================
   L19 FINAL CTA — live 2d1bfe6 measured at 1440: flat FULL-WIDTH #e9edf5 band
   (no gradient, no rounded card — the reference's gradient banner is WRONG
   here), margin-top 130, 10px vertical padding, min-height ~459. Copy column
   658 at x50 (20px inset inside the box): h2 48px/600, p 17.16px, BLACK
   square button. Figure 500x577 absolute right, bottom 10, its top
   overhanging the band by ~118px — which is what the 130px top margin is for.
   ============================================================ */
.zmit .zmit-final.z-section { margin: 130px 0 0; padding: 0; background: #e9edf5; }
.zmit-final-banner {
    background: none;
    border-radius: 0;
    /* vertical padding must stay 0: live's band is exactly the figure's
       contribution (479px) and min-height already holds the copy. */
    padding: 0 20px;
    min-height: 459px;
    display: flex;
    align-items: center;
}
.zmit-final-copy { max-width: 658px; }
.zmit-final-copy h2 { font-size: 48px; 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: 658px; margin: 0 0 26px; }
/* The SHARED sheet absolutely positions this figure for the REFERENCE band
   (position:absolute; right:56px; bottom:0; height:320px). This page's band is a
   two-column grid, so that MUST be reset here - otherwise the image leaves its
   cell (cell collapses to 0 height) and covers the copy. Live at 1440: static,
   500px wide at natural height, 108px above the section top, bottom 10px inside. */
.zmit-final-media { align-self: end; }
.zmit-final-media img {
    position: static; right: auto; bottom: auto;
    display: block; width: 500px; max-width: none; height: auto;
    /* negative top margin = live's overhang; keeps the band at live's height */
    margin: -108px 0 10px auto; object-fit: contain;
}

/* ============================================================
   L20 REQUEST A CONSULTATION — photo-backed band, white 620px form card
   (owner-approved narrower card, no dead space).
   ============================================================ */
.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; }
.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; }

/* ============================================================
   L21 PRE-FOOTER BAND — #000, logo + bordered title + copy | two buttons
   (reference-approved geometry; owner-approved no-dead-space deviation).
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
.zmit-insights-copy p.zmit-insights-title { font-weight: 400; border-left: 2px solid #fff; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-weight: 400; color: #fff; }
.zmit-insights-btns a {
    background: #fff; color: #000; border: 1px solid #fff; border-radius: 5px;
    font-size: 16px; font-weight: 500; line-height: 24px; min-width: 0; justify-content: center;
}
.zmit-insights-btns a:last-child { background: transparent; color: #fff; }
.zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; }

@media (min-width: 1081px) {
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 225px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 50px; width: 225px; object-fit: contain; object-position: left center; }
    .zmit-insights-copy p.zmit-insights-title {
        font-size: 28px; line-height: 34px;
        padding-left: 20px; margin-left: 0; max-width: none;
    }
    .zmit-insights-copy p:not(.zmit-insights-title) {
        /* Owner request 2026-08-26: no dead space under this band. */
        font-size: 20px; line-height: 28px; max-width: 770px; margin: 0;
    }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { padding: 16px 30px; width: 280px; }
}

/* ============================================================
   TABLET (<=1080)
   ============================================================ */
@media (max-width: 1080px) {
    .zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
    .zmit .zab-problems-head,
    .zmit .zab-steps h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-certified h2 { font-size: 30px; line-height: 1.3; }
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
    .zmit .zab-problems-answer { font-size: 19px; line-height: 1.6; }
    .zab-problems-cols { grid-template-columns: 1fr; gap: 0; }
    .zab-tick-text { font-size: 16px; line-height: 26px; }
    .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-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-elevate-copy p { font-size: 16px; line-height: 25px; }
    .zmit-articles-head h2 { font-size: 30px; }
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .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; }
    /* Final band stacked: figure sits under the copy, no overhang. */
    .zmit .zmit-final.z-section { margin: 40px 0 0; padding: 0; }
    .zmit-final-banner { min-height: 0; padding: 36px 32px 0; display: block; }
    .zmit-final-copy { max-width: 100%; }
    .zmit-final-copy h2 { font-size: 32px; }
    .zmit-final-media img { position: static; width: 280px; height: auto; margin: 16px auto 0; }
    .zmit-hero-left { padding-bottom: 0; }
    .zmit-testi-card { min-height: 0; }
}

@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .zab-elevate-cards { grid-template-columns: repeat(2, 1fr); }
    /* The meetings widget grows its own iframe in the stacked layout. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* ============================================================
   PHONE (<=680)
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section  { padding: 20px 0; }
    .zmit-services-grid .zmit-svc-card { padding: 26px; }
    .zmit .zab-problems.z-section   { padding: 40px 0; }
    .zmit .zab-cmp.z-section        { padding: 0 0 40px; }
    .zmit .zab-certified.z-section  { padding: 48px 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 40px; }
    .zmit .zmit-stories.z-section   { padding: 8px 0; }
    .zmit .zmit-articles.z-section  { padding: 48px 0; }
    .zmit .zab-elevate.z-section    { padding: 24px 0; }
    .zmit .zab-empower.z-section    { padding: 0 0 24px; }
    .zmit .zmit-stats.z-section     { margin: 20px 0; padding: 40px 0; }
    .zmit .zmit-testi.z-section     { padding: 20px 0; }
    .zmit .zmit-faq.z-section       { padding: 40px 0; }
    .zmit .zmit-contact.z-section   { padding: 40px 0; }
    .zmit .zmit-insights.z-section  { padding: 40px 0; }

    .zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems-head,
    .zmit .zab-cmp-head h2,
    .zmit .zab-steps h2 { font-size: 24px; line-height: 32px; }
    .zmit .zab-certified h2 { font-size: 24px; line-height: 32px; }
    .zab-certified-badges { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
    .zab-cert-box img { width: 100px; height: 100px; flex-basis: 100px; }
    .zmit .zab-cert-box h3 { font-size: 20px; }
    .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; }
    .zab-trust-cell { padding: 24px 20px; }
    .zmit .zab-trust-cell h3 { font-size: 16px; }
    .zmit .zab-trust-cell p { font-size: 14px; line-height: 23px; }
    .zmit .zab-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 24px; line-height: 32px; }
    .zab-elevate-cards { grid-template-columns: 1fr; gap: 20px; }
    .zab-elevate-card { padding: 16px 0; }
    .zmit-articles-head h2 { font-size: 24px; }
    /* This sheet loads after the shared one — undo the fixed desktop columns. */
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
    .zmit-stats-grid { grid-template-columns: 1fr; gap: 24px; }
    .zmit-story-img img { height: 240px; }
    .zmit-article-img img { height: 240px; }
    .zmit .zmit-article h3 { font-size: 18px; line-height: 26px; }
    .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-copy h2 { font-size: 26px; }
    .zmit-final-media img { width: 260px; height: auto; max-height: 320px; }
    .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; }

    /* Hero type: tighter on phones (owner mobile optimisation) */
    .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; }

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

@media (max-width: 1080px) and (min-width: 681px) {
    /* Live keeps the hero headline larger at 768 (reference-approved value). */
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-hero-grid { padding-bottom: 114px; }
    .zmit .zmit-bookcal.z-section { padding: 30px 0 27px; }
    /* Problems stays two-up at 768 (live's own tablet layout). */
    .zab-problems-cols { grid-template-columns: 1fr 1fr; gap: 0 40px; padding-bottom: 20px; }
    .zmit .zab-problems-head { font-size: 31px; line-height: 40.3px; }
    .zmit .zab-problems-answer { font-size: 22px; line-height: 37.4px; }
    /* Steps stay three-up over the waves at 768. */
    .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: 20px 10px; }
    .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-recognized-band { grid-template-columns: 1fr; gap: 24px; padding: 60px 26px; }
    .zmit .zmit-recognized-copy h2 { font-size: 24px; line-height: 32px; }
    .zab-trust-cell { padding: 43px 25px; }
    .zmit .zmit-articles.z-section { padding: 25px 0; }
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
    .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; }
    .zmit-final-media img { width: 363px; height: auto; }
}

@media (max-width: 680px) {
    .zmit .zab-steps.z-section { padding: 0 0 20px; }
    .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; }
    .zmit-stats-copy h3 { font-size: 20px; line-height: 29.7px; margin-bottom: 20px; }
    .zmit-recognized-band { padding: 46px 26px; }
    .zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
    .zmit-hero-grid { padding-bottom: 14px; }
    .zmit .zmit-bookcal.z-section { padding: 0; }
}

/* 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) {
    .zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
    .zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
    .zmit-stories .zmit-story .body p { display: none; }
    .zab-trust-cell p {
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Review logos: one even row of three */
    .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 */
    .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; }
}

/* ============================================================
   375 RECOGNITION-BAND OVERFLOW FIX
   The shared sheet pins this CTA to `white-space: nowrap`; its ~395px
   min-content blows the band's 1fr track at 375 (band is only 315 wide).
   body{overflow-x:hidden} masks it from scrollWidth - measure min-content
   or screenshot. See CLAUDE.md.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
}

/* Video-quote mark, desktop pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. Mark only - the
   quote text, author line and spacing are untouched. */
@media (min-width: 1080.02px) {
    .zmit .zab-video-quote { position: relative; }
    .zmit .zab-video-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -5px;
    }
}

/* Video-quote mark, tablet pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. Mark only - the
   quote text, author line and spacing are untouched. */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-video-quote { position: relative; }
    .zmit .zab-video-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -5px;
    }
}

/* Video-quote mark, mobile pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. On phones the 20px
   indent + 2px left bar is replaced by a 40px indent that holds the mark. */
@media (max-width: 680.98px) {
    .zmit .zab-video-quote { position: relative; padding-left: 40px; border-left: 0; }
    .zmit .zab-video-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -5px;
    }
}

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

/* ---------------------------------------------------------------------------
   OWNER FIX PASS (2026-10-13). Placed last so it wins over the rules above.
   --------------------------------------------------------------------------- */

/* Video thumbnail: Law-Firm-Page-1-scaled.webp (2560x1418) carries a 54px grey
   strip ABOVE the brown panel, so the thumbnail showed an empty band along its
   top. The box is reshaped to the strip-free frame (2560 x 1364) and anchored
   to the bottom so the brown panel runs to the top edge (same fix as
   managed-it-services-for-financial-industry). */
.zmit .zab-video-media video { aspect-ratio: 2560 / 1364; object-fit: cover; object-position: 50% 100%; }

/* Compliance badges: the managed-security-service-provider tile (owner's
   reference) - each badge + copy on a WHITE tile, 24px 12px padding, 20px badge
   to copy, 179 min height, tiles 15 x 12 apart. */
.zab-certified-badges { gap: 15px 12px; align-items: stretch; }
.zab-cert-box {
    background: #fff; border-radius: 0; padding: 24px 12px; min-height: 179px; gap: 20px;
}
.zmit .zab-cert-box h3 { line-height: 36px; margin: 0 0 2px; }
.zmit .zab-cert-box p { line-height: 22px; }
@media (min-width: 1081px) { .zab-certified-badges { margin-top: 52px; } }
@media (max-width: 680px) { .zab-certified-badges { gap: 12px; } }

/* Blue CTAs turned BLACK on hover (page-wide .zab-btn:hover #141414): the
   video band's and the "Empower" band's. Hover -> darker blue #0a4fd0,
   label #f2f7ff, as on the other industry pages. */
.zmit .zab-video-copy .zab-btn:hover,
.zmit .zab-video-copy .zab-btn:focus-visible,
.zmit .zab-empower .zab-btn:hover,
.zmit .zab-empower .zab-btn:focus-visible { background: #0a4fd0; color: #f2f7ff; }

/* Final band CTA = managed-it-services-for-financial-industry (owner's
   reference, 2026-10-13): black, square, hover #262338 (it went to the site
   blue on hover here). */
.zmit .zab-btn-final { background: #000; color: #fcfcfc; border-radius: 0; }
.zmit .zab-btn-final:hover,
.zmit .zab-btn-final:focus-visible { background: #262338; color: #fcfcfc; }

/* Consultant (final) band, >=1081 = the financial-industry band: a CONTAINED
   #e9edf5 box with 10px corners inside the 1340 container (was full-bleed
   colour across the whole viewport), 0 60px padding, copy column 570 wide
   padded 50 / 0 / 50 / 50, lead capped at 430, figure bottom-flush on the
   right overhanging the box top. Tablet/phone keep this page's own layout. */
@media (min-width: 1081px) {
    .zmit .zmit-final.z-section { background: transparent; }
    .zmit-final-banner {
        background: #e9edf5; border-radius: 10px; padding: 0 60px; min-height: 0;
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;
    }
    .zmit-final-copy { max-width: 570px; padding: 50px 0 50px 50px; }
    .zmit-final-copy p { max-width: 430px; }
    .zmit-final-media img { margin: -108px 0 0 auto; }
}

/* Dark 5-card panel (>=1081): titles run 2-3 lines, so the descriptions began
   at two heights (95 / 119). Cells share subgrid rows (title, copy): every
   title starts on one line and every description starts on one line. */
@media (min-width: 1081px) {
    .zab-trust-panel { grid-template-rows: auto 1fr; }
    .zmit .zab-trust-cell { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

/* Consultant (final) band, TABLET + PHONE = managed-it-services-for-financial-
   industry (owner, 2026-10-13: "tablet and phone also"). The band is the same
   contained #e9edf5 card with 10px corners (was full-bleed colour); inside it
   the financial page's own tablet (copy left / photo right) and phone
   (stacked, centred, full-width black button, photo on the card bottom) rules,
   copied verbatim below. */
@media (max-width: 1080px) {
    .zmit .zmit-final.z-section { background: transparent; }
    .zmit .zmit-final .zmit-final-banner { background: #e9edf5; border-radius: 10px; overflow: hidden; min-height: 0; }
}
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    .zmit .zmit-final .zmit-final-banner {
        display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;
        gap: 20px; padding: 0;
    }
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy {
        flex: 0 1 52%; min-width: 0; max-width: none; box-sizing: border-box;
        padding: 60px 0 55px 25px; display: flex; flex-direction: column; justify-content: center;
    }
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy h2 { font-size: 24px; line-height: 31.2px; margin: 0 0 16px; }
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy p { font-size: 17.16px; line-height: 25.2px; max-width: none; margin: 0 0 20px; }
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy .zab-btn {
        align-self: flex-start; width: 320px; max-width: 100%; min-height: 46px;
        justify-content: center; font-size: 15.38px;
    }
    .zmit .zmit-final .zmit-final-banner .zmit-final-media { flex: 0 1 48%; min-width: 0; align-self: flex-end; margin: 0 20px 0 0; }
    .zmit .zmit-final .zmit-final-banner .zmit-final-media img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
}
@media (min-width: 1024px) and (max-width: 1080px) {
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy { padding: 65px 0 60px 55px; }
    .zmit .zmit-final .zmit-final-banner .zmit-final-copy h2 { font-size: 30px; line-height: 39px; }
    .zmit .zmit-final .zmit-final-banner .zmit-final-media { margin-right: 50px; }
}

/* PHONE (<=767): stacked and CENTRED like -wp - h2 24px/31.2 and text
   14px/25.2 centred, copy 55px from the card top and 20px in; the black button
   runs the full card width (46px tall, 13px label); the photo runs the full
   card width 10px under the button and sits on the card's bottom edge. */
@media (max-width: 767.98px) {
    .zmit .zmit-final .zmit-final-banner { display: block; padding: 0; }
    .zmit .zmit-final .zmit-final-copy { max-width: 100%; padding: 55px 20px 0; text-align: center; }
    .zmit .zmit-final .zmit-final-copy h2 { font-size: 24px; line-height: 31.2px; margin: 0 0 16px; text-align: center; }
    .zmit .zmit-final .zmit-final-copy p { font-size: 14px; line-height: 25.2px; margin: 0 0 20px; text-align: center; }
    .zmit .zmit-final .zmit-final-copy .zab-btn {
        display: flex; width: 100%; min-height: 46px; justify-content: center; font-size: 13px;
    }
    /* full card width on a phone; capped at -wp's 389px (x400) on wider phones, centred */
    .zmit .zmit-final .zmit-final-media img { display: block; width: 100%; max-width: 389px; height: auto; margin: 10px auto 0; }
}

/* Video band copy (>=1081), reference layout (financial-industry): copy
   top-aligned with the video but starting 50px below its top edge, then 40px
   heading -> button and 40px button -> quote (was flush with the video top). */
@media (min-width: 1081px) {
    .zab-video-grid { align-items: start; }
    .zab-video-copy { padding-top: 50px; }
    .zab-video-copy h2 { margin-bottom: 40px; }
}

/* Process band ("Our Structured IT Management Process for Law Firms"), PHONE:
   its top padding was 0, so the heading sat on the band's top edge. 30px, as
   on tablet. This section only. */
@media (max-width: 680px) {
    .zmit .zab-steps.z-section { padding-top: 30px; }
}

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

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

/* ===== Pre-footer phone = WP (owner 2026-10-21). Live kept the desktop two-column grid
   on phones (copy squeezed to 159px beside a 153px button column that overflowed at 320).
   WP stacks: copy, then two full-width 58px buttons; Subscribe outlined. Page-local. ===== */
@media (max-width: 680px) {
    .zmit .zmit-insights .zmit-insights-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
    .zmit .zmit-insights .zmit-insights-btns { flex-direction: column; flex-wrap: nowrap; gap: 20px; }
    .zmit .zmit-insights .zmit-insights-btns a {
        flex: none; width: 100%; min-width: 0; height: 58px; box-sizing: border-box; padding: 16px 30px;
        border-width: 1px; border-style: solid; border-radius: 5px; font-size: 16px; line-height: 24px; font-weight: 500;
    }
    .zmit .zmit-insights .zmit-insights-btns a:not(:first-child) { background: transparent; border-color: #fff; color: #fff; }
    .zmit .zmit-insights .zmit-insights-btns a:not(:first-child):hover,
    .zmit .zmit-insights .zmit-insights-btns a:not(:first-child):focus-visible { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
}

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

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