/* ============================================================
   Managed Detection and Response -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/cloud-security-services.css (shipped + approved Family A cyber-security
   build) for WP ID 20512. The APPROVED desktop hero geometry in the
   @media (min-width:1081px) block below is carried over UNCHANGED: form card
   margin-bottom -132px (== .zmit-trust-band height) so the form's lower rows
   overhang the banner and land on the trust-logo strip, the compact .zmit-hsform
   rules that keep the banner short, .zmit-hero-left{align-self:center}, and
   .zmit-hsform{min-height:0}. This page's hero headline is long/multi-line
   ("End-to-End Managed Detection and Response for Agile Enterprises"), so the
   40px .zmit-hero-headline override stays too.

   Differences from that reference, all measured off live:
   - Services use the TEXT-ONLY 4-col .zmit-services-grid (12 cards, no per-card
     photo), so the shared sheet's carousel padding on h4/ul is reset inside the
     grid and live's lavender card fill + 30px gutter are restored.
   - No negative-margin overlap chain: live puts a plain 140px lead-in on the
     recognized band instead of pulling it up into the section above.
   - Book-a-consultation sits between APPROACH and RECOGNIZED.
   - Final CTA has a figure; testimonial card and final banner both use live's
     exact 102.29deg gradient.
   - Stats tiles render LABEL above NUMBER (live counter order) and gain an eyebrow.

   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.
   ============================================================ */

/* ---- In-page anchor sub-nav (below hero/trust band) ---- */
.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;
}
/* Hover highlights whatever box the cursor is on; the active pill stays on the
   section currently in view (set by scroll-spy). Both can show at once. */
.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; }
.zmit-contact .zmit-contact-head p { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ---- Success-story loop-grid cards: light-grey card + brand logo row ----
   Live normalises every brand logo to a 50px-tall, left-aligned box (object-fit
   contain, width follows aspect), so a square mark and a wide wordmark sit on the
   same baseline. A reserved-height slot keeps titles aligned when a logo is absent. */
.zmit-story { background: #f5f6fb; border-radius: 8px; overflow: hidden; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
/* Specific selector + fixed box so a broad `.zmit-story .body img` rule can't
   blow a wide wordmark up: every logo is 50px tall, capped in width, left-aligned. */
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 150px;
    object-fit: contain; object-position: left center;
}

/* ---- Testimonial card: live's exact banner gradient (102.29deg, three stops),
   dark copy, arrows outside the card. ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}

/* ---- Hero banner: this page's MDR artwork + the shared 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/07/16085859/Managed-Detection-and-Response-Banner-scaled.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/07/16085859/Managed-Detection-and-Response-Banner-scaled.webp') center/cover no-repeat;
    }
}
/* Hero left column runs slightly deeper on this page */
.zmit-hero-left { padding-bottom: 56px; }

/* Desktop: the left text column drives the (short) banner height, and the taller
   form card overhangs onto the white trust band (matches live). APPROVED BLOCK --
   carried over unchanged from css/cloud-security-services.css; do not retune. */
@media (min-width: 1081px) {
    .zmit-hero-left { padding-bottom: 8px; align-self: center; }
    /* -132px = trust-band height: form overhangs OUTSIDE the banner, bottom lands
       exactly on the logo strip's lower edge. Banner = formHeight - 41. */
    .zmit-form-card { margin-top: 0; margin-bottom: -132px; padding: 16px; }
    .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; }
    /* Long, multi-line headline ("End-to-End Managed Detection and Response for
       Agile Enterprises"): the shared sheet's 54px would make the left column
       outgrow the form and kill the overhang, so trim to 40px on desktop. */
    .zmit-hero-headline { font-size: 40px; }
}

/* ============================================================
   MEASURED SECTION GEOMETRY (live 20512 container paddings, 1440)

   Read straight off live's top-level e-con parents. Unlike the cloud-security
   reference this page has NO negative-margin overlap: the recognized band simply
   carries a 140px lead-in and the why band butts up behind it.
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 20px 0 30px; }
.zmit .zmit-services.z-section   { padding: 30px 0; }
.zmit .zmit-approach.z-section   { padding: 40px 0 30px; }
.zmit .zmit-bookcal.z-section    { padding: 20px 0 0; }
.zmit .zmit-recognized.z-section { padding: 140px 0 0; position: relative; z-index: 2; }
.zmit .zmit-why.z-section        { padding: 30px 0; }
.zmit .zmit-stories.z-section    { padding: 30px 0; }
.zmit .zmit-stats.z-section      { margin: 30px 0; padding: 50px 0; }
.zmit .zmit-testi.z-section      { padding: 80px 0; }
.zmit .zmit-faq.z-section        { padding: 80px 0 120px; }
.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: 80px 0; }

/* ---- Services grid cards: live's lavender-filled boxes on a 4-col / 30px grid.
   The shared sheet's carousel rules put padding on .zmit-svc-card h4 / ul (they
   are unscoped and load after the grid rules); inside the static grid the card's
   own padding is the only inset, so reset them here. ---- */
