/* Individual articles and cases only. The global header and footer are untouched. */
.jm-editorial-detail main .blog-article-header {
  --type-display:clamp(40px,3.65vw,58px);
  --type-leading-display:1.12;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  max-width:none;
  margin:0;
  padding:126px max(32px,calc((100% - 1180px)/2)) 36px;
  background:#004a8a;
  color:#fff;
}
.jm-editorial-detail main .blog-article-header::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('../images/puzzle-weave.svg') repeat;
  background-size:240px;
  opacity:.055;
  pointer-events:none;
}
.jm-editorial-detail main .blog-article-header .blog-breadcrumbs {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:rgb(255 255 255 / .88);
}
.jm-editorial-detail main .blog-article-header .blog-breadcrumbs :is(a,span,li,ol) {color:inherit}
.jm-editorial-detail main .blog-article-header .blog-breadcrumbs li+li::before {color:rgb(255 255 255 / .65)}
.jm-editorial-detail main .blog-article-header .blog-article-heading {max-width:1000px;margin:22px auto 0}
.jm-editorial-detail main .blog-article-header .blog-article-category {
  min-height:0;
  padding:0;
  margin:0;
  color:rgb(255 255 255 / .88);
  font-size:13px;
  line-height:1.6;
  background:none;
}
.jm-editorial-detail main .blog-article-header h1 {margin:12px 0 0;color:#fff}
.jm-editorial-detail main .blog-article-heading>p:not(.blog-article-category) {
  max-width:780px;
  margin:18px auto 0;
  color:rgb(255 255 255 / .9);
  font-size:18px;
  line-height:1.65;
}
.jm-editorial-detail main .blog-article-header .blog-article-meta {margin:24px auto 0;gap:12px 24px}
.jm-editorial-detail main .blog-article-header .blog-article-meta>span:not(.blog-article-meta-divider) {color:#fff}
.jm-editorial-detail main .blog-article-header .blog-article-meta :is(strong,time) {color:#fff}
.jm-editorial-detail main .blog-article-header .blog-article-meta small {color:rgb(255 255 255 / .85)}
.jm-editorial-detail main .blog-article-header a:focus-visible {outline-color:#fff}
.jm-editorial-detail main :is(.blog-article-cover,.case-brand-cover) {margin-top:32px}
.jm-editorial-detail main .blog-article-theme {background:#fff}
.jm-editorial-detail main .blog-article-layout {padding-top:52px;padding-bottom:64px}

.jm-editorial-detail main :is(.blog-related,.case-related) {
  width:100%;
  max-width:none;
  margin:0;
  padding:64px max(32px,calc((100% - 1180px)/2)) 76px;
  border:0;
  background:#004a8a;
  color:#fff;
}
.jm-editorial-detail main :is(.blog-related,.case-related)>header {margin-bottom:32px;gap:24px}
.jm-editorial-detail main :is(.blog-related,.case-related) :is(h2,h3,h3 a) {color:#fff}
.jm-editorial-detail main :is(.blog-related,.case-related)>header>a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:8px;
  color:#fff;
  font-size:16px;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:5px;
}
.jm-editorial-detail main .case-related .blog-section-heading>a {color:#fff}
.jm-editorial-detail main :is(.blog-related,.case-related) .section-index {color:rgb(255 255 255 / .85)}
.jm-editorial-detail main :is(.blog-related,.case-related) .blog-card {background:none;border:0;box-shadow:none}
.jm-editorial-detail main :is(.blog-related,.case-related) .blog-card-image {border-radius:8px}
.jm-editorial-detail main :is(.blog-related,.case-related) .blog-card-body>p {color:rgb(255 255 255 / .9)}
.jm-editorial-detail main :is(.blog-related,.case-related) :is(.blog-card-meta,.blog-card-meta a,.blog-card-footer,.blog-card-footer a,.collection-card-context) {color:rgb(255 255 255 / .85)}
.jm-editorial-detail main :is(.blog-related,.case-related) .blog-card-footer a {color:#fff;text-decoration:underline;text-underline-offset:5px}
.jm-editorial-detail main :is(.blog-related,.case-related) .collection-button {background:#5bdf66;color:#002d54}
.jm-editorial-detail main :is(.blog-related,.case-related) .collection-button:hover {background:#4bd15a}
.jm-editorial-detail main :is(.blog-related,.case-related) a:focus-visible {outline-color:#fff}
.jm-editorial-detail main :is(.blog-related,.case-related) h3 a:hover {text-decoration:underline;text-underline-offset:5px}

@media(max-width:1000px) and (min-width:768px) {
  .jm-editorial-detail main .blog-article-header {padding-top:116px}
}
@media(max-width:767px) {
  .jm-editorial-detail main .blog-article-header {
    --type-display:clamp(29px,8vw,36px);
    --type-leading-display:1.2;
    padding:92px 20px 28px;
  }
  .jm-editorial-detail main .blog-article-header::before {background-size:200px;opacity:.045}
  .jm-editorial-detail main .blog-article-header .blog-breadcrumbs {font-size:12px;margin-bottom:0}
  .jm-editorial-detail main .blog-article-header .blog-breadcrumbs ol>li:last-child {
    display:block;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  .jm-editorial-detail main .blog-article-header .blog-article-heading {margin-top:20px}
  .jm-editorial-detail main .blog-article-header .blog-article-category {font-size:12px;margin:0}
  .jm-editorial-detail main .blog-article-header h1 {margin-top:11px}
  .jm-editorial-detail main .blog-article-heading>p:not(.blog-article-category) {font-size:16px;line-height:1.7;margin-top:16px}
  .jm-editorial-detail main .blog-article-header .blog-article-meta {gap:14px 15px;margin-top:23px}
  .jm-editorial-detail main :is(.blog-article-cover,.case-brand-cover) {margin-top:24px}
  .jm-editorial-detail main .blog-article-layout {padding-top:28px;padding-bottom:44px}
  .jm-editorial-detail main :is(.blog-related,.case-related) {padding:44px 20px 54px}
  .jm-editorial-detail main :is(.blog-related,.case-related)>header {align-items:start;gap:18px;margin-bottom:28px}
  .jm-editorial-detail main :is(.blog-related,.case-related)>header>a {font-size:14px;white-space:normal}
}