/* ------------------------------------------------------------------------
 * ccx-about26.css
 *
 * The about page: the grid of the team, the shape of a portrait, the two
 * glass plates, the ghost numerals of the four blocks and the closing call to
 * action.
 *
 * WEIGHT. The page builder writes a setting as
 *   .elementor-3919 .elementor-element.elementor-element-0b8b413
 * which is three class names. Nothing here carries a page scope, because the
 * live site and the staging clone can number the same page differently and a
 * scope written for one is silently absent on the other. The weight that a
 * scope would have given is made up with repeated attribute selectors, which
 * count the same and travel between installations.
 *
 * The stylesheet is only queued on this page (inc/ccx-about26.php), so a bare
 * element id is unambiguous.
 * --------------------------------------------------------------------- */

/* ====================================================================
 * 1. THE TEAM ROW
 *
 * Eight people stood four to a row. Six do not: four and two leaves a
 * widowed pair under a full row, which reads as two people who arrived
 * late rather than as one team.
 *
 * Three and three, then. The width is written as a share of the row minus
 * the gaps rather than as a percentage, so the columns are exact and the
 * row needs no trailing margin to be taken off the last card in it - a
 * trailing margin is what pushes a centred row off centre by half a gap,
 * and that is the state the page was in.
 *
 * The vertical distance between the two rows was a top margin on every
 * card, which also pushed the first row away from the paragraph above it.
 * It becomes a row gap, which sits between rows and not in front of them.
 * ================================================================== */

[data-id="945d3b4"][data-id="945d3b4"] > .e-con-inner,
[data-id="945d3b4"][data-id="945d3b4"] {
  --ccab-gap: 32px;
  column-gap: var(--ccab-gap);
  row-gap: 72px;
  /* The row centred its items vertically, which on cards of unequal height
   * put three portraits on three different lines. They start together now
   * and the cards grow downwards, which is what a grid of people is. */
  align-items: flex-start;
}

/* The distance between the paragraph above and the first row used to be a
 * top margin on every card, so it was also added between the two rows on top
 * of the gap. It belongs to the block above the row, once. */
[data-id="4be1f64"][data-id="4be1f64"] { padding-bottom: 56px; }

[data-id="54f21af"][data-id="54f21af"][data-id="54f21af"],
[data-id="b964ea4"][data-id="b964ea4"][data-id="b964ea4"],
[data-id="5a6e95d"][data-id="5a6e95d"][data-id="5a6e95d"],
[data-id="0b8b413"][data-id="0b8b413"][data-id="0b8b413"],
[data-id="08c9bea"][data-id="08c9bea"][data-id="08c9bea"],
[data-id="c0844fe"][data-id="c0844fe"][data-id="c0844fe"] {
  --width: calc((100% - 2 * var(--ccab-gap, 32px)) / 3);
  margin: 0;
  min-height: 0;
}

/* ====================================================================
 * 2. A PORTRAIT
 *
 * The eight pictures this page used to carry were cut-outs: circular
 * artwork with transparent corners, so the round shape came out of the
 * file. The six that replaced them are square photographs, which is the
 * right thing for a photograph and the wrong thing for this row, so the
 * circle is cut here.
 *
 * The rim of light is a child of the same box (inc/ccx-about26.php hands
 * the class out at runtime) and takes its radius from it, so it is a
 * circle without being told to be one. The box is exactly the picture:
 * the widget sets a width and a height of 160 and object-fit cover, and
 * the container around it is the same 160 square.
 * ================================================================== */

