/* ==========================================================================
   THE THREE TOOL BLOCKS OF /process-tools/  (.cclp-tools, ccx-lptools26)

   "Three systems we built" is the reference section of this page: three
   blocks of the same build, each with a label, a badge, a headline, a
   paragraph, four bullets and a picture of the tool. It read as printed
   matter. Nothing on it answered the pointer, the picture floated on the
   navy without a ground under it, and the four bullet tiles were a pale
   frame with an icon in it, which is the one part of this site that never
   got the treatment the cards on /price-app/ have.

   Four additions, in the order they carry:

     1  The picture gets a stage: a cool bloom behind it that follows the
        pointer, a warm one low down and a soft floor under the device, plus
        a slow sheen that runs across the device itself and nowhere else,
        cut to its outline by its own alpha channel.
     2  The bullet tiles become the badge of /price-app/: a dark well with a
        ring of light around it, warm where the light leaves. Their frames
        breathe out of step instead of in unison, and the row answers the
        pointer.
     3  The label of every block gets the accent tick that marks a station
        everywhere else on this page.
     4  The hairline between two blocks carries a short warm segment where
        the label below it begins, so the divider belongs to the block
        rather than to the page.

   SCOPE. Every rule starts at .cclp-tools, which exists on this landing
   page and on no other post. That matters here more than usual: the class
   names inside a block (.cctool-card, .cctool-content, .cctool-badgerow,
   .ccref-ico, .cctool-mock) also stand in the data of both home pages,
   left behind when that section became a carousel, and .cctool-badgerow,
   .cctool-label, .ccref-badge and .ccref-ico really are rendered by the
   home carousel through assets/ccx-toolslider.css. A single rule without
   the band in front of it would reach the home page.

   WEIGHT. The look of these blocks is written twice by the page builder,
   once in the page settings and once in the stylesheet of the container the
   section sits in, and the second copy wins because Elementor writes a
   section rule with its container as an ancestor:

     .elementor-21301 .elementor-element-7c000058 .cctool-card .ccref-ico
                                                                   (0,4,0)

   A chain that names .cclp-tools once, .cctool-card once and .ccref-ico
   three times carries five and settles it without an !important, which
   would also take the value away from anyone editing the section later.

   WHAT THIS FILE DOES NOT TOUCH. assets/ccx-toolslider.css (the home page
   carousel), assets/ccx-glass.php and its surfaces: the badge pill of every
   block is a glass host and its background belongs to that module, so only
   the beat of the dot inside it is touched here. assets/ccx-lppolish.css
   owns the position and the colour of the ghost numerals and keeps them.

   Palette: navy #0b1227, frame rgb(44,51,76), accent #FF8E2B, silver
   #d7dce8, cool light 96/150/255 (hue 212).
   ========================================================================== */

.cclp-tools {
  --cct26-accent: #ff8e2b;
  --cct26-cool: 96, 150, 255;
  --cct26-beat: 4.6s;      /* one breath of a bullet frame            */
  --cct26-sheen: 7.4s;     /* one pass of the sheen over a device     */
}

/* --------------------------------------------------------------------
   1. THE STAGE UNDER THE PICTURE

   The three pictures are renders with an alpha channel: a monitor and a
   phone, and a fifth of every file is nothing at all. A rim around the box
   they sit in would therefore be a rectangle drawn around empty space,
   which is why the rim the rest of this page uses is not handed to them.
   What they were missing is a ground.

   Five gradients on the ::after of the column, which is free: ::before of
   a container belongs to the page builder (it is the box its background
   overlay is painted in) and the ::after of .cctool-content is the ghost
   numeral. A pseudo element is also the one place on a container that
   Elementor's lazy background rule cannot reach, so the stage is painted
   from the first frame instead of waiting for an observer.

     halo    behind the device, at hue 212, moved by the pointer
     warm    low and to one side, the accent of the palette
     ground  a wide, very faint band of light at the height the device
             stands at, so the shadow the picture casts on it, which is
             drawn from the alpha channel further down this file, has
             something to fall on

   WHERE THE GROUND SITS was measured in the file rather than guessed. All
   three renders are the same geometry: the foot of the monitor ends at 96.5
   per cent of the height of the picture, the phone reaches to 99.2. Read
   against the box below, which is 40px taller than the picture, that is 94
   per cent. The error this carries at other window widths is two tenths of
   a per cent, because the bleed is fixed while the picture is not.

   THE BOX IS ALLOWED 16px SIDEWAYS, and no more. The device fills its
   picture almost edge to edge, so a halo that stays inside it would be seen
   in a band of two pixels; with the bleed there are about thirty on each
   side. The card keeps 20px of padding beside the column at this width, so
   16 stays inside the card and the document is not widened. Below 1025px
   the bleed goes to zero, where the padding is 16 and then 4.
   -------------------------------------------------------------------- */
