/* ============================================================
   Endpoint Protection Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/cloud-security-services.css (the shipped + approved Family A cyber-security
   reference, WP ID 8719) for WP ID 20514. Carried over unchanged: the APPROVED
   desktop hero geometry (form overhang == trust-band height, compact form rules,
   hero-left centred), the light .zmit-stats-copy p colour, the success-story
   50px logo box, the sub-nav / contact-width / testimonial-gradient rules and the
   measured section rhythm.

   Divergences from that reference, all driven by the live endpoint page:
     - hero banner artwork swapped;
     - NO .zmit-hero-headline font-size override: live's clamp() resolves to 54px
       at 1440 (the shared sheet's own default) and this headline is short enough
       that the left column still stays under the form card;
     - services are the TEXT-ONLY .zmit-services-grid (10 cards, no per-card
       photo), so the carousel-only .zmit-svc-media height tuning is dropped;
     - a SECOND dark stats band ("What We Manage Today", live #262338) sits between
       Services and the engagement model -- same .zmit-stats classes, its own
       rhythm via .zmit-manage;
     - the Book-a-Consultation band sits BEFORE Recognized on this page, so the
       recognized/why negative-margin overlap is re-based on the bookcal band;
     - the final CTA banner HAS a figure on live, so the reference's text-only
       centred override is dropped and the shared two-column banner is used.

   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 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 endpoint-protection artwork (abstract dark
   tunnel of light beams) + 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/16102216/endpoint-protection-solutions-enterprise-security-operations.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/16102216/endpoint-protection-solutions-enterprise-security-operations.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. */
@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; }
    /* NO .zmit-hero-headline override here: live resolves its clamp() to the
       shared sheet's own 54px at 1440, and "Stay Ahead of Threats with
       Intelligent Endpoint Defense" is short enough to stay under the form. */
}

/* ============================================================
   MEASURED SECTION GEOMETRY (this page's production heights at 1440)

   Every value below is the live section's own measured box height at a 1440
   viewport minus this build's content height, i.e. the padding needed to land on
   live. Live reference heights are in the trailing comments.

   NOTE — no recognized/why OVERLAP on this page. The cloud-security reference
   pulled the recognized band up into approach and the why band up into
   recognized with negative margins because that is how *that* live page
   composed them. Measured here, live stacks bookcal (910) -> recognized (315)
   -> why (905) strictly sequentially, so the negative margins are dropped.
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 94px 0; }             /* live 826 */
.zmit .zmit-services.z-section   { padding: 80px 0 64px; }        /* live 1447 */
.zmit .zmit-stats.zmit-manage.z-section { padding: 60px 0; margin: 20px 0; }  /* live 320, margin 20 */
.zmit .zmit-approach.z-section   { padding: 32px 0 31px; }        /* live 473 */
/* live 910, of which the meetings well is 784 — the well carries the band */
.zmit .zmit-bookcal.z-section    { padding: 3px 0; }
.zmit .zmit-recognized.z-section { margin: 0; padding: 41px 0; }  /* live 315 */
.zmit .zmit-why.z-section        { margin-top: 0; padding: 44px 0; }  /* live 905 */
.zmit .zmit-stories.z-section    { padding: 16px 0; }             /* live 717 */
.zmit .zmit-stats.z-section      { padding: 60px 0; margin: 30px 0; }  /* live 296, margin 30 */
.zmit .zmit-testi.z-section      { padding: 30px 0; }             /* live 536 */
.zmit .zmit-faq.z-section        { padding: 36px 0; }             /* live 884 */
/* live 670 = 150 lead-in + 440 banner + 80. Live puts that 150/80 on the INNER
   banner, so it counts inside the section box — here it has to be padding, or the
   section measures only the banner and the rhythm collapses. */
.zmit .zmit-final.z-section      { margin: 0; padding: 150px 0 80px; }
.zmit .zmit-contact.z-section    { padding: 78px 0; }             /* live 857 */
.zmit .zmit-insights.z-section   { padding: 103px 0; }            /* live 325 */

/* ---- Content-height tuning measured on this page ---- */
/* Stats left column has a body paragraph on the dark band; without a light
   colour it renders invisible against the dark background. */
.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 — live's iframe container measures 784 on this page */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 784px; min-height: 0; }
/* Story thumbnail — live 250 */
.zmit-story-img img { height: 250px; }
/* Testimonial card floor — live's card box */
.zmit-testi-card { min-height: 400px; }
/* FAQ rows: live's collapsed row is 77px tall — 25px question padding (shared
   sheet has 16px) over a 16px/1.7 question line (shared sheet has 14px/1.4).
   Two-column list, so the row height is what makes the band reach live's 884. */
