/* ==========================================================================
   OUR SERVICES — appearance, applied 2026-09-04.

   Source: services-alive-r6z/skins/v05-bureau.css ("Signal Bureau"), picked
   from the ten at /services-alive-r6z/, with the palette softened one measured
   step on request: the saturated signal colours and the near-black structure
   were reading too solid.

   Repaint only, exactly like the lab skin it comes from — colour, rule and
   radius. Nothing here sets a width, height, padding, margin, gap, flex, grid,
   font-size, line-height or letter-spacing, so the approved wireframe cannot
   move and every script (renderer, slider, sub-service filters, scope
   disclosure, scroll spy) behaves as it already does.

   Thesis, unchanged: an instrument of record. The interface is drawn in white
   and grey so the one chromatic thing on screen can only mean "this is what
   you have selected".

   What was softened, and why it is safe
     · the five signal hues: saturation x .74, lightness +3%. White stays at
       or above 4.5:1 on every one of them, and rose, green and amber actually
       gain contrast (4.73 -> 5.01, 4.52 -> 4.69, 4.60 -> 4.56 ~ held).
     · the near-black frame (#0B0D12) splits in two: --r6-frame #414958 for
       the row and rail borders, --r6-solid #2C3341 for the badge and the
       pressed filter. Both stay well past AA; neither reads as ink-black.
     · the desk lifts #E9EAED -> #EDEEF1 and its grid lines lighten to match.
   Text ink is untouched, so nothing became harder to read.
   ========================================================================== */

#svc3{
  --r6-field:  #EDEEF1;   /* the desk        */
  --r6-sheet:  #FFFFFF;   /* a record        */
  --r6-panel:  #F6F7F9;
  --r6-ink:    #0B0D12;   /* text only       */
  --r6-ink2:   #414652;
  --r6-ink3:   #636873;
  --r6-ink4:   #9AA0AB;
  --r6-frame:  #414958;   /* the record's edge — graphite, not ink */
  --r6-solid:  #2C3341;   /* the only two filled darks on the page */
  --r6-rule:   #D4D7DD;
  --r6-rule2:  #E5E7EB;
}

/* ---------- the desk ------------------------------------------------------ */
#svc3 .s3-svc{ background: var(--r6-field); }
#svc3 .s3-grid{
  background-image:
    linear-gradient(to right, rgba(11,13,18,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,13,18,.038) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: none; mask-image: none;
  opacity: .9;
}

/* the eyebrow is the site's small blue contextual heading everywhere else
   — #ss1, #hp1, #wcu8, #about5, #faq10 and every internal page all set it
   to --accent. This skin was the one place it came out grey. */
#svc3 .s3-eyebrow{ color: var(--ink-2); }
#svc3 .s3-head h1{ color: var(--r6-ink); }
#svc3 .s3-head h1 i{ color: var(--hue, #2E60E0); }
#svc3 .s3-head .s3-sub{ color: var(--r6-ink2); }

/* ---------- the index bar ------------------------------------------------- */
#svc3 .s3-catwrap{ background: var(--r6-field); }
#svc3 .s3-catrail{
  background: var(--r6-sheet); border-color: var(--r6-frame); border-radius: 0;
  box-shadow: none;
}
#svc3 .s3-cat{ position: relative; color: var(--r6-ink3); border-radius: 0; }
#svc3 .s3-cat .s3-lg{ filter: grayscale(1); opacity: .5; transition: filter .16s linear, opacity .16s linear; }
#svc3 .s3-cat:hover{ background: var(--r6-panel); color: var(--r6-ink); }
#svc3 .s3-cat:hover .s3-lg{ opacity: .9; }
/* selected = a solid block of signal. Nothing else on the page is filled. */
#svc3 .s3-cat[aria-current="true"]{
  background: var(--cur, #2E60E0); color: #FFFFFF;
}
#svc3 .s3-cat[aria-current="true"] .s3-lg{ filter: grayscale(1) brightness(0) invert(1); opacity: 1; }

/* ---------- one signal per service ---------------------------------------- */
#svc3 .s3-row.s3-s1{ --hue:#2E60E0; --tint:var(--r6-sheet); --soft:#E4EAFB; }
#svc3 .s3-row.s3-s2{ --hue:#7047D3; --tint:var(--r6-sheet); --soft:#ECE6FB; }
#svc3 .s3-row.s3-s3{ --hue:#D5205C; --tint:var(--r6-sheet); --soft:#FBE3EB; }
#svc3 .s3-row.s3-s4{ --hue:#148546; --tint:var(--r6-sheet); --soft:#E1F1E8; }
#svc3 .s3-row.s3-s5{ --hue:#B65E1B; --tint:var(--r6-sheet); --soft:#FAEBDD; }

/* ---------- one service = one record -------------------------------------- */
#svc3 .s3-row{
  position: relative; border-color: var(--r6-frame); border-radius: 0; box-shadow: none;
}
/* the record's signal edge — the only chroma in the whole row */
#svc3 .s3-row::before{
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 6px;
  background: var(--hue); pointer-events: none;
}