.ccab-person .elementor-widget-image > .elementor-widget-container {
  border-radius: 50%;
  /* the ring the rim lights up along, faint on its own so a card that
   * nobody is pointing at is still a photograph and not a target */
  box-shadow:
    0 0 0 1px rgba(215, 220, 232, 0.14),
    0 18px 38px rgba(3, 7, 18, 0.42);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.ccab-person .elementor-widget-image > .elementor-widget-container > img {
  border-radius: 50%;
  display: block;
  /* the generated portraits are square, so nothing is cropped; this only
   * keeps a future picture of another ratio from stretching */
  object-fit: cover;
  object-position: center 42%;
}

/* The aura of the rim is held close: the columns stand 32 pixels apart and
 * a wide one would light up the neighbour as the pointer passes between
 * them. */
.ccab-photo.mmrb-glowcard { --gc-pad: 16px; }

.ccab-person:hover .elementor-widget-image > .elementor-widget-container {
  box-shadow:
    0 0 0 1px rgba(215, 220, 232, 0.30),
    0 22px 44px rgba(3, 7, 18, 0.50);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .ccab-person .elementor-widget-image > .elementor-widget-container,
  .ccab-person:hover .elementor-widget-image > .elementor-widget-container {
    transition: none;
    transform: none;
  }
}

/* ====================================================================
 * 3. THE ROLE LINE AND ITS COUNTRY CHIP
 *
 * The role used to run over two lines with the country in brackets under
 * it. assets/ccx-about26.js takes the bracket off the end and puts the
 * country in a chip beside the role, which turns a wrapped sentence into a
 * label and a value.
 * ================================================================== */

.ccab-role.ccab-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.35;
}

.ccab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(226, 226, 229, 0.92);
  /* the plate a browser without the glass module gets, and the ground the
   * glass lies over where it does run */
  /* A real border and not an inset shadow: the glass module restates the
   * colour of a border, and a plate whose edge it cannot reach reads as a
   * sticker lying on the glass instead of as its rim. */
  border: 1px solid rgba(255, 255, 255, 0.13);
  background-color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.ccab-chipdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff8e2b;
  box-shadow: 0 0 0 0 rgba(255, 142, 43, 0.55);
  animation: ccab-chipdot 2.6s ease-out infinite;
  flex: 0 0 auto;
}

/* The six dots are drawn one after the other rather than together: six
 * markers pulsing in step reads as a warning light, six out of step reads
 * as a row of people who are there. */
.ccab-person:nth-child(2) .ccab-chipdot { animation-delay: 0s; }
.ccab-person:nth-child(3) .ccab-chipdot { animation-delay: -0.42s; }
.ccab-person:nth-child(4) .ccab-chipdot { animation-delay: -0.84s; }
.ccab-person:nth-child(5) .ccab-chipdot { animation-delay: -1.26s; }
.ccab-person:nth-child(6) .ccab-chipdot { animation-delay: -1.68s; }
.ccab-person:nth-child(7) .ccab-chipdot { animation-delay: -2.10s; }

@keyframes ccab-chipdot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 142, 43, 0.50); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 142, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 142, 43, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ccab-chipdot { animation: none; }
}

/* ====================================================================
 * 4. THE TWO EYEBROWS
 *
 * "People-focused approach" and "Meet Our Team" are plain lines of text
 * today. They become the pill this site puts above a section headline,
 * and the glass module then lays a pane over them.
 *
 * The host is the widget container and not the widget: the container is
 * the box that carries the radius, and a rim drawn around a rectangle
 * behind a rounded plate is a mistake this site has already made three
 * times. width: fit-content is what makes the container the size of the
 * pill instead of the width of the section.
 * ================================================================== */

.ccab-eyebrow-pill.ccab-eyebrow-pill {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.045);
}

/* The larger of the two is set at 24 pixels and bold, which is a headline
   size on a plate. It comes down to the size the other eyebrows of this
   site use. */
[data-id="b1ec5bb"][data-id="b1ec5bb"] .elementor-heading-title {
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-id="e67114b"][data-id="e67114b"] .elementor-heading-title {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(226, 226, 229, 0.92);
}

/* The paragraph under the team eyebrow used to sit right on it. */
[data-id="47b963e"][data-id="47b963e"] { margin-top: 18px; }

/* --------------------------------------------------------------------
 * THE SECOND EYEBROW IS A PAINTING, NOT A PLATE
 *
 * "Meet Our Team" already stands on a pill that is a picture: the little
 * figure at its left end is part of that picture, and the picture is the
 * background of the container around the text. That container is 173 by 40
 * and the box inside it is 125 by 16, because the page holds the text clear
 * of the figure with a padding of its own. A plate drawn on the inner box
 * therefore sat INSIDE the painted pill and the eyebrow read as two pills.
 *
 * So the glass sits on the painted pill, which is the element that carries
 * the rounded shape. Nothing here changes its size: no padding, no width,
 * no border. The one thing that has to be said is the radius, because the
 * pill is painted rather than drawn and the element itself has square
 * corners, and a lens over square corners refracts a rectangle.
 * -------------------------------------------------------------------- */
