/* What is TRE? section + the night-sky to cream transition below the hero.
   Decorative path and wing marks only. */

/* Cream band in place of the old dark-green .band look, scoped to this section. */
#tre.band{
  background:var(--clay-veil);
  color:var(--ink);
  padding-top:clamp(28px,4vw,48px);
  padding-bottom:clamp(56px,8vw,88px);
  overflow:hidden;
}
#tre.band h2{color:var(--ink)}
#tre.band .head p:last-child{color:var(--muted)}
#tre.band .eyebrow.light{color:var(--gold-t)}
#tre .feel{
  margin-top:48px;
  max-width:760px;
  color:var(--ink);
  font-size:1.05rem;
  line-height:1.7;
  padding-top:28px;
  border-top:1px solid var(--line);
}
#tre .feel strong{color:var(--green-d);font-weight:700}

#tre .steps-wrap{position:relative;isolation:isolate}
#tre .steps{
  list-style:none;
  padding:28px 0 8px;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 36px;
  position:relative;
  z-index:1;
}
#tre .steps li{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  position:relative;
  z-index:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#tre .steps h3{
  margin:6px 0 10px;
  color:var(--ink);
}
#tre .steps p{
  margin:0;
  color:var(--muted);
  max-width:30ch;
}

#tre .step-num{
  position:relative;
  width:144px;
  height:144px;
  display:grid;
  place-items:center;
  margin:0 0 4px;
  overflow:visible;
}
#tre .step-num span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:3.1rem;
  height:3.1rem;
  border-radius:50%;
  background:var(--clay);
  color:var(--green-d);
  font:italic 1.7rem/1 var(--serif);
  letter-spacing:.02em;
}
#tre .step-geo{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  pointer-events:none;
  overflow:visible;
}
#tre .step-geo .geo-rings{opacity:.3}
#tre .step-geo .geo-seed{opacity:.15}
#tre .step-geo .geo-wings{opacity:.28}

#tre .step-path{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
#tre .step-path path{
  stroke:var(--gold-t);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.55;
}

@media (prefers-reduced-motion:no-preference){
  #tre .step-path path{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    animation:tre-path 1.6s .2s ease forwards;
  }
}
@keyframes tre-path{
  to{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  #tre .step-path path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

@media (max-width:900px){
  #tre.band{padding-top:16px;padding-bottom:56px}
  #tre .steps{
    grid-template-columns:1fr;
    gap:36px;
    padding-top:12px;
    padding-left:4px;
  }
  #tre .steps li{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:16px;
    row-gap:4px;
    align-items:center;
    text-align:left;
    justify-items:start;
  }
  #tre .step-num{
    grid-row:1 / span 2;
    width:108px;
    height:108px;
    margin:0;
  }
  #tre .step-num span{font-size:1.45rem;width:2.7rem;height:2.7rem}
  #tre .steps h3{margin:0;grid-column:2;align-self:end}
  #tre .steps p{grid-column:2;align-self:start;max-width:none}
  #tre .feel{margin-top:36px;padding-top:22px}
}

@media (max-width:420px){
  #tre .step-num{width:96px;height:96px}
  #tre .step-num span{font-size:1.3rem;width:2.5rem;height:2.5rem}
  #tre .steps{column-gap:8px;padding-left:0}
  #tre .steps li{column-gap:10px}
}