/* ============================================================
   Global header — a floating glass bar with an Apple-style flyout
   ============================================================ */
.mh { position: relative; z-index: 60; }

/* --- Fixed, not sticky ---
   The bar floats over the page rather than capping it. Fixed on HubSpot's
   module wrapper (the id is deterministic: base.html declares the module as
   "site_header"), inset from the top and sides, with the page running
   underneath. The wrapper's gutter passes clicks through; only the pill,
   the flyout, the drawer and the curtain take them. */
:root { --mh-h: 78px; }   /* 14px inset + 62px pill + 2px border; module.js corrects it live */
html { scroll-padding-top: calc(var(--mh-h) + 12px); }   /* anchors otherwise land under the bar */
#hs_cos_wrapper_site_header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none; }
#hs_cos_wrapper_site_header .mh-utility,
#hs_cos_wrapper_site_header .mh-bar__inner,
#hs_cos_wrapper_site_header .mh-mobile,
#hs_cos_wrapper_site_header .mh-curtain { pointer-events: auto; }

/* The page clears the bar. When module.js finds a dark ground at the top of
   the page — the home and service heroes — it adds html.mh-under and the
   hero runs under the glass instead, carrying its own room. */
#main-content { padding-top: var(--mh-h); }
html.mh-under #main-content { padding-top: 0; }

/* --- Utility bar (off by default now; the links live in the footer) --- */
.mh-utility { background: var(--surface-inverse); border-bottom: 1px solid var(--border-inverse); }
.mh-utility__inner {
  max-width: 1280px; margin: 0 auto; padding: 9px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px;
}
.mh-utility__cities {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: var(--weight-medium) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-inverse-muted);
}
.mh-utility__links { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }
.mh-utility__links a {
  font: var(--weight-medium) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-inverse-muted); text-decoration: none;
}
.mh-utility__links a:hover { color: #fff; }

/* --- The pill ---
   Two states. PALE is the default and the safe one — dark type on pale
   glass reads over any page before the script has run. SLATE is added by
   module.js while the ground under the bar is dark. Dark-on-pale can be far
   more transparent than white-on-dark and still read, which is why the bar
   flips instead of one bar that darkens; less blur in the pale state on
   purpose, because heavy blur turns what is underneath into a wash and a
   wash reads as a slab. */
.mh-bar { position: relative; z-index: 2; padding: 14px 22px 0; }
.mh-bar__inner {
  position: relative; max-width: 1280px; margin: 0 auto; min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.42); border: 1px solid rgba(15,23,42,0.10);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 14px 34px -14px rgba(15,23,42,0.28);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.mh--slate .mh-bar__inner {
  background: rgba(10,12,16,0.22); border-color: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: none;
}
/* While the flyout is open the pill firms up to match the panel, so the two
   read as one surface (Apple's nav does the same). */
.mh--open .mh-bar__inner { background: rgba(255,255,255,0.86); }
.mh--open.mh--slate .mh-bar__inner { background: rgba(10,12,16,0.62); }
/* No backdrop-filter: near-opaque rather than type over raw page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-bar__inner { background: rgba(255,255,255,0.97); }
  .mh--slate .mh-bar__inner { background: var(--neutral-900); }
}

/* --- Lockup: two official artworks, one per state; never a filter --- */
.mh-logo { display: flex; align-items: center; flex: 0 0 auto; }
.mh-logo img { height: 40px; width: auto; display: block; }
.mh-logo .mh-logo__inverse { display: none; }
.mh--slate .mh-logo .mh-logo__primary { display: none; }
.mh--slate .mh-logo .mh-logo__inverse { display: block; }

/* --- Desktop nav ---
   Sentence case, regular weight, no tracking: the bar names places to go,
   it does not announce them. The uppercase eyebrow voice stays on the page. */
.mh-nav { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: 0; }
.mh-item { display: flex; align-items: stretch; }
.mh-item--simple { position: relative; }   /* simple panel aligns under its trigger */
.mh-item--mega { position: static; }        /* mega panel spans the whole pill */

.mh-trigger {
  display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 11px; border-radius: 9px;
  background: none; border: none; cursor: pointer;
  font: var(--weight-medium) 12.5px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-strong);
  transition: color 140ms var(--ease-standard), background 140ms var(--ease-standard);
}
.mh-trigger:hover { background: rgba(15,23,42,0.05); }
.mh-item.is-open .mh-trigger { background: rgba(15,23,42,0.08); box-shadow: inset 0 -3px 0 var(--data-teal, #3f969a); }
.mh-caret { flex: none; color: var(--text-muted); transition: transform 140ms var(--ease-standard); }
.mh-item.is-open .mh-caret { transform: rotate(180deg); }
.mh-macc__head[aria-expanded="true"] .mh-caret { transform: rotate(180deg); }
/* The drawer is white even under a slate header, so its carets keep the light-ground colour. */
.mh-mobile .mh-macc__head .mh-caret { color: var(--text-muted); }
.mh--slate .mh-trigger { color: rgba(255,255,255,0.82); }
.mh--slate .mh-trigger:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mh--slate .mh-item.is-open .mh-trigger { color: #fff; background: rgba(255,255,255,0.12); }
.mh--slate .mh-caret { color: rgba(255,255,255,0.5); }
/* Open over a dark hero the pill is firm slate, so the open item stays white. */

/* --- The curtain ---
   Apple's move: while a menu is open the rest of the page goes under glass.
   Fixed, full-screen, below the bar. Fades in on a short delay so a pass
   across the nav does not flash the page; fades out at once. */
.mh-curtain {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(232,232,237,0.40);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.4,0,0.6,1) 80ms, visibility 0s linear 400ms;
}
.mh--slate .mh-curtain { background: rgba(10,12,16,0.40); }
.mh--open .mh-curtain { opacity: 1; visibility: visible; transition-delay: 80ms, 0s; }

/* --- Flyouts ---
   The panel grows out of the pill: same surface, 6px below, the pill's
   radius. Not display-toggled — it rises 8px and fades over 240ms, and the
   links inside land a beat later, staggered, which is what makes the menu
   feel like it opened rather than appeared. */
.mh-panel {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15,23,42,0.10); border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard), visibility 0s linear 240ms;
}
.mh-item.is-open .mh-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-panel { background: #fff; }
}

