
/* ================= About page (shares the laser + lip + Morpheus8 building blocks) ================= */

/* hero: studio photo fills the frame */
.lp-reel img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:26px}
/* three story stats */
.ab-stats{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:860px){.ab-stats{grid-template-columns:1fr}}
/* four approach cards */
.ab-cards{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.ab-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ab-cards{grid-template-columns:1fr}}
/* technology list links */
.m8-col li a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent);text-underline-offset:3px}
/* two location cards */
.ab-locs{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.ab-locs{grid-template-columns:1fr}}
.ab-locs .card-book{align-self:stretch;justify-content:center;text-align:center}
.ab-locs .card-book+.card-book{margin-top:10px}
/* brands we trust: slow-scrolling strip of product names */
.ab-brands-head{margin-top:70px}
.ab-ticker{margin-top:18px;background:transparent;border-top:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc) 35%,transparent);padding:26px 0}
.ab-ticker .ticker-track{animation-duration:60s}
.ab-ticker span{gap:72px;padding-right:72px}
.ab-logo{height:48px;width:150px;object-fit:contain;flex:none;opacity:.55;filter:saturate(.7)}
@media(max-width:600px){.ab-ticker span{gap:44px;padding-right:44px}.ab-logo{height:36px;width:112px}}
/* banner headline: long first line scales down so it clears the video and fits phones */
@media(min-width:601px){.lp-hero h1.ab-h1{font-size:clamp(36px,4.1vw,60px)}}
@media(max-width:600px){.lp-hero h1.ab-h1{font-size:min(36px,calc((100vw - 40px) * .088))}}
/* hero photo: the same 400px 4:5 frame as the service pages on desktop (the 9:16 frame was sized for the old phone video) */
@media(min-width:861px){.lp-reel{max-width:400px;aspect-ratio:4/5}.lp-reel img{object-position:50% 25%}}
/* phones: square hero frame like the other service pages */
@media(max-width:860px){.lp-hero .lp-reel{aspect-ratio:1/1}}
