/* Scroll-driven visuals: #convert staircase and #deliver timeline spine. */
:root{--flow-accent:#aa4d2d;--flow-ink:#24362e;--flow-line:#c9d3c2;--flow-paper:#f8f6f0}
@media(prefers-color-scheme:dark){:root{--flow-line:#4a5d52}}

/* Staircase: cards ascend left to right and grow as scrolled into view. */
.company-page .price-ladder{--base:0px;align-items:end;counter-reset:rung}
.company-page .price-ladder article{--g:0;position:relative;
  min-height:calc(150px + var(--s,0) * 46px * var(--g));
  background-image:linear-gradient(var(--flow-accent),var(--flow-accent));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:calc(var(--g) * 100%) 4px;
  border-bottom:1px solid var(--line)}
.company-page .price-ladder article:nth-child(1){--s:0}
.company-page .price-ladder article:nth-child(2){--s:1}
.company-page .price-ladder article:nth-child(3){--s:2}
.company-page .price-ladder article:nth-child(4){--s:3;background-color:var(--flow-ink);color:var(--flow-paper)}
.company-page .price-ladder article:nth-child(4) span{color:#c8d3c0}
.company-page .price-ladder.flow-on article{transition-property:opacity,transform,box-shadow,border-color,min-height,background-size}
.company-page .price-ladder.flow-on article{transition-duration:.65s,.65s,.25s,.25s,1s,1s;transition-timing-function:ease,ease,ease,ease,cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1)}
/* baseline drawn first (axis before data), then the steps grow from it */
.company-page .price-ladder{position:relative}
.company-page .price-ladder:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flow-ink);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.company-page .price-ladder.flow-on.flow-base:after{transform:scaleX(1)}
.company-page .price-ladder article:hover{box-shadow:0 12px 30px -14px rgba(37,53,46,.35)}
@media(max-width:1000px){
  .company-page .price-ladder{align-items:stretch}
  .company-page .price-ladder article{min-height:0}
}
@media(max-width:600px){
  .company-page .price-ladder{gap:10px}
  /* funnel of widening steps on mobile */
  .company-page .price-ladder article{width:calc(58% + var(--s,0) * 14% * var(--g) + (1 - var(--g)) * 0%);min-width:min(100%,260px);max-width:100%}
}

/* Timeline spine beside the delivery sequence. */
.company-page .sequence{position:relative;padding-left:38px;--sp:0}
.company-page .sequence:before,.company-page .sequence:after{content:'';position:absolute;left:9px;top:34px;bottom:34px;width:2px}
.company-page .sequence:before{background:var(--flow-line)}
.company-page .sequence:after{background:var(--flow-accent);transform-origin:top;transform:scaleY(var(--sp));transition:transform .25s linear}
.company-page .sequence li .flow-dot{position:absolute;left:-38px;top:30px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid var(--flow-line);background:var(--flow-paper);transition:background .4s,border-color .4s,box-shadow .4s;z-index:1}
.company-page .sequence li .flow-dot:after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--flow-accent);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.company-page .sequence li.flow-hit .flow-dot{border-color:var(--flow-accent);box-shadow:0 0 0 5px rgba(170,77,45,.14)}
.company-page .sequence li.flow-hit .flow-dot:after{transform:scale(1)}
@media(max-width:600px){.company-page .sequence{padding-left:30px}.company-page .sequence:before,.company-page .sequence:after{left:7px}.company-page .sequence li .flow-dot{left:-30px;width:16px;height:16px;top:32px}.company-page .sequence li .flow-dot:after{inset:3px}}

@keyframes flow-pulse{from{box-shadow:0 0 0 0 rgba(170,77,45,.45)}to{box-shadow:0 0 0 12px rgba(170,77,45,0)}}
.company-page .sequence li.flow-hit .flow-dot{animation:flow-pulse .8s ease-out 1}
@media(prefers-reduced-motion:reduce){.company-page .price-ladder:after{transform:scaleX(1);transition:none}.company-page .sequence li.flow-hit .flow-dot{animation:none}
  .company-page .price-ladder article{--g:1!important;transition:none!important}
  .company-page .sequence:after{transition:none}
  .company-page .sequence li .flow-dot,.company-page .sequence li .flow-dot:after{transition:none}
}
@media print{.company-page .price-ladder article{--g:1!important}.company-page .sequence{--sp:1!important}.company-page .sequence li .flow-dot:after{transform:scale(1)}}