/* Pittsburgh preview chrome. Loaded only when the host resolves to mrs-pittsburgh.
   Upstate pages do not link this file. Black and gold; the Upstate :root in mrs-brand-v1.css stays. */
html[data-tenant="mrs-pittsburgh"] {
  --brand-blue: #F6C445;
  --brand-navy: #14120B;
  --brand-flame: #F6C445;
  --brand-flame-2: #FFE08A;
  --brand-black: #111111;
  --accent: #F6C445;
  --accent-dark: #C9A227;
  --orange: #F6C445;
  --orange-hot: #FFE08A;
}
html[data-tenant="mrs-pittsburgh"] .site-header {
  background: #111111 !important;
  border-bottom-color: #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] .mrs-home {
  background: #111111 !important;
  border-bottom-color: #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] .nav-cta,
html[data-tenant="mrs-pittsburgh"] .mrs-btn-primary {
  background: #F6C445 !important;
  color: #111111 !important;
}
html[data-tenant="mrs-pittsburgh"] .brand-sub {
  color: #F6C445;
}
html[data-tenant="mrs-pittsburgh"] .pa-signature {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 2px solid #F6C445;
  color: #f3efe2;
  font-size: .95rem;
  line-height: 1.45;
}
html[data-tenant="mrs-pittsburgh"] .pa-signature a { color: #F6C445; }
html[data-tenant="mrs-pittsburgh"] .pa-signature-name { font-weight: 700; color: #fff; margin: 0 0 .25rem; }
html[data-tenant="mrs-pittsburgh"] .pa-specialties {
  margin-top: .75rem;
  font-size: .82rem;
  line-height: 1.45;
  color: #e6e0d0;
  max-width: 46rem;
}
html[data-tenant="mrs-pittsburgh"] .pa-qr img,
html[data-tenant="mrs-pittsburgh"] .pa-hero-qr img {
  background: #fff;
  padding: 6px;
  border-radius: 8px;
}
html[data-tenant="mrs-pittsburgh"] .pa-hero-qr {
  margin: 1rem 0 0;
  display: inline-block;
}
html[data-tenant="mrs-pittsburgh"] .pa-hero-qr figcaption { margin-top: .35rem; }
html[data-tenant="mrs-pittsburgh"] .pa-hero-qr a { color: #F6C445; font-weight: 600; }

/* Whole PA page field: Steelers black, with the shared gear art still readable.
   The PNGs are black line art, so the Upstate body background would vanish on #111.
   Draw the same files on a fixed layer and invert them toward gold. Upstate CSS is unchanged. */
html[data-tenant="mrs-pittsburgh"] {
  background-color: #111111 !important;
}
html[data-tenant="mrs-pittsburgh"] body {
  background-color: #111111 !important;
  background-image: none !important;
  color: #f3efe2;
  position: relative;
  z-index: 0;
}
/* The gear PNGs are transparent on the left and the line art sits on the right.
   ::before paints the right side and the center. ::after is mirrored, so that
   same right-hand art lands on the left. Opacity is 0.7 so the thin lines read
   on black and still stay translucent. */
html[data-tenant="mrs-pittsburgh"] body::before,
html[data-tenant="mrs-pittsburgh"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  filter: invert(1) sepia(0.72) saturate(5) hue-rotate(2deg) brightness(1.22);
  opacity: 0.7;
}
html[data-tenant="mrs-pittsburgh"] body::before {
  background-image:
    url("/brand/bg-gear-top.png"),
    url("/brand/bg-gear-bottom.png"),
    url("/brand/bg-gear-top.png"),
    url("/brand/bg-gear-bottom.png");
  background-position:
    right -8vw top -6vh,
    right -6vw bottom -8vh,
    center top 12vh,
    center bottom -6vh;
  background-size: 68vw auto, 74vw auto, 62vw auto, 70vw auto;
}
html[data-tenant="mrs-pittsburgh"] body::after {
  transform: scaleX(-1);
  background-image:
    url("/brand/bg-gear-top.png"),
    url("/brand/bg-gear-bottom.png"),
    url("/brand/bg-gear-top.png"),
    url("/brand/bg-gear-bottom.png");
  background-position:
    right -8vw top 8vh,
    right -4vw bottom 6vh,
    right 8vw center,
    right 22vw bottom 4vh;
  background-size: 68vw auto, 76vw auto, 58vw auto, 64vw auto;
}
@media (max-width: 640px) {
  html[data-tenant="mrs-pittsburgh"] body::before,
  html[data-tenant="mrs-pittsburgh"] body::after {
    background-size: 108vw auto, 118vw auto, 100vw auto, 110vw auto;
  }
}
@media print {
  html[data-tenant="mrs-pittsburgh"] body::before,
  html[data-tenant="mrs-pittsburgh"] body::after { content: none; }
}

/* Page shells stay transparent so the black field and gears show through. */
html[data-tenant="mrs-pittsburgh"] :is(
  main,
  section,
  article,
  footer,
  .hero,
  .city-hero,
  .page-hero,
  .mrs-tc,
  .section,
  .section-alt,
  .section-rfq,
  .site-footer
) {
  background-color: transparent !important;
  background-image: none !important;
}
/* Boxes: near-black fill so the type stays readable, Pittsburgh gold outline on
   every side (the source styles only paint the top edge), and a lighter yellow
   for the lettering. Outline #F6C445. Text #FFE98A. Fill #14120B. */
html[data-tenant="mrs-pittsburgh"] :is(
  .mrs-tc-card,
  .mrs-tc-addr,
  .easy-tile,
  .tile,
  .tile-primary,
  .tile-pricing,
  .card,
  .note,
  .qr-card,
  .qr-mini,
  .rfq-form,
  .toolbar,
  .product-card,
  .quote,
  .prod,
  .cat-card,
  .link-form,
  .link-cta,
  .parts-fields
) {
  background-color: #14120B !important;
  background-image: none !important;
  color: #FFE98A !important;
  border: 3px solid #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] :is(
  .mrs-tc-card,
  .mrs-tc-addr,
  .easy-tile,
  .tile,
  .card,
  .note,
  .qr-card,
  .qr-mini,
  .rfq-form,
  .toolbar,
  .product-card,
  .quote,
  .prod,
  .cat-card,
  .link-form,
  .link-cta,
  .parts-fields
) :is(p, h1, h2, h3, h4, li, span, strong, small, label, legend, a, .easy-title, .easy-desc, .easy-cta, .tile-title, .tile-desc, .tile-cta, .tile-kicker, .row-value, .row-label, .mrs-tc-eyebrow) {
  color: #FFE98A !important;
}
html[data-tenant="mrs-pittsburgh"] :is(.easy-tile, .tile, .card, .mrs-tc-card):hover,
html[data-tenant="mrs-pittsburgh"] :is(.easy-tile, .tile, .card, .mrs-tc-card):focus-visible {
  border-color: #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] .hero-grid {
  opacity: 0.35;
}
/* Copy on the black field stays light. Yellow type inside the outlined boxes wins by !important. */
html[data-tenant="mrs-pittsburgh"] .section-lede,
html[data-tenant="mrs-pittsburgh"] .mrs-tc h2,
html[data-tenant="mrs-pittsburgh"] .mrs-tc-foot--light,
html[data-tenant="mrs-pittsburgh"] .mrs-tc-foot--light a,
html[data-tenant="mrs-pittsburgh"] .mrs-tc-foot--light .mrs-tc-foot-label {
  color: #f3efe2;
}
html[data-tenant="mrs-pittsburgh"] :is(input, select, textarea) {
  background: #fff !important;
  color: #111111 !important;
  border-color: #111111 !important;
}
html[data-tenant="mrs-pittsburgh"] .mrs-btn-ghost {
  background: transparent !important;
  color: #F6C445 !important;
  border-color: #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] :is(.mrs-btn-primary, .btn-primary, .nav-cta),
html[data-tenant="mrs-pittsburgh"] :is(.mrs-tc-card, .card, .note, .rfq-form, .easy-tile, .quote) :is(.mrs-btn-primary, .btn-primary),
html[data-tenant="mrs-pittsburgh"] :is(.mrs-tc-card, .card, .note, .rfq-form, .easy-tile, .quote) :is(.mrs-btn-primary, .btn-primary) :is(span, strong, small) {
  color: #111111 !important;
}
html[data-tenant="mrs-pittsburgh"] :is(.mrs-tc-card, .card, .note, .rfq-form, .easy-tile) .mrs-btn-ghost {
  background: transparent !important;
  color: #FFE98A !important;
  border: 2px solid #F6C445 !important;
}
html[data-tenant="mrs-pittsburgh"] :is(.pa-qr img, .pa-hero-qr img, .qr-image, .qr-mini img) {
  background: #fff !important;
}
/* Push to Spec stays blue. The black-panel rule does not cover this control. */
html[data-tenant="mrs-pittsburgh"] .push-btn {
  background: radial-gradient(circle at 50% 38%, #3a4658 0%, #1a2330 62%, #0b111a 100%) !important;
  color: #fff !important;
}
html[data-tenant="mrs-pittsburgh"] .push-cap {
  background: radial-gradient(circle at 38% 28%, #8ec4ef 0%, #286BA6 36%, #1d4f7a 74%, #123552 100%) !important;
  color: #fff !important;
}