/* Full viewport artwork; content follows the same edges as the cards below. */
.site-shell::before{display:none}
.hero.wrap{width:100%;max-width:none;margin:0;height:clamp(391px,30.906vw,646px);min-height:0;padding:0;display:flex;overflow:hidden;isolation:isolate;background:#031c32}
.hero-content{width:calc(100% - 86px);max-width:1290px;margin:0 auto;padding:42px 0;position:relative;z-index:5;align-self:center;pointer-events:none}
.hero-content>*{max-width:44%;pointer-events:auto}
.hero h1{font-size:clamp(37px,3.45vw,58px);max-width:46%}
.hero-description{max-width:390px}
.hero-footnote{max-width:44%}
.hero-visual-photo{position:absolute;inset:0;left:0;top:0;width:100%!important;height:100%!important;margin:0!important;aspect-ratio:auto;z-index:1;overflow:hidden}
.hero-reference{position:absolute;inset:0!important;width:100%!important;height:100%!important;object-fit:fill;object-position:center;filter:none}
.hero-visual-photo::after{content:"";display:block!important;position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,28,50,.45),transparent 49%);pointer-events:none}
.solutions{margin-top:36px}
@media(min-width:2000px){.hero-content{max-width:1290px}.hero-reference{object-fit:cover}}
@media(min-width:721px) and (max-width:1100px){
 .hero-content{width:calc(100% - 86px);padding:32px 0}
 .hero h1{font-size:clamp(32px,4vw,42px)}
 .hero-description{max-width:40%;font-size:15px}
 .hero-buttons{max-width:46%;gap:10px;flex-wrap:wrap}
 .hero-buttons .btn{min-width:125px;padding:0 14px}
}
@media(max-width:720px){
 .hero.wrap{height:auto;min-height:0;padding:30px 0 0;display:flex;flex-direction:column;overflow:hidden}
 .hero-content{width:calc(100% - 34px);max-width:none;padding:0;margin:0 auto}
 .hero-content>*{max-width:100%}
 .hero h1{max-width:100%;font-size:clamp(33px,8.4vw,56px)}
 .hero-description{font-size:16px;max-width:430px}
 .hero-visual-photo{position:relative;inset:auto;left:auto;top:auto;width:100%!important;height:auto!important;aspect-ratio:1916/821;margin:24px 0 0!important}
 .hero-reference{object-fit:contain}
 .hero-visual-photo::after{display:none!important}
 .hero-buttons{gap:10px;flex-wrap:wrap}
 .hero-buttons .btn{min-width:0}
 .solutions{margin-top:28px}
}
/* Right edge of the phone is at 94.2% of the artwork. Anchor it to
   the cards' right edge while continuing the scenic image to the viewport. */
@media(min-width:721px){
 .hero-visual-photo{background-image:url('../images/kinera-hero-fullwidth-v8.webp');background-size:2000% 100%;background-position:right center}
 .hero-reference{width:calc(53.0785vw + min(684.713px,53.0785vw - 45.6475px))!important;max-width:none;object-fit:fill;-webkit-mask-image:linear-gradient(90deg,#000 98%,transparent 100%)!important;mask-image:linear-gradient(90deg,#000 98%,transparent 100%)!important}
}

/* v9: hero -15%; artwork -20%; phone inset 20px from the cards. */
@media(min-width:721px){
 .hero-reference{
  --artwork-width:calc(53.0785vw + min(684.713px,53.0785vw - 45.6475px));
  width:var(--artwork-width)!important;
  height:94.117647%!important;
  top:2.941176%!important;
  left:calc(var(--artwork-width) * .1884 - 20px)!important;
  transform:scaleX(.8);transform-origin:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent)!important;
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent)!important;
  mask-composite:intersect;
 }
}
@media(max-width:720px){
 .hero.wrap{padding-top:25.5px}
 .hero-visual-photo{width:80%!important;margin:20.4px auto 0!important;align-self:center;transform:translateX(-8px)}
}
/* LinkedIn: 17px x 1.20, blue tile with white lettering. */
.site-footer .social-link{color:#0a66c2}
.site-footer .social-link:hover{color:#1689e6}
.site-footer .social-link .icon{width:20.4px;height:20.4px}
.site-footer .social-link svg rect{fill:#0a66c2;stroke:none}
.site-footer .social-link svg path{stroke:#fff}