/* ============================================================
   Email & Communication Security Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/devsecops-services.css (the shipped + approved root-level Family A
   cyber-security build). Divergences driven by the live page
   https://www.zazz.io/email-security-services (WP ID 20926):
     - Hero banner image swaps for this page's artwork
       (2025/07/17094053/email-security-services-scaled.webp).
     - Services keep the text-only 4-col .zmit-services-grid -- live uses the
       same ucaddon_service_grid_card / uc_post_grid_style_one widget, 8 cards,
       no per-card photo.
     - Final CTA HAS a figure on this page too (500x577 consultant cut-out), so
       the shared .zmit-final-media overflow composition is kept.
     - Stats left column's supporting line is a LARGE light heading on live, so
       the devsecops 34px/400/#fcfcfc treatment carries over unchanged.
     - Live has NO second approach heading ("What This Process Covers:") on this
       page, so the .zmit-approach-sub rule is dropped.
     - Only 4 testimonials here (devsecops had 15) and the quotes run longer, so
       the testimonial card floor is re-measured.
     - Success-story cards DO carry an excerpt on this page (devsecops rendered
       title only), which makes the cards taller.

   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 devsecops 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 email-security 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/17094053/email-security-services-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/17094053/email-security-services-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; }
    /* NOTE: no .zmit-hero-headline size override here. Live's headline clamp
       resolves to 3.375rem (54px) at desktop, which is exactly the shared
       sheet's value, and this page's headline is short enough that the left
       column still stays under the form card so the overhang survives. */
}

/* ============================================================
   MEASURED SECTION GEOMETRY (this page's production values, 1440)

   Every padding below is the LIVE page's own Elementor container padding, read
   off the deployed DOM at 1440. NOTE: unlike the cloud-security reference, this
   page's live sections are a plain vertical stack -- the recognized band does
   NOT overlap into approach or why (measured live: approach ends 3135,
   recognized 3134-3547, why 3548-4366). So the reference's negative-margin
   overlap is deliberately dropped here.

   Where a value below deviates from live's raw container padding it is because
   the hand-written markup's own content block measures a little shorter or taller
   than Elementor's; the deviation is chosen so the SECTION HEIGHT matches live
   (which is what the eye sees), and it is called out inline.
   ============================================================ */
.zmit .zmit-intro.z-section      { padding: 10px 0 30px; }
.zmit .zmit-services.z-section   { padding: 30px 0; }
.zmit .zmit-approach.z-section   { padding: 40px 0 75px; }  /* live 40/30; +45 covers a shorter copy column */
.zmit .zmit-recognized.z-section { padding: 20px 0; }       /* live 30/30; band runs 20px taller here */
.zmit .zmit-why.z-section        { padding: 30px 0; }
.zmit .zmit-stories.z-section    { padding: 40px 0; }       /* live 30/30; +10 covers a shorter card */
.zmit .zmit-bookcal.z-section    { padding: 30px 0 0; }
.zmit .zmit-stats.z-section      { margin: 30px 0; padding: 40px 0; }  /* live 50/50 */
.zmit .zmit-testi.z-section      { padding: 30px 0; }
.zmit .zmit-faq.z-section        { padding: 36px 0; }
.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: 106px 0; }      /* live 80/80; live's copy block runs 52px taller */

/* ---- Intro: live splits the row 50/50 with a 50px gutter, and its copy runs
   16px/26.4px with a 26px paragraph gap (live inserts an empty   paragraph
   between blocks; the margin reproduces the same pixels without the junk
   markup). ---- */
.zmit-intro-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
.zmit-intro-copy p { font-size: 16px; line-height: 26.4px; margin-bottom: 26px; }
.zmit-intro-copy p:last-of-type { margin-bottom: 0; }
.zmit-intro-media img { width: 100%; height: auto; }

/* ---- Services grid cards: live uses the static 4-col text grid (8 cards, no
   per-card photo), styled as light lavender boxes with a subtle border. Same
   treatment as the okta build. ---- */
.zmit-services-grid { gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: #eef0f7;
    border: 1px solid #e4e7f1;
    border-radius: 10px;
    padding: 22px 22px;
}
/* Live card title: 16.31px / 25.2px / 700 */
.zmit-services-grid .zmit-svc-card h4 { font-size: 16.31px; line-height: 25.2px; margin-bottom: 12px; }
.zmit-services-grid .zmit-svc-card li { font-size: 13.5px; line-height: 20px; margin-bottom: 8px; }
/* Live markup has no per-card image, so the media slot is hidden rather than
   left as an empty box (the markup omits it, this is belt-and-braces). */
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* ---- Content-height tuning measured on this page ---- */
/* Approach copy: live's heading is 34.7px/43px/400 (shared sheet ships 30px/39px).
   Unlike devsecops this page has no second heading inside the copy column. */
.zmit-approach-copy h2 { font-size: 34.7px; line-height: 43px; }
/* Stats left column: live's supporting line is a LARGE light heading, not body
   copy. Keeping the light colour is mandatory (dark band); only the size and
   weight are this page's own measurement. */
