/* ============================================================
   Enterprise Application Development Services — page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from the
   ux-design-services sheet (same WordPress template) and re-measured
   against THIS page's live render at 1440 (2026-09-28). Carries only the
   hero banner, the text-only hero, and this page's band geometry.

   Live content box is 1380 at x30; ours stays the house 1340 at x43
   (CLAUDE.md "Never widen the content box").
   ============================================================ */

/* ---- Text-only hero: no form card, no trust strip (live has neither) ----
   Live at 1440: banner 600 tall (y100..700), copy vertically centred,
   H1 54/64.8/600 at 800 wide (3 lines), sub 16/26.4 at 552 wide. */
.zmit-hero::before {
    background:
        linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%),
        url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18072633/Image-1-2.webp') center/cover no-repeat;
}
.zmit-hero--text .z-container { display: flex; align-items: center; min-height: 600px; }
.zmit-hero--text .zmit-hero-left { padding: 40px 0; max-width: 820px; }
.zmit-hero--text .zmit-hero-headline { margin: 0 0 20px; }
.zmit-hero--text .zmit-hero-sub { max-width: 552px; margin: 0 0 20px; }
.zmit-hero--text .zmit-hero-cta { margin: 0; }

/* ---- In-page anchor sub-nav (live: 66 tall, white, evenly spaced) ---- */
.zmit-subnav { background: #fff; border-bottom: 1px solid #eef0f7; }
.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: 1.2; white-space: nowrap; padding: 22px 18px 21px;
    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; }

/* ---- Intro: copy left, 665x400 photo right, equal columns 50 apart ---- */
.zmit-intro-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
.zmit-intro-copy h2 { margin-bottom: 40px; }
.zmit-intro-copy p { font-size: 16px; line-height: 26.4px; margin: 0 0 26px; }
.zmit-intro-media img { height: 400px; object-fit: cover; }

/* ---- Services: 4 static image cards (live has exactly 4 and no arrows) ---- */
.zmit-svc-media img { height: 170px; }