.ccab-eyebrow-art.ccab-eyebrow-art {
  border-radius: 999px;
}

/* ------------------------------------------------- the pill inside the pill
 *
 * ROUND 24. What round 20 fixed was the plate of the glass module sitting on
 * the inner text box. What it did not see is that the container itself is
 * only 173 pixels wide from 768 upwards, where the page sets that width, and
 * runs the full width of the column below that - 343 pixels on a 375 pixel
 * phone, 288 on a 320 pixel one.
 *
 * The painting does not follow. It is laid in with `contain`, so it keeps the
 * 260 by 60 proportion of the file and comes out 173 wide against a 40 pixel
 * height, centred, while the rim of the glass runs the full 343. The result
 * is a painted pill floating inside a drawn one with 85 pixels of glass on
 * either side of it, and a visible vertical edge where the painting stops.
 * That is the "two containers inside each other" this eyebrow was reported
 * for, and it is why it only showed on a phone.
 *
 * Two declarations settle it, and both are needed:
 *
 *   the width  is taken off the page and given to the content at every size.
 *              The text is 148 pixels and the widget holds it clear of the
 *              painted figure with 25 pixels of padding, which is the 173 the
 *              wide layout sets by hand - so this is the same box everywhere
 *              rather than a new one, and a longer label in another language
 *              grows it instead of tearing the painting off it;
 *   the size    of the painting is pinned to the box rather than to its own
 *              proportion, so however wide that box ends up, the painted pill
 *              is exactly the drawn one. 173 by 40 is the file's own ratio to
 *              within a hair, so at today's label nothing about the artwork
 *              changes.
 *
 * Five class names and an id: the width is written into the page settings and
 * the sheen of the glass module is written with five of its own.
 * ------------------------------------------------------------------------ */
[data-id="89e2544"].ccab-eyebrow-art.ccab-eyebrow-art.ccg-glass.ccg-pill {
  width: fit-content;
  /* 173 is the width the wide layout sets by hand, and 173 by 40 is the
     260 by 60 of the file to within a hair, so at this size the painting is
     laid on at its own proportion and the little figure in it is round.
     Content alone comes to 127, which would squeeze that figure by a
     quarter - hence a floor rather than a plain fit. A longer label in
     another language grows past the floor and stretches the painting
     instead of tearing it off the pill, which is the lesser of the two. */
  min-width: 173px;
  max-width: 100%;
  align-self: center;
}

/* The sheen of the glass module is written as a background image with five
   class names, which would put it in place of the painting. Six and an
   attribute lay it over the painting instead. The painting arrives in the
   custom property from assets/ccx-about26.js; without it the fallback keeps
   the declaration valid and the host simply carries the sheen alone. */
[data-id="89e2544"].ccab-eyebrow-art.ccg-glass.ccg-pill.ccab-eyebrow-art.ccg-glass.ccg-pill {
  background-image:
    linear-gradient(112deg, var(--ccg-fill-a) 0%, var(--ccg-fill-b) 74%),
    var(--ccab-eyebrow-art, none);
  /* Sheen first, painting second, both stretched over the whole box. See the
     block above for why the painting may no longer keep its own proportion. */
  background-size: 100% 100%, 100% 100%;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

/* ====================================================================
 * 5. THE FOUR BLOCKS OF "WHAT SETS US APART"
 *
 * Each block is a headline and a paragraph in a column 547 pixels wide,
 * with the text wrapping at about 330 and a wide empty strip to the right
 * of it. That strip is where this site puts its ghost numerals, and this
 * page had none.
 *
 * ::after and never ::before: Elementor draws the background overlay of a
 * container in ::before and sets left, width, height and border on it, so
 * a decoration put there has to undo four properties before it can be
 * used. That trap has cost this project two rounds.
 * ================================================================== */

/* From 768 upwards, not from 1025. The strip the numeral fills is there at
   both: the block is 550 pixels wide on a tablet and the text wraps at about
   330 of them, so without the numeral a fifth of that section is empty page.
   Under 768 the text is centred across the full width and there is no strip,
   which is why the numeral stops there. */
@media (min-width: 768px) {
  .ccab-apart { position: relative; }

  .ccab-apart::after {
    content: var(--ccab-n, "");
    position: absolute;
    top: -34px;
    right: 0;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    border: 0;
    z-index: 0;
    pointer-events: none;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 190px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.055);
    letter-spacing: -0.04em;
  }

  /* The text has to stand in front of the numeral, not behind it. */
  .ccab-apart > * { position: relative; z-index: 1; }
}

