/* ====================================================================
 * SERVICES PAGE: PROJECT APPROACH AND GENERAL DESIGN
 *
 * Everything here hangs on body.ccsp-svc, which inc/ccx-svcprocess.php
 * writes on the services page and nowhere else. Inside that scope the
 * elements are reached through the ids the page already carries, so the
 * layout stands from the first paint and does not wait for a class to be
 * handed out in the browser.
 *
 * WHAT THE PAGE LOOKED LIKE BEFORE
 * The four steps stood in the left half of a row, the right half was an
 * empty column, and the two even steps were pushed across the line with a
 * margin of 483 pixels written into the page. That number is a constant,
 * the half it had to match is not: at 1440 the tiles of the even steps
 * missed the line by 47px, at 1280 by 127px, and below 1025 the whole
 * block was switched off and a different, older timeline was shown in its
 * place. The layout below is built from halves and gaps instead, so the
 * tiles sit on the line at every width and the same four steps are read
 * on a phone.
 *
 * THE PIECES
 *   the row      [data-id=44a31c5] is the frame the script draws into
 *   the column   [data-id=6c24354] carries the resting line as a pseudo
 *                element (why not as a background: see the rule itself)
 *   a step       one icon box with the class custom-timeline. Its tile is
 *                taken out of the flow and put on the line, its text
 *                becomes a glass card on one side of it
 *   the light    an SVG the script appends to the row, with a wide soft
 *                dash and a narrow bright one running down the line
 * ==================================================================== */

body.ccsp-svc {
  --ccsp-node: 64px;        /* the numbered tile                        */
  --ccsp-arm: 50px;         /* air between the line and a card          */
  /* The plate that joins a card to its tile. Its length is the air that
   * is left between the two once the tile has taken its half of the arm,
   * plus the two pixels it slides under the tile so no seam shows. */
  --ccsp-neck-h: 12px;
  --ccsp-neck-w: calc(var(--ccsp-arm) - var(--ccsp-node) / 2 + 2px);
  --ccsp-gap: 44px;         /* air between two steps                    */
  --ccsp-rail-w: 2px;
  --ccsp-rail-x: 50%;       /* where the line stands inside the row     */
  --ccsp-rail-top: 30px;    /* first tile centre, refined by the script */
  --ccsp-rail-end: 176px;   /* last tile centre to the foot of the row  */
  /* How far the resting line reaches. The script replaces this with the
   * measured distance; the value here is what a reader without the
   * script sees, and it is derived from the height of the row rather
   * than written as a constant, so it lands within a few pixels of the
   * last tile at every width instead of stopping short of it. */
  --ccsp-rail-h: calc(100% - var(--ccsp-rail-top) - var(--ccsp-rail-end));
  --ccsp-icon-top: 2px;     /* tile against the top edge of its card    */
  --ccsp-outdent: 0px;      /* how much gutter the row may claim back   */
  --ccsp-cycle: 5.4s;
}


/* --------------------------------------------------------------------
 * THE BLOCK, AND HOW WIDE IT MAY BE
 *
 * The section keeps 252px of gutter on each side at every width above
 * the tablet breakpoint, which is generous for a headline and too much
 * for a timeline: at 1025px it would leave the block 521px wide and a
 * card in it 226px. The row therefore claims part of that gutter back
 * between 1025 and 1439, capped so it never grows past 1040px and never
 * reaches the edge of the window.
 * -------------------------------------------------------------------- */
body.ccsp-svc .elementor-element[data-id="88f938e"] {
  width: calc(100% + 2 * var(--ccsp-outdent));
  max-width: 1040px;
  align-self: center;
}
@media (min-width: 1025px) and (max-width: 1439px) {
  body.ccsp-svc { --ccsp-outdent: 232px; }
}

/* The row is the coordinate system: the tiles are placed against it and
 * the drawing of the light is its child. The empty right hand column the
 * old layout needed is gone. */
body.ccsp-svc .elementor-element[data-id="44a31c5"] {
  position: relative;
  display: block;
}
body.ccsp-svc .elementor-element[data-id="6c24354"] {
  position: relative;
  width: 100%;
  display: block;
  border: 0;          /* the hairline this column carried is now the rail */
}

