/* ==========================================================================
   v3 — page hero, associations, footer mark, hero visual stack
   ========================================================================== */

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  padding: var(--space-6) 0 var(--space-5);
  isolation: isolate;
}
.page-hero::before{ display: none; }   /* drop the old flat grid overlay */
.page-hero-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.02);
}
.page-hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(20,26,23,0.96) 0%, rgba(20,26,23,0.88) 42%, rgba(20,26,23,0.55) 75%, rgba(0,100,53,0.45) 100%),
    radial-gradient(ellipse 60% 120% at 88% 40%, rgba(255,203,5,0.16), transparent 70%);
}
/* thin brand rule along the bottom edge */
.page-hero::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 45%, transparent 100%);
  opacity: 1;
}
.page-hero-inner{ position: relative; z-index: 2; }
.page-hero h1{ color: #fff; max-width: 820px; }
.page-hero .eyebrow{ color: var(--color-accent); }
.page-hero-lede{
  color: rgba(255,255,255,0.78);
  max-width: 640px;
  margin-top: 16px;
}

/* breadcrumb now lives inside the hero */
.page-hero-crumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.84rem;
  margin-bottom: var(--space-3);
  color: rgba(255,255,255,0.6);
}
.page-hero-crumbs a{ color: rgba(255,255,255,0.72); }
.page-hero-crumbs a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-hero-crumbs .sep{ opacity: .45; }
.page-hero-crumbs [aria-current]{ color: var(--color-accent); font-weight: 600; }

@media (max-width: 700px){
  .page-hero{ padding: var(--space-5) 0 var(--space-4); }
  .page-hero-crumbs{ font-size: 0.78rem; margin-bottom: var(--space-2); }
}

/* ---------- Hero right-hand visual stack (crossfades with the copy) ---------- */
.hero-visual{ position: relative; min-height: 430px; }
.hero-visual-slide{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
  pointer-events: none;
}
.hero-visual-slide.is-active{
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* keep the mockups from dominating the hero */
.hero-visual-slide .mock-window{ width: 100%; max-width: 440px; }
.hero-visual-slide .mock-phone{ width: 212px; }
.hero-visual-slide .mock-figure{ width: 100%; max-width: 440px; }
.hero-visual-slide .mock-caption{ color: rgba(255,255,255,0.6); }

@media (max-width: 980px){
  .hero-visual{ min-height: 380px; margin-top: var(--space-4); }
}
@media (max-width: 560px){
  .hero-visual{ min-height: 340px; }
  .hero-visual-slide .mock-window,
  .hero-visual-slide .mock-figure{ max-width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-visual-slide{ transition: opacity .01ms; transform: none; }
  .hero-visual-slide.is-active{ transform: none; }
}

/* ---------- Our Associations ---------- */
.assoc-section{
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.assoc-head{ text-align: center; margin-bottom: var(--space-4); }
.assoc-head .eyebrow{ justify-content: center; }
.assoc-head h2{ font-size: 1.15rem; color: var(--color-text-muted); font-weight: 600; }
.assoc-row{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(var(--space-4), 7vw, var(--space-7));
  flex-wrap: wrap;
}
.assoc-item{ display: flex; align-items: center; }
.assoc-item img{
  height: 56px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.assoc-item img:hover{ filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
:root[data-theme="dark"] .assoc-item img{ filter: grayscale(1) brightness(1.9); opacity: .75; }
:root[data-theme="dark"] .assoc-item img:hover{ filter: none; opacity: 1; }
@media (max-width: 560px){
  .assoc-item img{ height: 42px; max-width: 150px; }
  .assoc-row{ gap: var(--space-4); }
}

/* ---------- Footer: Velocity Vue mark ---------- */
.footer-vv{
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
}
.footer-vv-label{
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.footer-vv img{
  height: 24px;
  width: auto;
  display: block;
}
.footer-vv-chip{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
}