/* On a tablet the strip is 220 pixels rather than 300, so the numeral comes
   down with it and sits a little lower, level with the headline rather than
   above it. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ccab-apart::after {
    top: -14px;
    right: 14px;      /* the tiles begin at the edge of this column */
    font-size: 132px;
  }
}

/* ====================================================================
 * 4b. THE TWO PICTURES INSIDE THE OPENING LINE
 *
 * "Who Is [picture] Behind [picture] CartCraft?" carries two photographs of
 * 104 pixels between its words. Their rounded corners are cut into the files
 * themselves and the elements are square, so a shadow on the box would draw a
 * square halo around a rounded picture, which is the mistake this site keeps
 * making. A drop shadow is a filter and follows the transparency of the file,
 * so it traces the rounded corner that is actually there.
 * ================================================================== */

[data-id="8b579a2"] .elementor-heading-title img {
  filter: drop-shadow(0 6px 16px rgba(4, 8, 20, 0.55))
          drop-shadow(0 0 14px rgba(96, 146, 236, 0.26));
}

/* ====================================================================
 * 5b. THE FIVE TILES BESIDE "WHAT SETS US APART"
 *
 * Four photographs and the mark on orange, stacked down the right of that
 * section. They were the only pictures on this page standing on the navy
 * with square corners and nothing around them: no radius, no edge, no
 * shadow, so each one ended on a hard line against the page.
 *
 * WHY THE FRAME IS ON THE PICTURE AND NOT AROUND IT
 *
 * The obvious host for the rim of this site is the widget container, which
 * is what every other picture here uses. Not here: these containers are 482
 * pixels wide and hold a picture of 240, because the collage staggers the
 * tiles across that width. A ring drawn on the container would be a
 * rectangle twice as wide as the tile, floating beside it, which is the
 * mistake this site keeps making and which its own rules forbid. The frame
 * therefore goes on the picture itself, where the rounded box actually is.
 *
 * A picture can hold no children, so the pointer-following ring of the team
 * portraits is not available on this host. What is drawn instead is what
 * that ring settles into when the pointer is elsewhere: the hairline, a
 * seat of shadow under the tile and a low blue bloom around it. Coming near
 * with the pointer brings the bloom up.
 * ================================================================== */

.ccab-mos img {
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 14px 34px rgba(4, 8, 20, 0.42),
    0 0 26px rgba(90, 140, 230, 0.10);
  transition: box-shadow 0.32s ease, transform 0.32s ease;
}

.ccab-mos:hover img {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 18px 40px rgba(4, 8, 20, 0.48),
    0 0 34px rgba(120, 168, 255, 0.20);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ccab-mos img,
  .ccab-mos:hover img { transition: none; transform: none; }
}

/* ====================================================================
 * 6. THE TWO BOXED CARDS AND THE TWO ORANGE DISCS
 * ================================================================== */

/* Foundation owned and Giving back already carry a frame and a very light
   fill from the page. The rim answers the pointer along that frame, so it
   is held close to it.

   Below 1025 pixels the aura is taken off the outside of the card entirely.
   The two cards fill the row from edge to edge there, so fourteen pixels of
   aura on the right of the second one is fourteen pixels of page nobody can
   see and a horizontal scrollbar everybody can: measured at 5 pixels of
   overhang at 1024 and 10 at 768 before this rule. The ring itself stays,
   it now sits exactly on the frame. */
.ccab-card.mmrb-glowcard { --gc-pad: 14px; }

@media (max-width: 1024px) {
  .ccab-card.mmrb-glowcard { --gc-pad: 0px; }
}

