/* ============================================================
   Incident Response Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/cloud-security-services.css (shipped + approved sibling in the same
   cyber-security family, WP ID 23976 here vs 8719 there): the APPROVED hero
   geometry block is carried over unchanged, the hero banner image swaps for this
   page, and because this page's hero headline is long/multi-line,
   .zmit-hero-headline stays trimmed to 40px on desktop so the left column keeps
   shorter than the form card and the form overhang is preserved.

   Deltas vs that reference, all driven by the live page:
     - Services use the text-only 4-col .zmit-services-grid (12 cards), not the
       image .zmit-svc-carousel -- so the grid card treatment comes across from
       css/okta-services.css, which is the shipped text-only-grid reference.
     - The "Book a Free Consultation" band sits BETWEEN approach and recognized
       on live, so the deep desktop lead-in that feeds the recognized-band
       overlap moves from .zmit-approach's bottom padding to .zmit-bookcal's.
     - The final CTA banner HAS a figure here, so it keeps the flex/figure
       geometry (from okta) rather than the reference's centred text-only box.

   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 (Mai Dubai 200x200, Theeb's
   padded triangle) and a wide wordmark (EV Everywhere 1431x751) 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 uses the same blue banner gradient (not the Azure
   lavender wash), dark copy, arrows outside the card. ---- */
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
}

/* ---- Hero banner: this page's Incident Response 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/07/21130906/Incident-Response-Services-Main-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/21130906/Incident-Response-Services-Main-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). Trim the left
   column's bottom pad and drop the shared -50px form lift so the form's lower
   rows (Budget/Submit/note) sit below the banner edge instead of flush inside it.
   APPROVED GEOMETRY -- carried over from the cloud-security reference verbatim. */
@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 ("Mitigate Breach Impact with Scalable Incident
       Response Services and Network Forensics Solutions"): 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 (this page's production heights, 1440)

   Measured against the live page at 1440 (Elementor top-level section boxes):
     hero+trust 791 | intro 903 | services 1155 | approach 657 | bookcal 910 |
     recognized 367 | why 661 | stories 674 | stats 360 | testimonials 536 |
     faq 859 | final 671 | contact 857 | insights 324.

   NOTE vs the cloud-security reference: that page's sheet pulls the recognized
   band up into the section above it with negative margins (and gives the why
   band a 200px top lead-in) to float it between two bands. Live IR does NOT do
   that -- its recognized section stacks normally between bookcal and why
   (measured: bookcal 3605-4515, recognized 4515-4882, why 4881-5542, no
   overlap), so the overlap is dropped here and each band gets plain padding.
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 84px 0; }
.zmit .zmit-services.z-section   { padding: 30px 0 29px; }
.zmit .zmit-approach.z-section   { padding: 50px 0 48px; }
.zmit .zmit-bookcal.z-section    { padding: 65px 0; }
.zmit .zmit-recognized.z-section { padding: 20px 0; }
.zmit .zmit-why.z-section        { padding: 46px 0; }
.zmit .zmit-stories.z-section    { padding: 17px 0; }
.zmit .zmit-stats.z-section      { padding: 80px 0; }
.zmit .zmit-testi.z-section      { padding: 30px 0; }
.zmit .zmit-faq.z-section        { padding: 95px 0; }
.zmit .zmit-final.z-section      { margin: 150px 0 80px; padding: 0; }
.zmit .zmit-contact.z-section    { padding: 79px 0; }
.zmit .zmit-insights.z-section   { padding: 103px 0; }

/* @media(1080) removed: old sheet overrode these with later non-media rules, so the page was non-responsive down to 680px; keep that. */

/* ---- Services grid cards: measured off the live cards (this page uses the
   static 4-col grid, not the carousel). Live: 319x328 boxes, #eff0f7 fill, no
   border, 8px radius, 30px inner padding, h3 18px/23.4px, li 14px/23.1px, and
   a ~30px/21px row/column gap -> 3 rows of 4 for the 12 cards. ---- */
.zmit-services-grid { gap: 30px 21px; }
.zmit-services-grid .zmit-svc-card {
    background: #eff0f7;
    border: 0;
    border-radius: 8px;
    padding: 30px;
}
/* The shared sheet inlays the card's own 18px side padding on the h4/ul (it is
   built for the carousel card, where the copy panel sits under a flush photo).
   In this grid the 30px card padding already provides the inset, so zero those
   out -- otherwise the heading wraps to 3 lines where live takes 2. */
.zmit-services-grid .zmit-svc-card h4 { font-size: 18px; line-height: 23.4px; padding: 0; margin: 0 0 20px; }
.zmit-services-grid .zmit-svc-card ul { padding: 0 0 0 2px; margin: 14px 0; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; line-height: 23.1px; margin: 0; }

/* ---- Content-height tuning measured on this page ---- */
/* Services card photo height (not used on this page: live markup has no
   per-card image, so .zmit-svc-media is simply omitted from the markup) */
.zmit-svc-media img { height: 180px; }
/* Stats left column: this page has an h3 sub-heading on the dark band instead of
   a body paragraph, so give it the light muted token (never a dark colour on a
   dark band -- CLAUDE.md §7). */
