.its-blk-head--center { text-align: center; }
.its-blk-head { margin-bottom: 40px; }
.its-fcards__title { font-family: var(--its-font-heading); font-weight: 600; text-transform: none; color: var(--its-black); font-size: clamp(30px, 3.1vw, 44px); line-height: 1.35; letter-spacing: -0.045em; margin: 0 0 16px; }
.its-fcards__accent { color: var(--its-navy); }

.its-fcards { display: grid; gap: 0; background: var(--its-white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(219,224,234,0.68); }
/* single card: keep the 2-up card width (566px of the 1132px row) and centre the panel,
   instead of leaving an empty second track inside the shared white panel */
.its-fcards--1 { grid-template-columns: minmax(0, 1fr); max-width: 566px; margin-left: auto; margin-right: auto; }
.its-fcards--2 { grid-template-columns: repeat(2, 1fr); }
.its-fcards--3 { grid-template-columns: repeat(3, 1fr); }
.its-fcards--4 { grid-template-columns: repeat(4, 1fr); }

.its-fcard {
  display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start;
  background: var(--its-white); border-right: 1px solid var(--its-bg);
  padding: 24px;
}
@supports not (grid-template-rows: subgrid) {
  .its-fcard { display: flex; flex-direction: column; }
  .its-fcard .its-fcard__link { margin-top: auto; }
}
.its-fcard:last-child { border-right: 0; }
.its-fcard__img { height: 147px; overflow: hidden; margin: 0 0 16px; border-radius: 16px; }
.its-fcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* icon media mode — glass chip 112x110 (Chicago services comp 249:53) */
.its-fcard__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 112px; height: 110px; margin: 0 0 24px;
  padding: 12.813px; border-radius: 96.094px;
  /* H1 fix (validation 2026-08): the comp's literal 5%->1% white gradient renders as
     nothing over a flat white card — Figma's background-blur adds haze a browser does
     not. Comp samples #E9ECF2 / #E8EAF0 / #E6E9F0, so the fill is stated explicitly at
     the comp's own 174.108deg angle. Shadow + backdrop blur below are unchanged. */
  background-image: linear-gradient(174.108deg, #E9ECF2, #E6E9F0);
  border: 1.602px solid rgba(255,255,255,0.01);
  -webkit-backdrop-filter: blur(8.946px); backdrop-filter: blur(8.946px);
  box-shadow: 0 4px 6px 0 rgba(219,224,234,0.68);
}
.its-fcard__chip img { width: 86px; height: 84px; border-radius: 8px; object-fit: cover; }

.its-fcard__title { font-family: var(--its-font-heading); font-weight: 500; text-transform: none; color: var(--its-black); font-size: 20px; line-height: 1.4; letter-spacing: -0.05em; margin: 0 0 16px; }
.its-fcard__text { color: var(--its-grey); font-size: var(--its-body-sm); line-height: 1.42; margin: 0; }
/* two-paragraph card body, comp gap 8 (proof cards 252:52) */
.its-fcard__texts { display: flex; flex-direction: column; gap: 8px; }
.its-fcard__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 24px 0 0; padding: 16px 8px 8px; border-top: 1px solid var(--its-bg); font-family: var(--its-font-body); font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--its-orange); }
.its-fcard__link span { font-size: 16px; }
.its-fcard__link:hover { filter: brightness(0.92); }

.its-fcards__footer { text-align: center; margin-top: 40px; }

/* Expandable extra cards (e.g. Services "Show all services") */
.its-fcards--extras { grid-template-columns: repeat(5, 1fr); margin-top: 40px; }
.its-fcards--extras[hidden] { display: none; }
.its-fcard__list { margin-top: 24px; padding-bottom: 16px; }
.its-fcard__list-title { color: var(--its-black); font-size: 16px; line-height: 1.4; margin: 0 0 16px; }
.its-fcard__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.its-fcard__list li { position: relative; padding-left: 16px; color: var(--its-grey); font-size: 12px; line-height: 1.25; }
.its-fcard__list li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--its-orange); filter: blur(1.75px); }

/* main-card lists appear only while the extra cards are expanded */
.its-fcard__list--xonly { display: none; }
.its-fcards--open .its-fcard__list--xonly { display: block; }

/* extras: aligned rows — titles, descriptions, lists, and CTAs each share one line across cards */
.its-fcard--x { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; padding: 16px; }
.its-fcard--x .its-fcard__title { font-size: 18px; line-height: 1.3; margin: 0 0 12px; }
.its-fcard--x .its-fcard__list { margin-top: 16px; }
@supports not (grid-template-rows: subgrid) {
  .its-fcard--x { display: flex; flex-direction: column; }
  .its-fcard--x .its-fcard__link { margin-top: auto; }
}

/* empty zones collapse — these resets MUST come after .its-fcard__link and
   .its-fcard__list (equal specificity, so source order decides; the earlier
   placement meant a card with no link still drew a hairline + 24px gap) */
.its-fcard__list--empty { padding: 0; margin: 0; }
.its-fcard__link--empty { border-top: 0; padding: 0; margin: 0; min-height: 0; }

@media (max-width: 1199px) { .its-fcards--extras { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .its-fcards--4, .its-fcards--3, .its-fcards--extras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .its-fcards { grid-template-columns: 1fr !important; } }

/* Optional small label above a card title (additive, Aug 2026, Contact family).
   Renders only when the page supplies `card_label`, so every existing Feature Cards
   instance stays byte-identical. Source shape: the live /it-services-company/contact
   router cards carry a `p.label1` above their h3 ("Current Clients" / "New Business"). */
.its-fcard__label {
  display: block;
  font-family: var(--its-font-body);
  font-weight: 600;
  font-size: var(--its-body-xs);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--its-orange);
  margin: 0 0 6px;
}

/* Optional small icon before the section heading. Kept deliberately small (28px) so it
   reads as a marker next to the title, not a card-sized graphic. */
.its-fcards__title--icon { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.its-fcards__hicon { width: 28px; height: 28px; object-fit: contain; flex: none; }
@media (max-width: 599px) { .its-fcards__hicon { width: 24px; height: 24px; } }