:root{
  --navy:#0F2743; --navy-dp:#0A1C31; --navy-m1:#112E4C;
  --teal:#13A396; --teal-dk:#0C7276;
  --gold:#AF9344; --gold-lt:#C9A961;
  --blue:#2E6DA3;
  --ink:#1F2C3A; --body:#444E5A; --muted:#5E6A77; --gold-dk:#8A722E;
  --line:#DDE1E6; --panel:#F6F7F8; --panel2:#EEF1F3; --pale:#B6C2CE;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
                     transition-duration:.01ms !important; scroll-behavior:auto !important}
}
body{
  margin:0; font-family:Calibri,"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  color:var(--body); background:#fff; line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-dk)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}

/* brand rail down the left edge */
.rail{position:fixed; top:0; left:0; bottom:0; width:14px; z-index:60;
      background:linear-gradient(to right,var(--teal) 0 10px,var(--gold) 10px 14px)}
@media(max-width:720px){.rail{width:8px;background:linear-gradient(to right,var(--teal) 0 6px,var(--gold) 6px 8px)}}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:50; background:rgba(15,39,67,.97); backdrop-filter:blur(6px)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:88px; gap:20px}
nav img{height:46px; width:auto}
@media(max-width:900px){nav .wrap{height:76px} nav img{height:38px}}
@media(max-width:520px){nav .wrap{height:66px} nav img{height:30px}}
.navlinks{display:flex; gap:30px; align-items:center}
.navlinks a{color:#C7D2DC; text-decoration:none; font-size:14.5px; letter-spacing:.3px}
.navlinks a:hover{color:#fff}
.navlinks a[aria-current="page"]{color:#fff; box-shadow:inset 0 -2px 0 var(--gold-lt)}

.navlinks a.cta{background:var(--gold); color:#14202E; padding:9px 17px; border-radius:5px; font-weight:700}
.navlinks a.cta:hover{background:var(--gold-lt); color:#14202E}
.navtoggle{display:none; background:none; border:1.5px solid #40566F; border-radius:5px;
            color:#C7D2DC; font-size:22px; line-height:1; padding:7px 12px; cursor:pointer}
.navtoggle:hover{border-color:#5C7490; color:#fff}
@media(max-width:860px){
  .navtoggle{display:block; order:3}
  nav .wrap{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px}
  .navlinks{order:4; width:100%; flex-direction:column; align-items:stretch; gap:0;
            max-height:0; overflow:hidden; transition:max-height .22s ease}
  nav.open .navlinks{max-height:420px; padding:10px 0 6px}
  .navlinks a{padding:13px 4px; border-bottom:1px solid #22405F; font-size:16px}
  .navlinks a.cta{margin-top:12px; text-align:center; border-bottom:none}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden;
      padding:104px 0 96px}
.hero .blob{position:absolute; border-radius:50%; pointer-events:none}
.b1{width:520px;height:520px;background:var(--navy-dp);top:-190px;left:-170px}
.b2{width:380px;height:380px;background:var(--navy-m1);top:-110px;left:-40px}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:center}
.eyebrow{color:var(--gold-lt); font-weight:700; font-size:13px; letter-spacing:2.4px; text-transform:uppercase; margin:0 0 22px}
.hero h1{font-size:56px; line-height:1.06; margin:0 0 24px; color:#fff; font-weight:700; letter-spacing:-.5px}
.hero p.lede{font-size:20px; color:var(--pale); margin:0 0 34px; max-width:33em; line-height:1.5}
.rule{height:4px; width:230px; background:var(--gold); margin-bottom:4px}
.rule2{height:4px; width:230px; background:var(--teal); margin-bottom:34px}
.btn{display:inline-block; background:var(--gold); color:#14202E; padding:15px 30px; border-radius:6px;
     text-decoration:none; font-weight:700; font-size:16.5px; transition:background .15s}
.btn:hover{background:var(--gold-lt)}
.btn.ghost{background:transparent; color:#fff; border:1.5px solid #40566F; margin-left:12px}
.btn.ghost:hover{background:#173250; border-color:#5C7490}
.hero-mark{opacity:.96; width:100%; max-width:300px; justify-self:end}
@media(max-width:900px){
  .hero{padding:68px 0 62px}
  .hero .wrap{grid-template-columns:1fr; gap:30px}
  .hero h1{font-size:38px}
  .hero p.lede{font-size:18px}
  .hero-mark{display:none}
  .btn.ghost{margin-left:0; margin-top:10px}
}

/* 34em capped this at 493px, which fits Calibri but not the Segoe UI, San Francisco
   and Arial fallbacks, so the last word dropped to a second line. 44em clears the
   widest of them and still sits inside the hero column. */
.hero-note{color:var(--pale); font-size:14.5px; margin:18px 0 0; max-width:44em;
           text-wrap:pretty}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:#14202E;
      padding:12px 20px; font-weight:700; text-decoration:none; border-radius:0 0 6px 0}
.skip:focus{left:14px}

.pagehead{background:var(--navy); color:#fff; padding:74px 0 66px}
.pagehead h1{font-size:44px; line-height:1.1; margin:0 0 20px; color:#fff; font-weight:700; letter-spacing:-.4px}
.pagehead .lede{font-size:19px; color:var(--pale); margin:0 0 30px; max-width:48em; line-height:1.5}
@media(max-width:900px){.pagehead{padding:52px 0 46px} .pagehead h1{font-size:31px} .pagehead .lede{font-size:17px}}

.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.crumbs{background:var(--navy-dp); padding:11px 0}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; font-size:13.5px}
.crumbs li{color:#8FA3B6}
.crumbs li+li:before{content:"\203A"; margin-right:9px; color:#5C7490}
.crumbs a{color:#C7D2DC; text-decoration:none}
.crumbs a:hover{color:#fff; text-decoration:underline}

/* ---------- generic section ---------- */
section{padding:88px 0}
section.alt{background:var(--panel)}
.sect-label{display:flex; align-items:center; gap:14px; margin:0 0 14px}
.sect-label span{width:30px;height:3px;background:var(--navy);display:block}
.sect-label b{color:var(--navy); font-size:13px; letter-spacing:1.9px; text-transform:uppercase; font-weight:700}
h2{font-size:36px; line-height:1.2; color:var(--ink); margin:0 0 18px; font-weight:700; letter-spacing:-.3px}
.sub{font-size:18.5px; max-width:56em; margin:0 0 46px}
@media(max-width:900px){section{padding:58px 0} h2{font-size:27px} .sub{font-size:17px; margin-bottom:32px}}

/* ---------- cards ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--line); border-radius:9px; padding:26px 26px 28px; border-left:4px solid var(--navy)}
.card.teal{border-left-color:var(--teal-dk)} .card.blue{border-left-color:var(--blue)} .card.gold{border-left-color:var(--gold)}
.card h3{margin:0 0 9px; font-size:19px; color:var(--ink); font-weight:700; line-height:1.3}
.card p{margin:0; font-size:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:9px;border-top:4px solid var(--teal-dk);
      padding:26px 18px; text-align:center}
.stat b{display:block; font-size:36px; color:var(--teal-dk); line-height:1.1; margin-bottom:8px; font-weight:700}
.stat.n b{color:var(--navy)} .stat.n{border-top-color:var(--navy)}
.stat.b b{color:var(--blue)} .stat.b{border-top-color:var(--blue)}
.stat.g b{color:var(--gold-dk)} .stat.g{border-top-color:var(--gold)}
.stat span{font-size:14.5px; line-height:1.4; display:block}

/* ---------- services ---------- */
.svc{background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden;
     display:flex; flex-direction:column}
.svc-h{background:var(--navy); color:#fff; padding:17px 22px 18px; font-size:19px;
       font-weight:700; line-height:1.28;
       min-height:105px; display:flex; flex-direction:column; justify-content:center}
.svc.teal .svc-h{background:var(--teal-dk)}
.svc.blue .svc-h{background:var(--blue)}
.svc.gold .svc-h{background:var(--gold); color:#20180A}
.svc-h em{display:block; font-style:normal; font-size:12px; letter-spacing:2.2px;
          color:#E2D6B4; margin-bottom:6px; font-weight:700}
.svc.gold .svc-h em{color:#4A3C13}
.svc-b{padding:22px 22px 24px; font-size:16px; flex:1; display:flex; flex-direction:column}
.svc-b p{margin:0 0 13px}
.svc-b .more{margin-top:auto; padding-top:10px; font-weight:700; font-size:15.5px;
             line-height:1.4; text-decoration:none; color:var(--teal-dk)}
.svc-b .more:hover{text-decoration:underline}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 16px}
.tags span{background:var(--panel2); color:var(--ink); border-radius:14px;
           padding:5px 12px; font-size:13px; line-height:1.3}

/* ---------- curriculum ---------- */
.mod{background:#fff; border:1px solid var(--line); border-radius:9px; overflow:visible}
.mod header{background:var(--navy); color:#fff; padding:14px 18px 15px; font-size:16px;
            font-weight:700; line-height:1.3}
.mod header h3{margin:0; font-size:16px; font-weight:700; line-height:1.3; color:inherit}
.mod.teal header{background:var(--teal-dk)} .mod.blue header{background:var(--blue)}
.mod.gold header{background:var(--gold); color:#20180A}
.mod header em{display:block; font-style:normal; color:#E2D6B4; letter-spacing:1.8px;
               font-size:11px; margin-bottom:5px}
.mod.gold header em{color:#4A3C13}
.mod header span{display:block; font-weight:400; font-size:13.5px; opacity:.88; margin-top:3px}
.mod-who{margin:0; padding:10px 18px 11px; font-size:13px; color:var(--muted); line-height:1.45;
           background:var(--panel); border-bottom:1px solid var(--line)}
  .mod-who b{display:inline-block; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase;
             font-weight:700; margin-right:8px; vertical-align:1px; color:var(--navy)}
  .mod.teal .mod-who b{color:var(--teal-dk)} .mod.blue .mod-who b{color:var(--blue)}
  .mod.gold .mod-who b{color:#8A722E}
.mod ol{margin:0; padding:10px 18px 18px; list-style:none}
.mod li{font-size:15.5px; color:var(--ink); padding:7px 26px 7px 36px; position:relative;
        line-height:1.4; cursor:pointer; border-radius:5px; transition:background .12s}
.mod li:after{content:"\203A"; position:absolute; right:10px; top:5px; color:var(--muted);
        font-size:17px; line-height:1.4; transition:transform .12s, color .12s}
.mod li:hover:after, .mod li:focus:after{color:var(--teal-dk); transform:translateX(3px)}
.mod .pop li:after{content:none}
.mod li:hover{background:var(--panel2)}
.mod li:focus{background:var(--panel2); outline:none}
.mod li:focus-visible{outline:3px solid var(--teal-dk); outline-offset:2px}
a:focus-visible, .btn:focus-visible, button:focus-visible{outline:3px solid var(--gold-lt); outline-offset:3px}
.mod li b{position:absolute; left:0; top:7px; font-size:12px; color:var(--muted); font-weight:700;
          background:var(--panel2); border-radius:3px; padding:2px 6px; min-width:24px; text-align:center}
.mod li:hover b, .mod li:focus b{background:#fff}

/* jump links across the five tracks */
.jump{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 34px; padding:0; list-style:none}
.jump li{margin:0}
.jump a{display:block; border:1px solid var(--line); background:#fff; border-radius:20px;
        padding:9px 17px; font-size:14px; color:var(--body); text-decoration:none;
        transition:border-color .12s, color .12s, background .12s}
.jump a:hover, .jump a:focus{border-color:var(--teal-dk); color:var(--teal-dk); background:var(--panel)}
.jump a b{color:var(--navy); font-weight:700; margin-right:7px; font-size:11.5px;
          letter-spacing:1.2px; vertical-align:1px}
.jump a:hover b, .jump a:focus b{color:var(--teal-dk)}
.mod{scroll-margin-top:96px}
@media(max-width:900px){.jump{margin-bottom:26px} .jump a{padding:10px 15px} .mod{scroll-margin-top:88px}}

/* back to top, revealed once the reader is well down the page */
.totop{position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:7px;
       background:var(--navy); color:#fff; border:1px solid #35506D; border-radius:24px;
       padding:11px 18px; font-size:14px; font-weight:700; text-decoration:none;
       box-shadow:0 6px 20px rgba(15,39,67,.28);
       opacity:0; visibility:hidden; transform:translateY(10px);
       transition:opacity .18s, transform .18s, visibility .18s, background .12s}
.totop span{font-size:16px; line-height:1}
.totop.show{opacity:1; visibility:visible; transform:translateY(0)}
.totop:hover, .totop:focus{background:var(--teal-dk); border-color:var(--teal-dk); color:#fff}
@media(max-width:900px){.totop{right:14px; bottom:14px; padding:12px 17px}}
@media print{.totop{display:none}}

/* hover detail card */
.pop{position:absolute; left:12px; top:100%; z-index:40; width:390px; max-width:calc(100vw - 60px);
     background:#fff; border:1px solid var(--line); border-radius:9px;
     box-shadow:0 14px 38px rgba(15,39,67,.20); padding:18px 20px 19px;
     opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .14s, transform .14s;
     pointer-events:none; border-top:4px solid var(--navy)}
.mod.teal .pop{border-top-color:var(--teal-dk)} .mod.blue .pop{border-top-color:var(--blue)}
.mod.gold .pop{border-top-color:var(--gold)}
.mod li:hover .pop, .mod li:focus .pop{opacity:1; visibility:visible; transform:translateY(0)}
.mod li:nth-last-child(-n+2) .pop{top:auto; bottom:100%; transform:translateY(6px)}
.mod li:nth-last-child(-n+2):hover .pop, .mod li:nth-last-child(-n+2):focus .pop{transform:translateY(0)}
.grid.g2 > .mod:nth-child(even) .pop{left:auto; right:12px}
.pop-tag{font-weight:700; color:var(--ink); font-size:15px; line-height:1.35; margin-bottom:8px}
.pop p{margin:0 0 12px; font-size:13.8px; line-height:1.55; color:var(--body)}
.pop-l{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
       color:var(--teal-dk); margin-bottom:6px}
.pop ul{margin:0 0 11px; padding-left:16px}
.pop li{font-size:13.5px; padding:2px 0; position:static; cursor:default; color:var(--ink);
        list-style:disc; line-height:1.45}
.pop li:hover{background:none}
.pop-fw{font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:9px}
@media(max-width:900px){
  .pop{position:static; width:auto; max-width:none; box-shadow:none; opacity:1; visibility:visible;
       transform:none; margin:9px 0 4px; padding:14px 16px; background:var(--panel)}
  .mod li:nth-last-child(-n+2) .pop{bottom:auto}
  .mod li{padding-bottom:2px}
  /* the chevron promises an interaction, so only show it where tapping does something */
  .mod li:after{display:none}

  /* with scripting, module detail collapses so the page stays scannable on a phone */
  .js .mod > ol > li{padding-bottom:7px}
  .js .mod > ol > li > .pop{display:none}
  .js .mod > ol > li[aria-expanded="true"] > .pop{display:block}
  .js .mod > ol > li[aria-expanded="true"]{background:var(--panel2)}
  .js .mod > ol > li:after{display:block; transition:transform .15s}
  .js .mod > ol > li[aria-expanded="true"]:after{transform:rotate(90deg); color:var(--teal-dk)}
}

/* what a leader walks away with */
.gains{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 34px; margin-top:28px}
.gains .gn{display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start}
.gains .gn > b{display:flex; align-items:center; justify-content:center; width:30px; height:26px;
               border-radius:4px; background:var(--navy); color:#fff; font-size:11.5px; font-weight:700}
.gains .gn:nth-child(5n+1) > b{background:var(--teal-dk)} .gains .gn:nth-child(5n+2) > b{background:var(--blue)}
.gains .gn:nth-child(5n+4) > b{background:var(--gold)}
.gains h3, .gains h4{margin:2px 0 5px; font-size:16.5px; color:var(--ink); font-weight:700; line-height:1.32}
.gains p{margin:0; font-size:14.5px; color:var(--body); line-height:1.55}
@media(max-width:900px){.gains{grid-template-columns:1fr; gap:22px}}

/* three ways to engage + what the org gets */
.eng{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px}
.eng .e{background:#fff; border:1px solid var(--line); border-radius:9px; padding:24px 24px 22px;
        border-top:4px solid var(--navy); display:flex; flex-direction:column}
.eng .e.t1{border-top-color:var(--teal-dk)} .eng .e.t2{border-top-color:var(--blue)}
.eng .e.t3{border-top-color:var(--gold)}
.eng em{font-style:normal; font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
        font-weight:700; color:var(--muted); display:block; margin-bottom:8px}
.eng h3, .eng h4{margin:0 0 9px; font-size:19px; color:var(--ink); font-weight:700; line-height:1.3}
.eng p{margin:0 0 15px; font-size:15px; color:var(--body); line-height:1.55}
.eng ul{list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--line)}
.eng ul li{font-size:13.5px; color:var(--muted); line-height:1.45; padding:3px 0 3px 15px; position:relative}
.eng ul li:before{content:""; position:absolute; left:0; top:10px; width:5px; height:5px;
                  border-radius:50%; background:var(--gold)}
.e-cta{margin:14px 0 0}
.e-cta a{font-weight:700; font-size:14.5px; text-decoration:none; color:var(--teal-dk)}
.e-cta a:hover{text-decoration:underline}
@media(max-width:900px){.eng{grid-template-columns:1fr}}

.gets{margin-top:30px}
.gets-g{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.gets-g .g:nth-child(-n+2){grid-column:span 3} .gets-g .g:nth-child(n+3){grid-column:span 2}
.gets-g .g{background:#fff; border:1px solid var(--line); border-radius:9px; padding:22px 24px 24px;
           border-left:4px solid var(--teal-dk)}
.gets-g .g:nth-child(2){border-left-color:var(--blue)} .gets-g .g:nth-child(3){border-left-color:var(--navy)}
.gets-g .g:nth-child(4){border-left-color:var(--gold)} .gets-g .g:nth-child(5){border-left-color:var(--teal-dk)}
.gets-g h3, .gets-g h4{margin:0 0 7px; font-size:17px; color:var(--ink); font-weight:700; line-height:1.3}
.gets-g p{margin:0; font-size:14.5px; color:var(--body); line-height:1.55}
.gets-g .g.wide{grid-column:span 3}
@media(max-width:900px){.gets-g{grid-template-columns:1fr} .gets-g .g{grid-column:auto !important}}

/* track teaser cards on the home page */
.trackcards{margin-bottom:8px}
.tc{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
    border-radius:9px; border-top:4px solid var(--navy); padding:20px 22px 18px;
    text-decoration:none; transition:box-shadow .15s, transform .15s}
.tc:hover{box-shadow:0 10px 26px rgba(15,39,67,.11); transform:translateY(-2px)}
.tc.t1{border-top-color:var(--teal-dk)} .tc.t2{border-top-color:var(--blue)}
.tc.t3{border-top-color:var(--navy)}    .tc.t4{border-top-color:var(--gold)}
.tc.t5{border-top-color:var(--teal-dk)} .tc.tcall{border-top-color:var(--gold); background:var(--panel)}
.tc em{font-style:normal; font-size:11px; letter-spacing:1.7px; text-transform:uppercase;
       font-weight:700; color:var(--muted); margin-bottom:7px}
.tc b{font-size:19px; color:var(--ink); line-height:1.25; margin-bottom:8px}
.tc span{font-size:14.5px; color:var(--body); line-height:1.5; flex:1}
.tc i{font-style:normal; font-weight:700; font-size:13.5px; color:var(--teal-dk); margin-top:14px}
.curr-cta{margin:26px 0 0}
.btn.ghost.dark{color:var(--ink); border-color:var(--line)}
.btn.ghost.dark:hover{background:var(--panel2); border-color:var(--muted)}

/* how a track runs */
.runs{margin-top:28px; background:var(--navy); border-radius:9px; padding:26px 28px 28px; color:#fff}
.runs-h{font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
        color:var(--gold-lt); margin-bottom:18px}
.runs-g{display:grid; grid-template-columns:repeat(3,1fr); gap:22px 30px}
.runs-g b{display:block; font-size:20px; color:#fff; line-height:1.2; margin-bottom:4px}
.runs-g span{font-size:14px; color:var(--pale); line-height:1.45; display:block}
@media(max-width:900px){.runs-g{grid-template-columns:1fr; gap:16px} .runs{padding:22px 20px 24px}}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:300px 1fr; gap:46px; align-items:start}
.about img{border-radius:9px; width:100%}
.about .edu{font-size:14px; color:var(--muted); margin-top:14px; line-height:1.5}
.role{border-left:3px solid var(--navy); padding:2px 0 2px 16px; margin-bottom:20px}
.role.teal{border-left-color:var(--teal-dk)} .role.blue{border-left-color:var(--blue)} .role.gold{border-left-color:var(--gold)}
.role h4{margin:0 0 3px; font-size:17px; color:var(--ink); font-weight:700}
.role h4 span{color:var(--muted); font-size:13.5px; font-weight:700; margin-left:10px}
.role p{margin:0; font-size:15.5px}
@media(max-width:900px){.about{grid-template-columns:1fr; gap:26px} .about img{max-width:260px}}
@media(max-width:900px){.svc-h{min-height:0}}

/* ---------- clients ---------- */
.clients{background:var(--navy); color:#fff; border-radius:11px; padding:44px 44px 40px}
.clients h3{margin:0 0 16px; color:#fff; font-size:24px; font-weight:700; line-height:1.3}
.clients p{color:var(--pale); font-size:17.5px; margin:0 0 26px; max-width:52em}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:1px solid #34506E; color:#D6E0E9; border-radius:20px; padding:8px 17px; font-size:14.5px}
@media(max-width:900px){.clients{padding:30px 24px}.clients h3{font-size:20px}.clients p{font-size:16px}}

/* ---------- quotes ---------- */
/* the card is a column and the quote takes the slack, so the attribution
   sits on the baseline of the card no matter how long the quote runs */
.quote{background:#fff; border:1px solid var(--line); border-radius:9px; padding:26px;
       border-left:4px solid var(--teal-dk); display:flex; flex-direction:column}
.quote.blue{border-left-color:var(--blue)} .quote.navy{border-left-color:var(--navy)} .quote.gold{border-left-color:var(--gold)}
.quote p{font-style:italic; font-size:16px; margin:0 0 16px; flex:1 0 auto}
.quote .who{font-weight:700; color:var(--ink); font-size:15.5px}
.quote .who span{display:block; font-weight:400; color:var(--muted); font-size:13.5px; margin-top:2px}
.quote .rel{font-size:12.5px; color:var(--teal-dk); font-weight:700; margin-top:7px}

/* ---------- band ---------- */
.band{background:var(--navy); color:#fff; text-align:center; border-radius:9px; padding:26px; font-size:19px; font-weight:700}
.band em{font-style:normal; color:var(--gold-lt)}

/* ---------- contact ---------- */
#contact{background:var(--navy); color:#fff; padding:88px 0}
#contact h2{color:#fff}
#contact .sub{color:var(--pale)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.cinfo a{color:#fff; text-decoration:none; font-weight:700}
.cinfo a:hover{color:var(--gold-lt)}
.cinfo div{margin-bottom:18px}
.cinfo small{display:block; color:var(--gold-lt); font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; margin-bottom:4px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr; gap:28px} #contact{padding:58px 0}}

/* ---------- footer ---------- */
footer{background:var(--navy-dp); color:#8797A6; padding:34px 0; font-size:13px}
footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
footer a{color:#8797A6}
.disclaimer{font-size:11.5px; color:#5E7082; line-height:1.6; margin-top:20px; max-width:none}

/* ---------- home page only ---------- */
/* outcomes summary on the home page */
.outc-h{font-size:24px; color:var(--ink); margin:0 0 10px; font-weight:700; line-height:1.3}
.outc{margin-top:4px; gap:22px 30px}
.oc{display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start}
.oc > b{display:flex; align-items:center; justify-content:center; width:30px; height:26px;
        border-radius:4px; background:var(--teal-dk); color:#fff; font-size:11.5px; font-weight:700}
.oc:nth-child(2) > b{background:var(--blue)} .oc:nth-child(3) > b{background:var(--navy)}
.oc:nth-child(4) > b{background:var(--gold)}
.oc h4{margin:2px 0 5px; font-size:16.5px; color:var(--ink); font-weight:700; line-height:1.32}
.oc p{margin:0; font-size:14.5px; color:var(--body); line-height:1.55}
.outc-more{margin:24px 0 0}
.outc-more a{font-weight:700; font-size:15.5px; text-decoration:none; color:var(--teal-dk)}
.outc-more a:hover{text-decoration:underline}
.contact-alt{margin:16px 0 0; font-size:14.5px; color:var(--pale)}
.contact-alt a{color:var(--gold-lt); font-weight:700}