.cclp-tools .cctool-mockcol { position: relative; }
.cclp-tools .cctool-mockcol > .elementor-element { position: relative; z-index: 1; }

.cclp-tools .cctool-mockcol::after {
  content: "";
  position: absolute;
  inset: -26px -16px -14px -16px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at calc(50% + var(--cct26-px, 0px)) calc(40% + var(--cct26-py, 0px)),
      rgba(var(--cct26-cool), 0.23) 0%,
      rgba(var(--cct26-cool), 0.10) 44%,
      rgba(var(--cct26-cool), 0) 73%),
    radial-gradient(38% 24% at 66% 84%,
      rgba(255, 142, 43, 0.11) 0%,
      rgba(255, 142, 43, 0) 72%),
    radial-gradient(46% 1.4% at 52% 94.2%,
      rgba(var(--cct26-cool), 0.11) 0%,
      rgba(var(--cct26-cool), 0) 100%);
}

/* The stage is held a little under full strength and comes up when the
   pointer is anywhere on the block. Opacity rather than a second set of
   colours: five gradients would have to be written twice for that, and the
   difference the eye is offered is a light that answers, not a light that
   changes. */
.cclp-tools .cctool-mockcol::after {
  opacity: 0.88;
  transition: opacity 0.4s ease-out;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .cclp-tools .cctool-card:hover .cctool-mockcol::after { opacity: 1; }
}

/* The rim of the device, and its shadow.

   The rest of this page answers the pointer with a rim of light around the
   box of a card. That cannot be done here: a fifth of each of these files
   is transparent and the corners of the box are empty, so a rectangle of
   light would be drawn around nothing (measured: alpha under 12 on 20.7 per
   cent of the pixels, all four corners among them).

   A drop shadow does not know about boxes. It is cast from the alpha
   channel, so it follows the outline of the monitor, the stand and the
   phone, which is the rim this picture can have. Two of them: a shadow
   below in the darkest navy of the palette, which is what puts the device
   on the ground, and a halo at hue 212 that hugs the whole silhouette.

   It leans a little towards the pointer as well. Five pixels, enough to be
   felt and not enough to be read as a movement; the picture is a screenshot
   and it may not start to swim. */
.cclp-tools .cctool-mock img {
  transform: translate3d(var(--cct26-mx, 0px), var(--cct26-my, 0px), 0);
  filter:
    drop-shadow(0 14px 26px rgba(2, 5, 14, 0.55))
    drop-shadow(0 0 26px rgba(var(--cct26-cool), 0.18));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.4s ease-out;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .cclp-tools .cctool-card:hover .cctool-mock img {
    filter:
      drop-shadow(0 14px 26px rgba(2, 5, 14, 0.55))
      drop-shadow(0 0 30px rgba(var(--cct26-cool), 0.30));
  }
}

/* --------------------------------------------------------------------
   THE SHEEN

   A band of light that runs across the device once every seven seconds and
   over nothing else. It is cut to the outline of the device by its own
   picture: the file is handed to the span as a mask, so the alpha channel
   that makes the corners of the render transparent makes the same corners
   of the sheen transparent. The span is injected by
   assets/ccx-lptools26.js, which is also where the file name comes from,
   and the box it is given is the box of the picture: the widget, its
   container and the picture measure the same rectangle to the pixel, so a
   mask at 100% by 100% lands exactly on the render.

   It runs only while the block is on the screen (.cct26-live, handed out by
   an observer), only from 1025px up, and never under reduced motion. The
   three blocks are offset against each other, so two of them are never
   caught in the same movement.
   -------------------------------------------------------------------- */
.cclp-tools .cctool-mock .elementor-widget-container { position: relative; }

.cct26-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: var(--cct26-mask);
          mask-image: var(--cct26-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-image: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 39%,
    rgba(255, 255, 255, 0.07) 46%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.07) 54%,
    rgba(255, 255, 255, 0) 61%);
  background-repeat: no-repeat;
  background-size: 240% 100%;
  background-position: 145% 0;
}

