.brand-guide-clean .brand-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  grid-template-rows: auto 1fr;
  align-items: end;
  color: #111;
  background: #fff !important;
}
.brand-guide-clean .brand-hero .page-kicker { grid-column: 1 / -1; align-self: start; }
.brand-guide-clean .brand-hero .page-title { margin-bottom: 0; font-size: clamp(76px, 11vw, 164px); }
.brand-guide-clean .brand-hero .page-lede { align-self: end; margin: 0 0 10px; font-size: clamp(18px, 1.7vw, 25px); }
.brand-guide-clean .brand-grid { padding-top: 34px !important; }
.brand-guide-clean .brand-section { grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr); gap: clamp(30px, 6vw, 100px); }
.brand-guide-clean .brand-section > h2 { font: 600 clamp(26px, 3vw, 44px)/.95 var(--sans) !important; letter-spacing: -.05em; }
.brand-guide-clean .brand-section h3 { letter-spacing: .12em; }
.brand-guide-clean .logo-variations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
.brand-guide-clean .logo-variations figure { margin: 0; }
.brand-guide-clean .logo-variations figure:first-child { grid-column: 1 / -1; }
.brand-guide-clean .logo-card {
  display: grid;
  min-height: 350px;
  place-items: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid #111;
  background: #fff;
}
.brand-guide-clean .logo-card-wide { min-height: 400px; }
.brand-guide-clean .logo-card img { width: min(100%, 310px); max-height: 260px; object-fit: contain; mix-blend-mode: multiply; }
.brand-guide-clean .logo-card-wide img { width: min(100%, 610px); max-height: 280px; }
.brand-guide-clean .logo-variations figcaption { padding-top: 11px; font: 9px var(--mono); letter-spacing: .1em; }
.brand-guide-clean .mark-guidance { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 30px 0 0; }
.brand-guide-clean .mark-guidance p,
.brand-guide-clean .palette-intro { max-width: 700px; margin: 0 0 28px; font: 17px/1.7 var(--serif); }
.brand-guide-clean .swatches { grid-template-columns: repeat(3, 1fr); border: 1px solid #111; border-right: 0; }
.brand-guide-clean .swatch { height: 230px; border-right: 1px solid #111; color: #111; line-height: 1.55; }
.brand-guide-clean .swatch-dark { color: #fff; }
.brand-guide-clean .brand-font-card { border-color: #111; background: #fff; }
.brand-guide-clean .brand-font-card:nth-child(2) { background: #f2d9df; }
.brand-guide-clean .brand-font-card:nth-child(3) { background: #fff; }
.brand-guide-clean .brand-font-card:nth-child(4) { background: #f5f2ed; }
.brand-guide-clean .art-direction > div { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr); gap: clamp(30px, 5vw, 80px); }
.brand-guide-clean .direction-board { position: relative; min-height: 680px; border: 1px solid #111; background: #fff; overflow: hidden; }
.brand-guide-clean .direction-board img { position: absolute; object-fit: cover; box-shadow: 6px 8px 0 rgba(17,17,17,.10); }
.brand-guide-clean .direction-board img:nth-child(1) { top: 7%; left: 7%; width: 48%; height: 45%; transform: rotate(-2deg); }
.brand-guide-clean .direction-board img:nth-child(2) { top: 11%; right: 6%; width: 35%; height: 48%; transform: rotate(3deg); }
.brand-guide-clean .direction-board img:nth-child(3) { right: 13%; bottom: 7%; width: 50%; height: 43%; transform: rotate(-1deg); }
.brand-guide-clean .direction-board span { position: absolute; left: 6%; bottom: 10%; width: 28%; font: 9px/1.6 var(--mono); letter-spacing: .08em; }
@media (max-width: 850px) {
  .brand-guide-clean .brand-hero { grid-template-columns: 1fr; }
  .brand-guide-clean .brand-hero .page-lede { margin-top: 34px; }
  .brand-guide-clean .brand-section { grid-template-columns: 1fr; }
  .brand-guide-clean .art-direction > div { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .brand-guide-clean .logo-variations { grid-template-columns: 1fr; }
  .brand-guide-clean .logo-variations figure:first-child { grid-column: auto; }
  .brand-guide-clean .logo-card,
  .brand-guide-clean .logo-card-wide { min-height: 300px; }
  .brand-guide-clean .swatches { grid-template-columns: repeat(2, 1fr); }
  .brand-guide-clean .swatch { height: 165px; }
  .brand-guide-clean .mark-guidance { grid-template-columns: 1fr; }
  .brand-guide-clean .direction-board { min-height: 520px; }
}