/* FRAME for Mobility sub-theme. Loaded only on the FRAME mini site.
   Part B section 5: Deep Navy, Steel Gray, Grid Blue Gray, Manrope headings.
   No ICS Cyber Blue in the page body (site header Donate excepted). */

@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.woff2") format("woff2");font-weight:400 800;font-display:swap}

.frame-page{
  --frame-navy:#0B1D33;
  --frame-steel:#5E6E7E;
  --frame-grid:#DFE9F4;
}
.frame-page main h1,.frame-page main h2,.frame-page main h3{
  font-family:"Manrope",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--frame-navy);
}
.frame-page main .kicker{color:var(--frame-navy)}
.frame-page main .kicker::before{background:var(--frame-navy)}
.frame-page main .lede{color:var(--frame-navy)}
.frame-page .card{border-color:var(--frame-grid);border-top-color:var(--frame-navy)}
.frame-page .card p{color:var(--frame-navy)}
.frame-page .stat-fig{color:var(--frame-navy)}
.frame-page .stat-source{color:var(--frame-steel)}
.frame-page .tile{background:var(--frame-grid)}
.frame-page .tile .t-label{color:var(--frame-steel)}
.frame-page .tile .t-value{color:var(--frame-navy)}
.frame-page .pill-endorse{background:var(--frame-grid);color:var(--frame-navy)}
.frame-page .pill-status .dot{background:var(--frame-navy)}
.frame-page .btn-frame{background:var(--frame-navy);color:#FFFFFF}
.frame-page .btn-frame:hover{background:var(--frame-steel);color:#FFFFFF}
.frame-page .btn-frame-secondary{background:transparent;color:var(--frame-navy);border-color:var(--frame-navy)}
.frame-page .btn-frame-secondary:hover{background:var(--frame-grid);color:var(--frame-navy)}
.frame-page .outbound-band{background:var(--frame-grid)}
.frame-page .frame-logo-hero{width:360px;max-width:100%}
.frame-page .frame-sub{font-family:"Manrope",sans-serif;font-weight:400;text-transform:none;letter-spacing:0;color:var(--frame-steel)}

/* Road grid motif: 12 x 12 box grid, one connected road of Deep Navy cells. */
.road-wrap{background:var(--white);border:1px solid var(--frame-grid);border-top:4px solid var(--frame-navy);border-radius:8px;padding:32px}
.road-grid{display:grid;grid-template-columns:repeat(12,26px);gap:10px;justify-content:center;margin:8px auto 28px}
.road-grid .cell{width:26px;height:26px;border-radius:2.6px;background:var(--frame-grid)}
.road-grid .cell.road{background:var(--frame-navy)}
.road-moves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.road-moves .rm-num{font-family:"Manrope",sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--frame-steel);text-transform:uppercase;margin:0 0 6px}
.road-moves h3{font-size:18px;margin-bottom:8px}
.road-moves p{font-size:15.5px;margin:0}

@media (max-width:599px){
  .frame-page .frame-logo-hero{width:280px}
  .road-grid{grid-template-columns:repeat(12,13px);gap:5px}
  .road-grid .cell{width:13px;height:13px;border-radius:1.3px}
  .road-moves{grid-template-columns:1fr}
  .road-wrap{padding:24px}
}