.pagehead .hero-media,
.pagehead-pms .hero-media {
  display: flex;
  align-items: flex-start;
  padding: 180px 8% 180px 25%;
}

.pagehead-pms .hero-media {
  background-image: url("../media/bg-parallax-PMS-2560x1800-01.webp");
}

.pagehead-title {
  margin: 0 10% 0 0;
  padding: 22px;
  color: #fff;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1.5px;
  text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.8);
  background: rgba(23, 28, 30, 0.4);
}

.chart-intro {
  background: #fff;
  color: #000;
}

.chart-intro .center {
  padding-bottom: 80px;
}

.chart-intro h2,
.chart-intro p {
  color: #000;
}

.chart {
  padding: 80px 4% 120px;
  background: #111 url("../media/bg_parallax_2560x4000-black-smoke-lichter-2-01.webp") center / cover fixed no-repeat;
}

.swatches {
  display: grid;
  width: min(1170px, 90%);
  margin-inline: auto;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-content: center;
  gap: 36px 14px;
}

.swatch {
  margin: 0;
  text-align: center;
}

.swatch figcaption {
  margin: 0 0 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.swatch span {
  display: block;
  height: 84px;
}

@media (max-width: 1320px) {
  .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pagehead .hero-media,
  .pagehead-pms .hero-media { padding: 72px 12%; }
  .chart,
  .coated-sheet { background-attachment: scroll; }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .banner-clip > span { font-size: 22px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-basic .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chart-basic .swatches {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.series-block .center { padding-bottom: 8px; }

.series-more {
  margin: 0;
  padding: 28px 24px 72px;
  text-align: center;
  background: #fff;
}

.series-more .btn-black + .btn-black { margin-left: 16px; }

.chart-preview { padding: 36px 0 28px; }

.chart-basic .swatch figcaption,
.chart-preview .swatch figcaption {
  white-space: normal;
}

.coated-sheet {
  background: #111 url("../media/bg_parallax_2560x4000-black-smoke-lichter-2-01.webp") center / cover fixed no-repeat;
  padding-bottom: 72px;
}

.coated-sheet .chart {
  background: none;
  padding: 12px 4% 8px;
}

.coated-sheet .center h2,
.coated-sheet .center p {
  color: #fff;
}

.coated-sheet .series-block .center {
  padding-top: 72px;
  padding-bottom: 0;
}

.coated-sheet .series-block:first-child .center {
  padding-top: 56px;
}

.coated-sheet .series-more {
  background: transparent;
  padding: 12px 24px 8px;
}

.coated-sheet .series-more .btn-black {
  background: var(--purple);
  color: #fff;
}

.coated-sheet .series-more .btn-black:hover {
  background: #fff;
  color: #171c1e;
}

.banner-wrap + .pair {
  padding-top: 96px;
}

.compare-wrap {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 48px;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare th,
.compare td {
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}

.compare th {
  font-weight: 400;
}

.color-list {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.color-list li + li { margin-top: 0.35em; }

.tone-cols.tone-two {
  margin-bottom: 0;
}

.tone-cols.tone-two + .center,
.copy-left .center:has(> h2.sub) {
  padding-top: 40px;
  padding-bottom: 8px;
}

.copy-left .center:has(+ .open) {
  padding-bottom: 0;
  margin-bottom: 80px;
}

.copy-left .center:has(+ .open) p:last-child {
  margin-bottom: 0;
}

.copy-left .center:has(+ .cta) {
  padding-bottom: 0;
  margin-bottom: 80px;
}

.copy-left .center:has(+ .cta) p:last-child {
  margin-bottom: 0;
}

.tone-cols.tone-two .trio-row {
  grid-template-columns: 1fr 1fr;
}

.tone-cols.tone-two {
  overflow: hidden;
}

.tone-cols.tone-two .trio-wipe {
  margin: 0;
}

.tone-cols.tone-two .trio-row.is-in .trio-up .trio-wipe {
  animation-name: tone-wipe-up;
}

.tone-cols.tone-two .trio-row.is-in .trio-down .trio-wipe {
  animation-name: tone-wipe-down;
}

@keyframes tone-wipe-up {
  0% { transform: translateY(-100%); visibility: visible; }
  50% { transform: translateY(0); visibility: visible; }
  100% { transform: translateY(100%); visibility: hidden; }
}

@keyframes tone-wipe-down {
  0% { transform: translateY(100%); visibility: visible; }
  50% { transform: translateY(0); visibility: visible; }
  100% { transform: translateY(-100%); visibility: hidden; }
}

.copy-left .center,
.copy-left .pair,
.copy-left .tone-cols {
  width: min(1170px, 90%);
}

.copy-left .center {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.copy-left .center h2:not(.sub) {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1.5px;
  text-align: center;
}

.copy-left .center h2.sub {
  margin-bottom: 0.55em;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  text-align: left;
}

.copy-left .center-line {
  margin-left: auto;
  margin-right: auto;
}

.copy-left .center h3,
.copy-left .cols3 h3,
.copy-left .cta h3,
.copy-left .tone-cols h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

.copy-left p {
  margin-bottom: 14px;
}

.copy-left p.plain-strong {
  margin-bottom: 2px;
  font-weight: 400;
  font-synthesis: none;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

.copy-left .center h2:not(:first-child) {
  margin-top: 40px;
}

.pair.pair-third,
.pair.pair-photo-third {
  grid-template-columns: 1fr 2fr;
}

.pair.pair-photo-third {
  padding-top: 96px;
}

.pair.pair-photo-third h2 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1.5px;
  text-align: left;
}


@media (max-width: 900px) {
  .tone-cols.tone-two .trio-row,
  .pair.pair-third,
  .pair.pair-photo-third { grid-template-columns: 1fr; }
}

.open {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
  padding: 140px max(5%, calc((100% - 1170px) / 2)) 48px;
  background: #13171a;
  color: #fff;
}

.open img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.open h2 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1.5px;
  text-align: left;
}

.open p,
.open li { color: #fff; }

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px max(5%, calc((100% - 1170px) / 2)) 180px;
  background: #13171a;
  color: #fff;
}

.cols3 h3,
.cols3 p { color: #fff; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.split img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .cols3 { grid-template-columns: 1fr; padding-bottom: 80px; }
  .open { grid-template-columns: 1fr; padding-top: 100px; }
}

@media (max-width: 900px) {
  .cols3,
  .open { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 560px) {
  .split { grid-template-columns: 1fr; }
}