.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: center;
  background-image: url('https://milesaheadfootball.co.uk/wp-content/uploads/2026/07/hero-bw.jpg');
  background-size: cover;
  background-position: center;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0) 75%),
              linear-gradient(180deg, rgba(17,17,17,0) 75%, #111111 100%);
  z-index: 0;
}
.about-hero .container { position: relative; z-index: 1; }
.about-hero h1 { font-size: clamp(34px, 6vw, 72px); max-width: 14ch; }

/* Small persistent MA signature mark, fixed bottom-right, follows scroll */
body.page-about::after {
  content: "";
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  background-image: url('https://milesaheadfootball.co.uk/wp-content/uploads/2026/07/ma_hero_watermark_v2-1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.1;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 767px) {
  body.page-about::after { width: 44px; height: 44px; bottom: 14px; right: 14px; }
}

.mile-grid { padding-block: 90px; position: relative; overflow: hidden; }
.mile-footsteps {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.mile-footsteps circle { fill: var(--gold); }
@media (max-width: 900px) {
  .mile-footsteps { display: none; }
}
.mile-item {
  width: min(480px, 46%);
  border-left: 3px solid var(--gold);
  padding-left: 32px;
  position: relative;
  z-index: 1;
}
.mile-item.mile-1 { float: left; }
.mile-item.mile-2 { float: right; margin-top: 280px; }
.mile-item.mile-3 { clear: both; margin-top: 50px; }

.mile-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 4px 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.mile-item h2 { color: var(--green); font-family: var(--font-body); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.mile-item p { color: #e5e3dc; margin-bottom: 1.1em; }

@media (max-width: 900px) {
  .mile-item { float: none; width: 100%; margin-top: 0 !important; margin-bottom: 50px; }
}
@media (max-width: 640px) {
  .mile-item { border-left: none; padding-left: 20px; }
}
.testimonials { padding-block: 90px; text-align: center; }
.testimonials h6.eyebrow { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; color: var(--white); text-transform: uppercase; margin-bottom: 40px; }
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; text-align: left; max-width: 820px; margin-inline: auto; }
.testimonial { border-left: 2px solid var(--gold); padding: 4px 0 4px 24px; }
.testimonial p.quote { font-style: italic; margin-bottom: 8px; }
.testimonial p.attr { color: var(--gold); font-size: 14px; margin: 0; }
.testimonials .more { display: inline-block; margin-top: 36px; }
@media (max-width: 700px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}