/*==============================================================================
  CSIGNAL SKIN, SERVICES
  ----------------------------------------------------------------------------
  The /services-only half of the skin. Loaded by /services/v2.php AFTER
  csignal-skin.css and scoped to body.cs-skin exactly like it, so it cannot
  leak onto any other page and removing the one <link> reverts this page.

  WHY THIS IS A SEPARATE FILE. It belongs in csignal-skin.css as section 20 and
  should be folded in there. It is out here only because /work was being
  skinned into that same file at the same time and an append to it was lost to
  a concurrent whole-file write. Move it in once that work has landed. Nothing
  here depends on being in a separate file.

  RULE FOR THIS FILE, unchanged: colours, type, borders and decoration only.
  No layout, spacing, DOM order, copy or link changes.

  Most of /services was already covered before a line was written for it.
  Section 15 of csignal-skin.css gives .intro its ink ground, hides its blurred
  orb and turns the H1 into the eyebrow, and sections 8, 9, 10, 11 and 18 cover
  the four feature blocks, people, partners, the accordion, the buttons and the
  shared testimonial and experts includes.

  What is left is the furniture only this page carries: a second orb, the
  sixteen service chips, the fancybox video button, the full-width image band
  and the services list.

  The one structural decision is the services band. Every section on this page
  sits on ink, so the page has no alternation at all, and the shared accordion
  rules in section 10 are written for a paper ground, because that is where the
  homepage FAQs live. Turning .service-faqs into the page's single paper band
  settles both at once: the page gets the ink and paper rhythm /csignal/ has,
  and the accordion inherits the colours it was already written for.
==============================================================================*/

/*------------------------------------------------------------------------------
  1. The second orb
  .intro__gradient is already hidden by section 15 of csignal-skin.css. This is
  the other one, a 100px blur behind the services list, declared in style.css
  rather than in the page's own stylesheet.
------------------------------------------------------------------------------*/

body.cs-skin .service-faqs__bg-one { display: none; }

/*------------------------------------------------------------------------------
  2. The sixteen service chips
  #151515 fill, #a1a1a1 text, 4px radius today. They are a row of links to the
  service pages, which is exactly what the four pillar links under the homepage
  headline are, so they take the same treatment: cs-btn--outline at
  cs-btn--sm, with the values lifted from /csignal/ page.css rather than
  re-guessed.

  The hover sits on the span, not on the anchor inside it. The anchor only
  fills its own text box, so hovering the chip's padding would do nothing.
------------------------------------------------------------------------------*/

body.cs-skin .intro.intro-services .intro__offer {
  padding: 11px 19px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin .intro.intro-services .intro__offer:hover {
  border-color: var(--lime);
  color: var(--lime);
}

body.cs-skin .intro__offer a,
body.cs-skin .intro__offer a:visited { color: inherit; }

/*------------------------------------------------------------------------------
  3. "Hear from our clients"
  The fancybox video button in the hero, a #151515 pill today. Outlined, so it
  sits with the chips above it instead of competing with them.

  The trailing arrow goes, because no button on /csignal/ carries an icon.
  Hidden rather than deleted: the same class is used on /about/, and the right
  padding style.css reserves for the arrow comes back with it.
------------------------------------------------------------------------------*/

body.cs-skin .hear-from-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--paper);
  padding-right: 1.25rem;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

body.cs-skin .hear-from-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}

body.cs-skin .hear-from-btn-image { background-color: var(--ink-3); }
body.cs-skin .hear-from-btn-arrow { display: none; }

/*------------------------------------------------------------------------------
  4. The image band
  Billionaire Boys Club, full width, 25px rising to 50px. The skin uses 14px
  for anything that reads as media, and a lime hairline so the band reads as
  deliberate rather than as a hole in the page. The same treatment the homepage
  video band got in section 6.

  One rule covers both breakpoints: services.css raises the radius inside a
  media query, but that rule is a single class and this one is two, so
  specificity settles it without a matching query here.
------------------------------------------------------------------------------*/

body.cs-skin .image__inner {
  border-radius: 14px;
  border: 1px solid rgba(211, 245, 2, 0.22);
}

/*------------------------------------------------------------------------------
  5. The services band
  The page's one paper band. See the note at the top of this file.
------------------------------------------------------------------------------*/

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

body.cs-skin .service-faqs__heading,
body.cs-skin .service-faqs__content__heading { color: var(--on-paper); }

/* The list inside each accordion. Hairlines in the paper role, and the hover
   moves to the lime rather than fading the link to 0.7, because a link that
   dims on hover reads as disabled. */
body.cs-skin .service-faqs__list__item,
body.cs-skin .service-faqs__list__item:first-child { border-color: var(--line-on-paper); }

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

body.cs-skin .service-faqs__list__link:hover {
  opacity: 1;
  color: var(--lime-dim);
}

/* style.css paints the accordion white at two classes, for the dark ground
   this section used to sit on. Three classes here, so the section 10 colours
   win it back. The open and close icon strokes currentColor, so it follows. */
body.cs-skin .service-faqs .accordion { border-color: var(--line-on-paper); }
body.cs-skin .service-faqs .accordion__title { color: var(--on-paper); }
body.cs-skin .service-faqs .accordion__title:hover { color: var(--lime-dim); }
body.cs-skin .service-faqs .accordion__content__inner { color: var(--on-paper-muted); }

/*------------------------------------------------------------------------------
  6. The testimonial
  Section 18 of csignal-skin.css already puts the block on ink and colours the
  heading, because testimonial.php is a shared include. What is left is the
  media itself: a neutral black scrim, which pulls the photograph out of the
  palette, and the stock 25px rising to 50px radius.
------------------------------------------------------------------------------*/

body.cs-skin .testimonial__overlay { background: rgba(14, 28, 22, 0.52); }
body.cs-skin .testimonial__inner { border-radius: 14px; }