/* THE RESTING LINE
 *
 * Drawn as a pseudo element of the column rather than as a background of
 * the row, and that is not a matter of taste. The page builder lazy loads
 * container backgrounds: until its own script marks a container as
 * loaded, a rule of its own sets "background-image: none !important" on
 * it, and it wins on specificity. A reader without scripts would have got
 * cards and tiles standing on nothing. A pseudo element is not covered by
 * that rule.
 *
 * The builder also gives ::before and ::after of a container a full set
 * of values for its own overlay, left and width and height among them, so
 * every side is written out here. The line is centred on the same value
 * the tiles use, so the two cannot drift apart.
 */
body.ccsp-svc .elementor-element[data-id="6c24354"]::after {
  content: "";
  position: absolute;
  left: var(--ccsp-rail-x);
  top: var(--ccsp-rail-top);
  right: auto;
  bottom: auto;
  width: var(--ccsp-rail-w);
  height: var(--ccsp-rail-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  transform: translateX(-50%);
  background-color: transparent;
  background-image: linear-gradient(180deg,
      rgba(215, 220, 232, 0.03) 0%,
      rgba(215, 220, 232, 0.20) 9%,
      rgba(215, 220, 232, 0.20) 91%,
      rgba(215, 220, 232, 0.03) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
body.ccsp-svc .elementor-element[data-id="679dc98"] {
  display: none;
}


/* --------------------------------------------------------------------
 * ONE STEP
 *
 * The widget spans the whole row and reserves the half it does not use
 * as padding, so the card ends exactly one arm short of the line. Which
 * half is padded is the only difference between an odd and an even step.
 *
 * The margins in the page data are overridden here rather than removed
 * from the page: 100px of top margin, and the 483px pair that used to
 * push the even steps across. Elementor writes them onto the widget
 * container with four class names, so the selectors below carry five.
 * -------------------------------------------------------------------- */
body.ccsp-svc .elementor-element.custom-timeline {
  position: relative;
  width: 100%;
}
body.ccsp-svc .elementor-element.elementor-widget.custom-timeline > .elementor-widget-container {
  margin: 0 0 var(--ccsp-gap) 0;
}
body.ccsp-svc .elementor-element.elementor-widget.custom-timeline:last-child > .elementor-widget-container {
  margin-bottom: 0;
}

/* The wrapper of an icon box is a flex row with the tile on one side.
 * The tile leaves that row here, so the wrapper has one child left and
 * the gap of 63px the page set between them has nothing to space. */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-wrapper {
  display: block;
  gap: 0;
}

/* THE TILE ON THE LINE
 * Taken out of the flow and hung on the line by its own centre, so it
 * stays there whatever the card beside it does. The page pulled the
 * drawing 31px to the right and 64px up to fake this; those two margins
 * are undone.
 *
 * It stands above the line rather than under it. The resting line is a
 * pseudo element of the column, so it is the last positioned thing the
 * column paints and it used to be drawn straight across the lower half
 * of every tile: the tile read as a window onto the line instead of as
 * a station on it. A stacking order of its own puts it on top, and the
 * travelling light now passes behind it, which is where a light on a
 * wire belongs. */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon {
  position: absolute;
  top: var(--ccsp-icon-top);
  left: var(--ccsp-rail-x);
  transform: translateX(-50%);
  width: var(--ccsp-node);
  height: var(--ccsp-node);
  margin: 0;
  isolation: isolate;
  z-index: 2;
}

/* THE SURFACE OF A TILE
 * It was the page navy lifted by nine values, which over the moving
 * ground of this page reads as nothing at all, and with the line drawn
 * across it the tile looked like a hole. It is now the card blue the
 * whole site builds cards from, solid, with the same frame and the same
 * hairline of light on the inner top edge that the card beside it
 * carries: tile and card are one material, and only the numbers on the
 * one and the words on the other tell them apart.
 *
 * The surface sits on the box that holds the drawing, not on the drawing
 * itself, so the two layers of light behind the tile keep their own box
 * and go on reaching past its edge. */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon .elementor-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 0;
  border-radius: 15px;
  background: #181f32;
  box-shadow:
    inset 0 0 0 1px rgb(44, 51, 76),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon svg {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  border-radius: 15px;
}

/* The same ring the card wears, one turn quieter. Drawn as a gradient
 * behind a mask that keeps only the outermost pixel, which is the way
 * the card draws its own frame, so the two catch the light from the
 * same direction. */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(118deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 142, 43, 0.85) 18%,
      rgba(255, 142, 43, 0.28) 52%,
      rgba(255, 142, 43, 0.70) 88%,
      rgba(255, 255, 255, 0.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.34;
  pointer-events: none;
}

/* THE CARD
 * Liquid glass: a half transparent surface, a ring drawn as a gradient
 * with a bright spot where the light would fall, a hairline of light on
 * the inner top edge and the page blurred behind it. Where a browser
 * cannot blur a backdrop the surface is mixed to something near opaque
 * instead, so the type keeps its contrast.
 *
 * The three overrides on top of that are all undoing the old layout: the
 * content used to be pulled 60px up to sit level with the tile, and both
 * the title and the description were set to a fixed 420px. */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content {
  position: relative;
  margin-top: 0;
  padding: 22px 26px 24px;
  border-radius: 16px;
  background: rgba(24, 31, 50, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 22px 44px -30px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content {
    background: #161d31;
  }
}
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(118deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 142, 43, 0.85) 14%,
      rgba(255, 142, 43, 0.28) 48%,
      rgba(255, 142, 43, 0.70) 86%,
      rgba(255, 255, 255, 0.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.42;
  pointer-events: none;
}
/* THE PLATE THAT JOINS THE CARD TO ITS TILE
 *
 * The two used to stand two pixels apart and read as two objects that
 * happened to be near each other. The arm is now wide enough for a
 * short plate, and the card grows one out of the edge that faces its
 * tile, level with the middle of the tile and ending two pixels under
 * it, so there is no seam to see. The plate is the card carried on: the
 * same half transparent surface, the same hairline of light along its
 * top edge and the same warm line under it, and through the middle of
 * it runs a filament that brightens towards the tile, which is the wire
 * a station on a line would be fed by.
 *
 * Drawn on the card, not on the tile, because the card is the thing
 * that knows where its own edge is; the tile stands on the line and the
 * distance between the two is the arm. Both the plate and the tile keep
 * out of the way of the pointer.
 *
 * The tile sits above it: the plate slides under the tile edge, and the
 * tile is the only thing on this block with a stacking order of its own.
 */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content::after {
  content: "";
  position: absolute;
  top: calc(var(--ccsp-icon-top) + (var(--ccsp-node) - var(--ccsp-neck-h)) / 2);
  width: var(--ccsp-neck-w);
  height: var(--ccsp-neck-h);
  pointer-events: none;
  /* Solid, in the material of the tile, with the frame of the tile along
   * its two long edges: a half transparent plate over navy is three
   * hairlines and no plate at all, which is what the first attempt at
   * this looked like. Through the middle runs the filament, one pixel,
   * brightening towards the tile. */
  background:
    linear-gradient(90deg,
      rgba(255, 142, 43, 0.10) 0%,
      rgba(255, 178, 110, 0.60) 100%) no-repeat center / 100% 1px,
    #181f32;
  box-shadow:
    inset 0 1px 0 rgb(44, 51, 76),
    inset 0 -1px 0 rgb(44, 51, 76);
}

/* Which edge the plate grows out of, and which way its filament runs.
 * Above 1025 the odd steps have their card on the left of the line and
 * the even ones on the right; below it every card stands right of the
 * line, which is the case the media query further down restates. */
body.ccsp-svc .elementor-element.custom-timeline[data-id="1906ec6"] .elementor-icon-box-content::after,
body.ccsp-svc .elementor-element.custom-timeline[data-id="ae14d66"] .elementor-icon-box-content::after {
  left: 100%;
  border-radius: 0 2px 2px 0;
}
body.ccsp-svc .elementor-element.custom-timeline[data-id="804035e"] .elementor-icon-box-content::after,
body.ccsp-svc .elementor-element.custom-timeline[data-id="a25eebe"] .elementor-icon-box-content::after {
  right: 100%;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(270deg,
      rgba(255, 142, 43, 0.10) 0%,
      rgba(255, 178, 110, 0.60) 100%) no-repeat center / 100% 1px,
    #181f32;
}

body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-title,
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-description {
  width: auto;
  max-width: none;
}
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-title {
  font-size: 26px;
  line-height: 1.18;
}


/* --------------------------------------------------------------------
 * TWO SIDES, FROM 1025px UP
 * -------------------------------------------------------------------- */
@media (min-width: 1025px) {
  body.ccsp-svc .elementor-element.custom-timeline[data-id="1906ec6"],
  body.ccsp-svc .elementor-element.custom-timeline[data-id="ae14d66"] {
    padding-right: calc(50% + var(--ccsp-arm));
    padding-left: 0;
  }
  body.ccsp-svc .elementor-element.custom-timeline[data-id="804035e"],
  body.ccsp-svc .elementor-element.custom-timeline[data-id="a25eebe"] {
    padding-left: calc(50% + var(--ccsp-arm));
    padding-right: 0;
  }
  /* The two even steps step down by half a card, so the reader zigzags
   * down the line instead of reading two rows of two. */
  body.ccsp-svc .elementor-element.elementor-widget.custom-timeline[data-id="804035e"] > .elementor-widget-container,
  body.ccsp-svc .elementor-element.elementor-widget.custom-timeline[data-id="a25eebe"] > .elementor-widget-container {
    margin: 0 0 var(--ccsp-gap) 0;
  }
}

/* --------------------------------------------------------------------
 * ONE COLUMN BELOW 1025px
 *
 * The line moves to the left edge, the tiles stand on it and every card
 * reads left to right. This is the layout the security timeline and the
 * Why strip take at the same width, so the page keeps one habit.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.ccsp-svc {
    --ccsp-node: 52px;
    --ccsp-rail-x: 30px;
    --ccsp-gap: 28px;
    --ccsp-rail-end: 104px;
    /* The card starts a tile width and 22px in from the left edge, the
     * tile stands on the line: what is left between them is half a tile
     * plus those 22px, less the distance the line keeps from the edge.
     * Two more so the plate ends under the tile. */
    --ccsp-neck-w: calc(var(--ccsp-node) / 2 + 24px - var(--ccsp-rail-x));
    --ccsp-neck-h: 11px;
  }
  body.ccsp-svc .elementor-element.custom-timeline {
    padding-left: calc(var(--ccsp-node) + 22px);
    padding-right: 0;
  }
  /* Every card stands right of the line here, so every plate grows out
   * of the left edge and its filament runs the other way. */
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content::after,
  body.ccsp-svc .elementor-element.custom-timeline[data-id="1906ec6"] .elementor-icon-box-content::after,
  body.ccsp-svc .elementor-element.custom-timeline[data-id="ae14d66"] .elementor-icon-box-content::after {
    left: auto;
    right: 100%;
    border-radius: 3px 0 0 3px;
    background:
      linear-gradient(270deg,
        rgba(255, 142, 43, 0.10) 0%,
        rgba(255, 178, 110, 0.60) 100%) no-repeat center / 100% 1px,
      #181f32;
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-wrapper,
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content {
    text-align: left;
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-title {
    font-size: 22px;
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-content {
    padding: 18px 20px 20px;
  }
}
@media (max-width: 479px) {
  body.ccsp-svc {
    --ccsp-node: 46px;
    --ccsp-rail-x: 27px;
    --ccsp-rail-end: 200px;
    /* Two pixels less of inset here than above, so two pixels less of
     * plate. */
    --ccsp-neck-w: calc(var(--ccsp-node) / 2 + 22px - var(--ccsp-rail-x));
    --ccsp-neck-h: 10px;
  }
  body.ccsp-svc .elementor-element.custom-timeline {
    padding-left: calc(var(--ccsp-node) + 20px);
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-title {
    font-size: 20px;
  }
}


/* --------------------------------------------------------------------
 * THE RING AROUND A TILE, AND ITS FLARE
 *
 * Two layers behind the drawing, on the box the drawing fills, so the
 * light sits on the edge of the tile and the tile itself is untouched.
 * The ring breathes on its own; the flare opens once per pass, at the
 * moment the light on the line reaches this tile. The script writes that
 * moment into --ccsp-at as a delay, and the turn is as long as the pass,
 * so the two cannot drift apart.
 *
 * Neither layer moves the box: only opacity and scale change, which
 * keeps both on the compositor.
 * -------------------------------------------------------------------- */
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 142, 43, 0.34),
    0 0 16px 1px rgba(255, 142, 43, 0.26),
    0 0 38px 6px rgba(255, 142, 43, 0.12);
  opacity: 0.62;
  animation: ccsp-breathe 3.8s ease-in-out infinite;
  animation-play-state: paused;
}
body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 2px rgba(255, 178, 110, 0.58),
    0 0 26px 6px rgba(255, 142, 43, 0.40);
  animation: ccsp-flare var(--ccsp-cycle) linear infinite;
  animation-delay: var(--ccsp-at, 0s);
  animation-play-state: paused;
}
@keyframes ccsp-breathe {
  0%, 100% { opacity: 0.56; }
  50%      { opacity: 1; }
}
@keyframes ccsp-flare {
  0%   { opacity: 0;    transform: scale(1); }
  3%   { opacity: 0.95; transform: scale(1); }
  20%  { opacity: 0;    transform: scale(1.32); }
  100% { opacity: 0;    transform: scale(1.32); }
}


/* --------------------------------------------------------------------
 * THE LIGHT ON THE LINE
 *
 * One drawing across the row, behind the steps: it and the steps are all
 * positioned, so document order decides who paints on top, and the
 * script puts the drawing in as the first child. Two dashes on it, a
 * wide soft one and a narrow bright one, both on a pattern whose gap is
 * the whole line, so exactly one head is on the line at a time.
 *
 * The pass runs only while the block is on screen and holds its place
 * when it is not, so scrolling back does not drop the reader into the
 * middle of a half finished sweep.
 * -------------------------------------------------------------------- */
body.ccsp-svc .ccsp-wire {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
body.ccsp-svc .ccsp-halo,
body.ccsp-svc .ccsp-beam {
  fill: none;
  stroke-linecap: round;
}
body.ccsp-svc .ccsp-halo {
  stroke: rgba(255, 142, 43, 0.22);
  stroke-width: 9;
  stroke-dasharray: var(--ccsp-trail, 240) var(--ccsp-len, 4000);
  stroke-dashoffset: var(--ccsp-h0, 240);
  opacity: 0;
}
body.ccsp-svc .ccsp-beam {
  stroke: #ffd2a4;
  stroke-width: 2.4;
  stroke-dasharray: var(--ccsp-beam, 80) var(--ccsp-len, 4000);
  stroke-dashoffset: var(--ccsp-o0, 80);
  opacity: 0;
}
body.ccsp-svc .ccsp-live .ccsp-halo {
  animation: ccsp-run-halo var(--ccsp-cycle) linear infinite;
}
body.ccsp-svc .ccsp-live .ccsp-beam {
  animation: ccsp-run var(--ccsp-cycle) linear infinite;
}
body.ccsp-svc .ccsp-live .elementor-icon-box-icon::before,
body.ccsp-svc .ccsp-live .elementor-icon-box-icon::after {
  animation-play-state: running;
}

/* The two runs cover the pattern in the first 62 per cent of the turn
 * and wait out the rest, which is the dark stretch between two passes.
 * Both ends of the numbers are written out rather than held in a custom
 * property inside the frames: Chromium does not interpolate a
 * stroke-dashoffset that arrives from a variable and would quietly run
 * the whole animation on the starting value. They are set from a
 * variable at the ends of the frames only, which it does read. */
@keyframes ccsp-run {
  0%   { stroke-dashoffset: var(--ccsp-o0, 80);    opacity: 0; }
  4%   { opacity: 1; }
  56%  { opacity: 1; }
  62%  { stroke-dashoffset: var(--ccsp-o1, -4000); opacity: 0; }
  100% { stroke-dashoffset: var(--ccsp-o1, -4000); opacity: 0; }
}
@keyframes ccsp-run-halo {
  0%   { stroke-dashoffset: var(--ccsp-h0, 240);   opacity: 0; }
  4%   { opacity: 1; }
  56%  { opacity: 1; }
  62%  { stroke-dashoffset: var(--ccsp-h1, -4000); opacity: 0; }
  100% { stroke-dashoffset: var(--ccsp-h1, -4000); opacity: 0; }
}

/* Nothing runs where a reader has asked for calm: the line rests, every
 * ring stands at its full value and no dash travels. */
@media (prefers-reduced-motion: reduce) {
  body.ccsp-svc .ccsp-halo,
  body.ccsp-svc .ccsp-beam {
    display: none;
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon::after {
    animation: none;
    opacity: 0.8;
  }
  body.ccsp-svc .elementor-element.custom-timeline .elementor-icon-box-icon::before {
    animation: none;
  }
}


/* ====================================================================
 * GENERAL DESIGN SERVICES
 *
 * The card of that block reserves its right half for a picture, which
 * the page draws as a background overlay. The picture is now our own
 * brochure, so the card is given the height a brochure needs to be
 * looked at; at 293px it would have been a stamp.
 *
 * The picture itself, and where it sits, are set in the page data by
 * tools/r19-process/build.php, because a background overlay is a page
 * setting and not a rule.
 * ==================================================================== */
@media (min-width: 1025px) {
  body.ccsp-svc .elementor-element[data-id="6c56237"] {
    min-height: 404px;
    justify-content: center;
  }
}

/* rv:20260831a cache refresh */