.zmit-services-grid { gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: #eef0f7;
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 24px 22px;
}
.zmit-services-grid .zmit-svc-card h4 { padding: 0; font-size: 17px; margin-bottom: 12px; line-height: 1.3; }
.zmit-services-grid .zmit-svc-card ul { padding: 0; }
.zmit-services-grid .zmit-svc-card li { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; }

/* ---- Content-height tuning measured on this page ---- */
/* Why-choose lead is three paragraphs on this page, so give them list rhythm. */
.zmit-why-head p + p { margin-top: 14px; }
/* Stats: live's eyebrow is 16px/600 (the shared default is 13px/700), and each
   tile puts the LABEL above the NUMBER, so the spacing swaps ends. */
.zmit-stats-eyebrow { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
/* Dark band (#262338) => light copy. NEVER give anything in .zmit-stats a dark
   colour (CLAUDE.md §7); this is the reference's light token, kept verbatim. */
.zmit-stats-copy p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; margin: 0 0 26px; max-width: 380px; }
.zmit-stat p { color: #fcfcfc; margin: 0 0 18px; }
.zmit-stat .big { margin-bottom: 0; font-size: 48px; }
/* Meetings embed well */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 660px; min-height: 0; }
/* Story thumbnail */
.zmit-story-img img { height: 300px; }
/* Testimonial card floor */
.zmit-testi-card { min-height: 336px; }
/* Why item trailing space (rows on production's ~260px pitch) */
.zmit-why-card { padding-bottom: 40px; }
/* Recognized inner band padding (live: 40px all round, 10px radius, #141414) */
.zmit-recognized-band { padding: 40px; }

/* ---- Final CTA banner: live's exact gradient, copy left, figure bottom-right
   breaking above the box top (live pulls the image up 10%). ---- */
.zmit-final-banner {
    min-height: 300px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zmit-final-copy { max-width: 52%; }
.zmit-final-copy h2 { margin-bottom: 14px; }
.zmit-final-copy p { margin-bottom: 22px; max-width: 470px; }
.zmit-final-media img { height: 420px; right: 90px; bottom: 0; }

/* ---- Old azure.css @media(max-width:1080px) blocks, restored verbatim to
   preserve the pre-split tablet cascade exactly. ---- */
@media (max-width: 1080px) {
    .zmit-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Tablet-only: the shared sheet already collapses these to one column at
   680px, and this sheet loads after it, so gating them to tablet stops them
   re-imposing a two-up layout on a phone. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
    /* The measured desktop lead-in is desktop-only; live collapses it on
       tablet/phone, where a 140px gap would read as a blank screen. */
    .zmit .zmit-recognized.z-section { padding: 32px 0; }
    .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-bookcal.z-section  { padding: 40px 0; }
    .zmit-why-grid { gap: 24px; }
    /* 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; }
}

@media (max-width: 1080px) {
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-copy { max-width: none; }
}

@media (max-width: 1080px) {
    .zmit-why .z-container { grid-template-columns: 1fr; gap: 32px; }
}
/* Tablet-only, same reason as the two-up block above: 19px card headings in a
   145px column are unreadable, and the shared sheet already sets 1fr at 680. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-why-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}

@media (max-width: 1080px) {
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    /* Figure drops below the copy once the banner stacks. */
    .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; }
}

/* ============================================================
   PHONE GEOMETRY (<=680)

   The measured section paddings above are this page's 1440 values and carry
   no media query, so on a phone the page would keep 80-140px bands. These are
   the same rhythm re-measured for a 375 viewport; the shared sheet's structural
   stacking does the rest.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-intro.z-section      { padding: 24px 0; }
    .zmit .zmit-services.z-section   { padding: 44px 0; }
    .zmit .zmit-approach.z-section   { padding: 40px 0; }
    .zmit .zmit-bookcal.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      { margin: 20px 0; 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; }

    /* 40px of side padding inside a 315px container leaves too little copy width. */
    .zmit-recognized-band { padding: 26px 22px; }
    .zmit-final-banner    { padding: 30px 22px 0; }
    .zmit-final-media img { height: 210px; }
    /* Full-bleed at one column, so the desktop 300px reads as a near-square. */
    .zmit-story-img img   { height: 200px; }
}

@media (max-width: 1080px) {
    /* 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
       660px above). The well kept the measured desktop height and clipped the
       last row of times -- let it follow the iframe instead. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* ---- This page: the 12-item service grid has no per-card image in the live
   markup, so the media slot is hidden rather than left as an empty box. ---- */
.zmit-svc-card.no-image .zmit-svc-media { display: none; }