/**
 * SHARED BASE for every Figma-template page family in this theme.
 *
 * This file holds ONLY cross-family component CSS — the rules that are
 * genuinely identical for hire pages, service inner pages and service
 * landing pages alike. It holds NO per-page and NO per-family rules.
 * Those live in exactly one file per family, and the three families are
 * never mixed into one file:
 *
 *   css/hire-common.css            -> hire pages          (body.hire-figma-page)
 *   css/service-inner-common.css   -> service inner pages (body.service-inner-page)
 *   css/service-landing-common.css -> service landing     (body.service-landing-page)
 *
 * Two scope classes are used here, both added by functions.php filters:
 *
 *   body.tbi-figma-page   — on EVERY page of all three families. Scopes the
 *                           hrf-* component section below (hero, stats, ai,
 *                           svc, hth, work, testi, risk, cta2, why, tech,
 *                           faq, other, automate).
 *   body.tbi-service-page — on the two SERVICE families only (inner and
 *                           landing), never on a hire page. Scopes the
 *                           svcl-* component section below (hero review
 *                           card, catalog grid, platform grid, insights).
 *
 * Adding a new page to a family: add its template to that family's array in
 * functions.php and put its own rules in that family's file. Do NOT add
 * per-page rules here. Promote a rule INTO this file only once it is
 * genuinely identical across all three families; if it is identical across
 * only the two service families, scope it under body.tbi-service-page.
 *
 * Origin: split out of the former single css/hire-common.css (which mixed
 * all three families) and css/services-common.css (now removed) on
 * 2026-09-16. Every rule below is byte-identical to its pre-split form
 * apart from the two scope-class renames noted above.
 *
 * Design origin: Figma file YmLzL45Qaw4FJRduYrQQM1 — node 42:5035 "Hire
 * Page" for the hrf-* section, node 73:1972 "Ecommerce Company" for the
 * svcl-* section. See TASK.md for per-section build history, and
 * References/WORDPRESS_DEVELOPMENT.md for why these are body-class scoped
 * rather than repeated per page.
 */


/* DELIBERATELY INERT — do not uncomment without testing sticky positioning.
 *
 * This rule was the first one in the pre-split css/hire-common.css, but it
 * never actually applied in production. That file's opening docblock
 * contained the literal text ".faq__*<slash>" on its line 15, and CSS
 * comments end at the FIRST "*<slash>" with no nesting and no escaping — so
 * the docblock closed 10 lines early and the remaining prose was parsed as
 * CSS. That made this rule's selector "<prose> body.hire-figma-page .page",
 * which is invalid, so browsers dropped the whole rule. Every other rule in
 * the file parsed normally; only this one was lost.
 *
 * The 2026-09-16 split rewrote that docblock (this file's header has no
 * stray comment terminator), which would have silently REVIVED the rule and
 * changed live behaviour on all 48 pages of the three families. It is left
 * commented out so the split is behaviour-preserving.
 *
 * Reviving it is not obviously safe: the former css/services-common.css
 * header recorded that setting overflow-x on .page computes overflow-y to
 * "auto" (the CSS "one axis visible, one not" auto-promotion), turning .page
 * into its own scroll container and silently breaking every position:sticky
 * descendant — including .hrf-work__side's sticky case-study sidebar. That
 * note assumed this rule was already live; it was not. So .page has had no
 * overflow-x clamp at all, and whatever horizontal-overflow guarding these
 * pages rely on comes from elsewhere.
 *
 * If horizontal overflow needs clamping, do it on a wrapper that contains no
 * sticky element, and verify .hrf-work__side still sticks.
 *
 * body.tbi-figma-page .page {
 *   overflow-x: hidden;
 * }
 */

/* ===================== HERO (Figma 42:5108 + 42:5037/5038 BG + 42:5055 avatars) ===================== */

body.tbi-figma-page .hrf-hero {
  position: relative;
  background-color: #03000b;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

body.tbi-figma-page .hrf-hero__stage {
  position: relative;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 130px 40px 140px 71px;
}

body.tbi-figma-page .hrf-hero__content {
  position: relative;
  z-index: 1;
  max-width: 751px;
}

body.tbi-figma-page .hrf-hero__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-hero__heading {
  max-width: 539px;
  margin: 0 0 28px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 64px;
  line-height: 68px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ffffff;
}

body.tbi-figma-page .hrf-hero__desc {
  max-width: 573px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.82);
}

body.tbi-figma-page .hrf-hero__avatars {
  position: absolute;
  z-index: 0;
  top: 99px;
  left: 45.07%;
  width: 50.14%;
  height: auto;
  pointer-events: none;
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-hero__stage {
    padding: 64px 20px 40px;
  }

  body.tbi-figma-page .hrf-hero__content {
    max-width: none;
  }

  body.tbi-figma-page .hrf-hero__heading {
    max-width: 100%;
    font-size: 44px;
    line-height: 1.15;
  }

  body.tbi-figma-page .hrf-hero__desc {
    max-width: 100%;
    font-size: 19px;
    line-height: 1.5;
  }

  body.tbi-figma-page .hrf-hero__avatars {
    position: static;
    display: block;
    width: min(420px, 80%);
    margin: 40px auto 0;
  }
}

@media (max-width: 479px) {
  body.tbi-figma-page .hrf-hero__avatars {
    display: none;
  }
}

/* ===================== STATS BAR (Figma 42:5118) ===================== */

body.tbi-figma-page .hrf-stats {
  background-color: #100c19;
}

body.tbi-figma-page .hrf-stats__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 55px 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px 90px;
}

body.tbi-figma-page .hrf-stats__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-stats__desc {
  max-width: 362px;
  margin: 33px 0 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #aaa5b3;
}

body.tbi-figma-page .hrf-stats__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 35px;
}

body.tbi-figma-page .hrf-stats__item {
  flex: 0 0 auto;
  width: 258px;
  height: 107.6px;
  padding-left: 24px;
  border-left: 1px solid rgba(160, 100, 255, 0.3);
}

body.tbi-figma-page .hrf-stats__number {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  text-box-edge: cap alphabetic;
  color: #ffffff;
  word-break: break-word;
}

body.tbi-figma-page .hrf-stats__label {
  margin: 0;
  max-width: 240px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #aaa5b3;
  word-break: break-word;
}

body.tbi-figma-page .hrf-stats__item:nth-child(1) .hrf-stats__label {
  max-width: 183px;
}

body.tbi-figma-page .hrf-stats__item:nth-child(2) .hrf-stats__label {
  max-width: 241px;
}

body.tbi-figma-page .hrf-stats__item:nth-child(3) .hrf-stats__label {
  max-width: 170px;
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-stats__container {
    padding: 40px 20px;
    gap: 28px;
  }

  body.tbi-figma-page .hrf-stats__list {
    gap: 24px 28px;
  }

  body.tbi-figma-page .hrf-stats__item {
    width: calc(50% - 14px);
  }
}

@media (max-width: 479px) {
  body.tbi-figma-page .hrf-stats__item {
    width: 100%;
  }
}

/* ===================== AI CHANGED FRONTEND (Figma 42:5142) ===================== */

body.tbi-figma-page .hrf-ai {
  background-color: #020010;
  padding: 100px 0;
}

body.tbi-figma-page .hrf-ai__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