.zmit-faq-q { padding: 25px 22px; font-size: 16px; line-height: 1.7; }
/* Live splits the 11 questions into two 655px accordions (6 left / 5 right) with
   a 7px gap between rows and a 199px open-answer block. The shared sheet uses one
   two-column list, which balances 6/5 the same way, so matching the row gap and
   the answer type lands the same column heights. */
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-a-inner { font-size: 15px; line-height: 1.75; padding: 0 22px 26px; }
/* CSS columns balance by height (582/582); live's two accordions are 6/5, which
   makes the left column the tall one. Force the break after the 6th question so
   the band gets live's shape, not a balanced one. */
.zmit-faq-item:nth-child(6) { break-after: column; -webkit-column-break-after: column; }
/* Final CTA banner (live inner banner 440, portrait bottom-anchored inside it) */
.zmit-final-banner { min-height: 440px; }
.zmit-final-media img { height: 440px; }
/* Why item trailing space (rows on production's ~260px pitch) */
.zmit-why-card { padding-bottom: 40px; }
/* Recognized inner band padding */
.zmit-recognized-band { padding: 18px 44px; }

/* ---- 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-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@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) {
    /* The 1440 lead-ins are desktop measurements; tablet re-flows everything. */
    .zmit .zmit-intro.z-section { padding: 44px 0; }
    .zmit .zmit-bookcal.z-section { padding: 40px 0; }
    .zmit .zmit-recognized.z-section { padding: 32px 0; }
    .zmit .zmit-why.z-section { padding: 60px 0; }
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
    .zmit .zmit-stats.zmit-manage.z-section { padding: 44px 0; margin: 0; }
    .zmit .zmit-stats.z-section { padding: 48px 0; margin: 0; }
    .zmit .zmit-stories.z-section { padding: 40px 0; }
    .zmit .zmit-testi.z-section { padding: 44px 0; }
    .zmit .zmit-faq.z-section { padding: 44px 0; }
    .zmit .zmit-contact.z-section { padding: 44px 0; }
    /* The desktop 440px portrait would swamp a stacked banner. */
    .zmit-final-banner { min-height: 0; }
    /* All three of these are desktop measurements taken off live at 1440; below
       1081 live re-flows to smaller boxes, so releasing them keeps the tablet
       rhythm from inflating. */
    .zmit-testi-card { min-height: 0; }
    /* Between the 1440 row (77px) and the shared sheet's 52px — live's tablet row
       sits in the middle, and dropping straight back to 52 made the band 199 short. */
    .zmit-faq-q { padding: 22px 22px; font-size: 15px; line-height: 1.6; }
    .zmit .zmit-insights.z-section { padding: 23px 0; }   /* live 296 at 768 */
}

/* Final CTA banner with a figure: below the two-column threshold the absolutely
   positioned portrait would overlap the copy, so stack and re-flow it. */
@media (max-width: 1080px) {
    .zmit-final-banner { padding: 40px 32px; }
    .zmit-final-copy { max-width: 100%; }
    .zmit-final-media img { position: static; height: 240px; margin-top: 24px; }
}

/* ============================================================
   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-200px bands and run
   ~17k 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-stats.zmit-manage.z-section { padding: 40px 0; margin: 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: 34px 22px; }
    .zmit-final-media img { height: 200px; }
    /* Full-bleed at one column, so the desktop 250px reads as a near-square. */
    .zmit-story-img img   { height: 200px; }
    /* Live's 25px question padding is a desktop measurement; a phone row with a
       3-line question would run to 130px. */
    .zmit-faq-q { padding: 16px 18px; }
}

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

/* Text-only service cards. Values read off live (uc_content): #eff0f7 fill, no
   border, 10px radius, 30px padding, 30px gap. Without the fill the card sits at
   #f5f6fa on an #f7f7fc section -- a 2/255 difference, i.e. invisible. */
.zmit-services-grid { gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: #eff0f7;
    border: 0;
    border-radius: 10px;
    padding: 30px;
}
.zmit-services-grid .zmit-svc-card h4 { font-size: 18px; margin-bottom: 5px; line-height: 1.3; }
.zmit-services-grid .zmit-svc-card ul { margin-top: 5px; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; color: #14142b; }