/* Incubator Case Studies — one stylesheet for every case study block.
   Change a value here and every case study on the site updates. */

.o7cs{
  --red:#ed3024;
  --org:#f58426;
  --grn:#008542;
  --ink:#17181a;
  --bd:#6e7175;
  --pn:#f4f2f0;
  --rl:#dcd8d4;
  --sl:#cfcac5;
  --dsp:'Oswald',Impact,'Arial Narrow Bold',sans-serif;
  color:var(--bd);
  font-size:16px;
  line-height:1.6;
}
.o7cs *{box-sizing:border-box}
.o7cs img{display:block;max-width:100%}
.o7cs h1,.o7cs h2,.o7cs h3,.o7cs h4{font-family:var(--dsp);font-weight:600;text-transform:uppercase;color:var(--ink);margin:0;line-height:1.06}
.o7cs p{margin:0 0 22px}
.o7cs p:last-child{margin-bottom:0}

/* Full width bands. --cw is measured by case-studies.js so the inner
   column always lines up with the rest of the site. */
.o7cs .bl{margin-left:calc(-1 * var(--ol,0px));margin-right:calc(-1 * var(--or,0px));padding-left:var(--ol,0px);padding-right:var(--or,0px)}
.o7cs .in{width:100%;margin:0 auto}
.o7cs .bl > .in{width:var(--cw,100%);max-width:calc(100% - 56px);margin:0 auto}