body.tbi-figma-page .hrf-ai__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.tbi-figma-page .hrf-ai__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-ai__heading {
  max-width: 1106px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.46px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-ai__cards {
  display: flex;
  align-items: center;
  height: 710px;
  gap: 19px;
}

body.tbi-figma-page .hrf-ai__card {
  flex: 1 0 0;
  min-width: 0;
  height: 700px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 20px 33px 16px;
  background-color: #0f0821;
  border: 1px solid rgba(185, 108, 255, 0.32);
  border-radius: 25px;
}

body.tbi-figma-page .hrf-ai__illus {
  width: 100%;
  height: 380.76px;
  border-radius: 10px;
  background-color: #1c162d;
  object-fit: contain;
}

/* ---------- Flow illustration: animated dot indicator ----------------------
   Figma 138:6530 -> instance 138:6539 -> component set 2:51.
   The 4-dot indicator in the centre card is an ANIMATED component in Figma,
   not static art: 4 variants (Default, Variant2, Variant3, Variant4), each
   held 0.2s via AFTER_TIMEOUT and swapped with transition:null (instant), so
   the active dot steps left-to-right on a closed 0.8s loop.
   ai-frontend-card2.png bakes in only the first frame, so we mask that dot
   row and redraw the four dots as live elements.
   Geometry is straight off the Figma nodes -- dots 6x6px on a 10px pitch,
   row 36x6px within the 310x381 illustration -- expressed as percentages of
   the painted image rect so it holds at every breakpoint. */

body.tbi-figma-page .hrf-ai__illus-box {
  width: 100%;
  height: 380.76px;
  border-radius: 10px;
  background-color: #1c162d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Reproduces exactly the rect object-fit:contain would paint, so the overlay
   coordinates below stay locked to the artwork. 309.8px = 380.76 * 310/381. */
body.tbi-figma-page .hrf-ai__illus-inner {
  position: relative;
  width: 100%;
  max-width: 309.8px;
  max-height: 100%;
  aspect-ratio: 310 / 381;
}

body.tbi-figma-page .hrf-ai__illus-inner .hrf-ai__illus {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: transparent;
}

/* Hides the dot row baked into the PNG. #f2edfd is the card fill sampled from
   the artwork across this exact rect (flat there to within +/-2 per channel). */
body.tbi-figma-page .hrf-ai__flow-mask {
  position: absolute;
  left: 41.290%;
  top: 55.118%;
  width: 14.516%;
  height: 3.675%;
  background-color: #f2edfd;
}

body.tbi-figma-page .hrf-ai__flow-dots {
  --hrf-ai-dot-step: 0.2s;   /* Figma AFTER_TIMEOUT, per variant */
  --hrf-ai-dot-on: #543582;  /* Figma Ellipse 7082 fill */
  --hrf-ai-dot-off: #d0d0d0; /* Figma Ellipse 7083-7085 fill */
  position: absolute;
  left: 42.742%;             /* 132.5 / 310 */
  top: 56.102%;              /* 213.75 / 381 */
  width: 11.613%;            /* 36 / 310 */
  height: 1.575%;            /* 6 / 381 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.tbi-figma-page .hrf-ai__flow-dots i {
  flex: 0 0 auto;
  width: 16.667%;            /* 6 / 36 -- gaps fall out at 4px, i.e. a 10px pitch */
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--hrf-ai-dot-off);
  animation: hrf-ai-dot-blink calc(var(--hrf-ai-dot-step) * 4) step-end infinite;
}

/* Negative delays put each dot one 0.2s step behind the one before it, so the
   steady-state cycle is already running on the first painted frame. */
body.tbi-figma-page .hrf-ai__flow-dots i:nth-child(2) { animation-delay: calc(var(--hrf-ai-dot-step) * -3); }
body.tbi-figma-page .hrf-ai__flow-dots i:nth-child(3) { animation-delay: calc(var(--hrf-ai-dot-step) * -2); }
body.tbi-figma-page .hrf-ai__flow-dots i:nth-child(4) { animation-delay: calc(var(--hrf-ai-dot-step) * -1); }

/* step-end, not a fade: Figma swaps the variants instantly. */
@keyframes hrf-ai-dot-blink {
  0%   { background-color: var(--hrf-ai-dot-on); }
  25%  { background-color: var(--hrf-ai-dot-off); }
  100% { background-color: var(--hrf-ai-dot-off); }
}

@media (prefers-reduced-motion: reduce) {
  body.tbi-figma-page .hrf-ai__flow-dots i { animation: none; }
  body.tbi-figma-page .hrf-ai__flow-dots i:nth-child(1) { background-color: var(--hrf-ai-dot-on); }
}

body.tbi-figma-page .hrf-ai__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  min-height: 0;
}

body.tbi-figma-page .hrf-ai__body-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 77px;
}

body.tbi-figma-page .hrf-ai__num {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 1.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-ai__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 22px;
  line-height: 31.6px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ffffff;
}

body.tbi-figma-page .hrf-ai__desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: rgba(255, 255, 255, 0.7);
}

body.tbi-figma-page .hrf-ai__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background-color: #0f0821;
  border: 1px solid rgba(185, 108, 255, 0.32);
  border-radius: 25px;
}

body.tbi-figma-page .hrf-ai__cta-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 746px;
}

body.tbi-figma-page .hrf-ai__cta-heading {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 34px;
  line-height: normal;
  letter-spacing: -2.46px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-ai__cta-desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: rgba(255, 255, 255, 0.6);
}

body.tbi-figma-page .hrf-ai__cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  padding: 0 20px;
  background-color: #f7e934;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease;
}

/* Same hover language as the sitewide yellow header CTA (site-header.css
   .site-header__cta:hover) — every yellow hrf- / automate button on this
   page family reuses it so buttons give some feedback on hover, not just
   on click. */
body.tbi-figma-page .hrf-ai__cta-btn:hover,
body.tbi-figma-page .hrf-ai__cta-btn:focus-visible {
  transform: scale(1.05);
}

body.tbi-figma-page .hrf-ai__cta-btn span {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  color: #151515;
}

body.tbi-figma-page .hrf-ai__cta-btn img {
  transform: rotate(90deg);
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-ai__heading {
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -1.5px;
  }

  body.tbi-figma-page .hrf-ai__cards {
    flex-wrap: wrap;
    height: auto;
    align-items: stretch;
  }

  body.tbi-figma-page .hrf-ai__card {
    flex: 1 1 calc(50% - 10px);
    height: auto;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-ai {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-ai__container {
    padding-inline: 20px;
    gap: 40px;
  }

  body.tbi-figma-page .hrf-ai__heading {
    font-size: 34px;
    letter-spacing: -1px;
  }

  body.tbi-figma-page .hrf-ai__cards {
    flex-direction: column;
  }

  body.tbi-figma-page .hrf-ai__card {
    flex: 1 1 auto;
    width: 100%;
  }

  body.tbi-figma-page .hrf-ai__cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }

  body.tbi-figma-page .hrf-ai__cta-btn {
    width: 100%;
  }
}

/* ===================== HIRING MODELS (Figma 42:5339) ===================== */

body.tbi-figma-page .hrf-hm {
  background-color: #ffffff;
  padding: 120px 0;
}

body.tbi-figma-page .hrf-hm__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

body.tbi-figma-page .hrf-hm__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

body.tbi-figma-page .hrf-hm__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-hm__heading {
  max-width: 978px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #171717;
}

/* Promoted 2026-09-14 (HIRE_PAGE_TEMPLATE.md §8) — was duplicated
 * byte-identically inside all five per-page PER-PAGE OVERRIDES blocks
 * below; every page in the family renders an .hrf-hm__intro paragraph, so
 * this belongs here once instead of as a 6th (7th, ...) per-page copy. */
body.tbi-figma-page .hrf-hm__intro {
  max-width: 860px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  color: rgba(23, 23, 23, 0.7);
}

body.tbi-figma-page .hrf-hm__cards {
  display: flex;
  gap: 40px;
  padding-inline: 64px;
  width: 100%;
}

body.tbi-figma-page .hrf-hm__card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 28px 42px;
  background-color: #ffffff;
  border: 2px solid rgba(23, 23, 23, 0.08);
  border-radius: 16px;
}

body.tbi-figma-page .hrf-hm__card--featured {
  border-color: #b8a9f0;
  box-shadow: 0 0 3px rgba(185, 108, 255, 0.16);
}

body.tbi-figma-page .hrf-hm__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

body.tbi-figma-page .hrf-hm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 7.541px;
  background-color: #f1e8ff;
}

body.tbi-figma-page .hrf-hm__badge {
  padding: 5px 8px;
  background-color: #f0ecfd;
  border-radius: 4px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 11px;
  line-height: 16.128px;
  letter-spacing: 1.1088px;
  text-transform: uppercase;
  color: #b96cff;
  white-space: nowrap;
}

body.tbi-figma-page .hrf-hm__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 22px;
  line-height: 35.556px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #28262d;
}

body.tbi-figma-page .hrf-hm__body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

body.tbi-figma-page .hrf-hm__body--tight {
  gap: 32px;
}

body.tbi-figma-page .hrf-hm__desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  color: rgba(23, 23, 23, 0.7);
}

body.tbi-figma-page .hrf-hm__divider {
  display: block;
  width: 100%;
  height: 1px;
}

