/* Solutions, design 1: the line centred over a live scope board, five services side by side; then the six steps end in the conversation */
.sb1 .head1{text-align:center}
.sb1 .hx1{max-width:17em;margin:0 auto}
.sb1 .lead{margin:clamp(14px,2.4svh,22px) auto 0;max-width:40em}
.sb1 .lead b{font-weight:500;color:var(--paper);white-space:nowrap}
.sb1 .act{justify-content:center}
.board1{position:relative;margin-top:clamp(28px,5.4svh,56px)}
.board1 svg{position:absolute;left:0;right:0;top:-1px;width:100%;height:3px;overflow:visible}
.board1 .line{stroke:rgba(247,245,240,.22);stroke-width:2}
.board1 .dot{fill:var(--marine-tint)}
.board1 ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none}
.board1 ol>li{display:flex;flex-direction:column;padding:clamp(16px,3svh,26px) clamp(14px,1.4vw,24px) clamp(14px,2.4svh,20px);border-left:1px solid rgba(247,245,240,.12);transition:background .4s}
.board1 ol>li:first-child{border-left:0}
.board1 ol>li:hover,.board1 ol>li:target,.board1 ol>li.hit{background:rgba(247,245,240,.06)}
/* a signal passing a column lights it: a violet rule along its top, its number in violet (25-Oct-26) */
.board1 ol>li{position:relative}
.board1 ol>li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--violet-dark);transform:scaleX(0);transition:transform .7s var(--ease);pointer-events:none}
.board1 ol>li.sig::after{transform:scaleX(1)}
.board1 ol>li .n{transition:color .5s}
.board1 ol>li.sig .n{color:var(--violet-dark)}
.board1 .n{font-family:var(--mono);font-size:12.5px;color:#A9BFCC}
.board1 h2{margin-top:8px;font-weight:700;font-size:clamp(19px,min(1.6vw,3.2svh),25px);letter-spacing:-.02em;line-height:1.15}
.board1 p{margin-top:8px;color:#C9D6DF;font-size:14.5px;line-height:1.5}
.board1 ul{list-style:none;margin-top:clamp(10px,2svh,16px)}
.board1 ul li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:14.5px;font-weight:500}
.board1 ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marine-tint);flex:none}
.board1 .link{margin-top:auto;padding-top:clamp(12px,2.2svh,18px);align-self:flex-start;font-size:14px;color:var(--paper)}
/* how we start: six steps, one flow, then the first conversation */
.flow1{position:relative;margin-top:clamp(28px,5svh,52px)}
.flow1 svg{position:absolute;left:0;right:0;top:27px;width:100%;height:4px;overflow:visible}
.flow1 .line{stroke:rgba(247,245,240,.2);stroke-width:2}
.flow1 ol{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;list-style:none}
.flow1 li{display:flex;flex-direction:column;gap:14px}
.flow1 .n{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:var(--ink);border:2px solid rgba(247,245,240,.3);font-family:var(--mono);font-size:14px;color:var(--paper)}
.flow1 li:first-child .n{background:var(--marine);border-color:var(--marine)}
.flow1 b{font-weight:600;font-size:clamp(17px,min(1.4vw,2.8svh),21px);line-height:1.25;max-width:9em}
.flow1 figcaption{margin-top:clamp(18px,3svh,28px);font-family:var(--mono);font-size:12.5px;color:#A9BFCC}
.go1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:clamp(28px,5svh,52px);padding-top:clamp(22px,4svh,36px);border-top:1px solid rgba(247,245,240,.16)}
.go1 h2{font-weight:700;font-size:clamp(28px,min(3vw,5.6svh),46px);letter-spacing:-.035em;line-height:1}
.go1 p{margin-top:10px;color:#C9D6DF;font-size:var(--lead)}
.go1 .mail{display:block;margin-top:10px;font-family:var(--mono);font-size:13px;color:#A9BFCC;text-align:right}
/* the scope points under each service, compact so the whole board stays one screen */
.board1{margin-top:clamp(20px,3.4svh,40px)}
.sb1.scr{padding:clamp(20px,3.4svh,48px) 0}
.board1 ol>li{padding-top:clamp(12px,2svh,22px)}
.board1 p{margin-top:6px}
.board1 ul{margin-top:clamp(8px,1.4svh,12px);padding-top:clamp(8px,1.4svh,12px);border-top:1px solid rgba(247,245,240,.12)}
.board1 ul li{align-items:baseline;padding:2px 0;font-size:13.5px;line-height:1.4;font-weight:500;color:#E3EAEF}
.board1 ul li::before{flex:none;transform:translateY(-2px)}
.board1 .link{padding-top:clamp(10px,1.6svh,14px)}
@media (max-width:1100px){.board1 ol{grid-template-columns:repeat(3,minmax(0,1fr))}.board1 ol>li:nth-child(4){border-left:0}.board1 svg{display:none}}
@media (max-width:900px){
  .board1 ol{grid-template-columns:1fr}.board1 ol>li{border-left:0;border-top:1px solid rgba(247,245,240,.12)}
  .flow1 svg{display:none}.flow1 ol{grid-template-columns:1fr;gap:16px}.flow1 li{flex-direction:row;align-items:center}.flow1 .n{width:44px;height:44px;flex:none}
  .go1{grid-template-columns:1fr}.go1 .mail{text-align:left}
  /* the pause control sits under the last service, clear of its link */
  .sb1{padding-bottom:72px}
}