/* ============================================================
   Cloud Security Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/okta-services.css per the Family A nested build (cyber-security-services,
   WP ID 8719): the hero banner image swaps for this page, and because this
   page's hero headline is long/multi-line, .zmit-hero-headline is trimmed to
   40px on desktop so the left column stays shorter than the form card and the
   form overhang is preserved. Sub-nav, contact-width, success-story-card,
   testimonial-gradient and the desktop hero-overhang rules are all inherited
   unchanged from that reference. Services use the image .zmit-svc-carousel
   (per-card banner) here, not okta's text-only .zmit-services-grid.

   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.
   Section geometry started from the Azure page's measured values and is tuned
   to this page's content heights.
   ============================================================ */

/* ---- 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 Okta artwork (dark navy + blue signal-wave
   graphic) + 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/08130251/cloud-security-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/08130251/cloud-security-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. */
@media (min-width: 1081px) {
    .zmit-hero-left { padding-bottom: 8px; align-self: center; }
    /* Form fully inside the banner (never crosses the trust-logo band) + compact,
       so the banner stays short and the logo strip sits directly below it. */
    /* -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 ("Infrastructure & Cloud Security Services for
       Complex Environments"): 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)

   Section rhythm and the recognized-band overlap are content-height specific:
   the next page re-measures its own. The overlap mechanism (the recognized band
   pulls up into approach with negative margins, the why band pulls up into
   recognized) is production's own; the values here are this page's.
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 30px 0; }
.zmit .zmit-services.z-section   { padding: 80px 0 66px; }
.zmit .zmit-approach.z-section   { padding: 50px 0 165px; }
.zmit .zmit-recognized.z-section { margin: -145px 0 -200px; padding: 40px 0; position: relative; z-index: 2; }
.zmit .zmit-why.z-section        { margin-top: 80px; padding: 200px 0 80px; }
.zmit .zmit-bookcal.z-section    { padding: 70px 0; }
.zmit .zmit-stories.z-section    { padding: 30px 0; }
.zmit .zmit-stats.z-section      { padding: 85px 0; }
.zmit .zmit-testi.z-section      { padding: 80px 0; }
.zmit .zmit-faq.z-section        { padding: 80px 0; }
.zmit .zmit-final.z-section      { margin: 80px 0; padding: 0; }
.zmit .zmit-contact.z-section    { padding: 50px 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: this page uses the shared image CAROUSEL (.zmit-svc-track),
   not okta's text-only grid. The shared sheet styles the card fully (flush photo,
   grey copy panel below, chevron nav). The only page tuning is the photo height,
   matched to the shared card gradient's 180px image/panel split. ---- */

/* ---- Content-height tuning measured on this page ---- */
.zmit-svc-media img { height: 180px; }
/* Stats left column has a body paragraph on the dark band (okta's had none);
   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 */
.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 */
.zmit-recognized-band { padding: 18px 44px; }

/* ---- Final CTA banner: this page has NO figure (text-only on live). Centre the
   copy in a shallow box; the shared .zmit-final-media rules go unused. ---- */
.zmit-final-banner {
    min-height: 0;
    padding: 56px 60px;
    display: block;
    text-align: center;
}
.zmit-final-copy { max-width: 720px; margin: 0 auto; }
.zmit-final-copy h2 { margin-bottom: 14px; }
.zmit-final-copy p { margin-bottom: 22px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* @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); }
}

@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 overlap is a desktop composition; stacked layouts just butt up. */
    .zmit .zmit-approach.z-section { padding: 50px 0 60px; }
    .zmit .zmit-recognized.z-section { margin: 0; padding: 32px 0; }
    .zmit .zmit-why.z-section { margin-top: 0; padding: 60px 0; }
    .zmit .zmit-final.z-section { margin: 40px 0; padding: 0; }
}

@media (max-width: 1080px) {
    /* Text-only banner (no figure): even bottom padding so the button doesn't
       touch the edge. */
    .zmit-final-banner { min-height: 0; padding: 40px 32px; display: block; }
    .zmit-final-copy { max-width: 100%; }
}
/* ============================================================
   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-recognized.z-section { padding: 28px 0; }
    .zmit .zmit-why.z-section        { padding: 44px 0; }
    .zmit .zmit-bookcal.z-section    { padding: 40px 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; }
    /* 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 7-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; }