body.tbi-figma-page .hrf-hm__list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.tbi-figma-page .hrf-hm__list li {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.tbi-figma-page .hrf-hm__list li img {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

body.tbi-figma-page .hrf-hm__list li span {
  flex: 1;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: rgba(23, 23, 23, 0.7);
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-hm__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1.5px;
  }

  body.tbi-figma-page .hrf-hm__cards {
    flex-wrap: wrap;
    padding-inline: 0;
  }

  /* flex-grow:0 (not 1) — this section always has exactly 3 cards, so the
     2-per-row wrap always leaves a lone 3rd card on its own row; with
     flex-grow it stretched to fill that whole row edge-to-edge (all its
     text/bullets spread out full-width, sitting well below the two
     evenly-sized cards above it) instead of staying the same size as its
     siblings. */
  body.tbi-figma-page .hrf-hm__card {
    flex: 0 1 calc(50% - 20px);
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-hm {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-hm__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-hm__heading {
    font-size: 32px;
    letter-spacing: -1px;
  }

  body.tbi-figma-page .hrf-hm__cards {
    flex-direction: column;
  }

  body.tbi-figma-page .hrf-hm__card {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ===================== SERVICES (Figma 42:5415) ===================== */

body.tbi-figma-page .hrf-svc {
  background-color: #100c19;
  padding: 100px 0;
}

body.tbi-figma-page .hrf-svc__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.tbi-figma-page .hrf-svc__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  text-align: center;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-svc__heading {
  max-width: 978px;
  margin: 20px 0 48px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  text-align: center;
  color: #ffffff;
}

body.tbi-figma-page .hrf-svc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 53px;
  width: 100%;
}

body.tbi-figma-page .hrf-svc__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 32px 48px;
  background-color: #0f0821;
  border: 1px solid rgba(185, 108, 255, 0.32);
  border-radius: 25px;
}

body.tbi-figma-page .hrf-svc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #201b35;
  border: 1px solid #4f466f;
  border-radius: 10px;
  box-shadow: 0 4px 2px rgba(5, 1, 16, 0.25);
}

body.tbi-figma-page .hrf-svc__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ffffff;
}

body.tbi-figma-page .hrf-svc__list {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

body.tbi-figma-page .hrf-svc__list li {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.72);
}

body.tbi-figma-page .hrf-svc__list li + li {
  margin-top: 0;
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-svc__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 32px;
  }

  body.tbi-figma-page .hrf-svc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-svc {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-svc__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-svc__heading {
    font-size: 32px;
    letter-spacing: -1px;
  }

  body.tbi-figma-page .hrf-svc__grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== RELATED ECOMMERCE SERVICES =====================
 * Optional add-on section (HIRE_PAGE_TEMPLATE.md §1) — only included on
 * pages whose content brief supplies real related-service content.
 * Promoted 2026-09-14 (HIRE_PAGE_TEMPLATE.md §1's "if a second page
 * adopts these sections, promote that CSS to a shared, tbi-figma-page-
 * scoped block" instruction) when page-hire-shopify-developer.php became
 * the second page to use it, after page-hire-magento-developer.php.
 * Visual language borrows directly from hrf-hm (white bg, purple eyebrow,
 * serif heading) and hrf-other (56px Newsreader heading scale,
 * card-row-of-links shape) so it reads as part of the same system rather
 * than a new design. */

body.tbi-figma-page .hrf-related {
  background-color: #ffffff;
  padding: 100px 0;
}

body.tbi-figma-page .hrf-related__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.tbi-figma-page .hrf-related__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-related__heading {
  max-width: 780px;
  margin: 0;
  font-family: "Newsreader", var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 59.36px;
  letter-spacing: -0.56px;
  color: #14121a;
}

body.tbi-figma-page .hrf-related__intro {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  color: rgba(23, 23, 23, 0.7);
}

body.tbi-figma-page .hrf-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 24px;
  text-align: left;
}

body.tbi-figma-page .hrf-related__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background-color: #faf9fd;
  border: 1px solid #e4e0ec;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.tbi-figma-page .hrf-related__card:hover {
  border-color: #b8a9f0;
  background-color: #f3eefd;
}

body.tbi-figma-page .hrf-related__card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: #14121a;
}

body.tbi-figma-page .hrf-related__card-title img {
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.55;
}

body.tbi-figma-page .hrf-related__card-desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #55505f;
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-related__heading {
    font-size: 44px;
    line-height: 1.2;
  }

  body.tbi-figma-page .hrf-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-related {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-related__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-related__heading {
    font-size: 32px;
  }

  body.tbi-figma-page .hrf-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== HOW TO HIRE (Figma 42:6332) ===================== */

body.tbi-figma-page .hrf-hth {
  background-color: #faf9fd;
  padding: 120px 0;
}

body.tbi-figma-page .hrf-hth__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
}

body.tbi-figma-page .hrf-hth__eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  text-align: center;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-hth__heading {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  text-align: center;
  color: #171717;
}

body.tbi-figma-page .hrf-hth__heading span {
  color: #9a60fa;
}

/* Promoted 2026-09-14 (HIRE_PAGE_TEMPLATE.md §8) — was duplicated
 * byte-identically inside all five per-page PER-PAGE OVERRIDES blocks
 * below (the .hrf-hth__heading margin above was updated at the same time
 * from its old no-intro 72px to this rule's 24px, since every page in the
 * family now renders an .hrf-hth__intro paragraph beneath the heading). */
body.tbi-figma-page .hrf-hth__intro {
  max-width: 860px;
  margin: 0 auto 72px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  text-align: center;
  color: #55505f;
}

body.tbi-figma-page .hrf-hth__row {
  position: relative;
  display: flex;
  width: 100%;
}

body.tbi-figma-page .hrf-hth__line {
  position: absolute;
  top: 27px;
  height: 1px;
  background: linear-gradient(90deg, #dcd5f4, #a98ff1 50%, #dcd5f4);
}

body.tbi-figma-page .hrf-hth__col {
  flex: 1 0 0;
  min-width: 0;
  padding-inline: 28px;
  position: relative;
}

body.tbi-figma-page .hrf-hth__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24.8px;
  background-color: #ffffff;
  border: 1px solid #d9d0f3;
  border-radius: 27px;
  font-family: "Newsreader", var(--font-serif);
  font-weight: 400;
  font-size: 21.6px;
  color: #7b5cf0;
}

body.tbi-figma-page .hrf-hth__title {
  margin: 0 0 14.4px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 18px;
  line-height: 22.464px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  letter-spacing: -0.1997px;
  color: #14121a;
}

body.tbi-figma-page .hrf-hth__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.tbi-figma-page .hrf-hth__list li {
  position: relative;
  padding-left: 16.8px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #55505f;
}

body.tbi-figma-page .hrf-hth__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50px;
  background-color: #7b5cf0;
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-hth__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
  }

  body.tbi-figma-page .hrf-hth__intro {
    margin-bottom: 48px;
  }

  body.tbi-figma-page .hrf-hth__row {
    flex-direction: column;
    gap: 40px;
  }

  body.tbi-figma-page .hrf-hth__line {
    display: none;
  }

  body.tbi-figma-page .hrf-hth__col {
    padding-inline: 0;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-hth {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-hth__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-hth__heading {
    font-size: 32px;
    letter-spacing: -1px;
  }
}

/* ===================== REACT.JS WORK (Figma 42:5967) ===================== */

body.tbi-figma-page .hrf-work {
  background-color: #ffffff;
  padding: 120px 0;
}

body.tbi-figma-page .hrf-work__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  gap: 47px;
  align-items: flex-start;
}

body.tbi-figma-page .hrf-work__side {
  flex: 0 0 473px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  /* Must clear the sticky .site-header (77px, z-index 100). A bare `top: 24px`
     parked this column INSIDE the header band, and since the header paints
     above it (z-index 100 vs auto here) the top ~53px of the column — the
     first line of .hrf-work__heading — was hidden as soon as the column
     stuck. Reported as "the left is cut off when I scroll down", on all 48
     pages of the three families, because this rule is shared by all of them.
     The 24px is the design's gap below the header, so it is kept as the
     addend rather than replaced. Same `calc(var(--header-height) + N)` form
     that ~20 other sticky/scroll-margin rules in the theme already use (see
     --header-height in base.css); it tracks the token automatically.
     Below 1024px this element is position:static, so it was never affected
     there and still is not. */
  top: calc(var(--header-height) + 24px);
}

body.tbi-figma-page .hrf-work__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-work__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 79px;
  letter-spacing: -3.46px;
  color: #171717;
}

body.tbi-figma-page .hrf-work__heading span {
  font-weight: 300;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-work__tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 405px;
  border-top: 1px solid #e4e0ec;
}

body.tbi-figma-page .hrf-work__tab {
  display: block;
  padding: 16px 0 16px 32px;
  border-bottom: 1px solid #e4e0ec;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(23, 23, 23, 0.48);
  text-decoration: none;
  position: relative;
}

body.tbi-figma-page .hrf-work__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5.5px;
  height: 28px;
  background-color: #9a60fa;
  opacity: 0;
}

body.tbi-figma-page .hrf-work__tab.is-active {
  font-weight: 500;
  color: #171717;
}

body.tbi-figma-page .hrf-work__tab.is-active::before {
  opacity: 1;
}

body.tbi-figma-page .hrf-work__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.tbi-figma-page .hrf-work__card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 24px;
}

body.tbi-figma-page .hrf-work__card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

body.tbi-figma-page .hrf-work__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1.5px solid #b96cff;
  border-radius: 14px;
  box-shadow: 0 10px 12.5px rgba(124, 58, 237, 0.25);
}

body.tbi-figma-page .hrf-work__card-headtext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.tbi-figma-page .hrf-work__card-eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b8497;
}

body.tbi-figma-page .hrf-work__card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 38.08px;
  letter-spacing: -1.36px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-work__card-desc {
  margin: 0 0 30px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ffffff;
  opacity: 0.72;
}

body.tbi-figma-page .hrf-work__card-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

body.tbi-figma-page .hrf-work__card-footer {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

body.tbi-figma-page .hrf-work__scope {
  flex-shrink: 0;
  position: relative;
  width: 300px;
  padding: 19px;
  border: 1px solid;
  border-radius: 14px;
  box-sizing: border-box;
}

body.tbi-figma-page .hrf-work__scope-label {
  margin: 0 0 14px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
}

body.tbi-figma-page .hrf-work__scope-big {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -1px;
  color: #bd9cff;
}

body.tbi-figma-page .hrf-work__scope-desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-work__bullets {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 26px;
}

body.tbi-figma-page .hrf-work__bullets li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 21.75px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-work__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7.5px;
  border-radius: 50px;
  background-color: #8d5de8;
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-work__container {
    flex-direction: column;
  }

  body.tbi-figma-page .hrf-work__side {
    flex: 0 0 auto;
    position: static;
    width: 100%;
    max-width: none;
  }

  body.tbi-figma-page .hrf-work__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -2px;
  }

  body.tbi-figma-page .hrf-work__tabs {
    max-width: none;
  }

  body.tbi-figma-page .hrf-work__list {
    width: 100%;
  }

  body.tbi-figma-page .hrf-work__card-footer {
    flex-wrap: wrap;
  }

  body.tbi-figma-page .hrf-work__scope {
    width: 100%;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-work {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-work__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-work__heading {
    font-size: 32px;
    letter-spacing: -1.46px;
  }

  body.tbi-figma-page .hrf-work__card-title {
    font-size: 24px;
    line-height: 1.25;
  }

  body.tbi-figma-page .hrf-work__bullets {
    grid-template-columns: 1fr;
  }
}

/* ===================== TESTIMONIALS (Figma 42:6224) ===================== */

body.tbi-figma-page .hrf-testi {
  background-color: #0b0417;
  background-size: cover;
  background-position: center top;
}

body.tbi-figma-page .hrf-testi__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 120px 40px 100px;
}

body.tbi-figma-page .hrf-testi__head {
  max-width: 617px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.tbi-figma-page .hrf-testi__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-testi__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.456px;
  color: #ffffff;
}

body.tbi-figma-page .hrf-testi__body {
  display: flex;
  gap: 100px;
  align-items: flex-start;
  max-width: 1213px;
  margin-inline: auto;
}

body.tbi-figma-page .hrf-testi__media {
  position: relative;
  flex-shrink: 0;
  width: 473px;
  height: 526px;
}

body.tbi-figma-page .hrf-testi__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.tbi-figma-page .hrf-testi__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.15s ease;
}

body.tbi-figma-page .hrf-testi__play:hover,
body.tbi-figma-page .hrf-testi__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

body.tbi-figma-page .hrf-testi__play-icon {
  display: block;
  width: 56px;
  height: 56px;
}

body.tbi-figma-page .hrf-testi__play-icon--play {
  display: none;
}

body.tbi-figma-page .hrf-testi__play.is-paused .hrf-testi__play-icon--play {
  display: block;
}

body.tbi-figma-page .hrf-testi__play.is-paused .hrf-testi__play-icon--pause {
  display: none;
}

/* Muted state / "Tap for sound" — the two elements js/hire-common.js injects.
 *
 * The video autoplays muted because no browser allows audible autoplay before
 * a user gesture. Until 2026-09-17 the only hint was the centre button, which
 * showed the PAUSE icon while the video looped silently — so it read as "pause
 * this", nobody clicked it, and the testimonial was reported as "not giving
 * sound" on every page of all three families. While muted the button now shows
 * a speaker-off icon and this pill invites the click that unmutes.
 *
 * ORDER MATTERS: the three icon rules below have exactly the same specificity
 * (0,4,1) as the .hrf-testi__play.is-paused rules above, so they only win by
 * being later in the file. Do not move them above those rules. */
body.tbi-figma-page .hrf-testi__play-icon--sound {
  display: none;
}

body.tbi-figma-page .hrf-testi__media.is-muted .hrf-testi__play-icon--sound {
  display: block;
}

body.tbi-figma-page .hrf-testi__media.is-muted .hrf-testi__play-icon--play,
body.tbi-figma-page .hrf-testi__media.is-muted .hrf-testi__play-icon--pause {
  display: none;
}

/* The whole frame is the unmute target while muted, not just the button. */
body.tbi-figma-page .hrf-testi__media.is-muted {
  cursor: pointer;
}

body.tbi-figma-page .hrf-testi__sound-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(1, 6, 18, 0.72);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  /* clicks must reach .hrf-testi__media underneath, which does the unmuting */
  pointer-events: none;
}

body.tbi-figma-page .hrf-testi__media.is-muted .hrf-testi__sound-hint {
  display: block;
}

body.tbi-figma-page .hrf-testi__content {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}

body.tbi-figma-page .hrf-testi__quote {
  margin: 0 0 60px;
  max-width: 640px;
  font-family: var(--font-base);
  font-weight: 300;
  font-size: 50px;
  line-height: 66px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ffffff;
}

body.tbi-figma-page .hrf-testi__quote span {
  background-color: #9a60fb;
  padding: 0 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body.tbi-figma-page .hrf-testi__attribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.tbi-figma-page .hrf-testi__logo {
  display: block;
  width: 130px;
  height: 25px;
}

body.tbi-figma-page .hrf-testi__attribution p {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

body.tbi-figma-page .hrf-testi__name {
  font-weight: 500;
  color: #ffffff;
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-testi__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -2px;
  }

  body.tbi-figma-page .hrf-testi__body {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  body.tbi-figma-page .hrf-testi__content {
    padding-top: 0;
    text-align: center;
  }

  body.tbi-figma-page .hrf-testi__quote {
    max-width: none;
    font-size: 32px;
    line-height: 1.3;
  }

  body.tbi-figma-page .hrf-testi__attribution {
    align-items: center;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-testi__container {
    padding: 60px 20px;
  }

  body.tbi-figma-page .hrf-testi__heading {
    font-size: 32px;
    letter-spacing: -1.46px;
  }

  body.tbi-figma-page .hrf-testi__media {
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 473 / 526;
  }

  body.tbi-figma-page .hrf-testi__play {
    width: 44px;
    height: 44px;
  }

  body.tbi-figma-page .hrf-testi__play-icon {
    width: 44px;
    height: 44px;
  }

  body.tbi-figma-page .hrf-testi__sound-hint {
    bottom: 14px;
    padding: 6px 12px;
    font-size: 12px;
  }

  body.tbi-figma-page .hrf-testi__quote {
    font-size: 26px;
  }
}

/* ===================== THE RISK IS NOT SKILL (Figma 42:6252) ===================== */

body.tbi-figma-page .hrf-risk {
  background-color: #ffffff;
  padding-top: 120px;
}

body.tbi-figma-page .hrf-risk__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 42px 38px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

body.tbi-figma-page .hrf-risk__intro {
  display: flex;
  gap: 90px;
  align-items: flex-start;
}

body.tbi-figma-page .hrf-risk__head {
  flex: 0 0 450px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.tbi-figma-page .hrf-risk__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-risk__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 76.44px;
  letter-spacing: -4.29px;
  color: #28262d;
}

body.tbi-figma-page .hrf-risk__copy {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 20px;
}

body.tbi-figma-page .hrf-risk__copy p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 31.68px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #625f67;
}

body.tbi-figma-page .hrf-risk__copy p.hrf-risk__lead {
  font-weight: 600;
  line-height: 34px;
  color: #4c4951;
}

body.tbi-figma-page .hrf-risk__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-top: 1px solid #d0ced0;
}

body.tbi-figma-page .hrf-risk__col {
  flex: 1 0 0;
  min-width: 0;
  padding: 32px 24px 50px;
  border-left: 1px solid #d0ced0;
}

body.tbi-figma-page .hrf-risk__col:first-child {
  border-left: none;
}

body.tbi-figma-page .hrf-risk__bar {
  display: block;
  width: 40.5px;
  height: 3px;
  margin-bottom: 22px;
  background-color: #b96cff;
}

body.tbi-figma-page .hrf-risk__col-title {
  margin: 0 0 22px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 22px;
  line-height: 35.556px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #28262d;
}

body.tbi-figma-page .hrf-risk__col-desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: rgba(104, 100, 109, 0.8);
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-risk__intro {
    flex-direction: column;
    gap: 40px;
  }

  body.tbi-figma-page .hrf-risk__head {
    flex: 0 0 auto;
  }

  body.tbi-figma-page .hrf-risk__heading {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -2.26px;
  }

  body.tbi-figma-page .hrf-risk__row {
    flex-wrap: wrap;
  }

  body.tbi-figma-page .hrf-risk__col {
    flex: 1 1 50%;
  }

  body.tbi-figma-page .hrf-risk__col:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-risk {
    padding-top: 60px;
  }

  body.tbi-figma-page .hrf-risk__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-risk__heading {
    font-size: 30px;
    letter-spacing: -1.69px;
  }

  body.tbi-figma-page .hrf-risk__col {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid #d0ced0;
    padding: 24px 0;
  }

  body.tbi-figma-page .hrf-risk__row {
    flex-direction: column;
    border-top: none;
  }
}

/* ===================== MID-PAGE CTA (Figma 42:6149) ===================== */

body.tbi-figma-page .hrf-cta2 {
  position: relative;
  background-color: #0c0819;
  background-size: cover;
  background-position: center;
  padding: 96px 0;
}

body.tbi-figma-page .hrf-cta2__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
}

body.tbi-figma-page .hrf-cta2__card {
  position: relative;
  background:
    radial-gradient(circle at 13% 9%, rgba(185, 108, 255, 0.2) 0%, rgba(185, 108, 255, 0) 49%),
    linear-gradient(180deg, rgba(19, 12, 35, 0.92) 0%, rgba(12, 8, 25, 0.94) 100%);
  border: 1px solid rgba(120, 82, 186, 0.5);
  border-radius: 22px 22px 0 22px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.02);
  padding: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.tbi-figma-page .hrf-cta2__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