.mh-panel--mega { top: calc(100% + 6px); left: 0; right: 0; padding: 34px 40px 32px; }
/* The elevated column takes the room; the small columns share the rest. */
.mh-mega { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(170px, 1fr)); gap: 40px; }
.mh-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mh-col__title {
  font: var(--weight-bold) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--data-teal-deep, #2f7b7e);
}
.mh-col__links { display: flex; flex-direction: column; gap: 2px; }
.mh-col__links a {
  padding: 5px 0; font: var(--weight-medium) 14.5px/1.35 var(--font-body);
  color: var(--text-body); text-decoration: none;
  transition: color 120ms var(--ease-standard);
}
.mh-col__links a:hover { color: var(--data-teal-deep, #2f7b7e); }
/* Apple's "elevated" group: the destinations that matter, in display type.
   The first column of each mega menu is the one that names the offer. */
.mh-col--elevated { padding-top: 12px; border-top: 3px solid var(--data-teal, #3f969a); }
.mh-col--elevated .mh-col__title { color: var(--data-teal-deep, #2f7b7e); }
.mh-col--elevated .mh-col__links { gap: 4px; }
.mh-col--elevated .mh-col__links a {
  padding: 4px 0; font: var(--weight-semibold) 24px/1.15 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-strong);
}
.mh-col--elevated .mh-col__links a:hover { color: var(--data-teal-deep, #2f7b7e); }
/* The promo is a slate box — the one place in the menu that says where the
   practices come from. Teal rule, white type, red only on the button. */
.mh-col--promo {
  position: relative; overflow: hidden; gap: 12px;
  padding: 24px 24px 22px; border-radius: 12px;
  background: rgba(44,46,53,0.94); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.mh-col--promo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--data-teal, #3f969a); }
.mh-col--promo .mh-col__title { color: #8fd0d3; }
.mh-col--promo a.mh-promo__title {
  font: var(--weight-semibold) 21px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
  color: #fff; text-decoration: none; text-wrap: balance;
}
.mh-col--promo a.mh-promo__title:hover { color: #8fd0d3; }
.mh-promo__desc { font: var(--role-body-sm); color: #c6c9d0; }
.mh-col--promo a.mh-promo__cta {
  margin-top: auto; padding-top: 6px;
  font: var(--weight-semibold) 12.5px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.mh-col--promo a.mh-promo__cta:hover { color: #ffb3bf; }

/* Featured results: the figure carries the row. */
.mh-col__links--stats a { display: flex; gap: 10px; align-items: baseline; }
.mh-stat__fig { flex: none; min-width: 58px; font: var(--weight-bold) 20px/1 var(--font-display); color: var(--data-teal-deep, #2f7b7e); font-variant-numeric: tabular-nums; }
.mh-stat__t small { display: block; font: var(--weight-regular) 12px/1.3 var(--font-body); color: var(--text-subtle); margin-top: 1px; }

/* The featured advisor, one a day. */
.mh-adv { display: flex; flex-direction: column; gap: 12px; }
.mh-adv[hidden] { display: none; }
.mh-adv__row { display: flex; gap: 14px; align-items: center; }
.mh-adv__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid rgba(255,255,255,0.18); flex: none; }
.mh-col--promo a.mh-adv__n { font-size: 19px; display: block; }
.mh-adv__r { display: block; margin-top: 4px; font: var(--weight-medium) 11px/1.3 var(--font-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: #c6c9d0; }
.mh-col--promo a.mh-adv__join { margin-top: 4px; font: var(--weight-regular) 12px/1.4 var(--font-body); color: #9a9ea8; text-decoration: none; }
.mh-col--promo a.mh-adv__join:hover { color: #fff; }

/* The latest blog post, inside the slate box: the post's own card at its
   1200 x 630 shape, then the title, then when and by whom. */
.mh-post__media {
  display: block; aspect-ratio: 1200 / 630; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.mh-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh-post__media img:not([src]) { visibility: hidden; }
.mh-col--promo a.mh-post__title {
  font-size: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Card then link: the link sits under the card rather than at the foot of
   the box, so the promo takes the room it needs and no more. */
.mh-col--post a.mh-promo__cta { margin-top: 2px; padding-top: 0; }

/* Staggered landing for whatever the panel holds. */
.mh-panel .mh-col, .mh-panel--simple a {
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.mh-item.is-open .mh-panel .mh-col, .mh-item.is-open .mh-panel--simple a { opacity: 1; transform: none; }
.mh-item.is-open .mh-col:nth-child(1), .mh-item.is-open .mh-panel--simple a:nth-child(1) { transition-delay: 60ms; }
.mh-item.is-open .mh-col:nth-child(2), .mh-item.is-open .mh-panel--simple a:nth-child(2) { transition-delay: 110ms; }
.mh-item.is-open .mh-col:nth-child(3), .mh-item.is-open .mh-panel--simple a:nth-child(3) { transition-delay: 160ms; }
.mh-item.is-open .mh-col:nth-child(4), .mh-item.is-open .mh-panel--simple a:nth-child(4) { transition-delay: 210ms; }
.mh-item.is-open .mh-col:nth-child(5), .mh-item.is-open .mh-panel--simple a:nth-child(5) { transition-delay: 260ms; }

/* Simple panel: under its trigger. 18px = the trigger's 3px seat + the
   pill's 8px padding + 1px border + the 6px gap. */
.mh-panel--simple { top: calc(100% + 18px); left: 0; min-width: 248px; padding: 10px; }
.mh-panel--simple a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font: var(--weight-medium) 14.5px/1.35 var(--font-body); color: var(--text-body); text-decoration: none;
}
.mh-panel--simple a:hover { background: var(--surface-hover); color: var(--data-teal-deep, #2f7b7e); }

@media (prefers-reduced-motion: reduce) {
  .mh-bar__inner, .mh-trigger, .mh-curtain, .mh-panel, .mh-panel .mh-col, .mh-panel--simple a { transition: none; }
}

/* --- Right-side actions --- */
.mh-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mh-search {
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 8px;
  background: none; border: 1px solid var(--border-subtle); border-radius: 10px;
  transition: border-color 140ms var(--ease-standard);
}
.mh-search:hover { border-color: var(--text-muted); }
.mh-search:focus-within { border-color: var(--data-teal, #3f969a); }
.mh-search__btn {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: color 140ms var(--ease-standard);
}
.mh-search:focus-within .mh-search__btn, .mh-search__btn:hover { color: var(--data-teal-deep, #2f7b7e); }
.mh-search__input {
  width: 84px; min-width: 0; padding: 0; border: none; background: none; outline: none;
  font: var(--weight-medium) 14px/1 var(--font-body); color: var(--text-strong);
}
.mh-search__input::placeholder { color: var(--text-muted); }
.mh-search__input::-webkit-search-decoration,
.mh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mh--slate .mh-search { border-color: rgba(255,255,255,0.20); }
.mh--slate .mh-search:hover { border-color: rgba(255,255,255,0.40); }
.mh--slate .mh-search__btn { color: rgba(255,255,255,0.70); }
.mh--slate .mh-search__input { color: #fff; }
.mh--slate .mh-search__input::placeholder { color: rgba(255,255,255,0.55); }
.mh-actions .mh-cta { border-radius: 10px; }

/* --- Mobile burger + drawer (hidden on desktop) --- */
.mh-burger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--border-subtle);
  border-radius: 10px; cursor: pointer; transition: border-color 220ms ease; }
.mh-burger span { display: block; height: 2px; background: var(--text-strong); border-radius: 2px; transition: 160ms var(--ease-standard); }
.mh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mh--slate .mh-burger { border-color: rgba(255,255,255,0.25); }
.mh--slate .mh-burger span { background: #fff; }

/* The drawer is a second pill under the first. */
.mh-mobile {
  display: none; max-width: 1280px; margin: 6px auto 0;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 8px 20px 24px; max-height: calc(100vh - var(--mh-h) - 24px); overflow-y: auto;
}
.mh-macc { border-bottom: 1px solid var(--border-subtle); }
.mh-macc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; background: none; border: none; cursor: pointer;
  font: var(--weight-medium) 16px/1 var(--font-body); color: var(--text-strong);
}
/* [hidden] needs saying: the display rule below outranks the browser's own
   [hidden] { display:none }, which left every section open and the drawer ~70 links long. */
.mh-macc__body[hidden] { display: none; }
.mh-macc__body { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 16px; }
.mh-macc__body a { padding: 9px 10px; font: var(--weight-medium) 15px/1.3 var(--font-body); color: var(--text-body); text-decoration: none; border-radius: var(--radius-sm); }
.mh-macc__body a:hover { background: var(--surface-hover); color: var(--data-teal-deep, #2f7b7e); }
.mh-macc__group { padding: 12px 10px 4px; font: var(--weight-bold) 10.5px/1.3 var(--font-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--data-teal-deep, #2f7b7e); }
.mh-macc__promo { margin-top: 6px; font-weight: var(--weight-semibold); color: var(--data-teal-deep, #2f7b7e) !important; }
.mh-mobile__search {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 4px;
  border-top: 1px solid var(--border-subtle); color: var(--text-muted);
  font: var(--weight-medium) 15px/1 var(--font-body);
}
.mh-mobile__cta { margin-top: 14px; }

/* --- Breakpoints --- */
/* Six sentence-case items plus the search field plus the CTA is 1134px of
   pill; below 1300px the search keeps its icon and gives up its field. */
@media (max-width: 1300px) {
  .mh-search { width: 44px; padding: 0; justify-content: center; }
  .mh-search__input { display: none; }
}
@media (max-width: 1140px) {
  .mh-nav, .mh-search { display: none; }
  .mh-burger { display: flex; }
  .mh-mobile[data-mh-mobile]:not([hidden]) { display: block; }
}
@media (max-width: 620px) {
  :root { --mh-h: 68px; }   /* 10px inset + 56px pill + border */
  .mh-bar { padding: 10px 12px 0; }
  .mh-bar__inner { min-height: 56px; gap: 10px; padding: 6px 6px 6px 14px; }
  .mh-logo img { height: 34px; }
  .mh-utility__cities { display: none; }
  .mh-actions a.mh-cta { display: none; }   /* CTA lives in the drawer on phones (specific enough to beat .mahdlo-btn) */
  .mh-utility__inner { justify-content: flex-end; }
}

/* Case Studies: the case study page's own cards, four across (Craig, 27 Sept
   2026). The drawings keep that page's type and ground; the frame, the
   industry label and the hover follow the menu, which is teal. Red stays on
   the button in the bar and nowhere else in the header (tidied the same day:
   link hovers, the search focus and the phone menu's promo link were red). */
.mh-col--cases { grid-column: span 3; }
.mh-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mh-case { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.mh-case__art { display: block; aspect-ratio: 373 / 232; overflow: hidden; border-radius: 8px; background: #f0f1f1;
  transition: transform 200ms cubic-bezier(0.2,0,0.1,1), box-shadow 200ms cubic-bezier(0.2,0,0.1,1); }
.mh-case__art svg { display: block; width: 100%; height: 100%; }
.mh-case__art .f { font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 700; }
.mh-case__art .f6 { font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600; }
.mh-case__art .c { font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-weight: 600; }
.mh-case__art .v { font-family: Barlow, sans-serif; font-weight: 600; font-size: 13px; }
.mh-case__art .s { font-family: Barlow, sans-serif; font-weight: 500; font-size: 11px; }
.mh-case__ind { margin-top: 4px; font: var(--weight-semibold) 10.5px/1.3 var(--font-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--data-teal-deep, #2f7b7e); }
.mh-case__t { font: var(--weight-semibold) 13.5px/1.35 var(--font-body); color: var(--text-strong);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mh-case:hover .mh-case__art { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(34,34,34,0.12); }
.mh-case:hover .mh-case__t { color: var(--data-teal-deep, #2f7b7e); }
.mh-case:focus-visible { outline: 2px solid var(--data-teal, #3f969a); outline-offset: 4px; border-radius: 8px; }
.mh-cases__all { align-self: flex-start; margin-top: 6px; font: var(--weight-semibold) 12px/1 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--data-teal-deep, #2f7b7e); text-decoration: none; }
.mh-cases__all:hover { text-decoration: underline; }
@media (max-width: 1180px) { .mh-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The numbers in the practice and industry tab strips (01 SaaS, Tech & AI ...)
   were 10px beside 14px labels; now the labels' size (Craig, 28 Sept 2026). Every generated page
   carries its own 10px rule, so this lifts them once, site-wide; the doubled
   id outranks the page's #p-page rule whichever loads last. */
#p-page#p-page .p-tab__n { font-size: 14px; font-variant-numeric: tabular-nums; }

/* Industries: a 3x3 of client logos in place of the Proof box (Craig, 28 Sept
   2026). Nine tiles, sized so the panel does not grow past its link columns. */
.mh-col--logos { display: flex; flex-direction: column; gap: 12px; }
.mh-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mh-logos li { display: flex; align-items: center; justify-content: center; height: 52px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px; }
.mh-logos img { display: block; max-width: 100%; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.mh-logos img:not([src]) { visibility: hidden; }

/* Insights: the ebooks and the latest post as case study cards. */
.mh-cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-case__art--cover { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.mh-case__art--cover img { display: block; height: 100%; width: auto; max-width: 100%; border-radius: 2px;
  box-shadow: 0 6px 16px rgba(34,34,34,0.18); }
/* Shown whole, not cropped: a 1.9:1 featured image in the 1.6:1 frame lost its
   headline's first and last letters. Blog featured images are drawn on the
   brand slate, so the frame's slate makes the letterbox disappear. */
.mh-case__art--photo { background: #2c2e35; }
.mh-case__art--photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mh-case__art img:not([src]) { visibility: hidden; }
@media (max-width: 1180px) { .mh-cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }