/* ============================================================
Managed IT Services Philadelphia — page-specific layer.
CITY CLUSTER, WP ID 41819, 21 SECTIONS.
Loads AFTER css/it-managed-services-zazz.css (requested with a never-used
?v token, see $zmit_css_v in the page, so Cloudflare cannot serve a stale
variant of the shared sheet).
Cloned from css/managed-it-services-charlotte.css — the CITY cluster
reference sheet — because live serves this page from the SAME Elementor
template: the depth-1 section ids match one for one (820bdff, 743c4b6,
d2a41b8, 0e19d51, 93d485c, 81d38f2, 672e3a2, c8f15e4, 8020c71, 716d40b,
1faf4e0, ae25977, a86e67a, d730615, 43ab1b2, 9d19ee4, 65e1765, 1ad22e1,
7572440, a8ff3b4), the only substitution being the final-CTA wrapper
(7a1731b here, 070907d on charlotte). Shared ids mean the reference's
measured values carry; all structural counts are IDENTICAL to charlotte
(12 service cards, 7 comparison rows, 3 suffix-only counters, 10
testimonials, 11 FAQs split 6/5), so no stripe/split rules changed.
PER-PAGE DELTAS vs the charlotte sheet — content-addressed only:
- hero banner URL (this page's own artwork — Managed-IT-Services-
Philadelphia-Banner-scaled.webp; it must equal the page's rendered 820 x 461
right fce4fe2 455 wide, padding 50px 0, flex COLUMN gap 40:
h2 4740d79 455 x 117 30px / 39px / 600 / #141414
CTA 3ea3821 455 x 46 14px/14px/500, #f2f7ff on #0161ff,
padding 16px 30px, radius 0
quote 4512a67 padding 0 20px 0 40px; blockquote 395 x 156
p 18px / 23.4px / 600 / #141414
::before "“" 70px #0161ff at top -20 / left -45
footer margin-top 15; cite 14px/400 rgba(20,20,20,.7)
50 + 117 + 40 + 46 + 40 + 156 + 50 = 499; + 20 + 30 padding = 549.
============================================================ */
.zmit .zab-band.z-section { background: #fff; margin: 0; padding: 20px 0 30px; }
.zab-band-inner { display: grid; grid-template-columns: 820fr 455fr; gap: 50px; align-items: center; }
.zab-band-media { min-width: 0; }
.zab-band-video { display: block; width: 100%; height: auto; aspect-ratio: 820 / 461; background: #000; }
.zab-band-copy { display: flex; flex-direction: column; gap: 40px; padding: 50px 0; }
.zmit .zab-band h2 { font-size: 30px; font-weight: 600; line-height: 39px; color: var(--zab-ink); margin: 0; }
/* Live's CTA fills the 455 column and left-aligns its label. */
.zmit .zab-band-btn {
display: flex; width: 100%; justify-content: flex-start;
font-size: 14px; line-height: 14px; font-weight: 500;
padding: 16px 30px; border-radius: 0;
background: var(--zab-accent); color: #f2f7ff;
}
.zmit .zab-band-btn:hover { background: #0a4fd0; color: #f2f7ff; }
.zmit .zab-band-quote { position: relative; margin: 0 20px 0 40px; padding: 0; }
.zmit .zab-band-quote::before {
content: '\201C'; position: absolute; top: -20px; left: -45px;
font-size: 70px; line-height: 1; color: var(--zab-accent);
}
.zmit .zab-band-quote p { font-size: 18px; font-weight: 600; line-height: 23.4px; color: var(--zab-ink); margin: 0; }
.zmit .zab-band-quote footer { margin-top: 15px; }
.zmit .zab-band-quote cite { display: block; font-style: normal; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--zab-body); }
/* ============================================================
S05 BOOK A FREE CONSULTATION — live 93d485c / 29825: centred heading and
copy, then the HubSpot meetings well. Live's iframe well runs ~760px.
============================================================ */
.zmit .zmit-bookcal.z-section { padding: 30px 0 0; }
.zmit .zmit-bookcal h2 { font-size: 33.05px; font-weight: 400; line-height: 43px; color: var(--zab-ink); text-align: center; margin-bottom: 12px; }
.zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--zab-ink); text-align: center; max-width: 1000px; margin: 0 auto; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }
/* ============================================================
S06 COMPARISON HEADING — live 81d38f2 is its own container
(padding 0 30px 15px); heading matches the S03 step (33.05px/600).
============================================================ */
/* Live 81d38f2 measures 102px tall around a 37px heading => 65px below it. */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 0 0 65px; }
.zmit .zab-cmp-head h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0; }
/* ============================================================
S06 COMPARISON TABLE — DESKTOP ONLY (live 672e3a2 carries
elementor-hidden-tablet_extra/tablet/mobile_extra/mobile).
Row 60431dc: 3 columns, 15px gap, 10px radius, overflow hidden.
Header cells (18ed247/f505325/3728033): #fff, 20px 30px, 24px/32px.
Body cells: 16px/500 #06001c, 1px var(--zab-line) border, 100px tall,
centred. Column 2 body = #eff0f7, column 3 body = #f9fcff.
============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0 0 30px; }
.zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.zmit .zab-cmp-col-head {
background: #fff; padding: 20px 30px; margin: 0;
font-size: 24px; font-weight: 600; line-height: 32px; color: var(--zab-ink);
}
.zmit .zab-cmp-cell {
margin: 0; padding: 20px 30px; height: 100px;
display: flex; align-items: center;
font-size: 16px; font-weight: 500; line-height: 28px; color: #06001c;
border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Live rounds only the FIRST body cell of each column (radius 10px 10px 0 0)
and it is the one that carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Live paints the Key Capability COLUMN with a 3-layer gradient (a 70% white
veil over two blue gradients) and leaves its cells transparent. Copied
verbatim from live's computed backgroundImage. */
.zab-cmp-col-0 {
background:
linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%),
linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zab-cmp-col-0 .zab-cmp-cell { background: transparent; }
.zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); line-height: 23px; }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* PER-PAGE DELTA (measured on THIS page, 7 rows — the vendor cluster has 6).
Live alternates the body fills on a strict odd/even cycle rather than the
explicit row list the 6-row sheets carry, so an nth-of-type(2)/(4) pair would
leave rows 6 and 7 unstriped here. Reading it as odd/even reproduces live at
any row count, which is what the remaining city pages need.
Zazz column odd rows -> the column's own #eff0f7, even rows -> #f9fcff
Other column odd rows -> #f9fcff, even rows -> #fff
(nth-of-type counts only: the
column head is a different type, so
"row 1" really is the first body cell.) */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; }
/* Live hairlines EVERY cell of the Zazz column; the other two columns keep the
single top hairline that :first-of-type already sets above. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
.zab-cmp-acc { display: none; }
/* ============================================================
S07 COMPARISON ACCORDION — MOBILE/TABLET ONLY (live c8f15e4 carries
elementor-hidden-widescreen/desktop/laptop). Native , as live.
Rows are icon-box pairs: 20px green tick = Zazz, 22px red cross = Others.
============================================================ */
@media (max-width: 1080px) {
.zab-cmp { display: none; }
.zab-cmp-acc { display: block; }
}
.zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
.zab-acc-item { background: var(--zab-fill); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.zab-acc-q {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 22px; cursor: pointer; list-style: none;
font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--zab-ink);
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; }
.zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
.zab-acc-ico svg { display: block; width: 22px; height: 22px; }
.zmit .zab-acc-row h3 { font-size: 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; }
/* ============================================================
S09 PROVEN SECURITY STANDARDS BAND — live 8020c71: background #000,
padding 65px 0 70px. Heading 9cd1c77 = 40px/600/56px #fff centred.
Copy df25298 = 16px/400 #c2c2c2, max-width 800px, centred.
Badges 267030c = 6-up grid, 16px gap, 25px above.
DARK BAND ⇒ LIGHT COPY. Never darken anything in here.
============================================================ */
.zmit .zab-certified.z-section { background: #000; padding: 65px 0 70px; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; text-align: center; margin: 0; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 1.7; color: #c2c2c2; text-align: center; max-width: 800px; margin: 11px auto 0; }
.zab-certified > .z-container > p a { color: #fff; font-weight: 500; text-decoration: underline; }
/* Live 8020c71 lays the six badges in a gapless 6-up grid and renders each
225x150 source at 224x227 (object-fit:fill — live stretches them). Matching
the RENDERED aspect keeps the band at live's 510px; a natural-aspect row is
87px shorter. Width-relative so the house 1340 container still fits six. */
.zab-certified-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 25px; align-items: center; }
.zab-certified-badges img { width: 100%; height: auto; display: block; }
/* Live is a 16px-gap grid at NATURAL aspect (computed aspect-ratio "auto 227 / 230").
gap:0 plus a forced aspect-ratio and object-fit:fill fuses the badges'
baked-in dark tiles into one uneven bar - see CLAUDE.md. */
/* ============================================================
S10 THREE-STEP PATH — live 716d40b: background #f2f7ff,
margin 30px 0, padding 35px 30px 30px, 20px row gap.
Heading fca040b 33.05px/600/1.3em centred; lead bdea526 16px centred.
The 3-card row (df23ff0) sits margin-top:-140px OVER the waves artwork.
Cards: transparent, 20px padding, centred, 25px icon-to-text gap;
icon is a white circle (view-stacked, shape-circle, 50px glyph + 27px pad);
title 20px/700, copy 14px/500 --e-global-color-text.
============================================================ */
.zmit .zab-steps.z-section { background: #f2f7ff; margin: 30px 0; padding: 54px 0 48px; }
.zmit .zab-steps h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 20px; }
.zmit .zab-steps-lead { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--zab-ink); text-align: center; margin: 0 0 10px; }
.zab-steps-art { display: block; width: 100%; height: auto; }
.zab-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -140px; padding-bottom: 10px; }
.zab-step { padding: 20px; text-align: center; }
.zab-step-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 104px; height: 104px; border-radius: 50%; background: #fff;
margin-bottom: 25px;
}
.zab-step-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-step h3 { font-size: 20px; font-weight: 700; line-height: 1.2em; color: var(--zab-ink); margin: 0 0 12px; }
.zmit .zab-step p { font-size: 14px; font-weight: 500; line-height: 1.5em; color: var(--zab-body); margin: 0; }
.zab-step p a { color: var(--zab-accent); }
.zab-steps-cta { text-align: center; }
/* ============================================================
S11 RECOGNIZED — live 1faf4e0 padding 160px/150px around a #141414 box
(7e422c7). Heading 9bf40de = 30px/300/1.4em #fff; copy 158fb73 = 16px/300
#f2f7ff; CTA 4257c87 = #fcfcfc pill, #141414 label, 8px radius, 20px pad.
DARK BAND ⇒ LIGHT COPY.
============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit-recognized-band { padding: 40px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #f2f7ff; max-width: 640px; }
.zmit-recognized-logos { gap: 36px; }
.zmit-recognized-logos img { height: 50px; width: auto; }
.zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }
/* ============================================================
S12 WHY BUSINESSES CHOOSE ZAZZ — live ae25977: white section,
padding 30px 0 20px, eyebrow ca133c9 = 34.7px/400/43px #14142b with 52px
below. Panel c09aff4 = #262338, radius 15px, 4 columns, 10px column gap.
Cells d0359fb..: 32px 25px padding, 1px #fff RIGHT border (last has none).
Icons 100px. Titles (h2) 15px/700 underlined #fff.
Descriptions (h3) 15px/600/28px #f7f7fc. All centred.
DARK PANEL ⇒ LIGHT COPY.
============================================================ */
/* Live ae25977's inner is padded 160px 0 0 — all the air is ABOVE the eyebrow,
none below the panel (628 = 160 + 95 eyebrow block + 372 panel). */
.zmit .zab-trust.z-section { background: #fff; padding: 160px 0 0; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 52px; }
.zab-trust-panel {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
background: var(--zab-dark); border-radius: 15px;
}
.zab-trust-cell {
padding: 37px 25px; text-align: center;
border-right: 1px solid #fff;
}
.zab-trust-cell:last-child { border-right: 0; }
.zab-trust-ico { display: block; margin: 0 auto 24px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
.zmit .zab-trust-cell h2 { font-size: 15px; font-weight: 700; line-height: 21px; color: #fff; text-decoration: underline; margin: 0 0 12px; }
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 700; line-height: 28px; color: #f7f7fc; text-decoration: underline; margin: 0; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell p { color: #f7f7fc; } /* light body copy on the dark feature panel (was inheriting dark ink); :not(.v-split) leaves the light variant untouched */
/* ============================================================
S13 SUCCESS STORIES — live a86e67a padding 30px 0; heading 5715405 at the
29px/300 Family B step. Card + brand-logo treatment carried from the
approved Family A rule: every logo normalises to a 50px-tall, left-aligned
box so a square mark and a wide wordmark share one baseline.
============================================================ */
.zmit .zmit-stories.z-section { padding: 12px 0; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; }
.zmit-story-img img { height: 250px; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
display: block; height: 50px; width: auto; max-width: 150px;
object-fit: contain; object-position: left center;
}
.zmit-story .body { padding: 20px; }
.zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.zmit-story p { font-size: 14px; line-height: 1.6; }
/* ============================================================
S14 BLOGS — live d730615: white, padding 30px, 30px gap.
Heading c0a9cde = 29px/300/1.5em; "Explore All…" 55eab48 = transparent with
a 1px accent underline and the chevron AFTER the label (row-reverse on live,
which puts the icon on the right of an RTL-flipped wrapper).
Cards bbff8d0: 10px radius, overflow hidden, 10px gap.
============================================================ */
.zmit .zmit-articles.z-section { padding: 45px 0; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); }
.zmit-articles-more {
display: inline-flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 500; color: var(--zab-accent);
border-bottom: 1px solid var(--zab-accent); padding-bottom: 5px;
}
.zmit-articles-more:hover { color: #141414; border-color: #141414; }
.zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.zmit-articles-grid { gap: 30px; }
.zmit-article { border-radius: 10px; overflow: hidden; text-decoration: none; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article-img img { height: 270px; }
.zmit-article .body { padding: 24px 2px 32px; }
.zmit .zmit-article .date { font-size: 13px; font-weight: 500; color: var(--zab-accent); margin: 0 0 14px; }
.zmit .zmit-article h3 { font-size: 18px; font-weight: 600; line-height: 27px; color: var(--zab-ink); margin: 0; transition: color .2s ease; }
/* Live's Blogs cards (785d722) carry two fields the reference's Articles cards
do not — the taxonomy term above the date and the full post excerpt below the
title — and its type steps differ from the reference's Articles band. All
measured on live at 1440 (card 465 wide x 790 tall, image 435 x 250 cover):
term 8635228 14px / 18px / 500 #0161ff
date 2ed54b1 14px / 400 #5e5e5e
title ccfb150 24px / 36px / 500 #000
excerpt 5e6ef82 16px / 26px / 400 #000, NOT clamped (9 lines on card 1)
These override the reference sheet's 13px date / 18px-27px title, which were
measured on a different band on a different page. */
.zmit .zmit-article-cat { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--zab-accent); margin: 0 0 8px; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 400; color: #5e5e5e; margin: 0 0 12px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 500; line-height: 36px; color: #000; }
.zmit .zmit-article-img img { height: 250px; }
/* Counter prefix span (e.g. a `<` before the number). Unused on this page —
all three live counters are suffix-only — but styled so the shared markup
stays safe to copy. */
.zmit-stat .big .pre { font-size: inherit; font-weight: inherit; color: inherit; }
/* ============================================================
S15 BUSINESS ADVANTAGES — live 43ab1b2: white, padding 10px 0 30px,
50px gap. Heading 01b6716 = clamp(1.5rem,…,2.125rem)/300/1.3em (34px at
1440). Grid ebfd715 = TWO columns, 30px gap. Cards 56864d7 = #eff0f7,
20px padding, title 18px/700 with 20px below, copy 15px/400.
============================================================ */
.zmit .zab-adv.z-section { background: #fff; padding: 10px 0 30px; }
.zmit .zab-adv h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 50px; }
.zab-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.zab-adv-card { background: var(--zab-fill); border-radius: 10px; padding: 20px; }
.zmit .zab-adv-card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 20px; }
.zmit .zab-adv-card p { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--zab-body); margin: 0; }
/* ============================================================
S16 MEASURABLE RESULTS — live 9d19ee4: background #262338, margin 30px 0,
padding 50px 0, 50px gap, two columns (copy | counters row).
Heading 67e5b1d renders 34px/44.2px/400 #fcfcfc (the clamp is overridden on
live by a later rule — measured, not computed), 438 wide, then a 50px drop
to the CTA. Counter row e5bfa3e is 877 wide, VERTICALLY CENTRED in the band,
three 263px counters 44px apart.
Counter order, measured off live (number-wrapper y 8265, title y 8340):
the NUMBER IS ON TOP — 57px/57px/600 in #76aaff, centred — and the label
sits 18px BELOW it at 14px/21px/400 #fcfcfc. Our markup emits the label
first, so the number is re-ordered here rather than in the PHP (the same
partial feeds the responsive stack).
DARK BAND ⇒ LIGHT COPY. Never set a dark colour on anything in here.
============================================================ */
.zmit-stats { background: var(--zab-dark); }
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
/* PER-PAGE DELTA: this page's stats band leads with a SMALL EYEBROW, not a
second big heading. Live 9d19ee4 measures h2 "Outcomes That Matter"
at 16px/600/19.2px and h3 "Key Metrics That Reflect Our Operational Performance" at
34px/400/44.2px — the h3 is the real heading. The shared sheet styles
.zmit-stats-copy h2 at 34px, which would render the eyebrow as a second
headline and add ~70px to the band, so it is overridden here.
DARK BAND => LIGHT COPY: both stay #fcfcfc. */
.zmit .zmit-stats-copy h2 {
font-size: 16px;
font-weight: 600; line-height: 19.2px; color: #fcfcfc; margin: 0 0 10px;
}
.zmit-stats-copy h3 {
font-size: 34px;
font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 50px;
}
@media (min-width: 1081px) {
.zmit-stats-layout { grid-template-columns: 438fr 877fr; gap: 50px; align-items: center; }
/* Three counters in a row, matching live's flex row (space-between). */
.zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; align-items: start; }
}
.zmit-stat { display: flex; flex-direction: column; }
.zmit-stat p { font-size: 14px; font-weight: 400; line-height: 21px; color: #fcfcfc; margin: 0; }
.zmit-stat .big {/* Owner request 2026-08-31: the stat NUMBER is left-aligned so it shares a left edge with its label. Live centres the number inside the same column while the label is start-aligned, so short labels look detached from their figure. Deliberate deviation from live, applied on request. */ order: -1; text-align: left;
font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}
/* ============================================================
S17 TESTIMONIALS — live 65e1765 padding 30px 0, 50px gap;
heading b3cd7c7 = clamp(…,2.125rem)/300/1.3em. Name h3, hairline, location,
quote. Card gradient carried from the approved Family A value.
============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 40px; }
.zmit-testi-card {
background-color: transparent;
background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
min-height: 415px;
}
.zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; }
/* ============================================================
S18 FAQ — live 1ad22e1: background #eff0f7, padding 30px 0, 30px gap,
two accordion widgets split 6 / 5.
The two-value-shorthand trap: NEVER write `padding: 25px 0` here — it zeroes
the shared sheet's 22px horizontal padding and every question goes flush to
the card edge. Always restate the 22px.
============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 36px 0; }
.zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
/* The shared list is a CSS multi-column box, which BALANCES the columns. Live
ships two explicit accordion widgets split 6 / 5, so its left column is the
taller one and sets the section height. Forcing the break after item 6
reproduces that split. Gated above the phone breakpoint: with column-count:1
a forced break creates a SECOND column and the list overflows the viewport. */
@media (min-width: 681px) {
.zmit-faq-item:nth-child(6) { break-after: column; }
}
/* ============================================================
S19 FINAL CTA — live 5adf0d8 / 8864: banner 2dee0b2 carries
linear-gradient(102.29deg,#ecf1eb 8.75%,#aec8fd 45.11%,#84c3fc 81.46%),
inner 718d6c9 radius 5px + 50px padding; heading 33a894d 33.05px/600/1.3em;
copy 4658da0 17.16px/400/25.2px; figure 4f2c262 is 500px wide, aligned to
the bottom-right and lifted -10% so it breaks above the banner's top edge.
============================================================ */
.zmit .zmit-final.z-section { margin: 130px 0 0; padding: 0 50px; background: #e9edf5; } /* live: flat #e9edf5, no gradient at any depth, band 444 tall */
.zmit-final-banner {
/* live carries no gradient/radius/padding in this band - measured at every depth */
background: none;
border-radius: 0;
padding: 0;
min-height: 416px;
display: flex;
align-items: center;
}
.zmit-final-copy { max-width: 50%; }
.zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 16px; }
.zmit-final-copy p { font-size: 17.16px; font-weight: 400; line-height: 25.2px; color: var(--zab-ink); max-width: 560px; margin: 0 0 26px; }
/* Live is an IN-FLOW figure, not the shared absolute one: static, 591x575
(natural), 131px above the section top, bottom flush with the section
bottom. The negative top margin reproduces the overhang while keeping the
band at live's 444px (575 - 131 = 444). */
.zmit-final-media { align-self: end; }
.zmit-final-media img {
position: static; right: auto; bottom: auto;
display: block; width: 591px; max-width: none; height: auto;
margin: -131px 0 0 auto; object-fit: contain; /* 575 - 131 = 444 = live band height */
}
/* ============================================================
S20 REQUEST A CONSULTATION — live 7572440 / 8978: section carries a photo
background; heading 3946774 = 33.89px/300/43px #fcfcfc centred; the form
card d511f3d is #fff, 8px radius, 30px padding; "Contact now" 8927c4b is
25px/400 #6e7191.
============================================================ */
.zmit-contact {
background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
background-color: #1f4fd6;
}
.zmit .zmit-contact.z-section { padding: 50px 0; }
.zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; }
.zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; }
/* Owner request 2026-08-26: narrower card, no dead space. The 621px min-height
was padding the card out to live's band height while the form itself is 443;
dropped so the card hugs its content. Width 720 -> 620. */
.zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 620px; }
.zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; }
/* ============================================================
S21 PRE-FOOTER BAND — live 6648aeb, measured at 1440:
band #000, padding 80px 0, total height 436
box 1400 wide at x 13 — the ONE container on this page that is the
shared 1400px box with NO 30px gutter, so .z-container is restored
left 170b7dd 770 wide, column gap 20:
row [logo 194x56 (image 194x43) | title 556 wide] = 56 tall
copy fa7ec24 = 200 tall
right 4eec9af 280 wide at x 1133, column gap 20, two 280x58 buttons,
16px/24px/500, 16px 30px pad, 5px radius, 1px solid #fff border;
first solid white with black label, second transparent with white.
Left and right are 350px apart, i.e. justified to the box edges.
Title 1702e8c is 28px/28px (NOT 1.3em — that made it 73 tall, not 56).
The 116px under the copy is live's own: its text is 3 lines (84px) and the
remainder is four empty blocks left behind by the ChatGPT paste in the CMS
(min-h-[46px] / mt-3 / text-center / -mt-). Reproduced as one margin so the
band is 436 with live's 80px padding, instead of faking the height with
127px of padding live does not have.
DARK BAND ⇒ LIGHT COPY.
============================================================ */
/* Colour treatment is width-independent; the 1440 geometry is gated below. */
.zmit-insights-copy p.zmit-insights-title { font-weight: 400; border-left: 2px solid #fff; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-weight: 400; color: #fff; }
.zmit-insights-btns a {
background: #fff; color: #000; border: 1px solid #fff; border-radius: 5px;
font-size: 16px; font-weight: 500; line-height: 24px; min-width: 0; justify-content: center;
}
.zmit-insights-btns a:last-child { background: transparent; color: #fff; }
.zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; }
@media (min-width: 1081px) {
.zmit .zmit-insights.z-section { padding: 80px 0; }
/* container inherits the shared centred box (1400 / 30px gutter) */
.zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
.zmit-insights-copy { grid-template-columns: 194px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
.zmit .zmit-insights-logo { height: 43px; width: 194px; }
.zmit-insights-copy p.zmit-insights-title {
font-size: 28px; line-height: 28px;
padding-left: 20px; margin-left: 0; max-width: none;
}
.zmit-insights-copy p:not(.zmit-insights-title) {
/* Owner request 2026-08-26: no dead space under this band. Live pads the
paragraph by 116px to hold a 436px band; we let the section hug its
content instead (band ~320). Deliberate deviation from live. */
font-size: 20px; line-height: 28px; max-width: 770px; margin: 0;
}
.zmit-insights-btns { gap: 20px; }
.zmit-insights-btns a { padding: 16px 30px; width: 280px; }
}
/* ============================================================
TABLET (<=1080)
The desktop lead-ins and overlaps are desktop compositions; stacked layouts
just butt up, and the desktop type steps overflow a narrow column.
============================================================ */
@media (max-width: 1080px) {
.zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
.zmit .zab-problems-head,
.zmit .zab-cmp-head h2,
.zmit .zab-steps h2 { font-size: 27px; line-height: 1.25; }
.zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
.zmit .zab-problems-answer { font-size: 19px; line-height: 1.6; }
.zab-tick-text { line-height: 26px; }
.zab-problems-cols { grid-template-columns: 1fr; gap: 0; }
.zmit .zab-band h2 { font-size: 24px; line-height: 1.3; }
.zab-band-inner { grid-template-columns: 1fr; gap: 24px; }
.zab-band-copy { padding: 0; gap: 24px; }
.zmit .zmit-article h3 { font-size: 20px; line-height: 30px; }
.zab-tick-text { font-size: 16px; }
.zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
.zab-steps-grid { grid-template-columns: 1fr; margin-top: 0; }
.zmit .zab-trust-eyebrow { font-size: 24px; line-height: 1.3; margin-bottom: 28px; }
.zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
.zab-trust-cell { border-right: 0; border-bottom: 1px solid #fff; }
.zab-trust-cell:last-child { border-bottom: 0; }
.zmit .zab-adv h2 { font-size: 27px; line-height: 1.25; }
.zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
.zmit-stats-grid { grid-template-columns: repeat(3, 1fr); }
.zmit-recognized-band { padding: 32px 26px; }
.zmit .zmit-recognized.z-section { padding: 40px 0; }
.zmit .zmit-insights.z-section { padding: 60px 0; }
.zmit-insights-copy p.zmit-insights-title { font-size: 24px; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-size: 17px; line-height: 26px; }
/* Stacked: no overflow trick, figure sits under the copy. */
.zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
.zmit-final-banner { min-height: 0; padding: 36px 32px 0; display: block; }
.zmit-final-copy { max-width: 100%; }
.zmit-final-media img { position: static; width: 280px; margin: 16px auto 0; }
/* Hero is single-column below 1081, so the deep left-column pad just opens
a gap between the CTA and the form card. */
.zmit-hero-left { padding-bottom: 0; }
/* Desktop card floor is a desktop composition; stacked it just adds dead space. */
.zmit-testi-card { min-height: 0; }
}
/* Tablet-only: the shared sheet already collapses these to one column at 680px,
and this sheet loads after it, so gating stops them re-imposing a two-up
layout on a phone. */
@media (max-width: 1080px) and (min-width: 681px) {
.zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
.zmit-articles-grid { grid-template-columns: repeat(2, 1fr); }
/* live at 768 keeps the advantages cards two-up */
.zab-adv-grid { grid-template-columns: repeat(2, 1fr); }
/* HubSpot's meetings widget sets a taller height on its own iframe once the
narrow layout stacks the slot picker (inline style, so it wins over the
760px above). Let the well follow the iframe instead of clipping it. */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}
/* ============================================================
PHONE (<=680)
Re-measured rhythm for a 375 viewport; the shared sheet's structural
stacking does the rest.
============================================================ */
@media (max-width: 680px) {
.zmit .zmit-services.z-section { padding: 20px 0; }
.zmit-services-grid .zmit-svc-card { padding: 22px; }
.zmit .zab-problems.z-section { padding: 40px 0; }
.zmit .zab-cmp-acc.z-section { padding: 0 0 200px; }
.zmit .zab-certified.z-section { padding: 124px 0; }
.zmit .zab-steps.z-section { margin: 20px 0; padding: 30px 0; }
.zmit .zmit-recognized.z-section { padding: 30px 0; }
.zmit .zab-trust.z-section { padding: 24px 0 100px; }
.zmit .zmit-stories.z-section { padding: 24px 0; }
.zmit .zmit-articles.z-section { padding: 88px 0; }
.zmit .zab-adv.z-section { padding: 24px 0; }
.zmit .zmit-stats.z-section { margin: 20px 0; padding: 34px 0; }
.zmit .zmit-testi.z-section { padding: 24px 0; }
.zmit .zmit-faq.z-section { padding: 40px 0; }
.zmit .zmit-contact.z-section { padding: 40px 0; }
.zmit .zmit-insights.z-section { padding: 0; }
.zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
.zmit .zab-problems-head,
.zmit .zab-cmp-head h2,
.zmit .zab-steps h2,
.zmit .zab-certified h2,
.zmit .zab-adv h2 { font-size: 24px; line-height: 32px; }
.zmit .zab-problems-answer { font-size: 16px; line-height: 25px; }
.zab-tick-text { font-size: 15px; line-height: 24px; }
.zmit .zab-step h3 { font-size: 18px; }
.zab-step { padding: 14px 0; }
.zab-step-ico { width: 88px; height: 88px; margin-bottom: 18px; }
.zab-step-ico svg { width: 42px; height: 42px; }
.zmit-testi-lead { font-size: 18px; line-height: 26px; }
.zmit-testi-quote { font-size: 14px; line-height: 22px; }
.zmit .zab-trust-cell h3 { font-size: 14px; line-height: 24px; }
.zab-trust-cell { padding: 44px 20px; }
.zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
/* This sheet loads after the shared one, so the desktop fixed-column rules
above have to be undone explicitly on a phone. */
.zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
.zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
.zab-adv-grid { grid-template-columns: 1fr; }
.zmit-stats-grid { grid-template-columns: 1fr; gap: 24px; }
.zab-acc-q { padding: 14px 16px; font-size: 16px; }
.zab-acc-a { padding: 0; }
.zab-acc-row { padding: 14px 16px; }
/* Full-bleed at one column, so the desktop 250px reads taller — matches live. */
.zmit-story-img img { height: 240px; }
.zmit-article-img img { height: 240px; }
.zmit-faq-q { padding: 16px; font-size: 15px; line-height: 22px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; }
.zmit-final-media img { width: 240px; }
.zmit-insights-copy p.zmit-insights-title { font-size: 21px; padding-left: 14px; margin-left: 14px; }
.zmit-insights-btns a { padding: 14px 28px; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}
/* ============================================================
1440 SECTION-HEIGHT RECONCILIATION — every value below is the delta
between our render and live's, measured section by section at 1440 and
traced to the element that caused it.
Everything derived from a 1440 measurement is GATED to the desktop
composition. Ungated, these rules load after the tablet/phone blocks above
and silently win there — which is exactly what happened on the first pass:
the 36.8px comparison heading came back at 375, the article and FAQ bands
lost their phone padding, and the fixed 784px calendar well clipped the
taller mobile HubSpot widget.
============================================================ */
/* --- correct at every width --- */
/* S05 — live 9289888/H2 is weight 400 and LEFT aligned, not 600 centred. */
.zmit .zab-cmp-head h2 { font-weight: 400; text-align: left; }
/* S15 — the shared sheet pins .zmit-stats-copy to 420px, narrower than live's
438 column, which wraps the CTA label onto a second line (53 tall vs 39). */
.zmit-stats-copy { max-width: none; }
/* S17 — live e667b75 is weight 400. */
.zmit .zmit-faq h2 { font-weight: 400; }
@media (min-width: 1081px) {
/* S02 — live caps the lead at 918 and still renders ONE line; our Poppins
metrics are a shade wider and wrap at that width, costing a whole 43px
line, so the cap is deliberately NOT carried. */
/* S03 — live's icon-list block fd81f61 carries `padding: 0 0 20`, which is
the whole of our 20px shortfall (list 401 vs 421). */
.zab-problems-cols { padding-bottom: 20px; }
/* S04 — live 93d485c is full-bleed: heading 858b4de is 30px/39px/400 with a
10px drop, the copy sits on the full 1405 (two lines, not the three our
1000px cap forced), 20 clears to the embed, and the embed is 784.
30 + 39 + 10 + 53 + 20 + 784 = 936. */
.zmit .zmit-bookcal h2 { font-size: 30px; line-height: 39px; font-weight: 400; margin-bottom: 10px; }
.zmit .zmit-bookcal p { max-width: none; padding: 0 10px; margin: 0 0 20px; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 784px; }
/* S05 — 36.8px/36.8px is 37 tall; 33.05/43 was 43, the band's whole error. */
.zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; }
/* S08 — live 8020c71 is full-bleed: its inner is 1425, so the six badges
get 224px cells (227 tall) instead of 214. The copy is 26.4 line-height
and the badge row clears it by 27 (live nets +25.6 -23 +25). */
.zmit .zab-certified > .z-container > p { line-height: 26.4px; }
.zab-certified-badges { margin-top: 27px; }
/* S14 — live ccfb150 (the Blogs title field) is 24px/36px/500 on desktop.
NOT the reference page's 24/28.8/600: different band, different page. */
.zmit .zmit-article h3 { font-size: 24px; line-height: 36px; font-weight: 500; }
/* S14 — live d730615 pads the band 30 (not 45) and drops 29 from the head
row to the grid. (Live's grid measures 455 to our 447 because its
JetEngine listing keeps a loader node under the cards.) */
.zmit .zmit-articles.z-section { padding: 30px 0; }
.zmit-articles-head { margin-bottom: 29px; }
/* S16 — live's inner gap is 50, not 40 (heading 8621 -> carousel 8671). */
.zmit-testi h2 { margin-bottom: 50px; }
/* S17 — live 1ad22e1: 30px band padding and TWO 655px columns 30 apart
inside the 1365 box (the 25px remainder sits to the right of column
two). A plain column-count:2 makes them 667.5 and the taller column
then reads 19px short. */
.zmit .zmit-faq.z-section { padding: 30px 0; }
.zmit .zmit-faq h2 { margin-bottom: 30px; }
.zmit-faq-list { column-gap: 30px; padding-right: 25px; }
}
/* ============================================================
TABLET / PHONE RECONCILIATION — measured the same way as the 1440 block,
against live at 768 and 375. Loads last so it wins over the generic
responsive blocks further up.
============================================================ */
@media (max-width: 1080px) {
/* S18 — the desktop figure is pinned 500x551; the tablet rule reset only
the WIDTH, so the image kept a 551px box and stretched. */
.zmit-final-media img { height: auto; }
}
@media (max-width: 1080px) and (min-width: 681px) {
/* S09 — live df23ff0 stays THREE columns at 768 (205 wide, 20 gap) and
keeps a -100 lift onto the waves art. Stacking them cost 382px. */
.zmit .zab-steps.z-section { margin: 30px 0; padding: 30px 0; }
.zmit .zab-steps h2 { font-size: 33.05px; line-height: 42.965px; margin-bottom: 20px; }
.zmit .zab-steps-lead { font-size: 16px; line-height: 26.4px; margin-bottom: 20px; }
.zab-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -100px; padding-bottom: 10px; }
.zab-step { padding: 0; }
/* S15 — live 9d19ee4 at 768: 30px band padding, 50 between the copy and
the counter row, heading two lines (70) not three (133), counters 3-up
212 wide with a 36 gap. */
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 30px 0; }
.zmit-stats-layout { gap: 50px; }
.zmit-stats-copy h3 { font-size: 26px; line-height: 35px; margin-bottom: 20px; }
.zmit-stats-grid { gap: 36px; }
/* S10 — the two-up band squeezes the copy into 323px at 768 and triples
its height; live runs the band as a single column here. */
.zmit-recognized-band { grid-template-columns: 1fr; gap: 24px; }
.zmit .zmit-recognized-copy h2 { font-size: 24px; line-height: 32px; }
}
@media (max-width: 680px) {
/* S09 — live at 375 keeps a -70 lift and drops the lead to 14px/23.1px. */
.zmit .zab-steps.z-section { margin: 30px 0; padding: 20px 0 30px; }
.zmit .zab-steps h2 { font-size: 26px; line-height: 33.8px; margin-bottom: 20px; }
.zmit .zab-steps-lead { font-size: 14px; line-height: 23.1px; margin-bottom: 40px; }
.zab-steps-grid { margin-top: -70px; gap: 40px; padding-bottom: 30px; }
/* S15 — live at 375: 50px band padding, heading three lines (89), the
three counters stacked 20 apart at 108 each. */
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
.zmit-stats-layout { gap: 50px; }
.zmit-stats-copy h3 { font-size: 20px; line-height: 29.7px; margin-bottom: 20px; }
.zmit-stats-grid { gap: 20px; }
.zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
}
@media (max-width: 1080px) and (min-width: 681px) {
/* S03 — live fd81f61 keeps TWO 344px columns at 768 (40 gap); the heading
is 31/40.3 and the answer 22/37.4, not 27/33.75 and 19/30.4. */
.zab-problems-cols { grid-template-columns: 1fr 1fr; gap: 0 40px; }
.zmit .zab-problems-head { font-size: 31px; line-height: 40.3px; }
.zmit .zab-problems-answer { font-size: 22px; line-height: 37.4px; }
/* S07 — live's accordion rows are 68 tall (20px pad) and the band clears
40 at the bottom; ours were 61 and 30. */
.zab-acc-q { padding: 22px; }
.zmit .zab-cmp-acc.z-section { padding: 0 0 40px; }
/* S18 — live's consultant figure is 363x400 at 768, not 280 wide. */
.zmit-final-media img { width: 363px; height: 400px; }
/* S20 — live 6648aeb keeps the two columns at 768: 400 and 218, justified
to the box edges, inside 80px of band padding. */
.zmit .zmit-insights.z-section { padding: 80px 0; }
.zmit-insights-grid { grid-template-columns: 400px 218px; justify-content: space-between; gap: 0; align-items: start; }
.zmit-insights-btns { gap: 20px; }
.zmit-insights-btns a { width: 218px; padding: 16px 30px; }
/* S11 — live's four trust cells run 13px taller each at 768. */
.zab-trust-cell { padding: 50px 25px; }
/* S16 — live's band is 583 around a 498 slide: 20px of band padding and a
20px drop off the heading, not 30 and 40. */
.zmit .zmit-testi.z-section { padding: 20px 0; }
.zmit-testi h2 { margin-bottom: 20px; }
}
@media (max-width: 680px) {
/* S02 — live's uc_content cards keep their 30px pad at 375 (302/279 tall). */
.zmit-services-grid .zmit-svc-card { padding: 30px; }
/* S18 — live's figure is 335x500 at 375 (it stretches it, as on desktop). */
.zmit-final-media img { width: 100%; max-width: 335px; height: 500px; }
/* S20 — live stacks the band at 375 inside 60px of padding: copy column
283 (logo row 103 + copy 160), buttons 136 (two 58s, 20 apart). */
.zmit .zmit-insights.z-section { padding: 60px 0; }
.zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; }
.zmit-insights-btns { gap: 20px; }
.zmit-insights-btns a { width: 100%; padding: 16px 30px; }
/* S11 — live's cells are 21px taller each at 375. */
.zab-trust-cell { padding: 65px 20px; }
/* S16 — same 20/20 rhythm as 768 around live's 498 slide. */
.zmit .zmit-testi.z-section { padding: 20px 0; }
.zmit-testi h2 { margin-bottom: 20px; }
}
/* ------------------------------------------------------------
FINAL BAND-HEIGHT TRIM. Live builds several of these bands out of Elementor
widgets whose internals do not map onto our markup one-for-one (the trust
panel is an icon-box + grid pair, the testimonial band is a Swiper, the
accordion is e-n-accordion). Where the composition already matches, the
remaining difference is closed on the band's own padding, each value being
the measured delta against live at that width.
------------------------------------------------------------ */
@media (min-width: 1081px) {
.zab-steps-grid { padding-bottom: 33px; } /* S09 699 - 676 */
.zmit .zmit-stories.z-section { padding: 23px 0; } /* S12 670 - 648 */
.zmit .zmit-stats.z-section { padding: 60px 0; } /* S15 385 - 365 */
}
@media (max-width: 1080px) and (min-width: 681px) {
.zab-trust-cell { padding: 43px 25px; } /* S11 1316 */
.zab-step { padding: 20px 10px; } /* S09 838 */
.zmit-recognized-band { padding: 60px 26px; } /* S10 546 */
.zmit .zmit-articles.z-section { padding: 25px 0; } /* S13 1036 */
.zab-acc-q { padding: 26px 22px; } /* S07 701 */
.zab-problems-cols { padding-bottom: 20px; } /* S03 1142 */
.zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 1093 */
.zmit-final-media img { height: 453px; } /* S18 780 */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container { min-height: 714px; } /* S04 978 */
}
@media (max-width: 680px) {
.zab-trust-cell { padding: 55px 20px; } /* S11 1689 */
.zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 2050 */
.zmit-recognized-band { padding: 46px 26px; } /* S10 828 */
.zmit .zab-steps.z-section { padding: 0 0 20px; } /* S09 1410 */
.zmit .zmit-stats.z-section { padding: 40px 0; } /* S15 677 */
.zmit .zmit-stories.z-section { padding: 8px 0; } /* S12 1931 */
.zmit .zab-adv h2 { margin-bottom: 24px; } /* S14 1196 */
.zmit .zmit-faq.z-section { padding: 67px 0; } /* S17 1341 */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container { min-height: 524px; } /* S04 1084 */
}
@media (max-width: 1080px) and (min-width: 681px) {
/* S01 — live's hero headline is 40.98px/49.17px at 768, which wraps to
FOUR lines (197). At 38/46.36 it fell to three (139) and took 58px —
most of the hero's 128px shortfall — out of the banner. */
.zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
.zmit-hero-grid { padding-bottom: 68px; } /* S01 1418 */
}
/* Last two bands. The HubSpot meetings widget sizes its own iframe, so S04's
remaining difference is closed on the band, not on the embed. */
@media (max-width: 1080px) and (min-width: 681px) {
.zmit .zmit-bookcal.z-section { padding: 30px 0 27px; } /* S04 978 */
.zmit-hero-grid { padding-bottom: 114px; } /* S01 1418 */
}
@media (max-width: 680px) {
.zmit .zmit-bookcal.z-section { padding: 0; } /* S04 1084 */
.zmit-hero-grid { padding-bottom: 14px; } /* S01 1925 */
}
/* ============================================================
MOBILE OPTIMISATION (owner request 2026-08-26). One consolidated
<=680 block appended LAST so it wins over the stacked earlier blocks.
Measured at 375 before: doc 25017, hero 1800 (headline 30px/7 lines,
sub 290), cmp-acc padB 200, certified pad 124, articles pad 88,
trust padB 100, marquee chips 180x70, final figure 500px tall.
============================================================ */
@media (max-width: 680px) {
/* Hero type: tighter on phones */
.zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
.zmit-hero .zmit-hero-sub { font-size: 14px; line-height: 1.55; }
.zmit-form-card h3 { font-size: 16px; line-height: 1.4; }
/* Blunt band paddings dialled to content */
.zmit .zab-cmp-acc.z-section { padding: 0 0 40px; }
.zmit .zab-certified.z-section { padding: 48px 0; }
.zmit .zab-trust.z-section { padding: 24px 0 40px; }
.zmit .zmit-articles.z-section { padding: 48px 0; }
.zmit .zmit-insights.z-section { padding: 40px 0; }
/* Marquee chips scale down with the viewport */
.zmit .zmit-trust-band { padding: 12px 0 24px; }
.zmit .zmit-trust-chip { width: 140px; height: 56px; }
.zmit .zmit-trust-chip img { max-height: 46px; max-width: 128px; }
/* Final-CTA figure: natural ratio, phone-sized */
.zmit-final-media img { width: 260px; height: auto; max-height: 320px; }
}
/* Mobile content reduction (owner approved 2026-08-26: "reduce or hide some
content where necessary keeping the essence"). CSS-only hides — the markup,
its links and SEO text stay in the DOM, so interlinking is unchanged. */
@media (max-width: 680px) {
/* Service cards: title + first 3 bullets carry the point */
.zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
/* Article cards: keep title/meta/link, drop the artwork */
.zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
/* Story cards: image + logo + title; excerpt is desktop detail */
.zmit-stories .zmit-story .body p { display: none; }
/* Trust panel copy: clamp to 4 lines */
/* trust copy lives in the cell's h3 */
.zab-trust-cell h3 {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Certified badges: 3-up small instead of 2-up large */
.zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* Mobile round 2: the trust cells are icon-driven (110px art), not copy-driven */
@media (max-width: 680px) {
.zmit .zab-trust-ico, .zmit .zab-trust-ico svg, .zmit .zab-trust-ico img {
width: 64px; height: 64px;
}
.zmit .zab-trust-cell { padding: 20px 16px; }
.zmit .zab-adv .zmit-svc-card, .zmit .zab-adv-card { padding: 20px 18px; }
.zmit .zab-steps-card { padding: 20px 16px; }
}
/* Mobile polish from the screenshot pass (2026-08-26) */
@media (max-width: 680px) {
/* Review logos: one even row of three, not a 2+1 wrap */
.zmit .zmit-recognized-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
.zmit .zmit-recognized-logos img { max-width: 96px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
/* Articles read as a list once artwork is hidden - give items a hairline */
.zmit .zmit-articles-grid .zmit-article { border-bottom: 1px solid rgba(6, 0, 28, .1); padding-bottom: 18px; }
.zmit .zmit-articles-grid .zmit-article:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* ---------------------------------------------------------------------------
SERVICE CARDS - matched to live, measured in the browser on
/managed-it-services-charlotte at 1440 (not inferred from CSS).
Live's card: .uc_post_grid_style_one_item is TRANSPARENT with a
1px solid #eff0f7 border and 10px radius; the fill comes from
an inner .uc_content.padding (background #eff0f7, padding 30px).
Reproduced here as one filled box plus the same 1px border, so
the rendered box metrics match.
Live's bullets are the browser's NATIVE disc marker:
ul padding-left 20px, list-style disc
li padding-left 0
::marker rgb(173,173,236) at 14px
The SHARED sheet (not ours to edit) instead draws a custom ::before "•" in
rgb(110,113,200) at 15px with li padding-left 18px - a darker, larger bullet.
These rules override it; the page sheet loads after the shared one and the
selectors are more specific.
Live's "Explore ..." link sits 10px below the list (margin-top: 10px).
HOVER - MEASURED by hovering live with a real pointer at 1440. Seraphinite
injects these rules at runtime, so they appear in NONE of live's stylesheets
and the CSSOM does not hold them; a synthetic mouseover event does not fire
CSS :hover either. Both methods give a false "live has no hover" reading.
Actual, on cards that HAVE a link:
fill #eff0f7 -> #d5e0f3
CTA row display:none (height 0) -> display:block (34px)
border unchanged (#eff0f7 on this template)
NO lift, NO shadow, transition .3s
So live HIDES the "Explore ..." CTA until hover - a resting screenshot makes
it look as though live has no CTA at all. Cards without a link get no hover
change. Do NOT add a lift or shadow.
--------------------------------------------------------------------------- */
.zmit-services-grid .zmit-svc-card { border: 1px solid #eff0f7; }
.zmit-services-grid .zmit-svc-card ul { padding-left: 20px; list-style: disc; }
.zmit-services-grid .zmit-svc-card li { padding-left: 0; }
.zmit-services-grid .zmit-svc-card li::before { content: none; }
.zmit-services-grid .zmit-svc-card li::marker { color: #adadec; font-size: 14px; }
.zmit-services-grid .zmit-svc-card { transition: background-color .3s; }
/* The CTA is hidden at rest and revealed on hover, but it KEEPS ITS SPACE.
Live's card measures the same height at rest and hovered (338x374 on
charlotte at 1440), so the card must not grow when the CTA appears.
display:none removes it from flow and grew the card 383 -> 403, which made
the whole tile shift on hover - visibility keeps the box and only paints it. */
.zmit-services-grid .zmit-svc-card .zab-svc-cta,
.zmit-services-grid .zmit-svc-card .zab-svc-more,
.zmit-services-grid .zmit-svc-card .zmit-svc-more { visibility: hidden; margin-top: auto; padding-top: 10px; }
/* Revealed on hover, and on focus-within so the CTA stays keyboard-reachable.
Live omits the focus case; either way the destination is reachable via the
.z-explore overlay anchor, which carries the card title as its label. */
.zmit-services-grid .zmit-svc-card:hover .zab-svc-cta,
.zmit-services-grid .zmit-svc-card:hover .zab-svc-more,
.zmit-services-grid .zmit-svc-card:hover .zmit-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zab-svc-cta,
.zmit-services-grid .zmit-svc-card:focus-within .zab-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zmit-svc-more { visibility: visible; }
/* Live DOES lift and DOES turn the border blue. From live's own page CSS in
the WordPress raw (widget id varies per page):
.hasLink:hover { transform: translate(-10px,-10px); border: 1px solid #0161FF }
.hasLink:hover .uc_content { background-color: #d5e0f3 }
The previous comment here reported an identity matrix and an unchanged
border: that reading sampled .uc_content, the INNER node, which has a
0-width border and carries no transform. Both sit on the OUTER .hasLink
item. Keyed on :has(.z-explore) because this markup has no .has-link.
Verify by rendering with :focus-within, not by grepping the declaration. */
.zmit-services-grid .zmit-svc-card { border: 1px solid #eff0f7; transition: all .3s ease; }
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within {
background: #d5e0f3; border-color: #0161ff; transform: translate(-10px, -10px);
}
@media (prefers-reduced-motion: reduce) {
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: none; }
}
/* ============================================================
375 RECOGNITION-BAND OVERFLOW FIX
The shared sheet pins this CTA to `white-space: nowrap`; its ~395px
min-content blows the band's 1fr track at 375 (band is only 315 wide).
body{overflow-x:hidden} masks it from scrollWidth - measure min-content
or screenshot. See CLAUDE.md.
============================================================ */
@media (max-width: 680px) {
.zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
}
/* Video-quote mark, desktop pass (2026-10-01) - see CLAUDE.md "Video quote mark".
Matches the -wp reference (it-support-for-nonprofit-organizations-wp
.elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
35x42 box, 45px left of the quote text and 20px above it. Mark only - the
quote text, author line and spacing are untouched. */
@media (min-width: 1080.02px) {
.zmit .zab-band-quote::before {
content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
left: -45px;
}
}
/* Video-quote mark, tablet pass (2026-10-01) - see CLAUDE.md "Video quote mark".
Matches the -wp reference (it-support-for-nonprofit-organizations-wp
.elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
35x42 box, 45px left of the quote text and 20px above it. Mark only - the
quote text, author line and spacing are untouched. */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zab-band-quote::before {
content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
left: -45px;
}
}
/* Video-quote mark, mobile pass (2026-10-01) - see CLAUDE.md "Video quote mark".
Matches the -wp reference (it-support-for-nonprofit-organizations-wp
.elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
35x42 box, 45px left of the quote text and 20px above it. Mark only - the
quote text, author line and spacing are untouched. */
@media (max-width: 680.98px) {
.zmit .zab-band-quote::before {
content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
left: -45px;
}
}
/* ============================================================================
2026-10-13 - matched to the -wp reference (/managed-it-services-philadelphia-wp)
at desktop, tablet and phone. Every value measured on that page at 1440,
1024, 768 and 390. Kept on purpose: the owner hero headline sizes 42 / 40.98 / 24 (owner,
2026-08-26), the shared comparison accordion, the trust-panel body at 400
(owner), the upright 600 video quote (owner), left-aligned stat numbers,
57px tablet stat numbers, the house content width and form column.
============================================================================ */
/* services band white; only the cards carry a fill (every width). Eyebrow
16.31/700 #14142b, heading 34.7/400/43 in a 716px column, card titles
18/23.4, bullets 14/23.1 */
.zmit .zmit-services.z-section { background: #fff; }
.zmit .zmit-services-head .z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: #14142b; }
.zmit .zmit-services-head h3 { font-size: 34.7px; font-weight: 400; line-height: 43px; max-width: 716px; }
.zmit .zmit-services-grid .zmit-svc-card h4 { font-size: 18px; line-height: 23.4px; }
.zmit .zmit-services-grid .zmit-svc-card li { font-size: 14px; line-height: 23.1px; margin-bottom: 0; }
/* in-copy links: #046bd2 on light bands, the house FAQ look in the dark FAQ */
.zmit .zab-step p a { color: #046bd2; }
.zmit .zmit-faq-a-inner a,
.zmit .zmit-faq-a-inner a:hover,
.zmit .zmit-faq-a-inner a:focus,
.zmit .zmit-faq-a-inner a:visited { color: #85bcff; font-weight: 500; text-decoration: none; }
/* problems: live's #000 copy */
.zmit .zab-problems .zab-tick-text { color: #000; }
/* video band: the CTA label sits centred in the full-width button */
.zmit .zab-band-btn { justify-content: center; }
/* three-step path: "Get Started" 15.38px as live */
.zmit .zab-steps-cta .zab-btn { font-size: 15.38px; }
/* trust panel ("The Standards Behind ..."): heading 34.7/400/43 at every
width; each title 20 above its copy, copy 15/28 (body stays 400, owner) */
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { line-height: 19.5px; margin: 0 0 20px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-size: 15px; line-height: 28px; }
/* articles: date 500 #0161ff, titles 24/28.8 #141414 (every width) */
.zmit .zmit-article .date { font-weight: 500; color: #0161ff; }
.zmit .zmit-article h3 { font-size: 24px; line-height: 28.8px; color: #141414; }
/* success stories heading line as live */
.zmit .zmit-stories h2 { line-height: 37.7px; color: #141414; }
/* testimonial card and its gradient as live (radius 5); the card keeps the
tallest quote's height, so it never jumps between slides */
.zmit .zmit-testi-card { background-color: transparent; background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); border-radius: 5px; display: grid; }
.zmit .zmit-testi-card > .zmit-testi-slide { display: block; grid-area: 1 / 1; visibility: hidden; }
.zmit .zmit-testi-card > .zmit-testi-slide.is-active { visibility: visible; }
.zmit .zmit-testi-role { font-weight: 600; }
/* FAQ colours as live */
.zmit .zmit-faq-q span:first-child { color: #fcfcfc; }
.zmit .zmit-faq-a-inner p { color: #d9dbe9; }
/* light buttons and the hero CTA: live's #f2f7ff fill */
.zmit .zmit-hero-cta-btn,
.zmit .zmit-recognized-cta .z-btn,
.zmit .zmit-stats-copy .z-btn:not(:hover) { background-color: #f2f7ff; }
.zmit .zmit-hero-cta-btn { font-weight: 500; }
/* ---------------------------------------------------------------- desktop */
@media (min-width: 1081px) {
/* compliance band heading in live's 850px column, 56px lines */
.zmit .zab-certified h2 { max-width: 850px; margin-left: auto; margin-right: auto; line-height: 56px; }
/* testimonials: 80px card; name 22/600/28.6, role line 34/600/47.6 */
.zmit .zmit-testi-card { min-height: 0; padding: 80px; }
.zmit .zmit-testi-role { font-size: 22px; line-height: 28.6px; margin: 0; }
.zmit .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; margin: 0 0 10px; }
.zmit .zmit-testi-quote { margin: 0; }
/* FAQ answers 16/25.6 */
.zmit .zmit-faq-a-inner p { font-size: 16px; line-height: 25.6px; }
}
/* ----------------------------------------------------------------- tablet */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
/* section headings scale with the viewport as on live (768 -> 1024):
26.87 -> 31.30 */
.zmit .zab-adv h2,
.zmit .zmit-stats-copy h3,
.zmit .zmit-testi h2,
.zmit .zmit-faq h2 { font-size: calc(13.59px + 1.7291vw); line-height: 1.3; }
/* book-a-consultation 22.8 -> 30 */
.zmit .zmit-bookcal h2 { font-size: calc(1.2px + 2.8125vw); line-height: 1.3; }
/* comparison heading 33.56 -> 36.8, set solid */
.zmit .zab-cmp-head h2 { font-size: calc(23.84px + 1.2656vw); line-height: 1; }
/* compliance band heading 31 -> 36 on 56px lines, copy 14/23.1 */
.zmit .zab-certified h2 { font-size: calc(16px + 1.953vw); line-height: 56px; }
.zmit .zab-certified > .z-container > p { font-size: 14px; line-height: 23.1px; }
/* problems copy 17px */
.zmit .zab-problems .zab-tick-text { font-size: 17px; }
/* video band heading 30/39 (25/32.5 once it sits beside the video) */
.zmit .zab-band-copy h2 { font-size: 30px; line-height: 39px; }
/* recognized: heading 30/42, copy full width, logos one row at 70 */
.zmit .zmit-recognized-copy h2 { font-size: 30px; line-height: 42px; }
.zmit .zmit-recognized-copy h2,
.zmit .zmit-recognized-copy p { max-width: none; }
.zmit .zmit-recognized-logos { display: flex; align-items: center; column-gap: 30px; }
.zmit .zmit-recognized-logos img { height: 70px; width: auto; max-width: none; max-height: none; object-fit: contain; }
/* stats: heading 400, CTA 16/500 */
.zmit .zmit-stats-copy h3 { font-weight: 400; }
/* testimonials: 30px card; name 22/600/28.6, role line scales, quote 18/29.7 */
.zmit .zmit-testi-card { min-height: 0; padding: 30px; }
.zmit .zmit-testi-role { font-size: 22px; line-height: 28.6px; margin: 0; }
.zmit .zmit-testi-rule { width: 24px; height: 2px; margin: 5px 0 10px; }
.zmit .zmit-testi-lead { font-size: calc(13.59px + 1.7291vw); font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
.zmit .zmit-testi-quote { font-size: 18px; line-height: 29.7px; margin: 0; }
/* FAQ rows: 16/24 questions, 25px top and bottom (the 22px sides stay) */
.zmit .zmit-faq-q { padding: 25px 22px; font-size: 16px; line-height: 24px; }
.zmit .zmit-faq-q span:first-child { font-size: 16px; line-height: 24px; }
/* hero form title 18 */
.zmit .zmit-form-card h3 { font-size: 18px; line-height: 1.3; }
/* pre-footer: logo 144 beside its 16/16 title and rule, copy below, the
214px buttons on the right - live's tablet layout, 80 above and below */
.zmit .zmit-insights.z-section { padding: 80px 0; }
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 392px) 214px; justify-content: space-between; column-gap: 20px; align-items: start; }
.zmit .zmit-insights-copy { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 22px; row-gap: 20px; align-items: center; }
.zmit .zmit-insights-logo { width: 144px; height: auto; max-width: 144px; }
.zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; padding-left: 10px; border-left: 2px solid #fff; margin: 0; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-column: 1 / -1; font-size: 14px; line-height: 19.6px; color: #fff; margin: 0; }
.zmit .zmit-insights-btns { display: flex; flex-direction: column; gap: 20px; }
.zmit .zmit-insights-btns a { width: 214px; }
}
/* video band from 922: heading 25/32.5 (live keeps it stacked, a smaller step) */
@media (min-width: 921.98px) and (max-width: 1080.98px) {
.zmit .zab-band-copy h2 { font-size: 25px; line-height: 32.5px; }
}
/* problems: the two columns share rows on live, so item N on the left lines
up with item N on the right (tablet and desktop; 8 items, 4 rows) */
@media (min-width: 680.02px) {
.zmit .zab-problems-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.zmit .zab-problems-cols > .zab-problems-list { display: contents; }
}
/* ------------------------------------------------------------------ phone */
@media (max-width: 680.98px) {
.zmit .zmit-form-card h3 { font-size: 18px; line-height: 1.3; }
.zmit .zab-problems-head { font-size: 26px; line-height: 33.8px; }
.zmit .zab-problems-answer { font-size: 20px; line-height: 34px; }
.zmit .zab-band-copy h2 { font-size: 26px; line-height: 33.8px; }
.zmit .zab-band-quote p { font-size: 16px; line-height: 20.8px; }
.zmit .zmit-bookcal h2 { font-size: 22.8px; line-height: 29.64px; }
.zmit .zab-cmp-head h2 { font-size: 22px; line-height: 26.4px; }
.zmit .zab-certified h2 { font-size: 31px; line-height: 56px; }
.zmit .zab-certified > .z-container > p { font-size: 14px; line-height: 23.1px; }
.zmit .zab-step h3 { font-size: 17px; line-height: 20.4px; }
/* recognized: a full-bleed dark band (no frame, no radius), heading 30/42 */
.zmit .zmit-recognized.z-section { margin: 0; padding: 0; }
.zmit .zmit-recognized-band { margin: 0 -30px; border-radius: 0; padding: 30px; gap: 40px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; line-height: 42px; margin-bottom: 20px; }
.zmit .zmit-recognized-copy p { margin-bottom: 20px; max-width: none; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { font-size: 15px; }
.zmit .zmit-articles-head h2 { font-size: 38px; line-height: 38px; }
.zmit .zab-adv h2,
.zmit .zmit-stats-copy h3,
.zmit .zmit-testi h2,
.zmit .zmit-faq h2 { font-size: 23.07px; line-height: 30px; }
.zmit .zmit-stats-copy h3 { font-weight: 400; }
/* testimonials: 20px card; name 18/23.4, role line 20/28, quote 14/23.1 */
.zmit .zmit-testi-card { min-height: 0; padding: 20px; }
.zmit .zmit-testi-role { font-size: 18px; line-height: 23.4px; margin: 0; }
.zmit .zmit-testi-rule { width: 24px; height: 2px; margin: 5px 0 10px; }
.zmit .zmit-testi-lead { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 10px; }
.zmit .zmit-testi-quote { font-size: 14px; line-height: 23.1px; margin: 0; }
/* FAQ: 14px questions and answers, 25px top and bottom (22px sides stay) */
.zmit .zmit-faq-q { padding: 25px 22px; font-size: 14px; line-height: 21px; }
.zmit .zmit-faq-q span:first-child { font-size: 14px; line-height: 21px; }
.zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 21px; }
.zmit .zmit-contact-head p { font-size: 14px; line-height: 23.1px; }
}
/* phone, as the reference at 390: compliance badges two per row at their
natural size (16 apart); success-story cards keep their excerpt; trust
panel icons at their full 100px with live's 40px cell padding and the
panel 60 under its heading */
@media (max-width: 680.98px) {
.zmit .zab-certified .zab-certified-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zmit .zmit-stories .zmit-story .body p { display: block; }
.zmit .zab-trust-ico, .zmit .zab-trust-ico svg, .zmit .zab-trust-ico img { width: 100px; height: 100px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell { padding: 40px 30px; }
.zmit .zab-trust-eyebrow { margin-bottom: 60px; }
}
/* rhythm re-measured against the reference, heading to heading:
- services cards 16 apart on desktop (live), so the titles wrap as live's do
- the trust panel's heading sits 325 under the recognized heading on
desktop (was 444), and directly under the recognized band on tablet and
phone (was 160 / 24 of extra white) */
@media (min-width: 1081px) {
.zmit .zmit-services-grid { gap: 16px; }
.zmit .zab-trust.z-section { padding-top: 41px; }
}
@media (max-width: 1080.98px) {
.zmit .zab-trust.z-section { padding-top: 0; }
}
/* phone service cards as the reference at 390: title 31 into the card, list
20 under it, 45 under the last bullet (the hidden CTA row included), cards
30 apart */
@media (max-width: 680.98px) {
.zmit .zmit-services-grid { gap: 30px; }
.zmit .zmit-services-grid .zmit-svc-card { padding: 31px 30px 11px; }
.zmit .zmit-services-grid .zmit-svc-card h4 { padding-top: 0; margin: 0 0 20px; }
}
/* desktop: the trust heading 325 under the recognized heading */
@media (min-width: 1081px) {
.zmit .zab-trust.z-section { padding-top: 0; }
}
/* wide tablet (881-1080): live shows the FAQ in one column */
@media (min-width: 880.02px) and (max-width: 1080.98px) {
.zmit .zmit-faq .zmit-faq-list { column-count: 1; }
.zmit .zmit-faq .zmit-faq-list > .zmit-faq-item { break-after: auto; }
}
/* video band below desktop, as live: heading 50 under the video, button and
quote 40 apart; the video fills its box (no letterbox bar over the poster) */
@media (max-width: 1080.98px) {
.zmit .zab-band-inner { gap: 50px; }
.zmit .zab-band-copy { gap: 40px; }
}
.zmit .zab-band-video { object-fit: cover; }
/* trust panel below desktop, measured cell by cell at 768 and 390: icon 32
into the cell, title 27 under the 100px icon, copy ends 33 above the cell
edge, 25 at the sides; the panel 53 under its heading */
@media (max-width: 1080.98px) {
.zmit .zab-trust:not(.v-split) .zab-trust-cell { padding: 32px 25px; }
.zmit .zab-trust:not(.v-split) .zab-trust-ico { margin-bottom: 27px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell p { margin-bottom: 0; }
.zmit .zab-trust-eyebrow { margin-bottom: 53px; }
}
/* phone service cards: 22px sides so the bullets break where live's do */
@media (max-width: 680.98px) {
.zmit .zmit-services-grid .zmit-svc-card { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 680.98px) {
/* phone: the heading sits 24 under the video, as live */
.zmit .zab-band-inner { gap: 24px; }
}
/* testimonial card ends one quote line below the longest quote on tablet
(live's card 310 at 768) and 16 below on desktop */
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-testi-quote { margin-bottom: 29.7px; } }
@media (min-width: 1081px) { .zmit .zmit-testi-quote { margin-bottom: 16px; } }
/* service cards (every width), measured on the reference card: title 31 into
the card, list 20 under it, 45 under the last bullet including the hidden
"Explore" row. The title's old 20px top padding pushed every card ~30 taller. */
@media (min-width: 680.02px) {
.zmit .zmit-services-grid .zmit-svc-card { padding: 31px 30px 11px; }
.zmit .zmit-services-grid .zmit-svc-card h4 { padding-top: 0; margin: 0 0 20px; }
}
/* trust panel: live leaves 48 of white under it on tablet */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zab-trust.z-section { padding-bottom: 48px; }
}
/* recognized band on tablet: live's flat 40px inside the dark panel (was
60 / 26). Padding only - the shared stacking and button rules stay. */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-recognized-band { padding: 40px; }
}
/* ============================================================================
2026-10-13 - Philadelphia values (carried from Oakland/Omaha, re-measured on /managed-it-services-
omaha-wp; the block above is the city fix set carried from Detroit)
============================================================================ */
/* comparison table (desktop): the Zazz column is #eff0f7 on the reference
now (rows 2 and 4 stay #f9fcff); cell copy sits at the top of the cell,
20 in, not centred; the table starts 20 under the heading */
.zmit .zab-cmp-col-1 { background: #eff0f7; }
.zmit .zab-cmp-cell { align-items: flex-start; }
@media (min-width: 1081px) {
.zmit .zab-cmp-head.z-section { padding-bottom: 10px; }
.zmit .zab-cmp.z-section { padding-top: 10px; }
/* band rhythm, heading to heading as the reference */
.zmit .zab-certified.z-section { padding: 40px 0; }
.zmit .zab-steps.z-section { padding: 30px 0; }
.zmit .zab-trust.z-section { padding-top: 39px; }
.zmit .zmit-articles.z-section { padding-bottom: 66px; }
.zmit .zmit-stats.z-section { padding: 40px 0; }
}
/* pre-footer, the reference's widget (same as every -wp page): desktop logo
200 wide, a 2px white rule 20 to its right, title 28/28 22 past the rule,
copy 20/28 white 20 below, the 280x58 buttons on the right; 1024: logo
173, title 20/20, copy 14/19.6, buttons 220; 768: logo 147, title 16/16;
phones: logo 230, the ruled title under it, copy, then the two buttons full
width */
.zmit .zmit-insights.z-section { padding: 80px 0; }
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; justify-content: initial; }
.zmit .zmit-insights-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 20px; align-items: center; }
.zmit .zmit-insights .zmit-insights-logo { width: 200px; height: auto; max-width: none; }
.zmit .zmit-insights-copy p.zmit-insights-title { font-size: 28px; line-height: 28px; max-width: 528px; margin: 0; padding-left: 22px; border-left: 2px solid #fff; color: #fff; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-column: 1 / -1; font-size: 20px; line-height: 28px; color: #fff; max-width: 745px; margin: 0; }
.zmit .zmit-insights-btns { display: flex; flex-direction: column; gap: 20px; }
.zmit .zmit-insights-btns a { width: 100%; min-height: 58px; font-size: 16px; font-weight: 500; border-radius: 5px; }
.zmit .zmit-insights-btns a:not(:first-child) { border-color: #fff; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 220px; }
.zmit .zmit-insights .zmit-insights-logo { width: 173px; max-width: none; }
.zmit .zmit-insights-copy { grid-template-columns: auto minmax(0, 1fr); }
.zmit .zmit-insights-copy p.zmit-insights-title { font-size: 20px; line-height: 20px; max-width: 326px; padding-left: 22px; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14px; line-height: 19.6px; max-width: 521px; }
.zmit .zmit-insights-btns a { width: 100%; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 218px; }
.zmit .zmit-insights .zmit-insights-logo { width: 147px; }
.zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; max-width: 234px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-insights.z-section { padding: 60px 0; }
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.zmit .zmit-insights-copy { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.zmit .zmit-insights .zmit-insights-logo { width: 230px; height: auto; }
.zmit .zmit-insights-copy p.zmit-insights-title { grid-column: 1; grid-row: 2; font-size: 16px; line-height: 16px; max-width: none; padding-left: 12px; border-left: 2px solid #fff; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-row: 3; font-size: 14px; line-height: 19.6px; }
.zmit .zmit-insights-btns { flex-direction: column; }
.zmit .zmit-insights-btns a { flex: none; width: 100%; }
}
/* stats: this page's heading is an h2 (the city block above sizes an h3):
34 desktop, scaling on tablet, 23.07 on phones; the button 50 under it on
desktop, 20 below; button 16/500 (14.59 below 922) */
.zmit .zmit-stats-copy h2 { font-weight: 400; letter-spacing: normal; margin: 0 0 50px; }
.zmit .zmit-stats-copy .zab-btn { font-size: 16px; font-weight: 500; }
@media (max-width: 1080.98px) { .zmit .zmit-stats-copy h2 { margin-bottom: 20px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-stats-copy h2 { font-size: calc(13.59px + 1.7291vw); line-height: 1.3; }
}
@media (max-width: 921.98px) { .zmit .zmit-stats-copy .zab-btn { font-size: 14.592px; } }
@media (max-width: 680.98px) {
.zmit .zmit-stats-copy h2 { font-size: 23.07px; line-height: 30px; }
}
/* pre-footer, this page's sizes: the logo 287 / 248 / 203 / 230 wide by
width; the white rule runs the logo's full height with the title at its
top, 20 past the rule (10 at 768, 12 on phones); copy 20 under the logo */
.zmit .zmit-insights .zmit-insights-logo { width: 287px; }
.zmit .zmit-insights-copy { align-items: stretch; }
.zmit .zmit-insights-copy p.zmit-insights-title { align-self: stretch; padding-left: 20px; max-width: none; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 770px; }
.zmit .zmit-insights-btns a span { margin-left: 6px; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-insights .zmit-insights-logo { width: 248px; }
.zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 20px; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 541px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
.zmit .zmit-insights .zmit-insights-logo { width: 203px; }
.zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 10px; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 400px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-insights .zmit-insights-logo { width: 230px; }
.zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 12px; }
}
/* services lead (an h2 here): 34.7/400/43 at every width in live's 624px
column; 10 into the band below desktop */
.zmit .zmit-services-head .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; letter-spacing: normal; max-width: 624px; }
@media (max-width: 1080.98px) { .zmit .zmit-services.z-section { padding-top: 10px; } }
/* recognized CTA 16/500 as the reference */
.zmit .zmit-recognized-cta .z-btn { font-size: 16px; font-weight: 500; }
/* compliance band: badges 16 apart at their natural aspect at every width
(the reference; the tiles were touching); heading on one line on desktop
(no 850px column on this page); the copy link light blue as live */
.zmit .zab-certified .zab-certified-badges { gap: 16px; }
.zmit .zab-certified .zab-certified-badges img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.zmit .zab-certified p a { color: #85bcff; }
@media (min-width: 1081px) { .zmit .zab-certified h2 { max-width: none; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zab-certified.z-section { padding-top: 30px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified.z-section { padding-top: 50px; } }
/* badges sit where the reference's do under the copy */
.zmit .zab-certified .zab-certified-badges { margin-top: 74px; }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 68px; } }
@media (max-width: 680.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 68px; } }
/* three-step path, measured on the reference: desktop columns 361 wide, 60
apart, centred; tablet columns 20 apart (886 wide at 1024, 655 at 768)
with 90px icon circles; phones 77px circles and a 13px button; the art
and circles sit ~24 lower under the lead; titles carry side padding so
they wrap where live's do */
.zmit .zab-steps-art { margin-top: 24px; }
@media (min-width: 1081px) {
.zmit .zab-steps-grid { max-width: 1203px; margin-left: auto; margin-right: auto; column-gap: 60px; }
.zmit .zab-step { padding: 20px 0; }
.zmit .zab-step h3 { padding: 0 38px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zab-steps-art { margin-top: 22px; }
.zmit .zab-steps-grid { max-width: 886px; margin-left: auto; margin-right: auto; column-gap: 20px; }
.zmit .zab-step-ico { width: 90px; height: 90px; }
.zmit .zab-step-ico svg { width: 40px; height: 40px; }
.zmit .zab-step h3 { padding: 0 22px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
.zmit .zab-steps-grid { max-width: 655px; }
.zmit .zab-step h3 { padding: 0 6px; }
}
@media (max-width: 680.98px) {
.zmit .zab-steps-art { margin-top: 28px; }
.zmit .zab-step-ico { width: 77px; height: 77px; }
.zmit .zab-step-ico svg { width: 37px; height: 37px; }
.zmit .zab-step h3 { padding: 0 40px; }
.zmit .zab-steps-cta .zab-btn { font-size: 13px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zab-steps-art { margin-top: 42px; }
.zmit .zab-step { padding: 20px 0; }
}
@media (max-width: 680.98px) { .zmit .zab-steps-art { margin-top: 68px; } }
/* FAQ, as the reference: question rows 25 in on every side, radius 5;
answers 16/26.4 (14/23.1 on phones); bold blue plus / minus signs; on
phones rows 7 apart and 20 of band above and below; at 1024 the first
row starts 9 under the heading */
.zmit .zmit-faq-item { border-radius: 5px; }
.zmit .zmit-faq-q { padding-left: 25px; padding-right: 25px; }
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { font-size: 16px; line-height: 26.4px; }
.zmit .zmit-faq-q .sign { position: relative; width: 16px; height: 16px; font-size: 0; }
.zmit .zmit-faq-q .sign::before,
.zmit .zmit-faq-q .sign::after { content: ""; position: absolute; background: #0664ff; border-radius: 1px; }
.zmit .zmit-faq-q .sign::before { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.zmit .zmit-faq-q .sign::after { top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; }
.zmit .zmit-faq-item.open .zmit-faq-q .sign::before { content: ""; }
.zmit .zmit-faq-item.open .zmit-faq-q .sign::after { display: none; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-faq.z-section { padding: 30px 0; }
}
@media (min-width: 880.02px) and (max-width: 1080.98px) {
.zmit .zmit-faq h2 { margin-bottom: 9px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-faq.z-section { padding: 20px 0; }
.zmit .zmit-faq-item { margin-bottom: 7px; }
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 23.1px; }
}
/* FAQ answers: 16/25.6 on desktop, 14/22.4 on tablet (the reference's) */
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { line-height: 25.6px; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 22.4px; }
}
/* the open answer: 20 in at the sides, 30 under it (24 on phones) */
.zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 20px 30px; }
@media (max-width: 680.98px) { .zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; } }
/* final CTA. Desktop: 426 tall, copy column 590. Phones, as the reference
at 390: 30 / 20 inside, copy 14/25.2, a 13px full-width button, and the
photo across the full band width, 500 tall, 8 under the button, flush
with the band's foot (the older 260px cap is replaced) */
@media (min-width: 1081px) {
.zmit .zmit-final-banner { min-height: 426px; }
.zmit .zmit-final-copy h2,
.zmit .zmit-final-copy p { max-width: 590px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-final-banner { padding: 30px 20px 0; }
.zmit .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; }
.zmit .zmit-final-copy .zab-btn,
.zmit .zmit-final-copy .z-btn { font-size: 13px; width: 100%; justify-content: center; }
.zmit .zmit-final-media img,
.zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: 500px; max-height: none; object-fit: cover; object-position: center top; margin: 8px -20px 0; }
}
/* band paddings below desktop, measured section by section against the
reference at 1024 / 768 and 390 */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-services.z-section { padding-bottom: 0; }
.zmit .zmit-recognized.z-section { padding-bottom: 0; }
.zmit .zab-trust.z-section { padding-top: 30px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-services.z-section { padding-bottom: 0; }
.zmit .zab-problems.z-section { padding: 30px 0; }
.zmit .zmit-bookcal.z-section { padding-top: 30px; }
.zmit .zab-steps.z-section { padding: 20px 0 30px; }
.zmit .zmit-articles.z-section { padding: 20px 0 56px; }
.zmit .zab-adv.z-section { padding: 0 0 30px; }
.zmit .zmit-final.z-section { margin: 50px 0; }
.zmit .zmit-contact.z-section { padding: 50px 0; }
/* stats: 48px figures, the button on one line */
.zmit .zmit-stats .zmit-stat .big,
.zmit .zmit-stats .zmit-stat .big > span { font-size: 48px; line-height: 48px; }
.zmit .zmit-stats-copy .zab-btn { white-space: nowrap; padding-left: 20px; padding-right: 20px; }
/* recognized: the 13px button on one line, as the reference */
.zmit .zmit-recognized .zmit-recognized-band .zmit-recognized-cta .z-btn { font-size: 13px; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }
}
/* ============================================================================
2026-10-13 - deltas carried from Omaha, re-checked on Philadelphia, measured on
/managed-it-services-philadelphia-wp
============================================================================ */
/* compliance band: badges 25 under the copy; 50 / 30 of band on desktop,
30 / 30 below */
.zmit .zab-certified .zab-certified-badges { margin-top: 25px; }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 25px; } }
@media (max-width: 680.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 25px; } }
.zmit .zab-certified.z-section { padding: 30px 0; }
@media (min-width: 1081px) { .zmit .zab-certified.z-section { padding: 50px 0 30px; } }
/* step titles run the full column on phones (one line, as live) */
@media (max-width: 680.98px) { .zmit .zab-step h3 { padding: 0 5px; } }
/* success-story cards as the reference: radius 5, 20 under the heading;
logo 20 under the photo, title 18/25.2 20 under the logo, excerpt
14/23.1 indented 5 more, 20 under the title and 40 above the card foot;
25 in at the sides (20 on phones); photos 250 tall at every width */
.zmit .zmit-stories h2 { margin-bottom: 20px; }
.zmit .zmit-stories-grid > .zmit-story { border-radius: 5px; }
.zmit .zmit-stories-grid > .zmit-story .zmit-story-img img { height: 250px; }
.zmit .zmit-story .body { padding: 20px 25px 40px; }
.zmit .zmit-story .body .zmit-story-logos { margin: 0 0 20px; }
.zmit .zmit-story .body h3 { font-size: 18px; line-height: 25.2px; margin: 0 0 20px; }
.zmit .zmit-story .body p { font-size: 14px; line-height: 23.1px; padding-left: 5px; margin: 0; }
@media (max-width: 680.98px) { .zmit .zmit-story .body { padding: 20px 20px 40px; } }
/* stats band 30 / 30 on desktop */
@media (min-width: 1081px) { .zmit .zmit-stats.z-section { padding: 30px 0; } }
/* recognized band on tablet: the band starts at the section top */
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-recognized.z-section { padding-top: 0; } }
/* the card already carries the template's 14px inset (--zs-inset), so the
body adds 11 (6 on phones) to land the text 25 (20) in; the logo row is
exactly 50 tall */
.zmit .zmit-story .body { padding-left: 11px; padding-right: 11px; }
.zmit .zmit-story .body .zmit-story-logos { height: 50px; min-height: 50px; }
@media (max-width: 680.98px) { .zmit .zmit-story .body { padding-left: 6px; padding-right: 6px; } }
/* in-copy links in the light "operational strengths" band: live's #046bd2 */
.zmit .zab-adv .zab-adv-card p a,
.zmit .zab-adv p a { color: #046bd2; }
/* final CTA - this page's own band, measured on the reference (it is not
the gradient card the Oakland set above was written for): a full-width
lavender band, a 600 heading (48/62.4 desktop, 30/39 at 1024, 24/31.2 at
768 and on phones), copy 17.16/25.2 (14 on phones), a square BLACK
button; desktop 444 tall with the photo flush right overhanging the top;
tablet copy and photo side by side; phones centred copy, a full-width
button and the photo edge to edge, 400 tall */
.zmit .zmit-final-copy .zab-btn { background: #000; border-color: #000; color: #fff; border-radius: 0; justify-content: center; }
.zmit .zmit-final-copy h2 { font-weight: 600; }
@media (min-width: 1081px) {
.zmit .zmit-final-banner { min-height: 444px; }
.zmit .zmit-final-copy { max-width: 665px; flex: 0 1 665px; }
.zmit .zmit-final-copy h2 { font-size: 48px; line-height: 62.4px; max-width: 568px; margin: 0 0 25px; }
.zmit .zmit-final-copy p { max-width: 665px; margin: 0 0 21px; }
.zmit .zmit-final-media { flex: 1 1 auto; display: flex; justify-content: flex-end; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
.zmit .zmit-final.z-section { margin: 0; }
.zmit .zmit-final-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 20px; min-height: 389px; padding: 0; }
.zmit .zmit-final-copy { max-width: 365px; }
.zmit .zmit-final-copy h2 { font-size: calc(6px + 2.344vw); line-height: 1.3; margin: 0 0 20px; }
.zmit .zmit-final-copy p { font-size: 17.16px; line-height: 25.2px; max-width: none; margin: 0 0 20px; }
.zmit .zmit-final-media { align-self: end; }
.zmit .zmit-final-media img,
.zmit-final-media img { position: static; display: block; width: 100%; max-width: 507px; height: auto; max-height: none; margin: 0 0 0 auto; object-fit: contain; }
}
@media (min-width: 880.02px) and (max-width: 1080.98px) {
.zmit .zmit-final-media img, .zmit-final-media img { margin-top: -105px; }
}
@media (max-width: 680.98px) {
.zmit .zmit-final-banner { display: block; padding: 55px 20px 0; min-height: 0; }
.zmit .zmit-final-copy { max-width: none; text-align: center; }
.zmit .zmit-final-copy h2 { font-size: 24px; line-height: 31.2px; margin: 0 0 25px; }
.zmit .zmit-final-copy p { font-size: 14px; line-height: 25.2px; margin: 0 0 19px; }
.zmit .zmit-final-copy .zab-btn { display: flex; width: 100%; font-size: 13px; }
.zmit .zmit-final-media img,
.zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: 400px; max-height: none; object-fit: cover; object-position: center top; margin: 10px -20px 0; }
}
@media (max-width: 680.98px) {
/* the band sits inside the 30px house container: no extra side padding,
and the photo runs past the container to the screen edges */
.zmit .zmit-final-banner { padding: 55px 0 0; }
.zmit .zmit-final-media img, .zmit-final-media img { width: calc(100% + 60px); margin: 10px -30px 0; }
}
/* story logo 20 under the photo (the title stays 20 under the logo) */
.zmit .zmit-story .body { padding-top: 28px; }
.zmit .zmit-story .body .zmit-story-logos { margin-bottom: 12px; }
/* compliance band, this page's reference: desktop heading in its 850px
column (two lines), 65 above / 70 below; 50 / 50 at 768 and on phones,
where the badges sit right under the copy */
@media (min-width: 1081px) {
.zmit .zab-certified h2 { max-width: 850px; margin-left: auto; margin-right: auto; }
.zmit .zab-certified.z-section { padding: 65px 0 70px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified.z-section { padding: 50px 0; } }
@media (max-width: 680.98px) {
.zmit .zab-certified.z-section { padding: 50px 0; }
.zmit .zab-certified .zab-certified-badges { margin-top: 0; }
}
/* hero breadcrumb as the reference: "Home" white, the current page label at
76% white */
.zmit .zmit-hero-crumb a { color: #fff; }
.zmit .zmit-hero-crumb span:last-child { color: rgba(255, 255, 255, .76); }
/* 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: 591 / 575; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; }
}