/* Case study pages. Shared chrome lives in site.css */

.hero-c{background:var(--ink);color:var(--white);padding-block:clamp(2.5rem,6vh,4.5rem)}
.hero-c .crumb{color:#7E8F9B}
.hero-c .crumb a:hover{color:var(--white)}
.hero-c .crumb span{color:var(--deep-line)}
.hero-c h1{font-size:clamp(2rem,4.6vw,3.5rem);max-width:22ch;color:var(--white);text-wrap:balance}
.hero-c .intro{font-size:1.05rem;color:#A9B6BF;max-width:56ch;margin-top:1.2rem}
.facts{display:flex;gap:clamp(1.25rem,3vw,3rem);flex-wrap:wrap;margin-top:2rem;
  padding-top:1.75rem;border-top:1px solid var(--deep-line)}
.facts div b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lime);margin-bottom:.35rem}
.facts div span{font-size:.92rem;color:var(--white)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line)}
.stats > div{background:var(--sage);padding:1.75rem 1.6rem 1.9rem}
.stats .v{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.stats .l{font-size:.86rem;color:var(--ink-2);margin-top:.55rem;line-height:1.45}

.shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2.5rem,5vh,4rem)}
@media(max-width:980px){.shell{grid-template-columns:1fr}}

.body{font-family:var(--serif);font-size:1.09rem;line-height:1.68;color:#22323D;max-width:66ch}
.body > p{margin-bottom:1.3rem}
.body h2{font-family:var(--font);font-size:clamp(1.35rem,2.3vw,1.8rem);letter-spacing:-.025em;
  margin:2.6rem 0 .85rem;color:var(--ink);max-width:26ch}
.body strong{font-weight:600;color:var(--ink)}
.body ul{margin:0 0 1.3rem 1.3rem}
.body li{margin-bottom:.5rem}
.body blockquote{border-left:3px solid var(--lime);padding:.3rem 0 .3rem 1.35rem;margin:1.9rem 0;
  font-style:italic;color:var(--ink);font-size:1.16rem}
.body blockquote cite{display:block;font-family:var(--font);font-style:normal;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3-lo);margin-top:.8rem}
.body .pull{font-family:var(--font);background:var(--grey);padding:1.35rem 1.4rem;margin:1.9rem 0;
  font-size:.96rem;line-height:1.6;color:var(--ink-2);border-left:3px solid var(--ink)}
.body figure{margin:2rem 0}
.body figure img{border:1px solid var(--line)}
.body figcaption{font-family:var(--font);font-size:.78rem;color:var(--ink-3-lo);margin-top:.7rem}

.side{position:sticky;top:5.5rem;align-self:start}
.side .card{border:1px solid var(--line);padding:1.4rem 1.35rem 1.55rem;margin-bottom:1.25rem}
.side h3{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3-lo);margin-bottom:.9rem}
.side dl{display:grid;gap:.75rem}
.side dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3-lo)}
.side dd{font-size:.9rem;font-weight:600;margin-top:.15rem}
.side .used{background:var(--grey);border:0}
.side .used ul{list-style:none}
.side .used li{font-size:.85rem;color:var(--ink-2);padding-left:1rem;position:relative;margin-bottom:.45rem}
.side .used li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--lime)}

.more{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vh,3.5rem)}
.more .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:1.5rem}
.more a{border:1px solid var(--line);transition:border-color var(--fast)}
.more a:hover{border-color:var(--ink)}
.more .band{background:var(--sage);padding:1.35rem 1.4rem 1.2rem}
.more .band b{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink-sm)}
.more .band .s{font-size:2.1rem;font-weight:700;letter-spacing:-.04em;margin-top:.5rem;line-height:1}
.more .band .o{font-size:.8rem;color:var(--ink-2);margin-top:.3rem}
.more .t{padding:1.15rem 1.4rem 1.35rem;font-size:1rem;font-weight:700;letter-spacing:-.018em}

/* customers index */
.clist{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ccard{border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color var(--fast)}
.ccard:hover{border-color:var(--ink)}
.ccard .band{background:var(--sage);padding:1.6rem 1.6rem 1.4rem}
.ccard .band b{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--lime-ink-sm)}
.ccard .band .s{font-size:2.6rem;font-weight:700;letter-spacing:-.045em;line-height:1;margin-top:.55rem}
.ccard .band .o{font-size:.84rem;color:var(--ink-2);margin-top:.35rem}
.ccard .in{padding:1.5rem 1.6rem 1.7rem;flex:1;display:flex;flex-direction:column}
.ccard h3{font-size:1.15rem;margin-bottom:.55rem}
.ccard p{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin-bottom:1.3rem}
.ccard .rd{margin-top:auto;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;gap:.4rem;align-items:center}
.ccard .rd::after{content:"\2192";transition:transform var(--fast)}
.ccard:hover .rd::after{transform:translateX(4px)}