/* The two discs of the agile block are 80 pixels across inside a box as
   wide as the column, so a radius of half the box would draw an ellipse
   lying across the card. The box is made the size of the disc first. */
.ccab-icon.mmrb-glowcard { width: fit-content; }

/* -------------------------------------------------- the glint on the discs
 *
 * ROUND 24. The two discs are a brand orange gradient with a fixed sheen
 * baked into the drawing, which is a still life: the rest of this page moves
 * and they did not. What crosses the twenty client logos on the home page is
 * a narrow band of light on its own clock per tile, and that is what is
 * borrowed here.
 *
 * WHY IT DOES NOT WASH THE COLOUR OUT
 *
 * On the home page the band is laid on in hard-light, which is right over a
 * white word mark and wrong over a saturated colour: hard-light with white
 * drives the surface under it to white and the disc would flash grey. The
 * band here is laid on in overlay, which brightens what is beneath it while
 * leaving the hue where it is - the discs stay orange through the whole pass,
 * which is what was asked for.
 *
 * WHERE IT IS DRAWN
 *
 * On .elementor-icon, one level inside the host that carries the ring of
 * light. The ring is an absolutely placed span that reaches 10 pixels beyond
 * the host on every side; clipping the band on the host would cut the ring
 * off with it. .elementor-icon is exactly the disc, so a round clip there
 * holds the band inside the circle and leaves everything outside untouched.
 *
 * THE TWO CLOCKS
 *
 * 9 and 11 seconds. They share no factor, so the pair returns to the same
 * relative position only every 99 seconds and never reads as one blink; the
 * band rests off the left edge for two thirds of each pass, so a disc shows
 * a single glint and then sits still, rather than shimmering constantly.
 * ---------------------------------------------------------------------- */
.ccab-gloss .elementor-icon {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}

.ccab-gloss .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background-image: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.42) 54%,
    rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 170% 0;
  mix-blend-mode: overlay;
  animation-name: ccab-iconshine;
  animation-duration: var(--ccab-gloss-speed, 10s);
  animation-delay: var(--ccab-gloss-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes ccab-iconshine {
  0%, 66%  { background-position: 170% 0; }
  100%     { background-position: -70% 0; }
}

.ccab-gloss-a { --ccab-gloss-speed: 9s;  --ccab-gloss-delay: 0s; }
.ccab-gloss-b { --ccab-gloss-speed: 11s; --ccab-gloss-delay: 3.4s; }

/* A still disc is the drawing as it was, which is a finished thing on its
   own - the band is the extra, never the thing that makes it readable. */
@media (prefers-reduced-motion: reduce) {
  .ccab-gloss .elementor-icon::after { animation: none; opacity: 0; }
}

/* --------------------------------------------- the two cards, as card stock
 *
 * ROUND 24. Foundation owned and Giving back are the only two boxes on this
 * page that are a photograph with a title laid over it, which is the shape a
 * collectible card is. ccx-tiltcard, the module the project slider carries,
 * leans them towards the pointer and pulls a sheet of light and a faint
 * holographic band across them while they lean.
 *
 * The two numbers below are the only thing this page adds to that module,
 * and they are the two it leaves open. The sheet and the band were measured
 * on the slider cards, which stand on the page colour; these two stand on a
 * photograph, where the same brightness reads as fog over the picture rather
 * than as light on a surface. Both are pulled back by about a quarter.
 *
 * The vanishing point is NOT set here. ccx-tilt.js writes it as an inline
 * style from the measured width of each card - 1.9 times the width, held
 * between 850 and 1700 - and an inline style outranks any rule in this file.
 * These cards are 584 wide, so they get 1110, which is the flatter end of
 * that range and exactly what a card this wide needs. A declaration here
 * would look like it did something and would not.
 *
 * The ring of light already on these cards sits outside them and leans with
 * them, because the lean is written on the host - that is the arrangement
 * ccx-tilt.css was built for and nothing here disturbs it.
 * ---------------------------------------------------------------------- */
.ccab-card.ccx-tiltcard {
  --tc-glare: 0.13;
  --tc-holo: 0.072;
}

/* ====================================================================
 * 7. THE CLOSING CALL TO ACTION
 *
 * The page used to end on the last portrait and ask the reader for
 * nothing. tools/r20-about/build.php appends a section with two buttons;
 * everything it looks like is here, so that the page data holds text and
 * links and no styling a later design round would have to unpick.
 *
 * The two buttons are the pair from the opening block of the home page,
 * measured off it: a filled pill with white lettering, a warm rim and the
 * brand gradient, and beside it an outlined pill at one pixel of white at
 * eighteen hundredths, 999 of radius, 23 by 30 of padding, 18 pixels of
 * type at weight 500.
 * ================================================================== */

.ccab-cta-sec.ccab-cta-sec { margin-top: 24px; }

[data-id="cs20ab01"][data-id="cs20ab01"] .elementor-heading-title {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ff8e2b;
  background: rgba(255, 142, 43, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 142, 43, 0.26);
}

[data-id="cs20ab02"][data-id="cs20ab02"] { margin-top: 22px; }
[data-id="cs20ab02"][data-id="cs20ab02"] .elementor-heading-title {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  color: #e6e7e9;
}

[data-id="cs20ab03"][data-id="cs20ab03"] { margin-top: 16px; max-width: 640px; }
[data-id="cs20ab03"][data-id="cs20ab03"] .elementor-heading-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: rgba(215, 220, 232, 0.82);
}

