/* ====================================================================
 * THE OPENING BAND OF /process-tools/  (.cclp-intro)
 *
 * The band is the hinge between the hero and the three system cards. It
 * used to be a headline and three long paragraphs, all centred, all of it
 * describing an idea that a drawing says in one look: a process is defined,
 * the people on the floor are led through it, the data falls out of the
 * work, and what the numbers say goes back into the definition. That is a
 * control loop, and it is the same loop an ISO 9001 audit asks for.
 *
 * So the band now carries three things instead of one wall of text:
 *
 *   the head        headline and one short paragraph, centred as before
 *   the aside       a photograph of the place all of this happens in, and
 *                   the two remaining paragraphs under it
 *   the loop        four stations on a closed circuit, with a light that
 *                   walks it once per cycle
 *
 * From 1025px up the aside and the loop stand side by side, below that they
 * stack in that order: the picture grounds the claim, the two paragraphs
 * explain it, and the drawing closes the section.
 *
 * WHAT IS DRAWN WHERE
 * The look of the loop lives here. assets/ccx-lpintro.js only measures the
 * box and writes the path of the circuit, its length, and the moment each
 * station is passed. Nothing about the drawing is decided in the script.
 *
 * SPECIFICITY
 * The paragraphs of the aside are ordinary heading widgets and carry the
 * typography the page builder wrote for them, which reaches them through
 * four class names. The rules that change their size and alignment in the
 * narrow column therefore name five, which is why the chains below look
 * longer than they need to be.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * THE HEAD
 *
 * Headline and lede keep the centred rhythm every other band on this page
 * opens with. Only the measure is pulled in a little: the lede is two
 * sentences now and 860px would break it across three ragged lines.
 * -------------------------------------------------------------------- */
.cclp-intro .cclp-introhead {
  width: 100%;
}

