:root {
  --cty-brandnavy: #131E29; /* SP brand navy */
  --cty-brandteal: #3f738d; /* header lines and pattern lines */
  --cty-brandgold: #b8773b; /* header lines and pattern lines */
  --cty-brandcoolblue: #f2f8fc; /* point section cards */
}

.dash-cards { margin:2rem 0 3rem 0; }

.dash-title { 
  width:100%;
  background-color:var(--cty-brandnavy); 
  color:white;
  font-family: 'alternate-gothic-atf', sans-serif; 
  font-weight: 500; 
  letter-spacing: 0.03em; 
  font-size: 30px; 
  line-height: 1.1; 
  padding:8px 20px 8px 20px; 
  margin:0;
}

.dash-card { 
  width:100%; 
  height:100%; 
  background-color:var(--cty-brandteal); 
  position:relative;
  border:20px solid var(--cty-brandteal);
}
.dash-card-icon { 
  position:absolute;
  top:0px;
  right:0px;
  color:var(--cty-brandnavy);
  font-size:16px;
  line-height:1;
}
.dash-card-top { 
  width:calc(100% - 30px);
}
.dash-card-bottom { 
  width:100%;
}

.dash-card-subhead {
  color:var(--cty-brandnavy);
  font-size:12px;
  line-height:1.3;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.100rem;
  margin-bottom:12px;
  text-wrap:balance;
}
.dash-card-headline {
  color:white;
  font-size:20px;
  line-height:1.3;
  font-weight:500;
  margin-bottom:8px;
  text-wrap:balance;
}
.dash-card-stat {
  color:var(--cty-brandnavy);
  font-size:50px;
  line-height:1.3;
  font-weight:900;
  margin-bottom:4px;
  text-wrap:balance;
}
.dash-card-detail {
  color:white;
  font-size:16px;
  line-height:1.3;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
  text-wrap:balance;
}
.dash-card-tip {
  font-weight:500;
  color:white;
  font-size:14px;
  line-height:1.3;
  text-wrap:balance;
}

.dash-style-1 {
  background-color:var(--cty-brandcoolblue);
  border-color:var(--cty-brandcoolblue);

  .dash-card-icon, .dash-card-subhead, .dash-card-stat {
    color:var(--cty-brandteal);
  }
  .dash-card-headline, .dash-card-detail, .dash-card-tip {
    color:var(--cty-brandnavy);
  }
}

.dash-style-3 {
  background-color:var(--cty-brandnavy);
  border-color:var(--cty-brandnavy);

  .dash-card-icon, .dash-card-subhead, .dash-card-stat {
    color:var(--cty-brandgold);
  }
  .dash-card-headline, .dash-card-detail, .dash-card-tip {
    color:white;
  }
  .dash-card-stat {
    color:var(--cty-brandteal);
  }
}