/* =========================================================
   PROJECT HERO — full screen cover with photo crossfade
========================================================= */
.phero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:var(--forest-deep, #17311d);
  color:#fbfaf4;
}

.phero-media{position:absolute;inset:0;z-index:-2;}
.phero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:scale(1.12);
  transition:opacity 1.6s ease, transform 9s linear;
}
.phero-photo.is-active{opacity:1;transform:scale(1.02);}

.phero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,18,10,.62) 0%, rgba(8,18,10,.08) 26%, rgba(8,18,10,0) 42%, rgba(8,18,10,.55) 72%, rgba(8,18,10,.92) 100%),
    linear-gradient(90deg, rgba(8,18,10,.55) 0%, rgba(8,18,10,0) 55%);
  pointer-events:none;
}

.phero-inner{
  position:relative;
  width:min(var(--container, 1320px), calc(100% - clamp(2rem, 5vw, 6rem)));
  margin:0 auto;
  padding:clamp(8rem, 14vh, 11rem) 0 clamp(2rem, 5vh, 3.4rem);
}

.phero-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-bottom:clamp(1.2rem, 2.4vh, 1.8rem);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(251,250,244,.7);
}
.phero-crumbs a{color:inherit;transition:color .25s ease;}
.phero-crumbs a:hover{color:#fbfaf4;}
.phero-crumbs span[aria-hidden]{color:var(--brand-green, #8ebc61);}

.phero-tag{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.2rem;
  padding:.5rem .95rem;
  border-radius:999px;
  background:rgba(251,250,244,.12);
  border:1px solid rgba(251,250,244,.26);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.phero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-green, #8ebc61);}

.phero-title{
  margin:0;
  max-width:1100px;
  color:#fbfaf4;
  font-family:'Satoshi', sans-serif;
  font-weight:700;
  font-size:clamp(3.2rem, min(7.2vw, 11.5vh), 8.4rem);
  line-height:.9;
  letter-spacing:-.07em;
  text-wrap:balance;
}
.phero-title span{
  display:block;
  margin-top:.12em;
  color:rgba(251,250,244,.55);
  font-size:.55em;
  letter-spacing:-.05em;
}

.phero-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-top:clamp(1.8rem, 4vh, 3rem);
  padding-top:clamp(1.2rem, 2.4vh, 1.8rem);
  border-top:1px solid rgba(251,250,244,.18);
}

.phero-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, auto));
  gap:clamp(1.2rem, 3vw, 3.4rem);
  margin:0;
}
.phero-meta div{min-width:0;max-width:260px;}
.phero-meta dt{
  margin-bottom:.45rem;
  color:rgba(251,250,244,.58);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.phero-meta dd{
  margin:0;
  color:#fbfaf4;
  font-family:'Satoshi', sans-serif;
  font-size:clamp(1rem, 1.3vw, 1.2rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
}

.phero-side{display:flex;align-items:center;gap:1.4rem;flex-shrink:0;}

.phero-dots{display:flex;gap:.45rem;}
.phero-dot{
  position:relative;
  width:42px;
  height:3px;
  padding:0;
  border:0;
  border-radius:3px;
  background:rgba(251,250,244,.26);
  overflow:hidden;
  cursor:pointer;
}
.phero-dot::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fbfaf4;
  transform:scaleX(0);
  transform-origin:left;
}
.phero-dot.is-done::after{transform:scaleX(1);}
.phero-dot.is-active::after{animation:pheroFill var(--phero-ms, 6000ms) linear forwards;}
@keyframes pheroFill{to{transform:scaleX(1);}}

.phero-down{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  color:#fbfaf4;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.phero-down i{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:999px;
  border:1px solid rgba(251,250,244,.4);
  font-style:normal;
  font-size:1.2rem;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.phero-down:hover i{background:#fbfaf4;color:var(--forest-deep, #17311d);border-color:#fbfaf4;transform:translateY(3px);}

/* entrance */
.phero-crumbs,.phero-tag,.phero-title,.phero-bottom{animation:pheroUp 1s cubic-bezier(.22,1,.36,1) both;}
.phero-tag{animation-delay:.08s;}
.phero-title{animation-delay:.16s;}
.phero-bottom{animation-delay:.3s;}
@keyframes pheroUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

@media (max-width:1100px){
  .phero-meta{grid-template-columns:repeat(2, minmax(0, 1fr));gap:1.2rem 2.4rem;}
}

@media (max-width:760px){
  .phero-inner{padding-top:7.5rem;padding-bottom:1.6rem;width:calc(100% - 2.5rem);}
  .phero-title{font-size:clamp(2.7rem, 13vw, 4.2rem);}
  .phero-bottom{flex-direction:column;align-items:stretch;gap:1.4rem;}
  .phero-meta{gap:1rem 1.4rem;}
  .phero-meta dd{font-size:.98rem;}
  .phero-side{justify-content:space-between;}
  .phero-down span{display:none;}
  .phero-down i{width:50px;height:50px;}
  .phero-crumbs{font-size:.66rem;}
}

@media (prefers-reduced-motion: reduce){
  .phero-photo{transition:opacity .4s ease;transform:none !important;}
  .phero-crumbs,.phero-tag,.phero-title,.phero-bottom{animation:none;}
  .phero-dot.is-active::after{animation:none;transform:scaleX(1);}
}
.phero-dots:has(> .phero-dot:only-child){display:none;}