/* ============================================================
   Detroit Energy Healing — enhancements
   "Where should I start?" flowchart + accessibility.
   Loads after styles.css.
   ============================================================ */

/* ---------- "Where should I start?" flowchart ---------- */
.flow-card{background:var(--cream-2);border:1px solid rgba(111,99,24,.24);border-radius:26px;padding:28px 26px 20px;max-width:1040px;margin:0 auto;}
.flow-svg{display:block;width:100%;height:auto;}
.flow-svg a{cursor:pointer;}
.flow-svg .blob{transition:fill-opacity .3s ease;}
.flow-svg .f-prompt{font-family:var(--body);font-size:16px;fill:#33402f;}
.flow-svg .f-service{font-family:var(--serif);font-weight:600;font-size:23px;fill:#12372a;transition:fill .25s ease;}
.flow-svg .f-sub{font-family:var(--body);font-size:14.5px;fill:#5a6355;}
.flow-svg .f-star{fill:var(--yellow);}
.flow-svg a:hover .f-service{fill:var(--orange);}
.flow-svg a:hover .blob{fill-opacity:.24;}
.flow-svg a:focus-visible{outline:none;}
.flow-svg a:focus-visible .f-service{fill:var(--orange);text-decoration:underline;}
.flow-foot{text-align:center;font-family:var(--script);font-style:italic;font-size:1.45rem;color:var(--orange);margin-top:4px;}

.flow-stack{display:none;gap:16px;}
.flow-step{background:#fff;border:1px solid rgba(111,99,24,.28);border-radius:20px;padding:20px 22px;border-top:5px solid var(--olive);}
.flow-step:nth-of-type(2){border-top-color:var(--pink);}
.flow-step:nth-of-type(3){border-top-color:var(--forest-2);}
.flow-step .f-q{font-size:1rem;color:#33402f;margin-bottom:8px;}
.flow-step .f-down{display:block;text-align:center;color:var(--pink);font-size:1.3rem;line-height:1;margin:2px 0 8px;}
.flow-step a{display:inline-block;font-family:var(--serif);font-weight:600;font-size:1.22rem;color:var(--forest);text-decoration:none;}
.flow-step a:hover{color:var(--orange);}
.flow-step .f-note{font-size:.94rem;color:#5a6355;margin-top:4px;}

@media (max-width: 860px) {
  .flow-svg { display: none; }
  .flow-stack { display: grid; }
  .flow-card { padding: 24px 18px 20px; }
  .flow-foot { font-size: 1.25rem; }
}

/* ---------- reduced motion ----------
   Honours the visitor's OS setting. Prices and content must never
   depend on an animation finishing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .delay-1,
  .delay-2,
  .delay-3 {
    opacity: 1 !important;
    transform: none !important;
  }
  .starfield,
  .ribbon-track,
  .drift,
  .floaty,
  .spin-slow,
  .pulse,
  .shimmer-text,
  .scroll-cue {
    animation: none !important;
  }
  .ribbon-track { transform: none !important; }
}

/* ---------- tap targets ----------
   Nav links only. The .btn rules in styles.css already clear 44px
   through their own padding, so they are left alone. */
.nav-links a { padding-top: 6px; padding-bottom: 6px; }