/* ============================================================ HERO */
.hero{
  position:relative;min-height:92vh;min-height:92svh;
  display:flex;flex-direction:column;
  background:var(--c-black);color:var(--c-off-white);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;}
.hero__bg .photo{filter:grayscale(1) contrast(1.18) brightness(.92);}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,.62) 0%,rgba(17,17,17,.46) 38%,rgba(17,17,17,.9) 100%);
}
.hero__body{position:relative;z-index:1;flex:1;display:flex;align-items:center;
  padding-top:calc(var(--s-11) + var(--s-4));padding-bottom:var(--s-9);}
.hero__title{margin-top:var(--s-5);font-size:var(--fs-d1);}
.hero__title span{display:block;}
.hero__lead{margin-top:var(--s-6);max-width:46ch;color:rgba(245,245,243,.82);}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-8);}
@media (min-width:768px){.hero__actions .btn{width:auto;}}
.hero .btn--secondary{color:var(--c-off-white);border-color:rgba(232,232,230,.5);}
.hero .btn--secondary:hover{border-color:var(--accent);color:var(--accent);}

.hero__bar{position:relative;z-index:1;border-top:var(--border) solid rgba(232,232,230,.2);}
.hero__bar-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) 0;
  padding-block:var(--s-5);
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;color:rgba(232,232,230,.72);
}
.hero__bar-inner span:not(:last-child)::after{
  content:"/";margin-inline:var(--s-4);color:var(--accent);
}
.hero__scroll{
  position:absolute;right:var(--margin);bottom:calc(var(--s-9) + var(--s-2));z-index:1;
  display:none;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(232,232,230,.55);
  writing-mode:vertical-rl;
}
@media (min-width:1024px){.hero__scroll{display:flex;}}
.hero__scroll::after{
  content:"";width:1px;height:56px;background:currentColor;
  animation:scrollLine 2.4s var(--ease-out) infinite;transform-origin:top;
}
@keyframes scrollLine{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(0);transform-origin:bottom;}}