proj - Projecting ArcGIS Tiled Service for Esri-Leaflet?

I'm following this example from the esri-leaflet docs.

I have an ArcGIS Tiled MapService in ESRI:102696. So I'm trying to use Proj4Leaflet to project the service and use it in my application.

I found some proj4defs here and here. They do differ slightly, but neither seems to work.

This is the Map Service I am trying to use.

I put together a JSBIN example with the code below.

  // The two proj4defs I found
  //var crs = new L.Proj.CRS('ESRI:102696', '+proj=tmerc +lat_0=35.83333333333334 +lon_0=-90.5 +k=0.999933 +x_0=250000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192  no_defs', {
  var crs = new L.Proj.CRS('ESRI:102696', '+proj=tmerc +lat_0=35.83333333333334 +lon_0=-90.5 +k=0.9999333333333333 +x_0=250000 +y_0=0 +datum=NAD83 +units=us-ft +no_defs', {
    transformation: new L.Transformation(1, 17627100, -1, 19798600),
    resolutions: [
      303.8194444444444,

      217.01388888888889,
      86.80555555555556,
      65.10416666666666,
      43.40277777777778,
      20.833333333333332,
      8.680555555555555,
      4.166666666666666,
      2.083333333333333,
      1.0416666666666665,
      0.5208333333333333

    ]
  });
  // pass crs into map constructor
  var map = new L.Map('map', {
    crs: crs
  }).setView([38.5432816667, -90.2688116667], 5);  L.esri.tiledMapLayer('http://maps.stlouisco.com/ArcGIS/rest/services/Maps/PublicBase/MapServer', {
    maxZoom: 10,
    minZoom: 0,
    continuousWorld: true
  }).addTo(map);

I'm not sure if the transformation is off or what.