@media (min-width: 1025px) {
  .cclp-tools .cct26-live .cct26-gloss {
    opacity: 1;
    animation: cct26-sheen var(--cct26-sheen) linear infinite;
    animation-delay: calc(var(--cct26-b, 0) * -2.5s);
  }
}

@keyframes cct26-sheen {
  0%       { background-position: 145% 0; }
  36%, 100% { background-position: -60% 0; }
}

/* --------------------------------------------------------------------
   2. THE BULLET TILES

   The same well the badges of /price-app/ and of the what you get band
   below are drawn as: a disc of navy under the icon and a hair line of
   1.2 pixels around it that carries a gradient rather than a colour,
   silver where the light falls and warm on the side the accent of the
   page comes from. The two are told apart by background-clip, so it stays
   one element and the pulsing frame of the shared layer keeps its own.

   Dark, not pale. The tile it replaces was three per cent white on this
   navy, a difference of about eight values out of 255, which reads as a
   smudge rather than as a tile and left the orange glyph inside it
   standing on nothing.
   -------------------------------------------------------------------- */
.cclp-tools .cctool-card .ccref-ico.ccref-ico.ccref-ico {
  background-color: transparent;
  background-image:
    linear-gradient(147deg,
      rgba(17, 25, 50, 0.86) 0%,
      rgba(9, 14, 31, 0.92) 62%),
    linear-gradient(128deg,
      rgba(215, 220, 232, 0.34) 0%,
      rgba(215, 220, 232, 0.06) 48%,
      rgba(255, 142, 43, 0.32) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.2px solid transparent;
  transition: box-shadow 0.32s ease-out;
}

/* The frame of the shared layer breathes on top of that ring. In white it
   was a second, brighter ring around the first; in the accent at a fifth of
   its strength the two read as one edge that warms and cools. The four
   tiles of a block are pushed apart by a quarter of a period each, through
   a negative delay, so none of them waits before it starts. */
.cclp-tools .cctool-card .ccref-ico.ccfx-pulseframe {
  --ccfx-frame: rgba(255, 142, 43, 0.20);
  --ccfx-frame-glow: rgba(255, 142, 43, 0.16);
  --ccfx-frame-speed: var(--cct26-beat);
}
.cclp-tools .cct26-row .ccref-ico.ccfx-pulseframe::after {
  animation-delay: calc(var(--cct26-i, 0) * var(--cct26-beat) / -4);
}

/* --------------------------------------------------------------------
   THE ROW

   .cct26-row is handed to the container that holds a tile and its line of
   text, and .cct26-bultext to the text beside it; both by
   assets/ccx-lptools26.js, because neither carries a class of its own in
   the page data and adding one there would be four writes for something a
   selector can do at runtime.

   The text is written with a gradient clipped to the glyphs, in the page
   settings, so it cannot be brightened with a colour: the hover state
   replaces the gradient instead. Five class names, because the rule it
   supersedes names the page, the widget and the title.
   -------------------------------------------------------------------- */
.cclp-tools .cct26-row {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .cclp-tools .cct26-row:hover { transform: translateX(5px); }

  .cclp-tools .cct26-row:hover .ccref-ico.ccref-ico.ccref-ico {
    box-shadow:
      0 0 0 1px rgba(255, 142, 43, 0.14),
      0 0 22px -6px rgba(255, 142, 43, 0.45);
  }

  .cclp-tools .cct26-row:hover .cct26-bultext .elementor-heading-title {
    background-image: linear-gradient(98deg,
      rgba(255, 255, 255, 1) 30%,
      rgba(255, 255, 255, 0.94) 92%);
  }
}

/* --------------------------------------------------------------------
   3. THE STATION TICK

   The same short accent dash the steps of this page carry, in front of the
   label of every block. It is drawn on the ::before of the title, which is
   free: the page settings give the title a size, a weight and a colour and
   no pseudo element.
   -------------------------------------------------------------------- */
.cclp-tools .cctool-label .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background-image: linear-gradient(90deg,
    var(--cct26-accent) 0%,
    rgba(206, 89, 4, 0) 100%);
}

