/* ============================================================
   Cloud Transformation -- page-specific layer.

   Loads AFTER css/it-managed-services-zazz.css. Copied from
   css/okta-services.css (Family A build, WP ID 7216): hero banner image
   swapped; contact-width, success-story-card, testimonial-gradient and the
   desktop hero-overhang rules are inherited unchanged from that reference.
   No in-page anchor sub-nav on the live page, so the inherited .zmit-subnav
   rules are simply unused here (kept for parity with the reference sheet).

   Unlike okta (text-only 4-col services grid), this page's live services
   section IS a real CSS grid (Elementor grid-template-columns: repeat(5,1fr)
   desktop / repeat(2,1fr) tablet / repeat(1,1fr) mobile) but WITH a per-card
   photo -- not a horizontal-scroll carousel. So the services override below
   replaces okta's text-only 4-col block with a 5-col grid + media slot,
   rather than switching to the systems-integration carousel markup.

   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%);
}

/* Testimonial arrows disable at the carousel ends (non-looping — see the page
   JS). Keep them visible but muted; pointer-events:none also blocks the shared
   hover state so a disabled arrow cannot light up. */
.zmit .zmit-testi-nav:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ---- 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/09125148/cloud-transformation-banner.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/09125148/cloud-transformation-banner.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) {
    /* This page's headline is long (concatenated lines); live sets it ~40px, not
       the shared 54px, so the left column stays short enough for the form to
       overhang. */
    .zmit-hero .zmit-hero-headline { font-size: 40px; line-height: 1.2; }
    .zmit-hero-left { padding-bottom: 8px; }
    .zmit-form-card { margin-top: 0; }
}

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

/* Book-a-Consultation: balance the visible gap before/after the band. Its
   neighbours contribute unequal facing padding (Success Stories above: 30px;
   Stats below: 85px), so the section's own padding is deliberately lopsided
   (92 top / 37 bottom) to make gap-above == gap-below == 122px. This is why the
   top/bottom differ; do NOT "normalise" it back to a symmetric 64/64. */
.zmit .zmit-bookcta.z-section    { padding: 92px 0 37px; }

/* @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: 5 cards, each with a photo (live is a real CSS grid --
   repeat(5,1fr) desktop -- not a horizontal-scroll carousel, so the card/media
   styling is borrowed from the carousel's card look without the scroll-track
   mechanics). ---- */
.zmit-services-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.zmit-services-grid .zmit-svc-card {
    background: #f5f6fa;
    border: 1px solid #eef0f6;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}
.zmit-services-grid .zmit-svc-media { margin: 0; border-radius: 0; overflow: hidden; }
.zmit-services-grid .zmit-svc-media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.zmit-services-grid .zmit-svc-card h4 { font-size: 16px; margin: 16px 16px 10px; line-height: 1.3; }
.zmit-services-grid .zmit-svc-card ul { padding: 0 16px 20px; margin: 0; }
.zmit-services-grid .zmit-svc-card li { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .zmit-services-grid { grid-template-columns: 1fr; }
}
/* Meetings embed well. Let the box grow to the HubSpot iframe's own height
   (it sizes itself to ~756px) rather than locking to 660px — the fixed height
   made the calendar's lower rows spill out of the band and overlap the Stats
   section below. min-height reserves the slot before the calendar loads (CLS).
   The <=1080 rule below already did this; desktop now matches, same as the
   it-managed-services reference (natural iframe height). */
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: auto; min-height: 660px; }
/* 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: shorter box, figure overflowing the top edge ----
   Deliberate departure from production's 409px box: a shallower box with the
   copy centred and a taller figure bottom-anchored so it breaks above the top. */
.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; }

/* @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) {
    /* 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-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; }
    /* Balance Book-a-Consultation gaps on phone: stories 24 above, stats 48
       below -> 64/40 gives 88px on each side. */
    .zmit .zmit-bookcta.z-section    { padding: 64px 0 40px; }
    .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). 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; }

/* ------------------------------------------------------------
   Service-card hover (owner, 2026-09-25): the WHOLE card reacts, not the
   image, and only linked cards with a CTA (.has-link) react at all.
   Ported from the shipped cloud-consulting-services pattern, measured on the
   live /it-managed-services card: lift translate(-10px,-10px), fill #d5e0f3,
   border #0161ff, "Explore ..." CTA revealed at the card foot, .3s, no
   box-shadow. Unlinked (.no-cta) cards get no hover at all.
   ------------------------------------------------------------ */
/* No image zoom on any card - the whole card is the hover target now. */
.zmit .zmit-services-grid .zmit-svc-card:hover .zmit-svc-media img { transform: none; }
.zmit .zmit-svc-more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 700;
    line-height: 23.1px;
    color: #000;
    text-decoration: none;
}
.zmit .zmit-svc-more svg { flex: 0 0 auto; }
/* Hidden at rest but KEEPS ITS BOX (visibility, never display:none, so the
   card cannot grow on hover); margin-top:auto pins it to the card foot. The
   16px side inset matches this page's h4/ul text inset (the card has no
   padding of its own). */
.zmit-services-grid .zmit-svc-card .zmit-svc-more { visibility: hidden; margin: auto 16px 18px; padding-top: 4px; }
/* The CTA now supplies the linked card's bottom spacing, so trim the list's own
   20px bottom pad there - keeps the reserved CTA row from growing the grid row
   more than needed (measured +55px at 1440 instead of +69px). */
.zmit-services-grid .zmit-svc-card.has-link ul { padding-bottom: 6px; }
.zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-more,
.zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-more { visibility: visible; }
.zmit-services-grid .zmit-svc-card { transition: background-color .3s, border-color .3s, transform .3s; }
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within { background: #d5e0f3; border-color: #0161ff; transform: translate(-10px, -10px); }
/* Respect reduced-motion: keep the fill/border/CTA reveal, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: none; }
}
/* Unlinked cards are not interactive - drop the shared cursor:pointer. */
.zmit-services-grid .zmit-svc-card.no-cta { cursor: default; }

/* In-text link in the "why" cards (healthcare): the shared .zmit a rule
   inherits the grey body colour, which would hide the link. House in-text
   link blue (#0154db, 5.6:1+ on the light fill), colour only - no underline,
   per the site-wide internal-link rule. */
.zmit .zmit-why-card p a { color: #0154db; }