/* Contents band (Services, Case Studies): the first thing under the page's title band. One row per
   section: its number, a self-drawing icon (svg.sec-ic, drawn by the page's own icon script), its
   name, a line about it, and an arrow on hover. One column on a phone, two from 640px, three from
   1000px. */
.band.contents{padding-top:34px; padding-bottom:46px; border-top:1px solid rgba(255,255,255,.1);}
/* .heroset wraps the page's title band and this band so that they share one background: the hero's
   video (its still frame until it plays) with the hero's own scrim over it, running behind both.
   Where there is no video (reduced motion, or it has not loaded) both show the navy the title band
   would have had. This band adds only a faint deepening under its rows, to keep them readable
   over the brighter parts of the picture. */
.heroset{position:relative; overflow:hidden; color:var(--paper, #f4f7fa);
      background:radial-gradient(120% 100% at 80% 0%, #10395f 0%, #0a2744 48%, #071b30 100%);}
.heroset > .band.navy{position:relative; z-index:1; background:none;}
.heroset > .band.contents{border-top:0; padding-top:10px;
      background:linear-gradient(180deg, rgba(7,27,48,0) 0, rgba(7,27,48,.42) 120px);}
.contents .ct-h{margin:0 0 8px; font-family:var(--mono, 'IBM Plex Mono', monospace); font-weight:600; font-size:12px;
      letter-spacing:.16em; text-transform:uppercase; color:var(--gold, #f6c776);}
.ctoc{display:grid; grid-template-columns:minmax(0,1fr); column-gap:30px; border-top:1px solid rgba(255,255,255,.16);}
.ctoc a{position:relative; display:flex; align-items:center; gap:13px; padding:13px 26px 13px 8px; text-decoration:none;
      border-bottom:1px solid rgba(255,255,255,.1); transition:background .25s ease;}
.ctoc a:hover{background:rgba(0,149,235,.1);}
.ctoc .no{flex:none; min-width:22px; font-family:var(--mono, 'IBM Plex Mono', monospace); font-weight:600; font-size:12px;
      letter-spacing:.12em; color:var(--gold, #f6c776);}
.ctoc .tic{display:inline-flex; flex:none;}
.ctoc svg.sec-ic{width:28px; height:28px; margin:0; color:var(--gold, #f6c776); display:block;}
.ctoc .tt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.ctoc .t{font-family:var(--display, 'Poppins', sans-serif); font-weight:600; font-size:15.5px; line-height:1.25; color:#fff;}
.ctoc .sub{font-size:13px; line-height:1.4; color:var(--mist, #b9cde0);
      display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
/* the arrow sits over the row's right-hand padding, so it takes no room from the text */
.ctoc .arrow{position:absolute; right:6px; top:50%; margin-top:-.6em; line-height:1.2; color:var(--gold, #f6c776); font-size:16px; opacity:0; transform:translateX(-8px);
      transition:opacity .25s ease, transform .25s ease;}
.ctoc a:hover .arrow, .ctoc a:focus-visible .arrow{opacity:1; transform:none;}
@media (min-width:640px){ .ctoc{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (min-width:1000px){ .ctoc.ctoc-3{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width:600px){ .band.contents{padding-top:26px; padding-bottom:32px;} .ctoc a{padding-left:0; padding-right:22px;} }
/* blank until the icon script first draws them (no blank icons without the script, or with reduced motion) */
@media (prefers-reduced-motion:no-preference){
  html.js .ctoc svg.sec-ic:not([data-ic-t]) :is(path,rect,circle){stroke-dasharray:1; stroke-dashoffset:1;}
}
@media print{ .band.contents{display:none;} }