body.tbi-figma-page .hrf-cta2__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  text-align: center;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-cta2__heading {
  margin: 0 0 25px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -3.15px;
  text-align: center;
  color: #ffffff;
}

body.tbi-figma-page .hrf-cta2__desc {
  margin: 0 0 28px;
  max-width: 700px;
  margin-inline: auto;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  color: #aab1c0;
}

body.tbi-figma-page .hrf-cta2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  padding: 0 32px;
  background-color: #f7e934;
  text-decoration: none;
  transition: transform 0.25s ease;
}

body.tbi-figma-page .hrf-cta2__btn:hover,
body.tbi-figma-page .hrf-cta2__btn:focus-visible {
  transform: scale(1.05);
}

body.tbi-figma-page .hrf-cta2__btn span {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.028px;
  color: #151515;
  white-space: nowrap;
}

body.tbi-figma-page .hrf-cta2__btn img {
  transform: rotate(90deg);
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-cta2__card {
    padding: 48px 32px;
  }

  body.tbi-figma-page .hrf-cta2__heading {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1.8px;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-cta2 {
    padding: 60px 0;
  }

  body.tbi-figma-page .hrf-cta2__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-cta2__card {
    padding: 40px 20px;
  }

  body.tbi-figma-page .hrf-cta2__heading {
    font-size: 28px;
    letter-spacing: -1.26px;
  }
}

/* ===================== WHY TBI (Figma 42:6163) ===================== */

body.tbi-figma-page .hrf-why {
  background-color: #02000f;
  padding-top: 100px;
}

body.tbi-figma-page .hrf-why__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  gap: 68px;
}

body.tbi-figma-page .hrf-why__intro {
  display: flex;
  gap: 70px;
  align-items: center;
}

body.tbi-figma-page .hrf-why__head {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.tbi-figma-page .hrf-why__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-figma-page .hrf-why__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 84px;
  letter-spacing: -4.752px;
  color: #ecebea;
}

body.tbi-figma-page .hrf-why__heading span {
  color: #9a60fa;
}

body.tbi-figma-page .hrf-why__copy {
  flex: 0 0 827px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 20px;
}

body.tbi-figma-page .hrf-why__copy p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 33px;
  color: #b9b5c0;
}

body.tbi-figma-page .hrf-why__copy p.hrf-why__lead {
  font-weight: 600;
  color: #ecebea;
}

body.tbi-figma-page .hrf-why__stats {
  display: flex;
  width: 100%;
  border-top: 1px solid #261f4e;
  border-bottom: 1px solid #261f4e;
}

body.tbi-figma-page .hrf-why__stat {
  flex: 1 0 0;
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-left: 1px solid #261f4e;
}

body.tbi-figma-page .hrf-why__stat:first-child {
  border-left: none;
}

body.tbi-figma-page .hrf-why__stat-num {
  margin: 0;
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #ecebea;
}

body.tbi-figma-page .hrf-why__stat-rating {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

body.tbi-figma-page .hrf-why__stars {
  /* Fills only the --rating share of the 5-star row (e.g. 4.9/5 = 98%),
     leaving the rest dim, instead of solid-coloring all 5 glyphs
     regardless of the actual rating number beside them. Pages that don't
     set --rating inline keep the previous solid-fill look (100%). */
  --rating: 92%;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1.2;
  background: linear-gradient(90deg, #ff3434 var(--rating), rgba(255, 255, 255, 0.25) var(--rating));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.tbi-figma-page .hrf-why__stat-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21.7px;
  color: #aaa5b3;
}

body.tbi-figma-page .hrf-why__stat-label img {
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 1279px) {
  body.tbi-figma-page .hrf-why__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  body.tbi-figma-page .hrf-why__copy {
    flex: 0 0 auto;
    width: 100%;
  }

  body.tbi-figma-page .hrf-why__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -2.75px;
  }

  body.tbi-figma-page .hrf-why__stats {
    flex-wrap: wrap;
  }

  body.tbi-figma-page .hrf-why__stat {
    flex: 1 1 50%;
  }

}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-why {
    padding-top: 60px;
  }

  body.tbi-figma-page .hrf-why__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-why__heading {
    font-size: 32px;
    letter-spacing: -2px;
  }

  body.tbi-figma-page .hrf-why__stat {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid #261f4e;
  }

  body.tbi-figma-page .hrf-why__stat:first-child {
    border-top: none;
  }

}

/* The hrf-why 4-column strip (hrf-why__grid / __col / __bar) was removed on
   2026-09-16 at the user's request: "remove all 4 column from the section 10
   ... keep 3 stats". Its markup is gone from all 48 templates in the three
   families, so its rules were deleted here rather than left dead. hrf-why
   now renders its intro plus the 3 stats only. Do not re-add these rules
   without re-adding the markup. */

/* ===================== TECH MARQUEE (Figma 42:5478) ===================== */

body.tbi-figma-page .hrf-tech {
  background-color: #ffffff;
  padding: 120px 0 90px;
  overflow: hidden;
}

body.tbi-figma-page .hrf-tech__container {
  max-width: 952px;
  margin-inline: auto;
  padding-inline: 40px;
  margin-bottom: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.tbi-figma-page .hrf-tech__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-tech__heading {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 76px;
  line-height: 78px;
  letter-spacing: -3.46px;
  color: #171717;
}

body.tbi-figma-page .hrf-tech__row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

body.tbi-figma-page .hrf-tech__row:last-child {
  margin-bottom: 0;
}

body.tbi-figma-page .hrf-tech__track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: hrf-tech-scroll-l 60s linear infinite;
}

body.tbi-figma-page .hrf-tech__row--r .hrf-tech__track {
  animation-name: hrf-tech-scroll-r;
}

@keyframes hrf-tech-scroll-l {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes hrf-tech-scroll-r {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

body.tbi-figma-page .hrf-tech__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background-color: rgba(245, 243, 248, 0.16);
  border: 1px solid #dadada;
  border-radius: 12px;
  white-space: nowrap;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #171717;
}

body.tbi-figma-page .hrf-tech__pill img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  body.tbi-figma-page .hrf-tech__track {
    animation: none;
  }

  body.tbi-figma-page .hrf-ai__cta-btn,
  body.tbi-figma-page .hrf-cta2__btn,
  body.tbi-figma-page .automate__btn {
    transition: none;
  }

  body.tbi-figma-page .hrf-ai__cta-btn:hover,
  body.tbi-figma-page .hrf-ai__cta-btn:focus-visible,
  body.tbi-figma-page .hrf-cta2__btn:hover,
  body.tbi-figma-page .hrf-cta2__btn:focus-visible,
  body.tbi-figma-page .automate__btn:hover,
  body.tbi-figma-page .automate__btn:focus-visible {
    transform: none;
  }
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-tech__heading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -2px;
  }

  body.tbi-figma-page .hrf-tech__container {
    margin-bottom: 56px;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-tech {
    padding: 60px 0 50px;
  }

  body.tbi-figma-page .hrf-tech__container {
    padding-inline: 20px;
    margin-bottom: 40px;
  }

  body.tbi-figma-page .hrf-tech__heading {
    font-size: 30px;
    letter-spacing: -1.37px;
  }
}

/* ===================== FAQ (Figma 42:6217) =====================
   Reuses the sitewide .faq component (content.css) — its defaults
   already match this design almost exactly (64px/700/#f7f7f8 heading,
   16px/600/#ffffff trigger, #aab1c0 answer text — see TASK.md). Only
   the container width, background texture, trigger size and icon/link
   colors need a page-specific override. */

body.tbi-figma-page .hrf-faq {
  background-color: #0c0819;
  background-size: cover;
  background-position: center;
}

body.tbi-figma-page .hrf-faq .faq__container {
  max-width: 900px;
}

body.tbi-figma-page .hrf-faq .faq__trigger {
  font-size: 17px;
}

body.tbi-figma-page .hrf-faq .faq__icon::before,
body.tbi-figma-page .hrf-faq .faq__icon::after {
  background-color: #bd9cff;
}

body.tbi-figma-page .hrf-faq .faq__answer ul {
  padding-left: 24px;
  list-style: disc;
}

body.tbi-figma-page .hrf-faq .faq__answer strong {
  color: #ffffff;
  font-weight: 600;
}

body.tbi-figma-page .hrf-faq .hrf-faq__answer--placeholder p {
  font-style: italic;
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-faq .faq__heading {
    font-size: 36px;
  }
}

/* ===================== OTHER DEVELOPERS (Figma 42:6286, top) ===================== */

body.tbi-figma-page .hrf-other {
  background-color: #faf9fd;
  padding-top: 120px;
}

body.tbi-figma-page .hrf-other__container {
  max-width: 1264px;
  margin-inline: auto;
  padding-inline: 40px;
}

body.tbi-figma-page .hrf-other__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-figma-page .hrf-other__heading {
  margin: 0 0 40px;
  font-family: "Newsreader", var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 59.36px;
  letter-spacing: -0.56px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: #14121a;
}

body.tbi-figma-page .hrf-other__row {
  display: flex;
  border-top: 1px solid #e4e2e9;
}

body.tbi-figma-page .hrf-other__link {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 24px;
  border-left: 1px solid #e4e2e9;
  text-decoration: none;
}

