/* PM Portfolio - centered corporate shell, mid-2000s brochure grammar */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e8eaed;color:#1c1f23;
  font:16px/1.62 Arial,Helvetica,"Liberation Sans",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#12314f}
a:focus-visible,button:focus-visible{outline:2px solid #12314f;outline-offset:2px}
.tabbar a:focus-visible{outline-color:#eef2f7}
.skip{position:absolute;left:-9999px;top:0;background:#12314f;color:#fff;padding:10px 16px;z-index:9}
.skip:focus{left:0}

.shell{max-width:1020px;margin:0 auto;background:#fff;padding:0 24px}
.shell-wide{max-width:1020px;margin:0 auto;background:#fff}

/* 1. corporate identity row */
.identity{height:95px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.identity .mark img{width:300px}
.identity .util{text-align:right}
.identity .util .div-line{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#12314f}
.identity .util .desc{font-size:12px;color:#4a5158;margin-top:4px;max-width:300px}

/* 2. section tab bar */
.tabbar{background:#12314f;background-image:linear-gradient(to right,#12314f,#1b4972)}
.tabbar ul{margin:0 auto;padding:0;list-style:none;display:flex;flex-wrap:wrap;max-width:1020px}
.tabbar li{border-right:1px solid #b9c0c7}
.tabbar li:first-child{border-left:1px solid #b9c0c7}
.tabbar a{display:block;height:34px;line-height:34px;padding:0 16px;color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.tabbar a:hover{background:#1b4972}
.tabbar a[aria-current="page"]{background:#eef2f7;color:#12314f}

/* 3. banner */
.banner{position:relative}
.banner img{width:100%;height:220px;object-fit:cover}
.banner .capbox{position:absolute;left:24px;bottom:18px;width:420px;background:#fff;
  border:1px solid #b9c0c7;padding:14px 16px}
.banner .capbox h1{margin:0;font:400 20px/1.4 Georgia,"Times New Roman",serif;color:#12314f}
.strip img{width:100%;height:110px;object-fit:cover}

/* layout split */
.split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;padding:32px 0}
.narrative h2{font:400 22px/1.3 Georgia,"Times New Roman",serif;color:#12314f;margin:0 0 12px}
.narrative p{margin:0 0 14px;max-width:68ch}
h1.title{font:400 38px/1.2 Georgia,"Times New Roman",serif;color:#12314f;margin:0 0 4px}

/* fact rail */
.factrail{background:#eef2f7;border:1px solid #b9c0c7;align-self:start}
.factrail-title{background:#12314f;color:#fff;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 12px}
.factrail dl{margin:0;padding:12px}
.factrail dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#4a5158;margin-top:10px}
.factrail dt:first-child{margin-top:0}
.factrail dd{margin:2px 0 0;font-size:15px}
.factrail ul{margin:0;padding:12px 12px 12px 28px;font-size:15px}
.factrail li{margin-bottom:6px}

/* sections */
.band{padding:28px 0;border-top:1px solid #b9c0c7}
.band > h2{font:400 22px/1.3 Georgia,"Times New Roman",serif;color:#12314f;margin:0 0 16px}

/* capabilities: sectioned title/excerpt rows */
.caps{margin:0;padding:0;list-style:none;border-top:1px solid #b9c0c7}
.caps li{border-bottom:1px solid #b9c0c7;padding:12px 0}
.caps .cap-t{font-size:16px;font-weight:700;color:#12314f}
.caps .cap-x{font-size:15px;color:#4a5158;margin-top:3px;max-width:68ch}

/* represented brand plate */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plate{background:#fff;border:1px solid #b9c0c7;border-left:6px solid #12314f;
  display:flex;flex-direction:column}
.plate .plate-body{flex:1 0 auto}
.plate .plate-title{border-bottom:1px solid #b9c0c7;padding:8px 12px}
.plate .plate-title img{width:114px}
.plate .plate-photo img{width:100%;height:250px;object-fit:cover}
.plate .plate-body{padding:12px}
.plate .plate-body p{margin:0 0 10px;font-size:15px;color:#1c1f23}
.plate .plate-rule{border-top:1px solid #b9c0c7;padding:7px 12px;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:#4a5158;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.plate-wide{border-left:6px solid #12314f;margin-bottom:20px}
.plate-wide .plate-photo img{height:300px}

/* resource row */
.reso{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.reso h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#4a5158;
  margin:0 0 8px;border-bottom:1px solid #b9c0c7;padding-bottom:6px}
.reso ul{margin:0;padding:0;list-style:none}
.reso li{border-bottom:1px solid #e3e7eb;padding:8px 0;display:flex;justify-content:space-between;gap:16px}
.reso li .meta{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#4a5158;white-space:nowrap}

/* contact utility band */
.utilband{background:#f4f5f7;border:1px solid #b9c0c7;padding:18px 20px;margin:0 0 32px}
.utilband h2{font:400 20px/1.3 Georgia,"Times New Roman",serif;color:#12314f;margin:0 0 8px}
.utilband p{margin:0;max-width:74ch;font-size:15px}

/* breadcrumb */
.crumbs{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#4a5158;padding:16px 0 0}
.crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:#b9c0c7}

/* related */
.related{border-top:1px solid #b9c0c7;padding-top:16px;margin-top:8px}
.related h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#4a5158;margin:0 0 8px}
.related ul{margin:0;padding:0 0 0 18px}
.figure{margin:0 0 18px}
.figure figcaption{font-size:12px;color:#4a5158;margin-top:6px}

/* footer */
.sitefoot{background:#12314f;color:#dfe5ec;margin-top:8px}
.sitefoot .cols{max-width:1020px;margin:0 auto;padding:28px 24px 20px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px}
.footcol h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  margin:0 0 10px;border-bottom:1px solid #35557a;padding-bottom:6px}
.footcol ul{margin:0;padding:0;list-style:none}
.footcol li{margin-bottom:6px;font-size:14px}
.footcol a{color:#dfe5ec;text-decoration:none}
.footcol a:hover{text-decoration:underline}
.footcol p{margin:0;font-size:14px}
.legal{max-width:1020px;margin:0 auto;padding:0 24px 24px;font-size:12px;color:#9fb0c4}

@media (max-width:900px){
  body{background:#fff}
  .shell,.shell-wide{max-width:none;padding:0 16px}
  .identity{height:auto;display:block;padding:14px 0}
  .identity .mark img{width:210px}
  .identity .util{text-align:left;margin-top:8px}
  .identity .util .desc{max-width:none}
  .tabbar ul{max-width:none;padding:0 16px}
  .tabbar li{flex:1 1 45%;border:0;margin:0 1px 1px 0}
  .tabbar a{height:44px;line-height:44px;text-align:center}
  .banner img{height:160px}
  .banner .capbox{position:static;width:auto;border-top:0;padding:12px 16px}
  .split{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .reso{grid-template-columns:1fr;gap:20px}
  .sitefoot .cols{grid-template-columns:1fr;padding:22px 16px 14px}
  .legal{padding:0 16px 20px}
}
@media (max-width:620px){
  .plates{grid-template-columns:1fr}
  .plate .plate-photo img{height:240px}
  .plate-wide .plate-photo img{height:240px}
  .strip img{height:90px}
}