/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:110px; padding-bottom:140px; overflow:hidden;
}
.hero .bg-photo{ position:absolute; inset:0; z-index:0; 
  /* opacity:.28;  */
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.55), rgba(var(--bg-rgb),.92) 70%),
    radial-gradient(60% 55% at 78% 18%, rgba(var(--accent-rgb),.10), transparent 60%);
  pointer-events:none;
}
.hero-ghost-word{
  font-family:var(--f-display); font-weight:700; letter-spacing:-0.05em;
  font-size:clamp(3.5rem, 14vw, 11rem); color:transparent; -webkit-text-stroke:1px var(--line);
  text-align:center; position:absolute; top:12%; left:50%; transform:translateX(-50%);
  white-space:nowrap; z-index:1; user-select:none;
}
.hero-main{ position:relative; z-index:2; text-align:center; }
.hero-main img{
  width: auto;
  height: 150px;
  justify-content: center;
  align-content: center;
  margin-top: 80px;
  
}
.hero-title{
  font-family:var(--f-display); font-weight:700; letter-spacing:-0.045em;
  font-size:clamp(3.2rem, 10.5vw, 8.4rem); line-height:.94; margin:0 0 8px;
}
.hero-title .script{ font-size:.72em; margin-left:.08em; display:inline-block; }
.hero-cta-row{ margin-top:38px; display:flex; justify-content:center; }

.hero-strip{
  position:relative; z-index:2; margin-top:auto;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.1fr 1.6fr auto; gap:40px; align-items:center;
  padding-top:26px;
}
.hero-strip .label-sm{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:700; margin-bottom:6px; }
.hero-strip p{ margin:0; color:var(--ink-dim); font-size:.95rem; line-height:1.5; }

@media (max-width:820px){ .hero-strip{ grid-template-columns:1fr; text-align:left; } }

/* ============ MISSION RUNBAND (teaser) ============ */
.runband{
  position:relative; min-height:80vh; display:flex; flex-direction: column; align-items:center;
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.runband .bg-photo{ position:absolute; inset:0; opacity:.35; }
.runband::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(var(--bg-rgb),.95) 15%, rgba(var(--bg-rgb),.45) 55%, rgba(var(--bg-rgb),.9) 100%);
}
.runband-inner{ position:relative; z-index:2; width:100%; }
.runband .stack{ margin-bottom:26px; }
.runband .ghost{ font-size:clamp(2.4rem, 6.2vw, 5rem); }
.runband .solid{ font-size:clamp(2.6rem, 7vw, 5.6rem); }
.quote-sig{ margin-top:44px; display:flex; align-items:center; gap:18px; }
.quote-sig .mark{ font-family:var(--f-script); font-style:italic; font-size:2.1rem; color:var(--ink); }
.quote-sig .who{ font-size:.85rem; color:var(--ink-dim); line-height:1.4; }
.quote-sig .who b{ color:var(--ink); display:block; font-weight:700; }
.next-run-pill{
  position:absolute; right:var(--pad); bottom:44px; z-index:3;
  display:flex; align-items:center; gap:22px;
  background:rgba(var(--bg-rgb),.65); backdrop-filter:blur(10px); border:1px solid var(--line-strong);
  padding:16px 16px 16px 22px;
}
.next-run-pill .tag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); font-weight:700; }
.next-run-pill .date{ font-weight:700; font-family:var(--f-display); }
@media (max-width:800px){ .next-run-pill{ position:static; margin-top:34px; justify-content:space-between; } }

/* ============ TEASER GRID (3 featured cities → link to /runs.html) ============ */
.teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px; }
.teaser-card{ background:var(--bg); padding:0; position:relative; overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; }
.teaser-card .bg-photo{ position:absolute; inset:0; opacity:.4; transition:opacity .5s var(--ease), transform .6s var(--ease); }
.teaser-card:hover .bg-photo{ opacity:.65; transform:scale(1.06); }
.teaser-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--bg-rgb),.95), transparent 65%); }
/* Glowing accent border on hover */
.teaser-card::before{
  content:'';
  position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid transparent;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.teaser-card:hover::before{
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: inset 0 0 28px rgba(var(--accent-rgb),.07);
}
.teaser-card .content{ position:relative; z-index:2; padding:28px; }
.teaser-card .tag{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:700; }
.teaser-card h3{ font-family:var(--f-display); font-size:2rem; font-weight:700; letter-spacing:-0.02em; margin:6px 0 14px; transition: color .3s; }
.teaser-card:hover h3{ color: var(--accent); }
.teaser-card .arrow-link{ font-size:.85rem; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.teaser-card .arrow-link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.teaser-card:hover .arrow-link svg{ transform:translateX(5px); }
.teaser-cta-row{ margin-top:36px; text-align:center; }

@media (max-width:980px){ .teaser-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .teaser-grid{ grid-template-columns:1fr; } }

/* ============ SCROLL INDICATOR ============ */
@keyframes scroll-bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:.7; }
  50%     { transform:translateX(-50%) translateY(8px); opacity:1; }
}
.scroll-indicator{
  position:absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation: scroll-bounce 1.8s ease-in-out infinite;
  color: var(--ink-dim);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: default;
  user-select: none;
}
.scroll-indicator svg{
  width: 20px; height: 20px;
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* ============ RUNBAND animated gradient overlay ============ */
.runband::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    225deg,
    rgba(var(--accent-rgb),.06) 0%,
    transparent 40%,
    rgba(var(--accent-rgb),.04) 100%
  );
  z-index:2;
  pointer-events:none;
  animation: aag-float 8s ease-in-out infinite alternate;
}