/* Shared hero entrance, with optional controls only on the comparison page. */
.hero-study{padding-bottom:160px}
.hero-animation .hero .headline-first,.hero-animation .hero h1 .offset,.hero-animation .hero-visual,.hero-animation .hero-image,.hero-animation .hero-copy{animation:none!important}
.b.architectural-grid.hero-animation .hero-visual{position:relative}
.hero-photo-crop{position:absolute;inset:15px;overflow:hidden}
.hero-animation .hero-photo-crop .hero-image{width:100%;height:100%;object-fit:cover;transform-origin:67% 50%}
.hero-motion-controls{position:fixed;z-index:70;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(580px,calc(100% - 24px));padding:12px 16px;background:#fff;border:1px solid #c2cec5;box-shadow:0 8px 36px #153b2e18;font-family:var(--sans);line-height:1.5;color:#264c39}
.hero-motion-controls-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;min-height:32px}
.hero-motion-controls-heading p{font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.07em}
.hero-motion-controls-heading p span{font-family:var(--sans);letter-spacing:0;font-size:12px;margin-left:12px}
.hero-motion-controls-heading button{padding:7px 0 7px 12px;min-height:36px;border:0;background:none;font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.hero-motion-controls-heading button:disabled{opacity:.5;cursor:default;text-decoration:none}
.hero-motion-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hero-motion-options a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 6px;border:1px solid #d9e1db;font-size:13px;white-space:nowrap}
.hero-motion-options a span{font-family:'Manrope',sans-serif;font-size:11px;opacity:.7}
.hero-motion-options a:hover{background:#edf4ef}
.hero-motion-options a[aria-current]{background:#17432f;color:#fff;border-color:#17432f}
.hero-motion-description{font-size:12px;color:#63746a;margin-top:8px;min-height:18px}
.hero-motion-controls a:focus-visible,.hero-motion-controls button:focus-visible{outline:2px solid #287b51;outline-offset:2px}
@media(max-width:600px){
  .hero-photo-crop{inset:10px}
  .hero-motion-controls{padding:10px 12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .hero-motion-controls-heading p{font-size:10px}
  .hero-motion-controls-heading p span{display:block;font-size:11px;margin:2px 0 0}
  .hero-motion-options{gap:4px}
  .hero-motion-options a{font-size:12px;gap:5px;padding-inline:3px}
  .hero-motion-options a span{font-size:10px}
  .hero-motion-description{font-size:11px}
}