/* Original photographs, presented as pairs to preserve their different angles. */
.results-page { background: #fff; }
.results-main { color: #052944; padding: 64px 0 48px; }
.results-main h1, .results-main h2 { color: #052944; letter-spacing: -.035em; }
.results-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; padding-bottom: 44px; }
.results-eyebrow, .results-category { font-size: .875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.results-eyebrow { margin: 0 0 12px; }
.results-intro h1 { font-size: clamp(2.1rem, 4.1vw, 3.8rem); font-weight: 700; line-height: 1.12; margin: 0; }
.results-intro h1 span { color: #15979c; font-weight: 400; }
.results-intro > p { margin: 0; max-width: 440px; font-size: 1.0625rem; line-height: 1.75; color: #4a6274; }
.results-case { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 48px; align-items: center; border-top: 1px solid #dbe5e8; padding: 42px 0; }
.results-category { color: #32606b; margin: 0 0 20px; line-height: 1.7; }
.results-category span { display: block; font-size: 1rem; letter-spacing: .05em; color: #647e8b; margin-bottom: 20px; }
.results-case h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.22; margin: 0 0 20px; font-weight: 700; }
.results-case-copy > p:last-child { font-size: 1rem; line-height: 1.8; color: #4a6274; margin: 0; }
.results-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.results-photo { margin: 0; min-width: 0; }
.results-photo-link { position: relative; display: block; overflow: hidden; background: #eef3f4; border-radius: 6px; }
.results-photo-link img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .25s ease; }
.results-photo-link:hover img { transform: scale(1.015); }
.results-photo-label { position: absolute; top: 14px; left: 14px; background: #052944; color: #fff; font-size: .875rem; font-weight: 600; padding: 7px 13px; line-height: 1.5; border-radius: 3px; }
.results-photo--after .results-photo-label { background: #51d3d6; color: #052944; }
.results-photo-zoom { position: absolute; bottom: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #052944; font-size: 1.6rem; font-weight: 400; line-height: 1; box-shadow: 0 2px 16px #0529441a; }
.results-photo figcaption { padding: 10px 0 0; font-size: .875rem; color: #4a6274; line-height: 1.5; }
.results-sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 44px; align-items: center; background: #052944; padding: 44px; border-radius: 8px; margin-top: 24px; }
.results-sample .results-category { color: #51d3d6; }
.results-sample h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); color: #fff; line-height: 1.22; margin: 0 0 24px; }
.results-sample-copy > p { color: #e2edf0; font-size: 1rem; line-height: 1.8; }
.results-sample .results-sample-note { font-size: .875rem; padding-top: 20px; margin: 24px 0 0; border-top: 1px solid #345366; }
.results-sample .results-photo figcaption { color: #e2edf0; }
.results-photo-note { max-width: 820px; margin: 28px 0 0; font-size: .875rem; color: #4a6274; line-height: 1.7; }
.results-main a:focus-visible, .results-dialog button:focus-visible { outline: 3px solid #15979c; outline-offset: 4px; }
.results-skip { position: fixed; left: 16px; top: -100px; padding: 12px 20px; background: #052944; color: #fff; z-index: 100001; }
.results-skip:focus { top: 16px; color: #fff; }
body.results-lightbox-open { overflow: hidden; }
.results-dialog { width: min(920px, calc(100vw - 32px)); max-width: none; height: min(94vh, 1080px); height: min(94dvh, 1080px); max-height: none; padding: 20px; border: 0; border-radius: 8px; background: #052944; color: #fff; margin: auto; box-sizing: border-box; }
.results-dialog[open] { display: flex; flex-direction: column; gap: 16px; }
.results-dialog::backdrop { background: #001520e6; }
.results-dialog-bar { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex: none; }
.results-dialog-bar p { font-size: 1rem; line-height: 1.4; color: #fff; margin: 0; }
.results-dialog-bar #results-dialog-state { font-size: .875rem; color: #8de7e9; margin-top: 4px; }
.results-close { display: flex; gap: 12px; align-items: center; flex: none; background: transparent; border: 1px solid #6d8897; border-radius: 4px; color: #fff; padding: 8px 14px; font-size: .875rem; min-height: 44px; cursor: pointer; }
.results-close span { font-size: 1.5rem; line-height: 1; }
.results-dialog-image { min-height: 0; flex: 1 1 0; width: 100%; height: 100%; object-fit: contain; }
.results-dialog-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; flex: none; }
.results-dialog-tabs:empty { display: none; }
.results-dialog-tabs button { min-height: 44px; border: 1px solid #6d8897; border-radius: 4px; padding: 8px 24px; color: #fff; background: transparent; font-size: 1rem; font-weight: 600; cursor: pointer; }
.results-dialog-tabs button[aria-pressed="true"] { background: #51d3d6; border-color: #51d3d6; color: #052944; }
@media (max-width: 1199px) {
  .results-case { gap: 28px; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); }
  .results-sample { gap: 32px; padding: 32px; }
}
@media (max-width: 991px) {
  .results-sample { grid-template-columns: 1fr; }
  .results-sample-copy { max-width: 580px; }
  .results-main { padding-top: 40px; }
  .results-intro { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; }
  .results-case { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .results-case-copy { max-width: 580px; }
  .results-category { margin-bottom: 12px; }
  .results-category span { display: inline; margin-right: 10px; }
  .results-case h2 { margin-bottom: 12px; }
}
@media (max-width: 575px) {
  .results-main { padding: 32px 0; }
  .results-main > .container { padding-right: 20px; padding-left: 20px; }
  .results-intro h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .results-intro > p { font-size: 1rem; }
  .results-pair { gap: 8px; }
  .results-photo-label { top: 8px; left: 8px; padding: 5px 9px; }
  .results-photo-zoom { bottom: 8px; right: 8px; }
  .results-photo figcaption { font-size: .875rem; }
  .results-sample { grid-template-columns: 1fr; padding: 24px; gap: 24px; margin-top: 8px; }
  .results-sample h2 { font-size: 1.9rem; }
  .results-sample .results-sample-note { margin-top: 16px; padding-top: 16px; }
  .results-dialog { width: calc(100vw - 16px); height: 96vh; height: 96dvh; padding: 12px; }
  .results-dialog-bar { gap: 8px; }
  .results-close { padding: 8px 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .results-photo-link img { transition: none; }
}

/* Video previews sit beside the matching project, with playback on demand. */
.results-case:has(.results-videos) { row-gap: 24px; }
.results-videos { grid-column: 2; min-width: 0; }
.results-videos-heading { color: #32606b; font-size: .875rem; font-weight: 600; margin: 0 0 12px; }
.results-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.results-video-card { display: flex; align-items: center; min-width: 0; overflow: hidden; background: #eff6f7; border: 1px solid #d8e7e9; border-radius: 6px; text-decoration: none; color: #052944; }
.results-video-card:hover, .results-video-card:focus { border-color: #15979c; background: #e6f3f4; color: #052944; }
.results-video-preview { position: relative; width: 112px; height: 152px; flex: 0 0 112px; overflow: hidden; background: #052944; }
.results-video-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.results-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; background: #fff; color: #052944; font-size: 16px; box-shadow: 0 2px 16px #05294433; }
.results-video-card:hover .results-video-play { background: #51d3d6; }
.results-video-copy { display: flex; flex-direction: column; padding: 18px; gap: 7px; min-width: 0; }
.results-video-label { font-size: .875rem; line-height: 1.4; font-weight: 600; color: #32606b; }
.results-video-card--after .results-video-label { color: #087a80; }
.results-video-copy strong { color: #052944; font-size: 1rem; line-height: 1.5; font-weight: 600; }
.results-video-action { font-size: .875rem; line-height: 1.5; color: #4a6274; }
.results-workvideo .results-video-preview { width: 180px; height: 248px; flex-basis: 180px; }
.results-workvideo .results-video-copy { padding: 28px; }
.results-workvideo .results-video-copy strong { font-size: 1.25rem; }
.results-dialog-video { display: block; flex: 1 1 0; width: 100%; min-height: 0; height: 100%; object-fit: contain; background: #001520; border-radius: 4px; }
.results-dialog-bar .results-video-subtitle { font-size: .875rem; color: #8de7e9; margin-top: 4px; }
.results-video-direct { color: #d0edef; font-size: .875rem; text-align: center; text-decoration: underline; flex: none; }
.results-video-direct:hover { color: #fff; }
.results-video-dialog a:focus-visible { outline: 3px solid #51d3d6; outline-offset: 3px; }
/* A complete floor-cleaning story, with every original photo visible. */
.results-case.results-case--journey { display: block; padding: 42px 0; }
.floor-journey-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 30px; }
.floor-journey-intro .results-category { margin-bottom: 12px; }
.floor-journey-intro .results-category span { display: inline; margin-right: 12px; }
.floor-journey-intro h2 { max-width: 510px; margin: 0; }
.floor-journey-intro > p { font-size: 1rem; line-height: 1.8; color: #4a6274; margin: 0; max-width: 450px; }
.floor-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.floor-stage { min-width: 0; padding: 20px; background: #f1f6f7; border-top: 4px solid #052944; border-radius: 0 0 6px 6px; }
.floor-stage--waehrend { border-color: #18888e; }
.floor-stage--nachher { border-color: #51d3d6; background: #e7f5f5; }
.floor-stage-heading { display: flex; align-items: center; gap: 12px; min-height: 82px; }
.floor-stage-number { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; background: #052944; color: #fff; border-radius: 50%; font-size: .875rem; font-weight: 600; }
.floor-stage--waehrend .floor-stage-number { background: #167d83; }
.floor-stage--nachher .floor-stage-number { background: #51d3d6; color: #052944; }
.floor-stage h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; color: #052944; margin: 0 0 3px; letter-spacing: -.02em; }
.floor-stage-count { font-size: .875rem; color: #4a6274; }
.floor-stage-description { font-size: .875rem; line-height: 1.6; color: #4a6274; margin: 14px 0 18px; min-height: 45px; }
.floor-stage-thumbnails { display: grid; grid-template-columns: repeat(var(--photo-count), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.floor-stage-thumbnails .results-photo-link img { aspect-ratio: 4 / 3; }
.floor-stage-thumbnails .results-photo-link { border-radius: 4px; }
.floor-photo-number { position: absolute; bottom: 5px; right: 5px; display: grid; place-items: center; background: #052944e6; color: #fff; min-width: 25px; min-height: 25px; border-radius: 3px; font-size: .75rem; font-weight: 600; }
.floor-gallery-hint { color: #4a6274; font-size: .875rem; line-height: 1.6; margin: 16px 0 24px; }
.results-case--journey .results-video-preview { width: 84px; height: 108px; flex-basis: 84px; }
@media (max-width: 991px) {
  .floor-journey-intro { grid-template-columns: 1fr; gap: 18px; }
  .floor-stages { gap: 12px; }
  .floor-stage { padding: 12px; }
  .floor-stage-heading { align-items: flex-start; min-height: 78px; gap: 8px; }
  .floor-stage-number { width: 32px; height: 32px; flex-basis: 32px; }
  .floor-stage-description { min-height: 68px; }
}
@media (max-width: 700px) {
  .results-case.results-case--journey { padding: 32px 0; }
  .floor-stages { grid-template-columns: 1fr; gap: 26px; }
  .floor-stage { padding: 18px; }
  .floor-stage-heading { min-height: 0; align-items: center; gap: 12px; }
  .floor-stage-number { width: 40px; height: 40px; flex-basis: 40px; }
  .floor-stage h3 { font-size: 1.25rem; }
  .floor-stage-description { min-height: 0; margin: 12px 0 18px; }
  .floor-stage-thumbnails .results-photo-link img { aspect-ratio: 1; }
  .results-dialog-tabs button { padding: 8px 12px; }
}
@media (max-width: 1199px) {
  .results-video-grid { gap: 10px; }
  .results-video-grid .results-video-preview { width: 92px; flex-basis: 92px; }
  .results-video-copy { padding: 14px; }
}
@media (max-width: 991px) {
  .results-videos { grid-column: 1; }
}
@media (max-width: 575px) {
  .results-video-grid { grid-template-columns: 1fr; gap: 12px; }
  .results-video-grid .results-video-preview, .results-video-preview { width: 108px; height: 144px; flex-basis: 108px; }
  .results-video-copy { padding: 16px; }
  .results-workvideo .results-video-preview { width: 120px; height: 190px; flex-basis: 120px; }
  .results-workvideo .results-video-copy { padding: 16px; }
  .results-workvideo .results-video-copy strong { font-size: 1rem; }
}