/* --------------------------------------------------------------------
   THE GHOST NUMERAL

   Where it stands and how heavy it is was settled in round 16 and is not
   touched here: assets/ccx-lppolish.css owns both and this file sets
   neither. What it is given is the gradient the rest of the page draws its
   long lines in, silver at the top and the accent at the foot, the same run
   the rail of the control loop in the opening band makes.

   No fight over weight follows from that. The rule in the other file writes
   a colour, this one writes a fill of none and a picture clipped to the
   glyph, and nothing on the page writes those three. The colour it
   supersedes is repeated in the stops, so the numeral of the first block
   stays the heavier of the three for the reason given there: a one is the
   narrowest glyph and reads lighter at the same value.
   -------------------------------------------------------------------- */
.cclp-tools .cctool-card .cctool-content.cctool-content.cctool-content::after {
  background-image: linear-gradient(176deg,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.062) 44%,
    rgba(255, 142, 43, 0.20) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cclp-tools .cctool-card.cctool-n1 .cctool-content.cctool-content.cctool-content::after {
  background-image: linear-gradient(176deg,
    rgba(255, 255, 255, 0.105) 0%,
    rgba(255, 255, 255, 0.078) 44%,
    rgba(255, 142, 43, 0.23) 100%);
}

/* --------------------------------------------------------------------
   4. THE DIVIDER

   The line above every block was one silver fade across the full width of
   the section. A short warm segment is laid over it where the label of
   that block begins, so the line reads as the head of the block and not as
   a ruler across the page.

   Where that is depends on the block: the middle one has its picture on
   the left and its text on the right, so its label starts at 43 per cent
   of a card 1416 wide. The offset is a custom property for that reason and
   the drawing itself is written once.

   Five class names. The rule this stands over is written by the section
   stylesheet with the section container as an ancestor, which is four:
   .elementor-21301 .elementor-element-7c000058 .cctool-card + .cctool-card
   -------------------------------------------------------------------- */
.cclp-tools .cctool-card { --cct26-divx: 32px; }
.cclp-tools .cctool-card.cctool-n2 { --cct26-divx: 43%; }

.cclp-tools.cclp-tools .cctool-card.cctool-card.cctool-card::after {
  background-image:
    linear-gradient(90deg,
      rgba(255, 142, 43, 0) 0%,
      rgba(255, 142, 43, 0.55) 42%,
      rgba(255, 142, 43, 0) 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 168px 1px, 100% 1px;
  background-position: calc(var(--cct26-divx) - 34px) 0, 0 0;
}

/* --------------------------------------------------------------------
   SMALL SCREENS

   Below 1025px the block stands as one column: picture, then text, which
   is what part 6 at the foot of this file arranges. The stage stays,
   because the picture still needs a ground, and it is pulled
   in a little since the column is now the full width of the card. The
   sheen and the pointer are gone: one is a pass of light nobody has a
   pointer to trigger and both cost a compositor layer on a device that has
   other work to do.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cclp-tools .cctool-mockcol::after {
    inset: -14px 0 -8px 0;
    background:
      radial-gradient(44% 38% at 50% 44%,
        rgba(var(--cct26-cool), 0.15) 0%,
        rgba(var(--cct26-cool), 0.06) 46%,
        rgba(var(--cct26-cool), 0) 74%),
      radial-gradient(26% 5% at 50% 94%,
        rgba(2, 5, 14, 0.5) 0%,
        rgba(2, 5, 14, 0) 100%);
  }
  .cct26-gloss { display: none; }
  .cclp-tools .cctool-mock img { transform: none; }
  /* Both columns stand under each other now, so every label is at the left
     edge of the card and the warm segment goes back to the same place on
     all three dividers. */
  .cclp-tools .cctool-card.cctool-n2 { --cct26-divx: 28px; }
}

/* --------------------------------------------------------------------
   REDUCED MOTION

   Nothing moves. The stage, the wells and the tick are drawn and stay
   exactly as they are; the sheen is taken off the device altogether rather
   than left standing on it as a bright band, and the tiles keep the frame
   the shared layer parks them on.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cct26-gloss { display: none; }
  .cclp-tools .cctool-mock img { transform: none; transition: none; }
  .cclp-tools .cct26-row { transition: none; }
}

/* ==========================================================================
   5. ONE BLOCK AT A TIME, UNDER A ROW OF NAMES

   The three blocks stood under each other and the band ran to two thousand
   two hundred pixels, which is a screen and a half of the same layout three
   times over. The home page carries the same three tools and had the same
   problem; there it was answered by putting the names of the tools in a row
   over the block and showing one of them. That row was signed off, so it is
   the one used here, down to the class names: assets/ccx-lptools26.js builds
   .cctool-nav with three .cctool-tab in it, and every value it is drawn with
   comes from assets/ccx-toolslider.css, which is read on every page of the
   site. Improving the row there improves it in both places, and the corner
   brackets of the site pointer reach it here as well, because the entry
   .cctool-tab in cc-fx.php covers both.

   THE STAGE. The three blocks are moved into one box that is a grid of a
   single cell, and all three are laid in that cell. Three things follow
   from that and each of them would otherwise have to be built:

     - the box is as tall as the tallest of the three, so nothing under the
       band moves when the reader picks a different name. Measured: 660, 634
       and 634 pixels at 1440,
     - the two that are not being read are taken out with visibility, which
       also takes them out of the reading order and out of the tab order, so
       no key press walks through a block nobody can see,
     - a block that is shorter than the box has its content centred in it,
       because the cards already centre what they hold. The home carousel
       arrives at the same by stretching its slides.

   WITHOUT THE SCRIPT nothing here applies. The names, the stage and the
   class cct26-tabbed are all handed out at runtime, and every rule below
   asks for that class, so a page whose scripting never ran shows the three
   blocks under each other exactly as before, with their dividers.

   WEIGHT. The divider over a block is written by the section stylesheet
   with the section container as an ancestor, which is four class names, and
   it may set a display of its own. The rule that takes it away names the
   card three times and lands on five.
   ========================================================================== */

/* The two properties the row of names reads. They are declared on the
   carousel on the home page and on the band here; the values are the inset
   of a card at each width, so the first name starts where the label of the
   block below it starts: 20 beside the picture, 16 on a tablet, 4 on a
   phone, where the band itself already keeps 12 on either side. */
.cclp-tools {
  --cctool-inset: 20px;
  --cctool-rule: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0) 100%);
}

