/* Mutual fund advisory page */
.goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px;border-top:1px solid var(--line-strong);padding-top:30px}
.goal{display:flex;flex-direction:column;gap:12px}
.goal__mark{width:100%;max-width:180px;height:48px;margin-bottom:10px;overflow:visible}
.goal h3{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.1}
.goal p{font-size:16.5px;line-height:1.7;color:var(--ink-soft)}
.goal__h{margin-top:auto;padding-top:12px;font-family:var(--f-text);font-style:italic;font-size:16px;color:var(--gold-deep)}
@media (max-width:900px){.goals{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.goals{grid-template-columns:1fr}}

.flow svg{width:100%;height:auto;overflow:visible}
.flow text{font-family:var(--f-ui);font-size:14px;letter-spacing:.03em;fill:var(--ink-muted)}
.flow__vessel{fill:none;stroke:var(--ink);stroke-width:1.2}
.flow__level{fill:rgba(145,106,46,.24)}
.flow__wave--b{fill:rgba(199,168,104,.30)}
.flow__in rect{fill:var(--gold)}
.flow__out rect{fill:var(--gold-hair)}

.flow__in rect{animation:flowIn 1.6s linear infinite}
.flow__out rect{animation:flowOut 2.4s linear infinite}
/* The goal only ever fills: it rises once when it comes into view, then its surface keeps gently moving at the top. */
.flow__fill{transform:translateY(122px)}
.flow__fill--v{transform:translateY(140px)}
.flow.is-in .flow__fill{animation:fillRise 9s cubic-bezier(.22,1,.36,1) forwards}
.flow.is-in .flow__fill--v{animation-name:fillRiseV}
.flow__wave{animation:waveA 6s linear infinite}
.flow__wave--b{animation:waveB 9s linear infinite}
.flow__wave--v{animation-name:waveAV}
.flow__wave--b.flow__wave--v{animation-name:waveBV}
@keyframes flowIn{from{transform:translateX(0)}to{transform:translateX(36px)}}
@keyframes flowOut{from{transform:translateX(0)}to{transform:translateX(36px)}}
@keyframes fillRise{from{transform:translateY(122px)}to{transform:translateY(0)}}
@keyframes fillRiseV{from{transform:translateY(140px)}to{transform:translateY(0)}}
@keyframes waveA{from{transform:translateX(0)}to{transform:translateX(-109px)}}
@keyframes waveB{from{transform:translateX(-109px)}to{transform:translateX(0)}}
@keyframes waveAV{from{transform:translateX(0)}to{transform:translateX(-89px)}}
@keyframes waveBV{from{transform:translateX(-89px)}to{transform:translateX(0)}}
.goal__mark path,.goal__mark rect{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.goal__mark circle{fill:var(--gold)}
.goal__mark rect{fill:rgba(145,106,46,.15)}
.goal__mark text{font-family:var(--f-ui);font-size:10px;fill:var(--gold-deep)}
/* The SIP/SWP flow is the point of this section, so it keeps moving even where devices ask for reduced motion (it is slow and never flashes) */
@media (prefers-reduced-motion:reduce){
  .flow__in rect{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
  .flow__out rect{animation-duration:2.4s!important;animation-iteration-count:infinite!important}
}

/* SIP / SWP on phones: a tall diagram — money drops in from above, the goal fills, withdrawals flow out below */
.flow__tall{display:none}
@media (max-width:700px){
  .flow__wide{display:none}
  .flow__tall{display:block;width:100%;max-width:340px;margin:0 auto}
  .flow__tall text{font-size:15px}
  .flowv__label{font-family:var(--f-text)!important;font-style:italic;font-size:17px!important;fill:var(--gold-deep)!important}
  .flowv__in rect{fill:var(--gold);animation:flowDown 1.5s linear infinite!important}
  .flowv__out rect{fill:var(--gold-hair);animation:flowDown 2.2s linear infinite!important}
}
@keyframes flowDown{from{transform:translateY(0);opacity:.35}50%{opacity:1}to{transform:translateY(28px);opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .flow__fill,.flow.is-in .flow__fill{animation:none;transform:none}
  .flow__wave{animation:none}
}