/* Hero ------------------------------------------------------------------ */
.o7cs .hero{padding:64px 0 70px}
.o7cs .hero--orange{background:var(--org)}
.o7cs .hero--charcoal{background:#1d1e20}
.o7cs .hero--red{background:var(--red)}
.o7cs .hero h1{color:#fff;font-size:clamp(34px,5.4vw,64px)}
.o7cs .eyb{font-family:var(--dsp);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1d1e20;margin-bottom:14px}
.o7cs .hero--charcoal .eyb{color:var(--org)}
.o7cs .eyb i{font-style:normal;color:rgba(255,255,255,.9);margin-left:12px;letter-spacing:.14em}
.o7cs .hero--charcoal .eyb i{color:#a9abae}
.o7cs .sf{margin:20px 0 0;max-width:62ch;font-size:19px;line-height:1.55;color:#fff}
.o7cs .hero--charcoal .sf{color:#a9abae}
.o7cs .mt{margin-top:28px;display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.4)}
.o7cs .mt div{padding:16px 26px 0 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.4)}
.o7cs .mt div:last-child{border-right:0;margin-right:0}
.o7cs .mt b{display:block;font-family:var(--dsp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#1d1e20;font-weight:600;margin-bottom:4px}
.o7cs .hero--charcoal .mt b{color:var(--org)}
.o7cs .mt span{color:#fff;font-size:15px}
.o7cs .bk{display:inline-block;font-family:var(--dsp);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:rgba(255,255,255,.85);text-decoration:none;margin-bottom:20px}
.o7cs .bk:hover{color:#fff}

/* Video ----------------------------------------------------------------- */
.o7cs .plr{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;cursor:pointer;box-shadow:0 18px 46px rgba(23,24,26,.14);width:100%;display:block}
.o7cs .plr img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .25s}
.o7cs .plr:hover img{opacity:.97}
.o7cs .plr .pb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.o7cs .plr .pb i{width:78px;height:78px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.o7cs .plr .pb i:after{content:"";border-left:23px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.o7cs .plr iframe{width:100%;height:100%;border:0;display:block}
.o7cs .vf{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.o7cs .vf strong{color:var(--ink)}
.o7cs .vf a{color:var(--red);font-weight:600;text-decoration:none}
.o7cs .vf a:hover{text-decoration:underline}

/* Story ----------------------------------------------------------------- */
.o7cs .art p{max-width:66ch}
.o7cs .art--lead p{font-size:20px;line-height:1.55;color:var(--ink)}
.o7cs .art h3{font-size:26px;margin:0 0 18px;padding-top:20px;border-top:3px solid var(--red);display:inline-block}
.o7cs .art strong{color:var(--ink)}

.o7cs .pq{margin:12px 0;padding:30px 0 30px 32px;border-left:6px solid var(--org)}
.o7cs .pq q{quotes:none;font-family:var(--dsp);font-weight:500;font-size:clamp(22px,2.5vw,30px);line-height:1.3;color:var(--ink);display:block}
.o7cs .pq cite{display:block;margin-top:14px;font-style:normal;font-family:var(--dsp);text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--red)}

.o7cs .sn{background:var(--pn);padding:24px 26px;border-top:4px solid var(--grn)}
.o7cs .sn b{display:block;font-family:var(--dsp);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--grn);margin-bottom:9px}
.o7cs .sn p{max-width:none;color:var(--ink)}

/* At a glance ----------------------------------------------------------- */
/* Orange keyline card. Same device as the About panel, so the rail and the
   About block read as one family. Change these five rules and every case
   study on the site follows. */
.o7cs .fx{background:#fff;border:1px solid var(--rl);border-top:5px solid var(--org)}
.o7cs .fx h4{font-size:13px;letter-spacing:.16em;color:var(--ink);margin:0;padding:20px 24px 14px;border-bottom:1px solid var(--rl)}
.o7cs .fx dl{margin:0;padding:6px 24px 20px}
.o7cs .fx dt{font-family:var(--dsp);text-transform:uppercase;font-size:11px;letter-spacing:.12em;color:var(--bd);margin-top:16px}
.o7cs .fx dd{margin:3px 0 0;color:var(--ink);font-size:15.5px;line-height:1.42}
.o7cs .fx dd + dt{padding-top:16px;border-top:1px solid var(--rl)}

/* Photo ----------------------------------------------------------------- */
.o7cs .ph{margin:0}
.o7cs .ph img{width:100%;height:100%;object-fit:cover}
.o7cs .ph--wide img{aspect-ratio:16/9}
.o7cs .ph--portrait img{aspect-ratio:4/5}
.o7cs .ph--square img{aspect-ratio:1/1}
.o7cs .ph figcaption{margin-top:10px;font-size:13px;color:var(--bd)}
.o7cs .slot{border:2px dashed var(--sl);background:repeating-linear-gradient(135deg,transparent,transparent 12px,rgba(128,128,128,.06) 12px,rgba(128,128,128,.06) 24px);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--bd)}
.o7cs .slot--wide{aspect-ratio:16/9}
.o7cs .slot--portrait{aspect-ratio:4/5}
.o7cs .slot--square{aspect-ratio:1/1}
.o7cs .slot b{display:block;font-family:var(--dsp);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--ink);margin-bottom:6px}
.o7cs .slot small{font-size:12.5px;line-height:1.5;display:block;max-width:34ch;margin:0 auto}

/* About and CTA --------------------------------------------------------- */
.o7cs .ab{background:var(--pn);padding:40px 44px;border-top:6px solid var(--org)}
.o7cs .ab h3{font-size:24px;margin-bottom:16px}
.o7cs .ab p{max-width:74ch}
.o7cs .cta{background:var(--red);padding:46px 0}
.o7cs .cta .in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.o7cs .cta h3{color:#fff;font-size:clamp(26px,3.2vw,38px);max-width:18ch}
.o7cs .cta a{background:#fff;color:var(--red);font-family:var(--dsp);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:14px;padding:15px 24px;text-decoration:none;white-space:nowrap}

/* Index cards ----------------------------------------------------------- */
.o7cs .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.o7cs .cd{border:1px solid var(--rl);display:flex;flex-direction:column;text-decoration:none;background:#fff;transition:transform .2s,box-shadow .2s}
.o7cs a.cd:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(23,24,26,.14)}
.o7cs .cd .sh{aspect-ratio:16/9;position:relative;background:#000;overflow:hidden}
.o7cs .cd .sh img{width:100%;height:100%;object-fit:cover}
.o7cs .cd .tg{position:absolute;left:0;top:0;background:var(--red);color:#fff;font-family:var(--dsp);text-transform:uppercase;font-size:11px;letter-spacing:.14em;padding:7px 12px;z-index:2}
.o7cs .cd .tx{padding:24px 26px 28px;display:flex;flex-direction:column;gap:11px;flex:1}
.o7cs .cd h3{font-size:23px;line-height:1.14}
.o7cs .cd .wh{font-family:var(--dsp);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--red)}
.o7cs .cd p{font-size:15px;margin:0}
.o7cs .cd .go{margin-top:auto;font-family:var(--dsp);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--ink);border-top:1px solid var(--rl);padding-top:15px}
.o7cs .cd--soon .sh{background:#e9e6e3;display:flex;align-items:center;justify-content:center}
.o7cs .cd--soon .tg{background:var(--bd)}
.o7cs .cd--soon .sh span{font-family:var(--dsp);text-transform:uppercase;letter-spacing:.14em;font-size:15px;line-height:1.7;color:var(--bd);text-align:center}

@media (max-width:820px){
  .o7cs .cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .o7cs .ab{padding:32px 26px}
  .o7cs .hero{padding:48px 0 52px}
}