/*==============================================================================
  CSIGNAL SKIN, SERVICE PAGES
  ----------------------------------------------------------------------------
  Companion to csignal-skin.css. Loaded AFTER it, and scoped to
  body.cs-skin.service-page so it cannot reach the homepage or any page that
  has not opted in.

  csignal-skin.css already carries everything shared: header, mega menu,
  footer, .feature, .faqs, .accordion, .partners, the buttons and the font
  sweep. This file only covers the furniture that is unique to the service
  page template and was therefore never written:

      body.service-page ground   black plus two old-brand radial glows
      .intro                     hero band, offer pills, eyebrow
      .about                     white slab, the section the features sit under
      .testimonial               includes/testimonial.php
      .experts / .looking        includes/richfooter.php
      .pricing                   present on sibling pages, not on this one

  RULE FOR THIS FILE, same as the skin: colours, type, borders and decoration
  only. No layout, no spacing changes that move content, no DOM, no copy.
  Removing the one <link> reverts the page completely.

  Palette and text roles are inherited from body.cs-skin in csignal-skin.css.
  Nothing is redeclared here except the mono face, which the skin does not
  load, and the two stepped-edge seams.
==============================================================================*/

body.cs-skin.service-page {
  /* The third brand face. Bricolage shouts, Hanken stays calm, Plex Mono
     counts. The eyebrows on this template are the mono face's main job on a
     marketing page: 11px, uppercase, tracked 0.06em. */
  --cs-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/*------------------------------------------------------------------------------
  1. The ground
  service.css paints body.service-page black with two radial glows, teal
  rgba(0,180,240,.14) and purple rgba(160,79,244,.16). That is the same old
  accent pair the skin already overrides inside .sv6, and CSignal has no
  gradients in it at all, so the glows are switched off rather than recoloured.
  The intro's own blurred orb is already display:none in service.css.
------------------------------------------------------------------------------*/

body.cs-skin.service-page { background: var(--ink); }

@media (max-width: 1023px) {
  body.cs-skin.service-page { background: var(--ink); }
}

/*------------------------------------------------------------------------------
  2. Intro
------------------------------------------------------------------------------*/

body.cs-skin.service-page .intro {
  position: relative;
  overflow-x: clip;
  background-color: var(--ink);
}

/* --- The shape composition -------------------------------------------------
   Four shapes from the kit, flat and at full brand colour, rather than one
   oversized ghost:

     store   the square the cursor sits in. Structure, and the only one
             carried in a tint rather than an accent, so it can sit behind the
             right hand copy without touching its contrast. Cropped off the
             top and the right, which is the bleed the composition needs.
     spike   a staircase climbing. Growth, uplift, a number that moved, which
             is the argument the whole page is making.
     proof   two arms meeting to make a tick. Checked, and shown.
     spark   the three arms off the mark. Punctuation, nothing more.

   One accent, lime, plus sky as the surround colour it is meant to be and one
   tint of the ground. Four shapes is the ceiling, and none of them is rotated:
   they are cut from a twelve unit grid, not scattered across the frame. Depth
   comes from size, 620 down to 52, not from fading anything back.

   Every shape hangs off a pseudo-element so the markup stays byte-identical
   to index.php. .intro__gradient is the old blurred orb, already emptied by
   service.css, reused here as the layer rather than left inert. Positions are
   keyed to the gaps in the copy: the band above the headline, the outside
   margin below the lede, and the gap between the offer pills and the Search
   mark. Everything is pointer-events:none and sits under the container.
*/

/* service.css already gives .intro .container-fluid position:relative. The
   explicit z-index is what keeps every line of copy above the shapes without
   giving the shapes a negative index, which would drop them behind the page
   background entirely. */
body.cs-skin.service-page .intro .container-fluid { z-index: 1; }

body.cs-skin.service-page .intro__gradient {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* service.css blurs this element for the old orb. Nothing in CSignal is
     blurred, and a filter here would soften every shape hung off it. */
  filter: none;
  background: none;
  border-radius: 0;
}

body.cs-skin.service-page .intro__gradient::before,
body.cs-skin.service-page .intro__gradient::after,
body.cs-skin.service-page .intro::before,
body.cs-skin.service-page .intro::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  animation: cs-svc-drift var(--cs-drift, 9s) ease-in-out infinite;
  animation-delay: var(--cs-drift-d, 0s);
}