@media (min-width: 1025px) {
  .cclp-intro .cclp-introhead .elementor-widget-heading + .elementor-widget-heading
    .elementor-heading-title {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* --------------------------------------------------------------------
 * THE SPLIT
 *
 * Two columns from 1025px up. The aside is held at a share rather than a
 * fixed width so it shrinks with the window, and capped at 460px because a
 * paragraph wider than that stops being a column and starts being a block.
 * The loop takes what is left and never less than it needs: min-width 0 is
 * what lets a flex item shrink below the width of its own content, which a
 * drawing this wide would otherwise refuse to do.
 *
 * align-items: flex-start, so the two columns start on the same line and
 * the shorter one does not float in the middle of the taller one.
 * -------------------------------------------------------------------- */
.cclp-intro .cclp-introsplit {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 0 20px;
  margin-top: 6px;
}

@media (min-width: 1025px) {
  .cclp-intro .cclp-introsplit {
    flex-direction: row;
    align-items: flex-start;
    gap: 52px;
    margin-top: 18px;
    /* The band itself is 1416px wide, which is right for a row of cards and
     * far too wide for this: at that measure the four sentences of the loop
     * end after two thirds of their column and the drawing floats in the
     * rest. 1180 puts the two columns at roughly 430 and 660, which is a
     * paragraph and a diagram, and it keeps the widening of the band
     * orderly: the headline runs to 960, the lede to 820, this to 1180. */
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .cclp-intro .cclp-introsplit > .cclp-introaside {
    flex: 0 1 38%;
    width: auto;
    max-width: 460px;
    min-width: 0;
  }
  .cclp-intro .cclp-introsplit > .cclp-introloop {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* Below the split the two blocks are stacked and both are centred on the
 * band, the picture first. A phone gets the band padding of the section, so
 * nothing here adds a second one. */
@media (max-width: 1024px) {
  .cclp-intro .cclp-introsplit {
    align-items: center;
  }
  .cclp-intro .cclp-introsplit > .cclp-introaside,
  .cclp-intro .cclp-introsplit > .cclp-introloop {
    width: 100%;
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .cclp-intro .cclp-introsplit {
    padding: 0;
    gap: 26px;
  }
}


/* --------------------------------------------------------------------
 * THE ASIDE
 *
 * A photograph, then the two paragraphs. The picture is cropped by the
 * frame rather than by the file, so a replacement of any proportion lands
 * on its feet; --cclp-photo is the one place that ratio is written down.
 *
 * The lower edge of the picture is washed into the page, because a hard
 * horizon at the bottom of a photograph on a navy page reads as a sticker.
 * The wash sits on the widget container, which is why that gets a position
 * of its own.
 * -------------------------------------------------------------------- */
.cclp-intro .cclp-introaside {
  --cclp-photo: 4 / 3;
}

.cclp-intro .cclp-introaside .cclp-introphoto .elementor-widget-container {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgb(44, 51, 76);
  background: #181f32;
  box-shadow: 0 18px 40px rgba(4, 8, 20, 0.38);
}

.cclp-intro .cclp-introaside .cclp-introphoto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cclp-photo);
  object-fit: cover;
  object-position: center 42%;
}

.cclp-intro .cclp-introaside .cclp-introphoto .elementor-widget-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 18, 39, 0) 0%,
    rgba(11, 18, 39, 0.34) 62%,
    rgba(11, 18, 39, 0.72) 100%);
}

/* The page builder puts twenty pixels between two widgets of its own
 * accord, so this is the rest of the distance to the first paragraph and
 * not the whole of it. Thirty in total: enough that the picture ends and
 * the text begins, little enough that the two still read as one column. */
.cclp-intro .cclp-introaside .cclp-introphoto {
  margin-bottom: 10px;
}

/* The two paragraphs in the column. Twenty pixels was the size of a line
 * that ran the full 860px of the old layout; in a column of 420 it turns
 * three sentences into eight lines. Seventeen on a 27px lead keeps the same
 * colour of type at the width the column really has.
 *
 * The alignment is set on the paragraph itself and not on the widget the
 * page builder wrote it into, so the centred value from the element
 * settings is simply not inherited here and no weight has to be won. */
@media (min-width: 1025px) {
  .cclp-intro .cclp-introsplit .cclp-introaside > .elementor-widget-heading
    .elementor-heading-title {
    text-align: left;
    font-size: 17px;
    line-height: 27px;
  }
}


/* --------------------------------------------------------------------
 * THE LOOP: THE BOX AROUND IT
 *
 * No frame and no fill. The band already carries a framed picture on the
 * left, and a second box beside it would turn a drawing into a widget. What
 * it does get is a wash in the corner the circuit starts in, so the drawing
 * sits on something instead of floating on the navy.
 * -------------------------------------------------------------------- */
.cclp-intro .cclp-introloop {
  position: relative;
}

.cclp-intro .cclp-introloop::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -8%;
  width: 78%;
  height: 74%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 142, 43, 0.055) 0%,
    rgba(255, 142, 43, 0.02) 52%,
    rgba(255, 142, 43, 0) 100%);
}