[data-id="cs20ab04"][data-id="cs20ab04"] { margin-top: 34px; }

/* ---------------------------------------------- the main call to action
 *
 * ROUND 24. What stood here was a filled orange pill with two families of
 * fine bands crossing it. Lars rejected that same surface on the apps page
 * the day before this page was reviewed, and the rule that came out of it
 * names the main call of this site exactly: the painted dark pill with the
 * orange arrow disc - the artwork the opening block of the home page
 * carries - with the outlined pill beside it as the second choice, never
 * the other way round.
 *
 * So this button is that pill now, and every number below was read off the
 * home page rather than described from memory. At 1440 pixels:
 *
 *   the pill    293 by 64, the artwork laid in with cover from the left
 *               edge and the vertical centre, 999 of radius, clipped
 *   the label   18 pixels at weight 500, white at 97 hundredths, its last
 *               letter 92 pixels short of the right edge, which leaves 36
 *               pixels of air in front of the painted disc
 *
 * WHY THE WIDTH HAS A FLOOR
 *
 * cover scales the artwork by whichever of the two ratios is the larger.
 * The file is 449 by 105, so as long as the box is wider than 4.276 times
 * its height, the width decides and the disc lands at 88 per cent of the
 * box however wide that box is. Below that ratio the height decides, the
 * artwork is cropped from the right - the painting is anchored to the left
 * edge - and the arrow disc is the first thing to be cut off. At 64 tall
 * the turning point is 274 pixels, which is the floor written below; the
 * narrowest column this site renders is 288, so the pill keeps its whole
 * artwork down to a 320 pixel phone.
 *
 * The travelling light and the pointer glint stay as they were: the light
 * runs on the rim of a clipped host, which is where this site wants it,
 * and the glint is mmrb-specbtn, which the base configuration puts on every
 * button and which stays inside the box.
 * ------------------------------------------------------------------ */
.ccab-cta.ccab-cta.ccab-cta .elementor-button.elementor-button.elementor-button,
a.elementor-button.ccab-cta.ccab-cta.ccab-cta.ccab-cta.ccab-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 293px;
  min-width: 274px;
  max-width: 100%;
  height: 64px;
  padding: 0 92px 0 24px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  background-image: var(--ccab-cta-art,
    url("/wp-content/uploads/2024/09/Group-1216259441.png"));
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.97);
  fill: rgba(255, 255, 255, 0.97);
  text-shadow: none;
  box-shadow: none;
  overflow: hidden;
  transition: filter 0.22s ease-out;
}

/* The whole painting lifts by five hundredths. The disc is part of it, so
   the arrow warms with the pill and there is nothing to keep in step. */
