/* Collect Silver — a visible metal finish on the owner's exact emblem.
   This is decorative identity, never imagery of a silver object for sale. */
.cs-silver-finish {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #a9b1b7;
  background-image:
    repeating-linear-gradient(0deg, #ffffff15 0 1px, #27333d09 1px 2px, transparent 2px 4px),
    linear-gradient(118deg, #47545d 0%, #a7b1b8 13%, #f1f5f6 25%, #aebbc2 32%, #52616c 43%, #f6f8f9 53%, #a9b6bf 60%, #71808b 75%, #dde5e9 87%, #4f606b 100%);
}
.cs-silver-finish::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, #ffffff25 30%, #ffffffc7 50%, #ffffff25 70%, transparent);
  transform: translateX(-220%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
/* Only this small masked layer moves. One pass, then a still silver mark. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-effects="off"]) .cs-silver-finish[data-cs-sheen]::after {
    animation: cs-surface-sheen 2.8s .35s cubic-bezier(.23,.6,.4,1) 1 both;
  }
}
@keyframes cs-surface-sheen {
  0% { transform: translateX(-220%) skewX(-18deg); opacity: 0; }
  16% { opacity: .85; }
  75% { opacity: .85; }
  100% { transform: translateX(400%) skewX(-18deg); opacity: 0; }
}
/* Spatially reserved identity: the mark never sits under readable copy. */
.page-heading[data-cs-silver-heading] {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(140px,22vw,258px);
  column-gap: clamp(24px,5vw,80px);
  align-items: start;
}
.page-heading[data-cs-silver-heading]::after { display: none; }
.page-heading[data-cs-silver-heading] > .breadcrumbs { grid-column: 1 / -1; }
.page-heading[data-cs-silver-heading] > .eyebrow { grid-column: 1; grid-row: 2; }
.page-heading[data-cs-silver-heading] > h1 { grid-column: 1; grid-row: 3; }
.page-heading[data-cs-silver-heading] > .lede { grid-column: 1; grid-row: 4; max-width: 760px; }
.page-heading[data-cs-silver-heading] > .cs-silver-mark {
  grid-column: 2;
  grid-row: 2 / 5;
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  pointer-events: none;
  mask: url('/brand/selected/angular-emblem/component-pair.svg') center / contain no-repeat;
}
/* Retire the small About star when the new complete heading treatment is used. */
[data-cs-silver-heading][data-cs-about-accent]::before,
[data-cs-silver-heading] .cs-about-glint { display: none; }
[data-cs-silver-heading] .cs-about-silver-word { padding-inline-end: 0; }
/* A static, complete metal edge ties the selected hubs together. */
.page-heading[data-cs-silver-heading] {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #77858e, #e3e8eb 18%, #8c9aa3 38%, #f9fbfc 56%, #a5b0b7 76%, #5d6e79) 1;
}
html[data-theme="dark"] .cs-silver-finish {
  background-color: #b3bfc7;
  background-image:
    repeating-linear-gradient(0deg, #ffffff12 0 1px, #17263112 1px 2px, transparent 2px 4px),
    linear-gradient(118deg, #798b97 0%, #c6d0d6 13%, #f5f8fa 25%, #a7b6c0 32%, #607785 43%, #d5dfe5 53%, #fcfefe 60%, #8196a3 75%, #e4ecef 87%, #7a8f9c 100%);
}
@media (max-width: 760px) {
  .page-heading[data-cs-silver-heading] {
    grid-template-columns: minmax(0,1fr) 64px;
    column-gap: 18px;
  }
  .page-heading[data-cs-silver-heading] > .eyebrow { align-self: center; }
  .page-heading[data-cs-silver-heading] > .cs-silver-mark {
    grid-row: 2; position: relative; inset: auto; width: 64px; aspect-ratio: 1000 / 860;
  }
  .page-heading[data-cs-silver-heading] > h1,
  .page-heading[data-cs-silver-heading] > .lede { grid-column: 1 / -1; }
}
html[data-effects="off"] .cs-silver-finish::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cs-silver-finish::after { animation: none !important; }
}
@media (forced-colors: active) {
  .cs-silver-finish { background: CanvasText; }
  .cs-silver-finish::after { display: none; }
  .page-heading[data-cs-silver-heading] { border-image: none; border-bottom: 1px solid CanvasText; }
}
@media print {
  .cs-silver-finish { display: none !important; }
  .page-heading[data-cs-silver-heading] { display: block; border-image: none; border-bottom: 1px solid #777; }
}