/* Shared brand palette and small-screen layout fixes. Loaded after page styles. */
:root {
  --pink: #e90a9b;
  --pink-2: #e90a9b;
  --purple: #7323bf;
  --brand-gradient: linear-gradient(115deg, #7323bf, #e90a9b);
}

.site-footer,
.site-footer.dc-footer,
.industry-page .site-footer { background: #000000; }

/* A modest lift of the original dark, translucent brand gradient. */
.affiliation-logo {
  background:
    linear-gradient(120deg, rgba(233, 10, 155, .24), rgba(115, 35, 191, .34)),
    rgba(72, 45, 87, .88);
  border-color: rgba(233, 10, 155, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 32px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
}
.affiliation-logo img {
  width: min(230px, 100%);
  height: 74px;
  filter: drop-shadow(0 1px 2px rgba(27, 9, 34, .5));
}

.btn-primary,
.home-socials a:hover,
.review-arrow:hover:not(:disabled),
.mobile-call-cta {
  background: var(--brand-gradient);
}

.mad-hero h1 span,
.mad-process-head h2 span,
.mad-stack-head h2 span {
  background-image: var(--brand-gradient);
}

.mad-kicker,
.mad-section-head h2 span,
.mad-final h2 span,
.mad-process-label,
.mad-stack-brand,
.mad-section-head > a,
.mad-project-card a {
  color: var(--pink);
}

.mad-process-head > b,
.mad-stack-head > b,
.review-progress span {
  background: var(--brand-gradient);
}

.process-node {
  border-color: var(--pink);
}

/* Each process step already has a numbered timeline badge. */
.mad-process-card > strong { display: none; }
.mad-process-step.odd .mad-process-card {
  grid-template-columns: 74px minmax(0, 1fr);
}
.mad-process-step.even .mad-process-card {
  grid-template-columns: minmax(0, 1fr) 74px;
}
.mad-process-step.odd .mad-process-card > .process-icon { grid-column: 1; }
.mad-process-step.odd .mad-process-card > div { grid-column: 2; }
.mad-process-step.even .mad-process-card > div { grid-column: 1; }
.mad-process-step.even .mad-process-card > .process-icon { grid-column: 2; }
.mad-process-card > div { min-width: 0; }

@media (max-width: 1050px) {
  .mad-process-step.odd .mad-process-card { grid-template-columns: 58px minmax(0, 1fr); }
  .mad-process-step.even .mad-process-card { grid-template-columns: minmax(0, 1fr) 58px; }
}

@media (max-width: 760px) {
  /* Top-of-page banner artwork is decorative on narrow screens. Keep images
     inside the actual article, product and project content below the hero. */
  .hero > .hero-photo,
  .work-hero .hero-mockup,
  .ind-hero .hero-showcase,
  .pd-hero .pd-project-visual,
  .case-hero .case-hero-image,
  .editorial-hero > img,
  .article-shell > .article-hero,
  .contact-new-hero .contact-art,
  .team-hero .team-hero-art,
  .about-hero .about-media,
  .legal-hero .legal-hero-image { display: none; }

  .work-hero,
  .ind-hero .hero-layout,
  .pd-hero-grid,
  .about-hero-grid,
  .legal-hero-with-image { grid-template-columns: minmax(0, 1fr); }
  .editorial-hero { min-height: 0; }
  .editorial-hero-copy { position: relative; }
  .case-hero { min-height: 0; }
  .contact-new-hero .contact-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  /* Marketing Solutions detail pages share these two hero layouts. */
  .vc-hero .vc-art,
  .copywriting-page .cw-hero-art { display: none; }
  .vc-hero,
  .copywriting-page .cw-hero { min-height: 0; }
  .vc-hero-grid,
  .copywriting-page .cw-hero-grid { grid-template-columns: minmax(0, 1fr); }

  .contact-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 72px 20px;
  }
  .contact-section > *,
  .contact-copy,
  .contact-form,
  .home-contact-details,
  .home-contact-item > span { min-width: 0; }
  .contact-copy,
  .contact-form { width: 100%; max-width: 100%; justify-self: stretch; }
  .contact-section h2 { font-size: clamp(42px, 12vw, 68px); overflow-wrap: anywhere; }
  .home-contact-item { width: 100%; align-items: flex-start; }
  .home-contact-item > span { flex: 1; overflow-wrap: anywhere; }
  .home-contact-item .cms-rich-text,
  .home-contact-item .cms-rich-text p { max-width: 100%; margin: 0; overflow-wrap: anywhere; }
  .contact-form { padding: 24px 20px; }
  .contact-form input,
  .contact-form textarea { min-width: 0; }

  .mad-hero { min-height: 0; padding-top: 0; }
  .mad-hero-grid { padding-top: 95px; }
  .mad-hero-art { display: none; }
  .mad-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .mad-highlights > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
  .mad-highlights > div > span { min-width: 0; }
  .mad-highlights b { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
  .mad-highlights small { font-size: 10px; line-height: 1.35; }
  .mad-process-step.odd .mad-process-card,
  .mad-process-step.even .mad-process-card { grid-template-columns: 48px minmax(0, 1fr); }
  .mad-process-step.odd .mad-process-card > div,
  .mad-process-step.even .mad-process-card > div { grid-column: 2; grid-row: 1; }
  .mad-process-step.odd .mad-process-card > .process-icon,
  .mad-process-step.even .mad-process-card > .process-icon { grid-column: 1; grid-row: 1; }
}

@media (max-width: 400px) {
  .mad-highlights { gap: 6px; }
  .mad-highlights i { width: 40px; height: 40px; flex-basis: 40px; }
  .mad-highlights svg { width: 21px; height: 21px; }
  .mad-highlights b { font-size: 11px; }
}