@charset "UTF-8";

/* Case archive and editorial detail. Facts, existing photo mappings and scripts stay intact. */
body.zm-cases-page { background: #fff; color: #272c30; }
body.zm-cases-page main { display: block; }
body.zm-cases-page :where(main h1, main h2, main h3, main p, main figure) { margin: 0; }
body.zm-cases-page :where(main h1, main h2, main h3) { color: #272c30; font-weight: 400; letter-spacing: -.025em; }
body.zm-cases-page :where(main a, main button, main input):focus-visible { outline: 2px solid #ae2938; outline-offset: 5px; }
body.zm-cases-page main :where(img, table, input) { max-width: 100%; }
body.zm-cases-page .cases-breadcrumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; color: #626c72; font-size: 13px; line-height: 1.8; }
body.zm-cases-page .cases-breadcrumb a:hover { color: #ae2938; }
body.zm-cases-page .cases-breadcrumb > span[aria-hidden] { color: #929ba1; }

/* The opening material image is a brand image, separate from all project photo records. */
body.zm-cases-page .case-center-main { padding: 0; }
body.zm-cases-page .cases-hero { position: relative; isolation: isolate; min-height: 480px; overflow: hidden; background: #f3f5f6; }
body.zm-cases-page .cases-hero-media { position: absolute; z-index: -2; inset: 0; }
body.zm-cases-page .cases-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
body.zm-cases-page .cases-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg,rgba(244,246,247,.98),rgba(244,246,247,.94) 29%,rgba(244,246,247,.28) 60%,rgba(244,246,247,0) 80%); }
body.zm-cases-page .cases-hero-copy { padding-block: 55px 65px; }
body.zm-cases-page .cases-hero h1 { margin-top: 32px; font-size: clamp(42px,4vw,58px); line-height: 1.35; }
body.zm-cases-page .cases-hero-subtitle { margin-top: 18px; color: #465158; font-size: 25px; line-height: 1.6; }
body.zm-cases-page .case-intro { max-width: 430px; margin-top: 25px; color: #53616a; font-size: 14px; line-height: 2; }
body.zm-cases-page .cases-archive { padding-block: 88px 96px; }
body.zm-cases-page .case-section-head { display: flex; align-items: end; justify-content: space-between; gap: 55px; margin: 0 0 42px; }
body.zm-cases-page .case-section-head h2 { font-size: 34px; line-height: 1.5; flex-shrink: 0; }
body.zm-cases-page .case-section-head p { max-width: 540px; font-size: 14px; line-height: 1.9; color: #626c72; }
body.zm-cases-page .case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px 42px; }
body.zm-cases-page .case-card { display: block; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #272c30; overflow: visible; text-decoration: none; }
body.zm-cases-page .case-card:hover { transform: none; box-shadow: none; }
body.zm-cases-page .case-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #f3f5f6; }
body.zm-cases-page .case-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; transition: none; }
body.zm-cases-page .case-card:hover .case-card-media img { transform: none; }
body.zm-cases-page .case-card-body { padding: 23px 0 0; }
body.zm-cases-page .case-card-body h3 { margin: 0; max-width: 28em; color: #272c30; font-size: 22px; line-height: 1.65; font-weight: 400; }
body.zm-cases-page .case-card-location { margin-top: 12px; color: #626c72; font-size: 14px; line-height: 1.8; }
body.zm-cases-page .case-card-type { margin-top: 5px; color: #626c72; font-size: 13px; line-height: 1.8; letter-spacing: 0; font-weight: 400; }
body.zm-cases-page .case-card-products { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 10px; color: #465158; font-size: 13px; line-height: 1.8; }
body.zm-cases-page .case-card-products span { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
body.zm-cases-page .case-card-products span + span::before { content: "/"; padding-inline: 9px; color: #929ba1; }
body.zm-cases-page .case-card-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 23px; padding-top: 15px; border-top: 1px solid #d9dfe2; color: #465158; font-size: 13px; font-weight: 400; }
body.zm-cases-page .case-card-link svg { stroke-width: 1.5; }
body.zm-cases-page .case-card:hover h3,
body.zm-cases-page .case-card:hover .case-card-link { color: #ae2938; }
body.zm-cases-page .case-card:first-child { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); grid-column: 1/-1; align-items: center; gap: 55px; padding-bottom: 8px; }
body.zm-cases-page .case-card:first-child .case-card-body { padding: 0; }
body.zm-cases-page .case-card:first-child h3 { font-size: 29px; line-height: 1.6; }
body.zm-cases-page .case-card:first-child .case-card-link { margin-top: 35px; }
body.zm-cases-page .case-card:last-child { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); grid-column: 1/-1; align-items: center; gap: 55px; padding-top: 10px; }
body.zm-cases-page .case-card:last-child .case-card-media { grid-column: 2; grid-row: 1; }
body.zm-cases-page .case-card:last-child .case-card-body { grid-column: 1; grid-row: 1; padding: 0; }
body.zm-cases-page .case-card:last-child h3 { font-size: 27px; line-height: 1.6; }
body.zm-cases-page .cases-consult { padding-block: 64px; background: #f3f5f6; }
body.zm-cases-page .cases-consult-inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
body.zm-cases-page .cases-consult h2 { font-size: 27px; line-height: 1.5; }
body.zm-cases-page .cases-consult p { max-width: 640px; margin-top: 15px; color: #626c72; font-size: 14px; line-height: 1.9; }
body.zm-cases-page .cases-consult .mh-actions { flex-shrink: 0; margin: 0; }

/* Editorial case reading: one flow from image and overview to engineering record. */
body.zm-cases-page .case-detail-wrap { padding-block: 36px 80px; }
body.zm-cases-page .case-crumb-row { display: flex; justify-content: space-between; align-items: start; gap: 35px; }
body.zm-cases-page .case-crumb-row .cases-breadcrumb { max-width: 980px; font-size: 12px; }
body.zm-cases-page .case-back-btn { flex-shrink: 0; display: inline-block; padding: 0 0 5px; border: 0; border-bottom: 1px solid #c4ccd1; border-radius: 0; color: #626c72; background: transparent; font-size: 12px; line-height: 1.7; }
body.zm-cases-page .case-back-btn:hover { color: #ae2938; transform: none; }
body.zm-cases-page .case-editorial-heading { max-width: 1000px; padding-block: 47px 39px; }
body.zm-cases-page .case-title { font-size: clamp(34px,3.4vw,48px); font-weight: 400; line-height: 1.55; letter-spacing: -.025em; }
body.zm-cases-page .case-category { margin-top: 22px; color: #626c72; font-size: 14px; line-height: 1.8; }
body.zm-cases-page .case-photo-box { margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
body.zm-cases-page .case-photo-box img { width: 100%; height: auto; max-height: 680px; object-fit: cover; background: #f3f5f6; }
body.zm-cases-page .case-photo-caption { padding: 15px 0 0; color: #626c72; background: transparent; font-size: 12px; line-height: 1.9; text-align: left; }
body.zm-cases-page .case-overview { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 55px; padding-block: 50px; margin-top: 25px; border-bottom: 1px solid #d9dfe2; }
body.zm-cases-page .case-overview h2 { font-size: 26px; line-height: 1.6; }
body.zm-cases-page .case-meta-row { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 0; padding: 0; color: #465158; font-size: 14px; line-height: 1.9; }
body.zm-cases-page .case-meta-item strong { display: inline; color: #626c72; font-weight: 400; }
body.zm-cases-page .case-reading-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 55px; padding-top: 60px; }
body.zm-cases-page .case-outline { display: flex; flex-direction: column; align-items: start; gap: 15px; align-self: start; position: sticky; top: 128px; padding-top: 7px; color: #626c72; font-size: 14px; }
body.zm-cases-page .case-outline a { padding-block: 2px; border-bottom: 1px solid transparent; }
body.zm-cases-page .case-outline a:hover { color: #ae2938; border-color: #c4ccd1; }
body.zm-cases-page .case-main-body { min-width: 0; }
body.zm-cases-page .case-reading-section + .case-reading-section { margin-top: 65px; }
body.zm-cases-page .case-table-title { margin: 0 0 25px; padding: 0; border: 0; color: #272c30; font-size: 26px; line-height: 1.6; }
body.zm-cases-page .case-table-title::before { display: none; }
body.zm-cases-page .case-table { width: 100%; border: 0; border-collapse: collapse; border-radius: 0; overflow: visible; font-size: 15px; line-height: 1.85; }
body.zm-cases-page .case-table th,
body.zm-cases-page .case-table td { padding: 19px 22px; border: 0; border-bottom: 1px solid #d9dfe2; text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
body.zm-cases-page .case-table th { width: 28%; min-width: 115px; color: #626c72; background: #f3f5f6; }
body.zm-cases-page .case-table td { color: #272c30; background: #fff; }
body.zm-cases-page .case-table tr:first-child :is(th,td) { border-top: 1px solid #d9dfe2; }
body.zm-cases-page .case-text-article { color: #465158; font-size: 16px; line-height: 2; }
body.zm-cases-page .case-text-article h3 { margin: 36px 0 15px; color: #272c30; font-size: 20px; line-height: 1.75; font-weight: 500; }
body.zm-cases-page .case-text-article h3:first-child { margin-top: 0; }
body.zm-cases-page .case-text-article p { margin-bottom: 22px; }
body.zm-cases-page .case-text-article strong { color: #272c30; font-weight: 500; }
body.zm-cases-page .case-support { margin-top: 75px; padding-top: 55px; border-top: 1px solid #d9dfe2; }
body.zm-cases-page .case-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
body.zm-cases-page .case-support h2 { margin-bottom: 26px; color: #272c30; font-size: 25px; line-height: 1.65; }
body.zm-cases-page .case-related-product { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 23px; color: #272c30; }
body.zm-cases-page .case-related-product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f3f5f6; }
body.zm-cases-page .related-prod-title { color: #272c30; font-size: 18px; line-height: 1.75; font-weight: 400; }
body.zm-cases-page .related-prod-desc { margin-top: 12px; color: #626c72; font-size: 13px; line-height: 1.9; }
body.zm-cases-page .related-prod-btn { display: inline-block; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid #c4ccd1; color: #465158; font-size: 13px; }
body.zm-cases-page .case-budget-block > p { margin: -8px 0 25px; color: #626c72; font-size: 13px; line-height: 1.9; }
body.zm-cases-page .case-budget-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
body.zm-cases-page .case-budget-form label { display: block; margin-bottom: 8px; color: #465158; font-size: 13px; }
body.zm-cases-page .rfq-widget-input { width: 100%; height: 46px; padding: 10px 12px; border: 1px solid #c4ccd1; border-radius: 0; background: #fff; color: #272c30; font-size: 16px; line-height: 1.5; }
body.zm-cases-page .rfq-widget-input::placeholder { color: #626c72; opacity: 1; }
body.zm-cases-page .rfq-widget-input[readonly] { height: auto; min-height: 46px; color: #626c72; background: #f3f5f6; text-overflow: ellipsis; }
body.zm-cases-page .case-form-wide { grid-column: 1/-1; }
body.zm-cases-page button.case-form-wide { justify-self: start; }
body.zm-cases-page .case-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 52px; padding: 35px 0 0; border-top: 1px solid #d9dfe2; }
body.zm-cases-page .case-delivery h2 { margin: 0; }
body.zm-cases-page .case-delivery ul { display: grid; gap: 9px; margin: 0; padding-left: 18px; color: #626c72; font-size: 13px; line-height: 1.9; list-style: disc; }

@media (max-width:1100px) {
  body.zm-cases-page .case-grid { gap: 52px 30px; }
  body.zm-cases-page .case-card:first-child,
  body.zm-cases-page .case-card:last-child { gap: 35px; }
  body.zm-cases-page .case-card:first-child h3,
  body.zm-cases-page .case-card:last-child h3 { font-size: 25px; }
  body.zm-cases-page .cases-consult-inner { flex-direction: column; align-items: start; gap: 28px; }
  body.zm-cases-page .case-overview,
  body.zm-cases-page .case-reading-layout { grid-template-columns: 170px minmax(0,1fr); gap: 35px; }
  body.zm-cases-page .case-support-grid,
  body.zm-cases-page .case-delivery { gap: 40px; }
}
@media (max-width:760px) {
  body.zm-cases-page .cases-hero { padding-bottom: 270px; }
  body.zm-cases-page .cases-hero-media { top: auto; height: 310px; }
  body.zm-cases-page .cases-hero-media img { object-position: 65% 50%; }
  body.zm-cases-page .cases-hero::before { background: linear-gradient(180deg,#f3f5f6 0%,#f3f5f6 48%,rgba(243,245,246,0) 74%); }
  body.zm-cases-page .cases-hero-copy { padding-block: 35px 25px; }
  body.zm-cases-page .cases-hero h1 { margin-top: 25px; font-size: 38px; }
  body.zm-cases-page .cases-hero-subtitle { margin-top: 13px; font-size: 22px; }
  body.zm-cases-page .case-intro { max-width: 430px; margin-top: 19px; font-size: 13px; }
  body.zm-cases-page .cases-archive { padding-block: 56px 62px; }
  body.zm-cases-page .case-section-head { display: block; margin-bottom: 30px; }
  body.zm-cases-page .case-section-head h2 { font-size: 29px; }
  body.zm-cases-page .case-section-head p { margin-top: 16px; font-size: 13px; }
  body.zm-cases-page .case-grid { display: grid; grid-template-columns: 1fr; gap: 43px; }
  body.zm-cases-page .case-card:first-child,
  body.zm-cases-page .case-card:last-child { display: block; padding: 0; }
  body.zm-cases-page .case-card:first-child .case-card-body,
  body.zm-cases-page .case-card:last-child .case-card-body,
  body.zm-cases-page .case-card-body { padding-top: 20px; }
  body.zm-cases-page .case-card:first-child h3,
  body.zm-cases-page .case-card:last-child h3,
  body.zm-cases-page .case-card-body h3 { font-size: 21px; }
  body.zm-cases-page .case-card:first-child .case-card-link,
  body.zm-cases-page .case-card-link { margin-top: 20px; }
  body.zm-cases-page .cases-consult { padding-block: 43px; }
  body.zm-cases-page .cases-consult h2 { font-size: 24px; }
  body.zm-cases-page .cases-consult p { font-size: 13px; }
  body.zm-cases-page .cases-consult .mh-actions { flex-wrap: wrap; gap: 20px; }
  body.zm-cases-page .case-detail-wrap { padding-block: 24px 55px; }
  body.zm-cases-page .case-crumb-row { display: block; }
  body.zm-cases-page .case-back-btn { margin-top: 15px; }
  body.zm-cases-page .case-editorial-heading { padding-block: 29px 28px; }
  body.zm-cases-page .case-title { font-size: clamp(28px,7.6vw,36px); line-height: 1.6; }
  body.zm-cases-page .case-category { margin-top: 18px; font-size: 12px; }
  body.zm-cases-page .case-photo-box img { max-height: none; }
  body.zm-cases-page .case-photo-caption { font-size: 11px; }
  body.zm-cases-page .case-overview { grid-template-columns: 1fr; gap: 22px; padding-block: 33px; margin-top: 15px; }
  body.zm-cases-page .case-overview h2,
  body.zm-cases-page .case-table-title,
  body.zm-cases-page .case-support h2 { font-size: 23px; }
  body.zm-cases-page .case-meta-row { gap: 14px; font-size: 13px; }
  body.zm-cases-page .case-reading-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 30px; }
  body.zm-cases-page .case-outline { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px 25px; padding: 0 0 19px; border-bottom: 1px solid #d9dfe2; font-size: 13px; }
  body.zm-cases-page .case-reading-section + .case-reading-section { margin-top: 42px; }
  body.zm-cases-page .case-table-title { margin-bottom: 22px; }
  body.zm-cases-page .case-table { font-size: 13px; }
  body.zm-cases-page .case-table th,
  body.zm-cases-page .case-table td { padding: 15px 12px; }
  body.zm-cases-page .case-table th { min-width: 90px; width: 31%; }
  body.zm-cases-page .case-text-article { font-size: 15px; line-height: 2; }
  body.zm-cases-page .case-text-article h3 { margin-top: 28px; font-size: 18px; }
  body.zm-cases-page .case-support { margin-top: 45px; padding-top: 36px; }
  body.zm-cases-page .case-support-grid,
  body.zm-cases-page .case-delivery { grid-template-columns: 1fr; gap: 38px; }
  body.zm-cases-page .case-related-product { gap: 20px; }
  body.zm-cases-page .case-delivery { margin-top: 37px; padding-top: 29px; gap: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  body.zm-cases-page { scroll-behavior: auto; }
}

/* Only the archive joins its material hero and case list over one backdrop.
   Project images stay solid; captions get a readable white surface. */
body.zm-cases-page .case-center-main .cases-material-flow { --cases-hero-top: 93px; }
body.zm-cases-page .case-center-main .cases-archive-surface { background: #fff; }
body.zm-cases-page .case-center-main .cases-hero-media { pointer-events: none; }
body.zm-cases-page .case-center-main .cases-hero-media :is(img, video) { object-position: 65% 50%; }

@supports (clip-path: inset(0)) {
  @media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    body.zm-cases-page .case-center-main .cases-material-flow { position: relative; isolation: isolate; clip-path: inset(calc(0px - var(--cases-hero-top)) 0 0); }
    body.zm-cases-page .case-center-main .cases-material-flow > .cases-hero { isolation: auto; overflow: visible; background: transparent; }
    body.zm-cases-page .case-center-main .cases-hero > .cases-hero-media { position: fixed; inset: 0 0 auto; height: max(calc(480px + var(--cases-hero-top)), 100lvh); }
    body.zm-cases-page .case-center-main .cases-archive-surface { position: relative; background: rgba(247,249,250,.68); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-top: 1px solid rgba(255,255,255,.7); }
    body.zm-cases-page .case-center-main .case-section-head { padding: 24px; background: rgba(255,255,255,.88); }
    body.zm-cases-page .case-center-main .case-section-head p { color: #465158; }
    body.zm-cases-page .case-center-main .cases-material-flow .case-card-body { padding: 23px 24px 24px; background: rgba(255,255,255,.94); }
    body.zm-cases-page .case-center-main .case-card-media { isolation: isolate; }
  }
}

@media (min-width: 761px) and (max-width: 1200px) {
  body.zm-cases-page .case-center-main .cases-material-flow { --cases-hero-top: 87px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  body.zm-cases-page .case-center-main .cases-material-flow { --cases-hero-top: 81px; }
}