/* ------------------------------------------------------------------------
 * ccx-svchero.css
 *
 * The opening of /services/ (post 3043): the headline of the page, the
 * "Learn More" pill under it and, one screen further down, the eyebrow pill
 * and the second headline of the services overview.
 *
 * The block itself is left alone. It already carries the molten sheet of
 * inc/ccx-bgmolten.php as its background, and that is the one heavy moving
 * layer this screen is allowed to have, so nothing here draws a second one.
 * What is added are the four small things the page was missing: the shine
 * across the two headlines, one word of the first headline left as a
 * contour, and a glass surface under both pills.
 *
 * Scope: every rule stands behind the body class .ccsh-svc, which
 * inc/ccx-svchero.php sets on this page and nowhere else. The elements are
 * addressed by their id in the page data rather than by a class of their
 * own, because none of them has one - they were built long before the
 * effect layer existed, and giving them one would mean writing into
 * Elementor. The one place where the page data is touched is the contour
 * word, and that is a span inside a headline, not a class on a container.
 *
 * WHAT IS NOT IN HERE, and why it is worth writing down: the third child of
 * the opening block, the row of design cards below the headline, belongs to
 * another module of this round. No selector here reaches into it: every
 * rule names one of the four elements above.
 * --------------------------------------------------------------------- */


/* ======================================================================
 * 1. THE GLASS SURFACE OF THE TWO PILLS
 *
 * Both pills are drawn as a picture: the file carries the rounded shape,
 * a faint white wash and, on the call to action, the orange disc with the
 * arrow. That picture stays exactly as it is - it is the only place the
 * arrow exists. The glass is built around it, in three layers that are
 * painted one after the other:
 *
 *   1. the blurred backdrop        backdrop-filter on the pill itself
 *   2. a translucent white fill    background-color, so it sits UNDER the
 *                                  picture and cannot wash out the disc
 *   3. the picture                 unchanged, from the page data
 *   4. the light edge on top       an inset box-shadow, which is painted
 *                                  above the background and below the label
 *   5. the rim, a gradient with a specular hotspot, on an injected span
 *
 * The rim needs a node of its own. Both pseudo elements of the call to
 * action already belong to the glint (.mmrb-specbtn draws its pointer
 * light in ::after and its approach ring in ::before), and on the eyebrow
 * a pseudo element would run into Elementor's .e-con::before, which brings
 * its own left, width, height and border along. assets/ccx-svchero.js
 * hangs a plain span in instead, the same way the glow cards and the
 * travelling light get theirs.
 * ================================================================== */

.ccsh-svc [data-id="ab849de"],
.ccsh-svc [data-id="88fefe2"] {
  /* The picture is a pill: its rounded ends are half its height. Without a
   * radius of the same shape on the box, the travelling light would run a
   * rectangle around a rounded button and the blurred backdrop would end in
   * square corners. 999px is capped by the browser at half the height, so
   * one value fits both pills and every breakpoint. */
  border-radius: 999px;

  /* The backdrop the pill stands on is the opening block: its picture and
   * the molten sheet above it. Both are inside the same isolated group, so
   * the blur has something to work with; the sheet reaches 900px down the
   * block, which covers both pills. */
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  backdrop-filter: blur(12px) saturate(1.35);

  /* Under the picture, not over it. background-color is the lowest layer of
   * a background, so the orange disc keeps its colour. */
  background-color: rgba(255, 255, 255, 0.055);

  /* The light edge along the upper rim plus a soft seat below the pill.
   * Inset shadows are painted above the background and below the content,
   * so the line lies on the picture and under the label. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 34px -16px rgba(0, 0, 0, 0.65);
}

/* Without a blur the surface would be a barely visible white veil over the
 * moving sheet and the pill would lose its edge. The fallback trades the
 * blur for a nearly opaque mix in the card blue of the site, which is what
 * the surface reads as anyway once it is blurred. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ccsh-svc [data-id="ab849de"],
  .ccsh-svc [data-id="88fefe2"] {
    background-color: rgba(26, 33, 54, 0.78);
  }
}

/* The picture of the call to action is mapped onto the box edge to edge.
 * The page data says "cover", and at cover the browser scales the file
 * until it fills the box in both directions and cuts the rest: the file is
 * 204 by 70, the box 198 by 64, so three pixels of the rounded top and
 * bottom were being cut off and the drawn pill sat a little wider than its
 * own frame - which showed as a second edge next to the rim. The same
 * correction the security landing page needed for the same reason, and the
 * page builder cannot say it either: its size control offers auto, cover,
 * contain and a custom width, and a custom width always leaves the height
 * on auto. The page data keeps "cover"; a stylesheet is easier to take back
 * than a write into the page.
 *
 * Five classes, one more than the four Elementor writes for the background
 * of a container, so this holds whichever order the two stylesheets arrive
 * in and without !important. The element class carries the id of the
 * element, not of the page, so it survives an id drift between live and the
 * clone the same way the rest of this file does. */
.ccsh-svc .elementor-element-ab849de.elementor-element-ab849de.elementor-element-ab849de.elementor-element-ab849de {
  background-size: 100% 100%;
}

/* The rim. A one pixel ring in the padding of the span: the gradient fills
 * the whole span, and the mask keeps only the frame around the content box.
 *
 * z-index -2 rather than a place in the sibling order: the pill is a
 * stacking context of its own (both the glint and the travelling light say
 * isolation: isolate), so a negative index stays inside the pill, above its
 * background and below the label. The travelling light draws its two trails
 * at -1, which puts them above this rim - the light passes over the frame
 * rather than under it, and that is the right way round. */
.ccsh-svc .ccsh-glass {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  -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;
}

/* The call to action carries the warm rim: the arrow disc at its end is the
 * brand orange, and a cool frame around it would read as two ideas. The
 * hotspot sits where the light of the page comes from, upper left, runs
 * down to a quiet middle and lifts again before the end. */
.ccsh-svc [data-id="ab849de"] > .ccsh-glass {
  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%);
}