body.tbi-figma-page .hrf-other__link:first-child {
  border-left: none;
}

body.tbi-figma-page .hrf-other__link-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.tbi-figma-page .hrf-other__link-title {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 15.2px;
  line-height: 24.32px;
  color: #14121a;
}

body.tbi-figma-page .hrf-other__link-desc {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 13.28px;
  line-height: 20.584px;
  color: #55505f;
}

body.tbi-figma-page .hrf-other__link-arrow {
  position: absolute;
  top: 30px;
  right: 24px;
  width: 12px;
}

@media (max-width: 1023px) {
  body.tbi-figma-page .hrf-other__heading {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 40px;
  }

  body.tbi-figma-page .hrf-other__row {
    flex-wrap: wrap;
  }

  body.tbi-figma-page .hrf-other__link {
    flex: 1 1 50%;
  }

  body.tbi-figma-page .hrf-other__link:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 767px) {
  body.tbi-figma-page .hrf-other {
    padding-top: 60px;
  }

  body.tbi-figma-page .hrf-other__container {
    padding-inline: 20px;
  }

  body.tbi-figma-page .hrf-other__heading {
    font-size: 30px;
  }

  body.tbi-figma-page .hrf-other__link {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid #e4e2e9;
  }

  body.tbi-figma-page .hrf-other__link:first-child {
    border-top: none;
  }
}

/* ===================== FINAL CTA (Figma 42:6286, bottom) ===================== */

body.tbi-figma-page .automate { background: #f7f6f9; }
body.tbi-figma-page .automate__card { max-width: 1440px; margin: 0 auto; position: relative; border-radius: 24px; overflow: hidden; min-height: 320px; aspect-ratio: 1520 / 696; display: flex; align-items: center; justify-content: center; text-align: center; background: #f7f6f9; }
body.tbi-figma-page .automate__bgimg { position: absolute; inset: 0; width: 1265px; height: 511px; object-fit: cover; z-index: 0; margin: auto; }
body.tbi-figma-page .automate__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(48px, 9vw, 90px) clamp(20px, 5vw, 40px); max-width: 760px; box-sizing: border-box; }
body.tbi-figma-page .automate__eyebrow { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.13px; text-transform: uppercase; color: #cab5ff; margin: 0; }
body.tbi-figma-page .automate__heading { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(28px, 5.2vw, 63px); line-height: 1.13; color: #fff; margin: 0; max-width: 702px; }
body.tbi-figma-page .automate__desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0; max-width: 600px; }
body.tbi-figma-page .automate__btn { margin-top: 12px; background: #f7e934; color: #151515; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; padding: 14px 32px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; transition: transform 0.25s ease; }
body.tbi-figma-page .automate__btn:hover,
body.tbi-figma-page .automate__btn:focus-visible { transform: scale(1.05); }
body.tbi-figma-page .automate__btn img { width: 13.5px; flex-shrink: 0; }

/* Below ~767px, this card's fixed aspect-ratio (1520:696) combined with its
   min-height:320px floor forces WIDTH up past the viewport instead of ever
   shrinking height below 320px (aspect-ratio math: 320 * 1520/696 ≈ 699px) —
   the card, and the page around it, end up 699px wide on a 390px phone.
   Below that breakpoint the ratio can never hold anyway once real heading/
   desc/button content needs more than 320px of height, so drop it and let
   the flex column size itself; min-height keeps a sensible floor. */
@media (max-width: 767px) {
  body.tbi-figma-page .automate__card {
    aspect-ratio: auto;
  }
}

/* =====================================================================
 * SERVICE-FAMILY COMPONENTS (svcl-*) — body.tbi-service-page
 *
 * Shared by the service inner AND service landing families; never matched
 * against a hire page's markup (hire templates use no svcl-* class at
 * all). Was css/services-common.css lines 36-613 before the 2026-09-16
 * split; rules unchanged apart from the scope-class rename.
 * ===================================================================== */

/* ===================== HERO — floating Google-review card (Figma 73:2001) =====================
   Sits inside the reused .hrf-hero__stage, alongside .hrf-hero__content, in place of the Hire
   family's avatar cluster. */

body.tbi-service-page .svcl-hero__review {
  position: absolute;
  z-index: 1;
  top: 191px;
  left: 57.89%;
  width: 28.62%;
  min-width: 340px;
  max-width: 435px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(5, 1, 16, 0.35);
}

body.tbi-service-page .svcl-hero__review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

body.tbi-service-page .svcl-hero__review-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #aeaeae;
  object-fit: cover;
  flex-shrink: 0;
}

body.tbi-service-page .svcl-hero__review-name {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
}

body.tbi-service-page .svcl-hero__review-role {
  margin: 2px 0 0;
  font-family: var(--font-base);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: #4e4e4e;
}

body.tbi-service-page .svcl-hero__review-logo {
  height: 18px;
  width: auto;
  margin-top: 8px;
  display: block;
}

body.tbi-service-page .svcl-hero__review-quote {
  margin: 0 0 16px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.0875px;
  color: #333333;
}

body.tbi-service-page .svcl-hero__review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.tbi-service-page .svcl-hero__review-stars {
  height: 12px;
  width: auto;
}

body.tbi-service-page .svcl-hero__review-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 12px;
  color: rgba(23, 23, 23, 0.5);
  white-space: nowrap;
}

body.tbi-service-page .svcl-hero__review-verified img {
  height: 17px;
  width: auto;
}

@media (max-width: 1023px) {
  body.tbi-service-page .svcl-hero__review {
    position: static;
    width: min(435px, 100%);
    /* The desktop rule's min-width: 340px must be reset here, not just
       overridden by width — min-width wins over width, so without this the
       card stays 340px wide (380px with padding) inside a 320px viewport and
       is clipped by .page's own overflow-x: hidden. Silent, because the clip
       means the page never grows a horizontal scrollbar to give it away.
       Found 2026-09-16 on the mobile-app-development-company page's own
       320px check (SERVICE_PAGE_TEMPLATE.md §6); the rule is scoped to the
       shared tbi-service-page body class, so every page in the family
       was clipped the same way. */
    min-width: 0;
    max-width: 435px;
    margin: 32px 0 0;
  }
}

@media (max-width: 479px) {
  body.tbi-service-page .svcl-hero__review {
    padding: 20px;
  }
}

/* ===================== SERVICE CATALOG GRID (Figma 73:2546, "What we do") =====================
   No equivalent in the Hire family: a 4x3 grid of plain title+arrow+description links, not the
   icon+bullet-list cards hrf-svc uses. */

body.tbi-service-page .svcl-catalog {
  position: relative;
  background-color: #0c0819;
  padding: 120px 40px;
  overflow: hidden;
}

body.tbi-service-page .svcl-catalog__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

body.tbi-service-page .svcl-catalog__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

body.tbi-service-page .svcl-catalog__head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

body.tbi-service-page .svcl-catalog__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.tbi-service-page .svcl-catalog__heading {
  margin: 0;
  max-width: 726px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #ffffff;
}

body.tbi-service-page .svcl-catalog__desc {
  margin: 0;
  max-width: 605px;
  padding-top: 4px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 31.68px;
  color: rgba(255, 255, 255, 0.72);
}

body.tbi-service-page .svcl-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(112, 55, 255, 0.16);
  border-left: 1px solid rgba(112, 55, 255, 0.16);
}

body.tbi-service-page .svcl-catalog__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  min-height: 180px;
  border-right: 1px solid rgba(112, 55, 255, 0.16);
  border-bottom: 1px solid rgba(112, 55, 255, 0.16);
  text-decoration: none;
}

body.tbi-service-page .svcl-catalog__card-title {
  margin: 0;
  max-width: 290px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: -0.16px;
  color: #ffffff;
}

body.tbi-service-page .svcl-catalog__card-desc {
  margin: 9px 0 0;
  max-width: 290px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 13.76px;
  line-height: 22.016px;
  color: rgba(255, 255, 255, 0.72);
}

body.tbi-service-page .svcl-catalog__card-arrow {
  position: absolute;
  top: 32px;
  right: 23px;
  width: 24px;
  height: 24px;
}

@media (max-width: 1279px) {
  body.tbi-service-page .svcl-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1023px) {
  body.tbi-service-page .svcl-catalog {
    padding: 80px 20px;
  }

  body.tbi-service-page .svcl-catalog__head {
    flex-direction: column;
  }

  body.tbi-service-page .svcl-catalog__heading {
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -1.5px;
  }
}

@media (max-width: 767px) {
  body.tbi-service-page .svcl-catalog__grid {
    grid-template-columns: 1fr;
  }

  body.tbi-service-page .svcl-catalog__heading {
    font-size: 36px;
  }
}

/* ===================== PLATFORM DECISION GRID (Figma 73:2426, "Choosing a platform") =====================
   No equivalent in the Hire family: hrf-risk's 2-column intro pattern, but followed by 6
   bordered comparison cards instead of 4 plain text columns. */

body.tbi-service-page .svcl-platforms {
  background-color: #ffffff;
  padding: 120px 40px;
}

body.tbi-service-page .svcl-platforms__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

