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

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/ux-design-services.css (same WordPress template), then re-measured
   band by band against the live page at 1440 (2026-09-28). Every number in
   the desktop block is live's own geometry unless a comment says otherwise.
   Width stays on the 1340 house container (CLAUDE.md: never widen it), so
   live's 1380-wide rows are reproduced at 1340 here.
   ============================================================ */

/* ---- In-page anchor sub-nav (below hero/trust band; live has one) ---- */
.zmit-subnav { background: #fff; border-bottom: 1px solid #eef0f7; }
.zmit-subnav .z-container {
    display: flex; justify-content: space-evenly; align-items: stretch;
    gap: 10px; padding-top: 0; padding-bottom: 0; flex-wrap: wrap;
}
.zmit-subnav a {
    color: #14142b; font-size: 16px; font-weight: 500; text-decoration: none;
    line-height: 1.2; white-space: nowrap; padding: 20px 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: copy sits in a centred, narrow column (matches live) ---- */
.zmit-contact .zmit-contact-head { max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Success-story loop-grid cards: live 440x553, #eff0f7 fill, radius 5,
   full-bleed 250px photo, 50px brand-logo row, body inset 25px ---- */
.zmit-story { background: #eff0f7; border-radius: 5px; overflow: hidden; --zs-inset: 0px; padding: 0 0 20px; }
.zmit-story:hover { box-shadow: none; transform: none; }
.zmit-story-img { border-radius: 5px 5px 0 0; }
.zmit-story-img img { height: 250px; }
.zmit-story .body { padding: 20px 25px 0; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 22px; 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 p { padding: 0 5px; }

/* ---- Testimonial card: live's 102.29deg gradient, 80px inset, radius 5 ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px; padding: 80px; min-height: 382px;
}
.zmit-testi-role { font-size: 22.5px; font-weight: 500; line-height: 33.6px; }

/* ---- Hero banner: this page's artwork + its gradient wash ---- */
.zmit-hero::before {
    background:
        linear-gradient(100deg, rgba(8,11,18,.88) 0%, rgba(8,11,18,.55) 55%, rgba(8,11,18,.25) 100%),
        url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/12065224/Modern-Applications.-Engineered-for-Scale-Security-and-Business-Continuity.webp') center/cover no-repeat;
}
@media (min-width: 768px) {
    .zmit-hero::before {
        background:
            linear-gradient(100deg, rgba(8,11,18,.88) 0%, rgba(8,11,18,.55) 55%, rgba(8,11,18,.25) 100%),
            url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/12065224/Modern-Applications.-Engineered-for-Scale-Security-and-Business-Continuity.webp') center/cover no-repeat;
    }
}

/* ---- Services carousel cards (live: 338 wide, #eff0f7, radius 5, photo
   282x170 inset 28px, copy inset 25px, 13px/21px body) ---- */
.zmit-svc-track { gap: 10px; }
@media (min-width: 1081px) { .zmit-svc-track { grid-auto-columns: calc((100% - 3 * 10px) / 4); } }
@media (max-width: 680px) { .zmit-svc-track { grid-auto-columns: 84%; } }
.zmit-svc-track > .zmit-svc-card,
.zmit-svc-track > .zmit-svc-card:nth-child(even) {
    background: #eff0f7; border-right: 0; border-radius: 5px; padding: 0 0 20px;
}
.zmit-svc-card .zmit-svc-media { display: block; padding: 0 23px; }
.zmit-svc-media img { height: 170px; border-radius: 5px 5px 0 0; }
.zmit-svc-card h4 { padding: 20px 25px 0; margin-bottom: 20px; font-size: 18.28px; line-height: 24px; }
.zmit .zmit-svc-card h4 a { color: inherit; text-decoration: none; }
.zmit-svc-card p.ads-svc-desc,
.zmit-svc-card p.ads-svc-cap { padding: 0 25px; font-size: 13px; line-height: 21px; color: #14142b; }
.zmit-svc-card p.ads-svc-desc { margin: 0 0 20.8px; }
.zmit-svc-card p.ads-svc-cap { margin: 0 0 10px; }
.zmit-svc-card ul { padding: 0 25px; }
.zmit-svc-card li { line-height: 21px; }
.zmit-svc-nav { margin-top: 26px; gap: 0; }
.zmit-svc-nav button { background: #eff0f6 !important; padding: 6px 10px; font-size: 26px; }
.zmit-services-head .z-eyebrow { font-size: 16.31px; font-weight: 700; color: #14142b; margin-bottom: 10px; }
.zmit-services-head h3 { font-size: 34.7px; line-height: 43px; font-weight: 400; }

/* ---- Approach: h2 + live's 24px h3 sub-heading ---- */
.zmit-approach-copy h2 { margin-bottom: 20px; }
.zmit-approach-copy .ads-approach-sub { font-size: 24px; line-height: 31.2px; font-weight: 400; color: #141414; margin: 0 0 20px; }
.zmit-approach-acc { gap: 7px; }
.zmit-acc-item { border-radius: 5px; }

/* ---- Recognized ("Ranked #1"): live band 258 tall, 40px inset ---- */
/* Live at 1440: box 1280 wide at x73 (the shared 1280 recognized exception),
   h2 -> subline 20px, logos packed edge to edge (130/203/241 x 70, no gap). */
.zmit .zmit-recognized .zmit-recognized-band { padding: 40px; width: min(1280px, 100%); max-width: 1280px; margin-left: auto; margin-right: auto; }
.zmit .zmit-recognized-copy h2 { margin-bottom: 20px; }
.zmit-recognized-copy p { max-width: none; margin-bottom: 20px; }
.zmit .zmit-recognized-logos { gap: 0; }
.zmit-recognized-logos img { height: 70px; }
/* Live CTA: #fcfcfc fill, #141414 16px/500 label, padding 20px, radius 8 (387x56). */
.zmit .zmit-recognized .z-btn {
    background: #fcfcfc; color: #141414; border: 0; border-radius: 8px;
    font-size: 16px; font-weight: 500; line-height: 16px; padding: 20px;
}
/* The shared sheet caps this container at 1280 INCLUDING its 30px padding, which
   leaves a 1220 box; live's box is 1280 at x73. Desktop only, this one section. */
@media (min-width: 1081px) {
    .zmit .zmit-recognized .z-container { max-width: 1340px; }
}
.zmit .zmit-recognized .z-btn:hover { background: #eef0f7; color: #141414; }
/* The box straddles two bands on live (128px over the white approach band,
   80px over the grey trust band), so its own section must be transparent -
   a white section painted over both overlaps. */
.zmit .zmit-recognized.z-section { background: transparent; }

/* ---- Trust cards ("Built to Deliver"): copy left, 2x2 icon cards right ---- */
.zmit-why-card { padding: 20px; }
.zmit-why-ic { margin-bottom: 14px; }
.zmit-why-card h3 { margin-bottom: 13px; }
.zmit .zmit-why-card h3 a { color: inherit; text-decoration: none; }
.zmit-why-card p { color: rgba(20, 20, 20, .7); }
.zmit-why-head p { font-size: 18px; line-height: 27px; margin-top: 20px; }

/* ---- Stats: 3 stats -> 3 columns (CLAUDE.md), copy col 443 like live ---- */
.zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 45px; }
.zmit-stat .big { font-size: 57px; font-weight: 600; line-height: 57px; margin-bottom: 18px; }
.zmit-stat p { font-size: 15.63px; line-height: 24px; color: #fcfcfc; }
.zmit-stat .big { text-align: left; }   /* live says center — deliberate owner deviation (CLAUDE.md) */
.zmit-stats-eyebrow { font-size: 16.73px; font-weight: 600; line-height: 25.2px; margin-bottom: 20px; }
.zmit-stats-copy h2 { font-size: 34px; line-height: 44.2px; font-weight: 400; color: #fcfcfc; margin: 0 0 50px; }

/* ---- FAQ: live rows are 16px/600 questions, 25px inset, 7px apart, 5+5 split ---- */
.zmit-faq-item { border-radius: 5px; margin-bottom: 7px; }
.zmit-faq-q { padding: 25px 25px; font-size: 16px; line-height: 26.4px; }
.zmit-faq-item .zmit-faq-a-inner { padding: 0 25px 25px 20px; font-size: 16px; line-height: 25.6px; color: #d9dbe9; }
.zmit-faq-item:nth-child(5) { break-after: column; -webkit-column-break-after: always; }

/* ---- Final CTA: live's 1380x412 gradient row (here 1340, house box), copy col
   690 @ padding 50, figure 500x550 bottom-aligned, overhanging the top by 138
   and never below (CLAUDE.md overhang rule). ---- */
.zmit-final-banner {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px; min-height: 412px; padding: 0;
    display: flex; align-items: center;
}
.zmit-final-copy { max-width: none; width: 690px; padding: 50px; }
.zmit-final-copy h2 { margin-bottom: 20px; }
.zmit-final-copy p { max-width: none; margin: 0 0 22px; color: #14142b; }
.zmit-final-media img { right: 0; bottom: 0; width: 500px; height: 550px; object-fit: fill; }

/* ============================================================
   MEASURED SECTION GEOMETRY (live, 1440)
   Band edges on live: approach 2562-3393, "Ranked #1" 3265-3523 (pulls up 128
   into approach, overlaps the trust band by 80), trust band 3443-4178.
   ============================================================ */
@media (min-width: 1081px) {
    .zmit-hero-left { align-self: center; padding-bottom: 8px; }
    .zmit-hero .zmit-hero-sub { max-width: 766px; }
    .zmit-form-card { margin-top: -50px; }

    .zmit-intro-grid { grid-template-columns: 665px 595px; justify-content: space-between; gap: 40px; }
    .zmit-intro-copy h2 { margin-bottom: 40px; }
    .zmit-intro-copy p { margin: 0; }
    .zmit-intro-cta { margin-top: 40px; }
    .zmit-intro-media img { height: 400px; object-fit: cover; border-radius: 20px; }

    .zmit-stats-layout { grid-template-columns: 443px 1fr; gap: 50px; }
    .zmit-why .z-container { gap: 50px; }
    .zmit-why-grid { gap: 0 20px; }
}
.zmit .zmit-intro.z-section      { padding: 80px 0; }
.zmit .zmit-services.z-section   { padding: 80px 0 23px; }
.zmit .zmit-services-head        { margin-bottom: 60px; }
.zmit .zmit-approach.z-section   { padding: 50px 0 200px; background: #fff; }  /* live: plain white (was #fcfcfc) */
.zmit .zmit-recognized.z-section { margin: -128px 0 -80px; padding: 0; position: relative; z-index: 2; }
.zmit .zmit-why.z-section        { margin-top: 0; padding: 140px 0 80px; }
.zmit .zmit-stories.z-section    { padding: 80px 0; }
.zmit .zmit-stories h2           { font-size: 16.31px; line-height: 25px; font-weight: 700; margin-bottom: 71px; }
.zmit .zmit-stories-grid         { gap: 30px; }
.zmit .zmit-stats.z-section      { padding: 80px 0; }
.zmit .zmit-testi.z-section      { padding: 80px 0; }
.zmit .zmit-testi h2             { margin-bottom: 50px; }
.zmit .zmit-faq.z-section        { padding: 80px 0; }
.zmit .zmit-faq h2               { margin-bottom: 31px; }
.zmit .zmit-final.z-section      { margin: 150px 0 80px; padding: 0; }
.zmit .zmit-contact.z-section    { padding: 50px 0; }
.zmit .zmit-insights.z-section   { padding: 103px 0; }

/* Meetings embed well (not on this page, kept harmless) */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 660px; min-height: 0; }

/* ---- Tablet (<=1080): stacked layouts ---- */
@media (max-width: 1080px) {
    .zmit-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 26px; }
    .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; }
    .zmit .zmit-services-head      { margin-bottom: 32px; }
    .zmit-why-grid { gap: 24px; }
    .zmit-hero-left { padding-bottom: 0; }
    .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: 0; display: block; }
    .zmit-final-copy { width: auto; padding: 36px 32px 0; }
    .zmit-final-media img { position: static; width: auto; height: 280px; margin: 16px auto 0; }
    .zmit-faq-item:nth-child(5) { break-after: auto; -webkit-column-break-after: auto; }
    .zmit-testi-card { padding: 40px; }
}
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-svc-track { grid-auto-columns: calc((100% - 10px) / 2); }
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .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-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: 40px 0; }
    .zmit .zmit-stories h2           { margin-bottom: 24px; }
    .zmit .zmit-stats.z-section      { padding: 48px 0; }
    .zmit .zmit-testi.z-section      { padding: 44px 0; }
    .zmit .zmit-testi h2             { margin-bottom: 24px; }
    .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 .zmit-recognized .zmit-recognized-band { padding: 26px 22px; }
    .zmit .zmit-recognized-logos { gap: 20px; }
    .zmit-recognized-logos img { height: 44px; max-width: 30%; object-fit: contain; }
    .zmit-final-copy { padding: 30px 22px 0; }
    .zmit-final-media img { height: 210px; }
    .zmit-story-img img { height: 200px; }
    .zmit-testi-card { padding: 32px 24px; min-height: 0; }
    .zmit-stats-grid { grid-template-columns: 1fr; }
    .zmit-stats-copy h2 { margin-bottom: 28px; }
}

/* Sub-nav: one scrollable row on narrow screens (live keeps it 66px tall). */
@media (max-width: 1080px) {
    .zmit-subnav .z-container { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .zmit-subnav .z-container::-webkit-scrollbar { display: none; }
}