/* ================================================================== */
/* Services block — dark editorial index (homepage)                    */
/* ================================================================== */

.svc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fbf-green, #28dc9a); font-weight: 500;
}

.svc-ink {
  background: var(--surface-ink, #0d0f0f);
  padding: 100px 80px 104px;
  position: relative; overflow: hidden;
}
.svc-ink-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
/* Softer glow, anchored top-right away from the partner logos */
.svc-ink.fbf-glow::after {
  background: radial-gradient(90% 60% at 88% -10%, rgba(255,166,62,0.28) 0%, rgba(255,120,40,0.09) 45%, transparent 70%);
}

.svc-ink-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 56px;
}
.svc-ink-title {
  margin: 18px 0 0; font-size: 46px; font-weight: 900; line-height: 1.06;
  letter-spacing: -0.025em; color: #fff;
}
.svc-grad {
  background: var(--gradient-cool, linear-gradient(90deg, #00b9d7, #28dc9a));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.svc-ink-lead {
  margin: 14px 0 0; font-size: 16.5px; line-height: 1.6;
  color: rgba(255,255,255,0.62); max-width: 520px;
}
.svc-ink-head .fbf-btn, .svc-ink-head button { flex-shrink: 0; }
.svc-ai-badge {
  width: 128px; height: auto; display: block; flex-shrink: 0;
  transform: rotate(8deg);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}

.svc-index { border-top: 1px solid rgba(255,255,255,0.14); }
.svc-row {
  display: flex; align-items: flex-start; gap: 28px;
  padding: 23px 8px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: padding-left 180ms var(--ease-out, ease), background 180ms var(--ease-out, ease);
}
.svc-row:hover { padding-left: 22px; }
.svc-row:hover, .svc-row:hover * { text-decoration: none; }
.svc-row-num {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.38); min-width: 34px; padding-top: 7px;
}
.svc-row-body { flex: 1; min-width: 0; display: block; }
.svc-row-name {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 25px; font-weight: 700; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.92); line-height: 1.05;
  transition: color 160ms var(--ease-out, ease);
}
.svc-row:hover .svc-row-name { color: var(--fbf-green, #28dc9a); }
.svc-row-meta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4); white-space: nowrap; padding-top: 8px;
}
.svc-row svg, .svc-row [data-lucide] {
  color: rgba(255,255,255,0.45); flex-shrink: 0; margin-top: 3px;
  transition: color 160ms var(--ease-out, ease), transform 180ms var(--ease-out, ease);
}

/* Hover accordion reveal — same mechanics as Why FBF / FAQs ---------- */
.svc-reveal {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.svc-row:hover .svc-reveal,
.svc-row:focus-within .svc-reveal,
.svc-row:focus .svc-reveal { grid-template-rows: 1fr; }
.svc-reveal span {
  display: block; min-height: 0; margin: 0; max-width: 620px;
  font-size: 14.5px; line-height: 1.55; font-weight: 500;
  color: rgba(255,255,255,0.58);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out, ease) 60ms,
              transform 260ms var(--ease-out, ease) 60ms,
              padding-top 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.svc-row:hover .svc-reveal span,
.svc-row:focus-within .svc-reveal span,
.svc-row:focus .svc-reveal span {
  opacity: 1; transform: translateY(0); padding-top: 8px;
}
.svc-row:hover svg, .svc-row:hover [data-lucide] {
  color: var(--fbf-green, #28dc9a); transform: translate(3px, -3px);
  filter: drop-shadow(0 0 6px rgba(40,220,154,0.5));
}
/* AI row accent — purple is the AI signal colour */
.svc-ai-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: #b993f2;
  border: 1px solid rgba(140,72,230,0.55); border-radius: var(--radius-pill, 999px);
  padding: 4px 10px; line-height: 1;
}
.svc-row--ai:hover .svc-row-name { color: #b993f2; }
.svc-row--ai:hover svg, .svc-row--ai:hover [data-lucide] { color: #b993f2; }

/* ---- Accredited partners row ------------------------------------- */
.svc-partners {
  display: flex; align-items: center; gap: 40px;
  margin-top: 52px;
}
.svc-partners-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.4); white-space: nowrap;
}
.svc-partners-row {
  display: flex; align-items: center; gap: 44px; flex-wrap: wrap;
}
.svc-partner {
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55); white-space: nowrap;
}
/* Hot-linked partner marks, normalised to white-on-ink:
   grayscale + invert turns dark marks light; screen blend drops
   white/light backgrounds into the black section */
.svc-partner-img {
  height: 34px; width: auto; display: block;
  filter: grayscale(1) invert(1) brightness(1.35) contrast(1.05);
  mix-blend-mode: screen;
  opacity: 0.8;
  transition: opacity 160ms var(--ease-out, ease);
}
.svc-partner-img:hover { opacity: 1; }