body.tbi-service-page .svcl-platforms__intro {
  display: flex;
  gap: 64px;
  align-items: center;
}

body.tbi-service-page .svcl-platforms__head {
  flex: 1 0 0;
}

body.tbi-service-page .svcl-platforms__eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.tbi-service-page .svcl-platforms__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 76.44px;
  letter-spacing: -4.29px;
  color: #28262d;
}

body.tbi-service-page .svcl-platforms__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 800px;
  max-width: 44vw;
  font-family: var(--font-base);
  font-size: 20px;
  line-height: 33px;
}

body.tbi-service-page .svcl-platforms__copy p {
  margin: 0;
  color: #625f67;
}

body.tbi-service-page .svcl-platforms__copy p:first-child {
  font-weight: 600;
  color: #4a4650;
}

body.tbi-service-page .svcl-platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

body.tbi-service-page .svcl-platforms__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(168, 114, 216, 0.22);
  border-radius: 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

body.tbi-service-page .svcl-platforms__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 5px 8px;
  background-color: #f0ecfd;
  border-radius: 4px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 11px;
  line-height: 16.128px;
  letter-spacing: 1.1088px;
  text-transform: uppercase;
  color: #b96cff;
}

body.tbi-service-page .svcl-platforms__card-title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 16px;
  color: rgba(23, 23, 23, 0.88);
}

body.tbi-service-page .svcl-platforms__card-desc {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 13.76px;
  line-height: 22.291px;
  color: #55505f;
}

@media (max-width: 1279px) {
  body.tbi-service-page .svcl-platforms__copy {
    max-width: none;
    width: auto;
  }
}

@media (max-width: 1023px) {
  body.tbi-service-page .svcl-platforms {
    padding: 80px 20px;
  }

  body.tbi-service-page .svcl-platforms__intro {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }

  body.tbi-service-page .svcl-platforms__heading {
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -1.5px;
  }

  body.tbi-service-page .svcl-platforms__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  body.tbi-service-page .svcl-platforms__grid {
    grid-template-columns: 1fr;
  }

  body.tbi-service-page .svcl-platforms__heading {
    font-size: 36px;
  }
}

/* ===================== INSIGHTS / BLOG CROSS-PROMO (Figma 73:3065) =====================
   No equivalent anywhere in the Hire family. */

body.tbi-service-page .svcl-insights {
  background-color: #ffffff;
  padding: 120px 40px;
}

body.tbi-service-page .svcl-insights__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

body.tbi-service-page .svcl-insights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

body.tbi-service-page .svcl-insights__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9b66ff;
}

body.tbi-service-page .svcl-insights__heading {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -3.46px;
  color: #171717;
}

body.tbi-service-page .svcl-insights__all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 17.5px 25.5px;
  border: 1.5px solid #171717;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.13px;
  color: #171717;
  text-decoration: none;
  white-space: nowrap;
}

body.tbi-service-page .svcl-insights__cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

body.tbi-service-page .svcl-insights__card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  border-top: 4px solid #9b66ff;
  background-color: #030110;
  background-image:
    radial-gradient(circle at 92% 91%, rgba(155, 102, 255, 0.28) 0%, rgba(155, 102, 255, 0) 70%);
  text-decoration: none;
}

body.tbi-service-page .svcl-insights__card-tag {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

body.tbi-service-page .svcl-insights__card-title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1px;
  color: #f5f5f7;
}

body.tbi-service-page .svcl-insights__card-desc {
  margin: 0;
  max-width: 370px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.89);
}

body.tbi-service-page .svcl-insights__card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  color: #9b66ff;
}

@media (max-width: 1023px) {
  body.tbi-service-page .svcl-insights {
    padding: 80px 20px;
  }

  body.tbi-service-page .svcl-insights__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  body.tbi-service-page .svcl-insights__heading {
    font-size: 44px;
  }

  body.tbi-service-page .svcl-insights__cards {
    flex-direction: column;
  }
}

@media (max-width: 479px) {
  body.tbi-service-page .svcl-insights__heading {
    font-size: 34px;
  }
}

/* =====================================================================
 * CARD HOVER — holographic sheen (added 2026-09-16)
 *
 * Adapted from the reference .holographic-card snippet supplied with the
 * request. Its geometry is kept verbatim — a 200%x200% ::before carrying a
 * `linear-gradient(0deg, transparent, transparent 30%, <tint>)`, rotated
 * -45deg, faded in and swept with `translateY(100%)` on hover — so the
 * diagonal sweep reads exactly the same. Three things are deliberately
 * changed for this theme:
 *
 * 1. COLOUR. The snippet is cyan (#0ff) on #000. This theme's accent is
 *    --color-accent-purple (#a100ff), so the sheen and glow use that. A
 *    cyan sheen appears nowhere else in the design system.
 * 2. SCALE. The snippet uses scale(1.05). Card gaps here are 18-53px, and
 *    1.05 on the 840px-wide hrf-work__card would grow it ~42px (21px a
 *    side) against a 20px gap, overlapping its neighbour. Cards therefore
 *    lift by 1.03, and hrf-work__card — the largest — by 1.02.
 * 3. `transition: all` is replaced with an explicit property list.
 *    `all` on these cards would also animate the background gradients and
 *    border-radius on every state change.
 *
 * Applied to the six elements that are genuinely cards — each has its own
 * background AND its own border-radius:
 *   hrf-ai__card, hrf-svc__card, hrf-work__card   (all three families)
 *   hrf-hm__card                                   (hire only)
 *   svcl-platforms__card, svcl-insights__card      (service landing only)
 *
 * Deliberately NOT applied, and why:
 *   svcl-catalog__card, hrf-risk__col — computed background is
 *     rgba(0,0,0,0) with border-radius 0. They are bare link/text rows, so
 *     an `overflow: hidden` sheen would paint a hard-edged rectangle over
 *     the section background instead of over a card.
 *   hrf-tech__pill — lives inside .hrf-tech__row, which is overflow:hidden,
 *     and is already in continuous marquee motion; a hover scale there is
 *     both clipped and fighting the animation.
 *   automate__card — a single full-bleed 1520x696 banner, not a card in a
 *     grid. Scaling it would push it past the viewport.
 *   hrf-stats__item, hrf-why__col, hrf-hth__row — text rows with no card
 *     surface of their own.
 *
 * `isolation: isolate` keeps the sheen inside the card's own stacking
 * context. `> *` is given `position: relative; z-index: 1` because an
 * absolutely-positioned ::before paints above static siblings, which would
 * otherwise put the sheen over the card's text — every child of all six of
 * these cards is static, so this is safe (svcl-catalog__card, the one card
 * with an absolutely-positioned child, is excluded above).
 * ===================================================================== */

body.tbi-figma-page .hrf-ai__card,
body.tbi-figma-page .hrf-svc__card,
body.tbi-figma-page .hrf-work__card,
body.tbi-figma-page .hrf-hm__card,
body.tbi-service-page .svcl-platforms__card,
body.tbi-service-page .svcl-insights__card {
  --tbi-card-scale: 1.03;
  --tbi-card-sheen: rgba(161, 0, 255, 0.3);
  --tbi-card-glow: 0 0 24px 0 rgba(161, 0, 255, 0.38);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

body.tbi-figma-page .hrf-ai__card > *,
body.tbi-figma-page .hrf-svc__card > *,
body.tbi-figma-page .hrf-work__card > *,
body.tbi-figma-page .hrf-hm__card > *,
body.tbi-service-page .svcl-platforms__card > *,
body.tbi-service-page .svcl-insights__card > * {
  position: relative;
  z-index: 1;
}

body.tbi-figma-page .hrf-ai__card::before,
body.tbi-figma-page .hrf-svc__card::before,
body.tbi-figma-page .hrf-work__card::before,
body.tbi-figma-page .hrf-hm__card::before,
body.tbi-service-page .svcl-platforms__card::before,
body.tbi-service-page .svcl-insights__card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    var(--tbi-card-sheen)
  );
  transform: rotate(-45deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s ease, opacity 0.45s ease;
}

body.tbi-figma-page .hrf-ai__card:hover,
body.tbi-figma-page .hrf-svc__card:hover,
body.tbi-figma-page .hrf-work__card:hover,
body.tbi-figma-page .hrf-hm__card:hover,
body.tbi-service-page .svcl-platforms__card:hover,
body.tbi-service-page .svcl-insights__card:hover {
  transform: scale(var(--tbi-card-scale));
  box-shadow: var(--tbi-card-glow);
  /* a lifted card must never slide under the neighbour it grew into */
  z-index: 2;
}

body.tbi-figma-page .hrf-ai__card:hover::before,
body.tbi-figma-page .hrf-svc__card:hover::before,
body.tbi-figma-page .hrf-work__card:hover::before,
body.tbi-figma-page .hrf-hm__card:hover::before,
body.tbi-service-page .svcl-platforms__card:hover::before,
body.tbi-service-page .svcl-insights__card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* The 840px work card grows into a 20px gap, so it lifts less. */
body.tbi-figma-page .hrf-work__card {
  --tbi-card-scale: 1.02;
}

/* hrf-hm__card is the one card on a white surface (#fff on a #fff section).
   A neon bloom reads as a blur there, so it gets a lifted shadow plus a
   purple rim, and a lighter sheen. */
