/* About only: one continuous smoke-glass ground. Photograph pixels, type,
   reveal transforms and the customer card's 3D context stay in their owners. */
html:has(body.rc-site[data-page="about"]) { background: #09090b; }
body.rc-site[data-page="about"] {
  --rc-ink: #f5f5f7;
  --rc-accent: #f5f5f7;
  --rc-muted: #b5b5bd;
  --rc-line: rgb(255 255 255 / .16);
  --rc-about-mat: #1c1c20;
  --rc-about-soft-text: #c5c5cc;
  --rc-glass-panel-fill: linear-gradient(132deg, rgb(24 24 28 / .96), rgb(16 16 19 / .94));
  --rc-glass-panel-border: rgb(255 255 255 / .16);
  --rc-glass-shadow: 0 24px 64px -42px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .06);
  color: var(--rc-ink);
  /* The fixed light field is behind the separate glass pseudo-element.
     It never becomes a filter/opacity layer around the page's content. */
  background:
    radial-gradient(ellipse 70% 64% at 9% 12%, #636369 0%, transparent 72%),
    radial-gradient(ellipse 58% 72% at 100% 54%, #414147 0%, transparent 72%),
    radial-gradient(ellipse 62% 52% at 28% 104%, #515157 0%, transparent 72%),
    #202023;
  background-attachment: fixed;
}
body.rc-site[data-page="about"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgb(0 0 0 / .82);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
/* body::after belongs to the existing solid-black perimeter. Do not reuse it. */
body.rc-site[data-page="about"] :is(
  .rc-architecture, .rc-architecture-hero, .rc-architecture-story,
  .rc-architecture-album, .rc-brand-relationship, .rc-customer-story,
  .rc-customer-stories, .rc-architecture-cta
) { background: transparent; }

body.rc-site[data-page="about"] :is(.rc-architecture, .rc-footer) :is(h1, h2, h3, h4),
body.rc-site[data-page="about"] .rc-architecture h1 span:last-child,
body.rc-site[data-page="about"] .rc-about.rc-architecture .rc-metric-value,
body.rc-site[data-page="about"] .rc-customer-story > .rc-album-chapter-label > span:first-child {
  color: var(--rc-ink);
}
body.rc-site[data-page="about"] :is(
  .rc-architecture-kicker, .rc-architecture-figure figcaption,
  .rc-architecture-story-copy p, .rc-brand-relationship-copy > p,
  .rc-section-kicker, .rc-album-chapter-label, .rc-album-heading p,
  .rc-album-photo figcaption, .rc-album-photo figcaption small, .rc-album-number,
  .rc-customer-copy > p, .rc-stories-kicker, .rc-stories-intro,
  .rc-story-meta, .rc-story-visual figcaption, .rc-story-visual figcaption > span:last-child,
  .rc-story-narrative p, .rc-architecture-cta > p
) { color: var(--rc-muted); }
body.rc-site[data-page="about"] .rc-about.rc-architecture .rc-metric-label {
  color: var(--rc-about-soft-text);
}
body.rc-site[data-page="about"] .rc-story-narrative p:first-child,
body.rc-site[data-page="about"] .rc-story-resolution strong { color: var(--rc-ink); }

body.rc-site[data-page="about"] :is(
  .rc-brand-relationship, .rc-album-chapter, .rc-story-resolution,
  .rc-architecture-cta, .rc-footer, .rc-footer-bottom
) { border-color: var(--rc-line); }
body.rc-site[data-page="about"] .rc-about.rc-architecture :is(.rc-metrics, .rc-metric) {
  border-color: var(--rc-line);
}

/* Replace only the CSS mat. White areas inside original photographs and
   certificates remain original pixels, with their existing contain framing. */
body.rc-site[data-page="about"] :is(
  .rc-about-wall, .rc-about-wall .rc-about-row-image,
  .rc-story-visual img, .rc-album-image, .rc-archive-image-frame,
  .rc-album-certificate .rc-album-image, .rc-archive-image-hit,
  .rc-lightbox > img, .rc-collage-photo img
) { background: var(--rc-about-mat); }
body.rc-site[data-page="about"] .rc-customer-collage .rc-collage-photo button {
  background: var(--rc-about-mat);
  color: var(--rc-about-soft-text);
  box-shadow: 0 6px 21px -8px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .1);
}
body.rc-site[data-page="about"] .rc-customer-collage .rc-collage-photo:is(:hover, :focus-within, .is-selected) button {
  color: var(--rc-ink);
  box-shadow: 0 20px 32px -12px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .2);
}
body.rc-site[data-page="about"] .rc-collage-caption > span:first-child { color: var(--rc-muted); }
body.rc-site[data-page="about"] .rc-collage-note { background: #27272c; color: var(--rc-ink); }
body.rc-site[data-page="about"] .rc-collage-note-2 { background: #1c1c20; }
body.rc-site[data-page="about"] .rc-collage-note-3 { background: #303036; }

/* Footer shares the page's glass rather than adding a pale second surface. */
body.rc-site[data-page="about"] .rc-footer {
  background: transparent;
  color: var(--rc-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.rc-site[data-page="about"] .rc-footer .rc-brand { color: var(--rc-ink); }
body.rc-site[data-page="about"] .rc-footer-bottom { color: var(--rc-muted); }
body.rc-site[data-page="about"] .rc-inquiry-dock:not([hidden]) {
  background: rgb(16 16 19 / .92);
  border-color: var(--rc-line);
}
body.rc-site[data-page="about"] .rc-social-item[aria-disabled="true"]:is(:hover, :focus-visible) {
  background: var(--rc-about-mat);
  color: var(--rc-ink);
}

/* Photo viewers and the existing selection panel stay readable in the same
   theme. The global action layer continues to own all blue action colours. */
body.rc-site[data-page="about"] :is(.rc-collage-viewer, .rc-lightbox, .rc-selection-dialog) {
  background: var(--rc-glass-panel-fill);
  color: var(--rc-ink);
  border-color: var(--rc-line);
}
body.rc-site[data-page="about"] .rc-collage-viewer::backdrop { background: rgb(0 0 0 / .8); }
body.rc-site[data-page="about"] .rc-selection-dialog :is(input, textarea) {
  color: var(--rc-ink);
  background: rgb(255 255 255 / .05);
  border-color: var(--rc-line);
}
body.rc-site[data-page="about"] :is(.rc-toast, .rc-selection-toast) {
  color: var(--rc-ink);
  background: #202025;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.rc-site[data-page="about"]::before { background: rgb(0 0 0 / .86); }
}
@media print {
  body.rc-site[data-page="about"]::before { display: none; }
  body.rc-site[data-page="about"] { background: #111114; }
}

/* These two utility surfaces keep their own contrast when page tokens turn light. */
body.rc-site[data-page="about"] .rc-skip-link { background: #17171b; color: #fff; }
body.rc-site[data-page="about"] .rc-category-menu { --rc-muted: #6e6e73; }