/* "Nothing gets switched off", built to the Scroll 33 structure: content rows
   with one thick stroke drawing itself down the whole section behind them. */

.keep-running{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  gap:clamp(80px,10vw,160px);
  padding:clamp(96px,9vw,150px) var(--gutter);
  background:var(--cloud);
  color:var(--ink);
}

.keep-running__row{
  width:min(100%,var(--max));
  margin-inline:auto;
  display:flex;
  justify-content:center;
  gap:32px;
}

.keep-running__col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  min-width:0;
}

.keep-running__row--single .keep-running__img{width:50%;margin-inline:auto}

.keep-running__img{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:16/10;
}

.keep-running__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.keep-running__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:min(100%,560px);
  margin:0 auto;
  padding:clamp(32px,3.6vw,52px);
  gap:16px;
  border-radius:18px;
  background:var(--mist);
}

.keep-running__card h2{
  margin:0;
  max-width:16ch;
  font-size:clamp(2.1rem,3.2vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.keep-running__card p{
  margin:0;
  max-width:46ch;
  color:var(--muted);
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.55;
}

.keep-running__card .btn{margin-top:12px}

/* The stroke sits behind everything, sized to the section rather than to any
   one row, so a single scrubbed draw covers the whole story. */
.keep-running__stroke{
  position:absolute;
  top:14%;
  left:50%;
  z-index:0;
  width:92%;
  height:100%;
  transform:translateX(-50%);
  pointer-events:none;
}

.keep-running__row{position:relative;z-index:1}

.keep-running__stroke svg{
  width:100%;
  height:auto;
  overflow:visible;
}

.keep-running__path{
  fill:none;
  /* Was --teal at .16, which on the mist background came out as a barely
     visible lilac. The stroke is the section's only piece of brand colour, so
     it has to actually read as purple behind the photographs. */
  stroke:var(--navy-2);
  opacity:.42;
}

@media (max-width:1000px){
  /* Let the first location card wait immediately below the commission payoff
     instead of opening the next section with another empty band. The negative
     margin brings the real card into the sticky frame's unused lower edge; it
     is not a duplicate or a decorative preview. */
  .keep-running{
    z-index:11;
    margin-top:-180px;
    padding:0 20px 80px!important;
    gap:80px;
  }
  .keep-running__row{flex-direction:column}
  .keep-running__row--single .keep-running__img{width:100%}
  .keep-running__stroke{top:8%;width:275%}
  .keep-running__card{width:100%}
}

/* The swirl carries the locations now: each photograph in the stroke's path is
   a link into that town's guide, captioned the same way the directory cards
   were. Sized against the same 16/10 box so the stroke geometry is unchanged. */
.keep-running__place{
  position:relative;
  display:block;
  text-decoration:none;
  color:#fff;
  background:var(--mist);
}

.keep-running__place::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(12,14,22,.72) 0%,rgba(12,14,22,.32) 38%,rgba(12,14,22,0) 68%);
}

.keep-running__place img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.keep-running__place:hover img{transform:scale(1.025)}

.keep-running__place>span{
  position:absolute;
  z-index:1;
  inset:auto clamp(18px,2vw,26px) clamp(16px,1.8vw,25px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.keep-running__place small{
  color:rgba(255,255,255,.72);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.keep-running__place strong{
  margin-top:4px;
  font-size:clamp(26px,2.4vw,40px);
  line-height:1.02;
  letter-spacing:-.03em;
}

.keep-running__place em{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-style:normal;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4);
  transition:text-decoration-color .25s ease;
}

.keep-running__place em .ds-arrow{
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .25s ease;
}

.keep-running__place:hover em{text-decoration-color:#fff}
.keep-running__place:hover em .ds-arrow{transform:translate(2px,-2px)}

.keep-running__place:focus-visible{outline:3px solid var(--navy-2);outline-offset:4px}

/* Closing step out of the swirl and into the questions below it. */
.keep-running__action{
  position:relative;
  z-index:1;
  width:min(100%,var(--max));
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.keep-running__action p{
  margin:0;
  max-width:44ch;
  color:var(--muted);
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.55;
}

.keep-running__places-cta{
  background:var(--signal-yellow);
  color:var(--ink);
}

.keep-running__places-cta:hover{
  background:var(--signal-blue);
  color:var(--ink);
}

.keep-running__places-cta:focus-visible{outline-color:var(--signal-blue)}

@media (max-width:1000px){
  .keep-running__row--single .keep-running__place{width:100%}
}

/* The section lost two rows when the swirl went down to three locations, and
   the stroke did not follow: the SVG is sized off its own width (aspect ratio
   1378:2760), so at 92% of a 1440 viewport it rendered 2653px tall inside a
   1966px section and overflow:hidden cut the last 687px off. The scrub still
   ran to completion, so the final quarter of the draw happened somewhere the
   visitor could not see and the stroke read as simply stopping.

   Anchoring the SVG on height instead of width keeps the curve's proportions
   and lets it finish inside the section whatever the row count. Desktop only:
   the narrow rule below deliberately oversizes and crops the swirl. */
@media (min-width:1001px){
  .keep-running__stroke{
    top:0;
    display:flex;
    justify-content:center;
    width:100%;
    height:100%;
  }

  .keep-running__stroke svg{
    width:auto;
    height:100%;
    max-width:none;
  }
}

/* --- The slab wall on /crm ------------------------------------------------
   The same pen as the homepage, given the whole tour to cross. The wall is a
   plain wrapper: the slabs keep their own padding and backgrounds, and only
   the stroke layer is added behind them. */
.slab-wall{
  position:relative;
  overflow:hidden;
  /* Deliberately NOT the .keep-running flex column: these slabs already own
     their spacing, and a gap here would double it. */
  display:block;
  padding:0;
  background:none;
}

.slab-wall>.slab{position:relative;z-index:1}

.slab-wall__stroke{
  top:0;
  height:100%;
}

@media (min-width:1001px){
  /* Anchored on height like the homepage stroke, for the same reason: sized
     off its own width this 1378x5600 path would render several thousand
     pixels taller than the wall and overflow:hidden would eat the end of it. */
  .slab-wall__stroke{
    display:flex;
    justify-content:center;
    width:100%;
  }
  .slab-wall__stroke svg{width:auto;height:100%;max-width:none}
}

@media (max-width:1000px){
  /* Narrow screens oversize and crop the swirl on purpose, matching the
     homepage rule: a full-width fit at this aspect ratio is a thin squiggle. */
  .slab-wall__stroke{width:230%;left:50%;transform:translateX(-50%)}
}