/* Project details as tags inside the hero, under the intro line */
.project-tags{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.project-tags li{
  margin:0; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  color:#F7F9FF; font-family:'Manrope',sans-serif; font-size:13px; font-weight:500; line-height:1.2; letter-spacing:.01em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); white-space:nowrap;
}
html.site-typography body .sales-campaign-grid__title{ text-align:center; width:100%; margin-left:auto !important; margin-right:auto !important; }
@media (max-width:767px){
  .project-tags{ margin-top:16px; gap:6px; }
  .project-tags li{ font-size:12px; padding:6px 12px; }
}

/* Mobile: give all marketing banners extra room at the top so the tags never touch the artwork.
   The artwork keeps its original size and stays anchored to the bottom. */
@media (max-width:767px){
  html.site-typography.marketing-case body section.project-banner.project-banner.project-banner.project-banner{
    aspect-ratio:auto !important;
    height:calc(100vw * 51 / 40 + 64px) !important;
  }
  html.marketing-case body section.project-banner.project-banner .project-banner__picture{
    height:calc(100vw * 51 / 40 * .833333) !important;
  }
}

/* Product case studies: same tags; mobile banner gets extra room above the artwork */
@media (max-width:767px){
  html.site-typography:not(.marketing-case) body section.project-banner.project-banner.project-banner.project-banner:has(.project-tags){
    aspect-ratio:auto !important;
    height:calc(100vw * 3 / 2 + 64px) !important;
  }
  html.site-typography:not(.marketing-case) body section.project-banner.project-banner:has(.project-tags) .project-banner__picture{
    height:calc(100vw * 3 / 2 * .833333) !important;
  }
}

/* Marketing case studies: center every section title (hero banner excluded). */
html.site-typography.marketing-case body main h2.ty-stitle,
html.site-typography.marketing-case body section:not(.project-banner) h2.ty-stitle{text-align:center!important;width:100%;margin-left:auto!important;margin-right:auto!important}
/* Two-column text blocks (Overview / Challenge, Visual Direction / Final Outcome …) stay left-aligned. */
html.site-typography.marketing-case body :is(div[style*="flex-direction:column"],div[style*="flex-direction: column"]) > h2.ty-stitle{text-align:left!important;margin-left:0!important}