/* Three editorial illustrations. Existing ATC palette, fonts and controls remain authoritative. */
html body.atc-unified:is(#top,#atc-site) .atc-story-3d {
  --ui-fg: var(--atc-overlay-ink);
  --ui-muted: var(--atc-muted);
  --ui-surface: var(--atc-overlay);
  --ui-raised: oklch(from var(--atc-overlay) calc(l + .07) calc(c * .75) h);
  --ui-border: var(--atc-border);
  --ui-accent-text: var(--atc-accent);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
  align-items: center;
  min-width: 0;
  min-height: 410px;
  margin: 0 0 36px;
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: var(--atc-overlay);
  color: var(--atc-overlay-ink);
  box-shadow: 0 14px 36px color-mix(in oklch, var(--atc-bg) 18%, transparent);
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__image {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 auto;
  display: block;
  width: 70%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 72% 42%;
  border-radius: 0 19px 19px 0;
  pointer-events: none;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--atc-overlay) 0%, var(--atc-overlay) 34%,
    color-mix(in oklch, var(--atc-overlay) 97%, transparent) 46%,
    color-mix(in oklch, var(--atc-overlay) 60%, transparent) 56%,
    transparent 73%);
  pointer-events: none;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: clamp(28px, 3.1vw, 46px);
  text-align: left;
  overflow-wrap: anywhere;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy :is(h2,.atc-ui-h2) {
  margin: 14px 0 18px !important;
  max-width: 100% !important;
  font-family: var(--atc-display) !important;
  font-size: clamp(28px, 2.65vw, 38px) !important;
  line-height: 1.26 !important;
  color: var(--atc-overlay-ink) !important;
  text-wrap: balance;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy :is(p,.atc-ui-copy,.atc-ui-lead) {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--atc-muted) !important;
  text-wrap: pretty;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy :is(.eyebrow,.section-kicker) {
  margin: 0 !important;
  color: var(--atc-accent) !important;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy > a {
  margin-top: 24px;
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
  color: var(--atc-overlay-ink) !important;
  background: var(--ui-raised) !important;
  border-color: var(--atc-border) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atc-overlay-ink) 18%, transparent),
    0 3px 9px color-mix(in oklch, var(--atc-bg) 30%, transparent) !important;
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy > a:hover {
  color: var(--atc-overlay-ink) !important;
  background: var(--ui-raised) !important;
  border-color: var(--atc-overlay-ink) !important;
  transform: translateY(-1px);
}
html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy > a:focus-visible {
  outline: 3px solid var(--atc-overlay-ink) !important;
  outline-offset: 4px;
}
html body.atc-unified:is(#top,#atc-site) #roles .atc-roles-illustrated {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
  grid-template-areas: "story story" "roles phone" !important;
  row-gap: 32px;
}
html body.atc-unified:is(#top,#atc-site) #roles .atc-story-3d {
  grid-area: story;
  margin-bottom: 0;
}
html body.atc-unified:is(#top,#atc-site) #roles .atc-story-3d .ama-roles-copy { grid-area: 1 / 1; }
@media (max-width: 919px) {
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    border-radius: 16px;
  }
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d__image {
    position: relative;
    z-index: auto;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 75% 35%;
    border-radius: 15px 15px 0 0;
  }
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d::after { display: none; }
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy { padding: 28px; }
  html body.atc-unified:is(#top,#atc-site) #roles .atc-roles-illustrated {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "story" "phone" "roles" !important;
  }
}
@media (max-width: 480px) {
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d__image { aspect-ratio: 4 / 3; }
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.atc-unified:is(#top,#atc-site) .atc-story-3d__copy > a { transition: none !important; transform: none !important; }
}
/* These panels stay dark in both themes. Outrank each product's colored title treatment. */
html body:is(#top,#atc-site) :is(#home-industries-3d,#ama-team-3d,#beauty-journey-3d) .atc-story-3d__copy h2 {
  color: var(--atc-overlay-ink) !important;
  font-size: clamp(28px, 2.65vw, 38px) !important;
  line-height: 1.26 !important;
  margin: 14px 0 18px !important;
}
html body:is(#top,#atc-site) :is(#home-industries-3d,#ama-team-3d,#beauty-journey-3d) .atc-story-3d__copy :is(.eyebrow,.section-kicker) {
  color: var(--atc-accent) !important;
}