body.tbi-figma-page .hrf-hm__card {
  --tbi-card-sheen: rgba(161, 0, 255, 0.14);
  --tbi-card-glow: 0 10px 28px 0 rgba(161, 0, 255, 0.22),
                   0 0 0 1px rgba(161, 0, 255, 0.28);
}

/* svcl-platforms__card sits at rgba(255,255,255,0.02) on a white section —
   effectively a hairline card, so it also takes the soft-shadow treatment. */
body.tbi-service-page .svcl-platforms__card {
  --tbi-card-sheen: rgba(161, 0, 255, 0.16);
  --tbi-card-glow: 0 10px 28px 0 rgba(161, 0, 255, 0.2),
                   0 0 0 1px rgba(161, 0, 255, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  body.tbi-figma-page .hrf-ai__card,
  body.tbi-figma-page .hrf-svc__card,
  body.tbi-figma-page .hrf-work__card,
  body.tbi-figma-page .hrf-hm__card,
  body.tbi-service-page .svcl-platforms__card,
  body.tbi-service-page .svcl-insights__card {
    transition: box-shadow 0.2s ease;
  }

  body.tbi-figma-page .hrf-ai__card:hover,
  body.tbi-figma-page .hrf-svc__card:hover,
  body.tbi-figma-page .hrf-work__card:hover,
  body.tbi-figma-page .hrf-hm__card:hover,
  body.tbi-service-page .svcl-platforms__card:hover,
  body.tbi-service-page .svcl-insights__card:hover {
    transform: none;
  }

  /* keep the glow as the hover affordance, drop the moving sheen */
  body.tbi-figma-page .hrf-ai__card::before,
  body.tbi-figma-page .hrf-svc__card::before,
  body.tbi-figma-page .hrf-work__card::before,
  body.tbi-figma-page .hrf-hm__card::before,
  body.tbi-service-page .svcl-platforms__card::before,
  body.tbi-service-page .svcl-insights__card::before {
    display: none;
  }
}

/* ---------------------------------------------------------------------
 * CARD HOVER, part 2 — the hairline-grid cells (added 2026-09-16)
 *
 * Same holographic sheen as above, applied to the other card pattern in
 * these families: a bordered grid cell carrying a title, a description and
 * a corner arrow.
 *
 *   svcl-catalog__card  "What we do" routing grid, 11-20 cells, 4 columns,
 *                       dark #0c0819 section, purple hairlines.
 *                       Service LANDING pages only (5 templates).
 *   hrf-other__link     cross-sell row, 4 cells, light #faf9fd section,
 *                       grey #e4e2e9 hairlines. All three families.
 *
 * **These two deliberately do NOT scale, unlike the six cards above.** The
 * grid lines here are drawn by the cells themselves — `.svcl-catalog__grid`
 * sets border-top/left and each card adds border-right/bottom;
 * `.hrf-other__row` sets border-top and each link adds border-left — and the
 * cells sit at a measured gap of exactly 0. Scaling one cell therefore moves
 * its own borders out of alignment with its neighbours' and visibly tears
 * the grid. The hover affordance is instead the sheen sweep, a background
 * tint and a brightened border, which leaves every border on its pixel.
 *
 * The corner arrow is `position: absolute` in both, so the content lift
 * below excludes it (turning it into `position: relative` would drop it out
 * of its top/right corner); it gets its own z-index instead. This is the
 * card that made a blanket `> *` rule unsafe.
 * --------------------------------------------------------------------- */

body.tbi-service-page .svcl-catalog__card,
body.tbi-figma-page .hrf-other__link {
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

body.tbi-service-page .svcl-catalog__card > *:not(.svcl-catalog__card-arrow),
body.tbi-figma-page .hrf-other__link > *:not(.hrf-other__link-arrow) {
  position: relative;
  z-index: 1;
}

body.tbi-service-page .svcl-catalog__card-arrow,
body.tbi-figma-page .hrf-other__link-arrow {
  z-index: 1;
}

body.tbi-service-page .svcl-catalog__card::before,
body.tbi-figma-page .hrf-other__link::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    var(--tbi-cell-sheen)
  );
  transform: rotate(-45deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s ease, opacity 0.45s ease;
}

body.tbi-service-page .svcl-catalog__card:hover::before,
body.tbi-figma-page .hrf-other__link:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* dark grid — purple hairlines on #0c0819 */
body.tbi-service-page .svcl-catalog__card {
  --tbi-cell-sheen: rgba(161, 0, 255, 0.26);
}

body.tbi-service-page .svcl-catalog__card:hover {
  background-color: rgba(112, 55, 255, 0.07);
  border-right-color: rgba(112, 55, 255, 0.42);
  border-bottom-color: rgba(112, 55, 255, 0.42);
}

/* light grid — grey hairlines on #faf9fd */
body.tbi-figma-page .hrf-other__link {
  --tbi-cell-sheen: rgba(161, 0, 255, 0.12);
}

body.tbi-figma-page .hrf-other__link:hover {
  background-color: rgba(161, 0, 255, 0.04);
  border-left-color: rgba(161, 0, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  body.tbi-service-page .svcl-catalog__card::before,
  body.tbi-figma-page .hrf-other__link::before {
    display: none;
  }
}

/* =====================================================================
 * BUTTON HOVER — matched to the header CTA (added 2026-09-16)
 *
 * Requested: give every button on the hire / service inner / service
 * landing pages the same hover effect as the header's CONTACT US button.
 *
 * The reference is `.site-header__cta` in css/header.css:
 *     transition: transform 0.25s ease, filter 0.25s ease;
 *     filter: drop-shadow(0 0 6px rgba(229, 175, 1, 0.64));   <- resting
 *   :hover, :focus-visible {
 *     transform: scale(1.05);
 *     filter: drop-shadow(0 0 10px rgba(229, 175, 1, 0.82));  <- hover
 *   }
 *
 * The complete button set in these three families, confirmed by grepping
 * all 48 templates AND by enumerating every <a>/<button> in the rendered
 * DOM (not just the classes that happen to be named "btn"):
 *   hrf-cta2__btn      48 pages   flat #f7e934
 *   hrf-ai__cta-btn    48 pages   flat #f7e934
 *   automate__btn      48 pages   flat #f7e934
 *   svcl-insights__all  landing    outline, 1.5px #171717 on white
 *
 * The three primary buttons are the same yellow family as the header CTA,
 * so they take the reference's glow values verbatim. **They already had
 * `transform: scale(1.05)` on hover** — what they were missing is the
 * glow, and `filter` in the transition list. The scale is restated here so
 * this block is self-contained rather than depending on a declaration ~900
 * lines earlier; the value is unchanged.
 *
 * svcl-insights__all is an outline button with dark #171717 ink on a white
 * section. A yellow drop-shadow on it would read as a stray smudge, so it
 * gets the same MECHANIC — scale 1.05, 0.25s ease, :focus-visible parity —
 * with a neutral lifted shadow in its own ink instead of the amber glow.
 *
 * NOTE ON ORDER: the `@media (prefers-reduced-motion: reduce)` block that
 * neutralises these buttons sits ~1100 lines above, so the `transition`
 * below would otherwise override it and reintroduce motion for users who
 * asked for none. The reduced-motion block is therefore repeated at the
 * end of this section, after these rules.
 * ===================================================================== */

body.tbi-figma-page .hrf-cta2__btn,
body.tbi-figma-page .hrf-ai__cta-btn,
body.tbi-figma-page .automate__btn {
  filter: drop-shadow(0 0 6px rgba(229, 175, 1, 0.64));
  transition: transform 0.25s ease, filter 0.25s ease;
}

body.tbi-figma-page .hrf-cta2__btn:hover,
body.tbi-figma-page .hrf-cta2__btn:focus-visible,
body.tbi-figma-page .hrf-ai__cta-btn:hover,
body.tbi-figma-page .hrf-ai__cta-btn:focus-visible,
body.tbi-figma-page .automate__btn:hover,
body.tbi-figma-page .automate__btn:focus-visible {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(229, 175, 1, 0.82));
}

body.tbi-service-page .svcl-insights__all {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.tbi-service-page .svcl-insights__all:hover,
body.tbi-service-page .svcl-insights__all:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 6px 18px 0 rgba(23, 23, 23, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  body.tbi-figma-page .hrf-cta2__btn,
  body.tbi-figma-page .hrf-ai__cta-btn,
  body.tbi-figma-page .automate__btn,
  body.tbi-service-page .svcl-insights__all {
    transition: none;
  }

  /* the glow is a static affordance and stays; only the motion goes */
  body.tbi-figma-page .hrf-cta2__btn:hover,
  body.tbi-figma-page .hrf-cta2__btn:focus-visible,
  body.tbi-figma-page .hrf-ai__cta-btn:hover,
  body.tbi-figma-page .hrf-ai__cta-btn:focus-visible,
  body.tbi-figma-page .automate__btn:hover,
  body.tbi-figma-page .automate__btn:focus-visible,
  body.tbi-service-page .svcl-insights__all:hover,
  body.tbi-service-page .svcl-insights__all:focus-visible {
    transform: none;
  }
}