/* ============================================================
   Homepage (https://www.zazz.io/) - home-preview.php
   Scope: .zmit.zhm. Loaded after it-managed-services-zazz.css (which owns the
   shared header restyle, the .z-container box and the footer).
   Numbers in comments are live's, measured at 1440 (1425 content width,
   15px scrollbar) with each band scrolled into view, 2026-09-28.
   Content box: the house .z-container (1340 at x=43) - live runs 1365 at x=30
   on some bands; per CLAUDE.md the house width wins.
   Do not name css/home-page.css here - that is a SHARED legacy sheet.
   ============================================================ */

.zhm { font-family: "Poppins", sans-serif; color: #141414; padding-top: 0; }
.zhm-body .zmit.zhm { padding-top: 0; }   /* the hero sits UNDER the header, as live */
/* body{overflow-x:hidden} from a legacy sheet makes BODY a scroll container, which
   silently disables position:sticky on the Why Zazz cards. clip crops the same
   without creating one. Page-scoped. */
html body.zhm-body { overflow-x: clip !important; overflow-y: visible !important; }
.zhm :where(#main) p { margin: 0; }   /* :where keeps (0,1,1) - footer keeps its own spacing */
.zhm :where(#main) :is(h1, h2, h3, h4) { margin: 0; letter-spacing: 0; }
.zhm a { color: inherit; }
.zhm .zhm-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- header: transparent over the hero until scrolled (live's WP header).
   The shared sheet forces a white fixed bar with !important on every page,
   so this override is scoped to this page's body class only. ---- */
@media (min-width: 1000px) {
    .zhm-body .custom-navbar:not(.fixed) {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
    }
    .zhm-body .custom-navbar:not(.fixed) .nav-link { color: #fff !important; }
    .zhm-body .custom-navbar:not(.fixed) .navbar-brand {
        background-image: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/18072504/Zazz-Logo-white.svg');
    }
    .zhm-body .custom-navbar:not(.fixed) .header-d-icon,
    .zhm-body .custom-navbar:not(.fixed) .nav-link svg,
    .zhm-body .custom-navbar:not(.fixed) .nav-link svg path { stroke: #fff !important; }
    .zhm-body .custom-navbar:not(.fixed) .header-button { background: #fff !important; color: #000 !important; }
    .zhm-body .custom-navbar.fixed .header-button { background: #000 !important; color: #fff !important; }
}

@media (max-width: 999px) {
    .zhm-body .custom-mobile-navbar .mobile-header:not(.headerfixed) {
        background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, .5);
    }
    .zhm-body .custom-mobile-navbar .mobile-header:not(.headerfixed) img.logo {
        background-image: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/18072504/Zazz-Logo-white.svg');
    }
    .zhm-body .custom-mobile-navbar .mobile-header:not(.headerfixed) .hamburger-icon svg path { stroke: #fff; }
    .zhm-body .custom-mobile-navbar .mobile-header:not(.headerfixed) .hamburger-icon { border-color: transparent !important; }
    .zhm-body .custom-mobile-navbar .mobile-header:not(.headerfixed) .header-button { background: #fff !important; color: #000 !important; }
}

/* ---- shared bits ---- */
.zhm .zhm-eyebrow {
    display: block; width: fit-content; font-size: 16px; line-height: 20.8px; font-weight: 400;
    text-transform: uppercase; color: #000; padding-bottom: 1px;
    border-bottom: 1px solid #000; margin-bottom: 20px;
}
.zhm .zhm-h3-big { font-size: 51px; line-height: 61px; font-weight: 600; color: #141414; }
.zhm .zhm-lead { font-size: 16px; line-height: 28px; color: #727272; }
.zhm .zhm-head-row { display: flex; gap: 20px; align-items: flex-start; }
.zhm .zhm-head-row .zhm-h3-big { flex: 0 0 720px; max-width: 720px; }
.zhm .zhm-head-row .zhm-lead { flex: 0 1 583px; margin-bottom: 26px; }
.zhm .zhm-head-row--end { align-items: flex-end; gap: 63px; }
.zhm .zhm-head-row--end .zhm-h3-big { flex-basis: 725px; max-width: 725px; }
.zhm .zhm-head-row--end .zhm-lead { flex-basis: 587px; margin-bottom: 0; }

.zhm .zhm-link-u {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 16px; line-height: 16px; font-weight: 500; color: #000;
    padding-bottom: 10px; border-bottom: 1px solid #000;
}
.zhm .zhm-link-plain { font-size: 14px; line-height: 20px; font-weight: 500; color: #000; }
/* Owner 2026-09-29: the underlined links (Know More About Us, Explore More Insights,
   Explore Our Delivery Framework) keep their black rest state on hover - no blue. */
/* "See How We Engineer at Scale ->" / "Learn About Our Agile Approach ->": always
   underlined black, no blue on hover (owner screenshots 2026-09-29). */
.zhm .zhm-link-plain, .zhm .zhm-link-plain:hover { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.zhm .zhm-btn-dark, .zhm .zhm-btn-line, .zhm .zhm-btn-white, .zhm .zhm-btn-blue {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    font-weight: 500; transition: background-color .3s, color .3s;
}
.zhm .zhm-btn-dark { background: #000; color: #fff !important; font-size: 16px; line-height: 16px; padding: 13px 35px; }
/* Owner 2026-09-29: the dark, outline and white CTAs have NO hover change (they
   used to turn blue / fill black / invert). Only the careers blue button reacts. */
.zhm .zhm-btn-line { border: 1px solid #000; color: #000; font-size: 16px; line-height: 16px; padding: 12px 26px; gap: 16px; }
.zhm .zhm-btn-white { background: #fff; color: #000 !important; font-size: 14px; line-height: 14px; padding: 16px 30px; }
.zhm .zhm-btn-blue { background: #0161ff; border: 1px solid #0161ff; color: #fff !important; font-size: 14px; line-height: 14px; padding: 13px 35px; gap: 20px; }
/* hover = white fill, blue text + chevron, blue hairline (owner screenshot) */
.zhm .zhm-btn-blue:hover, .zhm .zhm-btn-blue:focus-visible { background: #fff; border-color: #0161ff; color: #0161ff !important; }

/* ============ HERO (334450cb): 100vh slider, headline OWNER deviation ============ */
.zhm .zhm-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #000; color: #fff; }
.zhm .zhm-slider, .zhm .zhm-slides { height: 100%; }
.zhm .zhm-slides { display: flex; will-change: transform; }
.zhm .zhm-slide { position: relative; flex: 0 0 100%; height: 100%; display: flex; align-items: center; }
.zhm .zhm-slide-bg {
    position: absolute; inset: 0; background-color: #833ca3;
    background-size: cover; background-position: center;
}
.zhm .zhm-slide-inner {
    position: relative; width: 100%;
    /* live: inner padding 61/51/51 full-bleed, contents box max 1440 centred (x233 at 1920) */
    padding: 61px max(51px, calc((100% - 1440px) / 2)) 51px;
}
.zhm .zhm-slide-pill {
    display: inline-block; vertical-align: middle; font-size: 16px; line-height: 24px; font-weight: 500;
    background: rgba(255, 255, 255, .12); padding: 4px 12px; border-radius: 6.67px;
}
/* live 53/58.3 (owner 2026-09-29: match live here, not the 42/52 LP cap) */
.zhm .zhm-slide-title { font-size: 53px; line-height: 58.3px; font-weight: 600; color: #fff; margin: 0 0 11px; }
.zhm .zhm-slide-text { max-width: 40%;                      /* live 40% of contents: 576@1920 529@1440 363@1024 */
    font-size: 16px; line-height: 24px; font-weight: 500; margin: 0 0 30px; }
.zhm .zhm-slide-btn {
    display: inline-block; font-size: 16px; line-height: 16px; font-weight: 500; color: #fff;
    padding: 13px 35px; border: 2px solid #fff; transition: background-color .3s, color .3s;
}
.zhm .zhm-slide-btn:hover, .zhm .zhm-slide-btn:focus-visible { background: #fff; color: #000; }

.zhm .zhm-hero-video {                                  /* live: 570x187 black, bottom-right, 40% */
    position: absolute; right: 0; bottom: 0; width: 40%; z-index: 2;
    background: #000; padding: 50px; display: flex; gap: 20px; align-items: flex-start;
}
.zhm .zhm-hero-play { flex: 0 0 72px; display: block; line-height: 0; min-height: 87px; }   /* live icon widget 69x87 -> card 187 */
.zhm .zhm-hero-video p { font-size: 16px; line-height: 24px; color: #fff; max-width: 381px; }

/* ============ SERVICES (4251ce90) ============ */
.zhm .zhm-svc { position: relative; overflow: hidden; padding: 100px 0 110px; scroll-margin-top: 100px; }
.zhm .zhm-svc-grid { display: grid; grid-template-columns: minmax(0, 806px) 429px; justify-content: space-between; }
.zhm .zhm-svc-left { position: relative; }
.zhm .zhm-svc-left::before {                              /* live tint rgba(1,141,255,.07) to x=926 */
    content: ""; position: absolute; z-index: -1;
    top: -100px; bottom: -110px; left: -100vw; right: -40px;
    background: rgba(1, 141, 255, .07);
}
.zhm .zhm-svc { isolation: isolate; }
.zhm .zhm-svc-h2 { font-size: 29.54px; line-height: 38.4px; font-weight: 500; letter-spacing: -.1px; color: #141414; margin-top: 10px; }
.zhm .zhm-svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; margin-top: 40px; grid-auto-rows: 1fr; }   /* live: both rows 577 */
.zhm .zhm-svc-card { background: #fff; padding: 20px; display: flex; flex-direction: column; }
.zhm .zhm-svc-icon { display: block; width: 55px; height: 55px; margin-bottom: 20px; }
.zhm .zhm-svc-icon svg { width: 55px; height: 55px; display: block; }
.zhm .zhm-svc-card h3 { font-size: 18px; line-height: 28px; font-weight: 600; color: #14142b; margin: 0 0 20px; }
.zhm .zhm-svc-card p { font-size: 13px; line-height: 21px; color: #14142b; }
.zhm .zhm-svc-more {
    margin-top: auto; align-self: flex-start; padding-top: 25px;   /* pinned to card bottom; live widget 20 gap + 5 */
    display: inline-flex; align-items: center; gap: 16px; max-width: 100%;
    font-size: 16px; line-height: 16px; font-weight: 500; color: #141414; text-align: center;
}
.zhm .zhm-svc-more span { flex: 1 1 auto; }
.zhm .zhm-svc-more svg { flex: 0 0 14px; }
/* Card hover, measured on the WordPress original with a real pointer (2026-09-29):
   fill #fff -> #cde9ff, a 1px #0161ff edge, the card rises 15px (live: margin-top
   -15px, bottom edge stays put), icon + CTA arrow go #0161ff, all text stays dark.
   The edge is an inset shadow, not a border, so nothing inside shifts by 1px. */
.zhm .zhm-svc-card { transition: background-color .3s, box-shadow .3s, margin-top .3s; }
.zhm .zhm-svc-card:hover, .zhm .zhm-svc-card:focus-within {
    background: #cde9ff; box-shadow: inset 0 0 0 1px #0161ff; margin-top: -15px;
}
.zhm .zhm-svc-card:hover .zhm-svc-icon [fill="black"],
.zhm .zhm-svc-card:focus-within .zhm-svc-icon [fill="black"],
.zhm .zhm-svc-card:hover .zhm-svc-more svg,
.zhm .zhm-svc-card:focus-within .zhm-svc-more svg { color: #0161ff; fill: #0161ff; }
.zhm .zhm-svc-more svg path { fill: currentColor; }
/* Owner 2026-09-29: the WHOLE card is clickable (hand cursor anywhere on it). The
   "Explore" CTA's ::after is stretched over the card, so a click on blank space or
   the copy follows the CTA link; the icon + title links sit above it and keep their
   own targets (they differ from the CTA on 3 cards, as live). No markup added. */
.zhm .zhm-svc-card { position: relative; cursor: pointer; }
.zhm .zhm-svc-more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zhm .zhm-svc-icon, .zhm .zhm-svc-card h3 a { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .zhm .zhm-svc-card { transition: none; } }
.zhm .zhm-svc-h3 { font-size: 36.55px; line-height: 47.52px; font-weight: 600; color: #141414; margin: 22px 0 20px; }
.zhm .zhm-svc-copy p { font-size: 16px; line-height: 26.4px; color: #727272; }
.zhm .zhm-svc-img { width: 100%; height: 310px; object-fit: cover; margin-top: 20px; }
.zhm .zhm-svc-right .zhm-btn-dark { margin-top: 30px; }

/* ============ CUSTOMER STORIES (2d7848c) - band 906 ============ */
.zhm .zhm-stories { padding: 30px 0; }
.zhm .zhm-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.zhm .zhm-story { background: #eff0f7; border-radius: 5px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 20px; }
.zhm .zhm-story-img { width: 100%; height: 250px; object-fit: cover; border-radius: 5px 5px 0 0; }
.zhm .zhm-story-logo { align-self: flex-start; width: auto; height: 68px; max-width: calc(100% - 50px); object-fit: contain; object-position: left center; margin: 0 25px; }
.zhm .zhm-story h4 { font-size: 18px; line-height: 25.2px; font-weight: 700; color: #14142b; padding: 0 25px; }
.zhm .zhm-story p { font-size: 14px; line-height: 23.1px; color: #14142b; padding: 0 30px 30px; }
.zhm .zhm-story h4 a:hover { color: #0161ff; }

/* ============ WHY ZAZZ (1fb01f15): sticky stacking cards ============ */
.zhm .zhm-why { padding: 0 0 50px; }
.zhm .zhm-why-stack { margin-top: 80px; }
.zhm .zhm-why-card {
    position: sticky; top: 0;                        /* live: elementor sticky, offset 0 */
    display: grid; grid-template-columns: 51.71% 48.29%;   /* 711 / 664 */
    min-height: 518px;
}
.zhm .zhm-why-card--1 { min-height: 609px; }
.zhm .zhm-why-card--4 { min-height: 620px; }
.zhm .zhm-why-copy { padding: 60px 30px 60px 60px; }
.zhm .zhm-why-card--1 .zhm-why-copy { background: #eaf4fe; }
.zhm .zhm-why-card--2 .zhm-why-copy { background: #d7ecfe; }
.zhm .zhm-why-card--3 .zhm-why-copy { background: #cbe2fa; }
.zhm .zhm-why-card--4 .zhm-why-copy { background: #bfdbf7; }
.zhm .zhm-why-key { font-size: 12px; line-height: 12px; letter-spacing: 3.6px; text-transform: uppercase; color: #121212; margin-bottom: 39px; }
.zhm .zhm-why-body { padding-left: 15px; }
.zhm .zhm-why-title { font-size: 27px; line-height: 35px; font-weight: 500; color: #121212; margin-bottom: 12px; }
.zhm .zhm-why-desc { font-size: 16px; line-height: 28px; font-weight: 500; color: #000; margin-bottom: 26px; }
.zhm .zhm-why-body ul { list-style: disc; padding-left: 20px; margin: 0; }
.zhm .zhm-why-body li { font-size: 16px; line-height: 28px; color: #000; }
.zhm .zhm-why-body .zhm-btn-line { margin-top: 36px; }
.zhm .zhm-why-card--1 .zhm-why-body ul { margin-top: 37px; }          /* live's empty <p> spacers */
.zhm .zhm-why-card--1 .zhm-why-body .zhm-btn-line { margin-top: 90px; }
.zhm .zhm-why-media { background-size: 100% auto; background-position: 50% 0; background-repeat: no-repeat; background-color: #d9dee6; }

/* ============ STATEMENT (661352b1) - band 436 ============ */
.zhm .zhm-about { padding: 65px 0; text-align: center; }
.zhm .zhm-about-text { font-size: 23px; line-height: 56px; font-weight: 500; color: #111; padding: 0 42px; }
.zhm .zhm-about-text span { color: #727272; }
.zhm .zhm-about .zhm-link-u { margin-top: 55px; }

/* ============ PHOTO (322a168e) - 900, fixed attachment ============ */
.zhm .zhm-photo { height: 900px; background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }

/* ============ WHAT SETS US APART (b2848fe) - band 493 ============ */
.zhm .zhm-apart { background: #d7e7e3; }
.zhm .zhm-apart-grid { display: grid; grid-template-columns: 392px 338px minmax(0, 575px); column-gap: 0; }   /* panel 566 + 9 gap */
.zhm .zhm-apart-h2 { font-size: 51px; line-height: 66.3px; font-weight: 600; color: #141414; margin-top: 40px; }
.zhm .zhm-tabs { display: flex; flex-direction: column; justify-content: center; }
.zhm .zhm-tab {
    display: flex; align-items: center; height: 164px; padding: 50px 15px; text-align: left;
    background: transparent; border: 1px solid #aeaeae; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .58); cursor: pointer; font-family: inherit; transition: color .3s;
}
.zhm .zhm-tab[aria-selected="true"], .zhm .zhm-tab:hover { color: #000; }
.zhm .zhm-tab-n { font-size: 20px; line-height: 16px; font-weight: 500; }
.zhm .zhm-tab-t { font-size: 24px; line-height: 31.2px; font-weight: 500; padding-left: 30px; }
.zhm .zhm-panels { margin-left: 9px; }
.zhm .zhm-panel { height: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.zhm .zhm-panel[hidden] { display: none; }
.zhm .zhm-stat { font-size: 56px; line-height: 56px; font-weight: 600; color: #000; text-align: left; }   /* owner: count-up, left */
.zhm .zhm-stat-label { font-size: 16px; line-height: 24px; font-weight: 600; color: #000; margin-top: 12px; }
.zhm .zhm-panel-text { font-size: 16px; line-height: 23px; color: #000; margin: 20px 0; }

/* ============ TESTIMONIALS (7047d53f) - band 450 ============ */
.zhm .zhm-testi { padding-top: 60px; text-align: center; }
.zhm .zhm-testi-h2 { font-size: 50px; line-height: 65px; font-weight: 600; color: #141414; }
.zhm .zhm-testi-wrap { position: relative; margin-top: 9px; }
.zhm .zhm-testi-view { overflow: hidden; }
.zhm .zhm-testi-track { display: flex; transition: transform .5s ease; }
.zhm .zhm-testi-slide { flex: 0 0 100%; margin: 0; padding: 35px 23px; }
.zhm .zhm-testi-slide img { width: 40px; height: 40px; margin: 0 auto 25px; }
.zhm .zhm-testi-slide blockquote { margin: 0; font-size: 23px; line-height: 34.5px; font-weight: 500; color: #121212; }
.zhm .zhm-testi-slide figcaption { margin-top: 24px; }
.zhm .zhm-testi-name { display: block; font-size: 18px; line-height: 29.7px; font-weight: 500; color: #000; }
.zhm .zhm-testi-co { display: block; font-size: 14px; line-height: 23.1px; color: #000; }
.zhm .zhm-testi-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; color: #353535; cursor: pointer;
}
.zhm .zhm-testi-prev { left: 14px; }
.zhm .zhm-testi-next { right: 14px; }

/* ============ FEATURED INSIGHTS (5597f0aa) ============ */
.zhm .zhm-ins { margin: 50px 0 100px; }
.zhm .zhm-ins-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.zhm .zhm-ins-h2 { font-size: 43px; line-height: 55.9px; font-weight: 600; color: #141414; }
.zhm .zhm-ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.zhm .zhm-ins-card { position: relative; }
.zhm .zhm-ins-card img { width: 100%; height: 250px; object-fit: cover; }
.zhm .zhm-ins-body { padding: 20px; }
.zhm .zhm-ins-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.zhm .zhm-ins-term { background: #edf4ff; border-radius: 4px; padding: 8px; font-size: 14px; line-height: 18px; font-weight: 500; color: #0161ff; }
.zhm .zhm-ins-date { font-size: 14px; line-height: 23.1px; color: #5e5e5e; }
.zhm .zhm-ins-title { font-size: 24px; line-height: 36px; font-weight: 500; color: #000; margin-top: 20px; }
.zhm .zhm-ins-link { position: absolute; inset: 0; z-index: 1; }
/* Owner 2026-09-29: cards carry live's excerpt (16/26 black, 20 below the title);
   hover tints the text panel #ebf3ff and the title stays black (no blue). */
.zhm .zhm-ins-exc { font-size: 16px; line-height: 26px; color: #000; margin-top: 20px; }
.zhm .zhm-ins-body { transition: background-color .3s; }
.zhm .zhm-ins-card:hover .zhm-ins-body, .zhm .zhm-ins-card:focus-within .zhm-ins-body { background: #ebf3ff; }

/* ============ CAREERS (82bbb3e) - band 663 ============ */
.zhm .zhm-careers { display: grid; grid-template-columns: 1fr 1fr; }
.zhm .zhm-careers-media { background: #d7e7e3; padding-left: 50px; }
.zhm .zhm-careers-media { display: flex; justify-content: flex-end; align-items: flex-start; }
.zhm .zhm-careers-media img { width: 100%; max-width: 750px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }   /* live caps at 750x750, right-aligned (band 750 @1920) */
.zhm .zhm-careers-copy { display: flex; flex-direction: column; }
.zhm .zhm-careers-text { padding: 150px 50px 0; max-width: calc(70% + 30px); }   /* live text 70% of col: 429 @1440, 597 @1920 */
.zhm .zhm-careers-text .zhm-eyebrow { margin-bottom: 20px; }
.zhm .zhm-careers-text h4 { font-size: 24px; line-height: 28.8px; font-weight: 500; color: #141414; margin-top: 10px; }
.zhm .zhm-careers-text p { font-size: 16px; line-height: 28px; color: #727272; margin-top: 10px; }
.zhm .zhm-careers-bar { margin-top: auto; width: 450px; max-width: 100%; height: 90px; background: #000; padding: 24px 24px 24px 100px; }

/* ============ FINAL CTA (a0bac2f) - band 326, figure overhangs 196 ============ */
.zhm .zhm-cta { margin-top: 211px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #5a3fd6; }
.zhm .zhm-cta-row { display: flex; min-height: 326px; }
.zhm .zhm-cta-copy { flex: 0 0 50%; align-self: center; padding: 38px 0; color: #fff; }
.zhm .zhm-cta-copy h2 { font-size: 40px; line-height: 52px; font-weight: 600; color: #fff; }
.zhm .zhm-cta-copy p { font-size: 18px; line-height: 29.7px; color: #fff; margin: 20px 0 21px; }
.zhm .zhm-cta-media { flex: 0 0 50%; display: flex; justify-content: flex-end; align-items: flex-end; margin-top: -196px; }  /* 522 - 326 */
.zhm .zhm-cta-media img { width: 522px; height: 522px; max-width: 80%; object-fit: contain; object-position: bottom; }

/* ============ <= 1200 ============ */
@media (max-width: 1200px) {
    .zhm .zhm-svc-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
    .zhm .zhm-head-row .zhm-h3-big, .zhm .zhm-head-row--end .zhm-h3-big { flex: 1 1 55%; }
    .zhm .zhm-apart-grid { grid-template-columns: 300px 300px minmax(0, 1fr); }
    .zhm .zhm-apart-h2 { font-size: 42px; line-height: 54px; }
}

/* ============ <= 1024 (tablet) ============ */
@media (max-width: 1024px) {
    .zhm .zhm-hero-video { width: 60%; padding: 20px 15px; }
    .zhm .zhm-svc { padding: 60px 0; }
    .zhm .zhm-svc-grid { grid-template-columns: 1fr; gap: 50px; }
    .zhm .zhm-svc-left::before { top: -60px; bottom: -25px; left: -100vw; right: -100vw; }
    .zhm .zhm-svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zhm .zhm-svc-img { height: auto; aspect-ratio: 429 / 310; }
    .zhm .zhm-head-row, .zhm .zhm-head-row--end { flex-direction: column; align-items: flex-start; gap: 20px; }
    .zhm .zhm-head-row .zhm-lead { margin-bottom: 0; }
    .zhm .zhm-h3-big { font-size: 40px; line-height: 50px; }
    .zhm .zhm-story-grid, .zhm .zhm-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zhm .zhm-why-card { grid-template-columns: 1fr; min-height: 0 !important; }
    .zhm .zhm-why-media { min-height: 360px; background-size: cover; }
    .zhm .zhm-photo { height: 600px; background-attachment: scroll; }
    .zhm .zhm-apart { padding: 50px 0; }
    .zhm .zhm-apart-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .zhm .zhm-apart-h2 { grid-column: 1 / -1; margin-top: 0; }
    .zhm .zhm-panels { margin-left: 0; }
    .zhm .zhm-careers { grid-template-columns: 1fr; }
    .zhm .zhm-careers-media { padding: 0 0 32px; }
    .zhm .zhm-careers-media img { max-width: none; }
    .zhm .zhm-careers-text { padding: 40px 20px 30px; max-width: none; }
    .zhm .zhm-careers-bar { width: 100%; padding: 24px 20px; }
    .zhm .zhm-cta { margin-top: 135px; }
}

/* ============ <= 767 (mobile) ============ */
@media (max-width: 767px) {
    .zhm .zhm-hero { height: 100svh; }
    .zhm .zhm-slide-inner { padding: 0 20px; }
    .zhm .zhm-slide-title { font-size: 25px; line-height: 27.5px; }   /* live mobile 25/27.5 */
    .zhm .zhm-slide-text { max-width: none; font-size: 14px; line-height: 27px; }
    .zhm .zhm-slide-btn { padding: 13px 35px; font-size: 14.592px; line-height: 14.592px; }   /* live mobile 267x45 */
    .zhm .zhm-hero-video { width: 100%; padding: 20px 15px; align-items: center; }   /* live 375x112 */
    .zhm .zhm-hero-play { flex-basis: 48px; min-height: 48px; }
    .zhm .zhm-hero-play svg { width: 48px; height: 48px; }
    .zhm .zhm-hero-video p { font-size: 14px; line-height: 21px; }
    .zhm .zhm-svc-cards, .zhm .zhm-story-grid, .zhm .zhm-ins-grid { grid-template-columns: 1fr; }
    .zhm .zhm-svc-h3 { font-size: 28px; line-height: 38px; }
    .zhm .zhm-h3-big { font-size: 31px; line-height: 41px; }
    .zhm .zhm-why-copy { padding: 30px 20px; }
    .zhm .zhm-why-body { padding-left: 0; }
    .zhm .zhm-why-card--1 .zhm-why-body ul { margin-top: 0; }
    .zhm .zhm-why-card--1 .zhm-why-body .zhm-btn-line { margin-top: 36px; }
    .zhm .zhm-why-card { position: relative; }
    .zhm .zhm-why-media { min-height: 260px; }
    .zhm .zhm-about { padding: 50px 0; }
    .zhm .zhm-about-text { font-size: 18px; line-height: 29px; padding: 0; margin: 0 -15px; }   /* live 345 wide at x15 */
    .zhm .zhm-about .zhm-link-u { margin-top: 40px; }
    .zhm .zhm-photo { height: 600px; }   /* live min-height 600 below tablet */
    .zhm .zhm-apart-grid { grid-template-columns: 1fr; }
    .zhm .zhm-apart-h2 { font-size: 31px; line-height: 40.3px; }
    .zhm .zhm-tab { height: auto; padding: 24px 15px; }
    .zhm .zhm-tab-t { font-size: 20px; line-height: 26px; padding-left: 20px; }
    .zhm .zhm-panel { padding: 20px 0; }
    .zhm .zhm-stat { font-size: 44px; line-height: 48px; }
    .zhm .zhm-testi-h2 { font-size: 31px; line-height: 41px; }
    .zhm .zhm-testi-slide { padding: 25px 30px; }
    .zhm .zhm-testi-slide blockquote { font-size: 16px; line-height: 29px; }
    .zhm .zhm-testi-prev { left: 0; }
    .zhm .zhm-testi-next { right: 0; }
    .zhm .zhm-ins-head { flex-direction: column; align-items: flex-start; }
    .zhm .zhm-ins-h2 { font-size: 32px; line-height: 42px; }
    .zhm .zhm-ins-title { font-size: 20px; line-height: 30px; }
    .zhm .zhm-cta { margin-top: 0; padding-top: 50px; }
    .zhm .zhm-cta-row { flex-direction: column; min-height: 0; }
    .zhm .zhm-cta-copy { flex: none; padding: 0; }
    .zhm .zhm-cta-copy h2 { font-size: 30px; line-height: 40px; }
    .zhm .zhm-cta-copy p { font-size: 16px; line-height: 26px; }
    .zhm .zhm-cta-media { flex: none; margin-top: 30px; justify-content: center; }
    .zhm .zhm-cta-media img { width: 100%; max-width: 100%; height: 400px; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
    .zhm .zhm-slides, .zhm .zhm-testi-track { transition: none !important; }
    .zhm .zhm-photo { background-attachment: scroll; }
}

@media (max-width: 1024px) and (min-width: 768px) { .zhm .zhm-slide-title { font-size: 41px; line-height: 45.1px; } }   /* live tablet 41/45.1 */

/* ============ OWNER 2026-09-29: "home page was built with full width" ============
   Services + Why Zazz are full-bleed on live, not in the 1340 box. Live at vw 1425 / 1905:
   services: left panel 65% (926 / 1238) pad 100 40 110 80, cards 255 / 359 wide 20 apart;
             right panel 35% pad 100 35 130; h2 29.54 -> 32px, h3 36.55 -> 40px (both lh 1.3)
   why:      section pad-left 50, no right pad; head lead 42.7% (587 / 792) flush right;
             card copy 50% + 23.5px (711 / 951), photo fills to the viewport edge. */
@media (min-width: 1025px) {
    .zhm .zhm-svc { padding: 0; }
    .zhm .zhm-svc > .z-container.zhm-svc-grid {
        max-width: none; margin: 0; padding: 0; gap: 0;
        grid-template-columns: 65% 35%; justify-content: stretch;
    }
    .zhm .zhm-svc-left { padding: 100px 40px 110px 80px; background: rgba(1, 141, 255, .07); }
    .zhm .zhm-svc-left::before { display: none; }
    .zhm .zhm-svc-right { padding: 100px 35px 130px; }
    .zhm .zhm-svc-h2 { font-size: clamp(29.54px, calc(22.24px + .5125vw), 32px); line-height: 1.3; }
    .zhm .zhm-svc-h3 { font-size: clamp(36.55px, calc(26.31px + .71875vw), 40px); line-height: 1.3; }

    .zhm .zhm-why > .z-container { max-width: none; margin: 0; padding: 0 0 0 50px; }
    .zhm .zhm-head-row--end { justify-content: space-between; }
    .zhm .zhm-head-row--end .zhm-lead { flex: 0 0 42.7%; max-width: none; }
    .zhm .zhm-why-card { grid-template-columns: calc(50% + 23.5px) minmax(0, 1fr); }
    .zhm .zhm-why-card--1 { min-height: 0; }   /* live card 1 is content-height: 609 @1440, 581 @1920 */
    .zhm .zhm-why-card--1 .zhm-why-body .zhm-btn-line { margin-top: 116px; }   /* +26 closes the constant gap at both widths */
}

/* Fix (2026-09-29): below 1024px .zhm-head-row stacks to a column, and the lead's
   desktop flex-basis (583/587px) then becomes a forced HEIGHT, leaving a large
   empty gap below the text (home "Why Zazz" / "Customer Stories"). Reset the
   basis to content height at the same breakpoint; desktop two-column is untouched. */
@media (max-width: 1024px) {
    .zhm .zhm-head-row .zhm-lead,
    .zhm .zhm-head-row--end .zhm-lead { flex-basis: auto; }
}