/* About page, "Behind the mark": the Fortis mark draws itself.
   The F builds first, the G ring traces round it, the peach bar lands last. */
.mark-story .section-inner{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:4.5rem;align-items:center}
.mark-story .ms-eyebrow{display:block;color:var(--peach);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:1rem}
.mark-story h2{color:var(--paper);margin:0 0 1rem}
.mark-story h2 span{color:var(--peach)}
.mark-story .ms-lede{color:var(--on-dark-dim);margin:0 0 2rem;max-width:560px}
.ms-stage{position:relative;display:grid;place-items:center;aspect-ratio:1}
.ms-stage::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,149,107,.22),transparent);filter:blur(18px);opacity:0;transition:opacity 1.2s ease 4.6s}
.ms-mark{width:100%;height:auto;overflow:visible;transform-origin:50% 50%}
.ms-mark path{fill:none;stroke-linecap:butt}
.ms-stem,.ms-arm,.ms-reveal{stroke-dasharray:100;stroke-dashoffset:100}
.ms-ring{opacity:0}
.ms-flow{stroke-dasharray:1.2 2.8;opacity:0}
.ms-flow2{stroke-dasharray:4 6;opacity:0}
.ms-bar{opacity:0;transform:translateX(-14px)}
.ms-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:560px}
.ms-steps li{display:grid;grid-template-columns:46px 1fr;gap:1rem;align-items:start;padding:1rem 1.1rem;border-radius:12px;border:1px solid var(--rule-dark);
  background:rgba(255,255,255,.03);opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease,border-color .7s ease}
.ms-steps b{display:block;color:var(--paper);font-size:1.05rem;margin-bottom:.15rem}
.ms-steps p{margin:0;color:var(--on-dark-dim);font-size:.95rem}
.ms-letter{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:rgba(242,239,233,.08);color:var(--paper);font-weight:800;font-size:1.25rem}
.ms-letter.peach{background:rgba(232,149,107,.18);color:var(--peach)}

/* the sequence, started when the band scrolls into view */
/* the G arrives as data in flow: packets stream along the arc as it opens, then settle into the solid ring */
.mark-story.play .ms-reveal{animation:msDraw 2.3s cubic-bezier(.45,0,.25,1) 1.6s forwards}
.mark-story.play .ms-flow{animation:msStream 1s linear 1.6s infinite,msFlowFade 3.1s ease 1.6s forwards}
.mark-story.play .ms-flow2{animation:msStream2 1.6s linear 1.6s infinite,msFlowFade 3.1s ease 1.6s forwards}
.mark-story.play .ms-ring{animation:msSolid .9s ease 3.7s forwards}
.mark-story.play .ms-stem{animation:msDraw .7s cubic-bezier(.5,0,.25,1) .2s forwards}
.mark-story.play .ms-arm{animation:msDraw .6s cubic-bezier(.5,0,.25,1) .85s forwards}
.mark-story.play .ms-bar{animation:msBar .75s cubic-bezier(.2,1.3,.4,1) 4.4s forwards}
.mark-story.play .ms-mark{animation:msSettle .6s ease-out 5.1s,msBreathe 5s ease-in-out 5.8s infinite}
.mark-story.play .ms-stage::before{opacity:1}
.mark-story.play .ms-steps li:nth-child(1){opacity:1;transform:none;transition-delay:.3s;border-color:rgba(242,239,233,.28)}
.mark-story.play .ms-steps li:nth-child(2){opacity:1;transform:none;transition-delay:1.7s;border-color:rgba(242,239,233,.28)}
.mark-story.play .ms-steps li:nth-child(3){opacity:1;transform:none;transition-delay:4.4s;border-color:rgba(232,149,107,.45)}
@keyframes msDraw{to{stroke-dashoffset:0}}
@keyframes msStream{to{stroke-dashoffset:-8}}
@keyframes msStream2{to{stroke-dashoffset:-20}}
@keyframes msFlowFade{0%{opacity:0}8%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes msSolid{to{opacity:1}}
@keyframes msBar{to{opacity:1;transform:none}}
@keyframes msSettle{40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes msBreathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(232,149,107,0))}50%{transform:scale(1.025);filter:drop-shadow(0 0 18px rgba(232,149,107,.35))}}

@media(max-width:900px){.mark-story .section-inner{grid-template-columns:1fr;gap:2.5rem}.ms-stage{max-width:300px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){
  .ms-stem,.ms-arm{stroke-dashoffset:0}.ms-ring,.ms-bar{opacity:1;transform:none}.ms-flow,.ms-flow2{display:none}
  .ms-steps li{opacity:1;transform:none}
  .mark-story.play *{animation:none!important;transition:none!important}}
.ms-barchip{display:block;width:22px;height:6px;background:var(--peach)}

/* compact strip */
.mark-story.section{padding:3.25rem 2.75rem}
.mark-story .section-inner{grid-template-columns:150px 1fr;gap:2.5rem}
.mark-story h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .4rem}
.mark-story .ms-eyebrow{margin-bottom:.5rem}
.mark-story .ms-lede{margin:0 0 1.1rem;font-size:.98rem}
.ms-stage::before{inset:6%;filter:blur(12px)}
.ms-steps{grid-template-columns:repeat(auto-fit,minmax(230px,max-content));justify-content:start;gap:.6rem;max-width:none}
.ms-steps li{grid-template-columns:auto auto;align-items:center;gap:.6rem;padding:.45rem .9rem .45rem .45rem;border-radius:999px;color:var(--on-dark-dim);font-size:.92rem}
.ms-steps li b{display:inline;font-size:inherit;margin:0;color:var(--paper)}
.ms-letter{width:30px;height:30px;border-radius:50%;font-size:.95rem}
.ms-barchip{width:14px;height:4px}
@media(max-width:900px){.mark-story .section-inner{grid-template-columns:1fr;gap:1.25rem;text-align:center}.ms-stage{max-width:120px}
  .ms-steps{grid-template-columns:1fr;justify-content:center;justify-items:center}}