/* Figma hero strips: rotate the narrow inner images, not their outer bounds. */
.hero-accent img{
  transform:rotate(36.66deg);
  transform-origin:center;
}
.hero-accent{
  /* Figma's flex wrappers do not clip the rotated inner strips. */
  overflow:visible;
}
.accent-a img{
  left:239.507px;
  top:7.022px;
  width:324.986px;
  height:909.952px;
}
.accent-b img{
  left:158.201px;
  top:4.197px;
  width:213.001px;
  height:600.495px;
}
.accent-c img{
  left:103.767px;
  top:2.752px;
  width:139.712px;
  height:393.878px;
}
a.click.white-text{color:#fff}
a.click.white-text:hover,
a.click.white-text:focus-visible{color:#55bdf0}

/* Hero's Figma overlay is intentionally translucent while preserving all
   diagonal image strips above it. */
.hero-overlay{opacity:.7}

/* The translucent mid-page shape is a background layer, never an overlay. */
.mid-bg{z-index:0}

/* News & Events cards: the gray panel overlaps the image by 33px in Figma.
   Keep the image at the bottom, the panel above it, and all copy on top. */
.news-image{z-index:6}
.news-panel{z-index:7}
.news-card-title,.news-card-copy{z-index:9}

/* Figma node 25:30 uses a 32px line height inside its 76px text box. */
.news-title{line-height:32px}

/* Figma node 25:40 floats across both feature rows as a foreground asset. */
.product-floating{z-index:6;pointer-events:none}

/* Main product: background photo < foreground blower < blue copy panel/text. */
.product-main-overlay{z-index:2;pointer-events:none}
.product-copy-panel{z-index:3}

/* Figma positions the chevrons outside the text frames. */
.footer-link::before{
  content:"";
  position:absolute;
  left:-19px;
  top:8px;
  width:14px;
  height:16px;
  background:url("assets/figma/arrow-footer-a.svg") center/16px 14px no-repeat;
  transform:rotate(90deg);
}

/* Exact supplied 1920 × 800 homepage hero artwork. */
body.route-home .hero-overlay,
body.route-home .hero-copy-panel,
body.route-home .hero-title,
body.route-home .hero-sub,
body.route-home .hero-sub + .learn,
body.route-home .hero-accent{display:none!important}

html body.route-home .home-hero-wide{
  display:block!important;
  /* Desktop navigation is 77px tall. Keep the hero flush to its lower edge;
     the legacy --nav-normal-height value resolves to 112px and created a
     visible 35px white strip between the navigation and hero artwork. */
  top:77px!important;
  left:0!important;
  width:100vw!important;
  max-width:none!important;
  height:calc(800px * var(--page-scale))!important;
  /* Use the complete raster that is present on the production host. */
  background-image:url("assets/figma/home-hero-reference.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:none!important;
}

html body.route-home .home-hero-wide::after{
  display:none!important;
}

/* Keep the scaled 1920px homepage canvas centered on laptop viewports.
   styles.css previously forced margin:0 below 1920px, while the router still
   calculated a centered canvas offset for the navigation. */
html body.route-home #canvas-wrap{
  margin-left:auto!important;
  margin-right:auto!important;
}

html body.route-home #top{
  z-index:2!important;
  background:transparent!important;
}

html body.route-home #top > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}

/* Keep the supporting statement, but remove its gray CTA panel. */
html body.route-home #applications{
  display:block!important;
  position:absolute!important;
  left:52px!important;
  top:956px!important;
  width:1790px!important;
  height:159px!important;
  z-index:8!important;
  background:transparent!important;
}

html body.route-home #applications .home-figma-statement{
  position:absolute!important;
  left:131px!important;
  top:43px!important;
  width:1528px!important;
  height:74px!important;
  margin:0!important;
  color:#213345!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:32px!important;
  line-height:37px!important;
  font-weight:400!important;
  text-align:left!important;
}