/* 01 store. Structure, in a tint one step off the ground. */
body.cs-skin.service-page .intro__gradient::before {
  top: -80px;
  right: -170px;
  width: 620px;
  height: 620px;
  --cs-drift: 13s;
  --cs-drift-d: -2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 140 140'%3E%3Cpath d='M0 0 H120 V70 H84 V96 H46 V120 H0 Z' fill='%23173023' stroke='%23173023' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 02 spike. In the band above the headline, clear of the fold copy. */
body.cs-skin.service-page .intro__gradient::after {
  top: 70px;
  right: 620px;
  width: 132px;
  height: 132px;
  --cs-drift: 8s;
  --cs-drift-d: -3.5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 140 140'%3E%3Cpath d='M0 120 V96 H24 V72 H48 V44 H72 V22 H96 V6 H120 V120 Z' fill='%23D3F502' stroke='%23D3F502' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 03 proof. Outside margin, below the lede and right of the CTA. */
body.cs-skin.service-page .intro::before {
  bottom: 92px;
  right: 150px;
  width: 104px;
  height: 104px;
  --cs-drift: 10.5s;
  --cs-drift-d: -6s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 168 168' fill='none'%3E%3Cpath d='M18 56 L46 86' stroke='%23AEC8F2' stroke-width='34' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M46 86 L106 24' stroke='%23AEC8F2' stroke-width='34' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 04 spark. Punctuation, in the gap between the offer pills and the mark. */
body.cs-skin.service-page .intro::after {
  bottom: 128px;
  left: 620px;
  width: 52px;
  height: 52px;
  --cs-drift: 6.5s;
  --cs-drift-d: -1s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 84 92'%3E%3Cpath d='M21.1506 2C22.4632 2.07928 24.3656 2.4031 25.5278 2.97618C26.0195 3.21777 26.4694 3.53529 26.8603 3.91715C29.6276 6.61277 32.917 10.6344 35.3373 13.6371C38.4739 17.5284 45.0601 22.5248 42.368 28.0158C40.8551 31.1015 38.6859 31.9748 35.6016 32.9848C34.0578 33.1241 31.9773 32.2809 30.7672 31.385C27.9923 29.3304 16.9984 16.5585 15.2446 13.7626C14.6351 12.7931 14.2432 11.705 14.0953 10.5722C13.4151 5.60373 16.4386 2.6683 21.1506 2Z' fill='%23D3F502'/%3E%3Cpath d='M7.249 72.0275C9.97134 71.8874 14.1939 72.3187 17.0111 72.5053C21.1702 72.7807 25.9752 72.7858 30.03 73.6066C30.6792 73.7382 32.7426 75.0911 33.4224 75.5215C36.3933 81.8731 35.4673 86.0695 28.0659 88C21.3148 87.6731 14.2593 86.4207 7.40425 86.3867C5.38991 86.3767 2.67221 85.076 1.47569 83.4554C-0.167961 81.2292 -0.184043 79.3756 0.217956 76.766C2.7516 73.5394 2.42347 72.3437 7.249 72.0275Z' fill='%23D3F502'/%3E%3Cpath d='M69.4896 0H72.8339C74.1452 0.570158 75.5692 1.25354 76.6868 2.13523C78.1533 3.29252 78.7409 5.66597 78.9335 7.43399C79.3102 10.8903 78.005 25.6162 77.0789 29.129C76.7809 30.2597 76.3593 31.2651 75.5845 32.17C74.2095 33.7751 72.2485 34.8199 70.0954 34.976C67.8949 35.1354 66.2862 34.4978 64.6533 33.121C62.9991 31.7262 62.2018 29.9351 62.0402 27.8358C61.7695 24.3133 62.9113 7.53871 64.1228 4.5325C64.7158 3.06033 66.2201 1.77683 67.277 0.578553C68.2145 0.418597 68.6294 0.37191 69.4896 0Z' fill='%23D3F502'/%3E%3C/svg%3E");
}

/* Vertical drift only. The kit shapes never rotate, so this carries none of
   the tilt the homepage hero shapes use. A new name rather than a second
   cs-float, because @keyframes resolve by source order and redeclaring one
   would silently depend on stylesheet load order. */
@keyframes cs-svc-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -11px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.cs-skin.service-page .intro__gradient::before,
  body.cs-skin.service-page .intro__gradient::after,
  body.cs-skin.service-page .intro::before,
  body.cs-skin.service-page .intro::after { animation: none; }
}

/* Below 1024 the intro stacks to one column and there is no margin for any of
   this. The tint block survives on tablet, cropped harder. The three accents
   go. Under 768 the layer is off entirely. */
@media screen and (max-width: 1023px) {
  body.cs-skin.service-page .intro__gradient::after,
  body.cs-skin.service-page .intro::before,
  body.cs-skin.service-page .intro::after { display: none; }

  body.cs-skin.service-page .intro__gradient::before {
    width: 380px;
    height: 380px;
    top: -60px;
    right: -150px;
  }
}

@media screen and (max-width: 767px) {
  body.cs-skin.service-page .intro__gradient { display: none; }
}

/* --- The accent word --------------------------------------------------------
   One word of the H1 in lime, the same move the homepage hero makes with
   "signal". The heading text is untouched: a span around SEO splits the text
   node and changes nothing that gets read, by a person or by Google.

   Lime on ink is 12.4:1, so it carries display type safely, and it is the only
   lime in the copy, which is what keeps it doing any work. */
body.cs-skin.service-page .intro__heading .cs-accent {
  font-style: italic;
  color: var(--lime);
}

/* --- Eyebrows ---------------------------------------------------------------
   csignal-skin.css already gives .feature__subheading and .partners__subtitle
   the uppercase 12px 0.06em shape, in the body face. These four take the same
   shape in the mono face, which is what the brand actually specifies.

   !important is required, not preference: the skin's font sweep is a scoped
   universal carrying !important, and only !important beats !important. The
   extra .service-page class is what wins the specificity tie. */
body.cs-skin.service-page .intro__subheading,
body.cs-skin.service-page .feature__subheading,
body.cs-skin.service-page .partners__subtitle,
body.cs-skin.service-page .experts__subtitle {
  font-family: var(--cs-mono) !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.cs-skin.service-page .intro__subheading { color: var(--lime); }

body.cs-skin.service-page .intro__heading { color: var(--paper); }

body.cs-skin.service-page .intro__description,
body.cs-skin.service-page .intro__description a { color: var(--on-ink-muted); }

/* Same lede scale as the /work/ and /services/ heroes. service.css leaves this
   at the old 24px, which is a second headline rather than a lede -- the
   display line is doing the shouting, this one reads. Values copied from
   csignal-pages.css so the three heroes cannot drift apart. */
body.cs-skin.service-page .intro__description {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  max-width: 62ch;
}

body.cs-skin.service-page .intro__description a:hover { color: var(--paper); }

/* --- Offer pills ------------------------------------------------------------
   service.css fills them #151515 with #a1a1a1 type, which is the old charcoal
   on the old black. Nothing on /csignal/ is a filled grey pill, so they become
   .cs-btn--outline: transparent, one hairline, lime on hover. Values are
   copied from csignal-hero.css rather than invented. */
body.cs-skin.service-page .intro__offer {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin.service-page .intro__offer:hover {
  background-color: transparent;
  border-color: var(--lime);
  color: var(--lime);
}

body.cs-skin.service-page .intro__offer a { color: inherit; }

/* --- The AI visibility CTA --------------------------------------------------
   This link carried its whole appearance in an inline style attribute -- a
   10% white fill, a 20% white hairline, Season Sans, plus onmouseover and
   onmouseout handlers writing more inline style on hover. Inline declarations
   outrank any stylesheet, so the skin could never reach it and it stayed the
   one old-brand pill on a CSignal hero.

   The attribute is gone from the markup rather than fought with !important:
   it is presentation, so removing it changes nothing a reader or a crawler
   sees -- the text, the href and the DOM position are untouched. It now takes
   the same outline treatment as the offer pills directly above it. */
body.cs-skin.service-page .cs-aicta {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.55rem 1.2rem;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  font-family: var(--cs-body) !important;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin.service-page .cs-aicta:hover {
  background-color: transparent;
  border-color: var(--lime);
  color: var(--lime);
}

/* --- The Charle Search mark -------------------------------------------------
   PAGE SPECIFIC. /seo-agency/ is the only page in this group carrying a
   sub-brand logo in the intro. It is a full colour PNG sitting on ink, so it
   is knocked to paper and held back, exactly as the client logos are in the
   homepage marquee. Kept rather than removed: it is a real sub-brand, and
   swapping the file is a decision about the asset, not about the skin. */
body.cs-skin.service-page .intro__logo {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* --- The AI visibility pill -------------------------------------------------
   PAGE SPECIFIC. This anchor carries its palette in a style attribute and
   swaps it again in two inline JS handlers, so a normal rule cannot reach it.
   !important beats both, which also makes the JS hover inert and lets the
   hover be restated here in CSignal terms. Matched on href rather than on
   [style] so it cannot catch anything else that gains an inline style later. */
body.cs-skin.service-page .intro__right > a[href*="ai-seo-agency"] {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: var(--cs-body) !important;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin.service-page .intro__right > a[href*="ai-seo-agency"]:hover {
  border-color: var(--lime) !important;
  color: var(--lime) !important;
}

/*------------------------------------------------------------------------------
  3. About: the paper slab, and the stepped edge

  This is the one section where the template changes shape rather than colour.
  service.css caps it with a 25px radius, which is the "stack of rounded cards"
  the brand guidelines name as the thing to resist. The cap is replaced with
  the stepped edge, which is the brand's own answer for web section
  transitions: two flat colours meeting on an irregular cut seam.

  Both seams are background images on pseudo-elements, so no markup changes.
  Geometry follows the spec: 26px deep against a tall block, step widths
  between 10% and 16% of the width, six different step depths. Regular steps
  read as a pattern, irregular ones read as torn.

  Two seams on this page and no more. The guidelines cap it at twice per
  screen, and the features below carry the rhythm on their own.
------------------------------------------------------------------------------*/

body.cs-skin.service-page .about {
  position: relative;
  background-color: var(--paper);
  border-radius: 0;
}

/* Ink into paper, sitting in the ink above the section. */
body.cs-skin.service-page .about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  transform: translateY(-100%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H14 V4 H26 V1 H38 V6 H52 V2 H63 V7 H74 V3 H86 V8 H100 V12 H0 Z' fill='%23F3F5EE'/%3E%3C/svg%3E");
}

/* Paper back into ink, sitting in the ink below it. A second path rather than
   a vertical flip of the first, so the two seams do not read as a mirror. */
body.cs-skin.service-page .about::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  transform: translateY(100%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V8 H84 V4 H70 V9 H55 V3 H41 V7 H28 V2 H13 V6 H0 Z' fill='%23F3F5EE'/%3E%3C/svg%3E");
}

body.cs-skin.service-page .about__content__heading { color: var(--on-paper); }

body.cs-skin.service-page .about__content__description { color: var(--on-paper-muted); }

body.cs-skin.service-page .about__content__description a { color: var(--on-paper); }

/* 16px is the card radius. 25 is not one of the four the system allows. */
body.cs-skin.service-page .about__image,
body.cs-skin.service-page .about__image img { border-radius: 16px; }

/*------------------------------------------------------------------------------
  4. Testimonial, from includes/testimonial.php
  White band with a video behind it. Paper rather than white, and the author
  line picks up the mono face because it is a credit, not body copy.
------------------------------------------------------------------------------*/

body.cs-skin.service-page .testimonial { background-color: var(--paper); }

body.cs-skin.service-page .testimonial__heading { color: var(--on-paper); }

body.cs-skin.service-page .testimonial__author {
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
}

/*------------------------------------------------------------------------------
  5. Rich footer, from includes/richfooter.php
  Two blocks, .experts and .looking. Both are already white type on the black
  ground so they inherit correctly once the ground is ink. The only thing that
  has to go is the blurred pill behind .looking, which is a 0.1 teal to 0.2
  purple linear gradient: the last old-brand glow on the page.
------------------------------------------------------------------------------*/

body.cs-skin.service-page .experts,
body.cs-skin.service-page .looking { background-color: var(--ink); }

body.cs-skin.service-page .looking__gradient { display: none; }

body.cs-skin.service-page .experts__title,
body.cs-skin.service-page .looking__title { color: var(--paper); }

body.cs-skin.service-page .experts__description,
body.cs-skin.service-page .looking__description { color: var(--on-ink-muted); }

body.cs-skin.service-page .looking__description a { color: var(--lime); }

/* 10px is the control radius, which is what this already is. Restated only so
   the next person does not have to go and check. */
body.cs-skin.service-page .experts__media { border-radius: 10px; }

/*------------------------------------------------------------------------------
  6. Pricing
  Commented out on /seo-agency/, live on several of its siblings. Written here
  so the next page in the group does not need a second file.
------------------------------------------------------------------------------*/

body.cs-skin.service-page .pricing { background-color: var(--paper); }

body.cs-skin.service-page .pricing__heading,
body.cs-skin.service-page .pricing__option_heading { color: var(--on-paper); }

body.cs-skin.service-page .pricing__description,
body.cs-skin.service-page .pricing__option_description { color: var(--on-paper-muted); }

body.cs-skin.service-page .pricing__option { border-radius: 16px; }

body.cs-skin.service-page .pricing__option_badge {
  background-color: var(--lime);
  color: var(--ink);
}

body.cs-skin.service-page .pricing__option_price {
  font-family: var(--cs-display) !important;
  font-variant-numeric: tabular-nums;
}

/*------------------------------------------------------------------------------
  7. Reduced motion
  Nothing here animates, and the two seams and the burst are static by design.
  The declaration is here so that adding one later is a deliberate act.
------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  body.cs-skin.service-page .intro::before { transition: none; }
}

/* ============================================================================
   SEO AGENCY HERO -- brought into line with /work/ and /services/
   csignal-service.css is loaded by seo-agency/v2.php and nothing else, so
   these overrides reach that page only. Appended rather than edited in place:
   same specificity as the rules above, so source order decides and the
   originals are left intact and readable.
   ========================================================================= */

/* --- Eyebrow ----------------------------------------------------------------
   The shape was right and the numbers were not: 11px / 0.06em here against
   12px / 0.08em on /work/ and /services/, with no bottom margin set, so the
   label sat smaller and further from its headline than the same label on the
   other two pages. Matched to the unified eyebrow in csignal-pages.css.
   Scoped to the hero label only; the section eyebrows keep their 11px. */
body.cs-skin.service-page .intro__subheading {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.4rem !important;
}

/* --- Headline accent --------------------------------------------------------
   Italic lime text is the one thing on this hero that appears nowhere else in
   the skin. /work/ and /services/ both carry a lime block highlight on a word
   of the h1, which is the brand's actual headline device. Same geometry as
   .cs-hl so the two read as one treatment. Markup untouched: this restyles the
   existing .cs-accent span rather than adding one. */
body.cs-skin.service-page .intro__heading .cs-accent {
  font-style: normal;
  position: relative;
  display: inline-block;
  line-height: .84;
  padding: .1em 12px .16em;
  background: var(--lime);
  color: var(--ink);
  border-radius: 10px;
}

/* --- A shape set unique to this page ----------------------------------------
   The store tint and proof stay -- they are the depth, and every page has
   them. The two accents change: /work/ runs store + leak + signal and
   /services/ runs store + spike + signal, so spike and spark both read as
   borrowed here. Path and Ask appear on no other hero, and Path in particular
   is the kit shape that actually means a route through a site. */

/* 02 was spike. Now Path, the kit's route shape, in violet. */
body.cs-skin.service-page .intro__gradient::after {
  top: 56px;
  right: 596px;
  width: 154px;
  height: 154px;
  --cs-drift: 8s;
  --cs-drift-d: -3.5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 168 168' fill='none'%3E%3Cpath d='M10 106 V82 H42 V58 H74 V34 H110' stroke='%236C4CF1' stroke-width='34' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 04. Coral. Ask has its notch cut out of the BOTTOM edge, so cropping it at
   the bottom of the section hid the one feature that makes it a shape -- what
   was left on the page was a plain rounded rectangle. Spark is three separate
   arms, so it still reads as itself however it is cropped. Same lesson as the
   Store ghost: check which edge carries the silhouette before choosing which
   edge to crop against. */
body.cs-skin.service-page .intro::after {
  bottom: 10px;
  left: 38%;
  width: 92px;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 84 92'%3E%3Cpath d='M21.1506 2C22.4632 2.07928 24.3656 2.4031 25.5278 2.97618C26.0195 3.21777 26.4694 3.53529 26.8603 3.91715C29.6276 6.61277 32.917 10.6344 35.3373 13.6371C38.4739 17.5284 45.0601 22.5248 42.368 28.0158C40.8551 31.1015 38.6859 31.9748 35.6016 32.9848C34.0578 33.1241 31.9773 32.2809 30.7672 31.385C27.9923 29.3304 16.9984 16.5585 15.2446 13.7626C14.6351 12.7931 14.2432 11.705 14.0953 10.5722C13.4151 5.60373 16.4386 2.6683 21.1506 2Z' fill='%23FF5A2C'/%3E%3Cpath d='M7.249 72.0275C9.97134 71.8874 14.1939 72.3187 17.0111 72.5053C21.1702 72.7807 25.9752 72.7858 30.03 73.6066C30.6792 73.7382 32.7426 75.0911 33.4224 75.5215C36.3933 81.8731 35.4673 86.0695 28.0659 88C21.3148 87.6731 14.2593 86.4207 7.40425 86.3867C5.38991 86.3767 2.67221 85.076 1.47569 83.4554C-0.167961 81.2292 -0.184043 79.3756 0.217956 76.766C2.7516 73.5394 2.42347 72.3437 7.249 72.0275Z' fill='%23FF5A2C'/%3E%3Cpath d='M69.4896 0H72.8339C74.1452 0.570158 75.5692 1.25354 76.6868 2.13523C78.1533 3.29252 78.7409 5.66597 78.9335 7.43399C79.3102 10.8903 78.005 25.6162 77.0789 29.129C76.7809 30.2597 76.3593 31.2651 75.5845 32.17C74.2095 33.7751 72.2485 34.8199 70.0954 34.976C67.8949 35.1354 66.2862 34.4978 64.6533 33.121C62.9991 31.7262 62.2018 29.9351 62.0402 27.8358C61.7695 24.3133 62.9113 7.53871 64.1228 4.5325C64.7158 3.06033 66.2201 1.77683 67.277 0.578553C68.2145 0.418597 68.6294 0.37191 69.4896 0Z' fill='%23FF5A2C'/%3E%3C/svg%3E");
}


/* --- Hero shapes: every one cropped by a page edge --------------------------
   The set was right and the placement was not. Store bled off the corner, but
   Path and Ask were parked at right:596px and left:604px -- mid-canvas, in the
   gap between the two columns, touching nothing. A kit shape floating in open
   space reads as a stray icon; the same shape entering from an edge reads as
   depth. That is the whole difference, and it is why /work/ and /services/
   anchor every shape to an edge and let the viewport do the cropping.

   Rule for this hero: no shape may sit clear of all four edges. */

/* Store, the tint. Pushed hard into the top-right corner so it is a cropped
   mass rather than a rounded panel sitting behind the lede. */
body.cs-skin.service-page .intro__gradient::before {
  top: -290px;
  right: -250px;
  width: 720px;
  height: 720px;
}

/* Path, violet. Off the left edge, in the empty band above the eyebrow. */
body.cs-skin.service-page .intro__gradient::after {
  /* Same move, and it has to be made here too: this sits at the identical
     coordinates to .cs-hero__s--a above, so on a service page the two stack
     and moving only one leaves the other behind the heading. */
  top: 28px;
  left: -150px;
  right: auto;
  width: 168px;
  height: 168px;
}

/* Proof, sky. Off the right edge, below the lede -- clear of the tint now
   that the tint has moved up, where before it was buried behind it. */
body.cs-skin.service-page .intro::before {
  bottom: 48px;
  right: -58px;
  width: 116px;
  height: 116px;
}

/* The coral shape's position is set with its artwork further up, NOT here.
   A second .intro::after block at this point in the file was silently winning
   on source order -- same specificity, later in the sheet -- so every move
   made up there had no effect on the page. Deleted rather than corrected:
   one shape, one rule, so the next nudge lands where it is written. */

@media screen and (max-width: 1279px) {
  body.cs-skin.service-page .intro__gradient::after { left: -150px; top: 12px; }
  body.cs-skin.service-page .intro::after { left: auto; right: 12%; }
}


/* --- Testimonial ------------------------------------------------------------
   The quote sits on a photograph, not on paper: --on-paper put near-black type
   over a mid-tone image, which is the grey mush in the screenshot. The band is
   dark, so the copy takes the dark-ground tokens. */
body.cs-skin.service-page .testimonial__heading { color: var(--on-ink) !important; }
body.cs-skin.service-page .testimonial__author { color: var(--on-ink-muted) !important; }


/* --- About: heading over two columns ----------------------------------------
   service.css runs this as a 3/2 split, so a three-line heading on the left
   left roughly half the band empty while the right column ran on for twelve
   lines. Heading on its own row, the two paragraphs as columns beneath it,
   CTA spanning back across. Grid placement rather than CSS columns so each
   paragraph lands in a known column and the button cannot be split.

   Scoped to .cs-about-split, NOT to .about__content. This page has two
   .about__content blocks and they are not the same shape: the second one
   ("95% of web experiences...") already carries two of its four paragraphs in
   the left column beside the heading, so the unscoped rule pulled its first
   two paragraphs full width and left the other two as a stray pair of
   columns. Only the intent-lock block gets this treatment. */
body.cs-skin.service-page .cs-about-split {
  display: block;
}

body.cs-skin.service-page .cs-about-split .about__content__left,
body.cs-skin.service-page .cs-about-split .about__content__right {
  grid-column: auto;
  width: 100%;
  max-width: none;
}

/* Capped, not full width: at the full band the line length runs well past a
   comfortable measure for display type. */
body.cs-skin.service-page .cs-about-split .about__content__heading {
  max-width: 20ch;
  margin-bottom: 2.5rem;
}

/* service.css sets this at clamp(18px, 2vw, 24px) -- 24px of body copy, where
   .feature__description runs 15px and the skin's own body scale tops out at
   16px. It read as a subheading rather than as paragraph text. Brought onto
   the site's scale. This one stays page-wide: both about blocks had it. */
body.cs-skin.service-page .about__content__description {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

@media screen and (min-width: 1024px) {
  body.cs-skin.service-page .cs-about-split .about__content__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 0;
    align-items: start;
  }

  body.cs-skin.service-page .cs-about-split .about__content__right .about__content__description:nth-of-type(1) { grid-column: 1; }
  body.cs-skin.service-page .cs-about-split .about__content__right .about__content__description:nth-of-type(2) { grid-column: 2; }

  body.cs-skin.service-page .cs-about-split .about__content__right > .btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2rem;
  }
}


/* --- Shapes through the image/text blocks -----------------------------------
   Same system as /services/, carried here because this page does not load
   csignal-pages.css. One shape per .feature, cycled so no two in a row share a
   shape, colour or side, each anchored to the section and bleeding off a page
   edge. overflow-x: clip crops the bleed rather than turning it into a scroll;
   the container takes its own layer because the decoration is positioned and
   the copy is not. */
body.cs-skin.service-page .feature {
  position: relative;
  overflow-x: clip;
}

body.cs-skin.service-page .feature > .container,
body.cs-skin.service-page .feature > .container-fluid { position: relative; z-index: 1; }

body.cs-skin.service-page .cs-ftdeco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.cs-skin.service-page .cs-ftdeco__s { position: absolute; display: block; }
body.cs-skin.service-page .cs-ftdeco__s svg { display: block; }

body.cs-skin.service-page .cs-ftdeco--a .cs-ftdeco__s { top: 14%;    left: -54px; }
body.cs-skin.service-page .cs-ftdeco--b .cs-ftdeco__s { bottom: 18%; right: -46px; }
body.cs-skin.service-page .cs-ftdeco--c .cs-ftdeco__s { top: 22%;    right: -58px; }
body.cs-skin.service-page .cs-ftdeco--d .cs-ftdeco__s { bottom: 12%; left: -50px; }
body.cs-skin.service-page .cs-ftdeco--e .cs-ftdeco__s { top: 8%;     right: -40px; }
body.cs-skin.service-page .cs-ftdeco--f .cs-ftdeco__s { bottom: 8%;  left: -44px; }

@media screen and (max-width: 1023px) {
  body.cs-skin.service-page .cs-ftdeco__s { transform: scale(0.58); }
  body.cs-skin.service-page .cs-ftdeco--a .cs-ftdeco__s { top: 2%;    left: -30px;  transform-origin: left center; }
  body.cs-skin.service-page .cs-ftdeco--b .cs-ftdeco__s { bottom: 4%; right: -26px; transform-origin: right center; }
  body.cs-skin.service-page .cs-ftdeco--c .cs-ftdeco__s { top: 3%;    right: -30px; transform-origin: right center; }
  body.cs-skin.service-page .cs-ftdeco--d .cs-ftdeco__s { bottom: 3%; left: -26px;  transform-origin: left center; }
  body.cs-skin.service-page .cs-ftdeco--e .cs-ftdeco__s { top: 2%;    right: -24px; transform-origin: right center; }
  body.cs-skin.service-page .cs-ftdeco--f .cs-ftdeco__s { bottom: 2%; left: -24px;  transform-origin: left center; }
}


/* --- The blue mark, top right of the hero ------------------------------------
   A fifth shape, hung on real markup inside the (empty, presentational)
   .intro__gradient rather than a fifth pseudo-element: the four slots on
   .intro and .intro__gradient are spent, and markup lets it be tuned with
   cs_shape() instead of a hand-built data URI. Cropped by the top edge, so it
   obeys the same edge rule as the rest of the set. */
body.cs-skin.service-page .cs-seo-blue {
  position: absolute;
  top: -8px;
  right: 3%;
  display: block;
  line-height: 0;
  pointer-events: none;
  transform: rotate(14deg);
  animation: cs-svc-drift 11s ease-in-out infinite;
  animation-delay: -4s;
}

body.cs-skin.service-page .cs-seo-blue svg { display: block; }

@media screen and (max-width: 1023px) {
  body.cs-skin.service-page .cs-seo-blue { right: -34px; top: -34px; transform: rotate(14deg) scale(0.7); }
}


/* --- The shape on the About band --------------------------------------------
   Top right, bleeding off the right edge. Coral on paper, which is the only
   warm note in the light run. */
body.cs-skin.service-page .about {
  position: relative;
  overflow-x: clip;
}

body.cs-skin.service-page .about > .container-fluid { position: relative; z-index: 1; }

body.cs-skin.service-page .cs-abdeco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.cs-skin.service-page .cs-abdeco__s {
  position: absolute;
  top: 48px;
  right: -58px;
  display: block;
  line-height: 0;
  transform: rotate(-12deg);
  animation: cs-svc-drift 9.5s ease-in-out infinite;
  animation-delay: -3s;
}

body.cs-skin.service-page .cs-abdeco__s svg { display: block; }

@media screen and (max-width: 1023px) {
  body.cs-skin.service-page .cs-abdeco__s { top: 18px; right: -40px; transform: rotate(-12deg) scale(0.62); }
}


/* --- The partners heading ---------------------------------------------------
   csignal-skin.css already calls this out: the partners block inverts the
   naming used everywhere else, so .partners__title is the small kicker and
   .partners__subtitle is the 52px statement, and sweeping __subtitle in with
   the labels "is why that section read as having lost its heading". The
   eyebrow group above re-swept it into 11px mono, and this file loads after
   the skin, so the fix was undone and the bug came back. Restored here rather
   than by editing that selector list, so the other three eyebrows keep theirs. */
body.cs-skin.service-page .partners__subtitle {
  font-family: var(--cs-display) !important;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--on-paper);
}


/* --- The dark band above the testimonial ------------------------------------
   service.css gives .testimonial margin-top: 2rem above 768px. .faqs ends,
   the testimonial starts 32px lower, and the ink body paints the gap between
   them -- which is the black line. The margin goes, and .faqs and .partners
   take the paper ground explicitly so the whole light run is one continuous
   surface with no seam for the body to show through. */
body.cs-skin.service-page .faqs,
body.cs-skin.service-page .partners { background-color: var(--paper); }

body.cs-skin.service-page .testimonial { margin-top: 0 !important; }


/* --- The "Looking for a Shopify Plus Agency?" band ---------------------------
   Hidden, NOT deleted. It carries an h2 and two links, so removing it from the
   markup would put v2 out of parity with index.php, which is the one thing the
   reskin is not allowed to do. display:none keeps the heading and both links
   in the document for a crawler while taking the band off the page. If it
   should be genuinely gone, that is a content change to index.php as well. */
body.cs-skin.service-page .looking { display: none !important; }


/* ============================================================================
   THE NEWER SECTION TYPES -- edu-block, process, wwt, pricing
   These appear on the SEO-family services pages and were never skinned. They
   are styled in a 36KB inline <style> block inside each page, every selector a
   single class, so scoped rules here outrank them without !important except
   where the page itself used it or put the value in a style attribute.
   ========================================================================= */

/* --- Old-brand glows --------------------------------------------------------
   .process carries the same two teal/violet radial gradients that put the
   band behind the nav on /services/. Same fix: reset the whole shorthand, not
   background-color, or the gradient layers keep painting. */
body.cs-skin.service-page .process {
  background: var(--ink) !important;
}

body.cs-skin.service-page .section-glow,
body.cs-skin.service-page .process__glow { display: none !important; }

/* --- Grounds ----------------------------------------------------------------
   edu-block and wwt are light bands, wwt with background:#fafafa set in a
   style attribute, which only !important can reach. */
body.cs-skin.service-page .edu-block,
body.cs-skin.service-page .wwt { background: var(--paper) !important; }

/* --- Eyebrows ---------------------------------------------------------------
   All three labels were Season Serif at 16px. Same mono eyebrow the rest of
   the page uses; lime on the dark band, muted ink on the light ones. */
body.cs-skin.service-page .edu-block__label,
body.cs-skin.service-page .process__label,
body.cs-skin.service-page .wwt__label {
  font-family: var(--cs-mono) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 0.4rem !important;
}

body.cs-skin.service-page .process__label { color: var(--lime); }
body.cs-skin.service-page .edu-block__label,
body.cs-skin.service-page .wwt__label { color: var(--on-paper-muted); }

/* --- Headings ---------------------------------------------------------------
   clamp(34px, 5vw, 60px) at weight 400 is the old display setting. The kit
   runs heavy and tight. */
body.cs-skin.service-page .edu-block__title,
body.cs-skin.service-page .process__title,
body.cs-skin.service-page .wwt__title,
body.cs-skin.service-page .pricing__heading {
  font-family: var(--cs-display) !important;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

body.cs-skin.service-page .edu-block__title,
body.cs-skin.service-page .wwt__title,
body.cs-skin.service-page .pricing__heading { color: var(--on-paper); }

body.cs-skin.service-page .process__title { color: var(--on-ink); }

body.cs-skin.service-page .wwt__item-name,
body.cs-skin.service-page .process__step-title {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* --- Body copy --------------------------------------------------------------
   Onto the same scale as .feature__description and the About columns. */
body.cs-skin.service-page .edu-block__body,
body.cs-skin.service-page .wwt__item-desc,
body.cs-skin.service-page .wwt__item-desc p,
body.cs-skin.service-page .process__subtitle,
body.cs-skin.service-page .process__step-body,
body.cs-skin.service-page .pricing__description {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

body.cs-skin.service-page .edu-block__body,
body.cs-skin.service-page .wwt__item-desc,
body.cs-skin.service-page .wwt__item-desc p,
body.cs-skin.service-page .pricing__description { color: var(--on-paper-muted); }

body.cs-skin.service-page .process__subtitle,
body.cs-skin.service-page .process__step-body { color: var(--on-ink-muted); }

/* The h4 inside edu-block sets its own size and #000 in a style attribute. */
body.cs-skin.service-page .edu-block h4.edu-block__body {
  font-family: var(--cs-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--on-paper) !important;
  letter-spacing: -0.01em;
}

/* --- The active pillar marker ----------------------------------------------
   wwt marks the open item with the old accent. Lime is the kit's one accent
   for state. */
body.cs-skin.service-page .wwt__item.is-active .wwt__item-name { color: var(--ink); }

body.cs-skin.service-page .wwt__item.is-active {
  border-left-color: var(--lime) !important;
}

/* --- Section shapes ---------------------------------------------------------
   One accent per band, bleeding off a page edge, same system as .feature. */
body.cs-skin.service-page .edu-block,
body.cs-skin.service-page .process,
body.cs-skin.service-page .wwt,
body.cs-skin.service-page .pricing {
  position: relative;
  overflow-x: clip;
}

body.cs-skin.service-page .cs-secdeco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.cs-skin.service-page .cs-secdeco__s {
  position: absolute;
  display: block;
  line-height: 0;
}

body.cs-skin.service-page .cs-secdeco__s svg { display: block; }

body.cs-skin.service-page .cs-secdeco--l .cs-secdeco__s { top: 12%;    left: -52px; }
body.cs-skin.service-page .cs-secdeco--r .cs-secdeco__s { bottom: 14%; right: -48px; }

@media screen and (max-width: 1023px) {
  body.cs-skin.service-page .cs-secdeco__s { transform: scale(0.58); }
  body.cs-skin.service-page .cs-secdeco--l .cs-secdeco__s { top: 2%;    left: -30px;  transform-origin: left center; }
  body.cs-skin.service-page .cs-secdeco--r .cs-secdeco__s { bottom: 3%; right: -26px; transform-origin: right center; }
}


/* ============================================================================
   THE HERO SHAPE LAYER FOR THE ROLLED-OUT SERVICES PAGES
   /seo-agency/ hangs its four hero shapes on pseudo-elements, which works for
   one page but cannot vary per page without a stylesheet block each. Every
   other services page carries its accents as markup instead, so the shape and
   colour live in the page and this file only says where they go.

   .cs-hero-mk marks a page using that system. The Store tint stays -- it is
   the shared ground every services hero sits on -- and the three pseudo
   accents are switched off so the two systems cannot both paint.
   ========================================================================= */
body.cs-skin.cs-hero-mk .intro__gradient::after,
body.cs-skin.cs-hero-mk .intro::before,
body.cs-skin.cs-hero-mk .intro::after { display: none !important; }

body.cs-skin.cs-hero-mk .intro__gradient {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: none;
  background: none;
  border-radius: 0;
}

/* Store, the tint, pushed into the top-right corner: a cropped mass rather
   than a rounded panel behind the lede. */
body.cs-skin.cs-hero-mk .intro__gradient::before {
  content: "";
  position: absolute;
  display: block;
  top: -290px;
  right: -250px;
  width: 720px;
  height: 720px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 140 140'%3E%3Cpath d='M0 0 H120 V70 H84 V96 H46 V120 H0 Z' fill='%23173023' stroke='%23173023' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: cs-svc-drift 13s ease-in-out infinite;
  animation-delay: -2s;
}

body.cs-skin.cs-hero-mk .intro { position: relative; overflow-x: clip; }
body.cs-skin.cs-hero-mk .intro .container-fluid { position: relative; z-index: 1; }

body.cs-skin .cs-hero__s {
  position: absolute;
  display: block;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  animation: cs-svc-drift var(--cs-drift, 9s) ease-in-out infinite;
  animation-delay: var(--cs-drift-d, 0s);
}

body.cs-skin .cs-hero__s svg { display: block; }

/* Every one cropped by a page edge. A kit shape floating clear of all four
   edges reads as a stray icon; entering from an edge it reads as depth. */
body.cs-skin .cs-hero__s--a {
  /* -150, not -92. The shape is 164px wide, so at -92 it still reached 72px
     into the page while the container's padding is only 48px -- the last 24px
     landed inside the text column, behind the logo and the first word of the
     h1. Only visible below ~1536px, where the page has no side gutter to
     absorb it, which is why it looked fine on a wide monitor. */
  top: 28px; left: -150px;
  transform: rotate(-10deg);
  --cs-drift: 12.5s; --cs-drift-d: -8s;
}

body.cs-skin .cs-hero__s--b {
  bottom: 10px; left: 38%;
  transform: rotate(12deg);
  --cs-drift: 6.5s; --cs-drift-d: -1s;
}

body.cs-skin .cs-hero__s--mark {
  top: -8px; right: 3%;
  transform: rotate(14deg);
  --cs-drift: 11s; --cs-drift-d: -4s;
}

@media screen and (max-width: 1279px) {
  body.cs-skin .cs-hero__s--a { left: -150px; top: 12px; }
  body.cs-skin .cs-hero__s--b { left: auto; right: 12%; }
}

@media screen and (max-width: 1023px) {
  body.cs-skin .cs-hero__s--a    { transform: rotate(-10deg) scale(0.66); transform-origin: left center; }
  body.cs-skin .cs-hero__s--mark { right: -34px; top: -34px; transform: rotate(14deg) scale(0.7); }
  body.cs-skin .cs-hero__s--b    { display: none; }
}


/* ============================================================================
   STAT STRIPS AS CARDS
   Four of the SEO-family pages carry an .intro__stats row in the hero: big
   numbers over a hairline top and bottom. /work/ v2 turns the same kind of row
   into cards that cycle between ink and paper, so these take that treatment.

   The keyframe names are new. @keyframes resolve by source order rather than
   specificity, so redeclaring cs-wstat-bg (csignal-pages.css) would silently
   depend on which sheet loaded last. No services page loads both files today,
   but a page that did would break in a way that is very hard to see.
   ========================================================================= */
body.cs-skin.service-page .intro__stats {
  gap: 12px !important;
  max-width: 760px !important;
  padding: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.cs-skin.service-page .intro__stat {
  background: #EDF0E6;
  border-radius: 14px;
  padding: 18px 16px 16px;
  animation: cs-sstat-bg 12s linear infinite;
  animation-delay: var(--d, 0s);
}

body.cs-skin.service-page .intro__stat:nth-child(1) { --d: 0s; }
body.cs-skin.service-page .intro__stat:nth-child(2) { --d: -9s; }
body.cs-skin.service-page .intro__stat:nth-child(3) { --d: -6s; }
body.cs-skin.service-page .intro__stat:nth-child(4) { --d: -3s; }

body.cs-skin.service-page .intro__stat .intro__stat-number {
  font-family: var(--cs-display) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  animation: cs-sstat-num 12s linear infinite;
  animation-delay: var(--d, 0s);
}

body.cs-skin.service-page .intro__stat .intro__stat-label {
  font-family: var(--cs-body) !important;
  animation: cs-sstat-lbl 12s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes cs-sstat-bg {
  0%, 25%      { background: #1B3226; }
  26.5%, 98.5% { background: #EDF0E6; }
  100%         { background: #1B3226; }
}

@keyframes cs-sstat-num {
  0%, 25%      { color: #D3F502; }
  26.5%, 98.5% { color: #0E1C16; }
  100%         { color: #D3F502; }
}

@keyframes cs-sstat-lbl {
  0%, 25%      { color: rgba(243, 245, 238, 0.62); }
  26.5%, 98.5% { color: rgba(14, 28, 22, 0.62); }
  100%         { color: rgba(14, 28, 22, 0.62); }
}

/* Hover takeover, as on /work/. !important is load-bearing here: a running
   animation outranks normal author declarations, and !important is the one
   level that beats it even while the animation is paused. */
body.cs-skin.service-page .intro__stat,
body.cs-skin.service-page .intro__stat-number,
body.cs-skin.service-page .intro__stat-label {
  transition: background 0.18s ease-out, color 0.18s ease-out;
}

body.cs-skin.service-page .intro__stats:hover .intro__stat {
  animation-play-state: paused;
  background: #EDF0E6 !important;
}

body.cs-skin.service-page .intro__stats:hover .intro__stat-number {
  animation-play-state: paused;
  color: #0E1C16 !important;
}

body.cs-skin.service-page .intro__stats:hover .intro__stat-label {
  animation-play-state: paused;
  color: rgba(14, 28, 22, 0.62) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.cs-skin.service-page .intro__stat,
  body.cs-skin.service-page .intro__stat-number,
  body.cs-skin.service-page .intro__stat-label { animation: none; }
  body.cs-skin.service-page .intro__stat { background: #EDF0E6; }
  body.cs-skin.service-page .intro__stat-number { color: #0E1C16; }
  body.cs-skin.service-page .intro__stat-label { color: rgba(14, 28, 22, 0.62); }
}


/* ============================================================================
   THE A/B DEMO BADGE AND TOGGLE  (/services/shopify-cro-agency/)
   A live-status pill and a Control/Variant switch, built in the page's inline
   style block on the old palette: white-on-white fills, a #00e964 dot with a
   6px glow, Season Sans labels. Nothing in CSignal is glowed, filled with
   translucent white, or set in Season Sans, so all three go.

   The kit's rule for state is that lime IS the state: the selected half of the
   toggle takes a solid lime fill with ink type, everything else is transparent
   with one hairline. That also fixes a real legibility problem -- the old
   active state was rgba(255,255,255,0.15) against 0.06, a difference you have
   to hunt for.
   ========================================================================= */
body.cs-skin.service-page .ab-demo { gap: 0.6rem; }

body.cs-skin.service-page .ab-demo__pill,
body.cs-skin.service-page .ab-demo__toggle {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.cs-skin.service-page .ab-demo__pill:hover {
  border-color: var(--lime) !important;
}

/* Lime, and flat. The glow was the only blurred thing on the page. */
body.cs-skin.service-page .ab-demo__dot {
  background: var(--lime) !important;
  box-shadow: none !important;
  animation: cs-ab-pulse 2s ease-in-out infinite;
}

@keyframes cs-ab-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

body.cs-skin.service-page .ab-demo__label,
body.cs-skin.service-page .ab-demo__btn {
  font-family: var(--cs-mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

body.cs-skin.service-page .ab-demo__label { color: var(--on-ink-muted) !important; }

body.cs-skin.service-page .ab-demo__btn {
  background: transparent !important;
  color: var(--on-ink-muted) !important;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 999px;
  transition: background 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin.service-page .ab-demo__btn:hover { color: var(--paper) !important; }

/* Lime is the state. */
body.cs-skin.service-page .ab-demo__btn--active,
body.cs-skin.service-page .ab-demo__btn--active:hover {
  background: var(--lime) !important;
  color: var(--ink) !important;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  body.cs-skin.service-page .ab-demo__dot { animation: none; }
}


/* --- The last of the old-brand radial glows ---------------------------------
   Third appearance of the same pair: teal rgba(0,180,240,.14) over violet
   rgba(160,79,244,.16), which put the band behind the nav on /services/ and
   the wash behind .process here. On /services/shopify-cro-agency/ it is also
   on .feature-1, where it reads as a blue fog across the tech-stack orbit.

   background-image: none rather than a fresh background shorthand, so only
   the gradient layers go and each section keeps whatever ground it was given.
   Scoped to .feature so it cannot reach the light bands. */
body.cs-skin.service-page .feature,
body.cs-skin.service-page .feature-1,
body.cs-skin.service-page .feature-2,
body.cs-skin.service-page .feature-3,
body.cs-skin.service-page .feature-4,
body.cs-skin.service-page .feature-5 {
  background-image: none !important;
}

body.cs-skin.service-page .feature-1,
body.cs-skin.service-page .feature-2,
body.cs-skin.service-page .feature-3,
body.cs-skin.service-page .feature-4,
body.cs-skin.service-page .feature-5 {
  background-color: var(--ink) !important;
}