.s-product-hero{
  min-height:100svh;
  display:flex;
  align-items:stretch;
  padding-top:calc(var(--nav-h) + var(--sp-8));
  padding-bottom:var(--sp-8);
}

.s-product-hero__inner{
  flex:1 1 auto;
  width:100%;
  display:grid;
  grid-template-rows:auto auto minmax(var(--sp-10), 1fr) auto;
  row-gap:0;
}
.s-product-hero__head { grid-row:1; margin-bottom:var(--sp-7); }
.s-product-hero__h    { grid-row:2; }
.s-product-hero__split{ grid-row:4; }

.s-product-hero .plate{
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  overflow:hidden;
  pointer-events:none;
  background-color:var(--ink-1000);
  background-image:
    radial-gradient(74% 62% at 90% 4%,  var(--ink-850) 0%, transparent 70%),
    radial-gradient(52% 44% at 74% 96%, var(--ink-900) 0%, transparent 76%),
    linear-gradient(192deg, var(--ink-900) 0%, var(--ink-1000) 54%, var(--ink-1000) 100%);
  background-repeat:no-repeat;
}

.s-product-hero .plate{
  --plate-over  : 5%;
  --plate-travel: 3.6%;
  --plate-level : .78;
}

.s-product-hero .plate__media{
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  display:block;
  overflow:hidden;
}

.s-product-hero .plate__img{
  position:absolute;
  left:0;
  top:calc(var(--plate-over) * -1);
  width:100%;
  height:calc(100% + var(--plate-over) * 2);
  object-fit:cover;
  object-position:50% 46%;
  opacity:0;
}

.s-product-hero .plate.is-ready .plate__img{
  opacity:var(--plate-level);
  transition:opacity var(--dur-4) var(--ease-out);
}
.no-js .s-product-hero .plate__img{ opacity:var(--plate-level); }

.s-product-hero .plate.is-live .plate__img{
  transform:translate3d(0, calc(var(--plate-pos, 0) * var(--plate-travel)), 0);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .s-product-hero .plate .plate__img{ transform:none !important; }
}

.s-product-hero .plate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  
  background-image:
    radial-gradient(var(--line-on-ink-strong) var(--hair), transparent var(--hair)),
    radial-gradient(var(--line-on-ink)        var(--hair), transparent var(--hair));
  background-size:
    var(--tick)     var(--tick),
    var(--baseline) var(--baseline);
  background-position:center;
  -webkit-mask-image:radial-gradient(84% 66% at 80% 0%, var(--ink-1000) 0%, transparent 82%);
          mask-image:radial-gradient(84% 66% at 80% 0%, var(--ink-1000) 0%, transparent 82%);
}

.s-product-hero .plate::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  background:
    linear-gradient(to right, var(--ink-1000) 0%, var(--ink-1000) 30%, transparent 70%),
    var(--scrim-head),
    var(--scrim-foot);
}

.s-product-hero .rule{ margin-block:0; }

.s-product-hero .s-product-hero__lintel{ margin-bottom:var(--sp-5); }
.s-product-hero__brow  { display:flex; }

.s-product-hero__h{
  max-width:none;
  margin:0;
  font-size:min(var(--fs-hero), 13.6vw);
}
.s-product-hero__h .reveal--line{
  padding-bottom:.11em;
  margin-bottom:-.11em;
}

.s-product-hero__split{
  position:relative;
}

.s-product-hero__rule--low{
  margin-top:0;
  margin-bottom:var(--sp-6);
}

.s-product-hero__cols{
  align-items:start;
}

.s-product-hero__col{
  position:relative;
  grid-column:8 / span 5;
  padding-left:var(--gutter);
}

.s-product-hero__col::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:calc(var(--sp-8) * -1);
  width:var(--hair);
  background:var(--line);
}

.s-product-hero__deck{
  color:var(--fg);
  max-width:none;
}

.s-product-hero__lead{
  margin-top:var(--sp-5);
  max-width:none;
}

.s-product-hero__aside{
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:var(--hair) solid var(--line);
  color:var(--fg-quiet);
  max-width:none;
}

@media (max-width: 1100px){
  .s-product-hero__col{
    grid-column:1 / -1;
    padding-left:0;
  }
  .s-product-hero__col::before{ display:none; }

  
  .s-product-hero__deck { max-width:var(--measure-tight); }
  .s-product-hero__lead { max-width:var(--measure-prose); }
  .s-product-hero__aside{ max-width:var(--measure-record); }
}

@media (max-width: 760px){
  .s-product-hero{
    padding-top:calc(var(--nav-h) + var(--sp-7));
    
    padding-bottom:var(--sp-9);
  }
  .s-product-hero__inner{
    grid-template-rows:auto auto minmax(var(--sp-8), 1fr) auto;
  }
  .s-product-hero__head{ margin-bottom:var(--sp-6); }
  .s-product-hero__deck,
  .s-product-hero__lead,
  .s-product-hero__aside{ max-width:none; }   

  
  .s-product-hero .plate::before{
    -webkit-mask-image:radial-gradient(130% 50% at 74% 2%, var(--ink-1000) 0%, transparent 84%);
            mask-image:radial-gradient(130% 50% at 74% 2%, var(--ink-1000) 0%, transparent 84%);
  }
  
  .s-product-hero .plate{
    --plate-over  : 4%;
    --plate-travel: 2.6%;
    --plate-level : .74;
  }
  .s-product-hero .plate__img{ object-position:52% 40%; }

  
  .s-product-hero .plate::after{
    background:
      linear-gradient(to bottom, transparent 0%, transparent 32%, var(--ink-1000) 64%),
      var(--scrim-head);
  }
}

@media (max-height: 820px){
  .s-product-hero{
    padding-top:calc(var(--nav-h) + var(--sp-7));
    padding-bottom:var(--sp-7);
  }
  .s-product-hero__inner{
    grid-template-rows:auto auto minmax(var(--sp-9), 1fr) auto;
  }
  .s-product-hero__head{ margin-bottom:var(--sp-6); }
  .s-product-hero__rule--low{ margin-bottom:var(--sp-5); }
}