.zmit-stats-copy p { color: #fcfcfc; font-size: 34px; font-weight: 400; line-height: 44.2px; margin: 0 0 20px; max-width: 420px; }
/* Meetings embed well — live's iframe well runs 784px inside a 910px band */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }
/* Story thumbnail — live renders the featured art 435x250 */
.zmit-story-img img { height: 250px; }
/* Testimonial card floor — live's card band runs 489px of content */
.zmit-testi-card { min-height: 415px; }
/* Why band: live's lead column runs 18px/27px with a 27px paragraph gap (empty
     paragraphs on live), and the 4 cards sit 2-up at 279px with a 50px
   gutter, each card ~305px tall. */
.zmit-why-head p { margin-bottom: 27px; }
.zmit-why-head p:last-child { margin-bottom: 0; }
.zmit-why-grid { grid-template-columns: repeat(2, 279px); gap: 50px; justify-content: start; }
.zmit-why-card { padding-bottom: 0; }
/* Recognized inner band padding — live uses a flat 40px on the #141414 box */
.zmit-recognized-band { padding: 40px; }
/* FAQ rows: live's summary is 25px/25px padding around an 18px/27px question,
   giving a 77px single-line row (104px when the question wraps), and live spaces
   the rows 7px apart. Both live and this build run the list as two columns with
   the first item open. */
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
/* Live's open answer region is 148px around ~106px of copy, i.e. ~21px of
   padding either side of the text. */
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
/* The shared list is a CSS multi-column box, which BALANCES the two columns.
   Live instead ships two explicit accordion widgets split 6 / 5, so its left
   column is the taller one and sets the section height. Forcing the break after
   item 6 reproduces that split exactly. Gated above the phone breakpoint: with
   column-count:1 a forced column break creates a SECOND column and the list
   overflows the viewport. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ---- Final CTA banner: this page HAS a figure on live (a consultant cut-out on
   the right). Shallower box with the copy vertically centred and a taller figure
   bottom-anchored so it breaks above the top edge -- same composition as okta. ---- */
.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; }
/* Live renders the figure at its natural 500x577, taller than the 441px banner,
   so it breaks above the top edge. */
.zmit-final-media img { height: 577px; 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-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; }
    /* Stacked band: the desktop 34px supporting line is too big for a phone/tablet
       column, and the second approach heading follows the shared 27px h2 step. */
    .zmit-stats-copy p { font-size: 22px; line-height: 1.4; }
    .zmit-approach-copy h2 { font-size: 27px; line-height: 1.25; }
    /* The why lead's desktop 18px/27px + 27px gaps balloons in a full-width
       stacked column (measured +732px against live at 375); live steps it down. */
    .zmit-why-head p { font-size: 16px; line-height: 25px; margin-bottom: 18px; }
    .zmit-intro-copy p { font-size: 15px; line-height: 24px; margin-bottom: 20px; }
    /* Desktop card floor is a desktop composition; stacked it just adds dead space. */
    .zmit-testi-card { min-height: 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) {
    /* 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: 55px 0; }
    .zmit .zmit-services.z-section   { padding: 88px 0; }
    .zmit .zmit-approach.z-section   { padding: 0; }
    .zmit .zmit-recognized.z-section { padding: 58px 0; }
    .zmit .zmit-why.z-section        { padding: 0; }
    .zmit .zmit-bookcal.z-section    { padding: 0; }
    .zmit .zmit-stories.z-section    { padding: 24px 0; }
    .zmit .zmit-stats.z-section      { padding: 10px 0; }
    .zmit .zmit-testi.z-section      { padding: 0; }
    .zmit .zmit-faq.z-section        { padding: 90px 0; }
    .zmit .zmit-final.z-section      { margin: 32px 0; }
    .zmit .zmit-contact.z-section    { padding: 40px 0; }
    .zmit .zmit-insights.z-section   { padding: 100px 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: 420px; }
    /* Full-bleed at one column, so the desktop 250px reads taller, matching live's
       phone card. */
    .zmit-story-img img   { height: 330px; }
    /* This sheet loads after the shared one, so the desktop fixed-width /
       multi-column rules above have to be undone explicitly on a phone. */
    .zmit-why-grid      { grid-template-columns: 1fr; gap: 24px; }
    .zmit-services-grid { grid-template-columns: 1fr; gap: 30px; }
    .zmit-faq-q         { padding: 16px 0; font-size: 15px; line-height: 22px; }
    /* Type steps re-measured against live at 375: the desktop sizes for the why
       lead, the testimonial lead/quote and the approach headings all overflow a
       315px column and pushed those bands 200-550px past live. */
    .zmit-why-head p    { font-size: 15px; line-height: 23px; margin-bottom: 10px; }
    .zmit-why-card p    { font-size: 14px; line-height: 22px; }
    .zmit-testi-lead    { font-size: 20px; line-height: 28px; }
    .zmit-testi-quote   { font-size: 15px; line-height: 24px; }
    .zmit-approach-copy h2 { font-size: 24px; line-height: 1.25; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}

/* Tablet only — the phone block above sets its own (shorter) floor and must not
   be overridden by a later, broader rule. */
@media (max-width: 1080px) and (min-width: 681px) {
    /* 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
       760px 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; }
}