/* Fifty-six pixels between the opening text of the band and the row, which
   is the step the home page keeps there. Twelve of them are already given
   by the margin under the opening block, so forty-four are added here.

   Both boxes are told to fill the band. The box they stand in centres what
   it holds, which is right for the opening pill and the headline over them
   and wrong for these two: the row would shrink to the width of the three
   names and take its rail with it, and the rail is the head line of the
   band and runs its whole width, as it does on the home page. The names
   then start at the left edge of the block below, where the label of the
   block starts. */
.cclp-tools .cct26-nav,
.cclp-tools .cct26-stage { align-self: stretch; width: 100%; }

.cclp-tools .cct26-nav { margin-top: 44px; }

.cct26-stage { position: relative; }

.cclp-tools.cct26-tabbed .cct26-stage { display: grid; }

.cclp-tools.cct26-tabbed .cct26-stage > .cctool-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cclp-tools.cct26-tabbed .cct26-stage > .cctool-card.cct26-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The closing line under the block, the same one the home page draws under
   its carousel. The upper line of the band is the rail of the row. */
.cclp-tools.cct26-tabbed .cct26-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cctool-rule);
  pointer-events: none;
}

/* The divider between two blocks has nothing left to divide: only one block
   stands at a time and the rail of the row is the line over it. */
.cclp-tools.cct26-tabbed .cctool-card.cctool-card.cctool-card::after {
  display: none;
}

/* The sheen runs on the block being read and on no other. All three lie in
   the same cell and the observer therefore calls all three on screen at
   once, which without this would be three passes of light on top of each
   other, two of them under a hidden layer. */
.cclp-tools.cct26-tabbed .cctool-card:not(.cct26-on) .cct26-gloss {
  animation: none;
  opacity: 0;
}

/* The block that has just been picked comes up out of the ground rather
   than appearing. The class is set by the script on the block being
   brought in and taken off again when the movement is over, so a block
   that is simply standing there carries neither an animation nor a
   transform: a transform that stays, even an identity one, makes the box
   the frame of reference for everything inside it and hands it to the
   compositor, and the ghost figure of the block is a gradient clipped to a
   glyph, which is the kind of drawing that changes when it is rasterised
   on a layer of its own.

   The block that stands there when the band is first scrolled to is not
   animated either: the script only sets the class from the first press
   onwards. */