/* ---- Contact band: centred copy (matches live) ---- */
.zmit-contact .zmit-contact-head { max-width: 1260px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Success-story cards: light card + 50px brand-logo row ---- */
.zmit-story { background: #eff0f7; border-radius: 5px; overflow: hidden; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 20px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 260px;
    object-fit: contain; object-position: left center;
}
.zmit-story-img img { height: 250px; }

/* ---- Testimonials: quote is two paragraphs, lead sentence bold (live) ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
}
.zmit-testi-quote p { margin: 0 0 32px; font-size: 18px; line-height: 29.7px; }
.zmit-testi-quote p:last-child { margin-bottom: 0; }
.zmit-testi-quote strong { font-weight: 700; }

/* ---- FAQ: live's own 7 / 8 column split ---- */
@media (min-width: 681px) {
    .zmit-faq-item.zmit-faq-colend { break-after: column; -webkit-column-break-after: always; }
}

/* ---- Stats: 3 counters -> 3 columns (shared default); number left-aligned
   with its label - OWNER DEVIATION from live, which centres the number. ---- */
.zmit-stat .big { text-align: left; }

/* ============================================================
   MEASURED SECTION GEOMETRY (live, 1440)
   The recognized box overlaps BOTH neighbours on live: it starts 145px
   above the services band's bottom and the trust band starts 144px above
   its own bottom, so it is pulled up/down with negative margins.
   ============================================================ */
@media (min-width: 1081px) {
    .zmit .zmit-intro.z-section      { padding: 80px 0; }
    .zmit .zmit-services.z-section   { padding: 80px 0 225px; }
    .zmit .zmit-recognized.z-section { margin: -145px 0 -144px; padding: 0; position: relative; z-index: 2; }
    .zmit .zmit-why.z-section        { padding: 300px 0 120px; }
    .zmit .zmit-stories.z-section    { padding: 30px 0; }
    .zmit .zmit-stats.z-section      { padding: 80px 0; }
    .zmit .zmit-testi.z-section      { padding: 80px 0; }
    .zmit .zmit-faq.z-section        { padding: 80px 0; }
    .zmit .zmit-final.z-section      { margin: 150px 0 80px; padding: 0; }
    .zmit .zmit-contact.z-section    { padding: 50px 0; }

    .zmit-recognized-band { padding: 40px; }

    /* Final CTA: gradient box 428 tall, copy 572 wide at 50px inset, figure
       688x548 bottom-anchored so it overhangs the box top by 121px. */
    .zmit-final-banner { min-height: 428px; padding: 50px; display: flex; align-items: center; }
    .zmit-final-copy { max-width: 572px; }
    .zmit-final-copy h2 { margin-bottom: 26px; }
    .zmit-final-copy p { margin-bottom: 30px; max-width: none; font-size: 18px; line-height: 29.7px; }
    .zmit-final-media img { height: 548px; right: 0; bottom: 0; }
}

/* ============================================================
   COMPONENT GEOMETRY MEASURED ON LIVE (1440)
   ============================================================ */
/* Services: bold 18px eyebrow over the 34px line; title 18/25.2/700 (live). */
.zmit-services-head .z-eyebrow { color: #14142b; font-size: 18px; font-weight: 700; line-height: 23.4px; margin-bottom: 10px; }
.zmit-svc-card h4 { font-size: 18px; line-height: 25.2px; font-weight: 700; }

/* Hero CTA: live is 16/500, 42 tall. */
.zmit-hero .zmit-hero-cta-btn { font-size: 16px; font-weight: 500; min-height: 42px; padding: 10px 34px; }

/* Recognized: one-line subtitle, logos butting (live widths 130/203/241 at 70 tall). */
.zmit-recognized-copy h2 { margin-bottom: 20px; }
.zmit-recognized-copy p { max-width: none; margin-bottom: 49px; }
.zmit-recognized-logos { gap: 0; }

/* Trust band cards: icon 51, h3 20/24/700, muted body (live). */
.zmit-why-ic { width: 51px; margin: 0 0 17px; }
.zmit-why-ic svg { width: 51px; height: 51px; }
.zmit-why-card h3 { font-size: 20px; line-height: 24px; color: #141414; margin-bottom: 12px; }
.zmit-why-card p { color: rgba(20,20,20,.7); }
.zmit-why-card { padding-bottom: 0; }

/* Story cards: image full-bleed at the card top, 25px body inset (live). */
.zmit-story { padding: 0; border-radius: 5px; }
.zmit-story-img { border-radius: 5px 5px 0 0; }
.zmit-story .body { padding: 20px 25px 30px; }
.zmit-story h3 { font-size: 18px; line-height: 25.2px; margin-bottom: 20px; }
.zmit-story p { font-size: 14px; line-height: 23px; }

/* Stats typography: counters 57/57/600, labels 16/24 white, 16px eyebrow. */
.zmit-stat .big { font-size: 57px; line-height: 57px; font-weight: 600; margin-bottom: 30px; }
.zmit-stat p { font-size: 16px; line-height: 24px; color: #fff; }
.zmit-stats-eyebrow { font-size: 16px; font-weight: 600; margin-bottom: 20px; }

/* Testimonial role 22/28.6/600; card radius 5. */
.zmit .zmit-testi-role { font-size: 22px; line-height: 28.6px; font-weight: 600; }
.zmit-testi-card { border-radius: 5px; }

/* FAQ: 25px summary padding, 18/27/400 questions, 7px item gap, radius 5. */
.zmit-faq-item { border-radius: 5px; margin-bottom: 7px; }
.zmit-faq-q { padding: 25px; font-size: 18px; line-height: 27px; font-weight: 400; gap: 8px; }
.zmit-testi h2 { font-size: 34px; line-height: 44.2px; font-weight: 300; margin-bottom: 51px; }
.zmit-why { background: #eff0f7; }
.zmit-recognized { background: transparent; }
.zmit-faq-a-inner { padding: 0 20px 48px; font-size: 16px; line-height: 25.6px; color: #d9dbe9; }

@media (min-width: 1081px) {
    /* Hero copy sits 80px below centre on live (h1 top 162px into the banner). */
    .zmit-hero--text .zmit-hero-left { padding: 80px 0 0; }
    .zmit-recognized-logos img { height: 70px; }
    /* Trust band: 2x2 cards 283 wide, 60 apart, 25px in from the column edge. */
    .zmit-why-grid { grid-template-columns: repeat(2, 283px); gap: 58px 60px; justify-content: start; margin: 17px 0 0 25px; }
    /* Stats: copy column 443, counters in three 45px-gapped columns. */
    .zmit-stats-layout { grid-template-columns: 443px 1fr; gap: 50px; align-items: start; }
    .zmit-stats-grid { gap: 45px; }
    /* Testimonial card spans the container, 80 padding, 505 tall; arrows sit
       over the gutters like live's viewport-edge arrows. */
    .zmit-testi-carousel { position: relative; display: block; }
    .zmit-testi-card { padding: 80px; min-height: 505px; align-items: flex-start; }
    .zmit-testi-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
    .zmit-testi-nav.prev { left: -40px; }
    .zmit-testi-nav.next { right: -40px; }
    /* Insights band: live's logo 267x60, title 28/28, line 20/28 at 770,
       buttons 280x58 16/500, band 80 top / 115 bottom. */
    .zmit .zmit-insights.z-section { padding: 80px 0 115px; }
    .zmit-insights-logo { height: 60px; }
    .zmit-insights-copy { row-gap: 20px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 28px; line-height: 28px; max-width: 461px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 770px; font-size: 20px; line-height: 28px; color: #fff; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 280px; min-height: 58px; font-size: 16px; font-weight: 500; border-radius: 5px; }
}

/* ---- Tablet (681-1080) ---- */
@media (max-width: 1080px) {
    .zmit-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 26px; }
    .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; height: 280px; margin: 16px auto 0; }
    .zmit-hero--text .z-container { min-height: 0; }
    .zmit-hero--text .zmit-hero-left { padding: 60px 0; }
    .zmit-subnav .z-container { justify-content: center; }
}
/* Live stacks the four service cards below desktop (no carousel). */
@media (max-width: 1080px) {
    .zmit-svc-track { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
}
@media (max-width: 680px) {
    .zmit-svc-track { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-why-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}

/* ---- Phone (<=680) ---- */
@media (max-width: 680px) {
    .zmit .zmit-intro.z-section      { padding: 40px 0; }
    .zmit .zmit-services.z-section   { padding: 44px 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-hero--text .zmit-hero-left { padding: 48px 0; }
    .zmit-intro-media img { height: auto; aspect-ratio: 665 / 400; }
    .zmit-recognized-band { padding: 26px 22px; }
    /* The nowrap CTA label (wider than a 271px column) otherwise sets the
       grid track's min-content width and pushes the copy out of the box. */
    .zmit-recognized-band { grid-template-columns: minmax(0, 1fr); }
    .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
    .zmit-recognized-logos { gap: 16px; }
    .zmit-recognized-logos img { height: 36px; }
    .zmit-final-banner { padding: 30px 22px 0; }
    .zmit-final-media img { height: 240px; }
    .zmit-story-img img { height: 200px; }
    .zmit-subnav a { padding: 14px 10px; font-size: 14px; }
    .zmit-story .body .zmit-story-logo { max-width: 200px; }
    .zmit-faq-q { padding: 18px 20px; font-size: 16px; line-height: 24px; }
    .zmit-faq-a-inner { padding: 0 20px 24px; font-size: 15px; }
    .zmit-stat .big { font-size: 44px; line-height: 48px; margin-bottom: 12px; }
    .zmit-testi-card { padding: 32px 24px; }
}
