/* ============================================================
Onshore IT Outsourcing Services — page-specific layer.
Elementor post 35596, 16 depth-0 sections.
COPY SWAP of css/managed-it-services-in-atlanta.css (9 of this page's 16
depth-0 ids are shared with that page, the closest match in the batch). The
commentary immediately below is the ATLANTA provenance, kept because the
measured values it documents are the ones carried here. THIS page's own
measurements — and every band atlanta does not have — live in the
"PAGE-OWN BLOCK" at the very bottom of this file, which loads last and wins.
Read that block before changing anything up here. In particular: this page's
service-card hover DOES lift (translate(-10px,-10px)) and DOES turn the
border blue, which is the opposite of what atlanta's own tail comment
concluded from charlotte; and this page has no .zab-certified band, so the
fused-badge defect that atlanta still carries has been corrected here rather
than inherited.
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 owner-approved city
reference — because live serves both pages from the SAME Elementor template.
Charlotte's depth-1 ids do not all match here (820bdff, 1faf4e0, a86e67a,
d730615, 65e1765, 1ad22e1, 070907d, 7572440 and a8ff3b4 do), but the section
list is one-for-one with ONE structural difference: live splits the services
band into TWO depth-1 containers (a42bb09 = the icon-box lead, ff62dee = the
12-card grid) where charlotte packs both into 743c4b6. That is why the
depth-1 walk yields 22 here and 21 there. Same widgets, same vocabulary, so
charlotte's measured values carry.
MEASURED DELTAS — read off THIS page's own Elementor CSS / raw HTML, never
carried from charlotte:
- hero banner is Managed-IT-Services-in-Atlanta-Banner-scaled.webp; it
must equal the 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; }
/* Band CTA icon = the reference's chevron (it-managed-services video band, owner 2026-10-23):
8x12 stroked ">" instead of the long arrow, at every width. */
.zmit .zab-band-btn .zab-btn-chev svg { width: 8px; height: 12px; }
.zmit .zab-band-btn .zab-btn-chev svg path { fill: none; stroke: currentColor; }
.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;
/* PER-PAGE DELTA: live's body cells resolve to 14px/1.5em at BASE on this
page (a later Elementor rule beats the 16px/28px one). Charlotte's are
16px/28px — measured, not carried. */
font-size: 14px; font-weight: 500; line-height: 21px; 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); }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* PER-PAGE DELTA (read off THIS page's own inline Elementor CSS, SIX rows).
Per-cell, straight from live's stylesheet:
col0 b911402 gradient container, cells transparent; row1 border 1px +
radius 10 10 0 0, rows 2-6 border 0 1px 1px
col1 de82055 container #eff0f7; row1 transparent + border 1px 1px 0,
rows 2-6 border 1px all round; odd rows transparent,
even rows (ff78d9b / d3b92ea / 629be87) #f9fcff
col2 6d34d5e no container fill; odd rows #f9fcff, even rows #fff;
row1 border 1px + radius, rows 2-6 border 0 1px 1px
Expressed as odd/even so it holds at any row count.
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. The Zazz column's
FIRST cell is live's one exception — border-width: 1px 1px 0 — so the
hairline beneath it is drawn once, by row 2's top border, not twice. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
.zab-cmp-col-1 .zab-cmp-cell:first-of-type { border-bottom-width: 0; }
.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; }
/* THIS PAGE HAS NO .zab-certified BAND — its 1faf4e0 band is the recognition
strip (3 review logos), not a 6-badge compliance row. The rule is kept only
so a future clone of this sheet starts from the CORRECT layout: a 16px-gap
grid at NATURAL image aspect. The reference sheet
(css/managed-it-services-in-atlanta.css) still carries the fused-badge
defect here — gap 0 plus a forced aspect-ratio and object-fit:fill, which
smears the tiles into one uneven dark bar (CLAUDE.md §7). Do not copy it
back. */
.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; }
/* ============================================================
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: 600; line-height: 28px; color: #f7f7fc; margin: 0; }
/* ============================================================
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 has NO eyebrow — live 511fe7e ships a
single heading, the h3 a17c04f at clamp(1.5rem,1.311rem + 1.0081vw,2.125rem)
/400/1.3em (34px at 1440) in #fcfcfc. No h2 is emitted here, so charlotte's
.zmit-stats-copy h2 override is not shipped.
DARK BAND => LIGHT COPY. */
.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%);
/* DEFECT FIX (owner, 2026-09-21): the card is CONTENT-DRIVEN. It used to carry
min-height: 415px copied off live's own card height, and the shared sheet adds
min-height: 268px + display:flex/align-items:center - so a short quote was
centred in a fixed box and left a large blank band under the text
(measured 117 px of dead space top AND bottom at 1440). Both floors are
cleared here. The slides are stacked in ONE grid cell instead of the shared
display:none/block swap, so the deck's height is the tallest slide and the
auto-advance below cannot make the page jump. */
min-height: 0;
display: grid;
align-items: center;
}
.zmit-testi-card > .zmit-testi-slide { grid-area: 1 / 1; display: block; visibility: hidden; }
.zmit-testi-card > .zmit-testi-slide.is-active { visibility: visible; }
.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.
============================================================ */
/* Live's band (e-con 1187a39) is margin: 150px 0 80px with padding 0. The
150px top is the figure's room to hang ABOVE the band - measured on live at
1440: imgTopVsBandTop -138, imgOverhangBelowBand 0. */
.zmit .zmit-final.z-section { margin: 150px 0 80px; padding: 0; }
.zmit-final-banner {
background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
border-radius: 5px;
padding: 50px;
/* = LIVE's measured row height at 1440 (band 378). The figure is
516 tall and bottom-anchored, so it overhangs the top by
516 - 378 = 138px exactly as live does, and the band does NOT
grow to contain it. */
min-height: 378px;
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 at 1440: figure 500 x 516, bottom-aligned to the band, overhanging
the top by 138px. The absolute box IS the reserve - it cannot collapse when
the referer-blocked CloudFront file has not loaded, and it cannot inflate
the band because it is out of flow. */
.zmit-final-media img { position: absolute; right: 56px; bottom: 0; width: 500px; height: 516px; }
/* ============================================================
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 */
/* Story cards: the excerpt now SHOWS on phones too (owner 2026-10-22; was hidden here). */
/* 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; }
/* PER-PAGE DELTA: the shared sheet pins .zmit-recognized-cta .z-btn to
white-space: nowrap. This page's label ("Partner with Our Certified MSP in
Atlanta") measures 379px unwrapped, which is wider than the band's 263px
content box at 375 - so the single grid track resolved to 379px and the
whole copy column ran 60px past the viewport, clipped (invisibly) by the
chrome's body{overflow-x:hidden}. Measured at 375: copy l=56 r=435.
Charlotte hits the same rule with a shorter label (334px) so it only
overhangs 15px; the fix belongs on the label, not the container width.
Only the button rule is overridden - the shared sheet is not touched. */
.zmit .zmit-recognized-cta .z-btn { white-space: normal; }
}
/* ---------------------------------------------------------------------------
SERVICE CARDS - matched to live, measured in the browser on
/managed-it-services-in-atlanta 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 .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 .zmit-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zmit-svc-more { visibility: visible; }
/* NO border change and NO lift on hover - measured three times on live
(charlotte, 1440, real pointer, 1s settle, hovered card vs a resting
sibling in the same evaluation): the SAME card reads 338x374 at top 263
left 7 both at rest and hovered, transform resolves to the identity
matrix, and borderTopColor stays rgb(239,240,247). Live's hover is ONLY
the fill change plus the CTA reveal. A blue border and a
translate(-10px,-10px) were briefly applied here from another session's
reading of the industry template; they made the hovered card jump out of
the grid and were removed. Do not reintroduce without re-measuring THIS
template. */
.zmit-services-grid .zmit-svc-card:hover,
.zmit-services-grid .zmit-svc-card:focus-within { background: #d5e0f3; }
/* ============================================================
PAGE-OWN BLOCK — /onshore-it-outsourcing-services
This sheet is a COPY SWAP of css/managed-it-services-in-atlanta.css (9 of
this page's 16 depth-0 ids are shared with that page). Everything below was
MEASURED on THIS live page at 1440 with Playwright, element ids inline, and
is loaded last so it wins over the copy-swapped rules above.
Bands the reference has and this page does NOT: .zab-problems, .zab-cmp-head
plus .zab-cmp and .zab-cmp-acc as a TABLE, .zab-certified, .zab-steps,
.zab-trust, .zab-adv, .zmit-articles. Their rules survive above and match
nothing. (.zab-cmp-head IS reused, but only as a heading-only band — this
page has no comparison table at all.)
Bands this page ADDS: .zab-why4 (live c686ac1), .zab-proc (live ec4eec9) and
.zab-flip (live 5e9927e).
============================================================ */
/* ------------------------------------------------------------
S02 SERVICES GRID — live 5dd0145, MEASURED at 1440:
wrap l30 w1380 4 columns of 333.75, gap 15 (NOT the reference's 30)
card 334 x 284 CONSTANT for all twelve, border 1px #eff0f7, radius 10
inner .uc_content flex column, padding 30
lead 34.7px/400/43px #14142b (already correct in .zab-svc-lead above)
Constant card height is the tell for the ROOT-page CTA template: the CTA row
is reserved in flow (visibility:hidden + margin-top:auto + padding-top:10px,
already in the copy-swapped block) so the card cannot grow on hover. Do NOT
swap in the nested-page position:absolute variant.
------------------------------------------------------------ */
/* grid-auto-rows:1fr because live's three rows are ALL 284 tall - a plain
auto grid sizes each row to its own tallest card and shipped 324/300/324. */
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; grid-auto-rows: 1fr; }
.zmit .zmit-services.z-section { padding: 50px 0; } /* live 5dd0145 inner padding */
/* live's bullets are 12px/19.8 with a 12px block margin, NOT the reference's
14px/23.1 - measured on this page's own cards */
.zmit-services-grid .zmit-svc-card ul { margin: 12px 0; }
.zmit-services-grid .zmit-svc-card li { font-size: 12px; line-height: 19.8px; }
/* ------------------------------------------------------------
CARD HOVER — MEASURED ON THIS PAGE with a real pointer, 1.2s settle, and a
resting sibling read in the same evaluation as a control:
border #eff0f7 -> #0161ff
fill #eff0f7 -> #d5e0f3 (on .uc_content, i.e. our .zmit-svc-card)
transform none -> translate(-10px, -10px)
shadow / radius unchanged; card stays 334x284 at rest AND hovered
This is the CITY hover, and it DOES lift. The reference sheet ends with a
comment saying charlotte measured no border change and no lift — that is
true of charlotte, and NOT true here, so it is overridden below. Re-measure
before carrying either way (CLAUDE.md §7).
------------------------------------------------------------ */
.zmit-services-grid .zmit-svc-card { transition: background-color .3s, border-color .3s, transform .3s; }
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within {
background: #d5e0f3; border-color: #0161ff; transform: translate(-10px, -10px);
}
/* ------------------------------------------------------------
S03 HEADING-ONLY BAND — live 81d38f2 h2 is 36.8px/400/36.8px #141414,
left-aligned, w923 at the container edge. There is no table under it on
this page; the four icon cards of S04 follow.
------------------------------------------------------------ */
/* live 81d38f2 inner padding is 50px 0 30px here => band height 117 */
.zmit .zab-cmp-head.z-section { padding: 50px 0 30px; }
.zmit .zab-cmp-head h2 { font-size: 36.8px; font-weight: 400; line-height: 36.8px; text-align: left; margin: 0; }
/* ------------------------------------------------------------
S04 WHY-CHOOSE 4-UP — live c686ac1, MEASURED at 1440:
grid 29e2e8d l30 w1380 4 columns of 330, gap 20
cell padding 20, NO background, NO border, heights VARY
(237 / 237 / 261 / 285) — content-driven, not equalised
icon svg 50 x 50, colour #69727d
h3 20px/700/24px #141414
p 16px/400/24px #14142b
------------------------------------------------------------ */
/* DEFECT FIX (owner, 2026-09-21): the blank strip under the four icon cards was this
section padding-bottom, nothing else - no fixed row height and no stale min-height;
the cells are content-driven (237/237/261/285 tall at 1440, tallest wins the row).
Measured at 1440, last card bottom -> next band top: LIVE 79px, ours was 90px, so we
were already within 11px of live and live carries the same gap. The owner wants it
TIGHTER than live - this 40px is a deliberate owner deviation, not a live-match.
Do not "correct" it back to live c686ac1 on the next port. */
.zmit .zab-why4.z-section { background: #fff; padding: 0 0 40px; }
.zab-why4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.zab-why4-cell { padding: 20px; }
.zab-why4-ico { display: block; margin-bottom: 15px; }
.zab-why4-ico svg { display: block; width: 50px; height: 50px; color: #69727d; }
.zmit .zab-why4-cell h3 { font-size: 20px; font-weight: 700; line-height: 24px; color: #141414; margin: 0 0 12px; }
.zmit .zab-why4-cell p { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--zab-ink); margin: 0; }
.zab-why4-cell p a { color: var(--zab-accent); }
/* ------------------------------------------------------------
S05 STATS — live 7bf6782, MEASURED: wrapper padding 50px 0, copy column
w443 at the container edge, 3 counters. This page DOES carry the h2 eyebrow
(16px/600/19.2px #fcfcfc) that the reference page lacks, above an h3 of
34px/400/44.2px #fcfcfc. Counter 2 is a "2.5x" — a NON-integer with an "x"
suffix, so the count-up must keep the decimal.
------------------------------------------------------------ */
.zmit .zmit-stats-copy h2 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #fcfcfc; margin: 0 0 20px; }
.zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 25px; }
/* ------------------------------------------------------------
S07 PROCESS — live ec4eec9. Same component as the helpdesk page's cafeec5,
re-measured here:
two columns of 700 at l20 / l720, each padded 0 30px
h2 30px/400/39px #141414
summary background #262338, radius 5px, padding 25px, 16px/400 #fcfcfc,
item height 77, 7px between items, none open at rest
------------------------------------------------------------ */
.zmit .zab-proc.z-section { background: #fff; padding: 50px 0 80px; } /* live ec4eec9 inner padding, measured */
.zab-proc-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.zab-proc-copy { padding: 0 30px; }
.zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 25px; }
.zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 20px; }
.zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
.zab-proc-copy p a { color: #046bd2; }
.zab-proc-acc { padding: 0 30px; }
.zab-dacc-item { margin-bottom: 7px; }
.zab-dacc-item:last-child { margin-bottom: 0; }
.zab-dacc-q {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--zab-dark); border-radius: 5px; padding: 25px;
font-size: 16px; font-weight: 400; line-height: 1.6; color: #fcfcfc;
cursor: pointer; list-style: none;
}
.zab-dacc-q::-webkit-details-marker { display: none; }
.zab-dacc-q:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.zab-dacc-sign { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
.zab-dacc-sign::before,
.zab-dacc-sign::after { content: ""; position: absolute; background: #fcfcfc; }
.zab-dacc-sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.zab-dacc-sign::after { top: 0; left: 6px; width: 2px; height: 14px; transition: opacity .2s; }
.zab-dacc-item[open] .zab-dacc-sign::after { opacity: 0; }
/* DEFECT FIX (owner, 2026-09-21): the answer belongs INSIDE the dark row, not in a
light panel hanging below it. Live (read on the real page at 1440, row opened with
a real click): summary 77 tall, padding 25, background #262338, radius 5 at rest and
5px 5px 0 0 while open; the answer wrapper is the SAME #262338 and fills the row -
i.e. one continuous dark card, never a light box on the light band. Rows sit 7px
apart and live opens NONE of them at rest, one at a time thereafter. */
.zab-dacc-item[open] .zab-dacc-q { border-radius: 5px 5px 0 0; }
.zab-dacc-a { padding: 0 25px 25px; background: var(--zab-dark); border-radius: 0 0 5px 5px; }
.zmit .zab-dacc-a p { font-size: 15px; font-weight: 400; line-height: 25px; color: #f7f7fc; margin: 0; }
.zab-dacc-a p a { color: #a9c9ff; }
/* Guard: a closed row must never paint its answer. The UA already hides details
content, but the owner saw every row open at once with the answers showing, so the
hiding is stated explicitly here rather than left to the engine. */
.zab-proc-acc details:not([open]) > *:not(summary) { display: none; }
/* ------------------------------------------------------------
S12 INDUSTRY FLIP CARDS — live 5e9927e, MEASURED at 1440:
card 260 x 270, flex-WRAP with a 15px gap => 5 per row, 12 cards over
three rows with the last row centred; perspective 1000px
front #f1f1f7, radius 10, padding 12px 27px, icon ~75x77 above a
16px/600 #111 title
back white, radius 10, rotateY(180deg)
Identical geometry to the .zab-flip already shipped on
css/app-modernization-services.css, so those values are carried and only
the numbers above were re-confirmed here.
------------------------------------------------------------ */
/* live 5e9927e is 1177 tall around 3 rows of 270 plus two 15px gaps */
.zmit .zab-flip.z-section { background: #fff; padding: 80px 0 90px; }
/* live: h2 34.7px/400 centred #1f1f1f; lead 15.5px/400/25px centred #000,
728 wide. NOTE live LAYERS the lead paragraph underneath the h2 (p at y6721
h141, h2 at y6732 h56) so the two overlap on the real page. That is a live
defect; we stack them, which is the readable result. */
.zmit .zab-flip h2 { font-size: 34.7px; font-weight: 400; line-height: 1.3; color: #1f1f1f; text-align: center; margin: 0 0 14px; }
.zmit .zab-flip-lead { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; text-align: center; max-width: 728px; margin: 0 auto 28px; }
.zmit .zab-flip-wrap { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.zmit .zab-flip-card { flex: 0 0 260px; height: 270px; perspective: 1000px; }
.zmit .zab-flip-card:focus-visible { outline: 2px solid #0161ff; outline-offset: 3px; }
.zmit .zab-flip-inner {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d; transition: transform .6s;
}
.zmit .zab-flip-card:hover .zab-flip-inner,
.zmit .zab-flip-card:focus-within .zab-flip-inner { transform: rotateY(180deg); }
.zmit .zab-flip-front,
.zmit .zab-flip-back {
position: absolute; inset: 0; backface-visibility: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
border-radius: 10px;
}
.zmit .zab-flip-front { background: #f1f1f7; padding: 12px 27px; }
.zmit .zab-flip-front img { width: 75px; height: 77px; object-fit: contain; display: block; }
.zmit .zab-flip-front h3 { font-size: 16px; font-weight: 600; line-height: 1.35; color: #111; text-align: center; margin: 0; }
.zmit .zab-flip-back { background: #fff; padding: 11px; transform: rotateY(180deg); }
.zmit .zab-flip-back ul { margin: 0; padding: 0 0 0 16px; text-align: left; }
.zmit .zab-flip-back li { font-size: 14px; line-height: 1.5; color: #4a4a63; margin: 0 0 6px; }
.zmit .zab-flip-back li:last-child { margin-bottom: 0; }
.zmit .zab-flip-back li a { color: var(--zab-accent); }
.zmit .zab-flip-back p { font-size: 14px; font-weight: 400; line-height: 1.55; color: #4a4a63; text-align: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .zmit .zab-flip-inner { transition: none; } }
/* ------------------------------------------------------------
BELOW 1081 — the new bands stack. The desktop rules above are
unconditional, so they are undone here rather than gated, keeping the
copy-swapped media blocks untouched.
------------------------------------------------------------ */
@media (max-width: 1080px) {
/* MUST be restated: this block loads after the reference sheet's own
max-width:1080 override, so without it the unconditional 4-up rule in
the desktop part of this page-own block wins and the grid stays 4-up. */
.zmit-services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
.zmit .zab-why4.z-section { padding: 30px 0; } /* live c686ac1 @768 */
.zab-why4-grid { grid-template-columns: repeat(2, 1fr); }
.zab-proc-grid { grid-template-columns: 1fr; gap: 24px; }
.zab-proc-copy, .zab-proc-acc { padding: 0; }
.zmit .zab-cmp-head h2 { font-size: 28px; line-height: 1.2; }
.zmit .zab-flip h2 { font-size: 28px; }
/* the lift would push a hovered card outside a 2-up grid */
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: none; }
}
@media (max-width: 680px) {
.zmit-services-grid { grid-template-columns: 1fr; gap: 20px; grid-auto-rows: auto; }
.zmit .zab-why4.z-section { padding: 20px 0 50px; } /* live c686ac1 @375 */
.zab-why4-grid { grid-template-columns: 1fr; }
.zab-why4-cell { padding: 16px 0; }
.zmit .zab-cmp-head h2 { font-size: 24px; line-height: 1.25; }
.zmit .zab-flip h2 { font-size: 24px; }
.zmit .zab-flip-card { flex: 0 0 100%; }
.zab-dacc-q { padding: 18px; }
.zmit .zmit-stats-copy h3 { font-size: 26px; line-height: 1.3; }
}
/* 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;
}
}
/* FAQ split: left column never shorter than the right (owner 2026-10-07). 16 questions
-> forced break after question 8 (8 | 8). Only where this page shows two columns
(min-width: 1081px); single-column layouts never get a forced break, so it cannot
open a stray column. The shared faq-cols script then keeps this split on open/close. */
@media (min-width: 1081px) {
.zmit .zmit-faq-list > .zmit-faq-item:nth-child(6) { break-after: auto; }
.zmit .zmit-faq-list > .zmit-faq-item:nth-child(8) { break-after: column; }
}
/* FAQ = ONE list on tablets, both orientations (owner 2026-10-07). The shared
faq-cols-style.php already stacks portrait tablets; landscape (681-1080 wide)
kept two columns here. Same rule as the shared one, for every tablet width.
Phones were already one list; desktop (>=1081) keeps its two columns. */
@media (min-width: 681px) and (max-width: 1080px) {
.zmit-faq .zmit-faq-list { columns: auto !important; display: block !important; }
.zmit-faq .zmit-faq-list > .zmit-faq-item { break-after: auto !important; -webkit-column-break-after: auto !important; }
}
/* Explore-link arrow right after the text (owner 2026-10-08, longer CTA labels): as an
inline-flex row a wrapping label stretched to the card width and pushed the arrow to
the far edge. The link flows as text; the last word + arrow share one no-wrap span
(see the PHP loop), so the arrow always sits 14px after the last word. Same fix as
offshore-it-outsourcing (#1676). Unlinked cards (no-cta) have no CTA and no lift. */
.zmit-services-grid .zmit-svc-card .zmit-svc-more { display: block; }
.zmit-services-grid .zmit-svc-card .zmit-svc-more .z-cta-nw { white-space: nowrap; }
.zmit-services-grid .zmit-svc-card .zmit-svc-more .z-cta-nw svg { display: inline-block; vertical-align: middle; margin-left: 14px; position: relative; top: -1px; }
/* Card lift on TABLETS and PHONES too (owner 2026-10-08): same as desktop - the
linked card turns #d5e0f3 with the #0161ff border and lifts 10px up-left on hover,
or on tap on touch screens. The earlier max-width:1080 "transform: none" was there
for fear of pushing a card off the grid; measured 375-1080, a lifted left-column
card stays 20px inside the screen edge and adds no horizontal scroll.
Unlinked (no-cta) cards still do not lift. */
@media (max-width: 1080px) {
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: translate(-10px, -10px); }
}
/* PRE-FOOTER BAND - PHONE (<=680) = the WordPress page at 375 (owner, 2026-10-07).
Measured on /onshore-it-outsourcing-services-wp (identical to the offshore page, PR #1724): #000 band, 60px top and bottom; logo
230x51; 20px; title 16px/16px behind a 2px white bar, text 10px in; 20px;
copy 14px/19.6px with a 22.4px paragraph margin; 20px; two full-width 58px
buttons (16px/500/24px, 16px padding, radius 5) 20px apart, Contact Us white
with black text, Subscribe outlined. The side gutter stays the house 30px
(WP runs 20px) - the content box is never widened. Desktop and tablet are
untouched; the edge is 680.98px so a fractional width cannot fall through. */
@media (max-width: 680.98px) {
.zmit .zmit-insights.z-section { padding: 60px 0; }
.zmit .zmit-insights .zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; align-items: start; }
.zmit .zmit-insights .zmit-insights-copy { grid-template-columns: 1fr; row-gap: 20px; }
.zmit .zmit-insights .zmit-insights-logo { height: 51px; width: auto; max-width: 100%; }
.zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
font-size: 16px; line-height: 16px; max-width: none;
border-left: 2px solid #fff; padding-left: 10px; margin-left: 0;
}
.zmit .zmit-insights .zmit-insights-copy p:not(.zmit-insights-title) {
font-size: 14px; line-height: 19.6px; color: #fff; margin: 0 0 22.4px; max-width: none;
}
.zmit .zmit-insights .zmit-insights-btns { flex-direction: column; flex-wrap: nowrap; gap: 20px; }
.zmit .zmit-insights .zmit-insights-btns a {
width: 100%; padding: 16px 30px; border-radius: 5px;
font-size: 16px; font-weight: 500; line-height: 24px;
}
.zmit .zmit-insights .zmit-insights-btns a:first-child { color: #000; }
}
/* ============================================================
CONSULTANT BANNER ON PHONES (<=767) = /onshore-it-outsourcing-services-wp (owner 2026-10-21),
measured on the -wp page at 375/412/480/500/510/540/600/767:
- card: the same gradient, 5px corners, no padding, 50px above and below
- copy: 30px 20px 0 inside the card, heading / text / button 20px apart;
h2 33.05/42.965 w600, text 14px/25.2px, button 13px/16px w600,
15px 30px, 5px corners, only as wide as its label (wraps when longer)
- photo: left-aligned, flush with the card foot, pulled up under the
button by -12% of the card width (WP: copy foot +50px, margin -12%);
<=500 it is 500px tall and cover-cropped to the card width, above 500
it runs full width up to 500px at its natural ratio
Tablet (768-1080) and desktop already match the -wp page: untouched.
============================================================ */
@media (max-width: 767px) {
.zmit .zmit-final.z-section { margin: 50px 0; padding: 0; }
.zmit .zmit-final .zmit-final-banner {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
padding: 0; min-height: 0; border-radius: 5px;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-copy {
display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
max-width: none; width: auto; padding: 30px 20px 0; margin: 0; box-sizing: border-box;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-copy h2 {
font-size: 33.05px; line-height: 42.965px; font-weight: 600; letter-spacing: normal;
color: #14142b; margin: 0; max-width: none;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-copy p {
font-size: 14px; line-height: 25.2px; font-weight: 400; color: #14142b; margin: 0; max-width: none;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-copy .zab-btn {
align-self: flex-start; max-width: 100%; width: auto; margin: 0; box-sizing: border-box;
font-size: 13px; line-height: 16px; font-weight: 600; padding: 15px 30px; border-radius: 5px;
white-space: normal; text-align: center; gap: 20px;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-media {
position: static; display: block; width: 100%; max-width: none; height: auto;
margin: calc(50px - 12%) 0 0; padding: 0;
}
.zmit .zmit-final .zmit-final-banner .zmit-final-media img {
position: static; display: block; margin: 0; transform: none; aspect-ratio: auto;
width: 100%; max-width: 500px; height: auto; max-height: none;
object-fit: cover; object-position: 50% 50%;
}
}
@media (max-width: 500px) {
.zmit .zmit-final .zmit-final-banner .zmit-final-media img { width: auto; max-width: 100%; height: 500px; object-fit: cover; }
}
/* Video thumbnail (2026-10-21): the poster is a touch wider than the video box, so
the browser letterboxed it with black strips top and bottom. Fill the box instead
(same fix as cisco-meraki, fort-worth and the city pages). */
.zmit video.zab-band-video { object-fit: cover; }
/* Consultant (final) band on PHONES: the photo is shown WHOLE at its own proportions
(owner 2026-10-22 - a fixed 500px object-fit:cover box cut people off). It spans
the full card width (the largest it can be without cropping) and sits on the card's
bottom edge. Phones only. */
@media (max-width: 680.98px) {
body .zmit section.zmit-final .zmit-final-banner .zmit-final-media img { position: static; display: block; width: 100%; max-width: none; height: auto; max-height: none; aspect-ratio: 523 / 540; object-fit: contain; object-position: center bottom; margin-left: 0; margin-right: 0; }
}