.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  padding-top: 1rem;
  color: #77716b;
  font-size: .78rem;
  line-height: 1.4;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover { color: #ca5938; }
.breadcrumbs b { color: #bbb4ac; font-weight: 400; }
.breadcrumbs span { color: #37322f; }

body { padding-top: 78px; }
.nav {
  position: fixed !important;
  inset: 0 0 auto;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(35, 32, 30, .08);
}

.brand-system {
  border-top: 1px solid rgba(41, 37, 34, .12);
  border-bottom: 1px solid rgba(41, 37, 34, .12);
}

.brand-system .section-head { align-items: start; }

.brand-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 2.5rem;
  border: 1px solid rgba(41, 37, 34, .18);
}

.brand-code article {
  min-height: 12.5rem;
  padding: 1.35rem 1.15rem;
  border-right: 1px solid rgba(41, 37, 34, .18);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.brand-code article:last-child { border-right: 0; }
.brand-code article:hover { background: #2b2826; color: #f3eee7; transform: translateY(-4px); }
.brand-code b { display: block; color: #cb5d3d; font-size: 2.7rem; line-height: 1; }
.brand-code h3 { margin: 2.2rem 0 .45rem; font-size: 1rem; }
.brand-code p { margin: 0; color: inherit; opacity: .72; font-size: .84rem; line-height: 1.5; }

.brand-note {
  max-width: 54rem;
  margin-top: 1.5rem;
  color: #69635e;
  font-size: 1rem;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(41, 37, 34, .16);
  border: 1px solid rgba(41, 37, 34, .16);
}

.answer-grid article { padding: 1.7rem; background: #f3eee7; }
.answer-grid h2 { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.25; }
.answer-grid p { margin: 0; color: #69635e; font-size: .96rem; line-height: 1.65; }

.article-trust {
  margin: 0 0 2rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(41, 37, 34, .16);
  border-bottom: 1px solid rgba(41, 37, 34, .16);
  color: #69635e;
  font-size: .85rem;
}
.article-body h3 { margin:34px 0 10px; font-size:1.45rem; line-height:1.2; }
.article-body strong { color:#2b2825; }
.article-body blockquote { margin:34px 0; padding:22px 26px; border-left:4px solid var(--hot); background:#e7e1d8; color:#413c37; font-size:1.08rem; line-height:1.65; }
.article-links { margin-top:54px; padding-top:24px; border-top:1px solid #cfc6bc; }
.article-links a { color:var(--hot); text-decoration:underline; text-underline-offset:4px; }

.case-evidence { padding: 1.5rem 0; background: #eee8e0; }
.case-evidence .wrap { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; align-items: baseline; }
.case-evidence b { color: #ca5938; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.case-evidence p { max-width: 54rem; margin: 0; color: #69635e; font-size: .9rem; line-height: 1.55; }

@media (max-width: 980px) {
  .brand-code { grid-template-columns: repeat(3, 1fr); }
  .brand-code article:nth-child(3) { border-right: 0; }
  .brand-code article:nth-child(-n+3) { border-bottom: 1px solid rgba(41, 37, 34, .18); }
  .answer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { padding-top: 68px; }
}

@media (max-width: 620px) {
  .breadcrumbs { padding-top: .8rem; font-size: .72rem; }
  .breadcrumbs span { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-code { grid-template-columns: repeat(2, 1fr); }
  .brand-code article { min-height: 10.5rem; }
  .brand-code article:nth-child(3) { border-right: 1px solid rgba(41, 37, 34, .18); }
  .brand-code article:nth-child(even) { border-right: 0; }
  .brand-code article:nth-child(-n+4) { border-bottom: 1px solid rgba(41, 37, 34, .18); }
  .case-evidence .wrap { grid-template-columns: 1fr; gap: .5rem; }
}