.hero{--hero-row:52px;--hero-gutter:6.25cqw;--hero-line:12.09cqw;--hero-dot:var(--field-line);--hero-dot-on:var(--ink);--hero-chrome:calc(var(--mtop-h) + var(--tabbar-h));--hero-h:min(56.25cqw, max(32cqw, calc(100svh - var(--hero-chrome))));position:relative;container-type:inline-size}@media (min-width:1024px){.hero{--hero-chrome:calc(var(--strip-h) + var(--bar-h))}}.hero-stage{aspect-ratio:4/5;touch-action:pan-y;position:relative;overflow:hidden}.hero-slide{opacity:0;transition:opacity var(--t-overlay) var(--ease);position:absolute;inset:0}.hero-slide.is-active{opacity:1;z-index:1}.hero-slide img{-o-object-fit:cover;object-fit:cover;-o-object-position:center bottom;object-position:center bottom;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.hero-nav{justify-content:center;align-items:center;padding:16px 16px 0;display:flex}.hero-dots{align-items:center;display:flex}.hero-dot{cursor:pointer;background:0 0;border:0;align-items:center;min-height:24px;padding:0 4px;display:inline-flex}.hero-dot:before{content:"";background:var(--hero-dot);width:8px;height:8px;transition:width var(--t-reveal) var(--ease), background-color var(--t-state) var(--ease);border-radius:4px;display:block}.hero-dot[aria-current=true]:before{background:var(--hero-dot-on);width:28px}.hero-actions{flex-direction:column;gap:12px;padding:16px;display:flex}.hero .hero-btn{min-height:var(--hero-row);font-size:var(--step-0);padding-inline:24px}.bn .hero .hero-btn{font-size:calc(var(--step-0) * var(--bn-scale))}@media (min-width:768px){.hero{--hero-dot:var(--hero-dot-photo);--hero-dot-on:var(--basanti)}.hero-stage{aspect-ratio:auto;height:var(--hero-h)}.hero-actions,.hero-nav{z-index:2;top:calc(var(--hero-h) - var(--hero-line));padding:0;position:absolute}.hero-actions{left:var(--hero-gutter);flex-direction:row;gap:16px}.hero-nav{right:var(--hero-gutter);min-height:var(--hero-row)}.hero-over{--focus:var(--basanti)}.hero .hero-btn-alt{border-color:var(--scrim-btn-line);background:var(--scrim-btn);color:var(--on-scrim)}}@media (min-width:768px) and (max-width:1099.98px){.hero{--hero-row:44px}.hero .hero-btn{font-size:var(--step--1);padding-inline:18px}.bn .hero .hero-btn{font-size:calc(var(--step--1) * var(--bn-scale))}}@media (min-width:768px) and (hover:hover) and (pointer:fine){.hero .hero-btn-alt:hover{border-color:var(--on-scrim);background:var(--hover-tint)}}@media (prefers-reduced-motion:reduce){.hero-slide,.hero-dot:before{transition:none}}