/* FCN Media — builds on the shared FCN site.css.
   Same palette and type family; the tweak is a dark, work-led front and a teal action color. */

.brand__word {
  font: 600 14px/1 var(--display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Accent button: teal with ink text (used on dark grounds) */
.btn--accent { background: var(--teal); color: var(--ink); }
.btn--accent:hover { background: #5FD0C3; color: var(--ink); }

/* Dark header over the dark hero */
.site-header--dark {
  background: rgba(11, 32, 39, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header--dark .brand,
.site-header--dark .brand:hover,
.site-header--dark .nav__links a { color: #fff; }
.site-header--dark .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-header--dark .nav-toggle__bars { background: #fff; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }
@media (max-width: 960px) {
  .site-header--dark .site-nav { background: var(--ink); border-bottom-color: var(--line-dark); }
  .site-header--dark .nav__links > li { border-bottom-color: var(--line-dark); }
  .site-header--dark .nav__links a:hover { background: none; }
}

/* Hero */
.m-hero {
  padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px);
  color: var(--on-dark);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(44, 179, 165, 0.22) 0%, rgba(44, 179, 165, 0) 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(44, 179, 165, 0.12) 0%, rgba(44, 179, 165, 0) 60%),
    var(--ink);
}
.m-hero .display { color: #fff; font-size: clamp(42px, 6.2vw, 84px); }
.m-hero .lede { color: var(--on-dark-soft); }
.m-hero .link-arrow { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.m-hero .link-arrow:hover { color: var(--teal); border-color: var(--teal); }
.m-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-top: 36px; }
.m-hero__row .actions { margin-top: 0; justify-content: flex-end; }

.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(48px, 6vw, 72px);
  aspect-ratio: 1240 / 520;
}
.mosaic__item { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--ink-soft); }
.mosaic__item--lead { grid-row: 1 / span 2; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mosaic__item:hover img { transform: scale(1.03); }
.mosaic__item figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 7px 11px;
  font: 600 12.5px/1 var(--text);
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(11, 32, 39, 0.72);
  border-radius: 999px;
}

/* Client line */
.m-clients { padding-block: 40px; background: var(--ink-soft); color: var(--on-dark); }
.m-clients__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; align-items: center; }
.m-clients__title { margin: 0; font: 500 15px/1.5 var(--text); color: var(--on-dark-soft); }
.m-clients__list { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.m-clients__list li { font: 600 19px/1.2 var(--display); letter-spacing: -0.01em; color: #fff; }

/* Three pillars */
.pillars--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Work grid */
.work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.work__item { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.work__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 40px -26px rgba(11, 32, 39, 0.5); }
.work__item figcaption { display: flex; flex-direction: column; gap: 4px; }
.work__client { font: 600 12.5px/1.2 var(--text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-ink); }
.work__title { font: 600 21px/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.work__desc { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }

/* Services */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.service { padding-block: 24px 30px; border-top: 2px solid var(--teal); }
.service h3 { margin: 0 0 8px; font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; }
.service p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--slate); }

/* Agency Launch steps (a real sequence) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 58px; counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font: 600 14px/1 var(--display);
  color: var(--ink);
  background: var(--teal);
  border-radius: 50%;
}
.steps li::after { content: ""; position: absolute; left: 48px; right: -24px; top: 19px; height: 2px; background: var(--line-dark); }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 0 0 8px; font: 600 20px/1.25 var(--display); color: #fff; }
.steps p { margin: 0; color: var(--on-dark-soft); }

/* Why */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.why article { padding-top: 26px; border-top: 2px solid var(--teal); }
.why h3 { margin: 0 0 10px; font: 600 24px/1.2 var(--display); letter-spacing: -0.015em; }
.why p { margin: 0; color: var(--slate); }

.footer__grid--media { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }

/* Responsive */
@media (max-width: 1080px) {
  .work, .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps li:nth-child(2)::after { display: none; }
  .footer__grid--media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .m-hero__row, .m-clients__inner { grid-template-columns: minmax(0, 1fr); }
  .m-hero__row .actions { justify-content: flex-start; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; }
  .mosaic__item { aspect-ratio: 4 / 3; }
  .mosaic__item--lead { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .mosaic__item:nth-child(5) { display: none; }
  .pillars--three, .why { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .work, .services, .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li::after { display: none; }
  .footer__grid--media { grid-template-columns: minmax(0, 1fr); }
}

/* Financial client logos on the dark band */
.m-clients__logos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 18px 48px; align-items: center; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.m-clients__label { margin: 0; font: 600 13px/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.logos--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.m-clients .logos li { min-height: 0; }
.m-clients .logo { background: #fff; opacity: 0.92; }
@media (max-width: 900px) { .m-clients__logos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .logos--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }