/* ============================================================
   Intelligent Process Automation Services -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Cloned from
   css/okta-services.css for the Family A nested build (WP ID 6132,
   /automation-emerging-technology/intelligent-process-automation-services).
   Divergences from the okta reference, all content-driven:
     - hero banner swaps to this page's Main-Banner-IPA artwork
     - long hero headline gets a 40px desktop override so the form still overhangs
     - Services is a 4-up grid WITH per-card photos (live uses photo cards), so the
       okta lavender no-image card rules are replaced with flush-photo card rules
     - stats block carries a copy paragraph (no eyebrow) -- styled below

   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 Intelligent Process Automation 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/06/12083727/Main-Banner-IPA.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/06/12083727/Main-Banner-IPA.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.
   Long headline (66 chars) is pinned to 40px here so the left column stays short
   enough for that overhang to hold. */
@media (min-width: 1081px) {
    .zmit-hero-left { padding-bottom: 8px; align-self: center; }
    /* Form sits fully inside the banner (never crosses the trust-logo band) and is
       kept compact, so the banner stays short and the logo strip sits directly
       below it with no dead white gap. */
    /* -132px = the trust-band height, so the form overhangs OUTSIDE the banner and
       its bottom lands exactly on the logo strip's lower edge (never into the
       subnav). Banner height then = formHeight - 41, so the compact form rules
       below also shorten the dark banner. */
    .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; }
    .zmit-hero .zmit-hero-headline { font-size: 40px; line-height: 1.15; }
}

/* ============================================================
   MEASURED SECTION GEOMETRY (carried from the okta reference; the overlap
   mechanism is production's own). Fine spacing is content-height specific and
   may want a re-measure against the live page at 1440/768/375.
   ============================================================ */
.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-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: 150px 0 80px; padding: 0; }
.zmit .zmit-contact.z-section    { padding: 50px 0; }
.zmit .zmit-insights.z-section   { padding: 103px 0; }

/* ---- Services: 4-up grid WITH per-card photos (live layout). Cards are white,
   the photo is flush to the top edges, copy sits in a padded panel below. The
   shared sheet already styles the flush photo + padded h4/ul; here we just zero
   the card's own padding, give it a white rounded body, and set the photo height. */
.zmit-services-grid { gap: 22px; }
.zmit-services-grid .zmit-svc-card {
    background: #fff;
    border: 1px solid #e7e9f2;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}
.zmit-svc-media img { height: 172px; }

/* ---- Content-height tuning ---- */
/* 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 */
.zmit-why-card { padding-bottom: 40px; }
/* Recognized inner band padding */
.zmit-recognized-band { padding: 18px 44px; }

/* ---- Stats: this page carries a copy paragraph under the heading (no eyebrow) ---- */
.zmit-stats-copy p { margin: 12px 0 22px; color: #e6eaf2; font-size: 16px; line-height: 1.6; max-width: 420px; }

/* ---- Why-head: live has a second lead line ("Key components...") ---- */
.zmit-why-head p + p { margin-top: 6px; }

/* ---- Final CTA banner: shorter box, figure overflowing the top edge ---- */
.zmit-final-banner {
    min-height: 300px;
    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; }

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

@media (max-width: 1080px) {
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-copy { max-width: none; }
    .zmit-stats-copy p { 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. */
@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) -- section rhythm re-measured for a 375 viewport.
   ============================================================ */
@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-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; }
}

@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). Let the well follow the iframe instead. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* ---- no-image service cards (not used on this page: every card has a photo) ---- */
.zmit-svc-card.no-image .zmit-svc-media { display: none; }