.cclp-tools .cct26-stage > .cctool-card.cct26-in {
  animation: cct26-tabin .34s cubic-bezier(.2, .7, .3, 1);
}

@keyframes cct26-tabin {
  from { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 1024px) {
  .cclp-tools { --cctool-inset: 16px; }
  .cclp-tools .cct26-nav { margin-top: 32px; }
}

@media (max-width: 767px) {
  .cclp-tools { --cctool-inset: 4px; }
  .cclp-tools .cct26-nav { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cclp-tools .cct26-stage > .cctool-card.cct26-in { animation: none; }
}

/* ==========================================================================
   6. UNDER THE ROW OF NAMES THE PICTURE COMES FIRST

   WHAT IT WAS

   Measured on the built page at 375, with the first block being read: the
   row of names ends at 2330 and the block starts at 2428. What follows is
   the label of the tool at 2460, its client badge at 2496, the headline at
   2564, the paragraph, the four bullets - and only at 3020 the render of
   the tool itself, a screen and a half further down. The second block
   reads the same way, headline at 2565 and picture at 3001, and the third
   headline 2537, picture 2993.

   So a reader who picks a name off the row is shown the same three words
   again as a label and then has to read five hundred and sixty pixels of
   text before the thing being named appears. On a wide window that never
   happens: from 1025px the two columns stand side by side and the picture
   is in view the moment the block is.

   WHAT IT IS NOW

   Under 1025px the picture stands directly under the row of names and the
   text follows it. The order of the two columns is all that changes: no box
   is resized, nothing is hidden, and from 1025px up not one declaration
   here applies, so the alternating left and right of the wide layout is
   untouched.

   HOW, AND WHY IT IS THE ORDER AND NOT THE MARKUP

   The two columns are laid out by the page in three different ways and all
   three had to end in the same place:

     .cctool-n1  a column, picture second in the markup
     .cctool-n2  a column in reverse, picture FIRST in the markup - the page
                 settings write  body.elementor-page-21301 .cctool-n2
                 { flex-direction: column-reverse }  inside their own 1024
                 query, which is how the middle block, mirrored on a wide
                 window, still read text-then-picture on a narrow one
     .cctool-n3  a column again, picture second

   Both are settled here rather than one of them: the direction is put back
   to a plain column for all three, and the picture column is given a place
   before the text column. Doing it with the direction alone would mean
   writing the opposite value for the middle block and reading the markup
   order of every future block; doing it with the place alone would leave
   the middle block reversed, where a place before the text puts the picture
   at the BOTTOM. Together they say what is wanted whatever the markup says.

   The selectors carry the card class twice. The rule they have to outweigh
   names a body class and the block class, and a stylesheet of this plugin
   is not guaranteed to be read after the page's own; weight settles it
   either way.

   The reading order is not touched. Flexbox places boxes, it does not move
   them in the document, so a screen reader still reads label, client,
   headline, description, bullets and then the picture with its alternative
   text - which is the order that describes the picture before it arrives,
   and the better one to hear.

   THE CLIENT BADGE STAYS WITH THE LABEL, UNDER THE PICTURE

   The label and the badge are one container in the page ("Warehouse portal"
   with "Pharmaceutical client, name confidential under NDA" under it), and
   they are the caption of the block: who built what for whom. A caption
   belongs to the thing it names, so it stays whole and follows the picture
   rather than being split around it. Splitting them would also mean
   ordering the children of the text column, which is the arrangement of the
   block itself and not its column order.

   THE BLOCK STARTS AT ITS TOP EDGE

   The three blocks share one grid cell and the cell is as tall as the
   tallest of them, so the two shorter ones have room left over. The page
   centres its blocks, which shared that room between the top and the bottom
   and moved the first thing in the block by up to 27px depending on which
   name was picked. That went unnoticed while the first thing was a line of
   text; with the picture there it is the picture that steps down and up
   under a fixed row of names. The blocks are therefore packed to the top
   under 1025px, which is where the row of names is, and the room left over
   goes to the foot of the band where nothing stands.
   ========================================================================== */
@media (max-width: 1024px) {
  body .cclp-tools .cctool-card.cctool-card {
    flex-direction: column;
    justify-content: flex-start;
  }
  body .cclp-tools .cctool-card.cctool-card > .cctool-mockcol { order: -1; }
  body .cclp-tools .cctool-card.cctool-card > .cctool-content { order: 0; }
}

/* rv:20260901a cache refresh */