/* ============================================================
   Automation and Emerging Technologies -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from the live sibling
   css/intelligent-process-automation-services.css (same WordPress template).
   Divergences, all read off the live page at 1440:
     - hero is a 600px banner with NO form, crumb, pill or trust strip
     - services + framework share one #f7f7fc band; services are 3-up photo
       cards with a lead line above the bullets
     - stats are three prefixed counters (60-80%, 3x, 30-50%)
     - FAQ splits 3 | 2 and the final CTA figure overhangs up into the FAQ band

   Split rule: a given property for a given selector lives in exactly one of
   the two sheets, so load order cannot change any outcome.
   ============================================================ */

/* ---- Hero: banner only (live 1440: band 600 tall, copy 690 wide) ---- */
.aet-hero { min-height: 600px; display: flex; align-items: flex-end; }
.aet-hero > .z-container { width: 100%; }
.aet-hero .aet-hero-copy { max-width: 800px; padding: 60px 0 95px; }
.aet-hero .zmit-hero-headline { margin: 0 0 22px; }
.aet-hero .zmit-hero-cta { margin: 0; }
.aet-hero .zmit-hero-cta-btn { min-height: 42px; padding: 0 35px; font-size: 16px; font-weight: 500; }
.aet-hero .zmit-hero-sub { max-width: 690px; margin: 0 0 22px; color: #fff; }
/* Owner 2026-10-16: hero converted to the shared two-column hero (hero-section.php),
   so its banner now lives on .zmit-hero::before (was .zmit-hero.aet-hero::before). The
   .aet-hero layout rules below are inert now (markup no longer carries .aet-hero). */
.zmit-hero::before {
    background: #01011f url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/18072351/Image-3-1.webp') center/cover no-repeat;
}

/* ---- In-page anchor sub-nav ---- */
.zmit-subnav { background: #fff; }
.zmit-subnav .z-container {
    display: flex; justify-content: space-between; align-items: stretch;
    gap: 10px; padding-top: 0; padding-bottom: 0; flex-wrap: wrap;
}
.zmit-subnav a {
    color: #14142b; font-size: 16px; font-weight: 400; text-decoration: none;
    line-height: 26px; white-space: nowrap; padding: 19px 18px;
    border-bottom: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zmit-subnav a:hover,
.zmit-subnav a.is-active { color: #046bd2; background: #eef1fb; border-bottom-color: #046bd2; }

/* ---- Contact band: centred copy column ---- */
.zmit-contact .zmit-contact-head { max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; }
.zmit-contact .zmit-contact-head p { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ---- Success-story cards: light card, 68px brand-logo row, excerpt ---- */
.zmit-story { background: #eff0f7; border-radius: 5px; overflow: hidden; --zs-inset: 0px; padding: 0; }
.zmit-stories-grid { gap: 30px; }
.zmit-story-img { border-radius: 5px 5px 0 0; }
.zmit-story .body { padding: 20px 25px 47px; }
.zmit-story .body .zmit-story-logos { min-height: 68px; margin: 0 0 20px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 68px; width: auto; max-width: 240px;
    object-fit: contain; object-position: left center;
}
.zmit-story .body h3 { margin: 0 0 20px; }
.zmit-story .body p { padding: 0 5px; }

/* ---- Testimonial card gradient ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
}
.zmit-testi-quote strong { font-weight: 700; }

/* ============================================================
   MEASURED SECTION GEOMETRY (1440)
   ============================================================ */
.aet-svc-band { background: #f7f7fc; }
.zmit .aet-svc-band .zmit-services,
.zmit .aet-svc-band .zmit-approach { background: transparent; }
.zmit .zmit-intro.z-section      { padding: 80px 0 40px; }  /* owner 2026-10-15: tighten intro->services gap (was 80 bottom + 80 top = 160) */
.zmit .zmit-services.z-section   { padding: 40px 0 21px; }  /* top 80->40; gap now ~80px */
/* Owner 2026-10-15: the dark "Trusted by Global Enterprises" recognized band was
   straddling the ash #eff0f7 why band below it (ash started 144px up, over the band)
   AND had an oversized ~186px gap above. Now: band sits fully on white, 70px gap
   above (approach bottom 331->215, keeps the -145 pull-up), 24px neutral gap below
   (margin-bottom -144->24, no overlap), why top padding 300->60 so the heading is a
   tidy ~84px under the band. Desktop only (<=1080 overrides these; no overlap there). */
.zmit .zmit-approach.z-section   { padding: 80px 0 215px; }
.zmit .zmit-recognized.z-section { margin: -145px 0 24px; padding: 0; position: relative; z-index: 2; background: transparent; }
.zmit .zmit-why.z-section        { padding: 60px 0 100px; }
.zmit .zmit-stories.z-section    { padding: 30px 0; }
.zmit .zmit-stats.z-section      { padding: 85px 0; }
.zmit .zmit-testi.z-section      { padding: 60px 0 61px; }
.zmit .zmit-faq.z-section        { padding: 80px 0; }
.zmit .zmit-final.z-section      { margin: 208px 0 80px; padding: 0; }  /* 158 figure overhang + 50 clear of the FAQ band */
.zmit .zmit-contact.z-section    { padding: 50px 0; }
.zmit .zmit-insights.z-section   { padding: 80px 0 112px; }

/* ---- Services: 3-up photo cards (live: 440 wide, photo 170, 30px gutters) ---- */
.zmit-services-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: #eff0f7;
    border: 0;
    border-radius: 5px;
    padding: 0 0 19px;
    overflow: hidden;
}
.zmit-svc-media img { height: 170px; }
.zmit-services-grid .zmit-svc-card h4 { font-size: 18px; font-weight: 700; line-height: 25.2px; margin: 20px 25px; padding: 0; }
.zmit-services-grid .zmit-svc-card .aet-svc-desc { font-size: 13px; line-height: 19.5px; color: #14142b; margin: 0 25px 20px; }
.zmit-services-grid .zmit-svc-card ul { margin: 0 25px; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 13px; line-height: 19.5px; margin: 0 0 10px; padding: 0 0 0 16px; }
.zmit-services-grid .zmit-svc-card li:last-child { margin-bottom: 0; }

/* ---- Content-height tuning ---- */
.zmit-story-img img { height: 250px; }
.zmit-testi-card { min-height: 352px; }
.zmit-why-card { padding-bottom: 40px; }
.zmit-recognized-band { padding: 40px; border-radius: 10px; background: #161616; }
.zmit-recognized-copy h2 { margin: 0 0 21px; }
.zmit-recognized-copy p { max-width: none; margin: 0 0 23px; }
.zmit-recognized-cta .z-btn { min-height: 56px; }
.zmit-recognized-logos img { height: 70px; width: auto; }

/* ---- Stats: 3 prefixed counters, no copy line ---- */
.zmit-stats { background: #262338; }
.zmit-stats-layout { grid-template-columns: 690px minmax(0, 1fr); gap: 50px; align-items: start; }
.zmit-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 10px; }
/* live renders 57px and its first two figures collide (60-80%3x); 46px keeps
   every figure inside its column. Deliberate deviation. */
.zmit-stat .big { font-size: 46px; font-weight: 600; line-height: 57px; margin-bottom: 18px; white-space: nowrap; }
.zmit-stat p { font-size: 14px; line-height: 21px; }
.zmit-stat .big .pre { font: inherit; color: inherit; }
.zmit-stats-copy { max-width: none; }
.zmit .zmit-stats-copy h2 { margin: 0 0 30px; }

/* ---- Final CTA banner: figure overhangs the top edge ---- */
.zmit-final-banner {
    min-height: 342px;
    padding: 50px;
    display: flex;
    align-items: center;
}
.zmit-final-copy { max-width: 52%; }
.zmit-final-copy h2 { margin-bottom: 14px; }
.zmit-final-copy p { margin-bottom: 22px; max-width: 560px; }
/* OWNER 2026-09-28: live floats this 528x582 figure, cutting into the FAQ band. House
   pattern: the figure stands on the box bottom (0 below) with its overhang in the
   section's top margin, clear of the FAQ band.
   OWNER 2026-10-15: the 528x582 natural size read "too large" vs the other pages -> size
   the figure to the family-standard 500px tall (width auto keeps the aspect -> 454 wide).
   Overhang is now 158 (500 - 342 box), so the section top margin drops to 208 (158+50). */
.zmit-final-media img { height: 500px; width: auto; right: 142px; bottom: 0; }
/* live's own gradient + radius (ours ended in a saturated #2f7bff) */
.zmit .zmit-final-banner { background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); border-radius: 5px; }

/* ---- Buttons: live body CTAs are 16px / 500, 46px tall ---- */
.zmit .z-btn { font-size: 16px; font-weight: 500; line-height: 16px; padding: 15px 30px; }

/* ---- Overview (live: copy 665 | image 595 x 400, radius 10) ---- */
.zmit-intro-copy h2 { line-height: 44.2px; margin-bottom: 42px; }
.zmit-intro-copy p { font-size: 16px; line-height: 26.4px; margin: 0 0 26px; }
.zmit-intro-cta { margin-top: 43px; }
.zmit-intro-media img { height: 400px; object-fit: cover; }

/* ---- Services head: bold 16px eyebrow over a 34px lead ---- */
.zmit-services-head { margin-bottom: 20px; }
.zmit-services-head .z-eyebrow { font-size: 16px; font-weight: 600; line-height: 26.4px; color: #14142b; margin: 0 0 8px; }
.zmit-services-head h3 { line-height: 56.1px; }

/* ---- Framework: 34px heading, 14px copy, dark accordion (+ / minus) ---- */
.zmit .aet-svc-band .zmit-approach-copy h2 { font-size: 34px; line-height: 44.2px; color: #14142b; margin-bottom: 20px; }
.zmit .aet-svc-band .zmit-approach-copy p { font-size: 14px; line-height: 21px; }
.aet-svc-band .zmit-approach-acc { gap: 7px; }
.aet-svc-band .zmit-acc-item { border-radius: 0; background: #262338; }
.aet-svc-band .zmit-acc-q, .aet-svc-band .zmit-acc-a { background: #262338; }
.aet-svc-band .zmit-acc-q { padding: 24px 25px 25px; font-size: 18px; line-height: 27px; font-weight: 400; color: #fff; }
.aet-svc-band .zmit-acc-q .sign { font-size: 0; transform: none; }
.aet-svc-band .zmit-acc-q .sign::before { content: '+'; font-size: 28px; font-weight: 600; line-height: 27px; color: #0161ff; }
.aet-svc-band .zmit-acc-item.open .zmit-acc-q .sign { transform: none; }
.aet-svc-band .zmit-acc-item.open .zmit-acc-q .sign::before { content: '\2212'; }
.aet-svc-band .zmit-acc-a-inner { padding: 52px 25px 45px 20px; }
.aet-svc-band .zmit-acc-a-inner p { margin: 0; font-size: 16px; line-height: 25.6px; color: #fff; }

/* ---- Industry standards: copy 665 | 2x2 cards (20px pad, 20px gutter) ---- */
.zmit-why-head h2 { font-size: 34px; line-height: 44.2px; }
.zmit-why-head p { margin: 20px 0 0; }
.zmit-why-grid { gap: 20px; }
.zmit-why-card { padding: 20px; }
.zmit-why-ic { margin: 0 0 14px; }
.zmit-why-ic svg { width: 51px; height: 51px; display: block; }
.zmit-why-card h3 { font-size: 20px; line-height: 24px; margin-bottom: 12px; }
.zmit-why-card p { color: rgba(20, 20, 20, .7); }

/* ---- Testimonials: 34px/300 heading, card fills the row, arrows at the edges ---- */
.zmit-testi h2 { font-size: 34px; line-height: 44.2px; margin-bottom: 50px; }
.zmit-testi-carousel { position: relative; display: block; }
.zmit-testi-card { padding: 80px; border-radius: 5px; }
.zmit-testi-role { font-size: 22px; font-weight: 600; line-height: 28.6px; }
.zmit-testi-lead { line-height: 47.6px; margin-bottom: 12px; }
.zmit-testi-rule { margin: 6px 0 10px; }
.zmit-testi-nav { position: absolute; top: 50%; margin-top: -18px; z-index: 2; border-radius: 3px; }
.zmit-testi-nav.prev { left: -45px; }
.zmit-testi-nav.next { right: -45px; }

/* ---- FAQ: 18px/400 questions, 16px answers, live's 3 | 2 split ---- */
.zmit-faq h2 { margin-bottom: 30px; }
.zmit-faq-list { column-gap: 30px; }
.zmit-faq-item { margin-bottom: 8px; border-radius: 0; }
.zmit-faq-q { padding: 25px 25px 24px; font-size: 18px; line-height: 27px; font-weight: 400; }
.zmit-faq-q span:first-child { font-weight: 400; }
.zmit-faq-a-inner { padding: 0 25px 44px 20px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 25px 44px 20px; }
.zmit-faq-a-inner p { margin: 0; font-size: 16px; line-height: 25.6px; color: #fff; }

/* ---- Contact: live background art + a 966px form card ---- */
.zmit-contact { background: #3b8cff url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat; }
.zmit-contact-head { margin-bottom: 20px; }
.zmit-contact-head h2 { font-size: 34px; line-height: 44.2px; margin-bottom: 20px; }
.zmit-contact-form { max-width: 966px; padding: 30px; border-radius: 8px; }

/* ---- Insights: 28px title, 20px copy ---- */
.zmit-insights-copy p.zmit-insights-title { font-size: 28px; line-height: 28px; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-size: 20px; line-height: 28px; max-width: 770px; color: #fff; }

@media (min-width: 681px) {
    /* live splits 3 | 2; only meaningful while the list has two columns */
    .zmit-faq-item:nth-child(3) { break-after: column; -webkit-column-break-after: always; }
}
@media (min-width: 1081px) {
    .zmit-intro-grid { grid-template-columns: minmax(0, 665px) 595px; justify-content: space-between; gap: 40px; }
    .zmit-why .z-container { grid-template-columns: minmax(0, 665px) minmax(0, 666px); justify-content: space-between; gap: 0; }
}

/* ---- Tablet / phone ---- */
@media (max-width: 1080px) {
    .zmit-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-grid { padding-top: 0; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 26px; }
    .aet-hero { min-height: 0; }
    .aet-hero .zmit-hero-headline { font-size: 38px; line-height: 1.22; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
    .zmit .zmit-why.z-section      { padding: 60px 0; }
    .zmit .zmit-approach.z-section { padding: 50px 0 60px; }
    .zmit .zmit-services.z-section { padding: 60px 0 0; }
    .zmit-why-grid { gap: 24px; }
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-copy { max-width: none; }
    .zmit-why .z-container { grid-template-columns: 1fr; gap: 32px; }
    .zmit .zmit-recognized.z-section { margin: 0; padding: 32px 0; }
    .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: auto; height: 280px; margin: 16px auto 0; }
    .zmit-subnav .z-container { justify-content: center; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-why-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}
@media (max-width: 680px) {
    .aet-hero .zmit-hero-headline { font-size: 30px; line-height: 1.25; }
    .aet-hero .aet-hero-copy { padding: 44px 0; }
    .zmit-subnav { display: none; }
    .zmit .zmit-intro.z-section      { padding: 24px 0; }
    .zmit .zmit-services.z-section   { padding: 44px 0 0; }
    .zmit .zmit-approach.z-section   { padding: 40px 0; }
    .zmit .zmit-recognized.z-section { padding: 28px 0; }
    .zmit .zmit-why.z-section        { padding: 44px 0; }
    .zmit .zmit-stories.z-section    { padding: 24px 0; }
    .zmit .zmit-stats.z-section      { padding: 48px 0; }
    .zmit .zmit-testi.z-section      { padding: 44px 0; }
    .zmit .zmit-faq.z-section        { padding: 44px 0; }
    .zmit .zmit-final.z-section      { margin: 32px 0; }
    .zmit .zmit-contact.z-section    { padding: 40px 0; }
    .zmit .zmit-insights.z-section   { padding: 48px 0; }
    .zmit-recognized-band { padding: 26px 22px; }
    .zmit-recognized-logos { gap: 20px; }
    .zmit-recognized-logos img { height: 44px; }
    .zmit-final-banner    { padding: 30px 22px 0; }
    .zmit-final-media img { height: 210px; }
    .zmit-story-img img   { height: 200px; }
    .zmit-stat .big { font-size: 40px; line-height: 46px; }
    .zmit-services-grid, .zmit-stats-grid { grid-template-columns: 1fr; }
    .zmit-services-head h3 { font-size: 26px; line-height: 34px; }
    .zmit-intro-copy h2, .zmit .aet-svc-band .zmit-approach-copy h2, .zmit-why-head h2,
    .zmit-testi h2, .zmit-faq h2, .zmit-contact-head h2 { font-size: 27px; line-height: 35px; }
    .zmit-intro-copy h2 { margin-bottom: 24px; }
    .zmit-intro-cta { margin-top: 30px; }
    .zmit-intro-media img { height: auto; aspect-ratio: 595 / 400; }
    .zmit-testi-card { padding: 40px 28px; }
    .zmit-testi-lead { font-size: 26px; line-height: 34px; }
    .zmit-contact-form { padding: 24px 18px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 22px; line-height: 28px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 16px; line-height: 24px; }
    .aet-svc-band .zmit-acc-a-inner { padding: 12px 25px 28px 20px; }
    .aet-svc-band .zmit-acc-q, .zmit-faq-q { font-size: 16px; line-height: 24px; }
    .zmit-faq-a-inner, .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 28px 20px; }
    .zmit-testi-nav.prev { left: -12px; }
    .zmit-testi-nav.next { right: -12px; }
}

/* stats-57 (2026-10-08): on tablet the metric numbers are 57px on a 57px line,
   the same size as enterprise-software-development-company. Size only; the
   suffix/prefix spans are listed too because some pages size them separately.
   Starts at 768, not 681: the range figures (60-80%, 30-50%) overflow three
   columns at 57px below ~740px, so 681-767 keeps the 46px. */
@media (max-width: 1080px) and (min-width: 768px) {
    .zmit .zmit-stats .zmit-stat .big,
    .zmit .zmit-stats .zmit-stat .big > span { font-size: 57px; line-height: 57px; }
    /* Owner 2026-10-15: the shared two-column tablet final-CTA (zazz-footer.php
       #zz-consultant-banner-tablet-fix) sizes the figure to a 500px media column,
       so this page's tall 528x582 image balloons to ~470x518 (too large). Cap the
       media column to 380 -> figure ~340-371 wide, aspect kept (no crop), ~14%
       smaller, matching the desktop reduction. !important beats the footer-injected
       rule, which loads after this sheet. */
    .zmit .zmit-final .zmit-final-banner .zmit-final-media { flex-basis: 380px !important; }
}

/* Consultant (final) band on PHONES = the reference layout (managed-it-services-portland,
   vanta-support-services, tier-2-it-support at 390; owner 2026-10-22): 30px / 20px inside the
   card, copy 14/25.2, a 13px full-width button, then the photo across the FULL card width at
   its OWN proportions (never cropped - owner 2026-10-22), 8px under the button and flush with the card's
   bottom edge. Phones only - tablet and desktop unchanged. */
@media (max-width: 680.98px) {
    body .zmit section.zmit-final .zmit-final-banner { min-height: 0; padding: 30px 20px 0; row-gap: 0; }
    body .zmit section.zmit-final .zmit-final-copy { max-width: 100%; margin-bottom: 0; padding-bottom: 0; }
    body .zmit section.zmit-final .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; }
    body .zmit section.zmit-final .zmit-final-copy a.zab-btn { font-size: 13px; width: 100%; justify-content: center; }
    body .zmit section.zmit-final .zmit-final-media { margin: 0; padding: 0; }
    body .zmit section.zmit-final .zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: auto; max-height: none; aspect-ratio: 528 / 582; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; }
}

/* pre-footer tablet: -wp reference (pftab-1022) — compact 16px title beside the logo at tablet,
   matching ai-outsourcing-services-wp (owner 2026-10-22). */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; }
    .zmit .zmit-insights-logo { height: 35px; width: auto; }
}

/* pre-footer mobile: -wp reference (pfmob-1022) — compact 16px title + 14px copy at phone,
   matching ai-outsourcing-services-wp (owner 2026-10-22). */
@media (max-width: 680px) {
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14px; line-height: 22px; }
}

/* pre-footer tablet grid: 2-col like -wp (pfgrid-1023) — the azure-derived
   @media(max-width:1080){grid:1fr} collapses the band to one column at tablet;
   -wp keeps copy | buttons side-by-side. Re-assert 2-col; .zmit prefix (0,2,0)
   beats the (0,1,0) stack rule. Phone (<=680) stays stacked. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-insights-grid { grid-template-columns: 1fr auto; gap: 44px; }
}