/* The eyebrow keeps a neutral rim. Its own answer to the pointer is the
 * light blue ring of the glow cards, and a warm frame at rest would fight
 * with it. Silver at the hotspots, almost nothing in between. */
.ccsh-svc [data-id="88fefe2"] > .ccsh-glass {
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(215, 220, 232, 0.55) 14%,
    rgba(215, 220, 232, 0.16) 48%,
    rgba(215, 220, 232, 0.42) 86%,
    rgba(255, 255, 255, 0.42) 100%);
}

/* The eyebrow already carries a hair line of its own in the page data. Left
 * as it is, the drawn line and the rim would stand one pixel apart and read
 * as a double frame - the same double frame the security landing page had.
 * The rim replaces it. */
.ccsh-svc [data-id="88fefe2"] {
  border-color: transparent;
}

/* The ring of the glow card sits close to the pill: the eyebrow stands on
 * its own with nothing beside it, and the wide factory aura would light up
 * half the empty field around it. */
.ccsh-svc [data-id="88fefe2"].mmrb-glowcard {
  --gc-pad: 12px;
}

/* The travelling light of the call to action. Gold, because the disc at the
 * end of the pill is orange and a cool point would look like a second
 * light source; slower and thinner than the factory setting, because the
 * pill is small and stands alone on an otherwise quiet screen. */
.ccsh-svc [data-id="ab849de"].ccx-starborder {
  --ccx-star-color: #ffb765;
  --ccx-star-core: #fff4e4;
  --ccx-star-speed: 6.2s;
  --ccx-star-thickness: 12px;
  --ccx-star-spread: 34%;
}

/* Phones: the blur costs the most where the least is gained - the pill is
 * 149 by 44 there and the sheet behind it is nearly flat. Half the radius
 * of the blur keeps the surface and takes the work off the device. */
@media (max-width: 767px) {
  .ccsh-svc [data-id="ab849de"],
  .ccsh-svc [data-id="88fefe2"] {
    -webkit-backdrop-filter: blur(7px) saturate(1.25);
    backdrop-filter: blur(7px) saturate(1.25);
  }
}


/* ======================================================================
 * 2. THE CONTOUR WORD OF THE FIRST HEADLINE
 *
 * "versatile" is left as an outline. The word is filled in the colour of
 * what stands behind it, which is how the letters read as a hole rather
 * than as a dark block; the fill is what cleans the inner edges of the
 * variable font as well, so it has to be opaque and it has to be the right
 * tone (the long note in assets/cc-fx.css has the reason).
 *
 * The default of the effect layer is the navy of the site, #0b1227. This
 * headline does not stand on that navy: the opening block carries a
 * picture and the molten sheet over it, and the field behind this word
 * measures 24/25/39 across its whole box on the rendered page. #181a29 is
 * that measurement, so the hole disappears into the field instead of
 * sitting in it as a darker rectangle.
 *
 * Why this word and not the last one of the line: "presence" sits directly
 * on the bright diagonal of the sheet, where a filled hole of any single
 * colour is visible as a patch. The field behind "versatile" is quiet.
 * ================================================================== */

.ccsh-svc [data-id="c6b8850"] .ccx-outline {
  --ccx-outline-bg: #181a29;
}


/* ======================================================================
 * 3. HORIZONTAL ROOM
 *
 * The rim of the glow card reaches twelve pixels past the eyebrow on every
 * side. The pill is centred in a block that runs the full width of the
 * screen, so there is room to the left and right of it at every width, and
 * nothing here needs a guard. The note stays because the same pill on a
 * narrower block would need one.
 * ================================================================== */