[class*=grid-] {
    clear: both;
    display: grid;
    gap: var(--gap, 1vw);
    margin-bottom: var(--g-m-b, 1vw);
    grid-template-columns: var(--col);
}
[class*=grid-] > li {
    list-style: none;
}
ul[class*=grid-] {
    margin-left: 0;
}
.gap-0 {
    --gap: 0;
}
.gap-2 {
    --gap: 2vw;
}
.gap-3 {
    --gap: 3vw;
}
.gap-4 {
    --gap: 4vw;
}
.grid-2 {
    --col: repeat(2, 1fr);
}
.grid-3 {
    --col: repeat(3, 1fr);
}
.grid-4 {
    --col: repeat(4, 1fr);
}
.grid-5 {
    --col: repeat(5, 1fr);
}
.grid-6 {
    --col: repeat(6, 1fr);
}
.grid-1-2 {
    --col: 1fr 2fr;
}
.grid-2-1 {
    --col: 2fr 1fr;
}
.grid-1-3 {
    --col: 1fr 3fr;
}
.grid-3-1 {
    --col: 3fr 1fr;
}
.phone-show, .pad-show, .hide {
    display: none;
}
@media (max-width: 769px) {
    [class*=grid-] {
        display: block;
    }
    [class*=grid-] > * {
        margin-bottom: 1rem !important;
        display: block;
    }
    [class*=phone-grid], [class*=phone-grid].phone-show {
        display: grid !important;
        --gap: 3vw;
        grid-template-columns: var(--col, --phone-col);
    }
    .phone-grid2 {
        --col: repeat(2, 1fr) !important;
    }
    .phone-scroll {
        overflow: scroll;
    }
    .phone-scroll > [class*=grid-] {
        width: 240vw;
        display: grid !important
    }
    .phone-hide {
        display: none !important;
    }
    .phone-show {
        display: block !important;
    }
    .phone-revers {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .phone-revers > *:last-child  {
        order: -1;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    [class*=pad-grid], [class*=pad-grid].pad-show  {
        display: grid !important;
        grid-template-columns: var(--col, --pad-col);
    }
    .pad-grid2 {
        --col: repeat(2, 1fr);
    }
    .pad-grid3 {
        --col: repeat(3, 1fr);
    }
    .pad-hide {
        display: none !important;
    }
    .pad-show {
        display: block !important;
    }
}
@media  (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    [class*=pad-port-grid], [class*=pad-port-grid].pad-show  {
        display: grid !important;
        grid-template-columns: var( --col, --pad-port-col);
    }
    .pad-port-grid2 {
        --col: repeat(2, 1fr);
    }
}

.box- {
    margin-top: 1rem;
    text-align: center;
}
.box- [class*=grid-]> div, .box- [class*=grid-]> li {
    border-color: #C8D5E1;
    box-shadow: var(--shadow-md);
}


.site-footer ul {
    list-style: none;
    margin-left: -38px;
}
.timeline {
    margin-bottom: -18px;
}
.contour-grid article:last-child {
    grid-column: auto;
}
.black {
 color: #000 !important;
}

.collaboration .card {
 padding:30px
}

.collaboration h3 {
 font-family: var(--serif);
    font-size: 1.7rem;
    color: var(--navy);
    font-weight: 500;
    margin-top: 0;
}
.collaboration p{
     color: var(--steel);
    font-size: .8rem;
}

.demarcation-of-powers h3 {
 font-family: var(--serif);
    font-size: 1.55rem;
    color: var(--navy);
    font-weight: 500;
    margin-top: 0;
}
.demarcation-of-powers p {
     color: var(--steel);
    font-size: .8rem;
}
.demarcation-of-powers .card {
     padding: 28px;
}
.area-icon img {
    width: 50%;
    margin: auto;
}

ul.content-grid, ul.demarcation-of-powers, ul.infrastructure-grid, ul.audience-grid, ul.scenario-grid, ul.decree-grid, ul.question-grid, ul.landscape-chain, ul.contour-grid {
    margin-left:-37px;
}
ul.infrastructure-grid, ul.demarcation-of-powers, ul.workflow, ul.request-flow, ul.audience-grid, ul.technology-chain, ul.question-grid, ul.landscape-chain, ul.contour-grid {
    list-style: none;
}
 ul.technology-chain li:first-child {
  padding-left: 0
 }
.flex > *  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

}
footer.flex {
    display: flex;
    padding-top: 14px;
    font-size: .65rem;
}
.footer-col .main-nav {
    display: block;
}

.search-overlay.is-open {
    display: block;
}
.feature-grid article:first-child {
    background: var(--navy-deep);
    color: #fff;
    min-height: 420px;
}

.feature-grid article:first-child h3 {
    font-size: 2.4rem;
    color: #fff;
}

.feature-grid article:first-child p {
    color: rgba(255,255,255,.67);
    font-size: .87rem;
}

.feature-grid article:first-child .technology-output {
    background: rgba(255,255,255,.08);
    border-color: var(--gold);
}
.feature-grid article:first-child .technology-output strong {
    color: #fff;
}
.feature-grid article:first-child .technology-output small {
    color: rgba(255,255,255,.58);
}
.feature-grid article:first-child .card-action {
    color: white;
}
.feature-grid article:first-child .project-record-links {
    color: #fff;
}
.profile-layout hr {
     margin: 2rem 0;
border: none;
  border-bottom: 1px solid var(--line);
}
.profile-aside a, .profile-aside .index-data {
    font-size: .7rem;
    margin: 0 0 0;
}
.profile-aside .img-block {
 margin-bottom: 10px;
}
.profile-aside .fl-container {
    margin-bottom: 10px;
}
.profile-aside .index-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--steel);
}
.profile-layout ul, .profile-layout ol {
    color: var(--steel);
    font-size: .97rem;
   }
.profile-intro h3, .profile-section h3 {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--navy);
    margin: 0 0 24px;
    overflow-wrap: anywhere;
}
.avatar img {
 border-radius: 10px;
 max-width:70%;
}

.team-record .tag {
 text-align: left;
margin-bottom: 1rem;
}

/*-------------------- helper --------------------*/

.color-steel {
    color: var(--steel);
}
.center {
 text-align: center;
}
.center img {
 margin: auto;
}