.ccab-cta.ccab-cta.ccab-cta .elementor-button.elementor-button.elementor-button:hover,
.ccab-cta.ccab-cta.ccab-cta .elementor-button.elementor-button.elementor-button:focus-visible,
a.elementor-button.ccab-cta.ccab-cta.ccab-cta.ccab-cta.ccab-cta:hover,
a.elementor-button.ccab-cta.ccab-cta.ccab-cta.ccab-cta.ccab-cta:focus-visible {
  filter: brightness(1.06);
}

/* The label sits in the flow of the pill and must not be stretched by it:
   the button is a flex box now and its one child would otherwise grow to
   fill the space that is being held for the disc. */
.ccab-cta.ccab-cta.ccab-cta .elementor-button .elementor-button-content-wrapper {
  flex: 0 0 auto;
}

/* -------------------------------------------------- the outlined pill
 *
 * Two selectors, and both are needed. The page builder writes a class given
 * in the widget settings onto the WIDGET, not onto the anchor inside it, so
 * the descendant form is the one that fires today; the bare form is the
 * handle for a later button that carries the class itself.
 *
 * background-image is deliberately not touched: the glass module draws the
 * plate of this button in that property, and a rule here saying none would
 * take the glass off the one outlined button on the page. Only the colour
 * underneath it is cleared, which is where the theme puts its green.
 * ------------------------------------------------------------------ */
.ccab-btn2.ccab-btn2.ccab-btn2 .elementor-button.elementor-button.elementor-button,
a.elementor-button.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2 {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 23px 30px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
  fill: rgba(255, 255, 255, 0.85);
  transition: border-color 0.22s ease-out, color 0.22s ease-out;
}

.ccab-btn2.ccab-btn2.ccab-btn2 .elementor-button.elementor-button.elementor-button:hover,
.ccab-btn2.ccab-btn2.ccab-btn2 .elementor-button.elementor-button.elementor-button:focus-visible,
a.elementor-button.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2:hover,
a.elementor-button.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2.ccab-btn2:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

/* The light on the filled pill is the gold of the site; the one on the
   outlined pill is cool, so the two read as a first and a second offer and
   not as a pair. Both sets of numbers are the ones /process-tools/ uses. */
.ccab-cta .ccx-starborder {
  --ccx-star-speed: 6s;
}
.ccab-star-cool.ccab-star-cool {
  --ccx-star-color: #cfe0ff;
  --ccx-star-core: #ffffff;
  --ccx-star-speed: 7.5s;
  --ccx-star-thickness: 11px;
  --ccx-star-spread: 26%;
  --ccx-star-opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .ccab-cta .elementor-button,
  .ccab-btn2 .elementor-button { transition: none; }
}

/* ====================================================================
 * 8. NARROW WINDOWS
 * ================================================================== */

/* Two people to a row between a tablet and a small laptop: three columns
   of 216 pixels would break every role line over three lines. */
@media (max-width: 1024px) {
  [data-id="54f21af"][data-id="54f21af"][data-id="54f21af"],
  [data-id="b964ea4"][data-id="b964ea4"][data-id="b964ea4"],
  [data-id="5a6e95d"][data-id="5a6e95d"][data-id="5a6e95d"],
  [data-id="0b8b413"][data-id="0b8b413"][data-id="0b8b413"],
  [data-id="08c9bea"][data-id="08c9bea"][data-id="08c9bea"],
  [data-id="c0844fe"][data-id="c0844fe"][data-id="c0844fe"] {
    --width: calc((100% - var(--ccab-gap, 32px)) / 2);
  }
  [data-id="945d3b4"][data-id="945d3b4"] > .e-con-inner,
  [data-id="945d3b4"][data-id="945d3b4"] { row-gap: 56px; }

  [data-id="cs20ab02"][data-id="cs20ab02"] .elementor-heading-title {
    font-size: 40px;
    line-height: 48px;
  }
}