/* the record's identity plate.  It used to be a solid hue square holding
   01-05; it now holds the service's own mark on the service's own ground,
   squared off like everything else in this skin. */
#svc3 .s3-num{
  background: var(--soft); border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--r6-rule);
}
#svc3 .s3-badge{ background: var(--r6-solid); color: #FFFFFF; border-radius: 0; }
#svc3 .s3-info h2{ color: var(--r6-ink); }
#svc3 .s3-explore{ color: var(--r6-ink); }
#svc3 .s3-explore svg{ color: var(--hue); }
#svc3 .s3-explore:hover{ color: var(--hue); }

/* ---------- the filter ---------------------------------------------------- */
#svc3 .s3-tabs{ background: var(--r6-panel); border-color: var(--r6-rule); border-radius: 0; }
#svc3 .s3-tab{ color: var(--r6-ink3); border-radius: 0; }
#svc3 .s3-tab:hover{ color: var(--r6-ink); background: #fff; }
#svc3 .s3-tab[aria-pressed="true"]{ background: var(--r6-solid); color: #FFFFFF; box-shadow: none; }
#svc3 .s3-tabnote{ color: var(--r6-ink3); }

/* ---------- the cards ----------------------------------------------------- */
#svc3 .s3-card{
  position: relative; background: var(--r6-sheet);
  border-color: var(--r6-rule); border-radius: 0; box-shadow: none;
  transition: border-color .16s linear, box-shadow .16s linear;
}
#svc3 .s3-card:hover{
  transform: none; border-color: var(--r6-frame); box-shadow: inset 0 0 0 1px var(--r6-frame);
}
#svc3 .s3-card::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
  background: var(--hue); transform: scaleX(0); transform-origin: left center;
  transition: transform .22s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
#svc3 .s3-card:hover::after{ transform: scaleX(1); }

#svc3 .s3-mock{
  background: var(--r6-panel);
  border-bottom-color: var(--r6-rule);
  box-shadow: inset 0 0 0 1px rgba(11,13,18,.03);
}
#svc3 .s3-cbody h3{ color: var(--r6-ink); }
#svc3 .s3-bestfor{ color: var(--r6-ink2); }
#svc3 .s3-bestfor b{ color: var(--r6-ink); }
/* the base colours this span directly, so the parent rule never reaches it */
#svc3 .s3-bestfor span{ color: var(--r6-ink2); }
#svc3 .s3-cdesc{ color: var(--r6-ink3); }

/* ---------- the scope readout --------------------------------------------- */
#svc3 .s3-more{ color: var(--r6-ink); border-top-color: var(--r6-rule2); }
#svc3 .s3-more i{ background: var(--r6-sheet); border-color: var(--r6-rule); border-radius: 0; color: var(--r6-ink2); }
#svc3 .s3-more:hover i{ background: var(--r6-solid); border-color: var(--r6-solid); color: #fff; }
#svc3 .s3-more[aria-expanded="true"]{ color: var(--hue); }
#svc3 .s3-more[aria-expanded="true"] i{ background: var(--hue); border-color: var(--hue); color: #FFFFFF; }
#svc3 .s3-specs.s3-scope .s3-sk{ color: var(--r6-ink4); }
#svc3 .s3-specs.s3-scope .s3-sv{ color: var(--r6-ink); }
#svc3 .s3-specs .s3-spec + .s3-spec{ border-top-color: var(--r6-rule2); }
#svc3 .s3-bchip{ background: var(--r6-panel); border-color: var(--r6-rule2); color: var(--r6-ink2); border-radius: 0; }

/* ---------- position ------------------------------------------------------ */
#svc3 .s3-dots i{ background: var(--r6-rule); border-radius: 0; }
#svc3 .s3-dots i.s3-on{ background: var(--hue); }

#svc3 a:focus-visible, #svc3 button:focus-visible{ outline-color: var(--r6-ink); outline-offset: 2px; border-radius: 0; }

/* ---------- phone --------------------------------------------------------- */
@media (max-width: 760px){
  #svc3 .s3-catwrap{ background: var(--r6-sheet); border-bottom-color: var(--r6-frame); }
  #svc3 .s3-catrail{ background: none; border-color: transparent; }
  #svc3 .s3-cat{ border-radius: 0; }
  #svc3 .s3-cat[aria-current="true"]{ background: var(--cur, #2E60E0); color: #fff; }
  #svc3 .s3-row{ border-radius: 0; }
  #svc3 .s3-card{ border-radius: 0; }
  #svc3 .s3-explore{ border-top-color: var(--r6-rule); }
}

@media (prefers-reduced-motion: reduce){
  #svc3 .s3-card, #svc3 .s3-card::after{ transition: none; }
  #svc3 .s3-card:hover::after{ transform: scaleX(1); }
}