is 28px/400/28px and its two lines make the 56px row that sets the whole first row's height. */ 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. */ font-size: 20px; line-height: 28px; max-width: 770px; margin: 0; } .zmit-insights-btns { gap: 20px; } .zmit-insights-btns a { padding: 16px 30px; width: 280px; } } /* ============================================================ TABLET (<= 1080) ============================================================ */ @media (max-width: 1080px) { .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; } .zmit-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* The SHARED sheet never stacks .zmit-stats-layout, so without this the copy | counters row stays 2-col and the counter column overflows the viewport at 375. */ .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; } .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; } .zmit .zab-certified h2 { font-size: 34px; line-height: 1.3; } .zab-certified-badges { grid-template-columns: repeat(2, 1fr); } .zmit .zab-nist h2 { font-size: 30px; line-height: 1.3; } .zmit .zab-proc-copy h2 { font-size: 25px; line-height: 1.3; } .zmit .zab-elevate-copy h2, .zmit .zab-empower-copy h2 { font-size: 27px; line-height: 1.3; } .zmit-testi-card { padding: 40px; } .zmit-final-banner { flex-direction: column; align-items: flex-start; padding: 0; } .zmit-final-media { align-self: center; } .zmit-final-media img { max-width: 400px; } /* Live's recognition band at 768: the inherited 36px gap wraps the logo row and inflates the band. Kill the column gap, give it a row-gap. */ .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; } } /* ============================================================ PHONE (<= 680) ============================================================ */ @media (max-width: 680px) { .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; } .zmit-services-grid { grid-template-columns: 1fr; } .zmit .zmit-services-head h2.z-eyebrow { font-size: 14px; } .zmit .zab-svc-lead { font-size: 24px; line-height: 1.3; } .zmit .zab-cmp-head h2 { font-size: 22px; } .zmit .zab-certified.z-section { padding: 40px 0; } .zmit .zab-certified h2 { font-size: 26px; } .zab-certified-badges { grid-template-columns: 1fr; margin-top: 28px; } .zab-cert-box { min-height: 0; } .zmit .zab-nist h2 { font-size: 22px; line-height: 1.3; } .zab-nist-letter { font-size: 60px; line-height: 60px; } .zmit .zab-proc-copy h2 { font-size: 22px; } .zmit .zab-elevate-copy h2, .zmit .zab-empower-copy h2 { font-size: 22px; } .zab-elevate-cards { grid-template-columns: 1fr; gap: 20px; } .zab-elevate-card { padding: 16px 0; } .zmit-stats-grid { grid-template-columns: 1fr; } .zmit-testi h2 { font-size: 24px; line-height: 1.3; } .zmit-testi-card { padding: 24px; } .zmit-final-copy h2 { font-size: 26px; line-height: 1.3; } .zmit-final-media img { max-width: 300px; } /* Live's recognition CTA overflows its box at 375 unless the label wraps. */ .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; } /* At 375 BOTH bounds must be released on the review logos — max-height beats height, so leaving it set keeps the row too tall. */ .zmit-recognized-logos img { height: auto; max-height: 40px; max-width: 100%; } } /* Recognized band internals, measured on live: the dark box is 352 tall with 40px padding, split 877 copy | 423 CTA of a 1300 content box, and the button is 423x72. The shared sheet's own 1280 container cap on this band is a documented exception and is left alone. */ /* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` is `minmax(auto, 1fr)`, whose MIN is the CTA's min-content. That is the root cause of the "white box hanging half off the panel's right edge" report - the shared sheet pins this one button to `white-space: nowrap` (it-managed-services-zazz.css:447), nowrap makes its min-content the full one-line label, the track grows past its share and the grid overflows the panel. Releasing nowrap (below) fixes the symptom; capping the track's minimum at 0 means no future min-content - a nowrap, a long unbreakable word, an icon - can blow it out again. */ /* GATED to desktop (2026-09-22). These three were TOP-LEVEL, so the two-column panel survived the shared sheet's own <=680 stack (it-managed-services-zazz.css:835, same specificity, earlier in the cascade). At 430 that left a ~97px CTA track holding a 20px/30px-padded button, and the white box overlapped the paragraph and hung off the panel's right edge with the label spilling out — the owner's "CTA hanging roughly HALF OFF the dark panel's right edge". It never reproduced at 1440, which is why number-only desktop checks kept passing it. The original is a single COLUMN below 1081 (see the block further down). */ @media (min-width: 1081px) { .zmit-recognized-band { grid-template-columns: 67.5% minmax(0, 1fr); gap: 0; } .zmit-recognized-cta { align-self: center; } .zmit-recognized-cta .z-btn { display: block; width: 100%; text-align: center; } } /* The shared sheet pins this one button to `white-space: nowrap` (it-managed-services-zazz.css:447). Nowrap makes the button's min-content its full one-line label, which BLOWS OUT the `1fr` track: measured at 1440 the button rendered 422 wide in a 371 track and hung 52px past the panel's padding box and 12px past the panel itself. Live's own button WRAPS. Measured on live at 1440: 423x72 at x947, inside a 1300 content box (copy 877 + cta 423, no gap), padding 20px 30px, font 16px/500, line-height 16px, radius 8, centred — i.e. a TWO-LINE label (20 + 2x16 + 20 = 72). Releasing nowrap gives the same two lines and the same 72px height in our narrower 371px track, fully inside the panel. */ .zmit .zmit-recognized-cta .z-btn { white-space: normal; padding: 20px 30px; font-size: 16px; font-weight: 500; line-height: 16px; /* live's arrow is its own icon span pinned to the button's right edge, not an inline glyph after the label: measured at 1440 the two label lines centre at ~x1142 while the arrow sits at ~x1332, i.e. 30 in from the button's 1370 right edge. The shared sheet appends ours as a `::after` on a `display: block` button, so it rendered glued to the last word ("Consultation->"). Taking it out of flow restores live's split. */ } @media (min-width: 1081px) { .zmit .zmit-recognized-cta .z-btn { position: relative; } .zmit .zmit-recognized-cta .z-btn::after { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } } /* Recognized band BELOW 1081 — the original is a single COLUMN, measured with the band in view and settled: 768: panel 708 x 473 at x30, padding 40, radius 10, flex column, space-between, gap 40; copy block 628 at x70; the CTA sits BELOW it, shrink-to-fit at 437 x 55 at x70, padding 20px 30px, radius 8, bg #fcfcfc, colour #141414, 14.59px/500, centred. 430: panel 430 x 717 FULL BLEED at x0, padding 30px 20px, radius 0, same column/space-between/gap 40; CTA 390 x 43 at x20 — full content width — padding 15px, radius 8, 13px/500/13px, centred. The arrow stays INLINE here: live's content wrapper is 377 of the 437 button at 768, i.e. label and icon share one centred row. */ @media (max-width: 1080px) { .zmit-recognized-band { grid-template-columns: minmax(0, 1fr); gap: 40px; } .zmit-recognized-cta { align-self: start; } .zmit .zmit-recognized-cta .z-btn { display: inline-block; width: auto; text-align: center; white-space: normal; } } @media (max-width: 680px) { .zmit-recognized-band { padding: 30px 20px; border-radius: 0; } .zmit .zmit-recognized-cta .z-btn { display: block; width: 100%; padding: 15px; font-size: 13px; line-height: 13px; /* full-width again here, so the arrow is pinned to the right edge as it is at 1440 — live's 430 button puts the label at x45 and the arrow at ~x375 of a 390 box. Offset is live's own 15px padding. Between 681 and 1080 the button is shrink-to-fit and live keeps label + icon in one centred row, so the arrow stays inline there. */ position: relative; } .zmit .zmit-recognized-cta .z-btn::after { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } } /* Final CTA figure: live is 500x576. The media cell is a flex item with no basis, so without an explicit width the img resolves to 0 and the whole band collapses (measured 253 against live's 668). */ .zmit-final-media { flex: 0 0 500px; } .zmit-final-media img { width: 500px; } /* Testimonials: live's slide card spans the full 1380 container. Our nav buttons are in-flow siblings, which shrank the card to 1244 — float them over the card instead. */ .zmit-testi-carousel { position: relative; } .zmit-testi-carousel .zmit-testi-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .zmit-testi-carousel .zmit-testi-nav.prev { left: 10px; } .zmit-testi-carousel .zmit-testi-nav.next { right: 10px; } /* ============================================================ HEIGHT-PARITY FIXES, each from a measured live number at 1440. Appended last so they win over the blocks above at equal specificity. ============================================================ */ /* Hero: live's band (hero + marquee in ONE jet component) is 758 tall, of which the banner is 633 and the logo strip 125. Ours split the same two sections but came out 556 + 125, so the banner column needs the extra 77. Written with the .zmit prefix so it outranks the desktop block above. */ @media (min-width: 1081px) { /* OWNER DEVIATION 2026-09-22: was 127 to reach live's banner height; the owner asked for a shorter banner. 34 puts it at ~490, reproducing the helpdesk hero's 96px card overhang onto the logo strip. FLOOR is 461 - below that the card bleeds past the strip into the next section. */ .zmit .zmit-hero-left { padding-bottom: 34px; } } /* Recognized: live's dark box is 352 tall — 80px padding plus a 272 copy column whose three blocks sit 20px apart (h2 84, lead 78, logo row 70). */ .zmit-recognized-copy { display: flex; flex-direction: column; gap: 20px; } .zmit .zmit-recognized-copy h2, .zmit .zmit-recognized-copy p { margin: 0; } /* Advantages: live's band is 615 — the copy column's paragraph rhythm is 20, not 24 (measured against the 2x2 card column's 535 height). */ .zmit .zab-elevate-copy p { margin: 0 0 20px; } /* Final CTA: live's band is 668 around a 500x576 figure, i.e. 92px of vertical breathing room. */ .zmit .zmit-final.z-section { margin: 0; padding: 46px 0; } /* Pre-footer: live's inner is 435 = 80px padding top and bottom plus a 275 content row; the copy column stacks logo / title / copy 20px apart and the two 280x58 buttons also sit 20px apart. */ @media (min-width: 1081px) { /* This block used to re-declare `.zmit-insights-copy { display: flex; flex-direction: column; grid-template-columns: none }`, which UNDID the two-column grid set in the S19 block above (and the identical one in the shared sheet, where the logo is col 1 / row 1, the title col 2 / row 1 and the paragraph `grid-column: 1 / -1`). Stacked, the column inherited `align-items: center`, so the logo floated centred ABOVE the heading and every block was centre-justified against a left-aligned band — the "logo sits large and oddly placed, right column unbalanced" report. Live's row is measured at 1440, in view and settled: left column 770 wide and 192 tall, row 1 = logo 247x55 (object-fit: fill) at x20 then, 20px later, the heading wrapper 503x56 at x287 carrying live's OWN `border-left: 2px solid #fff` + `padding-left: 20px`, with a 481-wide 28px/400/28px white
inside; row 2 = the paragraph, full 770 width, 20px/400/28px. The grid is left to the block above; only the widths that were wrong are restated here. The max-width caps this block used to carry (539 on the title, 640 on the paragraph) are deliberately gone — they were what centred and narrowed the text. */ .zmit .zmit-insights-btns a { padding: 16px 50px; } } /* ---- second height-parity pass ---- */ /* Recognized: live's dark box is 352 tall (80 padding + a 272 copy column). Our container is the shared 1280-capped one, so the copy column is 150 narrower and its heading wraps to fewer lines — the measured box height is restated here rather than left to fall out of the shorter text. */ .zmit-recognized-band { min-height: 352px; } /* ---- third pass ---- */ /* Services card padding is live's own 30px all round: the CTA row is absolute and overlaps the bottom padding, so no extra bottom reserve is needed. */ .zmit-services-grid .zmit-svc-card { padding: 30px; } /* ---- fourth pass: card bottom reserve (CORRECTION to the pass above) ---- */ /* Live gets away with a plain 30px bottom padding because its cards are 338 wide, so the bullets wrap less and the absolute CTA row (bottom 12, 34 tall) never reaches the copy. Our cards are 313 wide — the house 1400 container against live's full-bleed 1440 — so at 30px the CTA OVERLAPPED the last bullet by 16px on most cards (measured: CTA top minus last-li bottom = -16). The reserve below is the fix; it costs ~26px per grid row against live and is the direct, documented consequence of the narrower house container. Assert on any change: every card's (CTA top - last li bottom) must be >= 0. */ .zmit-services-grid .zmit-svc-card { padding: 30px 30px 56px; } /* ============================================================ BELOW 1081 — the expander must stay an ACCORDION, not a stack. Without this the .zab-nist-body display:none only exists inside the desktop block, so every panel's copy shows at once and the band came out 790px taller than live at 768. One open at a time, as live. ============================================================ */ @media (max-width: 1080px) { .zab-nist-item .zab-nist-body { display: none; } .zab-nist-item.is-open .zab-nist-body { display: block; } .zmit .zab-nist-tab { gap: 16px; } /* Final CTA figure: live's tablet figure is much smaller than the 500px desktop one; at 500 the stacked band ran 238px over live. */ .zmit-final-media { flex: 0 0 auto; } .zmit-final-media img { width: auto; max-width: 320px; } } /* Phone: live keeps the final-CTA figure at the full column width (its band is 1040 tall at 375) and does NOT shrink the heading. Capping the figure at 300px and the h2 at 26px put us 571px under live, so both are released. */ @media (max-width: 680px) { .zmit-final-media { flex: 0 0 auto; width: 100%; } .zmit-final-media img { width: 100%; max-width: 100%; } .zmit-final-copy h2 { font-size: 30px; line-height: 1.3; } } /* ============================================================ FINAL CTA — measured on live (outsourced-cybersecurity-services) at 1440, window.innerWidth asserted in the same evaluation. Three separate defects fixed here. Live's structure: wrapper ............ 668 tall, transparent band 1187a39 ..... 1440 x 438, transparent, margin 150 0 80, padding 0 30 row 2dee0b2 .... 1380 at x30, 438 tall, radius 5, justify-content space-between, gap 20, background linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%) copy 718d6c9 . 690 wide, padding 50, jc center, gap 20, content 248 (h2 86 / p 76 / cta 46) media 4f2c262 500 x 576, align-self flex-end, margin-top -138px, overflow visible figure ............. 500x576, object-fit fill, position static, margins 0. imgTopVsBandTop -138, imgOverhangBelowBand 0 — it hangs UP, never down. Live HAS a figure on this page. 1. THE BAND GREW TO CONTAIN THE FIGURE. 576 - 438 = 138, so the negative margin-top makes the media column's height CONTRIBUTION 438 and the row stops tracking the figure. Ours was a 576-tall banner with the 253-tall copy centred in it — the tall empty area with the photo floating in it that the owner screenshotted. Section padding is restated as live's own 150 / 80 so the overhanging figure keeps 12px of clear space above it and the band's total footprint stays 668, unchanged. The img keeps its width/height aspect-ratio reserve (CloudFront is referer-blocked locally, so naturalWidth is 0); the reserve can no longer inflate the band because -138 is a constant. 2. THE GRADIENT PANEL WAS FLATTENED TO WHITE. Seraphinite defers this background until the band scrolls into view, so a computed read taken after scrolling past reports backgroundImage "none" — which is how it came to be built as a bare white band. Scroll the band into view and wait ~2s before reading it. Live carries the same gradient at 430. 3. THE FIGURE WAS NOT FLUSH RIGHT. Live's row is space-between with 690 + 500 in 1380, so the figure sits on the panel's right edge; ours left 135px of gradient dead to its right. Content x-offsets run 20px inboard of live's throughout (our 1400 house container against live's full-bleed 1440) — CLAUDE.md §7, kept. ============================================================ */ .zmit-final-banner { background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); border-radius: 5px; } .zmit-final-copy { padding: 30px 20px; } /* live's own mobile copy padding */ @media (min-width: 1081px) { .zmit .zmit-final.z-section { padding: 150px 0 80px; } .zmit-final-banner { justify-content: space-between; align-items: center; overflow: visible; } .zmit-final-copy { max-width: 690px; padding: 50px; } /* live's copy rhythm is a flat 20px gap, not our 16 / 26 */ .zmit-final-copy h2, .zmit-final-copy p { margin-bottom: 20px; } .zmit-final-media { align-self: flex-end; margin-top: -138px; } } /* ============================================================ EXPANDING CARDS — the rest of live's chrome, measured on live (outsourced-cybersecurity-services) at 1440 with the band SCROLLED INTO VIEW and a 2s settle. Seraphinite defers these backgrounds: read after scrolling past, the band reports backgroundImage "none" and the open panel's label column reports white, which is how all three came to be built flat. Same root cause as the final CTA's missing gradient. Live, identical on both this page and its sibling: band ................. background linear-gradient( rgba(1,97,255,.08) 0%, rgba(149,114,247,.08) 100%) over #fff panel ................ radius 10, border-width 0, box-shadow 0 0 14px 2px rgba(0,31,31,.08) OPEN panel ........... jc space-between, ai center, padding 0; .ue_label .......... 170 x 320 (full panel height), linear-gradient(#0161ff 0%, #9572f7 120%), icon circle 70 at t+20 l+50, 90px letter WHITE at t+210 (so 30 clear below) collapsed panel ...... 120 wide, icon 70 at t+30 l+25, 90px letter #c2c2c2 at t+200 The letter was believed to be "white on white" on the open panel — it is white because live's label column is that blue-to-purple gradient. Our row sits in the 1340 house container against live's 1360: correct, CLAUDE.md §7, and left alone. ============================================================ */ .zmit .zab-nist.z-section { background: linear-gradient(rgba(1, 97, 255, .08) 0%, rgba(149, 114, 247, .08) 100%), #fff; padding: 65px 0; } @media (min-width: 1081px) { /* collapsed: the control fills the 320 panel so the icon sits 30 from the top and the 90px letter ends 30 from the bottom — live is space-between, not centred. */ .zmit .zab-nist-item .zab-nist-tab { flex: 1 1 auto; padding: 30px 25px; justify-content: space-between; } /* open: the 170-wide label column, full panel height. */ .zmit .zab-nist-item.is-open .zab-nist-tab { flex: 0 0 170px; align-self: stretch; padding: 20px 50px; } } /* The open panel's label carries that gradient at EVERY width — at 430 it is a full-width 390x90 header strip (icon left, white 60px letter hard right), so the declaration is unconditional and only the desktop layout is gated above. Live's control is space-between in both orientations; ours was flex-start below 1081, which parked the letter next to the icon instead of at the far edge and left the open panel's white letter invisible on white. */ .zmit .zab-nist-item.is-open .zab-nist-tab { background: linear-gradient(#0161ff 0%, #9572f7 120%); } @media (max-width: 1080px) { .zmit .zab-nist-tab { justify-content: space-between; } } /* ============================================================ DEFECT 4 (2026-09-22) — PRE-FOOTER BAND below 1081. At 1440 this band already matched; every reported symptom was a TABLET/PHONE bug, because the page sheet's whole pre-footer block is gated to `@media (min-width: 1081px)` and nothing replaced it underneath. The shared sheet's fallbacks are a different composition, so 681-1080 and <=680 inherited: `1fr auto` + gap 44 on the outer grid, `auto 1fr` + column-gap 0 on the copy grid, and no two-class logo rule. The logo was the loudest symptom. The shared base `.zmit-insights-logo` is a ONE-class rule and `.zmit img { height: auto }` is (0,1,1), so it outranks it — between 681 and 1080 the mark fell back to its intrinsic 287x64 scaled to the track and rendered 269x60 where live renders 174x39 ("the logo sits large and oddly placed"). Every rule below therefore uses two classes, as the shared sheet's own phone block already has to. Measured on the WordPress original (page 35645, via the capitalised slug) with the band in view and a 2.3s settle: | | 1440 | 768 | 430 | | band | 1440x352 #000 | 768x320 | 430x484 | | inner | 1400 @x20, | 728 @x20, | 390 @x20, | | | padding 80px 0 | padding 80px 0 | padding 60px 0 | | layout | row, space- | row, space- | row WRAPS: copy | | | between, gap 20 | between, gap 20 | then btns below | | copy column | 770 @x20, h192 | 400 @x20, h160 | 390 @x20, h208 | | logo img | 247x55 | 174x39 | 230x51 | | heading cell | 503 @x287, | 206 @x214, | 331 @x20, | | | pad-left 20 | pad-left 10 | pad-left 10 | | | border-left 2px solid #fff at all three widths | | button column | 280 @x1140 | 218 @x530 | 390 @x20, below | | both buttons | 280x58, | 218x58, | 390x58, | | | pad 16px 50px | pad 16px 30px | pad 16px 30px | | stacked? | YES | YES | YES | | Contact Us | bg #fff, #000, 1px solid #fff, radius 5, 16/500/24 | | Subscribe | bg transparent, #fff, 1px solid #fff, radius 5 | So live's own treatment IS one solid-white button above one outlined transparent button, equal width, 20px apart, at the right — that part of the report is live's design and is deliberately kept. What was broken is the geometry: at 768 the button column collapsed to 154 (auto-sized to the buttons' own max-content) with 154x50 buttons, and at 430 the band was STILL a two-column grid — copy 161 wide beside 165-wide buttons — because the shared phone block single-columns `.zmit-insights-copy` but never `.zmit-insights-grid`. DARK BAND => LIGHT COPY throughout; no rule here touches `.zmit-hsform`. ============================================================ */ @media (max-width: 1080px) { .zmit .zmit-insights.z-section { padding: 80px 0; } /* minmax(0, ...) so the copy track can never be pushed out by its own min-content, and a FIXED 218 button column instead of `auto` — `auto` is what shrank it to the label width. */ .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 218px; gap: 20px; align-items: start; } .zmit-insights-copy { grid-template-columns: 174px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; } .zmit .zmit-insights-logo { height: 39px; width: 174px; object-fit: fill; object-position: left center; } .zmit-insights-copy p.zmit-insights-title { padding-left: 10px; margin-left: 0; max-width: none; } .zmit-insights-btns { flex-direction: column; gap: 20px; } .zmit .zmit-insights-btns a { flex: 0 0 auto; width: 218px; padding: 16px 30px; } } @media (max-width: 680px) { .zmit .zmit-insights.z-section { padding: 60px 0; } /* the missing half of the shared phone block: live's row wraps, so the button column drops BELOW the copy at full width. */ .zmit-insights-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* and the copy grid single-columns too — the shared phone block already says this, but it loads BEFORE the page sheet at the same specificity, so the 174px logo track set in the 1080 block above survived it and left the heading in a 176px column beside the mark. */ .zmit-insights-copy { grid-template-columns: minmax(0, 1fr); } .zmit .zmit-insights-logo { height: 51px; width: 230px; } .zmit-insights-copy p.zmit-insights-title { padding-left: 10px; } .zmit-insights-btns { flex-direction: column; gap: 20px; } .zmit .zmit-insights-btns a { flex: 0 0 auto; width: 100%; padding: 16px 30px; } } /* ====================================================================== /cyber-security-services — PAGE-SPECIFIC LAYER. Everything below was measured on https://www.zazz.io/cyber-security-services at 1440 (innerWidth 1440 asserted, bands scrolled into view and settled). ====================================================================== */ /* S03 WHY — NEW vs the reference. Two live bands: heading 1f31828 (83 = 20 + h2 43 + 20) and grid 53f9dc2 (698 = 30 + 638 + 30). Grid is THREE columns, gap 20 (446.66 each of 1380), rows 309 apart+20; cards are bare (no fill, border or shadow) with 20px padding; icon 50x50, 15 to the title 20px/700/24px #141414, 12 to the copy 16px/400/24px #14142b. h2 34.7px/400/43px #14142b. */ .zmit .zmit-why.z-section { background: #fff; padding: 20px 0 30px; } .zmit .zmit-why .z-container { display: block; } .zmit .zmit-why-head { margin: 0 0 50px; } .zmit .zmit-why-head h2 { font-size: 34.7px; font-weight: 400; line-height: 43px; color: #14142b; margin: 0; } .zmit .zmit-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .zmit .zmit-why-card { padding: 20px; background: transparent; text-align: left; } .zmit .zmit-why-ic { width: 50px; height: 50px; margin: 0 0 15px; } .zmit .zmit-why-ic svg { width: 50px; height: 50px; display: block; } .zmit .zmit-why-card h3 { font-size: 20px; font-weight: 700; line-height: 24px; color: #141414; margin: 0 0 12px; } .zmit .zmit-why-card p { font-size: 16px; font-weight: 400; line-height: 24px; color: #14142b; margin: 0; } .zmit .zmit-why-card p a { color: var(--zab-accent); } /* Tablet: ONE column, like the WordPress page on an iPad (owner screenshot, 2026-09-30; was 2-up). Measured off that screenshot (820px viewport, calibrated on the heading/title/copy widths - text sizes already match): heading -> first icon ~50, card -> next card ~30, cards unpadded. So: grid 1 col, 30px row gap, card padding 0 (head keeps its 50px margin). Card text stays on the house container edge (WP runs it 10px wider - never widen). Phones (<=680) keep their own block below. */ @media (max-width: 1080px) { .zmit .zmit-why-grid { grid-template-columns: 1fr; gap: 30px 0; } .zmit .zmit-why-card { padding: 0; } } @media (max-width: 680px) { .zmit .zmit-why-head { margin-bottom: 20px; } .zmit .zmit-why-head h2 { font-size: 24px; line-height: 1.3; } .zmit .zmit-why-grid { grid-template-columns: 1fr; gap: 0; } .zmit .zmit-why-card { padding: 20px 0; } } /* S08 TECH STACK — NEW vs the reference; component + sheet from the MSSP preview (same nested-tabs + image-box widget). This page: band 656 = 30 + h3 45 (34.7px/400/45.11px #141414) + 51 + tab box 500 + 30; NO lead paragraph. Rail 304 wide with a 50px top inset (450 visible, scrolls), tabs 284 wide 56/72 tall, 10 apart, radius 5, padding 20, 16px/16px; panel at +304 with 50px top/left inset; cards 505x82 #eff0f7 radius 8 padding 15, two columns 15 apart, logo 52, title 18px/400/23.4px. */ .zmit .zab-stack.z-section { background: #fff; padding: 30px 0; } .zmit .zab-stack-head h3, .zmit .zab-stack-head h2 { font-size: 34.7px; font-weight: 400; line-height: 45px; color: #141414; margin: 0 0 51px; } .zab-stack-tabs { display: grid; grid-template-columns: 1fr; gap: 20px; } .zab-stack-rail { display: flex; flex-direction: column; gap: 10px; } .zmit .zab-stack-tab { display: flex; align-items: center; text-align: left; flex: 0 0 auto; background: #fff; border: 0; border-radius: 5px; padding: 20px; min-height: 56px; font-size: 16px; font-weight: 400; line-height: 16px; color: #141414; cursor: pointer; transition: background .2s ease, color .2s ease; } .zmit .zab-stack-tab:hover { background: #eff0f7; } .zmit .zab-stack-tab.is-active { background: var(--zab-accent); color: #fff; } .zab-stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-content: start; } .zab-stack-card { display: flex; align-items: center; gap: 27px; background: var(--zab-fill); border-radius: 8px; padding: 15px; min-height: 82px; } .zab-stack-card img { flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; display: block; } .zmit .zab-stack-card span { font-size: 18px; font-weight: 400; line-height: 23.4px; color: #141414; } .zmit .zab-stack-card span a { color: inherit; } @media (min-width: 1081px) { .zab-stack-tabs { grid-template-columns: 304px 1fr; gap: 0; height: 500px; align-items: stretch; } .zab-stack-rail { height: 500px; overflow-y: auto; padding: 50px 20px 0 0; } .zab-stack-panels { padding: 50px 0 0 50px; } } @media (max-width: 1080px) { .zab-stack-rail { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .zmit .zab-stack-tab { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 680px) { .zmit .zab-stack-head h3, .zmit .zab-stack-head h2 { font-size: 22px; line-height: 1.3; margin-bottom: 20px; } .zab-stack-grid { grid-template-columns: 1fr; } } /* PHONES (<=767, Elementor's mobile breakpoint) — match the WordPress page's nested-tabs mobile mode, measured at 375 on /cyber-security-services-wp: an ACCORDION. Every category is a full-width button stacked down the page and the open category's tools sit directly under ITS button (0 gap), the next button 10px below; tapping another button opens it and closes the rest (tapping the open one keeps it open) — the existing tab script already does exactly that, so this is CSS only. Order is done Elementor's way: the rail and panels wrappers become display:contents and each tab/panel is ordered by its index (--i, set inline in the markup): tab i = 2i, panel i = 2i+1. Tools: a 2-col grid 10 apart; card #eff0f7 radius 8 padding 15, min-height 107; 26px icon centred at the TOP (15 in), centred 16px/400/20.8px name starting 62 in (21 below the icon). Container stays the house 315px (WP runs 335) - never widen. 768-1080 is untouched. */ @media (max-width: 767px) { .zab-stack-tabs { display: flex; flex-direction: column; gap: 10px; } .zab-stack-rail, .zab-stack-panels { display: contents; } .zmit .zab-stack-tab { order: calc(var(--i, 0) * 2); width: 100%; white-space: normal; text-align: left; } .zab-stack-panel { order: calc(var(--i, 0) * 2 + 1); margin-top: -10px; } .zab-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .zab-stack-card { flex-direction: column; justify-content: flex-start; text-align: center; gap: 21px; padding: 15px; min-height: 107px; } .zab-stack-card img { flex: 0 0 26px; width: 26px; height: 26px; } .zmit .zab-stack-card span { font-size: 16px; line-height: 20.8px; } } /* S14 STORIES — this page's band carries its own h2: 672 = 30 + h2 39 (30px/300/39px #141414) + 20 + grid 553 + 30. */ .zmit .zmit-stories.z-section { padding: 30px 0; } .zmit .zmit-stories h2 { font-size: 30px; font-weight: 300; line-height: 39px; color: #141414; margin: 0 0 20px; } /* S17 FAQ — 17 questions split 9 / 8: the LEFT column carries the extra one (owner rule 2026-10-22; was WP's 8 / 9). */ @media (min-width: 681px) { .zmit-faq-item:nth-child(6) { break-after: auto; } .zmit-faq-item:nth-child(9) { break-after: column; } } /* S01 HERO — OWNER DEVIATION (2026-09-28 rule, reference implementation = final @media block of css/enterprise-software-development-company.css, adapted to the Family A hero partial). Live: banner 672 (t100), H2 54px/600/64.8px x5 lines, white card 514x728 at t140 overhanging the banner by 96.59 into the logo strip. Ours: headline 42px/52px, the card sizes to its content (not stretched), the banner is set by the copy column, the card KEEPS live's ~96.59px overhang (never shrink it) and there is >= 60px under the hero CTA. Do not "fix" back to live. */ @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 -96.59px; } .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; } } /* S02 SERVICES — this page's band c9c35d9 is 1410 = 10 + head 78 + 20 + grid 1272 (4 rows 290/290/313/290, 30 apart; cards 323 wide) + 30. Ours keeps the house 1340 box, so cards are 313 wide and a few bullets wrap. */ .zmit .zmit-services.z-section { padding: 10px 0 30px; } .zmit .zmit-services-head { margin-bottom: 20px; } /* S04 COMPARE TABLE — this page's fb82707 is 643 = 10 + 603 + 30; columns 450 wide 15 apart; header block 103 (h3 24px/600 on a 63px line + 20/20), five 100px body rows, cell text 16px/500/28px. */ @media (min-width: 1081px) { .zmit .zab-cmp.z-section { padding: 10px 0 30px; } .zmit .zab-cmp-col-head { line-height: 63px; } .zmit .zab-cmp-cell { line-height: 28px; } } /* ---- per-band vertical rhythm, this page's live numbers at 1440 ---- */ @media (min-width: 1081px) { /* compare heading dce398f: 134 = 30 + h2 74 + 30 */ .zmit .zab-cmp-head.z-section { padding: 30px 0; } /* certifications b7f8d3a: 612 = 30 + h2 65 + 5 + p 52 + 25.6 + 25 + tiles 182 / 15 / 182 + 30 */ .zmit .zab-certified.z-section { padding: 30px 0; } .zmit .zab-certified > .z-container > p { margin-bottom: 25.6px; } .zab-certified-badges { row-gap: 15px; } .zab-cert-box { min-height: 182px; } /* bookcal a1452e8: 910 = 30 + h2 39 + 10 + lead 26 (ONE line, 1420 wide) + 20 + calendar 784 */ .zmit .zmit-bookcal.z-section { padding: 30px 0 0; } .zmit .zmit-bookcal h2 { margin-bottom: 10px; } .zmit .zmit-bookcal p { max-width: none; margin: 0 0 20px; } .zmit .zmit-bookcal-embed { margin-top: 0; } .zmit .zmit-bookcal-embed .meetings-iframe-container { min-height: 784px; } /* NIST 3320fe0: 30px above the band, 575 = 30 + h2 56 + 30 + lead 79 (1104 wide) + 30 + row 320 + 30 */ .zmit .zab-nist.z-section { margin-top: 30px; padding: 30px 0; } .zmit .zab-nist-lead { max-width: 1104px; } /* process 077adf2: 567 = 40 + 497 (six 77px rows, 7 apart; copy 426) + 30 */ .zmit .zab-proc.z-section { padding: 40px 0 30px; } .zmit .zab-proc-copy p { margin: 0 0 25.6px; } /* stats 0a92459: 30px top/bottom. Counters: all THREE on ONE row (owner, 2026-09-30) - was 2 + 1 (live WP's own wrap), which left the third stat orphaned. Matches the managed-security-service-provider reference, measured at 1440: three equal columns in the 860 counter column, 44px apart (257px each), so every label wraps inside its own column and none overlap. */ .zmit .zmit-stats.z-section { padding: 30px 0; } .zmit .zmit-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 44px; } /* advantages f32c08a: 30px above, 665 = 30 + 605 + 30; copy paragraphs 18px/27px with live's empty 27px
spacer between them. */ .zmit .zab-elevate.z-section { margin-top: 30px; padding: 30px 0; } .zmit .zab-elevate-copy h2 { margin-bottom: 20px; } .zmit .zab-elevate-copy p { font-size: 18px; line-height: 27px; margin: 0 0 27px; } /* testimonials 69fd3c7: 502 = 30 + h2 39 + 50 + slide 353 + 30 (ours ~473: see quote note). Slide: 80 pad, name 22px/600/28.6 + 5, 24x3 rule, company 34px/600/47.6 in a 10/10 box, quote 18px/29.7 + 28.8, 80 pad. */ .zmit .zmit-testi.z-section { padding: 30px 0; } .zmit .zmit-testi h2 { font-size: 30px; line-height: 39px; font-weight: 300; margin-bottom: 50px; } .zmit .zmit-testi-slide .zmit-testi-role { font-size: 22px; line-height: 28.6px; font-weight: 600; margin: 0 0 5px; } .zmit .zmit-testi-slide .zmit-testi-rule { width: 24px; height: 3px; margin: 0; } .zmit .zmit-testi-slide .zmit-testi-lead { font-size: 34px; line-height: 47.6px; font-weight: 600; margin: 0; padding: 10px 0; } /* quote keeps margin 0: OWNER 2026-09-21 (reference sheet) - the card hugs the shown slide with no trailing dead gradient; live adds 28.8 under it. */ .zmit .zmit-testi-slide > .zmit-testi-quote { font-size: 18px; line-height: 29.7px; margin: 0; } /* overview cbab533: 700 = 30 + h2 133 + 40 + copy (24px spacers) + 40 + button 43 + 30 */ .zmit .zab-empower.z-section { padding: 30px 0; } .zmit .zab-empower-copy h2 { margin-bottom: 40px; } .zmit .zab-empower-copy p:last-of-type { margin-bottom: 40px; } /* articles 54fce8f: 584 = 30 + head 39 + 30 + cards 455 + 30 */ .zmit .zmit-articles.z-section { padding: 30px 0; } /* FAQ 19a44fa: 942 = 30 + h2 44 + 30 + 808 + 30 */ .zmit .zmit-faq.z-section { padding: 30px 0; } /* contact 1bca1bb: lead is 1242 wide (3 lines) */ .zmit .zmit-contact-head p { max-width: 1242px; } } /* S01 HERO FORM — live's own 20px field rhythm (memory rule: shorten the banner by the copy column, never by squeezing the form). Undoes the reference's compaction: live rows 70 tall + 20, inputs 40 (10px 20px, 16px), textarea 68, submit 42 (13px). INNER inputs only — never the .hsfc-PhoneInput / .hsfc-DropdownInput wrappers. */ @media (min-width: 1081px) { .zmit-form-card .zmit-hsform .hsfc-Row { margin-bottom: 20px !important; } .zmit-form-card .zmit-hsform input, .zmit-form-card .zmit-hsform textarea, .zmit-form-card .zmit-hsform .hsfc-TextInput, .zmit-form-card .zmit-hsform .hsfc-TextareaInput { padding: 10px 20px !important; font-size: 16px !important; } .zmit-form-card .zmit-hsform .hsfc-TextareaInput, .zmit-form-card .zmit-hsform textarea { min-height: 68px !important; } .zmit-form-card .zmit-hsform .hsfc-Button, .zmit-form-card .zmit-hsform button[type="submit"] { padding: 13px !important; } } /* S07 RECOGNIZED efa2c74 — 370 = 30 + box 310 (40 pad + copy 230) + 30. Copy: h2 42 (ONE line) / 20 / lead 53 + 25.6 / 20 / logos 70 tall, no gap. CTA "Consult Cybersecurity Experts" is ONE line on this page, 331x72, padding 20px 30px, copy and CTA columns touch (no gap). The shared 1280 box is kept; the copy column takes everything the button does not. */ @media (min-width: 1081px) { .zmit .zmit-recognized.z-section { padding: 30px 0; } .zmit-recognized-band { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 0; } .zmit .zmit-recognized-copy p { margin-bottom: 25.6px; max-width: none; } .zmit-recognized-logos { gap: 0; } .zmit-recognized-logos img { height: 70px; } .zmit .zmit-recognized-cta .z-btn { display: inline-block; width: auto; white-space: nowrap; padding: 28px 70px 28px 30px; } } @media (min-width: 1081px) { /* compare: header block 103 on this page; body text sits at the TOP of each 100px cell (live's p starts 20-21px in, it is not centred) */ .zmit .zab-cmp-col-head { height: 103px; } .zmit .zab-cmp-cell { align-items: flex-start; } /* stats: copy column top-aligned; every counter cell is 123 tall on live (a one-line label does not shorten its row) */ .zmit .zmit-stats-copy { align-self: start; } .zmit .zmit-stat { min-height: 123px; } } @media (min-width: 1081px) { /* certifications: live's lead wrapper keeps its own 25.6 AND adds 25 below (they do not collapse on live) - the badge grid starts 203 in. */ .zmit .zab-certified > .z-container > p { margin-bottom: 50.6px; } .zab-certified-badges { margin-top: 0; } } @media (min-width: 1081px) { /* FAQ answer on this page: box padding 0 20px 20px (horizontal restated, never 0), p 16px/25.6px #d9dbe9 + its 25.6 bottom margin => 148 for Q1. */ .zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 20px 20px; } .zmit .zmit-faq-a-inner p { line-height: 25.6px; margin: 0 0 25.6px; color: #d9dbe9; } } /* FAQ open/close speed: WP's nested-accordion widgets animate at 400ms (n_accordion_animation_duration); the shared sheet uses .3s. */ .zmit .zmit-faq-a { transition-duration: .4s; } /* FAQ on tablet: match the WordPress page on an iPad (owner screenshot, 2026-09-30). Values from the WP draft's Elementor CSS (post-19638.css): band 19a44fa padding 30 (<=1366); heading ef24399 font-size clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem) / 1.3; accordions ce363c2 + f92bc19 title 16px/600, answers 0 20px 20px, 16px/1.6 #D9DBE9. Their column containers (34b1398 / 52523c1, 48% each) go 100% at 768-880, so the FAQ is ONE column there (first 8, then the other 9, 10px apart) and stays two columns from 881. Desktop (>=1081) and phones (<=680) are untouched. */ @media (min-width: 681px) and (max-width: 1080px) { .zmit .zmit-faq.z-section { padding: 30px 0; } .zmit .zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); line-height: 1.3; } .zmit .zmit-faq .zmit-faq-q > span:not(.sign) { font-weight: 600; } .zmit .zmit-faq .zmit-faq-a-inner, .zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 20px 20px; } .zmit .zmit-faq .zmit-faq-a-inner p { line-height: 25.6px; margin: 0 0 25.6px; color: #d9dbe9; } } @media (min-width: 681px) and (max-width: 880px) { .zmit .zmit-faq .zmit-faq-list { column-count: 1; } .zmit .zmit-faq .zmit-faq-item:nth-child(8) { margin-bottom: 10px; } .zmit .zmit-faq .zmit-faq-item:nth-child(9) { break-after: auto; } } /* ------------------------------------------------------------ S04a comparison accordion (phones/tablets) - WP visual parity (owner, 2026-09-29). Values from the WP page's Elementor CSS (post-19638.css): nested-accordion a9b241f + its body containers (e6ac82b ...) + icon-boxes (51d2ce3 / fa1bec9 ...). This band only renders below 1081px; WP's "tablet" rules (<=1024) are used for 768-1080. ------------------------------------------------------------ */ .zmit .zab-cmp-acc .zab-acc-item { background: transparent; border-radius: 0; margin-bottom: 15px; overflow: visible; } .zmit .zab-cmp-acc .zab-acc-q { background: linear-gradient(90deg, #F0F4FA 30%, #D9EBFE 100%); border: 1px solid #14142B1F; border-radius: 10px; padding: 20px; font-size: 16px; font-weight: 600; line-height: 26.4px; color: #1f2124; } .zmit .zab-cmp-acc .zab-acc-item[open] > .zab-acc-q { border-radius: 10px 10px 0 0; } .zmit .zab-cmp-acc .zab-acc-sign::before, .zmit .zab-cmp-acc .zab-acc-sign::after { background: #1f2124; } .zmit .zab-cmp-acc .zab-acc-a { padding: 0; overflow: hidden; border: 1px solid #14142B1F; border-top: 0; border-radius: 0 0 10px 10px; } .zmit .zab-cmp-acc .zab-acc-row { gap: 15px; padding: 20px; } .zmit .zab-cmp-acc .zab-acc-row.is-zazz { background: #EFF0F7; } .zmit .zab-cmp-acc .zab-acc-row.is-others { background: #F9FCFF; } .zmit .zab-cmp-acc .zab-acc-ico { flex: 0 0 30px; width: 30px; height: 30px; } .zmit .zab-cmp-acc .zab-acc-ico svg { display: block; width: 100%; height: 100%; } .zmit .zab-cmp-acc .zab-acc-row h3, .zmit .zab-cmp-acc .zab-acc-row .zab-acc-row-t { color: #0161FF; font-weight: 500; margin: 0 0 6px; } .zmit .zab-cmp-acc .zab-acc-row p { color: #000; } @media (max-width: 767px) { .zmit .zab-cmp-acc .zab-acc-ico { flex-basis: 22px; width: 22px; height: 22px; } .zmit .zab-cmp-acc .zab-acc-row h3, .zmit .zab-cmp-acc .zab-acc-row .zab-acc-row-t { font-size: 18px; margin-bottom: 2px; } .zmit .zab-cmp-acc .zab-acc-row.is-zazz p { font-size: 14px; } .zmit .zab-cmp-acc .zab-acc-row.is-others p { font-size: 12px; } } /* NIST cards, stacked layout (<=1080px): the card body had 0 top padding, so the "Identify"/"Protect"... heading sat flush against the blue band. Match the same .zab-nist component on it-managed-services (card body padding-top 16px there). Desktop's side-by-side layout (padding 0 50px) is untouched; the heading-to-text gap is unchanged. */ @media (max-width: 1080px) { .zmit .zab-nist-body { padding-top: 16px; } } /* S05 CERTIFICATIONS — DESKTOP ONLY (>=1081): full-width like WP b7f8d3a. WP runs the 6 tiles edge to edge (30px band padding, no 1400 cap), so at 1920 a tile is 607 wide, not our capped 439. Inside a tile WP's image-box (07cdb83) is: 11 inset | image column (W-22)/3 | 11 | copy 2(W-22)/3, W = tile - 24; the icon is min(134, column) and sits left in its column. Measured on WP at 1100/1280/1440/1536/1920/2560; >=2400 WP widens the 11s to 53, h2 56px, desc 18px, title gap 9px. Tablet/mobile (<=1080) untouched. */ @media (min-width: 1081px) { .zmit .zab-certified > .z-container { max-width: none; } .zmit .zab-cert-box { gap: 11px; padding: 24px 12px 24px 23px; min-height: 0; } .zmit .zab-cert-box img { flex: 0 0 auto; height: auto; width: min(134px, calc((100% - 11px) / 3)); margin-right: calc((100% - 11px) / 3 - min(134px, calc((100% - 11px) / 3))); } .zmit .zab-cert-copy { flex: 1 1 0; min-width: 0; } } @media (min-width: 2400px) { .zmit .zab-certified h2 { font-size: 56px; max-width: none; } .zmit .zab-cert-box { gap: 53px; padding-left: 65px; } .zmit .zab-cert-box img { width: min(134px, calc((100% - 53px) / 3)); margin-right: calc((100% - 53px) / 3 - min(134px, calc((100% - 53px) / 3))); } .zmit .zab-cert-box h3 { margin-bottom: 9px; } .zmit .zab-cert-box p { font-size: 18px; } } /* S07 RECOGNIZED — MOBILE ONLY (<=767, WP's mobile tier): match WP efa2c74 at 375. WP: section padding 0 and the #141414 band 3a69e1b FULL BLEED (x0, no gutter), padding 30px 20px, radius 0; copy 335 wide; text 25.6px under the paragraph, then the three logos (3e7fba2/b5ead04/3886af6) STACKED and centred at their natural 130/181/241 x 70, 20 apart; button 87c62c1 full width, 13px, padding 15. Band sits flush on the section above and 30 over the next heading. Ours kept the white 52/35 section padding + the 30px container gutter (band at x30, copy 275) and 40px logos wrapped in a row. The <=680 button rules are repeated so 681-767 gets WP's mobile button too. Desktop/tablet (>=768) untouched. OWNER 2026-10-22 (reference image = managed-security-service-provider at 375): the band is no longer full bleed - it is an inset dark card like MSSP's: 30px above/below, the normal 30px container gutter on both sides, radius 10, padding 32px 26px, so heading, copy, stacked logos and the button all sit inside it. */ @media (max-width: 767px) { .zmit .zmit-recognized.z-section { padding: 30px 0; } .zmit .zmit-recognized-band { padding: 32px 26px; border-radius: 10px; } .zmit .zmit-recognized-copy p { margin-bottom: 25.6px; } .zmit .zmit-recognized-logos { flex-direction: column; align-items: center; row-gap: 20px; } .zmit .zmit-recognized-logos img { height: 70px; max-height: none; width: auto; max-width: 100%; object-fit: contain; } .zmit .zmit-recognized-cta .z-btn { display: block; width: 100%; padding: 15px; font-size: 13px; line-height: 13px; position: relative; } .zmit .zmit-recognized-cta .z-btn::after { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } } /* S18 FINAL CTA — MOBILE ONLY (<=767, WP's mobile tier): match the WP component (post 8864: 1187a39 > 2dee0b2 card > 718d6c9 copy + 4f2c262 image) at 375. WP: 50px above/below, card 20px from the edges (335 wide at 375), copy padding 30/20 as a 20px-gap column; h2 33.05/600/1.3em, text 14px/25.2, button 13px, radius 5; the photo is the FULL card width, cropped (cover) and pulled up 12% of the card width so it overlaps the copy's bottom padding. <=500: full card width x 500 (cover, centred); 501-767: WP's custom CSS wins, 500px wide at its natural ratio, left-aligned. Ours kept a 30px gutter, 30px/16px type and a 315x331 contained image. Tablet/desktop (>=768) untouched. */ @media (max-width: 767px) { .zmit .zmit-final.z-section { padding: 50px 0; } .zmit .zmit-final > .z-container { padding: 0 20px; } .zmit .zmit-final-banner { gap: 20px; } .zmit .zmit-final-copy { max-width: none; width: 100%; display: flex; flex-direction: column; gap: 20px; } .zmit .zmit-final-copy h2 { font-size: 33.05px; line-height: 42.965px; letter-spacing: normal; margin: 0; } .zmit .zmit-final-copy p { font-size: 14px; line-height: 25.2px; margin: 0; } .zmit .zmit-final-copy .zab-btn-final { align-self: flex-start; font-size: 13px; border-radius: 5px; gap: 16px; } .zmit .zmit-final-media { align-self: stretch; width: 100%; margin-top: -12%; } .zmit .zmit-final-media img { width: 500px; max-width: 100%; height: auto; margin: 0; object-fit: cover; } } @media (max-width: 500px) { .zmit .zmit-final-media img { width: 100%; height: 500px; object-position: center center; } } /* S08 TECH STACK — TABLET ONLY (768-1080): match WP 7557c66/f2691b8, which keeps the VERTICAL rail at tablet (ours switched to a horizontal scrolling row). Measured on WP at 768/820/1024/1080: content = width - 40 (max 1004.3, centred); heading 34.7/45.11 + 20 + a 1px #ddd rule under it; tab box 500 tall; rail = 22% of it, starting 50 down, 450 tall, scrolling (5px #7f8ea7 thumb), padding- right 20, tabs 10 apart, padding 20, 16px/16px wrapping; panel = the rest, 1px #ddd left rule, 50px top/left inset; 2-col grid 15 apart; card #eff0f7 radius 8 padding 15; icon column 1/6 of the card's inner width (icon max 52); the 16px/20.8px name beside it, bottom-aligned with a 10px margin (WP flex-end). Desktop (>=1081) and phones (<=767) untouched. */ @media (min-width: 768px) and (max-width: 1080px) { .zmit .zab-stack > .z-container { max-width: 1044.3px; padding: 0 20px; } .zmit .zab-stack-head { border-bottom: 1px solid #ddd; } .zmit .zab-stack-head h2 { line-height: 45.11px; margin: 0 0 20px; } .zmit .zab-stack-tabs { grid-template-columns: 22% minmax(0, 1fr); gap: 0; height: 500px; align-items: stretch; } .zmit .zab-stack-rail { flex-direction: column; gap: 10px; height: 450px; margin-top: 50px; padding: 0 20px 0 0; overflow-x: hidden; overflow-y: scroll; } .zmit .zab-stack-tab { white-space: normal; } .zmit .zab-stack-panels { border-left: 1px solid #ddd; padding: 50px 0 0 50px; } .zmit .zab-stack-card { gap: 0; min-height: 0; align-items: flex-end; } .zmit .zab-stack-card img { flex: 0 0 auto; height: auto; width: min(52px, calc(100% / 6)); margin-right: calc(100% / 6 - min(52px, calc(100% / 6))); } .zmit .zab-stack-card span { font-size: 16px; line-height: 20.8px; margin-bottom: 10px; } } /* Rail scroll thumb, everywhere the rail scrolls (>=768; phones are an accordion): WP f2691b8's custom CSS draws a 5px #7f8ea7 rounded thumb at ALL its rail widths. Ours had none, so >=1081 fell back to the browser's 15px default bar - which Windows 11 Chrome hides until hover, i.e. "no scroll button". */ @media (min-width: 768px) { .zmit .zab-stack-rail::-webkit-scrollbar { display: inline-block; width: 5px; } .zmit .zab-stack-rail::-webkit-scrollbar-track { border-radius: 100px; } .zmit .zab-stack-rail::-webkit-scrollbar-thumb { background: #7f8ea7; border-radius: 10px; } } /* 1025-1080 is WP's desktop mode: its grid box is max-width 98%, centred (7.3px in each side at 1080); at 768-1024 it is the full panel width. */ @media (min-width: 1025px) and (max-width: 1080px) { .zmit .zab-stack-grid { max-width: 98%; margin: 0 auto; } } /* S18 FINAL CTA — TABLET ONLY (768-1080): match the WP component (post 8864), which keeps copy + photo SIDE BY SIDE at tablet (ours stacked them). Measured on WP at 768/820/1024/1080: card 30px in from the edges (max 983.7 wide), a no-wrap row 20 apart; copy basis 60% of the card (70% from 1025), padding 30, a centred 20px-gap column, shrinking with the photo; photo basis 500 at its natural ratio, bottom-aligned, pulled up 10% of the card width from 881 (head above the card); 80px above/below to 880, 120/80 from 881. Type: h2 33.05/42.965, text 17.16/25.2, button 15.38px radius 5 icon gap 16. Phones (<=767) and desktop (>=1081) untouched. */ @media (min-width: 768px) and (max-width: 1080px) { .zmit .zmit-final.z-section { padding: 120px 0 80px; } .zmit .zmit-final > .z-container { max-width: 1043.7px; padding: 0 30px; } .zmit .zmit-final-banner { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; gap: 20px; overflow: visible; } .zmit .zmit-final-copy { flex: 0 1 70%; min-width: 0; max-width: none; box-sizing: border-box; padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 20px; } .zmit .zmit-final-copy h2 { font-size: 33.05px; line-height: 42.965px; letter-spacing: normal; margin: 0; } .zmit .zmit-final-copy p { font-size: 17.16px; line-height: 25.2px; max-width: none; margin: 0; } .zmit .zmit-final-copy .zab-btn-final { align-self: flex-start; font-size: 15.38px; border-radius: 5px; gap: 16px; } .zmit .zmit-final-media { flex: 0 1 500px; min-width: 0; align-self: flex-end; margin-top: -10%; } .zmit .zmit-final-media img { display: block; width: 100%; max-width: none; height: auto; margin: 0; object-fit: cover; } } @media (min-width: 768px) and (max-width: 1024px) { .zmit .zmit-final-copy { flex-basis: 60%; } } @media (min-width: 768px) and (max-width: 880px) { .zmit .zmit-final.z-section { padding: 80px 0; } .zmit .zmit-final-media { margin-top: 0; } } /* S08 rail thumb drawn by the page script where the browser shows no scrollbar of its own (iPad/iPhone Safari, macOS overlay scrollbars): same 5px #7f8ea7 rounded bar as WP, pinned to the rail's right edge. Positioned against the tab box; out of flow, so it never takes a grid cell or moves anything. */ .zab-stack-thumb { display: none; } @media (min-width: 768px) { .zmit .zab-stack-tabs { position: relative; } .zmit .zab-stack-thumb:not([hidden]) { display: block; position: absolute; width: 5px; background: #7f8ea7; border-radius: 10px; pointer-events: none; } } /* S06 BOOK A FREE CONSULTATION — phones + tablets (<=1080): 30px above the heading. WP 62d08e2 sits 30 below the certifications band at every width (measured at 375/820/1024/1440); ours had 30 only from 1081 (padding 0 base), so below that the heading touched the band. Top only - bottom and desktop untouched. */ @media (max-width: 1080px) { .zmit .zmit-bookcal.z-section { padding-top: 30px; } } /* stats-1row (2026-10-08): on tablet the 3 metrics sit in ONE row under the CTA, like enterprise-software-development-company. Grid columns only; overrides the two-up tablet rule above (which wrapped them 2+1). */ @media (max-width: 1080px) and (min-width: 681px) { .zmit .zmit-stats .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ LINKED TECH-STACK CARDS (owner 2026-10-22): a tool with a dedicated page links the whole card (it-managed-services pattern). Same look as the unlinked cards at rest - no underline, dark label - and the reference's hover: lift 4px + soft shadow, label stays dark. Unlinked cards (div) are untouched. ============================================================ */ .zmit a.zab-stack-card { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .zmit a.zab-stack-card:hover, .zmit a.zab-stack-card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 20, 43, .10); } .zmit a.zab-stack-card:hover span { color: #141414; } @media (prefers-reduced-motion: reduce) { .zmit a.zab-stack-card:hover, .zmit a.zab-stack-card:focus-visible { transform: none; } } /* Consultant (final) band on PHONES: the photo is shown WHOLE at its own proportions (owner 2026-10-22 - a fixed 500px object-fit:cover box cut people off). It spans the full card width (the largest it can be without cropping) and sits on the card's bottom edge. Phones only. */ @media (max-width: 680.98px) { body .zmit section.zmit-final .zmit-final-banner .zmit-final-media img { position: static; display: block; width: 100%; max-width: none; height: auto; max-height: none; aspect-ratio: 974 / 1024; object-fit: contain; object-position: center bottom; margin-left: 0; margin-right: 0; } }