/* Geometry from page-source.md + retained style.css. Scoped to the homepage.
   Source .page script assigns innerHeight: reproduce with svh and allow content
   to expand for enlarged text. Original assets are replaced by CMM artwork. */
body:has(#page1) { font-size: 1.2rem; }
body:has(#page1) .site-header { position: absolute; inset: 0 0 auto; min-height: 4em; padding: 0 10%; background: #ffffffdf; }
body:has(#page1) .site-name img { width: 200px; }
#page1 { min-height: max(35em, 100svh); padding: var(--home-header-height, 4em) 0 0; display: block; background: #f5f5f2; }
#page1 .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
#page1::after { display: block; background: linear-gradient(90deg, #fffffff2 0%, #ffffffc9 40%, #ffffff00 78%); }
#page1_content { box-sizing: content-box; width: 50%; max-width: none; margin: 0; padding: 6% 12%; font-size: 100%; background: transparent; }
#page1_content h1 { font-size: 360%; line-height: .85em; margin: .67em 0; }
#page1_content h1 .subtitle { font-size: 70%; }
#page1_content p { margin: 1em 0; max-width: none; line-height: 1.7em; }
#page1_call_to_action { margin: 3em 0; gap: 1.3em; flex-direction: row; align-items: center; }
#page1 .get_started { font-size: 1em; }
.hero-phone { font-size: 200%; font-weight: 700; }
.home-intro { padding: 5em 2em; background: #ddd; }
.home-intro-frame { box-sizing: border-box; width: 95%; max-width: 800px; height: 450px; min-height: 450px; padding: clamp(.5rem, 4vw, 1.5em); margin: 0 auto; background: #222; color: #fff; overflow: auto; justify-content: safe center; align-items: safe center; }
.home-intro-frame > * { flex-shrink: 0; max-width: 100%; overflow-wrap: anywhere; }
.home-intro-frame h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); }
.home-intro-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.home-intro-frame:has(video) { padding: 0; }
#page2.industry-section { min-height: max(35em, 100svh); display: block; padding: 0; background: url('/images/cmm-trade-workbench.webp') center / cover no-repeat; }
#page2_content { width: 100%; max-width: none; margin: 0; padding: 5% 0; }
#page2 h2 { font-size: 280%; font-weight: 300; line-height: .85em; margin: .83em 0; }
.industry-panel { box-sizing: border-box; width: 40%; max-width: none; min-height: 6em; margin: auto; padding: .35em .6em; font-size: 150%; color: #fff; background: rgb(35 100 117 / 92%); }
.industry-panel p { font-size: 1rem; line-height: 1.7; }
.industry-panel .industry-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3em .5em; margin: .3em 0 0; font-size: 1rem; }
.industry-links a { padding: .4em .5em; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.feature-grid { width: max-content; max-width: 100%; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 auto; }
.feature-item { margin: 1.5em 1.5em 0; padding: 0; gap: .5em; }
.feature-item svg { flex: 0 0 64px; width: 64px; height: 57px; margin: .5em; }
.feature-item strong { font-size: 1em; font-weight: 400; color: inherit; }
.feature-item span span { max-width: 24ch; font-size: .8em; }
.topic-carousel { position: relative; overflow: hidden; background: #173b49; color: #fff; }
.topic-track { display: flex; width: 100%; font-size: 120%; transition: transform 500ms ease; }
.topic-slide { flex: 0 0 100%; width: 100%; min-width: 0; min-height: 100svh; padding: 0; position: relative; display: flex; align-items: flex-end; background-size: cover; background-repeat: no-repeat; background-color: #173b49; }
.topic-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000d 0%, #0008 30%, #0000 65%); pointer-events: none; }
.topic-content { position: relative; width: calc(50% + 8em); max-width: 100%; padding: 4em; margin-top: 8em; font-size: 75%; background: transparent; border-radius: 0; }
.topic-icon { display: block; width: 80px; height: 80px; object-fit: contain; }
.topic-content h2 { margin: .3em auto; font-size: 280%; font-weight: 300; line-height: 1.3em; text-transform: uppercase; }
.topic-content p { margin: .3em 0; line-height: 1.7em; }
.topic-content a { display: inline-block; margin-top: .4em; padding: .4em 0; font-size: 1em; color: white; }
.topic-slide[aria-hidden='true'] .topic-content { visibility: hidden; }
.carousel-controls { position: absolute; inset: 0; display: block; pointer-events: none; }
.carousel-controls button { pointer-events: auto; }
.carousel-controls button[aria-label] { position: absolute; top: 38%; width: 44px; height: 142px; min-width: 44px; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: transparent; font-size: 0; background-repeat: no-repeat; background-size: 41px 142px; background-position: center; opacity: .85; }
.carousel-controls button[aria-label]:hover { opacity: 1; }
.carousel-controls button[aria-label='Previous topic'] { left: .6rem; background-image: url('/images/cmm-carousel-arrow-left.svg'); }
.carousel-controls button[aria-label='Next topic'] { right: .6rem; background-image: url('/images/cmm-carousel-arrow-right.svg'); }
.carousel-status { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem .6rem; background: #173b49; font-size: .8rem; }
.carousel-controls .carousel-playback { position: absolute; right: 1rem; bottom: 3.75rem; min-height: 44px; padding: .4rem .6rem; font-size: .8rem; background: #173b49; border: 1px solid #fff; }
.home-stories { width: 90%; max-width: none; margin: 1em auto; padding: 0; font-size: 70%; }
.home-stories > h2 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.home-story-grid { display: grid; grid-template-columns: repeat(80, minmax(0, 1fr)); gap: 2em 0; padding: 1em 0; width: 84%; margin: auto; }
.home-story-placeholder { display: flex; align-items: center; padding: 10px; border-radius: 5px; gap: 5px; background: #3b869a; min-width: 0; min-height: 18em; }
.home-story-placeholder:nth-child(1) { grid-column: span 29; margin-right: 1em; }
.home-story-placeholder:nth-child(2) { grid-column: span 51; margin-left: 1em; background: #ab3923; }
.home-story-placeholder:nth-child(3) { grid-column: span 50; margin-right: 1em; background: #809f35; }
.home-story-placeholder:nth-child(4) { grid-column: span 30; margin-left: 1em; background: #7e8385; }
.story-logo-placeholder { flex: 0 0 27%; color: #fff; font: 700 2em 'refrigerator-deluxe', sans-serif; overflow-wrap: anywhere; }
.story-placeholder-content { flex: 1; min-width: 0; min-height: 15em; padding: 15px; background: #fff; border-radius: 5px; color: #52595b; text-align: left; }
body:has(#page1) .contact-cta { padding: 2em 0 3em; }
body:has(#page1) .contact-cta > p:first-child { margin: 0 0 2em; font-style: normal; }
body:has(#page1) .contact-cta h2 { font-size: 280%; font-weight: 300; margin: .83em 0; line-height: .85em; }
body:has(#page1) .contact-cta .get_started { font-size: 100%; }
body:has(#page1) .contact-cta::after { content: ''; display: block; width: min(471px, 80%); height: 36px; margin: 3em auto 0; background: url('/images/cmm-section-divider.svg') center / contain no-repeat; }
.home-award { background: #ffffdd; padding: 3em 1em 2em; text-align: center; }
.home-award-inner { max-width: 40em; margin: auto; }
.award-artwork-placeholder { display: grid; place-items: center; width: min(400px, 100%); aspect-ratio: 400 / 341; margin: auto; border: 2px dashed #7d843e; color: #52595b; }
.home-award h2 { margin: .67em 0; font-size: 360%; font-weight: 700; line-height: .85em; }
body:has(#page1) .site-footer { padding: 3em 10% 1em; background: #eee; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1000px) {
 #page1_content { font-size: 80%; }
 .home-story-grid { width: calc(100% - 2em); grid-template-columns: minmax(0, 1fr); }
 .home-story-placeholder:nth-child(n) { grid-column: auto; margin: 0; min-height: 22em; }
}
@media (max-width: 640px) {
 body:has(#page1) .site-header { padding: 0 .1em; }
 body:has(#page1) .site-name img { width: min(200px, 48vw); }
 body:has(#page1) .header-actions { flex-wrap: nowrap; }
 #page1_content { width: 70%; padding: 1em; }
 #page1_content h1 { font-size: 340%; margin: .3em 0; }
 #page1_call_to_action { flex-direction: column; align-items: flex-start; gap: 1em; }
 #page1 .get_started { font-size: 140%; }
 .hero-phone { font-size: 180%; }
 .industry-panel { width: calc(70% + 1em); min-height: 7em; font-size: 115%; padding: .35em .5em; }
 body:has(#page1) .contact-cta { padding-inline: 1em; }
 body:has(#page1) .contact-cta h2 { font-size: 280%; }
}
@media (max-width: 480px) {
 #page2.industry-section, #page1 { min-height: max(40em, 100svh); }
 .feature-grid { width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
 .feature-item { margin: .3em .6em 0 .3em; gap: 0; }
 .feature-item svg { flex: 0 0 35%; width: 35%; height: 64px; margin: .5em 0; padding: 0 1em; }
 .feature-item > span { width: 65%; }
 .topic-content { width: min(100%, calc(80% + 6em)); padding: 1em 3em 6em; font-size: 60%; }
 .topic-icon { width: 64px; height: 64px; }
 .carousel-controls button[aria-label] { width: 44px; height: 44px; background-size: 20px 35px; }
}
@media (prefers-reduced-motion: reduce) { .topic-track { transition: none; } }