.zmit-stats-copy .zmit-stats-sub { color: rgba(255,255,255,.82); font-size: 15px; font-weight: 400; line-height: 1.6; margin: 0 0 26px; max-width: 380px; }
.zmit-stats-copy p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; margin: 0 0 26px; max-width: 380px; }
/* Meetings embed well */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 660px; min-height: 0; }
/* Story thumbnail — live's card image box is 435x250 */
.zmit-story-img img { height: 250px; }
/* Testimonial card floor — live's testimonial band is 536 tall on a 30/30 pad */
.zmit-testi-card { min-height: 401px; }
/* Why item trailing space (rows on production's ~260px pitch) */
.zmit-why-card { padding-bottom: 40px; }
/* Recognized band: live's dark box is 327 tall on a 40px vertical pad, with the
   white SVG marks on a 44px row */
.zmit-recognized-band { padding: 30px 54px; }
/* flex:none — the three marks have different aspect ratios (130/181/241 x 70),
   so letting them shrink squashes all three to the same width. */
.zmit-recognized-logos img { height: 44px; width: auto; flex: none; }
/* FAQ toggles: live's collapsed question row is 77px (16px/26.4px copy on a
   25px vertical pad) with a 7px gap, not the shared sheet's snug 52px/10px */
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-q { padding: 25px 22px; font-size: 16px; font-weight: 400; line-height: 26.4px; }

/* ---- Final CTA banner: this page HAS a figure (consultant photo on live).
   Shallower box with the copy left-centred and a taller figure bottom-anchored
   so it breaks above the top edge -- same treatment as the okta build. ---- */
.zmit-final-banner {
    min-height: 441px;
    padding: 40px 60px;
    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: 470px; }
.zmit-final-media img { height: 470px; right: 90px; bottom: 0; }

/* @media(1080) removed: old sheet overrode these with later non-media rules, so the page was non-responsive down to 680px; keep that. */

/* ---- 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-svc-track { grid-auto-columns: calc((100% - 22px) / 2); }
    .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); }
    /* Live goes two-up here (measured 332px cards at 768). The shared sheet only
       collapses .zmit-services-grid at 680, so without this the 12-card grid
       stays four-up and the columns size to min-content. */
    .zmit-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The shared sheet only stacks the recognized band at 680, so between 681 and
   1080 the copy is squeezed into a ~170px column and the band runs ~950px tall.
   Stack it across the whole sub-desktop range instead. */
@media (max-width: 1080px) {
    .zmit-recognized-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
}

@media (max-width: 1080px) {
    /* The measured desktop lead-ins are desktop-only; the live page collapses
       them on tablet/phone, where a 200px gap would read as a blank screen. */
    .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-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) {
    /* Tablet, measured against live at 768 (14916 tall). Once the grids stack,
       the stacked content alone is as tall as live's whole section, so these
       bands carry little or no extra padding here — live's own Elementor
       sections are padding-free at this breakpoint too. */
    .zmit .zmit-intro.z-section { padding: 0; }
    .zmit .zmit-approach.z-section { padding: 0; }
    .zmit .zmit-bookcal.z-section { padding: 40px 0; }
    .zmit .zmit-recognized.z-section { padding: 32px 0; }
    .zmit .zmit-why.z-section { padding: 0; }
    .zmit .zmit-stats.z-section { padding: 30px 0; }
    .zmit .zmit-testi.z-section { padding: 0; }
    .zmit .zmit-contact.z-section { padding: 50px 0; }
    .zmit .zmit-insights.z-section { padding: 36px 0; }
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    /* Tablet/phone: the 4-col grid stacks, so the desktop card padding + row gap
       just add dead space to a full-width card. */
    .zmit-services-grid { gap: 16px; }
    .zmit-services-grid .zmit-svc-card { padding: 22px; }
    .zmit-testi-card { min-height: 0; }
    .zmit-final-banner { min-height: 0; }
}

@media (max-width: 1080px) {
    /* Stacked: no overflow trick, figure sits under the copy */
    .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 kept 80-200px bands and ran ~16.8k
   px tall. 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      { 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; }

    /* 44px of side padding inside a 315px container leaves 227px of copy. */
    .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; }

    /* The shared sheet's `white-space: nowrap` on this button is fine for a
       short label, but this page's CTA ("Consult Our Forensics & Incident
       Response Experts") is 453px unbreakable — inside a 1fr grid track that
       sets the band's min-content width and pushes the whole band off-screen. */
    .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }

    /* Phone type scale, measured off live at 375: every section h2 drops to
       22.9px/29.8 (Success Stories keeps its own 29px/37.7 widget size) and the
       why-card headings to 16px/19.2. The shared sheet keeps its desktop sizes
       at every width, which inflated the phone page by ~1.5k px. */
    .zmit-intro-copy h2,
    .zmit-services-head h3,
    .zmit-approach-copy h2,
    .zmit-bookcal h2,
    .zmit-recognized-copy h2,
    .zmit-why-head h2,
    .zmit-stats-copy h2,
    .zmit-testi h2,
    .zmit-faq h2,
    .zmit-final-copy h2,
    .zmit-contact-head h2 { font-size: 22.9px; line-height: 29.8px; }
    .zmit-stories h2 { font-size: 29px; line-height: 37.7px; }
    .zmit-why-card h3 { font-size: 16px; line-height: 19.2px; }
}

@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 list 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; }