/* Unity Blog Hub. Scoped to .umbh so nothing outside the hub can be affected. */
body.unity-blog-hub-live { background: #F9FAFB; }
body.unity-blog-hub-live #content > .ast-container { display: block; max-width: 1240px; padding: 0 32px; margin-inline: auto; }
/* Astra styles #primary, and this rule is what neutralises its float/padding. The bottom padding
   lives HERE, not on .umbh, deliberately: this selector (1,1,1) and `.umbh` (0,1,0) target the very
   same element (<main class="umbh" id="primary">), so `padding: 0` here silently beat
   `.umbh { padding-bottom: 56px }` and the pager sat flush against the footer (measured gap: 0px).

   56px of breathing room so the page ends properly now that the closing CTA band is gone. Previously
   the band's own margin-top plus its height did this job. Matches the 46px section rhythm above. */
body.unity-blog-hub-live #primary { float: none; width: 100%; min-width: 0; margin: 0; padding: 0 0 56px; border: 0; }

.umbh {
  --um-bg: #F9FAFB; --um-surface: #FFFFFF; --um-ink: #212529; --um-body: #57647C;
  --um-accent: #FF4800; --um-navy: #1A1F56; --um-line: #DDE4EB; --um-radius: 14px;
  color: var(--um-ink);
  font: 400 17px/1.75 'Source Sans 3', sans-serif;
}
.umbh *, .umbh *::before, .umbh *::after { box-sizing: border-box; }
.umbh :where(h1, h2, h3, h4) { color: var(--um-ink); font-family: Manrope, sans-serif; font-weight: 700; line-height: 1.18; margin: 0; }
.umbh :where(a) { color: inherit; text-decoration: none; }
.umbh :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.umbh [hidden] { display: none !important; }
.umbh :where(button, input) { font-family: inherit; }

/* No `overflow: hidden` on the hero card, deliberately. The search dropdown is an absolutely
   positioned child of the card (it hangs off .umbh-search), so clipping the card sliced the open
   dropdown down to its first row. Measured on the live page: the popup's bottom sat 177px below
   the card, and elementFromPoint inside that hidden strip returned .umbh-groups, not the popup.
   `position: relative; z-index: 5` keeps the whole hero, popup included, above the sections below. */
.umbh-hero { padding: 30px 0 0; position: relative; z-index: 5; }
.umbh-hero-inner {
  background: linear-gradient(160deg, var(--um-navy) 0%, #24306f 100%);
  border-radius: 20px; padding: 40px 44px 36px; color: #fff; position: relative;
}
/* The orange glow used to be a circle parked outside the card (right:-70px; top:-90px) that relied
   on overflow:hidden to be trimmed. It is now painted inside the card's own box instead — same
   centre (100% - 110px, 90px) and same effective falloff (68% of 255px ≈ the old 68% of 254.6px),
   so it looks unchanged while no longer needing a clipping ancestor. Hero copy carries
   position:relative + z-index, which keeps the glow behind the text. */
.umbh-hero-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle 255px at calc(100% - 110px) 90px, rgba(255, 72, 0, .30) 0%, rgba(255, 72, 0, 0) 68%);
}
.umbh-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .62); position: relative; z-index: 1; }
.umbh-crumbs a { color: rgba(255, 255, 255, .82); }
.umbh-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.umbh-eyebrow { margin: 18px 0 12px; font: 600 11.5px/1 Manrope, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--um-accent); position: relative; z-index: 1; }
.umbh-title { font-size: 46px; letter-spacing: -1.2px; color: #fff; max-width: 19ch; position: relative; z-index: 1; }
.umbh-standfirst { margin: 16px 0 0; max-width: 62ch; font-size: 18px; color: rgba(255, 255, 255, .76); position: relative; z-index: 1; }

.umbh-search { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 26px 0 0; max-width: 620px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 6px 6px 6px 16px; }
.umbh-search:focus-within { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); }
.umbh-search-icon { width: 19px; height: 19px; flex: none; fill: rgba(255, 255, 255, .6); }
.umbh-search input[type="search"] { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 15.5px; padding: 9px 0; outline: none; }
.umbh-search input::placeholder { color: rgba(255, 255, 255, .5); }
.umbh-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.umbh-search-go { flex: none; background: var(--um-accent); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.umbh-search-go:hover { background: #e64100; }

.umbh-search-pop {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff; color: var(--um-ink);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, .22); padding: 8px; max-height: 400px; overflow-y: auto; z-index: 30;
}
.umbh-search-pop[hidden] { display: none; }
.umbh-pop-item { display: block; padding: 11px 12px; border-radius: 9px; }
.umbh-pop-item:hover, .umbh-pop-item:focus { background: #F4F6F8; }
.umbh-pop-item h4 { font: 600 15px/1.4 Manrope, sans-serif; margin: 0 0 2px; }
.umbh-pop-item p { margin: 0; font-size: 13px; color: var(--um-body); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.umbh-pop-item span { font-size: 11.5px; color: var(--um-accent); font-weight: 600; }
.umbh-pop-empty { padding: 16px 14px; font-size: 14px; color: var(--um-body); }
.umbh-pop-foot { padding: 10px 14px 6px; font-size: 12.5px; color: var(--um-body); border-top: 1px solid var(--um-line); margin-top: 6px; }

.umbh-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 0; position: relative; z-index: 1; }
.umbh-stats li { display: flex; flex-direction: column; }
.umbh-stats b { font: 700 21px/1.2 Manrope, sans-serif; color: #fff; }
.umbh-stats span { font-size: 12px; color: rgba(255, 255, 255, .58); letter-spacing: .3px; }

/* -------------------------------------------------------------- groups --- */
.umbh-section-head { margin-bottom: 20px; }
.umbh-section-head h2 { font-size: 25px; letter-spacing: -.4px; }
.umbh-section-head p { margin: 6px 0 0; font-size: 15px; color: var(--um-body); }

.umbh-groups { padding: 46px 0 0; }
.umbh-group-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.umbh-group { background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-radius); padding: 20px 20px 16px; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; }
.umbh-group:hover { border-color: #C8D3DE; box-shadow: 0 10px 28px rgba(16, 24, 40, .08); transform: translateY(-2px); }
.umbh-group-count { margin: 0 0 8px; font: 600 11.5px/1 Manrope, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--um-accent); }
.umbh-group h3 { font-size: 19px; letter-spacing: -.2px; }
.umbh-group h3 a:hover { color: var(--um-accent); }
.umbh-group h3 span { color: var(--um-accent); font-weight: 400; }
.umbh-group-blurb { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--um-body); flex: 1; }
.umbh-group ul { border-top: 1px solid var(--um-line); padding-top: 10px; }
.umbh-group li a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; color: #33404F; }
.umbh-group li a:hover { color: var(--um-accent); }
.umbh-group li i { font-style: normal; font-size: 11.5px; color: #93A0B4; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- body --- */
.umbh-body { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 40px; padding: 46px 0 0; align-items: start; }
.umbh-main { min-width: 0; }

.umbh-starters { margin-bottom: 46px; }
.umbh-starter-list { display: grid; gap: 8px; }
.umbh-starter-list a { display: flex; align-items: baseline; gap: 16px; background: var(--um-surface); border: 1px solid var(--um-line); border-radius: 11px; padding: 14px 18px; transition: border-color .16s, box-shadow .16s; }
.umbh-starter-list a:hover { border-color: #FFC4AB; box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.umbh-starter-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 72, 0, .10); color: var(--um-accent); font: 700 13px/26px Manrope, sans-serif; text-align: center; }
.umbh-starter-text { flex: 1; min-width: 0; }
.umbh-starter-text strong { display: block; font: 600 16.5px/1.4 Manrope, sans-serif; color: var(--um-ink); }
.umbh-starter-text em { display: block; font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--um-body); margin-top: 2px; }
.umbh-starter-meta { flex: none; font-size: 12px; color: #93A0B4; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- cards --- */
.umbh-latest-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.umbh-sort { display: inline-flex; background: var(--um-surface); border: 1px solid var(--um-line); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 20px; }
.umbh-sort a { padding: 7px 16px; border-radius: 999px; font-size: 13px; color: var(--um-body); font-weight: 600; }
.umbh-sort a.is-on { background: var(--um-navy); color: #fff; }
.umbh-sort a:not(.is-on):hover { color: var(--um-ink); background: #F1F4F7; }

.umbh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.umbh-card { min-width: 0; }
.umbh-card-link { display: flex; flex-direction: column; height: 100%; background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-radius); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.umbh-card-link:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 24, 40, .11); border-color: #C8D3DE; }
.umbh-card-media { position: relative; aspect-ratio: 16 / 10; background: #EDF1F5; overflow: hidden; }
.umbh-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.umbh-card-link:hover .umbh-card-media img { transform: scale(1.045); }
/* Cover tile for the 36 posts whose only image is a third-party hotlink (or one of the 28 phantom
   attachments with no file and no guid). Those posts genuinely have no usable image of our own, so
   rather than fake one the tile is built as a deliberate editorial panel: brand navy, the article's
   initial, and the accent rule. It has to read as designed, not as a failed image load. */
.umbh-card-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 58px/1 Manrope, sans-serif; letter-spacing: -1px; color: rgba(255, 255, 255, .26); background: linear-gradient(140deg, #2A3170 0%, #1A1F56 58%, #141948 100%); }
.umbh-card-fallback::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 36px; height: 3px; border-radius: 2px; background: var(--um-accent); transform: translateX(-50%); }
.umbh-card--lead .umbh-card-fallback { font-size: 108px; }
.umbh-card-topic { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .95); color: var(--um-ink); font: 600 11px/1 Manrope, sans-serif; letter-spacing: .4px; text-transform: uppercase; padding: 7px 10px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.umbh-card-body { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.umbh-card-title { font-size: 18.5px; line-height: 1.32; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.umbh-card-link:hover .umbh-card-title { color: var(--um-accent); }
.umbh-card-excerpt { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--um-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.umbh-card-meta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--um-line); display: flex; gap: 14px; font-size: 12.5px; color: #93A0B4; }

.umbh-card--lead { grid-column: span 3; }
.umbh-card--lead .umbh-card-link { flex-direction: row; align-items: stretch; }
.umbh-card--lead .umbh-card-media { flex: 0 0 58%; aspect-ratio: auto; }
.umbh-card--lead .umbh-card-topic { left: 16px; top: 16px; font-size: 11.5px; }
.umbh-card--lead .umbh-card-body { padding: 30px 34px; justify-content: center; gap: 2px; }
.umbh-card--lead .umbh-card-title { font-size: 31px; line-height: 1.22; letter-spacing: -.8px; -webkit-line-clamp: 3; }
.umbh-card--lead .umbh-card-excerpt { font-size: 16.5px; -webkit-line-clamp: 3; margin-top: 14px; }
.umbh-card--lead .umbh-card-meta { margin-top: 22px; font-size: 13.5px; }
.umbh-card--mini .umbh-card-body { padding: 13px 15px; }
.umbh-card--mini .umbh-card-title { font-size: 15px; -webkit-line-clamp: 2; }

.umbh-empty { padding: 40px; text-align: center; color: var(--um-body); border: 1px dashed var(--um-line); border-radius: var(--um-radius); }

/* ------------------------------------------------------ load more/pager --- */
.umbh-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.umbh-more-btn { background: var(--um-surface); color: var(--um-ink); border: 1px solid var(--um-line); border-radius: 999px; padding: 14px 34px; font: 600 15px/1 Manrope, sans-serif; cursor: pointer; transition: .16s; }
.umbh-more-btn:hover { border-color: var(--um-navy); color: var(--um-navy); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.umbh-more-btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.umbh-more-status { font-size: 13px; color: var(--um-body); min-height: 1em; }
.umbh-pager { margin-top: 26px; text-align: center; }
.umbh-pager ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.umbh-pager li span, .umbh-pager li a { display: block; min-width: 38px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--um-line); background: var(--um-surface); color: var(--um-body); }
.umbh-pager li a:hover { border-color: var(--um-navy); color: var(--um-navy); }
.umbh-pager li .current { background: var(--um-navy); border-color: var(--um-navy); color: #fff; }
.umbh-pager li .dots { border: 0; background: none; }

/* -------------------------------------------------------------- sidebar --- */
.umbh-side { min-width: 0; }
.umbh-side-inner { position: sticky; top: 96px; display: grid; gap: 22px; }
.umbh-side-block { background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-radius); padding: 18px 20px; }
.umbh-side-block h2 { font-size: 15px; letter-spacing: .2px; margin-bottom: 12px; }
.umbh-topic-list { display: grid; gap: 1px; max-height: 430px; overflow-y: auto; }
.umbh-topic-list li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: #33404F; border-bottom: 1px solid #F1F4F7; }
.umbh-topic-list li:last-child a { border-bottom: 0; }
.umbh-topic-list li a:hover { color: var(--um-accent); }
.umbh-topic-list li.is-on a { color: var(--um-accent); font-weight: 700; }
.umbh-topic-list i { font-style: normal; font-size: 11.5px; color: #93A0B4; font-variant-numeric: tabular-nums; }
.umbh-link-list { display: grid; gap: 2px; }
.umbh-link-list a { display: block; padding: 7px 0; font-size: 14px; color: #33404F; }
.umbh-link-list a:hover { color: var(--um-accent); }
.umbh-side-cta { background: var(--um-navy); border-color: var(--um-navy); color: #fff; }
.umbh-side-cta h2 { color: #fff; }
.umbh-side-cta p { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, .74); }
.umbh-side-cta .umbh-btn { background: var(--um-accent); color: #fff; justify-content: center; }

.umbh-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--um-accent); color: #fff; border-radius: 999px; padding: 13px 26px; font: 600 15px/1 Manrope, sans-serif; transition: .16s; }
.umbh-btn:hover { background: #e64100; color: #fff; }

/* ----------------------------------------------------------- cta band --- */
/* Closing CTA band removed on request 2026-09-23. The page was asking for a quote three times
   (header button, sidebar card, and this band); the sidebar one stays. */

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1100px) {
  .umbh-body { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
  .umbh-title { font-size: 38px; }
  .umbh-hero-inner { padding: 34px 32px 30px; }
  .umbh-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .umbh-body { grid-template-columns: minmax(0, 1fr); }
  .umbh-side-inner { position: static; }
  .umbh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .umbh-card--lead { grid-column: span 2; }
  .umbh-card--lead .umbh-card-title { font-size: 26px; }
  .umbh-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.unity-blog-hub-live #content > .ast-container { padding: 0 20px; }
  .umbh-hero-inner { padding: 26px 22px 24px; border-radius: 16px; }
  .umbh-title { font-size: 31px; letter-spacing: -.7px; max-width: none; }
  .umbh-standfirst { font-size: 16px; }
  .umbh-search { padding: 5px 5px 5px 12px; border-radius: 14px; }
  .umbh-search-go { padding: 9px 16px; font-size: 13.5px; }
  .umbh-search input[type="search"] { font-size: 14px; padding: 8px 0; }
  .umbh-stats { gap: 10px 24px; }
  .umbh-stats b { font-size: 18px; }
  .umbh-groups { padding-top: 34px; }
  .umbh-section-head h2 { font-size: 22px; }
  .umbh-grid { grid-template-columns: minmax(0, 1fr); }
  .umbh-group-grid { grid-template-columns: minmax(0, 1fr); }
  .umbh-card--lead { grid-column: span 1; }
  .umbh-card--lead .umbh-card-link { flex-direction: column; }
  .umbh-card--lead .umbh-card-media { flex: none; aspect-ratio: 16 / 10; }
  .umbh-card--lead .umbh-card-body { padding: 18px 19px 19px; justify-content: flex-start; }
  .umbh-card--lead .umbh-card-title { font-size: 22px; -webkit-line-clamp: 2; }
  .umbh-card--lead .umbh-card-excerpt { font-size: 15px; -webkit-line-clamp: 2; }
  .umbh-latest-head { align-items: flex-start; }
  .umbh-sort { margin-bottom: 16px; }
  /* .umbh-project responsive rules went with the CTA band (2026-09-23). */
  .umbh-starter-list a { padding: 12px 14px; gap: 12px; }
  .umbh-starter-meta { display: none; }
}