.cclp-intro .cclp-introloop > .elementor-element {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------
 * THE LOOP ITSELF
 *
 * Geometry, so it can be checked and changed in one place:
 *
 *   --ccrk-node   the diameter of a numbered station
 *   --ccrk-lane   the width of the return channel to the left of the rail,
 *                 measured from the left edge of the drawing to the left
 *                 edge of a station. The script reads both and puts the
 *                 rail at lane + node / 2, which is the centre of a station.
 *   --ccrk-pad    the air above the first station and below the last one.
 *                 The circuit turns inside it, so it has to be there even
 *                 when nothing is written in it.
 *   --ccrk-cycle  one turn of the light. There is no pause in it: the turn
 *                 ends where it begins and the next one carries straight on.
 *                 The script reads this value and derives the moment each
 *                 station is passed from it, so it is written once, here.
 * -------------------------------------------------------------------- */
.cclp-intro .ccrk {
  --ccrk-node: 46px;
  --ccrk-lane: 58px;
  --ccrk-pad: 26px;
  --ccrk-gap: 20px;
  /* One turn, and the light is on its way for the whole of it. Roughly a
   * third of the circuit is the rail the four stations stand on, so they
   * fire about six tenths of a second apart, which is the rhythm the
   * security timeline on the home page has. The other two thirds are the
   * way back, a little under four seconds of quiet before station one comes
   * round again. That return is the point of the drawing and not dead time:
   * it is the part that makes the thing a loop.
   *
   * At this length the light covers the circuit at very nearly the speed it
   * used to travel at while it was moving, so the change a reader sees is
   * that it no longer stops, and not that it now runs at a different pace. */
  --ccrk-cycle: 5.6s;
  --ccrk-rail: rgba(215, 220, 232, 0.20);
  position: relative;
  width: 100%;
}

.cclp-intro .ccrk-eyebrow {
  margin: 0 0 18px calc(var(--ccrk-lane) + 0px);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(215, 220, 232, 0.52);
}

.cclp-intro .ccrk-frame {
  position: relative;
  padding: var(--ccrk-pad) 0 var(--ccrk-pad) var(--ccrk-lane);
}

/* The drawing lies behind the type. The script gives it a viewBox in
 * pixels, so one unit here is one pixel on the screen and every number the
 * script writes can be checked against a measurement of the box. */
.cclp-intro .ccrk-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cclp-intro .ccrk.ccrk-ready .ccrk-track {
  opacity: 1;
}

/* The resting circuit. It carries the same mask as the light, so it stops at
 * the edge of a numbered ring and picks up again on the other side, the way
 * the plain line of the fallback below does. Both paths have to be masked:
 * a rail running through a ring while the light disappears under it would
 * only move the fault from one line to the other. */
.cclp-intro .ccrk-rail {
  fill: none;
  stroke: url(#ccrk-grad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cclp-intro .ccrk-arrow {
  fill: rgba(215, 220, 232, 0.38);
  stroke: none;
}

/* The light. It is one dash on a pattern that repeats exactly once round
 * the circuit, so one of them is on the path at any moment and it never has
 * to appear out of nothing or fade away: it runs off the end of the path
 * and is already drawn coming back in at the start, because the two are the
 * same point on a closed circuit and the next repeat of the pattern lands
 * there. That join sits in the middle of station one, where the ring covers
 * it anyway.
 *
 * THE NUMBERS 75 AND 925, AND WHY THEY ARE WRITTEN OUT
 *
 * assets/ccx-lpintro.js puts pathLength="1000" on this path, which tells
 * the browser to treat the circuit as a thousand units long whatever it
 * really measures. Everything about the dash is therefore a share of the
 * circuit and keeps its proportion on a phone and on a wide screen: the
 * light is 75 of those units, roughly seven per cent of the way round, and
 * the gap behind it is the remaining 925. The two have to add up to a
 * thousand. A pattern that is longer or shorter than the path does not tile
 * it, and then the light has a seam to jump over once a turn - which is
 * exactly the fault this was rebuilt to remove.
 *
 * That normalisation is not only tidy, it is necessary. Chromium does not
 * interpolate a keyframe value for stroke-dashoffset that has to be
 * substituted from a custom property first: the animation runs, and the
 * property simply stays on its start value, silently. Measured on this page
 * against the same test with a literal value, which animates, and against
 * width, which interpolates from a custom property without complaint. So
 * the two numbers below and the two in the keyframes are literal, and they
 * have to stay in step with SEG and GAP in the script.
 *
 * The animation only ever runs while the drawing is on the screen. The
 * class that switches it comes from the script, and it changes the play
 * state rather than the animation, so a reader who scrolls back finds the
 * light where it was and not at the beginning again. At rest the head of
 * the light stands on station one.
 *
 * The mask comes from the script as well, and is what makes the line
 * disappear under a numbered ring instead of through it. */
.cclp-intro .ccrk-run {
  fill: none;
  stroke: #ffc98a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 142, 43, 0.55));
  stroke-dasharray: 75 925;
  stroke-dashoffset: 75;
}

.cclp-intro .ccrk.ccrk-ready .ccrk-run {
  opacity: 1;
  animation: ccrk-run var(--ccrk-cycle) linear infinite;
  animation-play-state: paused;
}
.cclp-intro .ccrk.ccrk-ready.ccrk-live .ccrk-run {
  animation-play-state: running;
}

/* One turn moves the pattern on by exactly its own length, so the last
 * frame of a turn paints what the first frame paints and the loop has
 * nothing to jump over. Only the two ends are declared, and the timing is
 * linear, so the speed at the join is the speed everywhere else. Any easing
 * here would arrive slower or faster than it left and read as a stumble
 * once a turn. There is no fade and no pause: the light is always on the
 * circuit, which is the whole claim the drawing makes. */
@keyframes ccrk-run {
  from { stroke-dashoffset: 75; }
  to   { stroke-dashoffset: -925; }
}


/* --------------------------------------------------------------------
 * THE STATIONS
 * -------------------------------------------------------------------- */
.cclp-intro .ccrk-steps {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.cclp-intro .ccrk-step {
  position: relative;
  padding: 0 0 30px calc(var(--ccrk-node) + var(--ccrk-gap));
  min-height: var(--ccrk-node);
}
.cclp-intro .ccrk-step:last-child {
  padding-bottom: 0;
}

/* Beside the aside the drawing is the shorter of the two columns, because a
 * photograph and two paragraphs stack higher than four short blocks. The
 * stations are given more air between them there, which closes most of that
 * difference and lets the circuit breathe at the same time. */
@media (min-width: 1025px) {
  .cclp-intro .ccrk-step {
    padding-bottom: 38px;
  }
}

/* The numbered ring. It rests as a hollow circle with a silver figure and
 * warms up for a little over a second as the light goes through it. The
 * ring never fills in the orange of the page: four circles doing that on a
 * loop, forever, would be a string of lights. The security timeline on the
 * home page does fill, because it fires once and then stays.
 *
 * The circle is see-through and stays that way. What keeps the light from
 * showing inside it is the mask on the circuit, not a colour painted here:
 * a ring filled with the colour of the section would have to be repainted
 * every time that section changes, and would be wrong on the day somebody
 * puts a picture behind it. */
.cclp-intro .ccrk-step::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: var(--ccrk-node);
  height: var(--ccrk-node);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.56);
  background-color: rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.13) 0%, rgba(0, 0, 0, 0.13) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 0 rgba(206, 89, 4, 0);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.cclp-intro .ccrk.ccrk-ready .ccrk-step::before {
  animation: ccrk-node var(--ccrk-cycle) linear infinite;
  animation-delay: var(--ccrk-delay, 0s);
  animation-play-state: paused;
}
.cclp-intro .ccrk.ccrk-ready.ccrk-live .ccrk-step::before {
  animation-play-state: running;
}

/* Three hundredths of the cycle is where the peak sits, and the script
 * subtracts exactly that much from every delay it writes, so the brightest
 * moment of a ring is the moment the head of the light stands on it. The
 * decay runs on to a sixth of the cycle, about one and a quarter seconds,
 * which is slow enough to read as heat leaving and short enough to be over
 * long before the light comes round again. */
@keyframes ccrk-node {
  0% {
    color: rgba(255, 255, 255, 0.56);
    background-color: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 0 rgba(206, 89, 4, 0);
  }
  3% {
    color: #ffd7ab;
    background-color: rgba(255, 142, 43, 0.16);
    border-color: rgba(255, 178, 110, 0.78);
    box-shadow: 0 6px 20px rgba(206, 89, 4, 0.34),
                0 0 0 5px rgba(255, 176, 92, 0.14);
  }
  17% {
    color: rgba(255, 255, 255, 0.56);
    background-color: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 10px rgba(255, 176, 92, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0.56);
    background-color: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 0 rgba(206, 89, 4, 0);
  }
}

.cclp-intro .ccrk-title {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #ffffff;
  padding-top: 2px;
}

.cclp-intro .ccrk-line {
  display: block;
  margin-top: 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  color: rgba(215, 220, 232, 0.66);
  max-width: 42em;
}


/* --------------------------------------------------------------------
 * WITHOUT THE DRAWING
 *
 * The circuit is measured, so it cannot be written into the markup. Until
 * the script has done that, and on a page where it never runs at all, the
 * stations are joined by a plain line between one ring and the next, drawn
 * the way the upright security timeline draws it. The loop is then only
 * told by the numbers and the last sentence, which is enough to read.
 * -------------------------------------------------------------------- */
.cclp-intro .ccrk:not(.ccrk-ready) .ccrk-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--ccrk-node) / 2 - 1px);
  top: var(--ccrk-node);
  bottom: 0;
  z-index: 1;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(255, 142, 43, 0.34) 0%,
    rgba(215, 220, 232, 0.14) 100%);
  pointer-events: none;
}


