/* ============================================================
Managed IT Services Vancouver — page-specific layer.
ROOT CITY CLUSTER, WP ID 36158, FIFTEEN SECTIONS (the siblings have 21).
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 ROOT-city reference
that shares this page's `managed-it-services-` slug prefix. It is NOT an
id-for-id template match: this page shares only FOUR depth-1 ids with
charlotte and with every other city page still on WordPress (820bdff hero,
1ad22e1 FAQ, 7572440 contact, a8ff3b4 pre-footer). charlotte's own live HTML
can no longer be diffed at all — that URL is already migrated and serves its
PHP replica. So the four shared components carry the reference's measured
values unchanged, and every other band below was re-measured on THIS page's
live DOM at 1440 / 768 / 500. See the page file's header for the full map.
REMOVED from the clone — this page has no such section, so the rules would
be dead weight (verified against live's 15 depth-1 containers):
.zab-problems .zab-band .zab-steps .zab-trust .zab-adv
.zmit-article- .zab-cmp-acc .zab-acc-
The comparison ACCORDION goes with them: live ships ONE comparison widget,
and measured at 500px its three columns simply stack (445 wide, 672 tall),
so the table itself carries the narrow layout below 768.
MEASURED DELTAS vs the charlotte clone, each read off THIS page's rendered
DOM at 1440, never computed from CSS:
- hero banner URL (this page's own artwork — managed-it-services-vancouver-
banner-image-scaled.webp; it must equal the preload link in the page)
- S02 services is EIGHT cards, still FOUR columns (live 30px gap, cards
319 wide at x30/379/728/1076, rows 379 and 425 tall)
- S04 comparison is SIX rows. The stripe rules are odd/even and the Zazz
column's hairline is on EVERY row, so the block is row-count-independent
and needed no edit for the row-count change — do NOT enumerate rows.
- S05 stats: the SHORT line is the eyebrow and the longer sentence is the
H2 (live 6da0509 = 19px tall, 60119e3 = 88px over two lines), so the
markup uses a .zmit-stats-eyebrow span plus an h2, not h2 + h3
- S11 recognition logos are white PNGs rendered SEVENTY px tall
(130 / 203 / 241 wide at y6486), not the reference's 50px SVGs
- S12 FAQ is FIFTEEN items split 9 / 6, so the column break moves from
nth-child(6) to nth-child(9)
- S13 final CTA is a two-column gradient banner with an OVERHANGING
figure — every number re-measured, see that block
- S15 pre-footer buttons carry a chevron glyph (the reference's do not)
- .zmit-stat .big .pre is unused — all three counters are suffix-only —
but kept so the stats partial stays copy-safe for the sibling city pages
Two halves:
1. Family A carry-overs — the APPROVED values (hero/form geometry, FAQ
padding, services-card fill, light copy on dark bands). Carried, not
re-invented.
2. Family B additions — the sections Family A has no component for
(the comparison head and table, the certified badge band, and this
page's own .zab-approach) plus the Family A components whose live
values differ.
Split rule: a given CSS property for a given selector lives in exactly one of
the two sheets, never both, so their load order cannot change any outcome.
============================================================ */
/* ------------------------------------------------------------
BRAND TOKENS taken from live's Elementor globals
------------------------------------------------------------ */
.zmit {
--zab-ink: #14142b; /* live body/heading ink */
--zab-accent: #0161ff; /* --e-global-color-accent */
--zab-body: rgba(20, 20, 20, .7); /* --e-global-color-text */
--zab-line: rgba(6, 0, 28, .12); /* compare-table hairline */
--zab-fill: #eff0f7; /* card fill (uc_content / icon-box bg) */
--zab-dark: #262338; /* trust strip + stats band */
}
/* ------------------------------------------------------------
CONTENT BOX. Live's boxed containers are the full viewport minus a 30px
gutter — measured innerWidth 1365 at x=30 on 743c4b6, d2a41b8, 81d38f2,
672e3a2, ae25977, a86e67a, d730615, 43ab1b2, 9d19ee4, 65e1765, 1ad22e1 —
NOT the shared sheet's 1400px centred box (1340 at x=43). The pre-footer
band 6648aeb is the single exception: 1400 wide at x=13, no gutter.
------------------------------------------------------------ */
/* Owner decision 2026-08-26: Family B uses the Family A centred box (shared
.z-container = max-width 1400px, margin 0 auto, padding 0 30px) even though
live's own Acronis page runs wider (content 1365 at x=30). Consistency across
migrated pages beats matching live's width here. Do NOT reintroduce a global
`.zmit .z-container { max-width: none }`. */
/* ============================================================
1. HERO — every number below read off live's rendered DOM at 1440
(8e8eda0 hero-section = 607 tall, 41deb3c logo strip = 125, total 732).
Live's hero inner is a flex ROW that fills the 1365 box exactly:
left column 757 | gap 100 | form card 508
The left column carries a flat 20px gap between crumb / pill / headline /
sub / CTA and a 50px bottom pad, which is what produces the 718.
The form CARD (6c4c282, not the HubSpot widget inside it) is stretched to
the row and carries margin-bottom:-95.55px, so it starts at the hero's own
content top (y 140 — above the breadcrumb) and overhangs 96px into the
logo strip. Family A's -132px overhang is a different number, not no
overhang: measure, don't carry.
============================================================ */
/* Live paints the banner as a plain ![]()
sized 1425x718 with object-fit:fill —
the artwork is STRETCHED to the box, not cropped, so `cover` gave a
different crop. 100% 100% is the background equivalent of fill. */
.zmit-hero::before {
background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/10/09104120/managed-it-services-vancouver-banner-image-scaled.webp') center/100% 100% no-repeat;
background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }
@media (min-width: 1081px) {
/* crumb text lands at y 118, pill at y 184 (live 96bcdb8 / 8808f78) */
.zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
/* 757 / 100 / 508 of the 1365 box, as percentages so it tracks the
viewport below 1440 instead of hard-coding a 1440-only pixel row. */
.zmit .zmit-hero-grid {
grid-template-columns: 55.46% 37.22%;
gap: 7.33%; align-items: stretch; padding: 28px 0 0;
}
.zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
/* live's left column is a flex column with a flat 20px gap */
.zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
/* Owner request 2026-08-26: hero headline + sub reduced below live's 54px/16px.
Deliberate deviation from live, applied on request. */
.zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
/* live's sub runs the FULL 757 column (5 lines / 132px). Capped at 560 it
wrapped to 6 lines and pushed the CTA 41px down. White, not #e6eaf2. */
.zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
/* live b37b9ab on THIS page: 16px/16px/500 label, 13px 35px pad, #f2f7ff
fill, 20px icon gap -> a 349 x 42 pill. charlotte measures 253 x 36 at
12px there; this was re-measured, not carried. */
.zmit-hero .zmit-hero-cta { margin-bottom: 0; }
.zmit-hero .zmit-hero-cta-btn {
font-size: 16px; line-height: 16px; font-weight: 500;
padding: 13px 35px; gap: 20px;
background: #f2f7ff; border: 0;
}
/* live's button-icon is 16x12; left at its natural svg height it becomes the
tallest flex item and inflates the pill from 36 to 46. */
.zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 16px; }
.zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
/* The shared button floors itself at a 46px touch target; live's desktop
pill is 42. Only overridden above 1081px, so the 46px tap target the
accessibility audit checks on mobile is left intact. */
.zmit-hero .zmit-hero-cta-btn { min-height: 42px; }
.zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
/* -44px lifts the card past the breadcrumb row to the hero content top;
-95.55px is live's own overhang into the logo strip. */
/* Live's white hero card measured at 1440: t140 h774 w508 l887, radius 8,
padding 20px 25px 20px 20px. It IS stretched to the row and overhangs the
banner by 95.55px into the logo strip. (The 459x458 box at y290 is the
.hsfc-Form INSIDE the card - do not size the card against it.) */
.zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
.zmit-form-card {
margin: 0; height: 100%; transform: none;
padding: 20px 25px 20px 20px;
}
.zmit-form-card h3 { margin-bottom: 12px; }
.zmit-hsform { min-height: 0; }
.zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
.zmit-hsform input,
.zmit-hsform textarea,
.zmit-hsform select,
.zmit-hsform .hsfc-TextInput,
.zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
.zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
.zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}
/* Scroll cue — live d2ae808 is a bare 30px chevron at left:50% (no translate),
10px off the banner's bottom edge, no disc, fill rgba(255,255,255,.66),
bobbing on `float 3s`. The shared component draws a 48px glass disc. */
.zmit-hero .zmit-hero-scroll {
left: 50%; bottom: 18px;
width: 30px; height: 30px; border: 0; border-radius: 0;
background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
color: rgba(255, 255, 255, .66);
/* The shared bob bakes translateX(-50%) into its keyframes, which pulls the
chevron 15px left of where live puts it. Live sits flush at left:50% with
no centring translate, so the bob is redefined without the X shift. */
animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
.zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }
/* Trust strip — live 41deb3c is 125 tall (15 top / 40 bottom around a 70px
logo row) and its marquee window is 792 wide, flush with the gutter. Each
holder measures 148 x 70 on this page (charlotte 180) - re-measured.
Live's wrapper scrolls 21199px in 92s == ~115px/s; ours is a shorter track,
so the duration is set from our own track width to keep the same speed. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { height: 70px; }
/* Owner request 2026-08-26: make every marquee logo read the same size.
Live (and our clone) sized these by HEIGHT only (70px, object-fit:contain),
so width ran 139-221px and the square Gartner mark (200x200 natural, every
other file is 193px tall) read as a small icon. Bounding BOTH axes inside a
fixed chip evens the optical weight. */
.zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 148px; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 136px; object-fit: contain; }
/* ============================================================
SHARED PAGE BUTTON — live's own body CTA (label first, then arrow).
Used by S03, S09, S15, S18. Live element 4480afa / 192ffed.
============================================================ */
.zmit .zab-btn {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15.38px; font-weight: 600; line-height: 16px;
color: #fcfcfc; background: var(--zab-accent);
border-radius: 5px; padding: 15px 30px; text-decoration: none;
transition: background .2s ease;
}
.zmit .zab-btn:hover { background: #141414; color: #fcfcfc; }
/* Measured on every live CTA (hero 732, problems 2388, steps 5388,
recognized 5681, stats 8429): the arrow sits AFTER the label, never before. */
.zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; }
.zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; }
.zmit .zab-btn-ico svg path { fill: currentColor; }
/* live cb96327 (stats): 14.59px/14.59px/500, #0161ff on #f2f7ff, 12px 24px,
8px radius — live does NOT invert this to a white pill. */
.zmit .zab-btn-light {
background: #f2f7ff; color: var(--zab-accent);
font-size: 14.59px; line-height: 14.59px; font-weight: 500;
padding: 12px 24px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* Final CTA keeps the accent pill on the light gradient banner. */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #fcfcfc; }
/* ============================================================
S02 SERVICES — 12 cards, FOUR columns (live 39d0dc0 measured at 1440:
grid-template-columns 333.75px x4; gap 30px; .uc_content #eff0f7;
.padding 30px; item radius 10px; title 18px/700/23.4px #14142b;
text 14px/23.1px; ul list-style disc, padding-left 20px).
Live's icon-box ships BOTH a title and a description, so this page renders
two lines: the H2 eyebrow (bcf7ff9 = 16.31px/700/25.2px, margin-bottom 10)
and the lead (49c4c98 = 34.7px/43px/400). Head block -> first card = 20px.
Each card ends in a VISIBLE interlink (.uc_more_btn = 14px/700/23.1px #000,
inline-flex, gap 14, margin-top 10) pinned to the card foot with margin-top
auto so the button row lines up across a ragged row of cards.
============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 20px; }
.zmit .zab-svc-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); margin: 0 0 10px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; }
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
/* Visible card fill is mandatory — a card with no fill is invisible against the
white section. #eff0f7 is live's own .uc_content colour. */
.zmit-services-grid .zmit-svc-card {
background: var(--zab-fill);
border: 0;
border-radius: 10px;
padding: 30px;
display: flex;
flex-direction: column;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; }
/* Live draws a native disc at padding-left 20px; the shared sheet draws its own
bullet with li::before at left:2px inside an 18px indent. Keep the SHARED
marker (list-style stays none) — re-enabling the native one on top of the
::before renders every bullet twice (CLAUDE.md 7). */
.zmit-services-grid .zmit-svc-card ul { margin: 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin-bottom: 0; }
.zmit-services-grid .zmit-svc-card li a { color: var(--zab-accent); }
/* Per-card interlink. Live paints the label #000 with no underline and hangs a
14x8 arrow 14px to its right; the arrow inherits currentColor. */
.zmit .zab-svc-cta {
margin-top: auto;
padding-top: 10px;
display: inline-flex;
align-items: center;
gap: 14px;
align-self: flex-start;
font-size: 14px;
font-weight: 700;
line-height: 23.1px;
color: #000;
text-decoration: none;
}
/* NO hover restyle. Live's only rule for this link is
`.uc_more_btn:hover { background-color:#45454500; color:#000000 }` — i.e. the
label stays #000 and nothing moves. An accent-on-hover was invented here and
removed; hover states are measured off live, never designed (CLAUDE.md 7). */
.zmit .zab-svc-cta svg { flex: 0 0 auto; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }
/* ============================================================
S05 BOOK A FREE CONSULTATION — live 93d485c / 29825: centred heading and
copy, then the HubSpot meetings well. Live's iframe well runs ~760px.
============================================================ */
/* Live e3efd8e is 996 tall: 60 top pad, h2 39, 10, copy 53, 40, embed 764,
30 bottom pad. */
.zmit .zmit-bookcal.z-section { padding: 60px 0 30px; }
.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: 764px; 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; }
/* Live 5d61244 on THIS page: 34px/300/44.2px, LEFT aligned, 44 tall. */
.zmit .zab-cmp-head h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); text-align: left; 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.
============================================================ */
/* Live 2698840 is 672 tall and that IS the grid (1938 -> 2610): no band padding. */
.zmit .zab-cmp.z-section { background: #fff; padding: 0; }
.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; }
/* Live ships ONE comparison widget and no mobile accordion: measured at 500px
its three columns simply STACK, each full width and 672 tall. Below Elementor's
767 mobile breakpoint the grid becomes one column and the cells reflow. */
@media (max-width: 767px) {
.zab-cmp-grid { grid-template-columns: 1fr; gap: 20px; }
.zmit .zab-cmp-cell { min-height: 0; padding: 16px 20px; }
.zmit .zab-cmp-col-head { padding: 16px 20px; }
}
/* ============================================================
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.
============================================================ */
/* Live c62cbe4 is 424 tall: 30 top pad, h2 56 at y4015, badge row 217 ending
4380, 29 bottom pad. The reference's 65/70 made the band 71px too tall. */
.zmit .zab-certified.z-section { background: #000; padding: 30px 0 29px; }
.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 c62cbe4 lays the six badges in a 6-up grid with a 16px gap and renders
each 227x230 source at 214x217 — computed aspect-ratio "auto 227 / 230", i.e.
the NATURAL ratio (live's object-fit:fill has nothing to stretch because the
box already matches). Width-relative so the house 1340 container 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. */
/* ============================================================
S08 APPROACH — NEW component, no equivalent in the reference (which carries
a 3-step card row this page does not have). Every number read off live
11af862 at 1440, and re-checked at 768 and 500:
band 1400 wide at x13, padding 70px 0 30px, transparent
two columns 700 each, 30px inner padding -> content 640 at x43 and x743
(still TWO columns at 768: 347 each). The house 1340
container gives the same 640 content columns at 1440.
heading 640 wide, 117 tall over 3 lines
copy two paragraphs, 341 tall, inline links underlined #046bd2
accordion 5 rows, EVERY ONE CLOSED at rest; each title bar 640 x 77
on #262338 with 25px padding, 7px between rows, white label
and a 16x18 plus/minus icon pinned right (x1342)
Native , so it works with JS off; the page's one-open-at-a-time
script matches live's e-n-accordion behaviour.
DARK ROWS => LIGHT COPY.
============================================================ */
.zmit .zab-approach.z-section { padding: 70px 0 30px; }
.zab-approach-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.zmit .zab-approach-copy h2 {
/* weight 400: owner "un-bold" (2026-10-15) = -wp's own 400 at every width */
font-size: 33.05px; font-weight: 400; line-height: 42.965px;
color: var(--zab-ink); margin: 0 0 20px;
}
.zmit .zab-approach-copy p {
font-size: 16px; font-weight: 400; line-height: 26.4px;
color: var(--zab-ink); margin: 0 0 20px;
}
.zmit .zab-approach-copy p:last-child { margin-bottom: 0; }
.zmit .zab-approach-copy a { color: #046bd2; text-decoration: underline; }
.zab-approach-list { display: flex; flex-direction: column; gap: 7px; }
.zab-approach-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; }
.zmit .zab-approach-q {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 25px; cursor: pointer; list-style: none;
font-size: 18px; font-weight: 500; line-height: 27px; color: #fcfcfc;
}
.zab-approach-q::-webkit-details-marker { display: none; }
.zab-approach-q:focus-visible { outline: 2px solid #76aaff; outline-offset: -2px; }
.zab-approach-sign { flex: 0 0 auto; display: flex; align-items: center; }
.zab-approach-sign svg { display: block; width: 16px; height: 16px; fill: #fcfcfc; }
.zab-approach-sign .is-open { display: none; }
.zab-approach-item[open] .zab-approach-sign .is-open { display: block; }
.zab-approach-item[open] .zab-approach-sign .is-closed { display: none; }
.zmit .zab-approach-a { padding: 0 25px 25px; }
.zmit .zab-approach-a p {
font-size: 16px; font-weight: 400; line-height: 26.4px; color: #e6eaf2; margin: 0;
}
@media (min-width: 681px) {
/* Live's two columns are exactly half the band each, inner content 640. */
.zab-approach-grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
}
@media (max-width: 1080px) and (min-width: 681px) {
/* Live keeps 347px columns at 768; inside the house 708px content box a
60px gap leaves only 316 and the copy gains three lines. 20px gets the
columns back to 344. */
.zab-approach-grid { gap: 20px; }
}
@media (max-width: 680px) {
.zmit .zab-approach.z-section { padding: 30px 0; }
.zmit .zab-approach-copy h2 { font-size: 24px; line-height: 32px; }
.zmit .zab-approach-q { padding: 18px; font-size: 16px; line-height: 24px; }
.zmit .zab-approach-a { padding: 0 18px 18px; }
}
/* ============================================================
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.
============================================================ */
/* Live f7111b9 is 493 tall: 72 top pad, the #141414 box 353, 68 bottom pad. */
.zmit .zmit-recognized.z-section { padding: 72px 0 68px; }
.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; }
/* Live f7111b9 renders the three WHITE review-platform PNGs 70px tall
(130 / 203 / 241 wide, measured at y6486); charlotte carries 50px SVGs. */
.zmit-recognized-logos img { height: 70px; 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; }
/* ============================================================
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; }
/* ============================================================
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 band leads with a SMALL EYEBROW, then the real heading.
Live 36b31b3 at 1440: "Why Our Clients Stay with Us" renders 16px/600/19.2px
in an only 19px tall, and "Proven Results for Vancouver Businesses"
renders 34px/400/44.2px in an 88px tall over two lines — so live's tags
are the wrong way round for the heading outline. CLAUDE.md §7 settles it:
the short line is a .zmit-stats-eyebrow span, the long one the . Pixels
are live's; only the tags differ.
DARK BAND => LIGHT COPY: both stay #fcfcfc. */
.zmit .zmit-stats-eyebrow {
display: block;
font-size: 16px;
font-weight: 600; line-height: 19.2px; color: #fcfcfc; margin: 0 0 20px;
}
.zmit .zmit-stats-copy h2 {
font-size: 34px;
font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 50px;
}
/* Live's stats CTA 215fc85 measures 381 x 42: #0161ff label on #f2f7ff,
16px/16px/500, 13px 35px padding, 8px radius — a size up from the shared
.zab-btn-light (14.59px, 12px 24px). */
.zmit .zmit-stats-copy .zab-btn-light { font-size: 16px; line-height: 16px; padding: 13px 35px; }
@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; }
/* 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 (measured again on THIS page: .num text-align center,
.counter-title start), so short labels look detached from their figure.
Deliberate deviation from live, applied on request — do not "fix" it back. */
.zmit-stat .big { 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.
============================================================ */
/* Live 7882efe is 487 tall: 10 top pad, h2 44 at y4998, 51 to the slide,
slide 352, 30 bottom pad. */
.zmit .zmit-testi.z-section { padding: 10px 0 30px; }
.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: 352px; /* live's slide measures 352 on this page */
}
.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 9 / 6 on this page, so its left
column is the taller one and sets the section height. Forcing the break
after item 9 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(9) { break-after: column; }
}
/* ============================================================
S13 FINAL CTA — live 2a110f5 / 8864. RE-MEASURED on THIS page at 1440,
not carried from the reference:
outer 1187a39 margin 150px 0 80px
banner 2dee0b2 x30 w1365 h568, radius 5px, and the gradient walked to
depth 5 before writing it (depths 0-4 are all transparent;
only 2dee0b2 paints):
linear-gradient(102.29deg,#ecf1eb 8.75%,#aec8fd 45.11%,
#84c3fc 81.46%)
copy 718d6c9 x30 w683 h568, padding 50px -> 50.04% of the banner
figure 4f2c262 x895 w500 h704, margin-top -136.5px -> 36.63%, gap 13.33%
heading 33a894d 33.05px/600/42.965px #14142b, 583 wide over 2 lines
copy 4658da0 17.16px/400/25.2px #14142b
button 192ffed #0161ff on #f2f7ff-white label, 15.38px/600, 5px radius,
15px 30px padding, 379 x 46
The figure is the OVERHANGING variant: it breaks 137px above the banner's
top edge and sits FLUSH with its bottom (image bottom 8546, banner bottom
8547). Because the banner is a two-column GRID here, the reference's
`position:absolute; right:56px; bottom:0` figure rule is explicitly reset to
static — leaving it absolute collapses the media cell to 0 and the picture
renders across the copy at full banner width.
============================================================ */
.zmit .zmit-final.z-section { margin: 0; padding: 150px 0 80px; }
.zmit-final-banner {
background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
border-radius: 5px;
/* Restated in full: the shared sheet sets 56px 60px, and a page rule that
only changes background/display silently inherits it. */
padding: 0;
min-height: 568px;
display: grid;
grid-template-columns: 50.04% 13.33% 36.63%;
align-items: center;
}
.zmit-final-copy { max-width: none; padding: 50px; }
.zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.965px; 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: 583px; margin: 0 0 26px; }
.zmit-final-media { grid-column: 3; align-self: end; }
.zmit-final-media img {
position: static; right: auto; bottom: auto;
display: block; width: 100%; height: auto; max-width: 500px;
margin-top: -136.5px; /* live's overhang above the banner's top edge */
}
/* Narrow widths, measured on live rather than carried — the reference stacks
this band at 1080 and it does NOT stack here:
768 banner 569 tall, still TWO columns (copy 315 at x30, figure 358 at
x365) and the figure is FLUSH with the band bottom, no overhang
500 STACKED (copy 445 x 419, then figure 355 x 500) and the figure keeps
a -53.39px lift over its own row
All the reference's scattered per-breakpoint .zmit-final-media rules were
deleted; this is the single place the figure is sized below 1081. */
@media (max-width: 1080px) and (min-width: 681px) {
.zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
.zmit-final-banner { min-height: 0; grid-template-columns: 43.57% 6.92% 49.51%; }
.zmit-final-copy { padding: 36px 32px; }
.zmit-final-media img { margin-top: 0; max-width: 358px; }
}
@media (max-width: 680px) {
.zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
.zmit-final-banner { min-height: 0; display: block; padding: 0; }
.zmit-final-copy { padding: 36px 32px 0; }
.zmit-final-media { display: flex; justify-content: center; }
.zmit-final-media img { margin-top: -53.39px; max-width: 355px; }
}
/* ============================================================
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; }
/* Live a8ff3b4 on THIS page puts an 8x12 chevron after each label (dark on the
filled button, light on the outlined one). The charlotte reference's two
buttons carry a bare label, so this is a per-page addition. */
.zmit-insights-btns a { display: inline-flex; align-items: center; gap: 10px; }
.zmit-insights-btns .zab-chev8 { display: inline-flex; align-items: center; }
.zmit-insights-btns .zab-chev8 svg { display: block; width: 8px; height: 12px; }
@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-cmp-head h2 { font-size: 27px; line-height: 1.25; }
.zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
.zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
.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. */
/* 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); }
/* 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-certified.z-section { padding: 124px 0; }
.zmit .zmit-recognized.z-section { padding: 30px 0; }
.zmit .zmit-stories.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-cmp-head h2,
.zmit .zab-certified h2 { font-size: 24px; line-height: 32px; }
.zmit-testi-lead { font-size: 18px; line-height: 26px; }
.zmit-testi-quote { font-size: 14px; line-height: 22px; }
.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-stats-grid { grid-template-columns: 1fr; gap: 24px; }
/* Full-bleed at one column, so the desktop 250px reads taller — matches live. */
.zmit-story-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-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 --- */
/* 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). */
/* 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: 764px; }
/* 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; }
/* Live's heading-to-slide gap is 51 (h2 bottom 5042 -> slide 5093). */
.zmit-testi h2 { margin-bottom: 51px; }
/* 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. */
}
@media (max-width: 1080px) and (min-width: 681px) {
/* 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 .zmit-stats-copy h2 { 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. */
/* 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 .zmit-stats-copy h2 { 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) {
/* S18 — live's consultant figure is 363x400 at 768, not 280 wide. */
/* 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; }
/* 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). */
/* 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. */
/* 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) { /* 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) { /* S11 1316 */
/* S09 838 */
.zmit-recognized-band { padding: 60px 26px; }
/* S10 546 */ /* S13 1036 */ /* S07 701 */ /* S03 1142 */
.zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 1093 */
/* S18 780 */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container { min-height: 714px; } /* S04 978 */
}
@media (max-width: 680px) { /* S11 1689 */
.zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 2050 */
.zmit-recognized-band { padding: 46px 26px; }
/* S10 828 */ /* S09 1410 */
.zmit .zmit-stats.z-section { padding: 40px 0; }
/* S15 677 */
.zmit .zmit-stories.z-section { padding: 8px 0; }
/* S12 1931 */ /* 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-certified.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 */
}
/* 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; }
/* 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). */
/* Certified badges: 3-up small instead of 2-up large */
.zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* 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; }
}
/* ---------------------------------------------------------------------------
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; }
/* Hover: live lifts the card AND turns the border blue. Read straight out of
live's page CSS in the raw HTML (not runtime-injected):
.hasLink:hover { transform: translate(-10px,-10px); border: 1px solid #0161ff }
An earlier reference comment claimed "no lift, no border change, measured
three times" - that reading probed .uc_content (the INNER node) instead of
the outer .uc_post_grid_style_one_item where .hasLink and the transform sit,
so it saw an identity matrix and an unchanged border. CLAUDE.md's hover table
agrees: city template lifts, industry template does not. */
.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,
.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);
}
/* ---------------------------------------------------------------------------
375 OVERFLOW GUARD. The shared sheet pins .zmit-recognized-cta .z-btn to
white-space:nowrap; this page's label ("Book Your IT Strategy Call") has a
~395px min-content width, which blows the band's 1fr track inside a 315px
band at 375. body{overflow-x:hidden} HIDES that from scrollWidth, so an
hScroll assertion passes while the band is visibly broken — the check has to
measure element widths instead.
--------------------------------------------------------------------------- */
@media (max-width: 680px) {
.zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
}
/* A 10px hover translate is exactly what this guard exists for; the
accessibility bar outranks copying live's omission. Scoped to the card
hover only - the hero scroll cue has its own guard higher up. */
@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,
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: none; }
}
/* Live's review-logo row is FLUSH (column-gap 0) and fits 574px of logos in a
613px track at 768. The inherited 36px column gap needs 646px in a 641px
track, so the row wraps and the band inflates ~106px. Measured on live. */
@media (max-width: 768px) {
.zmit .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; justify-content: center; }
}
/* 375: live keeps the review marks at FULL size and wraps them to three rows.
The inherited mobile caps (max-width:96px/max-height:26px) squashed them into
one 26px row; max-height overrides height, so both caps must be released.
Live's band is 335 wide at 375 vs our 315; NOT matched - CLAUDE.md forbids
zeroing a .z-container gutter, and width is where the house standard wins. */
@media (max-width: 680px) {
.zmit .zmit-recognized-logos img {
max-width: none; max-height: none; width: auto; height: 70px; object-fit: contain;
}
.zmit .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; justify-content: center; }
}
/* Services-card CTA arrow (owner 2026-10-13, with the "Explore ... Services"
labels - same fix as #1809 on the other city pages). The CTA was
inline-flex [label][arrow], so a label that wrapped to two lines left the
arrow stranded at the card's right edge. It is now plain text with the LAST
word + arrow in one nowrap span (PHP loop), so the arrow always sits 14px
after the final word. Position / reveal rules untouched. */
.zmit .zab-svc-cta { display: block; }
.zmit .zab-svc-cta .z-cta-nw { white-space: nowrap; }
.zmit .zab-svc-cta .z-cta-nw svg { display: inline-block; vertical-align: middle; margin-left: 14px; position: relative; top: -1px; }
/* Final CTA band, PHONE only (owner 2026-10-14): the consultant photo was lifted
-53.39px over its own row, so it covered the bottom of the "Talk to Our
Vancouver IT MSP Experts" button. It now starts 20px below the button.
Tablet / desktop rules above are untouched. */
@media (max-width: 680px) {
.zmit .zmit-final-media img { margin-top: 20px; }
}
/* ============================================================
Stats band "Why Our Clients Stay with Us" - -wp parity (owner 2026-10-14),
measured on managed-it-services-vancouver-wp at 320-1440.
- The eyebrow is an h2.zmit-stats-eyebrow, so `.zmit .zmit-stats-copy h2`
(0,2,1) out-ranked its own 16px rule and blew it up to 34 / 26 / 20px.
-wp: 16px / 600, line-height 19.2px (24px on phones), no tracking,
20px above the heading - at every width.
- Heading "Proven Results ...": -wp scales it with the viewport
(22.4px at 320 -> 26.9 at 767 -> 31.3 at 1023 -> 34 cap), 1.3 line-height,
no tracking. Gaps to the button are unchanged (they already match).
- Button label 14.592px below 1023px, as -wp (16px above).
Only this band's copy column is touched.
============================================================ */
.zmit .zmit-stats-copy h2.zmit-stats-eyebrow {
font-size: 16px; font-weight: 600; line-height: 19.2px; letter-spacing: normal;
margin: 0 0 20px;
}
.zmit .zmit-stats-copy h2:not(.zmit-stats-eyebrow) {
font-size: min(34px, calc(1.008vw + 20.98px)); line-height: 1.3; letter-spacing: normal;
}
@media (max-width: 1022.98px) {
.zmit .zmit-stats-copy h2:not(.zmit-stats-eyebrow) { font-size: calc(1.008vw + 19.13px); }
.zmit .zmit-stats-copy .zab-btn-light { font-size: 14.592px; line-height: 14.592px; padding: 14px 28px; }
}
@media (max-width: 767.98px) {
.zmit .zmit-stats-copy .zab-btn-light { padding: 12px 24px; }
}
@media (max-width: 767.98px) {
.zmit .zmit-stats-copy h2.zmit-stats-eyebrow { line-height: 24px; }
}
/* Process accordion (.zab-approach) answers sit on the dark #262338 cards: in-text links
take the site's dark-section link style (#85bcff, no underline - same as the FAQ and
the houston / los-angeles dark panels). Without it a link inherited the #e6eaf2 copy
colour and could not be told apart. Owner internal-links batch 2026-10-15. */
.zmit .zab-approach .zab-approach-a p a { color: #85bcff; text-decoration: none; }
/* ============================================================
S15 PRE-FOOTER BAND (.zmit-insights) - -wp parity, all widths
(owner 2026-10-15). Measured on managed-it-services-vancouver-wp at
375 / 768 / 1024 / 1080 / 1440 (same pattern as toronto #1823 and
san-diego #1825; the buttons' chevrons were already on this page):
- desktop: logo 238x53; the 2px divider runs beside it with the 28px
tagline top-aligned, 20px in.
- tablet: logo ~166 -> 200 wide (768 -> 1080), tagline 16 -> 22px on two
lines beside it, 14/19.6 copy under both (20/28 at 1025-1080); buttons
218 on the right. (Ours squeezed the tagline into one word per line,
band 462 tall.)
- phone: 60px band padding, logo 230 wide, 16px tagline under it, 14/19.6
copy, full-width buttons 40px below.
Scoped to .zmit-insights; nothing else is touched.
============================================================ */
@media (min-width: 1081px) {
.zmit .zmit-insights .zmit-insights-copy { grid-template-columns: 238px minmax(0, 1fr); column-gap: 20px; row-gap: 20px; align-items: stretch; }
.zmit .zmit-insights .zmit-insights-logo { width: 238px; height: 53px; align-self: center; }
.zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
align-self: stretch; margin: 0; padding-left: 20px;
font-size: 28px; line-height: 28px; max-width: none;
}
}
@media (min-width: 681px) and (max-width: 1080px) {
.zmit .zmit-insights.z-section { padding: 80px 0; }
.zmit .zmit-insights .zmit-insights-grid {
grid-template-columns: minmax(0, max(400px, 55%)) 218px;
justify-content: space-between; column-gap: 0; row-gap: 0; align-items: start;
}
.zmit .zmit-insights .zmit-insights-copy { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 20px; align-items: stretch; }
.zmit .zmit-insights .zmit-insights-logo {
grid-column: 1; grid-row: 1; align-self: start;
width: min(200px, calc(12.89vw + 67px)); height: auto; max-width: none;
}
.zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
grid-column: 2; grid-row: 1; align-self: stretch; margin: 0; max-width: none;
padding-left: clamp(10px, calc(3.9vw - 20px), 20px);
font-size: clamp(16px, 1.96vw, 22px); line-height: 1;
}
.zmit .zmit-insights .zmit-insights-copy p:not(.zmit-insights-title) {
grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none;
font-size: 14px; line-height: 19.6px;
}
.zmit .zmit-insights .zmit-insights-btns { gap: 20px; }
.zmit .zmit-insights .zmit-insights-btns a { width: 218px; padding: 16px 30px; }
}
@media (min-width: 1025px) and (max-width: 1080px) {
.zmit .zmit-insights .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 20px; line-height: 28px; }
}
@media (max-width: 680px) {
.zmit .zmit-insights.z-section { padding: 60px 0; }
.zmit .zmit-insights .zmit-insights-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 40px; }
.zmit .zmit-insights .zmit-insights-copy { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 20px; }
.zmit .zmit-insights .zmit-insights-logo { grid-column: 1; grid-row: 1; width: 230px; max-width: 100%; height: auto; }
.zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
grid-column: 1; grid-row: 2; margin: 0; padding-left: 10px; max-width: none;
font-size: 16px; line-height: 16px;
}
.zmit .zmit-insights .zmit-insights-copy p:not(.zmit-insights-title) {
grid-column: 1; grid-row: 3; margin: 0; max-width: none;
font-size: 14px; line-height: 19.6px;
}
.zmit .zmit-insights .zmit-insights-btns { gap: 20px; }
.zmit .zmit-insights .zmit-insights-btns a { width: 100%; padding: 16px 30px; }
}
/* ============================================================
FAQ COLUMN SPLIT (owner 2026-10-19), DESKTOP ONLY: even total -> equal
columns, odd total -> the LEFT column carries the extra.
15 FAQs -> 8 left / 7 right. Tablet and phone keep their own layout.
The first rule cancels any older nth-child break at desktop; the second
sets the one break.
============================================================ */
@media (min-width: 1081px) {
.zmit .zmit-faq-list > .zmit-faq-item.zmit-faq-item,
.zmit .zmit-faq-list > .zab-dacc-item.zab-dacc-item { break-after: auto; -webkit-column-break-after: auto; }
.zmit .zmit-faq-list > .zmit-faq-item.zmit-faq-item:nth-child(8),
.zmit .zmit-faq-list > .zab-dacc-item.zab-dacc-item:nth-child(8) { break-after: column; -webkit-column-break-after: always; }
}
/* ============================================================
CONSULTANT BANNER = /hire-data-ai-engineers (owner 2026-10-21), all widths.
Only this band; copy, links and button are unchanged.
- >=1081: photo 500 x 576, flush right + bottom, overhanging the top;
banner >= 440 tall, copy column 583 wide; 150 above / 79 below
- 681-1080: photo keeps the reference proportion (434 x 500 at 1024,
363 x 418 at 768; 363 wide, centred at 681-767). Space above/below is
left as it is (the site-wide rule + this page already match the reference)
- <=680: copy 20px in; photo spans the banner, 500 tall, 50px under the
button, on the banner bottom; 60/60 above/below
A photo with a different shape is cropped from the bottom, never the head
(object-position: top), and never stretched.
============================================================ */
@media (min-width: 1081px) {
.zmit .zmit-final.z-section { margin: 0; padding: 150px 0 79px; }
.zmit .zmit-final .zmit-final-banner { position: relative; min-height: 440px; }
.zmit .zmit-final .zmit-final-copy { max-width: 583px; }
.zmit .zmit-final .zmit-final-media { position: static; }
.zmit .zmit-final .zmit-final-media img {
position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 500px; height: 576px;
max-width: none; max-height: none; margin: 0; object-fit: cover; object-position: center top;
}
}
@media (min-width: 681px) and (max-width: 1080.98px) {
.zmit .zmit-final .zmit-final-media img { height: auto; aspect-ratio: 889 / 1024; object-fit: cover; object-position: center top; }
}
@media (min-width: 681px) and (max-width: 767.98px) {
.zmit .zmit-final .zmit-final-media img { width: 363px; max-width: 100%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 680.98px) {
.zmit .zmit-final.z-section { margin: 0; padding: 60px 0; }
.zmit .zmit-final .zmit-final-banner { display: block; padding: 0; min-height: 0; }
.zmit .zmit-final .zmit-final-copy { padding: 30px 20px; max-width: none; min-height: 0; height: auto; }
.zmit .zmit-final .zmit-final-media { width: 100%; margin: 20px 0 0; }
.zmit .zmit-final .zmit-final-media img {
display: block; position: static; width: 100%; height: 500px; max-width: none; max-height: none; margin: 0;
object-fit: cover; object-position: center top;
}
}
/* Vancouver keeps its side-by-side tablet grid, whose photo column is narrower
than the reference photo: reference size, pinned to the right. */
@media (min-width: 768px) and (max-width: 1080.98px) {
.zmit .zmit-final .zmit-final-media img { width: calc(28vw + 148px); max-width: none; margin: 0 0 0 calc(100% - (28vw + 148px)); }
}
@media (min-width: 681px) and (max-width: 767.98px) {
.zmit .zmit-final .zmit-final-media img { max-width: none; margin: 0 0 0 calc(100% - 363px); }
}
/* Vancouver tablet spacing: the site-wide 768-1080 banner padding does not reach
this page, so add it here (with the page's 40px margin = the reference's
160/120 at 881-1080 and 120/120 at 768-880). */
@media (min-width: 881px) and (max-width: 1080.98px) {
.zmit .zmit-final.z-section { padding: 120px 0 80px; }
}
@media (min-width: 768px) and (max-width: 880.98px) {
.zmit .zmit-final.z-section { padding: 80px 0; }
}
/* ============================================================
APPROACH SECTION ON TABLET (owner 2026-10-21) = the new design on
/it-managed-services/managed-it-services-in-toronto: from 681 to 1080 the copy
and the accordion were squeezed side by side; they now stack - copy first,
accordion below, 30px apart, both full width. Desktop (>=1081) and phones
(<=680, already stacked) unchanged. Layout only - no content or accordion behaviour change.
============================================================ */
@media (min-width: 681px) and (max-width: 1080.98px) {
.zmit .zab-approach .zab-approach-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
/* 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: 409 / 576; object-fit: contain; object-position: center bottom; margin-left: 0; margin-right: auto; } /* auto: this page centres the media as a flex row (line 649) */
}