/* ============================================================
   FEDERAL CREDIT LAB — brand overrides
   Modern "black/white" with one primary color (Mint) for impact
   plus Caution Orange as pop accent. Navy reserved for body/chrome.
   ============================================================ */

[data-tool="federal-credit-lab"] {
  --fcl-accent: var(--fcl-mint-500);
  --fcl-accent-pop: var(--fcl-caution);
}

/* ---------- Hero: navy backdrop + line-halftone photo treatment ---------- */
[data-tool="federal-credit-lab"] .coalition-hero {
  background: var(--fcl-navy);
}
[data-tool="federal-credit-lab"] .coalition-hero::before {
  border-color: rgba(185, 255, 203, 0.22);
}
[data-tool="federal-credit-lab"] .coalition-hero__eyebrow {
  color: var(--fcl-mint-500);
  font-weight: 700;
  letter-spacing: 0.18em;
}
[data-tool="federal-credit-lab"] .coalition-hero .breadcrumb [aria-current],
[data-tool="federal-credit-lab"] .coalition-hero .breadcrumb a:hover {
  color: var(--fcl-mint-500);
}

/* FCL photo treatment: navy duotone + diagonal line-halftone overlay.
   Approximates the brand book's halftone look using CSS only. */
[data-tool="federal-credit-lab"] .photo-brand--hero img {
  filter: grayscale(1) contrast(1.2) brightness(0.55);
}
[data-tool="federal-credit-lab"] .photo-brand--hero::before {
  background: linear-gradient(
    180deg,
    rgba(15, 32, 43, 0.92) 0%,
    rgba(15, 32, 43, 0.80) 40%,
    rgba(15, 32, 43, 0.72) 70%,
    rgba(15, 32, 43, 0.88) 100%
  );
}
/* Line halftone: tight navy stripes layered over the darkened photo,
   concentrated where text sits for extra legibility. */
[data-tool="federal-credit-lab"] .photo-brand--hero::after {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(15, 32, 43, 0.55) 0,
    rgba(15, 32, 43, 0.55) 1px,
    transparent 1px,
    transparent 4px
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 75%
  );
          mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 75%
  );
}

/* ---------- Stat band: navy numbers and navy accent rule on mint band ---------- */
[data-tool="federal-credit-lab"] .coalition-stats {
  background: var(--fcl-mint-500);
}
[data-tool="federal-credit-lab"] .coalition-stat {
  border-left-color: var(--fcl-navy);
}
[data-tool="federal-credit-lab"] .coalition-stat__number {
  color: var(--fcl-navy);
}
[data-tool="federal-credit-lab"] .coalition-stat__label {
  color: var(--fcl-navy);
}

/* ---------- Eyebrow accent color: FCL caution orange across body sections ---------- */
[data-tool="federal-credit-lab"] .coalition-question .eyebrow,
[data-tool="federal-credit-lab"] .fcl-uses .eyebrow,
[data-tool="federal-credit-lab"] .about-approach__header .eyebrow {
  color: var(--fcl-caution);
}

/* ---------- Action buttons ---------- */
[data-tool="federal-credit-lab"] .btn--inverse {
  background: var(--fcl-mint-500);
  color: var(--fcl-navy);
  border-color: var(--fcl-mint-500);
}
[data-tool="federal-credit-lab"] .btn--inverse:hover {
  background: var(--fcl-mint-400);
  border-color: var(--fcl-mint-400);
  color: var(--fcl-navy);
}
[data-tool="federal-credit-lab"] .btn--primary {
  background: var(--fcl-navy);
  border-color: var(--fcl-navy);
  color: var(--ls-white);
}
[data-tool="federal-credit-lab"] .btn--primary:hover {
  background: var(--fcl-caution);
  border-color: var(--fcl-caution);
  color: var(--fcl-navy);
}

/* ---------- FCL logo block (stacked "Federal / Credit / Lab") ---------- */
.fcl-logo {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fcl-navy);
  letter-spacing: -0.01em;
}
.fcl-logo__line {
  display: inline-block;
  position: relative;
  padding-block: 6px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  margin-bottom: -1.5px; /* overlap borders between stacked lines */
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}
.fcl-logo--inverse { color: var(--ls-white); }
.fcl-logo--mint { color: var(--fcl-navy); }
.fcl-logo--sm .fcl-logo__line { font-size: 1.1rem; padding-block: 3px; }
.fcl-logo--lg .fcl-logo__line { font-size: clamp(2.2rem, 5vw, 3.5rem); }

/* ---------- Hero wordmark lockup ---------- */
.fcl-hero-mark {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.fcl-hero-mark .fcl-logo { color: var(--fcl-mint-500); }

/* ---------- Use-case grid (key activities) ---------- */
.fcl-uses {
  padding-block: var(--section-y);
  background: var(--ls-white);
}
.fcl-uses__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .fcl-uses__grid { grid-template-columns: 1fr; }
}
.fcl-use {
  padding: var(--space-7);
  background: var(--fcl-mint-500);
  color: var(--fcl-navy);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.fcl-use--dark {
  background: var(--fcl-navy);
  color: var(--ls-white);
}
.fcl-use--light {
  background: var(--fcl-gray-3);
  color: var(--fcl-navy);
}
.fcl-use__num {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}
.fcl-use__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: var(--space-4);
}
.fcl-use__body {
  font-size: var(--fs-base);
  line-height: 1.55;
  opacity: 0.86;
}

/* ---------- Secondary photo strip ---------- */
.fcl-second-photo {
  background: var(--fcl-mint-500);
  padding-block: var(--space-9);
}
.fcl-second-photo__frame {
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}
.fcl-second-photo__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.9);
}
.fcl-second-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(15, 32, 43, 0.35) 0,
    rgba(15, 32, 43, 0.35) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}