@media (max-width: 767px) {
  [data-id="54f21af"][data-id="54f21af"][data-id="54f21af"],
  [data-id="b964ea4"][data-id="b964ea4"][data-id="b964ea4"],
  [data-id="5a6e95d"][data-id="5a6e95d"][data-id="5a6e95d"],
  [data-id="0b8b413"][data-id="0b8b413"][data-id="0b8b413"],
  [data-id="08c9bea"][data-id="08c9bea"][data-id="08c9bea"],
  [data-id="c0844fe"][data-id="c0844fe"][data-id="c0844fe"] {
    --width: 100%;
  }
  [data-id="945d3b4"][data-id="945d3b4"] > .e-con-inner,
  [data-id="945d3b4"][data-id="945d3b4"] { row-gap: 44px; }

  [data-id="cs20ab02"][data-id="cs20ab02"] .elementor-heading-title {
    font-size: 30px;
    line-height: 38px;
  }
  [data-id="cs20ab03"][data-id="cs20ab03"] .elementor-heading-title {
    font-size: 16px;
    line-height: 26px;
  }
  /* Two pills side by side do not fit on a phone; one under the other, and
     both as wide as the column so neither reads as the smaller offer. */
  [data-id="cs20ab04"][data-id="cs20ab04"] { flex-direction: column; width: 100%; }
  [data-id="cs20ab05"][data-id="cs20ab05"],
  [data-id="cs20ab06"][data-id="cs20ab06"] { width: 100%; }
  /* The painted pill keeps its shape here: it is a picture with a disc in
     it, and a picture that is told to be a block of full width and free
     height is a picture with its disc cut off. It fills the column, it
     keeps a height, and the space held for the disc shrinks with the type.
     60 tall needs 257 of width to keep the whole artwork; the column is
     288 at its narrowest, so there is room. */
  .ccab-cta.ccab-cta.ccab-cta .elementor-button.elementor-button.elementor-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 60px;
    padding: 0 84px 0 22px;
    font-size: 17px;
  }
  .ccab-btn2.ccab-btn2.ccab-btn2 .elementor-button.elementor-button.elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 0 24px;
    font-size: 17px;
  }
}

/* A page that is printed does not need a rim, a chip plate or a numeral. */
@media print {
  .ccab-apart::after { content: none; }
  .ccab-photo > .mmrb-glowcard__edge { display: none; }
}

/* rv:20260831a cache refresh */

/* --------------------------------------------- the two agile blocks
 *
 * ROUND 26. A rim of light on the pair under "Agile Management", drawn
 * inside them.
 *
 * WHY INSIDE
 *
 * The engine hangs its rim on a box that reaches --gc-pad beyond the
 * element and lets the bloom fall outside it. That is right for a card
 * standing on its own, and wrong for these two: their row sets overflow
 * to hidden, so anything past the outer edge is cut away, and the two
 * blocks meet along a hair line one pixel wide, so a bloom leaving the
 * left block would land inside the right one. The same pointer gesture
 * would then look different depending on which of the two it found.
 *
 * Pulling the box onto the block and turning the bloom inwards settles
 * both at once and leaves the hair line grid this section is built on
 * exactly as it is - no block needs a radius or a gap of its own.
 *
 * The reach is 22 pixels against the 14 of the logo raster, because these
 * blocks are 608 by 341 rather than a tile, and they carry 48 pixels of
 * padding on the reading side, so the light stops well clear of the text.
 * -------------------------------------------------------------- */
.ccab-agile.mmrb-glowcard {
  --gc-pad: 0px;
}

.ccab-agile.mmrb-glowcard > .mmrb-glowcard__edge::before {
  box-shadow:
    inset 0 0 0 1px var(--gc-ring),
    inset 0 0 4px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 52%),
    inset 0 0 12px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 32%),
    inset 0 0 22px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 18%);
}

/* The pool that follows the pointer. The engine's is 300 pixels across,
   which on a block this wide sits well; only its strength comes down,
   because there is a headline and two lines of text over it. */
.ccab-agile.mmrb-glowcard > .mmrb-glowcard__fill {
  background:
    radial-gradient(circle 300px at var(--mm-x, 50%) var(--mm-y, 50%),
      hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 9%), transparent 100%),
    radial-gradient(ellipse 120% 120% at 50% 50%,
      hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 4%), transparent 74%);
}

/* Under 1025 the two blocks stand one above the other and the row no
   longer clips, but the rim stays inside anyway: on a phone a bloom
   around a full width block is a glow around the whole screen. */
@media (max-width: 1024px) {
  .ccab-agile.mmrb-glowcard { --gc-pad: 0px; }
}