/* --------------------------------------------------------------------
 * THE CHIP
 *
 * The line that names what the drawing is. It sits under the circuit and
 * left of nothing else, so it reads as a caption of the loop rather than as
 * a claim of the section. Same hair line and same gradient as every other
 * pill on the site.
 * -------------------------------------------------------------------- */
.cclp-intro .ccrk-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0 var(--ccrk-lane);
  padding: 8px 16px 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(93deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.01) 100%);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(215, 220, 232, 0.86);
}

.cclp-intro .ccrk-chip-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #ff8e2b;
  box-shadow: 0 0 0 3px rgba(255, 142, 43, 0.18);
}


/* --------------------------------------------------------------------
 * NARROW
 *
 * The upright arrangement is the only one the loop has, so a phone changes
 * sizes and nothing else. The return channel is pulled in to 40px, which
 * still leaves the circuit a visible run on the left and gives the
 * sentences back eighteen pixels of measure.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cclp-intro .ccrk {
    --ccrk-node: 40px;
    --ccrk-lane: 40px;
    --ccrk-pad: 20px;
    --ccrk-gap: 16px;
  }
  .cclp-intro .ccrk-eyebrow {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .cclp-intro .ccrk-step {
    padding-bottom: 26px;
  }
  .cclp-intro .ccrk-step::before {
    font-size: 14px;
  }
  .cclp-intro .ccrk-title {
    font-size: 17px;
    line-height: 24px;
  }
  .cclp-intro .ccrk-line {
    font-size: 14px;
    line-height: 21px;
  }
  .cclp-intro .ccrk-chip {
    margin-left: 0;
    font-size: 12.5px;
  }
}


/* --------------------------------------------------------------------
 * LESS MOVEMENT
 *
 * A reader who asked the system for it gets the circuit drawn and the
 * stations settled a shade above their resting look, so the drawing still
 * says "this runs" without anything moving. The light is taken out
 * entirely: a comet with no travel is a stripe.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cclp-intro .ccrk-run {
    display: none;
  }
  .cclp-intro .ccrk.ccrk-ready .ccrk-step::before,
  .cclp-intro .ccrk.ccrk-ready.ccrk-live .ccrk-step::before {
    animation: none;
    color: #ffd7ab;
    border-color: rgba(255, 178, 110, 0.5);
    background-color: rgba(255, 142, 43, 0.08);
  }
  .cclp-intro .ccrk-track {
    transition: none;
  }
}

@media (scripting: none) {
  .cclp-intro .ccrk-run {
    display: none;
  }
}