.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); }
/* Real bug: the title itself picks up white on a navy/gradient section only by inheriting
   `color` from the section root, but this span sets its own explicit color, and an explicit
   rule always beats inheritance regardless of specificity: the accent silently rendered
   navy-on-navy, invisible, on every navy-background Feature Cards instance with a heading_accent.
   Confirmed already live and broken this way before this fix (not a regression risk to add). */
.its-section--navy .its-fcards__accent, .its-section--gradient .its-fcards__accent { color: var(--its-orange); }

/* ITS-205: the theme lifts .its-fcard 5px on hover (template_motion), but the cards sat
   flush against this panel's top edge and overflow:hidden clipped the lift, so nothing
   appeared to move. 8px of padding gives the lift somewhere to go. The panel and the
   cards are both white, so the inset is invisible at rest and the cards still read as one
   joined group; gap stays 0 so the dividers keep touching. */
.its-fcards { display: grid; gap: 0; padding: 8px; 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; } }