/* ============================================================ outsourced-cybersecurity-services — page-specific layer. 19 live depth-0 bands at 1440 (20 renderings: fb82707 ships BOTH the desktop compare table and a mobile-only accordion, which is display:none at/above tablet_extra). Loads AFTER css/it-managed-services-zazz.css. Built band by band. ZERO of this template's band ids appear anywhere else in the repo, so nothing was cloned wholesale: where a component already existed it was reused and only this page's MEASURED deltas are written here. The reference for each band is named in its own comment. MEASURED ON LIVE AT 1440 (window.innerWidth === 1440 asserted in the same evaluation as every reading below; nothing here is computed): - Live's boxed bands run 1400 at x20 and the services grid is full-bleed 1440. The house 1400px .z-container is KEPT — owner decision 2026-08-26, CLAUDE.md §7 "Never widen the content box". Percentage column splits are used so the proportions carry. - Hero: banner 1440x633 at t100; H2 54px/600/64.8px white, 766 at x30 (4 lines, 259 tall); sub 766 at x30; CTA 484x42; form title 20px/600; .hsfc-Form 465x458 at x918 t262. - Services: TEN cards, TEN linked. Grid FOUR columns (337.5px x4, gap 30). Card border 1px #eff0f7, radius 10, inner fill #eff0f7, padding 30. Title 18px/700/23.4px #14142b, m 0 0 20; bullets 14px/23.1px. Card heights CONTENT-DRIVEN (305 / 290) because the CTA row is ABSOLUTE (left 30 / right -30 / bottom 12, 34 tall) and therefore cannot grow the card. Eyebrow 16.31px/700/25.2px; lead 34.7px/400/43px. - Compare heading (dce398f): 36.8px/400/36.8px rgb(20,20,20) LEFT. - Compare table (fb82707): 3 columns 457 at x20 / x492 / x963 (gap 15), container radius 10; header cells 72 tall WHITE, body cells 100, both padding 20px 30px; FIVE rows. col-0 carries live's 3-layer gradient (read off the column's own backgroundImage — a backgroundColor-only read reports none) with transparent cells; col-1 #eff0f7 with even rows #f9fcff and a top hairline on EVERY row; col-2 #fff with odd rows #f9fcff and the hairline on row 1 only. Hairline rgba(6,0,28,.12). - Certifications (b7f8d3a): band #e6ebf5 padding 65; h2 47px/600/65px #000 centred (644 wide); lead 16px/400/26px #5e5e5e centred (600); SIX WHITE tiles 429x179 at x65 / x506 / x946 (gap 12), tile padding 24px 12px; tile h3 24px/600/36px #020101, p 14px/400/22px #5e5e5e. - Bookcal (62d08e2): h2 30px/400/39px #14142b CENTRED. - Endorsed band (efa2c74): h2 30px/300/42px #fff, lead 16px/300/26.4px #f2f7ff — the dark rgb(20,20,20) shell is the shared sheet's and is deliberately NOT re-specified. - NIST (3320fe0): white band; h2 40px/600/56px rgb(20,20,20) centred over the full box; lead 16px/26.4px #5e5e5e centred (1152 wide). Row of FIVE white radius-10 panels 320 tall, gap 20: the OPEN one 800 wide at x40, the four collapsed 120 wide at x860 / x1000 / x1140 / x1280. Label column 170 wide, padding 20px 50px; icon 70x70 circle #ebebeb with a 36x36 glyph rgb(37,2,255); letter 90px/400 (the collapsed-state marker). Body 530 wide at x260, vertically centred: h3 24px/600/31.2px rgb(20,20,20), p 16px/400/26.4px. - Process (077adf2): TWO COLUMNS — copy 720 at x0 and accordion 720 at x720 share a top and 720 > 0 + 200, so sideBySide is TRUE. h2 30px/400/39px. Accordion items 660x77, 7px apart, ALL FIVE CLOSED on load (413 = 5x77 + 4x7); header #262338 with 16px/400/26.4px #fcfcfc, padding 25, radius 5. - Stats (0a92459): #262338, padding 80px 30px; copy column 443 at x30 | counters 887 at x523 laid out TWO PER ROW (cells 399 at x523 / x942, the third wrapping to x523) — this page's stats grid is 2-COL with 3 stats, NOT the shared 3-col default. Eyebrow 16.73px/600/25.2px #fcfcfc; heading 34px/400/44.2px #fcfcfc; number 57px/600 #76aaff; label 15.63px/400/24px #fcfcfc. - Advantages (f32c08a): #eff0f7; copy 665 at x30 | 2x2 card grid 665 at x745 (cells 322.5, gap 20) — same top, so sideBySide TRUE. Cards TRANSPARENT with 20px padding; 50px icon; title 19px/700/28px rgb(20,20,20); copy 15px/400/22.5px rgba(20,20,20,.7). h2 34.7px/400/43px. - Testimonials (69fd3c7): h2 38px/300/49.4px LEFT; slide card 1380x400, radius 5, padding 80. - Stories (4efee80): 3 cards 410 wide at x25 / x515 / x1005; card title 18px/700/25.2px. - Overview (cbab533): h2 34px/400/44.2px, copy 15.5px/400/24px, 665 copy column | 665 figure. - Articles (54fce8f): h2 30px/300/39px; 3 cards 477 wide; date 16px/400 #000; title 24px/600/28.8px. - FAQ (19a44fa): h2 34px/400/44.2px LEFT; TWO real columns 662 at x30 / x722. Rows are DARK — #262338 with 16px/400/26.4px #fcfcfc, padding 25, radius 5 — NOT the shared light FAQ row. 11 items, live's two widgets split 6 / 5, so the forced column break sits on nth-child(6). - Final CTA (01493ef): no band fill; h2 33.05px/600/42.965px; figure 500x576 at x910. - Contact (151487f): photo-backed (post-8978.css names the file), padding 50px 0; h2 33.89px/300/43px #fcfcfc CENTRED; white form card 966 wide at x237, radius 8, padding 30. - Pre-footer (412acac): #000, 80px vertical padding; title 28px/400 #fff. Owner-approved deviations from live, tagged inline: hero headline 42px not live's 54, stat number left-aligned, marquee chips bounded on both axes, certification badges at natural aspect, the 1400px container. 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; /* live global accent */ --zab-body: rgba(20, 20, 20, .7); /* live global text */ --zab-line: rgba(6, 0, 28, .12); /* compare-table hairline */ --zab-fill: #eff0f7; /* card fill */ --zab-dark: #262338; /* stats + accordion header */ } /* ============================================================ S01 HERO — approved Family A geometry; only the artwork is this page's. Live paints the banner as a plain img with object-fit:fill (stretched, not cropped) — center/100% 100% is the background equivalent. ============================================================ */ .zmit-hero::before { background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/10/06095913/Outsourced-Cybersecurity-Services-Main-Banner-scaled.webp') center/100% 100% no-repeat; background-color: #05070f; } .zmit-hero-left { padding-bottom: 56px; } @media (min-width: 1081px) { .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; } /* 766 / 100 / 508 of live's 1400 box, as percentages. */ .zmit .zmit-hero-grid { /* helpdesk's split, ported so the card width matches (499 not 486). */ 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 (live here measures 54px/600/64.8px). Deliberate deviation, applied on request across this page family. */ .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; } .zmit-hero .zmit-hero-sub { max-width: 766px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; } .zmit-hero .zmit-hero-cta { margin-bottom: 0; } .zmit-hero .zmit-hero-cta-btn { font-size: 16px; line-height: 16px; font-weight: 500; padding: 13px 35px; gap: 20px; background: #f2f7ff; border: 0; min-height: 42px; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; } .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; } /* Live's white hero CARD, found by its own styling and never by walking up from the form: the card is stretched to the hero row and overhangs the banner into the logo strip (live's own composition). */ /* OWNER DEVIATION 2026-09-22: `start`, not `stretch`. With stretch the column takes the taller copy column's height and the card below it (height:100%) inherits it, leaving dead white under the form. Live itself carries 56-110px of that slack; the owner asked for it gone, so this is deliberately tighter than live. */ /* OWNER 2026-10-06: `end`. The card's bottom must land on the logo strip at EVERY two-column width, as on 1password-support-services (card bottom = band bottom - 30 everywhere). With `start` it did at 1440, but at tablet landscape (1112-1366) the 4-line headline makes the copy column the taller one and the card stopped 73-95px short, mid-strip. `end` pins the margin box to the row's end, so the bottom is always row end + 95.55 — whichever column drives the row — and the slack goes ABOVE the card rather than inside it (1password's `stretch` + height:100% would leave it as dead white under the Submit, which is what the 2026-09-22 deviation removed). At 1440 the two are ~equal height, so the top barely moves. */ .zmit .zmit-hero-right { align-self: end; margin: -44px 0 -95.55px; } .zmit-form-card { margin: 0; height: auto; transform: none; padding: 20px 25px 20px 20px; } .zmit-form-card h3 { margin-bottom: 12px; font-size: 20px; line-height: 1.35; } /* Scoped to the wrapper: a bare .zmit-hsform rule also hits the contact band and the FOOTER newsletter (CLAUDE.md §9). */ /* Three classes on purpose: the shared sheet's 3-class 423px reserve beats a 2-class rule here, and this page's form renders 390 at 1081+, so the 423 showed as 33px of white inside the card. 390 keeps the CLS reserve without exceeding the form (CLAUDE.md 9). */ .zmit .zmit-form-card .zmit-hsform { min-height: 390px; } /* Live's hero form renders 548 tall in a 699 card (56px of slack). The compaction that used to sit here (row 8px, input 8px 12px, textarea 56px, button 10px) squeezed ours to 471 and left 141px of dead white inside a correctly sized card. These values measure 555 / 68 - live's own rhythm. Do not re-compact without re-measuring the card. */ .zmit-form-card .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; } .zmit-form-card .zmit-hsform input, .zmit-form-card .zmit-hsform textarea, .zmit-form-card .zmit-hsform select, .zmit-form-card .zmit-hsform .hsfc-TextInput, .zmit-form-card .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; } .zmit-form-card .zmit-hsform .hsfc-TextareaInput, .zmit-form-card .zmit-hsform textarea { min-height: 56px !important; } .zmit-form-card .zmit-hsform .hsfc-Button, .zmit-form-card .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. Owner request 2026-08-26: every marquee logo bounded on BOTH axes, so the chip height and the max- pair move together and `height` is never set on the image itself. */ .zmit .zmit-trust-band { padding: 15px 0 40px; } .zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; } .zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; } .zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; } /* ============================================================ SHARED PAGE BUTTON — label first, then arrow (live's own order). ============================================================ */ .zmit .zab-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15.38px; font-weight: 600; line-height: 16px; color: #fcfcfc; background: var(--zab-accent); border-radius: 5px; padding: 15px 30px; text-decoration: none; transition: background .2s ease; } .zmit .zab-btn:hover { background: #141414; color: #fcfcfc; } .zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; } .zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; } .zmit .zab-btn-ico svg path { fill: currentColor; } /* stats CTA: accent label on a pale pill */ .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); } .zmit .zab-btn-accent { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; } .zmit .zab-btn-final { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; } /* Owner 2026-10-06: hover darkens the blue (#0b4fd0, as the CTA on outsource-software-development) instead of flipping to black. */ .zmit .zab-btn-final:hover { background: #0b4fd0; color: #fff; } /* ============================================================ S02 SERVICES — 10 cards, FOUR columns / 30px gap (measured). ============================================================ */ .zmit .zmit-services.z-section { padding: 0 0 80px; } .zmit-services-head { margin-bottom: 14px; } .zmit .zmit-services-head h2.z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); text-transform: none; letter-spacing: 0; margin: 0 0 10px; display: inline-block; } .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 { /* position:relative because live's CTA row is ABSOLUTE inside the card (left 30 / right -30 / bottom 12) — see the hover block below. */ position: relative; display: flex; flex-direction: column; background: var(--zab-fill); border: 1px solid #eff0f7; border-radius: 10px; padding: 30px 30px 56px; text-decoration: none; transition: border-color .3s ease, background-color .3s ease, transform .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 with padding-left 18px) — adding a native disc gives TWO dots per bullet. */ .zmit-services-grid .zmit-svc-card ul { margin: 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; } /* HOVER — MEASURED with a real pointer on THIS page's live widget (uc_service_grid_card_elementor_ff70067), transitions zeroed, el.matches(':hover') asserted TRUE, and a resting sibling read in the same pass as a control: border #eff0f7 -> #0161ff fill #eff0f7 -> #d5e0f3 CTA display none -> block, 34px tall transform none -> matrix(1,0,0,1,-10,-10) radius 10px / box-shadow none — unchanged THIS PAGE LIFTS. Never carry a hover across templates without re-measuring the page being built. :focus-within beside every :hover — the overlay anchor is the only tab stop, so keyboard users must also see the CTA appear. */ .zmit-services-grid .zmit-svc-card.has-link:hover, .zmit-services-grid .zmit-svc-card.has-link:focus-within, .zmit-services-grid .zmit-svc-card:has(.z-explore):hover, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { border-color: #0161ff; background: #d5e0f3; transform: translate(-10px, -10px); } @media (prefers-reduced-motion: reduce) { .zmit-services-grid .zmit-svc-card.has-link:hover, .zmit-services-grid .zmit-svc-card.has-link:focus-within, .zmit-services-grid .zmit-svc-card:has(.z-explore):hover, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: none; } } /* This template's CTA row is live's ABSOLUTE variant: left 30 / right 30 / bottom 12, so the card height is content-driven and identical resting and hovered, and every card's CTA sits the same 12px off its own bottom edge whatever its bullets wrap to. `visibility` rather than `display` keeps the box measurable so the bottom-gap assertion is meaningful. This is NOT the root-city in-flow reserve (visibility:hidden + margin-top:auto + padding-top:10px on a constant-height card) — the two templates must not be cross-contaminated. */ .zmit-services-grid .zmit-svc-card .zmit-svc-cta { position: absolute; left: 30px; right: 30px; bottom: 12px; display: flex; align-items: center; height: 34px; visibility: hidden; margin-top: 0; padding-top: 0; } .zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta, .zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta, .zmit-services-grid .zmit-svc-card:has(.z-explore):hover .zmit-svc-cta, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within .zmit-svc-cta { visibility: visible; } .zmit-svc-cta .z-svc-more { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; line-height: 23.1px; color: #000; text-decoration: none; } .zmit-svc-cta .z-svc-more:hover, .zmit-svc-cta .z-svc-more:focus { color: #000; text-decoration: none; } .zmit-svc-cta .ico { display: inline-flex; align-items: center; } .zmit-svc-cta svg { display: block; width: 14px; height: 8px; } /* ============================================================ S03 COMPARISON HEADING (dce398f) — heading-only band. ============================================================ */ .zmit .zab-cmp-head.z-section { background: #fff; padding: 50px 0 15px; } .zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; font-weight: 400; text-align: left; color: #141414; margin: 0; } /* ============================================================ S04b COMPARISON TABLE (fb82707) — DESKTOP ONLY. Live's own accordion in the same band measures display:none at 1440. ============================================================ */ /* Owner 2026-10-06: 60px under the table — it sat flush on the certifications band. Desktop only; below 1081 the accordion (padding-bottom 30) renders. */ .zmit .zab-cmp.z-section { background: #fff; padding: 0 0 60px; } .zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; } .zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .zmit .zab-cmp-col-head { background: #fff; padding: 20px 30px; margin: 0; height: 72px; display: flex; align-items: center; font-size: 24px; font-weight: 600; line-height: 32px; color: #141414; } .zmit .zab-cmp-cell { margin: 0; padding: 20px 30px; height: 100px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 23px; color: #06001c; border: 1px solid var(--zab-line); border-top-width: 0; } .zab-cmp-cell a { color: var(--zab-accent); } /* ONE flex item per cell: an inline link plus a bare text node would become two items and wrap independently, scrambling the sentence. */ .zmit .zab-cmp-cell > span { display: block; width: 100%; } .zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; } /* Key Factor column: live's 3-layer gradient (a 70% white veil over two blue gradients), read off the column's own backgroundImage. Cells transparent so it shows through. NEVER flatten it. */ .zab-cmp-col-0 { background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%), linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); } .zab-cmp-col-0 .zab-cmp-cell { background: transparent; } .zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); } .zab-cmp-col-2 .zab-cmp-cell { background: #fff; } /* Live's stripes, read cell by cell at 1440 on this page: Zazz col rows 1-5 = #eff0f7 / #f9fcff / #eff0f7 / #f9fcff / #eff0f7 Others col rows 1-5 = #f9fcff / #fff / #f9fcff / #fff / #f9fcff Written nth-of-type, never an enumerated list — an enumerated list silently drops off the bottom rows of a longer table. */ .zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; } .zab-cmp-col-2 .zab-cmp-cell:nth-of-type(odd) { background: #f9fcff; } /* Zazz-column hairline on EVERY row — row-count-independent house rule. */ .zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; } .zab-cmp-acc { display: none; } /* ============================================================ S04a COMPARISON ACCORDION — MOBILE/TABLET ONLY, the only rendering of this band below 1081. Native details, as live. ============================================================ */ @media (max-width: 1080px) { .zab-cmp { display: none; } .zab-cmp-acc { display: block; } } .zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; } .zab-acc-item { background: var(--zab-fill); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .zab-acc-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--zab-ink); background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%), linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); } .zab-acc-q::-webkit-details-marker { display: none; } .zab-acc-sign { position: relative; flex: 0 0 16px; height: 16px; } .zab-acc-sign::before, .zab-acc-sign::after { content: ''; position: absolute; background: var(--zab-ink); } .zab-acc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; } .zab-acc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; } .zab-acc-item[open] .zab-acc-sign::after { opacity: 0; } .zab-acc-a { padding: 0; } .zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; background: var(--zab-fill); } .zab-acc-row:last-child { background: #f9fcff; } .zmit .zab-acc-row h3 { font-size: 18px; font-weight: 500; line-height: 1.3; color: #0161ff; margin: 0 0 6px; } .zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin: 0; } /* ============================================================ S05 CERTIFICATIONS (b7f8d3a) — light #e6ebf5 band, SIX white tiles 3-up. Badge sizing: NATURAL aspect at the file's REAL intrinsic 134x134 (verified by fetching the asset). Live squashes them to 131x87 with object-fit:fill; CLAUDE.md's badge rule (natural aspect, gap'd grid) outranks copying that distortion. NEVER gap:0 plus a forced aspect-ratio. ============================================================ */ .zmit .zab-certified.z-section { background: #e6ebf5; padding: 65px 0; } .zmit .zab-certified h2 { font-size: 47px; font-weight: 600; line-height: 65px; color: #000; text-align: center; max-width: 700px; margin: 0 auto; } .zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26px; color: #5e5e5e; text-align: center; max-width: 600px; margin: 5px auto 0; } .zab-certified-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; align-items: stretch; } .zab-cert-box { display: flex; align-items: center; gap: 20px; background: #fff; padding: 24px 12px; min-height: 179px; } .zab-cert-box img { width: 131px; height: auto; flex: 0 0 131px; object-fit: contain; display: block; } .zmit .zab-cert-box h3 { font-size: 24px; font-weight: 600; line-height: 36px; color: #020101; margin: 0 0 5px; } .zmit .zab-cert-box p { font-size: 14px; font-weight: 400; line-height: 22px; color: #5e5e5e; margin: 0; } /* ============================================================ S06 BOOK A FREE CONSULTATION (62d08e2) ============================================================ */ /* Owner 2026-10-06: the heading sat flush on the certifications band. */ .zmit .zmit-bookcal.z-section { padding: 60px 0 0; } @media (max-width: 680px) { .zmit .zmit-bookcal.z-section { padding-top: 40px; } } .zmit .zmit-bookcal h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: var(--zab-ink); } .zmit .zmit-bookcal-embed { margin-top: 20px; } /* ============================================================ S07 ENDORSED BY LEADING PLATFORMS (efa2c74) — the dark rgb(20,20,20) shell, radius 10 and 40px padding are ALREADY CORRECT in the shared sheet and are deliberately NOT re-specified. Only type and the logo row here. ============================================================ */ /* DEFECT 1 (2026-09-22) — "a large empty area follows the band". 120/180 is live's own padding, but it was copied WITHOUT live's own `margin: -145px 0` on the same container, which cancels most of it. Measured on the WordPress original at 1440, in view and settled (page 35645, reached at /Outsourced-Cybersecurity-Services - the capitalised slug misses the case-sensitive .php file so WordPress still serves it; ?page_id=35645 now 301s to our own build): container efa2c74 .. 1440 x 652, padding 120px 0 180px, margin -145px 0 panel 3a69e1b ...... 1380 x 352 at x30, #141414, radius 10, padding 40 prev container ..... bottom 4376, so the panel top sits 26 ABOVE it and the calendar's own visible bottom is 52 above next container ..... top 4737 = panel bottom + 35 Net rendered rhythm is therefore ~52 clear above the panel and 35 below, NOT 120/180. Our calendar embed has no trailing iframe slack, so reproducing live's -145 literally would drop the panel ON TOP of it; the measured NET gaps are restated here instead. Ours before: 120 above, 180 below (652-tall section) - the owner's empty area. */ .zmit .zmit-recognized.z-section { padding: 52px 0 35px; } .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: 26.4px; color: #f2f7ff; max-width: 877px; } .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; } /* ============================================================ S08 NIST FRAMEWORK (3320fe0) — white band; row of FIVE white radius-10 panels 320 tall, gap 20; the OPEN one 800 wide, the four collapsed 120. The 90px letter is the collapsed-state marker, which is why the open panel appears to have none (it goes white on the white card). ============================================================ */ .zmit .zab-nist.z-section { background: #fff; padding: 65px 0; } .zmit .zab-nist h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #141414; text-align: center; margin: 0 0 30px; } .zmit .zab-nist-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #5e5e5e; text-align: center; max-width: 1152px; margin: 0 auto 30px; } .zab-nist-row { display: flex; flex-direction: column; gap: 20px; } /* Panel chrome measured on live at 1440 (all five panels identical): border-width 0 and a soft box-shadow — NOT a hard border. Ours drew 1px solid var(--zab-line) with no shadow, which read as a hard outline live does not have. */ .zab-nist-item { background: #fff; border: 0; border-radius: 10px; box-shadow: 0 0 14px 2px rgba(0, 31, 31, 0.08); overflow: hidden; transition: flex-basis .35s ease; } .zmit .zab-nist-tab { display: flex; align-items: center; gap: 20px; width: 100%; background: none; border: 0; padding: 20px; cursor: pointer; } .zab-nist-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; background: #ebebeb; color: rgb(37, 2, 255); } .zab-nist-ico svg { display: block; width: 36px; height: 36px; } .zab-nist-letter { font-size: 90px; font-weight: 400; line-height: 90px; color: #c2c2c2; } .zab-nist-item.is-open .zab-nist-letter { color: #fff; } /* Screen-reader name on the control: the visible name lives in the body, which is hidden while collapsed, so the button would otherwise be unlabelled. */ .zab-nist-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .zab-nist-body { padding: 0 20px 24px; } .zmit .zab-nist-body h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #141414; margin: 0 0 20px; } .zmit .zab-nist-body p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000; margin: 0; } @media (min-width: 1081px) { /* 800 open / 120 collapsed of live's 1360 row, with the 20px gaps. */ .zab-nist-row { flex-direction: row; align-items: stretch; height: 320px; } .zab-nist-item { flex: 0 0 120px; display: flex; flex-direction: column; } .zab-nist-item.is-open { flex: 1 1 auto; flex-direction: row; align-items: center; } .zmit .zab-nist-tab { width: auto; flex: 0 0 170px; flex-direction: column; justify-content: center; gap: 20px; padding: 20px 50px; } .zab-nist-body { display: none; } .zab-nist-item.is-open .zab-nist-body { display: block; flex: 1 1 auto; padding: 0 50px; } } @media (prefers-reduced-motion: reduce) { .zab-nist-item { transition: none; } } /* ============================================================ S09 PROCESS (077adf2) — TWO COLUMNS, confirmed with the sideBySide test: copy 720 at x0 and accordion 720 at x720 share a top and 720 > 0 + 200. Accordion: native details, all five CLOSED on load (413 = 5x77 + 4x7). DARK ROW HEADER => LIGHT COPY. ============================================================ */ .zmit .zab-proc.z-section { background: #fff; padding: 50px 0 60px; } .zab-proc-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 20px; } .zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 20px; } .zmit .zab-proc-copy p:last-child { margin-bottom: 0; } .zab-proc-copy a { color: var(--zab-accent); } .zab-proc-acc { display: flex; flex-direction: column; gap: 7px; } .zab-proc-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; } .zab-proc-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 25px; cursor: pointer; list-style: none; min-height: 77px; font-size: 16px; font-weight: 400; line-height: 26.4px; color: #fcfcfc; } .zab-proc-q::-webkit-details-marker { display: none; } .zab-proc-sign { position: relative; flex: 0 0 16px; height: 16px; } .zab-proc-sign::before, .zab-proc-sign::after { content: ''; position: absolute; background: #fcfcfc; } .zab-proc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; } .zab-proc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; } .zab-proc-item[open] .zab-proc-sign::after { opacity: 0; } .zab-proc-a { padding: 0 25px 25px; } .zmit .zab-proc-a p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #f7f7fc; margin: 0; } .zab-proc-a a { color: #a9c9ff; } @media (min-width: 1081px) { /* 720 | 720 of live's 1440 row; live's own 60px inner gutter comes from the two 30px column paddings, so a 50px grid gap reproduces the same rhythm inside the narrower house container. */ .zab-proc-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } } /* ============================================================ S10 STATS (0a92459) — #262338. Copy column 443 at x30 | counters 887 at x523 laid out TWO PER ROW: cells 399 at x523 / x942 with the third wrapping back to x523. So this page is a 2-COLUMN stats grid with 3 stats, NOT the shared 3-col default (CLAUDE.md: match live's column count). DARK BAND => LIGHT COPY. ============================================================ */ .zmit-stats { background: var(--zab-dark); } .zmit .zmit-stats.z-section { margin: 0; padding: 80px 0; } .zmit-stats-copy { max-width: none; } .zmit .zmit-stats-copy h2.zmit-stats-eyebrow { font-size: 16.73px; font-weight: 600; line-height: 25.2px; color: #fcfcfc; margin: 0 0 20px; display: block; letter-spacing: normal; text-transform: none; } /* 50px, not 40 — live's copy column is 286 tall at 1440 (eyebrow 25, +20, h3 133, +50, CTA 58) and ours was 276. */ .zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 50px; } /* Live's stats CTA packs its label CENTRED with the arrow pinned to the far right, not the whole lot flushed left. Measured on live at 1440: button 443x58 filling its column, content wrapper 373 wide (= 443 - 2x35 padding) holding a 341-wide text block then a 16px arrow, 16px apart — so the label takes the remaining width and centres inside it. Everything else already matched live: background #f2f7ff, colour #0161ff, radius 8, padding 13px 35px, 16px/500/16px, height 58. */ .zmit .zmit-stats-copy .zab-btn { gap: 16px; } .zmit .zmit-stats-copy .zab-btn > span:not(.zab-btn-ico) { flex: 1 1 auto; text-align: center; } @media (min-width: 1081px) { .zmit-stats-layout { grid-template-columns: 443fr 887fr; gap: 50px; align-items: center; } /* TWO columns — live's own wrap (cells 399 at x523 / x942, third at x523). */ /* THREE columns for THREE stats (CLAUDE.md §7 "Stats band: column count matches live" — 3-col for a 3-stat page). DELIBERATE DEVIATION FROM LIVE, do not "fix" back: live's own grid here is TWO per row (measured at 1440, in view and settled: cells 399 wide at x523 and x942, the third wrapping to x523 on a second row), which leaves the third stat orphaned beside an empty half-row. The owner reported that 2+1 as broken, so we render 3-up. The row gap also drops from 62 to live's 20 — with one row it no longer applies, and it was never live's number. The band stays copy-driven either way (copy column 286 vs a single 99px counter row), so this costs no height against live. */ .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } } .zmit-stat { display: flex; flex-direction: column; } .zmit-stat p { font-size: 15.63px; font-weight: 400; line-height: 24px; 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; } /* ============================================================ S11 ADVANTAGES (f32c08a) — #eff0f7; copy 665 at x30 | 2x2 card grid 665 at x745 (cells 322.5, gap 20), same top => sideBySide TRUE. Cards are TRANSPARENT: the band is the fill. ============================================================ */ .zmit .zab-elevate.z-section { background: var(--zab-fill); padding: 50px 0 30px; } .zab-elevate-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-elevate-copy h2 { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 24px; } .zmit .zab-elevate-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; 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: 20px; align-content: start; } .zab-elevate-card { padding: 20px; } .zab-elevate-ico { display: block; margin-bottom: 15px; } .zab-elevate-ico svg { display: block; width: 50px; height: 50px; } .zmit .zab-elevate-card h3 { font-size: 19px; font-weight: 700; line-height: 28px; 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; } } /* ============================================================ S12 TESTIMONIALS (69fd3c7) — 10 slides; h2 38px/300/49.4px LEFT; the slide card has 80px padding and a 5px radius. CARD HEIGHT IS CONTENT-DRIVEN — no min-height. Owner defect 2026-09-21: "large empty area below the card's content". Live's card measures 1380x400 at 1440, but that 400 is NOT authored: live's Swiper equalises all ten slides to the tallest (its slide 1 content is 240, so 240 + 80 + 80 = 400) and its other nine slides then carry 47-48px of dead gradient. Our slide content measures 163 on every one of the ten slides, so the inherited min-height:400 left 77px of visible slack. Dropping it (and the shared sheet's own min-height:268, and the quote's stray 18px bottom margin) gives a 323px card with zero slack and, because all ten slides are the same height, no jump when the carousel advances. Do NOT reinstate a min-height here. ============================================================ */ .zmit .zmit-testi.z-section { padding: 80px 0; } .zmit-testi h2 { font-size: 38px; font-weight: 300; line-height: 49.4px; 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%); border-radius: 5px; padding: 80px; min-height: 0; } .zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; } /* The card hugs the CURRENTLY SHOWN slide - it is NOT equalised to the tallest one. Owner's instruction 2026-09-21: "watch for a carousel sizing all slides to the tallest", which is exactly what live's Swiper does and what leaves 47-48px of dead gradient on nine of live's ten slides. The shared sheet centres the single visible slide in a flex card; with min-height gone that leaves no slack at any width. Consequence: below 1081 the slides wrap to different heights, so the card resizes as the carousel advances. At 1440 every slide measures the same height, so nothing moves there. */ .zmit-testi-card { align-items: flex-start; } /* The quote paragraph inherits an 18px bottom margin from the sitewide p rule, which sat UNDER the 80px padding as an extra 18px of dead gradient. Zero it on whatever is last in the slide so the card reads 80 / content / 80. */ .zmit-testi-slide > :last-child { margin-bottom: 0; } /* ============================================================ S13 SUCCESS STORIES (4efee80) — card + 50px left-aligned brand logo (approved Family A rule). Card title 18px/700/25.2px. ============================================================ */ .zmit .zmit-stories.z-section { padding: 0; } .zmit-stories h2 { font-size: 30px; font-weight: 300; line-height: 39px; color: #141414; margin-bottom: 30px; } .zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; } .zmit-story-img img { height: 250px; } .zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; } .zmit-story .body .zmit-story-logo { display: block; height: 50px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; } .zmit-story .body { padding: 20px; } .zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 25.2px; } .zmit-story p { font-size: 14px; line-height: 1.6; } /* ============================================================ S14 OVERVIEW + FIGURE (cbab533) — copy 665 | 665 figure. ============================================================ */ .zmit .zab-empower.z-section { background: #fcfcfc; padding: 30px 0 80px; } .zab-empower-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-empower-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0 0 24px; } .zmit .zab-empower-copy p { font-size: 15.5px; font-weight: 400; line-height: 24px; color: var(--zab-ink); margin: 0 0 24px; } .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) { /* OWNER DEVIATION 2026-10-06: CENTER, not live's `start`. The copy runs ~165px taller than the figure, so a top-pinned figure left a blank block under it beside the last paragraph. */ .zab-empower-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } } /* ============================================================ S15 ARTICLES (54fce8f) — image + date + title, NO excerpt (owner ruling) and NO category (live ships none here). Date is live's own 16px/400 #000, not the accent 13px the reference family uses. ============================================================ */ .zmit .zmit-articles.z-section { background: #fff; padding: 30px 0 80px; } .zmit-articles-head { margin-bottom: 29px; } .zmit-articles-head h2 { font-size: 30px; font-weight: 300; line-height: 39px; color: #141414; } .zmit-articles-more { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--zab-accent); border-bottom: 1px solid var(--zab-accent); padding-bottom: 5px; } .zmit-articles-more:hover { color: #141414; border-color: #141414; } .zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; } .zmit-articles-grid { gap: 30px; } .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: 16px; font-weight: 400; line-height: 26.4px; color: #000; margin: 0 0 10px; } .zmit .zmit-article h3 { font-size: 24px; font-weight: 600; line-height: 28.8px; color: #141414; margin: 0; } /* WP category term above the date (inc/zz-wp-feed renders it when the card comes from WordPress) — the same 14/18/500 accent term the Blogs cards use. */ .zmit .zmit-article-cat { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--zab-accent); margin: 0 0 8px; } /* ============================================================ S16 FAQ (19a44fa) — 11 items in TWO columns split 6 / 5. Live's rows are DARK (#262338 with #fcfcfc copy, radius 5, padding 25) — not the shared light row. NEVER a two-value padding shorthand here (it would zero the shared 22px sides), so both values are always restated. ============================================================ */ /* DEFECT 3 (2026-09-22): this said `#fff`, with nothing explaining why. The original's FAQ band is rgb(239, 240, 247) = #eff0f7 (measured on .elementor-element-19a44fa at 1440, in view and settled) — which is also what the shared sheet already sets, so the override was pure loss. */ .zmit-faq { background: #eff0f7; } .zmit .zmit-faq.z-section { padding: 80px 0; } .zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 30px; } .zmit-faq-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; margin-bottom: 7px; } /* weight 600, not 400: the original's .e-n-accordion-item-title-text measures 16px/600/26.4px #fcfcfc on a #262338 summary with padding 25px. */ .zmit .zmit-faq-q { padding: 25px 25px; font-size: 16px; font-weight: 600; line-height: 26.4px; color: #fcfcfc; } /* The shared sheet draws the toggle as a TEXT glyph (`.sign::before { content: "+" }`), not as two bars, so `background` on that pseudo paints a filled rectangle BEHIND the glyph instead of recolouring it — that is the white chip the owner reported. Live's toggle is a bare 16x18 svg in #fcfcfc on a TRANSPARENT ground (measured on live's .e-n-accordion-item-title-icon: backgroundColor rgba(0,0,0,0), color rgb(252,252,252), no border, no radius), so the glyph only needs a colour. */ /* ...and the glyph is BLUE, not white. The icon SPAN's `color` is #fcfcfc, which is the value a naive read returns, but the FontAwesome plus/minus SVG inside it paints from its OWN `fill`: measured rgb(6, 100, 255) on both the open (e-fas-minus) and all 20 closed (e-fas-plus) items, 15.8 x 18, at x652 inside a 25px-padded 662 summary — i.e. flush to the padding edge. Read the svg/path, never the wrapper span. */ .zmit .zmit-faq-q .sign { color: #0664ff; } .zmit .zmit-faq-a-inner { padding: 0 25px 25px; } .zmit .zmit-faq-a-inner p { color: #f7f7fc; font-size: 16px; line-height: 26.4px; } .zmit-faq-a-inner a { color: #a9c9ff; } .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 25px 25px; } .zmit-faq-list { column-gap: 30px; padding-right: 0; } /* Live ships two explicit accordion widgets split 6 / 5 (ce363c2 and f92bc19); 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; } } /* ============================================================ S17 CONSULTATION CTA + FIGURE (01493ef) — no band fill of its own; copy left with the accent CTA and a 500x576 figure right. The SHARED sheet absolutely positions this figure for the REFERENCE band (position:absolute; right:56px; bottom:0; height:320px). This page's band is a two-column row, so that MUST be reset here — otherwise the image leaves its cell, the cell collapses to 0 height, and it covers the copy. ============================================================ */ .zmit .zmit-final.z-section { margin: 0; padding: 0; background: #fff; } .zmit-final-banner { background: none; border-radius: 0; padding: 0; display: flex; align-items: center; gap: 40px; } .zmit-final-copy { max-width: 665px; } .zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.97px; color: var(--zab-ink); margin-bottom: 16px; } .zmit-final-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); max-width: 640px; margin: 0 0 26px; } .zmit-final-media { align-self: end; } .zmit-final-media img { position: static; right: auto; bottom: auto; display: block; width: 100%; max-width: 500px; height: auto; margin: 0 0 0 auto; object-fit: contain; } /* ============================================================ S18 CONTACT (151487f) — photo-backed band (the file is named in live's own post-8978.css), 50px vertical padding; white form card 966 wide. ============================================================ */ .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: 1380px; 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: 26.4px; color: #e6eaf2; max-width: 1100px; margin: 0 auto; } .zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 966px; } .zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; } /* ============================================================ S19 PRE-FOOTER BAND (412acac) — #000, 80px vertical padding. 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; } /* 247, not 225: live's logo cell is 247 wide, which leaves the heading wrapper exactly live's 503 (770 - 247 - 20 gap). */ .zmit-insights-copy { grid-template-columns: 247px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; } .zmit .zmit-insights-logo { height: 55px; width: 247px; object-fit: fill; object-position: left center; } .zmit-insights-copy p.zmit-insights-title { /* line-height 28, not 34 — live's

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, .zmit-stories 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) { /* Owner 2026-10-06: 40px between copy and CTA — with gap 0 the copy ran right up to the button's edge. */ .zmit-recognized-band { grid-template-columns: 67.5% minmax(0, 1fr); gap: 0 40px; } .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) { /* padding-right reserves the pinned arrow's lane (30 offset + glyph + 14) so a narrow track (1081-1300, now 40px narrower for the copy gap) can never wrap the label underneath it. */ .zmit .zmit-recognized-cta .z-btn { position: relative; padding-right: 60px; } .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; } } /* 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); } } /* --------------------------------------------------------------------------- PRE-FOOTER, TABLET (681-1080) - owner, 2026-10-09. Match the reference pages (it-staff-augmentation-services, beyondtrust-services): the 183x41 logo sits BESIDE a 16px title carrying the 2px left rule, and the lead runs full width under both at 14/19.6. The inherited 24/31 title wrapped to 5-7 lines in a narrow column (and an auto-width logo could collapse to 0). --------------------------------------------------------------------------- */ @media (max-width: 1080px) and (min-width: 681px) { .zmit .zmit-insights .zmit-insights-copy { display: grid; grid-template-columns: 183px minmax(0, 1fr); column-gap: 20px; row-gap: 20px; align-items: center; } .zmit .zmit-insights .zmit-insights-logo { grid-column: 1; grid-row: 1; width: 183px; height: 41px; max-width: none; object-fit: contain; object-position: left center; margin: 0; } .zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title { grid-column: 2; grid-row: 1; margin: 0; max-width: none; padding: 0 0 0 10px; border-left: 2px solid #fff; font-size: 16px; line-height: 20px; font-weight: 400; } .zmit .zmit-insights .zmit-insights-copy > p:not(.zmit-insights-title) { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; font-size: 14px; line-height: 19.6px; } } /* 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.zmit-final a.zab-btn.zab-btn-final { background: #0161ff; color: #f2f7ff; } body .zmit section.zmit-final a.zab-btn.zab-btn-final:hover, body .zmit section.zmit-final a.zab-btn.zab-btn-final:focus-visible { background: #141414; color: #f2f7ff; } /* Consultant (final) band on PHONES = the reference layout (managed-it-services-portland, vanta-support-services, tier-2-it-support at 390; owner 2026-10-22): 30px / 20px inside the card, copy 14/25.2, a 13px full-width button, then the photo across the FULL card width at its OWN proportions (never cropped - owner 2026-10-22), 8px under the button and flush with the card's bottom edge. Phones only - tablet and desktop unchanged. */ @media (max-width: 680.98px) { body .zmit section.zmit-final .zmit-final-banner { min-height: 0; padding: 30px 20px 0; row-gap: 0; } body .zmit section.zmit-final .zmit-final-copy { max-width: 100%; margin-bottom: 0; padding-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 / 576; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; } } /* Overview CTA = the reference it-staff-augmentation-services (owner 2026-10-23): blue #0161ff / #f2f7ff, 16px Poppins 500, line-height 16, padding 13.5px 30px, radius 5, 12px to the arrow, hover + focus BLACK #141414 / #fcfcfc. Font and shape are DESKTOP only (the reference itself differs below 1081); hover at all widths. */ body .zmit section.zab-empower a.zab-btn.zab-btn-accent:hover, body .zmit section.zab-empower a.zab-btn.zab-btn-accent:focus-visible { background: #141414; color: #fcfcfc; } @media (min-width: 1081px) { body .zmit section.zab-empower a.zab-btn.zab-btn-accent { font-size: 16px; font-weight: 500; line-height: 16px; padding: 13.5px 30px; border-radius: 5px; gap: 12px; } body .zmit section.zab-empower a.zab-btn.zab-btn-accent > span:not([aria-hidden]) { font-size: 16px; font-weight: 500; line-height: 16px; } }