/* ============================================================
network-security-services — page-specific layer.
Cloned from css/it-infrastructure-management-services.css (this family's sub-reference).
WP ID, 20 live top-level sections. Cloned from
css/managed-it-services-for-accounting-firms.css (approved, LIVE).
Deltas vs that reference, all driven by this page own live DOM:
- hero background swapped to this page own asset
- NO video band and NO articles band on this sub-family; their
rules are left in place but match nothing, so they cost bytes
only. They are kept so the six sibling pages can be cut from
this same sheet without re-deriving them.
- NEW .zab-long band at the end of this file (live 225b8b4).
Loads AFTER css/it-managed-services-zazz.css.
Why the clone is safe here: a depth-aware walk of THIS page's own raw HTML
returns the SAME 20 Elementor container ids as the 1Password page, in the
same order (820bdff, 743c4b6, d2a41b8, 0e19d51, 93d485c, 81d38f2 + 672e3a2,
c8f15e4, 8020c71, 716d40b, 1faf4e0, ae25977, a86e67a, d730615, 43ab1b2,
9d19ee4, 65e1765, 1ad22e1, 9193c5e, 7572440, a8ff3b4). Same template, so the
reference sheet's per-section Elementor measurements carry; only the values
that depend on THIS page's own content/settings are re-measured below.
NAMESPACE: the video band's classes are renamed zop- -> zab- per CLAUDE.md
("new Family B components take the zab- prefix"). zop- was one of the four
per-page prefixes that file tells us not to keep inventing; this cluster
(managed-it-services-for-*) uses zab- throughout.
DELTAS vs the 1Password sheet — every one MEASURED on live at 1440 with
window.innerWidth === 1440 confirmed in the same call:
- Hero banner URL swapped (2560x738 hero-section background webp).
- S02 services: 12 cards, still FOUR 318.75px columns / 30px gap. Live's
per-card "Explore ..." link is display:none at EVERY width (verified at
1440 and 375), so the card itself is the link and no CTA row is drawn.
Head-to-grid gap is 14 (not 30); card h3 margin-bottom 20 (not 5);
bullet line-height 23.1px.
- S05 bookcal band has NO top padding on this page (total 910: 69 + 10 +
36 + 10 + 784 embed).
- S18 final banner min-height 373 (not 416); consultant figure is 500x476
(natural 1024x975) flush to the banner's bottom-RIGHT corner (right 0,
not 56); copy column 583 wide.
- S20 pre-footer logo column is 225px wide / 50px tall (not 194x43).
Section counts that did NOT change, so no nth-of-type / nth-child override
moves: comparison 6 rows, FAQ 11 items split 6 / 5, stats 3 counters,
advantages 4 cards 2-up, trust panel 4-up.
Two halves:
1. Family A carry-overs — the APPROVED values (hero/form geometry, FAQ
padding, services-card fill, light copy on dark bands, 6/5 FAQ split).
Carried, not re-invented.
2. Family B additions — the sections Family A has no component for
(.zab-problems, .zab-cmp-head / .zab-cmp / .zab-cmp-acc, .zab-certified,
.zab-steps, .zab-trust, .zab-adv, .zab-video) plus the Family A
components whose live values differ on this page.
Owner-approved deviations from live are carried over from the reference and
tagged inline (hero headline 42px not live's 54, contact card 620 wide,
pre-footer with no dead space, marquee chips bounded on both axes, mobile
content reduction). They are deliberate; do not "fix" them back to live.
Split rule: a given CSS property for a given selector lives in exactly one of
the two sheets, never both, so their load order cannot change any outcome.
============================================================ */
/* ------------------------------------------------------------
BRAND TOKENS taken from live's Elementor globals
------------------------------------------------------------ */
.zmit {
--zab-ink: #14142b; /* live body/heading ink */
--zab-accent: #0161ff; /* --e-global-color-accent */
--zab-body: rgba(20, 20, 20, .7); /* --e-global-color-text */
--zab-line: rgba(6, 0, 28, .12); /* compare-table hairline */
--zab-fill: #eff0f7; /* card fill (uc_content / icon-box bg) */
--zab-dark: #262338; /* trust strip + stats band */
}
/* ------------------------------------------------------------
CONTENT BOX. Live's boxed containers are the full viewport minus a 30px
gutter — measured innerWidth 1365 at x=30 on 743c4b6, d2a41b8, 81d38f2,
672e3a2, ae25977, a86e67a, d730615, 43ab1b2, 9d19ee4, 65e1765, 1ad22e1 —
NOT the shared sheet's 1400px centred box (1340 at x=43). The pre-footer
band 6648aeb is the single exception: 1400 wide at x=13, no gutter.
------------------------------------------------------------ */
/* Owner decision 2026-08-26: Family B uses the Family A centred box (shared
.z-container = max-width 1400px, margin 0 auto, padding 0 30px) even though
live's own Acronis page runs wider (content 1365 at x=30). Consistency across
migrated pages beats matching live's width here. Do NOT reintroduce a global
`.zmit .z-container { max-width: none }`. */
/* ============================================================
1. HERO — every number below read off live's rendered DOM at 1440
(8e8eda0 hero-section = 718 tall, 41deb3c logo strip = 125, total 843).
Live's hero inner is a flex ROW that fills the 1365 box exactly:
left column 757 | gap 100 | form card 508
The left column carries a flat 20px gap between crumb / pill / headline /
sub / CTA and a 50px bottom pad, which is what produces the 718.
The form CARD (6c4c282, not the HubSpot widget inside it) is stretched to
the row and carries margin-bottom:-95.55px, so it starts at the hero's own
content top (y 140 — above the breadcrumb) and overhangs 96px into the
logo strip. Family A's -132px overhang is a different number, not no
overhang: measure, don't carry.
============================================================ */
/* Live paints the banner as a plain ![]()
sized 1425x718 with object-fit:fill —
the artwork is STRETCHED to the box, not cropped, so `cover` gave a
different crop. 100% 100% is the background equivalent of fill. */
.zmit-hero::before {
background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/07/03094610/Network-Security-Firewall-Management-Hero-Banner-scaled.webp') center/100% 100% no-repeat;
background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }
@media (min-width: 1081px) {
/* crumb text lands at y 118, pill at y 184 (live 96bcdb8 / 8808f78) */
.zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
/* 757 / 100 / 508 of the 1365 box, as percentages so it tracks the
viewport below 1440 instead of hard-coding a 1440-only pixel row. */
.zmit .zmit-hero-grid {
grid-template-columns: 55.46% 37.22%;
gap: 7.33%; align-items: stretch; padding: 28px 0 0;
}
.zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
/* live's left column is a flex column with a flat 20px gap */
.zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
/* Owner request 2026-08-26: hero headline + sub reduced below live's 54px/16px.
Deliberate deviation from live, applied on request. */
.zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
/* live's sub runs the FULL 757 column (5 lines / 132px). Capped at 560 it
wrapped to 6 lines and pushed the CTA 41px down. White, not #e6eaf2. */
.zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
/* live b37b9ab: 12px/12px/500 label, 12px 24px pad, #f2f7ff fill, 20px
icon gap -> a 253 x 36 pill, not the shared 265 x 48 one. */
.zmit-hero .zmit-hero-cta { margin-bottom: 0; }
.zmit-hero .zmit-hero-cta-btn {
font-size: 12px; line-height: 12px; font-weight: 500;
padding: 12px 24px; gap: 20px;
background: #f2f7ff; border: 0;
}
/* live's button-icon is 16x12; left at its natural svg height it becomes the
tallest flex item and inflates the pill from 36 to 46. */
.zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; }
.zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
/* The shared button floors itself at a 46px touch target; live's desktop
pill is 36. Only overridden above 1081px, so the 46px tap target the
accessibility audit checks on mobile is left intact. */
.zmit-hero .zmit-hero-cta-btn { min-height: 36px; }
.zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
/* -44px lifts the card past the breadcrumb row to the hero content top;
-95.55px is live's own overhang into the logo strip. */
/* Live's white hero card measured at 1440: t140 h774 w508 l887, radius 8,
padding 20px 25px 20px 20px. It IS stretched to the row and overhangs the
banner by 95.55px into the logo strip. (The 459x458 box at y290 is the
.hsfc-Form INSIDE the card - do not size the card against it.) */
.zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
.zmit-form-card {
margin: 0; height: 100%; transform: none;
padding: 20px 25px 20px 20px;
}
.zmit-form-card h3 { margin-bottom: 12px; }
.zmit-hsform { min-height: 0; }
.zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
.zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
.zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
.zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
.zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}
/* Scroll cue — live d2ae808 is a bare 30px chevron at left:50% (no translate),
10px off the banner's bottom edge, no disc, fill rgba(255,255,255,.66),
bobbing on `float 3s`. The shared component draws a 48px glass disc. */
.zmit-hero .zmit-hero-scroll {
left: 50%; bottom: 18px;
width: 30px; height: 30px; border: 0; border-radius: 0;
background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
color: rgba(255, 255, 255, .66);
/* The shared bob bakes translateX(-50%) into its keyframes, which pulls the
chevron 15px left of where live puts it. Live sits flush at left:50% with
no centring translate, so the bob is redefined without the X shift. */
animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
.zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }
/* Trust strip — live 41deb3c is 125 tall (15 top / 40 bottom around a 70px
logo row) and its marquee window is 792 wide, flush with the gutter.
Live's wrapper scrolls 21199px in 92s == ~115px/s; ours is a shorter track,
so the duration is set from our own track width to keep the same speed. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { height: 70px; }
/* Owner request 2026-08-26: make every marquee logo read the same size.
Live (and our clone) sized these by HEIGHT only (70px, object-fit:contain),
so width ran 139-221px and the square Gartner mark (200x200 natural, every
other file is 193px tall) read as a small icon. Bounding BOTH axes inside a
fixed chip evens the optical weight. */
.zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; }
/* ============================================================
SHARED PAGE BUTTON — live's own body CTA (label first, then arrow).
Used by S03, S09, S15, S18. Live element 4480afa / 192ffed.
============================================================ */
.zmit .zab-btn {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15.38px; font-weight: 600; line-height: 16px;
color: #fcfcfc; background: var(--zab-accent);
border-radius: 5px; padding: 15px 30px; text-decoration: none;
transition: background .2s ease;
}
.zmit .zab-btn:hover { background: #141414; color: #fcfcfc; }
/* Measured on every live CTA (hero 732, problems 2388, steps 5388,
recognized 5681, stats 8429): the arrow sits AFTER the label, never before. */
.zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; }
.zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; }
.zmit .zab-btn-ico svg path { fill: currentColor; }
/* live 843341d (problems): 369 x 36, 12px/12px/500, #0161ff on #f2f7ff,
12px 24px pad, 8px radius — the same pill as the hero CTA. */
.zmit .zab-problems-cta .zab-btn {
background: #f2f7ff; color: var(--zab-accent);
font-size: 12px; line-height: 12px; font-weight: 500;
padding: 12px 24px; border-radius: 8px; gap: 20px;
}
.zmit .zab-problems-cta .zab-btn:hover { background: #e2ecff; color: var(--zab-accent); }
/* live 4e0d0f3 (steps): 167 x 46, 13px/16px/600, #f2f7ff on #0161ff, 5px radius */
.zmit .zab-steps-cta .zab-btn {
background: var(--zab-accent); color: #f2f7ff;
font-size: 13px; line-height: 16px; font-weight: 600;
padding: 15px 30px; border-radius: 5px; gap: 20px;
}
.zmit .zab-steps-cta .zab-btn:hover { background: #0a4fd0; color: #f2f7ff; }
/* live cb96327 (stats): 14.59px/14.59px/500, #0161ff on #f2f7ff, 12px 24px,
8px radius — live does NOT invert this to a white pill. */
.zmit .zab-btn-light {
background: #f2f7ff; color: var(--zab-accent);
font-size: 14.59px; line-height: 14.59px; font-weight: 500;
padding: 12px 24px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* Final CTA keeps the accent pill on the light gradient banner. */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #fcfcfc; }
/* ============================================================
S02 SERVICES — 12 cards, FOUR columns. Measured on live's own
#uc_service_grid_card_elementor_39d0dc0 wrap at 1440: grid,
318.75px x 4, gap 30px, wrap 1365 at x30, items 319x281 over 3 rows.
Card internals (live .uc_content / .uc_post_grid_style_one_item):
item radius 10px
inner #eff0f7 fill, padding 30px
h3 18px / 23.4px / 700 #14142b, margin-bottom 20
li 14px / 23.1px / 400 #14142b, disc, ul padding-left 20, margin 14 0
Live's per-card "Explore ..." button (.uc_post_grid_style_one_button) is
display:none at EVERY width — checked at 1440 AND 375 — and the whole card is
wrapped in an .overlayLink anchor instead. So we emit the card AS the anchor
and draw no CTA row: same rendered card, same interlink, no invented content.
The lead line is live's icon-box DESCRIPTION at 34.7px/43px/400 (49c4c98),
14px above the grid (live: lead ends y931, grid starts y945).
============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 14px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; }
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 31px; }
/* ---- Service card: FLAT, not the accounting family's bordered card ----
This sub-family's cards carry NO overlay link at all (0 hits on
`overlayLink` in this page's raw HTML — all 10 cards, so anchoring the
extractor on the link would have produced an EMPTY grid, not just a short
one). With no link there is no hover state and no CTA row, and live styles
the card as a plain white block instead of the bordered fill.
Measured on live at 1440 / 768 / 375 — the card chrome is IDENTICAL at all
three; only the grid changes (4 cols gap 31 / 2 cols gap 31 / 1 col gap 0):
card padding 0, no border, radius 8px, white
inner padding 0 10px
title 18px / 23.4px, 700, margin 0 0 20px
ul margin 14px 0, indent 20px
li 14px / 23.1px
Card height comes out at 219 (1440) and 196 (768/375). */
.zmit-services-grid .zmit-svc-card {
display: flex;
flex-direction: column;
background: #fff;
border: 0;
border-radius: 8px;
padding: 0 10px;
text-decoration: none;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; transition: color .2s ease; }
/* The shared sheet's list is `padding: 0 18px 22px`. That 18px RIGHT padding
narrows each bullet to 217px where live's is 237px, which pushed most bullets
from two lines to three and made the band 173px taller than live. Live's own
ul is `padding-left: 20px; margin: 14px 0` with a plain disc marker — use it
and restate all four sides, never a two-value shorthand (CLAUDE.md). */
/* NO list-style and NO left padding here: the shared sheet already draws the
bullet as `.zmit-svc-card li::before { content:"\2022"; position:absolute;
left:2px }` over `li { padding-left:18px }`. Adding `list-style: disc` renders
the NATIVE marker on top of that ::before - two dots per bullet. */
.zmit-services-grid .zmit-svc-card ul { margin: 14px 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin-bottom: 0; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }
/* Services-card hover + per-card CTA row, MEASURED off live with a real pointer
(Chrome DevTools) on `.uc_post_grid_style_one_item`. Live changes exactly two
things on a card it marks `.hasLink`: border #eff0f7 -> #0161ff and the fill
#eff0f7 -> #d5e0f3. No shadow, no lift, no title-colour change. The per-card
CTA wrapper is display:none at rest and shown 34px tall on hover. A card with
no link gets neither — hence the `.has-link` scope. Scoped to this page sheet
on purpose: the shared sheet feeds ~50 pages whose hover is not measured. */
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { border-color: #0161ff; background: #d5e0f3; }
.zmit-svc-cta { display: none; }
.zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta {
/* margin-top:auto, NOT a fixed gap: the card is a flex column stretched to
the tallest card in the row, so auto pins every CTA the same distance
from the card bottom and they align across the row regardless of how
many bullets each card has. This is live's own mechanism. */
display: flex; align-items: center; height: 34px; margin-top: auto; padding-top: 10px;
}
/* Live emits a REAL `.uc_more_btn` anchor here, a SIBLING of the absolute
overlay link rather than nested in it, so this stays an : 14px/700/#000
with a 14px gap to the arrow. The shared sheet already lifts every
`.zmit-svc-card a:not(.z-explore)` to z-index 2, so it sits above the
overlay and stays clickable. */
.zmit-svc-cta .z-svc-more {
display: inline-flex; align-items: center; gap: 14px;
font-size: 14px; font-weight: 700; line-height: 24px; color: #000;
text-decoration: none;
}
.zmit-svc-cta .z-svc-more:hover,
.zmit-svc-cta .z-svc-more:focus { color: #000; text-decoration: none; }
.zmit-svc-cta .ico { display: inline-flex; align-items: center; }
.zmit-svc-cta svg { display: block; width: 14px; height: 8px; }
/* ============================================================
S03 PROBLEMS — live d2a41b8: white band, 30px padding, 30px row gap.
Heading 24aeb41 = 33.05px/600/1.3em centred. Two 50% icon-list columns
(6fb7f36 / 650313e) with 22px check icons and 18px/500 items, 15px row gap.
Answer heading f31c35f = 24px/400/1.8em centred.
============================================================ */
.zmit .zab-problems.z-section { background: #fff; padding: 30px 0; }
.zmit .zab-problems-head { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; }
.zab-problems-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 30px; }
.zab-problems-list { list-style: none; margin: 0; padding: 0; }
.zab-problems-list li { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 7.5px; margin-top: 7.5px; }
.zab-problems-list li:first-child { margin-top: 0; }
.zab-problems-list li:last-child { padding-bottom: 0; }
.zab-tick { flex: 0 0 22px; margin-top: 1px; }
.zab-tick svg { display: block; width: 22px; height: 22px; fill: #046bd2; }
.zab-tick-text { font-size: 18px; font-weight: 500; line-height: 29.7px; color: var(--zab-ink); }
.zmit .zab-problems-answer { font-size: 24px; font-weight: 400; line-height: 43.2px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; padding-bottom: 15px; }
.zab-problems-cta { text-align: center; }
/* ============================================================
S04 VIDEO + COPY BAND (live 0e19d51). RE-MEASURED on THIS page at 1440 and
the geometry is identical to the reference's, so its values are carried:
0e19d51 flex row, gap 50, padding 20px 30px 30px, height 511 here
2b5c78d left column 820 at x30 | 50 gap | fce4fe2 right column 455 at x900
c656b9c hosted